Fix scrolling as new AI Assistant response comes in (#2159)

Author: FadhlanR

Diff for: packages/host/app/components/ai-assistant/message/index.gts

@@ -89,6 +89,7 @@ interface MessageScrollerSignature {
 
 class MessageScroller extends Modifier<MessageScrollerSignature> {
   private hasRegistered = false;
+  private observer?: MutationObserver;
   modify(
     element: HTMLElement,
     _positional: [],
@@ -102,14 +103,32 @@ class MessageScroller extends Modifier<MessageScrollerSignature> {
         scrollTo: element.scrollIntoView.bind(element),
       });
     }
+
+    this.observer?.disconnect();
+
+    this.observer = new MutationObserver(() => {
+      registerScroller({
+        index,
+        element,
+        scrollTo: element.scrollIntoView.bind(element),
+      });
+    });
+    this.observer.observe(element, { childList: true, subtree: true });
+
+    registerDestructor(this, () => {
+      this.observer?.disconnect();
+    });
   }
 }
 
 interface ScrollPositionSignature {
   Args: {
     Named: {
       setScrollPosition: (args: { isBottom: boolean }) => void;
-      registerConversationScroller: (isScrollable: () => boolean) => void;
+      registerConversationScroller: (
+        isScrollable: () => boolean,
+        scrollToBottom: () => void,
+      ) => void;
     };
   };
 }
@@ -131,6 +150,9 @@ class ScrollPosition extends Modifier<ScrollPositionSignature> {
       this.hasRegistered = true;
       registerConversationScroller(
         () => element.scrollHeight > element.clientHeight,
+        () => {
+          element.scrollTop = element.scrollHeight - element.clientHeight;
+        },
       );
     }
 
@@ -407,7 +429,10 @@ interface AiAssistantConversationSignature {
   Element: HTMLDivElement;
   Args: {
     setScrollPosition: (args: { isBottom: boolean }) => void;
-    registerConversationScroller: (isScrollable: () => boolean) => void;
+    registerConversationScroller: (
+      isScrollable: () => boolean,
+      scrollToBottom: () => void,
+    ) => void;
   };
   Blocks: {
     default: [];

Diff for: packages/host/app/components/matrix/room.gts

@@ -228,6 +228,7 @@ export default class Room extends Component<Signature> {
 
   @tracked private currentMonacoContainer: number | undefined;
   private getConversationScrollability: (() => boolean) | undefined;
+  private scrollConversationToBottom: (() => void) | undefined;
   private roomScrollState: WeakMap<
     RoomData,
     {
@@ -352,7 +353,7 @@ export default class Room extends Component<Signature> {
   }: {
     index: number;
     element: HTMLElement;
-    scrollTo: () => void;
+    scrollTo: (arg?: any) => void;
   }) => {
     this.messageElements.set(element, index);
     this.messageScrollers.set(index, scrollTo);
@@ -380,13 +381,17 @@ export default class Room extends Component<Signature> {
       index === this.lastReadMessageIndex + 1
     ) {
       scrollTo();
+    } else if (this.isScrolledToBottom) {
+      this.scrollConversationToBottom?.();
     }
   };
 
   private registerConversationScroller = (
     isConversationScrollable: () => boolean,
+    scrollToBottom: () => void,
   ) => {
     this.getConversationScrollability = isConversationScrollable;
+    this.scrollConversationToBottom = scrollToBottom;
   };
 
   private setScrollPosition = ({ isBottom }: { isBottom: boolean }) => {

Diff for: packages/host/tests/integration/components/ai-assistant-panel-test.gts

@@ -1609,6 +1609,55 @@ module('Integration | ai-assistant-panel', function (hooks) {
     );
   });
 
+  test('scrolling stays at the bottom if a message is streaming in', async function (assert) {
+    await setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template>
+          <OperatorMode @onClose={{noop}} />
+          <CardPrerender />
+        </template>
+      },
+    );
+    await waitFor('[data-test-person="Fadhlan"]');
+    let roomId = createAndJoinRoom('@testuser:staging', 'test room 1');
+    fillRoomWithReadMessages(roomId);
+    await settled();
+    await click('[data-test-open-ai-assistant]');
+    await waitFor('[data-test-message-idx="39"]');
+    assert.ok(
+      isAiAssistantScrolledToBottom(),
+      'AI assistant is scrolled to bottom',
+    );
+
+    let eventId = simulateRemoteMessage(roomId, '@aibot:localhost', {
+      body: `thinking...`,
+      msgtype: 'm.text',
+      formatted_body: `thinking...`,
+      format: 'org.matrix.custom.html',
+      isStreamingFinished: false,
+    });
+    assert.ok(
+      isAiAssistantScrolledToBottom(),
+      'AI assistant is scrolled to bottom',
+    );
+    simulateRemoteMessage(roomId, '@aibot:localhost', {
+      body: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
+      msgtype: 'm.text',
+      formatted_body: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
+      format: 'org.matrix.custom.html',
+      isStreamingFinished: true,
+      ['m.relates_to']: {
+        rel_type: 'm.replace',
+        event_id: eventId,
+      },
+    });
+    assert.ok(
+      isAiAssistantScrolledToBottom(),
+      'AI assistant is scrolled to bottom',
+    );
+  });
+
   test('sends read receipts only for bot messages', async function (assert) {
     let roomId = await renderAiAssistantPanel();