Merge pull request #1113 from cardstack/initial-room-name

Give new AI chats a default room name

Author: IanCal

packages/host/app/components/ai-assistant/panel.gts

@@ -8,7 +8,6 @@ import Component from '@glimmer/component';
 //@ts-expect-error the types don't recognize the cached export
 import { tracked, cached } from '@glimmer/tracking';
 
-import format from 'date-fns/format';
 import { restartableTask, timeout } from 'ember-concurrency';
 import { Velcro } from 'ember-velcro';
 import { TrackedMap } from 'tracked-built-ins';
@@ -330,10 +329,7 @@ export default class AiAssistantPanel extends Component<Signature> {
       this.enterRoom(this.newSessionId!);
       return;
     }
-    let newRoomName = `${format(
-      new Date(),
-      "yyyy-MM-dd'T'HH:mm:ss.SSSxxx",
-    )} - ${this.matrixService.userId}`;
+    let newRoomName = 'New AI Assistant Chat';
     this.doCreateRoom.perform(newRoomName, [aiBotUsername]);
   }
 

packages/host/app/components/ai-assistant/past-session-item.gts

@@ -38,11 +38,11 @@ interface Signature {
 
 export default class PastSessionItem extends Component<Signature> {
   <template>
-    <li class='session' data-test-joined-room={{@room.name}}>
+    <li class='session' data-test-joined-room={{@room.roomId}}>
       <button
         class='view-session-button'
         {{on 'click' (fn @actions.open @room.roomId)}}
-        data-test-enter-room={{@room.name}}
+        data-test-enter-room={{@room.roomId}}
       >
         <div class='name'>{{@room.name}}</div>
         <div class='date' data-test-last-active={{this.lastActive}}>
@@ -59,7 +59,7 @@ export default class PastSessionItem extends Component<Signature> {
                 @height='20px'
                 class='menu-button'
                 aria-label='Options'
-                data-test-past-session-options-button={{@room.name}}
+                data-test-past-session-options-button={{@room.roomId}}
                 {{bindings}}
               />
             </:trigger>

packages/host/app/components/matrix/room.gts

@@ -40,8 +40,8 @@ export default class Room extends Component<Signature> {
       class='room'
       data-room-settled={{this.doWhenRoomChanges.isIdle}}
       data-test-room-settled={{this.doWhenRoomChanges.isIdle}}
-      data-test-room={{this.room.name}}
-      data-test-room-id={{this.room.roomId}}
+      data-test-room-name={{this.room.name}}
+      data-test-room={{this.room.roomId}}
     >
       {{#if this.room.messages}}
         <AiAssistantConversation>
@@ -68,7 +68,7 @@ export default class Room extends Component<Signature> {
             @onInput={{this.setMessage}}
             @onSend={{this.sendMessage}}
             @canSend={{this.canSend}}
-            data-test-message-field={{this.room.name}}
+            data-test-message-field={{this.room.roomId}}
           />
           <AiAssistantCardPicker
             @autoAttachedCard={{this.autoAttachedCard}}

packages/host/app/services/matrix-service.ts

@@ -1,8 +1,9 @@
 import type RouterService from '@ember/routing/router-service';
 import Service, { service } from '@ember/service';
-
 import { tracked } from '@glimmer/tracking';
 
+import format from 'date-fns/format';
+
 import { task } from 'ember-concurrency';
 import { marked } from 'marked';
 import {
@@ -296,7 +297,11 @@ export default class MatrixService extends Service {
       invite,
       name,
       topic,
-      room_alias_name: encodeURIComponent(name),
+      room_alias_name: encodeURIComponent(
+        `${name} - ${format(new Date(), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")} - ${
+          this.userId
+        }`,
+      ),
     });
     invites.map((i) => {
       let fullId = i.startsWith('@') ? i : `@${i}:${userId!.split(':')[1]}`;

packages/host/tests/integration/components/operator-mode-test.gts

@@ -686,8 +686,8 @@ module('Integration | operator-mode', function (hooks) {
       await click('[data-test-open-ai-assistant]');
       await waitFor('[data-test-room-settled]');
       let roomId = document
-        .querySelector('[data-test-room-id]')
-        ?.getAttribute('data-test-room-id');
+        .querySelector('[data-test-room]')
+        ?.getAttribute('data-test-room');
       if (!roomId) {
         throw new Error('Expected a room ID');
       }
@@ -963,28 +963,34 @@ module('Integration | operator-mode', function (hooks) {
       let tinyDelay = () => new Promise((resolve) => setTimeout(resolve, 1)); // Add a tiny artificial delay to ensure rooms are created in the correct order with increasing timestamps
       await matrixService.createAndJoinRoom('test1', 'test room 1');
       await tinyDelay();
-      await matrixService.createAndJoinRoom('test2', 'test room 2');
+      const room2Id = await matrixService.createAndJoinRoom(
+        'test2',
+        'test room 2',
+      );
       await tinyDelay();
-      await matrixService.createAndJoinRoom('test3', 'test room 3');
+      const room3Id = await matrixService.createAndJoinRoom(
+        'test3',
+        'test room 3',
+      );
 
       await waitFor(`[data-test-open-ai-assistant]`);
       await click('[data-test-open-ai-assistant]');
       await waitFor(`[data-room-settled]`);
 
       assert
-        .dom('[data-test-room="test room 3"]')
+        .dom(`[data-test-room="${room3Id}"]`)
         .exists(
           "test room 3 is the most recently created room and it's opened initially",
         );
 
       await click('[data-test-past-sessions-button]');
-      await click('[data-test-enter-room="test room 2"]');
+      await click(`[data-test-enter-room="${room2Id}"]`);
 
       await click('[data-test-close-ai-assistant]');
       await click('[data-test-open-ai-assistant]');
       await waitFor(`[data-room-settled]`);
       assert
-        .dom('[data-test-room="test room 2"]')
+        .dom(`[data-test-room="${room2Id}"]`)
         .exists(
           "test room 2 is the most recently selected room and it's opened initially",
         );
@@ -997,7 +1003,7 @@ module('Integration | operator-mode', function (hooks) {
       await click('[data-test-open-ai-assistant]');
       await waitFor(`[data-room-settled]`);
       assert
-        .dom('[data-test-room="test room 3"]')
+        .dom(`[data-test-room="${room3Id}"]`)
         .exists(
           "test room 3 is the most recently created room and it's opened initially",
         );

packages/matrix/helpers/index.ts

@@ -9,6 +9,7 @@ import {
 import { registerUser } from '../docker/synapse';
 export const testHost = 'http://localhost:4202/test';
 export const mailHost = 'http://localhost:5001';
+export const initialRoomName = 'New AI Assistant Chat';
 
 interface ProfileAssertions {
   userId?: string;
@@ -249,40 +250,40 @@ export async function logout(page: Page) {
 
 export async function createRoom(page: Page) {
   await page.locator('[data-test-create-room-btn]').click();
-  let roomName = await getRoomName(page);
-  await isInRoom(page, roomName);
-  return roomName;
+  let roomId = await getRoomId(page);
+  await isInRoom(page, roomId);
+  return roomId;
 }
 
 export async function createRoomWithMessage(page: Page, message?: string) {
-  let roomName = await createRoom(page);
-  await sendMessage(page, roomName, message ?? 'Hello, world!');
-  return roomName;
+  let roomId = await createRoom(page);
+  await sendMessage(page, roomId, message ?? 'Hello, world!');
+  return roomId;
 }
 
-export async function getRoomName(page: Page) {
+export async function getRoomId(page: Page) {
   await page.locator(`[data-test-room-settled]`).waitFor();
-  let name = await page
+  let roomId = await page
     .locator('[data-test-room]')
     .getAttribute('data-test-room');
-  if (name == null) {
-    throw new Error('room name is not found');
+  if (roomId == null) {
+    throw new Error('room ID is not found');
   }
-  return name;
+  return roomId;
 }
 
-export async function isInRoom(page: Page, roomName: string) {
-  await page.locator(`[data-test-room="${roomName}"]`).waitFor();
+export async function isInRoom(page: Page, roomId: string) {
+  await page.locator(`[data-test-room="${roomId}"]`).waitFor();
   await expect(page.locator(`[data-test-room-settled]`)).toHaveCount(1);
 }
 
-export async function deleteRoom(page: Page, roomName: string) {
+export async function deleteRoom(page: Page, roomId: string) {
   await page.locator(`[data-test-past-sessions-button]`).click();
 
   // Here, past sessions could be rerendered because in one case we're creating a new room when opening an AI panel, so we need to wait for the past sessions to settle
   await page.waitForTimeout(500);
   await page
-    .locator(`[data-test-past-session-options-button="${roomName}"]`)
+    .locator(`[data-test-past-session-options-button="${roomId}"]`)
     .click();
 
   await page.locator(`[data-test-boxel-menu-item-text="Delete"]`).click();
@@ -293,16 +294,16 @@ export async function deleteRoom(page: Page, roomName: string) {
     .click();
 }
 
-export async function openRoom(page: Page, roomName: string) {
+export async function openRoom(page: Page, roomId: string) {
   await page.locator(`[data-test-past-sessions-button]`).click(); // toggle past sessions on
-  await page.locator(`[data-test-enter-room="${roomName}"]`).click();
-  await isInRoom(page, roomName);
+  await page.locator(`[data-test-enter-room="${roomId}"]`).click();
+  await isInRoom(page, roomId);
 }
 
-export async function openRenameMenu(page: Page, name: string) {
+export async function openRenameMenu(page: Page, roomId: string) {
   await page.locator(`[data-test-past-sessions-button]`).click();
   await page
-    .locator(`[data-test-past-session-options-button="${name}"]`)
+    .locator(`[data-test-past-session-options-button="${roomId}"]`)
     .click();
   await expect(
     page.locator(`[data-test-boxel-menu-item-text="Rename"]`),
@@ -313,12 +314,12 @@ export async function openRenameMenu(page: Page, name: string) {
 
 export async function writeMessage(
   page: Page,
-  roomName: string,
+  roomId: string,
   message: string,
 ) {
-  await page.locator(`[data-test-message-field="${roomName}"]`).fill(message);
+  await page.locator(`[data-test-message-field="${roomId}"]`).fill(message);
   await expect(
-    page.locator(`[data-test-message-field="${roomName}"]`),
+    page.locator(`[data-test-message-field="${roomId}"]`),
   ).toHaveValue(message);
 }
 
@@ -337,7 +338,7 @@ export async function selectCardFromCatalog(
 
 export async function sendMessage(
   page: Page,
-  roomName: string,
+  roomId: string,
   message: string | undefined,
   cardIds?: string[],
 ) {
@@ -347,7 +348,7 @@ export async function sendMessage(
     );
   }
   if (message != null) {
-    await writeMessage(page, roomName, message);
+    await writeMessage(page, roomId, message);
   }
   if (cardIds?.length) {
     for (let cardId of cardIds) {