Add a message streaming indicator in AI conversation

packages/ai-bot/main.ts

@@ -4,7 +4,6 @@ import {
   RoomMemberEvent,
   RoomEvent,
   createClient,
-  ISendEventResponse,
   Room,
   MatrixClient,
 } from 'matrix-js-sdk';
@@ -61,19 +60,23 @@ async function sendMessage(
   room: Room,
   content: string,
   eventToUpdate: string | undefined,
+  data: any = {},
 ) {
   log.info('Sending', content);
   let messageObject: IContent = {
-    body: content,
-    msgtype: 'm.text',
-    formatted_body: content,
-    format: 'org.matrix.custom.html',
-    'm.new_content': {
+    ...{
       body: content,
       msgtype: 'm.text',
       formatted_body: content,
       format: 'org.matrix.custom.html',
+      'm.new_content': {
+        body: content,
+        msgtype: 'm.text',
+        formatted_body: content,
+        format: 'org.matrix.custom.html',
+      },
     },
+    ...data,
   };
   return await sendEvent(
     client,
@@ -174,7 +177,7 @@ async function setTitle(
   let startOfConversation = [
     {
       role: 'system',
-      content: `You are a chat titling system, you must read the conversation and return a suggested title of no more than six words. 
+      content: `You are a chat titling system, you must read the conversation and return a suggested title of no more than six words.
               Do NOT say talk or discussion or discussing or chat or chatting, this is implied by the context.
               Explain the general actions and user intent.`,
     } as OpenAIPromptMessage,
@@ -325,10 +328,12 @@ Common issues are:
       if (event.getSender() === aiBotUserId) {
         return;
       }
-      let initialMessage: ISendEventResponse = await client.sendHtmlMessage(
-        room!.roomId,
-        'Thinking...',
+
+      let initialMessage = await sendMessage(
+        client,
+        room,
         'Thinking...',
+        undefined,
       );
 
       let initial = await client.roomInitialSync(room!.roomId, 1000);
@@ -401,9 +406,9 @@ Common issues are:
       });
       if (finalContent) {
         finalContent = cleanContent(finalContent);
-      }
-      if (finalContent) {
-        await sendMessage(client, room, finalContent, initialMessage.event_id);
+        await sendMessage(client, room, finalContent, initialMessage.event_id, {
+          isStreamingFinished: true,
+        });
       }
 
       if (shouldSetRoomTitle(eventList, aiBotUserId, sentCommands)) {

packages/base/room.gts

@@ -21,6 +21,7 @@ import {
 } from '@cardstack/runtime-common';
 //@ts-expect-error cached type not available yet
 import { cached } from '@glimmer/tracking';
+import BooleanField from './boolean';
 
 // this is so we can have triple equals equivalent room member cards
 function upsertRoomMember({
@@ -240,6 +241,7 @@ export class MessageField extends FieldDef {
   @field index = contains(NumberField);
   @field transactionId = contains(StringField);
   @field command = contains(PatchField);
+  @field isStreamingFinished = contains(BooleanField);
 
   static embedded = EmbeddedMessageField;
   // The edit template is meant to be read-only, this field card is not mutable
@@ -507,6 +509,11 @@ export class RoomField extends FieldDef {
             }),
           });
         } else {
+          // Text from the AI bot
+          if (event.content.msgtype === 'm.text') {
+            (cardArgs as any).isStreamingFinished =
+              !!event.content.isStreamingFinished; // Indicates whether streaming (message updating while AI bot is sending more content into the message) has finished
+          }
           messageField = new MessageField(cardArgs);
         }
 
@@ -674,6 +681,7 @@ interface MessageEvent extends BaseMatrixEvent {
     format: 'org.matrix.custom.html';
     body: string;
     formatted_body: string;
+    isStreamingFinished: boolean;
   };
   unsigned: {
     age: number;
@@ -726,6 +734,7 @@ export interface CardMessageContent {
   format: 'org.matrix.custom.html';
   body: string;
   formatted_body: string;
+  isStreamingFinished?: boolean;
   data: {
     // we use this field over the wire since the matrix message protocol
     // limits us to 65KB per message

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

@@ -24,6 +24,7 @@ interface Signature {
     formattedMessage: SafeString;
     datetime: Date;
     isFromAssistant: boolean;
+    isStreaming: boolean;
     profileAvatar?: ComponentLike;
     attachedCards?: CardDef[];
     errorMessage?: string;
@@ -50,7 +51,10 @@ export default class AiAssistantMessage extends Component<Signature> {
     >
       <div class='meta'>
         {{#if @isFromAssistant}}
-          <div class='ai-avatar'></div>
+          <div
+            class='ai-avatar {{if this.isAvatarAnimated "ai-avatar-animated"}}'
+            data-test-ai-avatar
+          ></div>
         {{else if @profileAvatar}}
           <@profileAvatar />
         {{/if}}
@@ -122,6 +126,11 @@ export default class AiAssistantMessage extends Component<Signature> {
         background-repeat: no-repeat;
         background-size: var(--ai-assistant-message-avatar-size);
       }
+
+      .ai-avatar-animated {
+        background-image: url('../ai-assist-icon-animated.webp');
+      }
+
       .avatar-img {
         width: var(--ai-assistant-message-avatar-size);
         height: var(--ai-assistant-message-avatar-size);
@@ -212,6 +221,10 @@ export default class AiAssistantMessage extends Component<Signature> {
       }
     </style>
   </template>
+
+  private get isAvatarAnimated() {
+    return this.args.isStreaming && !this.args.errorMessage;
+  }
 }
 
 interface AiAssistantConversationSignature {

packages/host/app/components/ai-assistant/message/usage.gts

@@ -14,6 +14,7 @@ export default class AiAssistantMessageUsage extends Component {
   @tracked formattedMessage = 'Hello, world';
   @tracked datetime = new Date(2024, 0, 3, 12, 30);
   @tracked isFromAssistant = false;
+  @tracked isStreaming = false;
   @tracked userId = 'johndoe:boxel.ai';
   @tracked errorMessage = '';
 
@@ -59,6 +60,7 @@ export default class AiAssistantMessageUsage extends Component {
               }}
               @errorMessage={{this.errorMessage}}
               @retryAction={{this.retryAction}}
+              @isStreaming={{this.isStreaming}}
             >
               <em>Optional embedded content</em>
             </AiAssistantMessage>
@@ -127,13 +129,15 @@ export default class AiAssistantMessageUsage extends Component {
                 isReady=true
                 profileInitials=this.profileInitials
               }}
+              @isStreaming={{false}}
             />
             <AiAssistantMessage
               @formattedMessage={{htmlSafe
                 'Culpa fugiat ex ipsum commodo anim. Cillum reprehenderit eu consectetur laboris dolore in cupidatat. Deserunt ipsum voluptate sit velit aute ad velit exercitation sint. Velit esse velit est et amet labore velit nisi magna ea elit nostrud quis anim..'
               }}
               @datetime={{this.oneMinutesAgo}}
               @isFromAssistant={{true}}
+              @isStreaming={{false}}
             />
           </AiAssistantConversation>
         </div>

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

@@ -25,6 +25,7 @@ interface Signature {
   Element: HTMLDivElement;
   Args: {
     message: MessageField;
+    isStreaming: boolean;
   };
 }
 
@@ -40,6 +41,7 @@ export default class Room extends Component<Signature> {
       }}
       @attachedCards={{this.resources.cards}}
       @errorMessage={{this.errorMessage}}
+      @isStreaming={{@isStreaming}}
       data-test-boxel-message-from={{@message.author.name}}
       ...attributes
     >

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

@@ -17,6 +17,8 @@ import type OperatorModeStateService from '@cardstack/host/services/operator-mod
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
 
+import type { MessageField } from 'https://cardstack.com/base/room';
+
 import AiAssistantCardPicker from '../ai-assistant/card-picker';
 import AiAssistantChatInput from '../ai-assistant/chat-input';
 import { AiAssistantConversation } from '../ai-assistant/message';
@@ -44,6 +46,7 @@ export default class Room extends Component<Signature> {
           {{#each this.room.messages as |message i|}}
             <RoomMessage
               @message={{message}}
+              @isStreaming={{this.isMessageStreaming message i}}
               data-test-message-idx={{i}}
               {{scrollIntoViewModifier (this.isLastMessage i)}}
             />
@@ -118,6 +121,14 @@ export default class Room extends Component<Signature> {
     this.doMatrixEventFlush.perform();
   }
 
+  @action isMessageStreaming(message: MessageField, messageIndex: number) {
+    return (
+      !message.isStreamingFinished &&
+      this.isLastMessage(messageIndex) &&
+      (new Date().getTime() - message.created.getTime()) / 1000 < 60 // Older events do not come with isStreamingFinished property so we have no other way to determine if the message is done streaming other than checking if they are old messages (older than 60 seconds as an arbitrary threshold)
+    );
+  }
+
   private doMatrixEventFlush = restartableTask(async () => {
     await this.matrixService.flushMembership;
     await this.matrixService.flushTimeline;

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

@@ -1013,6 +1013,150 @@ module('Integration | operator-mode', function (hooks) {
       assert.dom('[data-test-message-idx="0"] em').hasText('love');
       assert.dom('[data-test-message-idx="0"]').doesNotContainText('_love_');
     });
+
+    test('it displays the streaming indicator when ai bot message is in progress (streaming words)', async function (assert) {
+      await setCardInOperatorModeState();
+      await renderComponent(
+        class TestDriver extends GlimmerComponent {
+          <template>
+            <OperatorMode @onClose={{noop}} />
+            <CardPrerender />
+          </template>
+        },
+      );
+      let roomId = await openAiAssistant();
+
+      await addRoomEvent(matrixService, {
+        event_id: 'event0',
+        room_id: roomId,
+        state_key: 'state',
+        type: 'm.room.message',
+        sender: '@matic:boxel',
+        content: {
+          body: 'Say one word.',
+          msgtype: 'org.boxel.message',
+          formatted_body: 'Say one word.',
+          format: 'org.matrix.custom.html',
+        },
+        origin_server_ts: Date.now() - 100,
+        unsigned: {
+          age: 105,
+          transaction_id: '1',
+        },
+      });
+
+      await addRoomEvent(matrixService, {
+        event_id: 'event1',
+        room_id: roomId,
+        state_key: 'state',
+        type: 'm.room.message',
+        sender: '@aibot:localhost',
+        content: {
+          body: 'French.',
+          msgtype: 'm.text',
+          formatted_body: 'French.',
+          format: 'org.matrix.custom.html',
+          isStreamingFinished: true,
+        },
+        origin_server_ts: Date.now() - 99,
+        unsigned: {
+          age: 105,
+          transaction_id: '1',
+        },
+      });
+
+      await addRoomEvent(matrixService, {
+        event_id: 'event2',
+        room_id: roomId,
+        state_key: 'state',
+        type: 'm.room.message',
+        sender: '@matic:boxel',
+        content: {
+          body: 'What is a french bulldog?',
+          msgtype: 'org.boxel.message',
+          formatted_body: 'What is a french bulldog?',
+          format: 'org.matrix.custom.html',
+        },
+        origin_server_ts: Date.now() - 98,
+        unsigned: {
+          age: 105,
+          transaction_id: '1',
+        },
+      });
+
+      await addRoomEvent(matrixService, {
+        event_id: 'event3',
+        room_id: roomId,
+        state_key: 'state',
+        type: 'm.room.message',
+        sender: '@aibot:localhost',
+        content: {
+          body: 'French bulldog is a',
+          msgtype: 'm.text',
+          formatted_body: 'French bulldog is a',
+          format: 'org.matrix.custom.html',
+        },
+        origin_server_ts: Date.now() - 97,
+        unsigned: {
+          age: 105,
+          transaction_id: '1',
+        },
+      });
+
+      await waitFor('[data-test-message-idx="3"]');
+
+      assert
+        .dom('[data-test-message-idx="1"] [data-test-ai-avatar]')
+        .doesNotHaveClass(
+          'ai-avatar-animated',
+          'Answer to my previous question is not in progress',
+        );
+      assert
+        .dom('[data-test-message-idx="3"] [data-test-ai-avatar]')
+        .hasClass(
+          'ai-avatar-animated',
+          'Answer to my current question is in progress',
+        );
+
+      await addRoomEvent(matrixService, {
+        event_id: 'event4',
+        room_id: roomId,
+        state_key: 'state',
+        type: 'm.room.message',
+        sender: '@aibot:localhost',
+        content: {
+          body: 'French bulldog is a French breed of companion dog or toy dog.',
+          msgtype: 'm.text',
+          formatted_body:
+            'French bulldog is a French breed of companion dog or toy dog',
+          format: 'org.matrix.custom.html',
+          isStreamingFinished: true, // This is an indicator from the ai bot that the message is finalized and the openai is done streaming
+          'm.relates_to': {
+            rel_type: 'm.replace',
+            event_id: 'event3',
+          },
+        },
+        origin_server_ts: Date.now() - 96,
+        unsigned: {
+          age: 105,
+          transaction_id: '1',
+        },
+      });
+
+      await waitFor('[data-test-message-idx="3"]');
+      assert
+        .dom('[data-test-message-idx="1"] [data-test-ai-avatar]')
+        .doesNotHaveClass(
+          'ai-avatar-animated',
+          'Answer to my previous question is not in progress',
+        );
+      assert
+        .dom('[data-test-message-idx="3"] [data-test-ai-avatar]')
+        .doesNotHaveClass(
+          'ai-avatar-animated',
+          'Answer to my last question is not in progress',
+        );
+    });
   });
 
   test('it loads a card and renders its isolated view', async function (assert) {