Merge pull request #2028 from cardstack/bug-streaming

Fix bug preventing AI Assistant responses from showing as they stream in.

packages/host/app/lib/matrix-classes/message.ts

@@ -1,3 +1,5 @@
+import { tracked } from '@glimmer/tracking';
+
 import { EventStatus } from 'matrix-js-sdk';
 
 import { getCard } from '@cardstack/runtime-common';
@@ -41,6 +43,9 @@ interface RoomMessageOptional {
 }
 
 export class Message implements RoomMessageInterface {
+  @tracked formattedMessage: string;
+  @tracked message: string;
+
   attachedCardIds?: string[] | null;
   attachedSkillCardIds?: string[] | null;
   index?: number;
@@ -51,12 +56,10 @@ export class Message implements RoomMessageInterface {
   command?: MessageCommand | null;
 
   author: RoomMember;
-  formattedMessage: string;
   status: EventStatus | null;
   created: Date;
   updated: Date;
   eventId: string;
-  message: string;
   roomId: string;
 
   constructor(init: RoomMessageInterface) {

packages/host/app/resources/room.ts

@@ -294,7 +294,7 @@ export class RoomResource extends Resource<Args> {
         !event.content.isStreamingFinished
       ) {
         // we don't need to process this event if it's not finished streaming,
-        // but we do need to note it's creation time so that we can capture the earliest one
+        // but we do need to capture the earliest create time and update the message
         let earliestKnownCreateTime =
           this._messageCreateTimesCache.get(effectiveEventId);
         if (
@@ -309,6 +309,9 @@ export class RoomResource extends Resource<Args> {
             this._messageCache.get(effectiveEventId);
           if (alreadyProcessedMessage) {
             alreadyProcessedMessage.created = new Date(event.origin_server_ts);
+            alreadyProcessedMessage.message = event.content.body;
+            alreadyProcessedMessage.formattedMessage =
+              event.content.formatted_body;
           }
         }
         return;

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

@@ -1722,6 +1722,50 @@ module('Integration | ai-assistant-panel', function (hooks) {
         'ai-avatar-animated',
         'Answer to my current question is in progress',
       );
+    assert
+      .dom('[data-test-message-idx="3"] [data-test-ai-message-content]')
+      .hasText('French bulldog is a');
+
+    simulateRemoteMessage(
+      roomId,
+      '@aibot:localhost',
+      {
+        body: 'French bulldog is a French breed',
+        msgtype: 'm.text',
+        formatted_body: 'French bulldog is a French breed',
+        format: 'org.matrix.custom.html',
+        isStreamingFinished: false,
+        'm.relates_to': {
+          rel_type: 'm.replace',
+          event_id: partialEventId,
+        },
+      },
+      {
+        origin_server_ts: Date.now(),
+      },
+    );
+    await waitUntil(() => {
+      let el = document.querySelector(
+        '[data-test-message-idx="3"] [data-test-ai-message-content]',
+      );
+      if (el) {
+        return (
+          (el as HTMLElement).innerText === 'French bulldog is a French breed'
+        );
+      } else {
+        return false;
+      }
+    });
+
+    assert
+      .dom('[data-test-message-idx="3"] [data-test-ai-avatar]')
+      .hasClass(
+        'ai-avatar-animated',
+        'Answer to my current question is in progress',
+      );
+    assert
+      .dom('[data-test-message-idx="3"] [data-test-ai-message-content]')
+      .hasText('French bulldog is a French breed');
 
     await click('[data-test-past-sessions-button]');
     assert.dom(`[data-test-enter-room='${roomId}']`).includesText('Thinking');
@@ -1761,6 +1805,9 @@ module('Integration | ai-assistant-panel', function (hooks) {
         'ai-avatar-animated',
         'Answer to my last question is not in progress',
       );
+    assert
+      .dom('[data-test-message-idx="3"] [data-test-ai-message-content]')
+      .hasText('French bulldog is a French breed of companion dog or toy dog');
 
     assert
       .dom(`[data-test-enter-room='${roomId}']`)