Fix unable to scroll messages in chat panel (#1094)

cardstack · Mar 15, 2024 · bf85d72 · bf85d72
1 parent e26d5b8
commit bf85d72
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/host/app/components/ai-assistant/message/index.gts b/packages/host/app/components/ai-assistant/message/index.gts
@@ -233,7 +233,6 @@ export class AiAssistantConversation extends Component<AiAssistantConversationSi
       .ai-assistant-conversation {
         display: flex;
         flex-direction: column;
-        justify-content: flex-end;
         padding: var(--boxel-sp);
         overflow-y: auto;
       }

diff --git a/packages/host/app/components/matrix/room.gts b/packages/host/app/components/matrix/room.gts
@@ -8,6 +8,7 @@ import { enqueueTask, restartableTask, timeout, all } from 'ember-concurrency';
 
 import { TrackedMap } from 'tracked-built-ins';
 
+import scrollIntoViewModifier from '@cardstack/host/modifiers/scroll-into-view';
 import { getRoom } from '@cardstack/host/resources/room';
 
 import type CardService from '@cardstack/host/services/card-service';
@@ -41,7 +42,11 @@ export default class Room extends Component<Signature> {
       {{#if this.room.messages}}
         <AiAssistantConversation>
           {{#each this.room.messages as |message i|}}
-            <RoomMessage @message={{message}} data-test-message-idx={{i}} />
+            <RoomMessage
+              @message={{message}}
+              data-test-message-idx={{i}}
+              {{scrollIntoViewModifier (this.isLastMessage i)}}
+            />
           {{/each}}
         </AiAssistantConversation>
       {{else}}
@@ -252,6 +257,13 @@ export default class Room extends Component<Signature> {
       )
     );
   }
+
+  @action
+  private isLastMessage(messageIndex: number) {
+    return (
+      (this.room && messageIndex === this.room.messages.length - 1) ?? false
+    );
+  }
 }
 
 declare module '@glint/environment-ember-loose/registry' {