display chat title and update styles (#1100)

cardstack · Mar 18, 2024 · 4ab82bc · 4ab82bc
1 parent 0f70f81
commit 4ab82bc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/host/app/components/ai-assistant/panel.gts b/packages/host/app/components/ai-assistant/panel.gts
@@ -78,7 +78,9 @@ export default class AiAssistantPanel extends Component<Signature> {
                 width='20'
                 height='20'
               />
-              <h3 class='panel-title-text'>Assistant</h3>
+              <h3 class='panel-title-text' data-test-chat-title>
+                {{if this.currentRoom.name this.currentRoom.name 'Assistant'}}
+              </h3>
             </div>
           {{/if}}
           <IconButton
@@ -193,27 +195,36 @@ export default class AiAssistantPanel extends Component<Signature> {
         z-index: 1;
       }
       .panel-header {
+        --panel-title-height: 44px;
         position: relative;
         padding: var(--boxel-sp) calc(var(--boxel-sp) / 2) var(--boxel-sp)
           var(--boxel-sp-lg);
       }
       .panel-title-group {
+        height: var(--panel-title-height);
         align-items: center;
         display: flex;
         gap: var(--boxel-sp-xs);
         margin-bottom: var(--boxel-sp);
       }
       .panel-title-text {
         margin: 0;
+        padding-right: var(--boxel-sp-xl);
         color: var(--boxel-light);
         font: 700 var(--boxel-font);
         letter-spacing: var(--boxel-lsp);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
       .close-ai-panel {
         --icon-color: var(--boxel-highlight);
         position: absolute;
         right: var(--boxel-sp-xs);
-        top: var(--boxel-sp-sm);
+        top: var(--boxel-sp);
+        height: var(--panel-title-height);
         z-index: 1;
       }
       .header-buttons {

diff --git a/packages/matrix/tests/room-creation.spec.ts b/packages/matrix/tests/room-creation.spec.ts
@@ -105,9 +105,13 @@ test.describe('Room creation', () => {
 
     let room1 = await getRoomName(page);
     await assertRooms(page, [room1]);
+    await expect(page.locator(`[data-test-chat-title]`)).toHaveCount(0);
     await sendMessage(page, room1, 'Hello');
+    await expect(page.locator(`[data-test-chat-title]`)).toHaveText(room1);
 
     let room2 = await createRoomWithMessage(page);
+    await expect(page.locator(`[data-test-chat-title]`)).toHaveText(room2);
+
     let room3 = await createRoom(page);
     await assertRooms(page, [room1, room2, room3]);
 
@@ -136,6 +140,7 @@ test.describe('Room creation', () => {
 
     await openRoom(page, newRoom1);
     await expect(page.locator(`[data-test-room="${newRoom1}"]`)).toHaveCount(1);
+    await expect(page.locator(`[data-test-chat-title]`)).toHaveText(newRoom1);
 
     await reloadAndOpenAiAssistant(page);
     await assertRooms(page, [newRoom1, room2, room3]);
@@ -273,10 +278,12 @@ test.describe('Room creation', () => {
     await assertRooms(page, [room1, room2, room3]);
 
     await isInRoom(page, room3);
+    await expect(page.locator(`[data-test-chat-title]`)).toHaveText(room3);
     await deleteRoom(page, room3); // current room is deleted
     await page.locator(`[data-test-close-past-sessions]`).click();
     await assertRooms(page, [room1, room2]);
     await isInRoom(page, room2); // is in latest available room
+    await expect(page.locator(`[data-test-chat-title]`)).toHaveText(room2);
 
     await deleteRoom(page, room1); // a different room is deleted
     await page.locator(`[data-test-close-past-sessions]`).click();
@@ -289,6 +296,7 @@ test.describe('Room creation', () => {
     let newRoom = await getRoomName(page);
     await isInRoom(page, newRoom);
     await assertRooms(page, [newRoom]);
+    await expect(page.locator(`[data-test-chat-title]`)).toHaveCount(0);
   });
 
   test('it orders past-sessions list items based on last activity in reverse chronological order', async ({