Utilize EventStatus for message state (#1170)

Author: FadhlanR

packages/base/package.json

@@ -17,6 +17,7 @@
     "ember-css-url": "^1.0.0",
     "ember-modifier": "^3.2.1",
     "ethers": "^6.6.2",
+    "matrix-js-sdk": "^31.0.0",
     "super-fast-md5": "^1.0.1",
     "tracked-built-ins": "^2.0.1"
   },

packages/base/room.gts

@@ -23,6 +23,7 @@ import { cached } from '@glimmer/tracking';
 import { initSharedState } from './shared-state';
 import BooleanField from './boolean';
 import { md5 } from 'super-fast-md5';
+import { EventStatus } from 'matrix-js-sdk';
 
 // this is so we can have triple equals equivalent room member cards
 function upsertRoomMember({
@@ -135,7 +136,7 @@ class RoomMembershipField extends FieldDef {
   };
 }
 
-type CardArgs = {
+type MessageFieldArgs = {
   author: RoomMemberField;
   created: Date;
   updated: Date;
@@ -147,6 +148,7 @@ type CardArgs = {
   command: string | null;
   isStreamingFinished?: boolean;
   clientGeneratedId?: string | null;
+  status: EventStatus | null;
 };
 
 type AttachedCardResource = {
@@ -277,6 +279,7 @@ export class MessageField extends FieldDef {
   // ID from the client and can be used by client
   // to verify whether the message is already sent or not.
   @field clientGeneratedId = contains(StringField);
+  @field status = contains(StringField);
 
   static embedded = EmbeddedMessageField;
   // The edit template is meant to be read-only, this field card is not mutable
@@ -498,7 +501,7 @@ export class RoomField extends FieldDef {
         }
 
         let author = upsertRoomMember({ room: this, userId: event.sender });
-        let cardArgs: CardArgs = {
+        let cardArgs: MessageFieldArgs = {
           author,
           created: new Date(event.origin_server_ts),
           updated: new Date(), // Changes every time an update from AI bot streaming is received, used for detecting timeouts
@@ -509,8 +512,13 @@ export class RoomField extends FieldDef {
           transactionId: event.unsigned?.transaction_id || null,
           attachedCard: null,
           command: null,
+          status: event.status,
         };
 
+        if (event.status === 'cancelled' || event.status === 'not_sent') {
+          (cardArgs as any).errorMessage = 'Failed to send';
+        }
+
         if ('errorMessage' in event.content) {
           (cardArgs as any).errorMessage = event.content.errorMessage;
         }
@@ -573,14 +581,21 @@ export class RoomField extends FieldDef {
         }
 
         if (messageField) {
-          newMessages.set(event_id, messageField);
+          newMessages.set(
+            (event.content as CardMessageContent).clientGeneratedId ?? event_id,
+            messageField,
+          );
           index++;
         }
       }
 
-      // upodate the cache with the new messages
-      for (let [eventId, message] of newMessages) {
-        cache.set(eventId, message);
+      // update the cache with the new messages
+      for (let [id, message] of newMessages) {
+        // The `id` can either be an `eventId` or `clientGeneratedId`.
+        // For messages sent by the user, we prefer to use `clientGeneratedId`
+        // because `eventId` can change in certain scenarios,
+        // such as when resending a failed message or updating its status from sending to sent.
+        cache.set(id, message);
       }
 
       // this sort should hopefully be very optimized since events will
@@ -656,6 +671,7 @@ interface BaseMatrixEvent {
     prev_content?: any;
     prev_sender?: string;
   };
+  status: EventStatus | null;
 }
 
 interface RoomStateEvent extends BaseMatrixEvent {

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

@@ -53,6 +53,7 @@ export default class AiAssistantMessage extends Component<Signature> {
         'ai-assistant-message'
         is-from-assistant=@isFromAssistant
         is-pending=@isPending
+        is-error=@errorMessage
       }}
       {{ScrollIntoView}}
       data-test-ai-assistant-message
@@ -209,6 +210,13 @@ export default class AiAssistantMessage extends Component<Signature> {
         color: var(--boxel-500);
       }
 
+      .is-error .content,
+      .is-error .content .cards > :deep(.card-pill),
+      .is-error .content .cards > :deep(.card-pill .boxel-card-container) {
+        background: var(--boxel-200);
+        color: var(--boxel-500);
+      }
+
       .content > :deep(.patch-message) {
         font-weight: 700;
         letter-spacing: var(--boxel-lsp-sm);

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

@@ -158,6 +158,11 @@ export default class RoomMessage extends Component<Signature> {
       .room-message {
         --ai-assistant-message-padding: var(--boxel-sp);
       }
+      .is-pending .view-code-button,
+      .is-error .view-code-button {
+        background: var(--boxel-200);
+        color: var(--boxel-500);
+      }
       .patch-button-bar {
         display: flex;
         justify-content: flex-end;

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

@@ -6,6 +6,8 @@ import { tracked } from '@glimmer/tracking';
 
 import { enqueueTask, restartableTask, timeout, all } from 'ember-concurrency';
 
+import { v4 as uuidv4 } from 'uuid';
+
 import { getAutoAttachment } from '@cardstack/host/resources/auto-attached-card';
 import { getRoom } from '@cardstack/host/resources/room';
 
@@ -41,12 +43,13 @@ export default class Room extends Component<Signature> {
       data-test-room-name={{this.room.name}}
       data-test-room={{this.room.roomId}}
     >
-      {{#if this.hasMessagesOrPending}}
+      {{#if this.room.messages}}
         <AiAssistantConversation>
           {{#each this.room.messages as |message i|}}
             <RoomMessage
               @message={{message}}
               @index={{i}}
+              @isPending={{this.isPendingMessage message}}
               @monacoSDK={{@monacoSDK}}
               @isStreaming={{this.isMessageStreaming message i}}
               @currentEditor={{this.currentMonacoContainer}}
@@ -55,17 +58,6 @@ export default class Room extends Component<Signature> {
               data-test-message-idx={{i}}
             />
           {{/each}}
-          {{#if this.pendingMessage}}
-            <RoomMessage
-              @message={{this.pendingMessage}}
-              @monacoSDK={{@monacoSDK}}
-              @isStreaming={{false}}
-              @isPending={{true}}
-              @currentEditor={{this.currentMonacoContainer}}
-              @setCurrentEditor={{this.setCurrentMonacoContainer}}
-              data-test-message-idx={{this.room.messages.length}}
-            />
-          {{/if}}
         </AiAssistantConversation>
       {{else}}
         <NewSession @sendPrompt={{this.sendPrompt}} />
@@ -157,12 +149,9 @@ export default class Room extends Component<Signature> {
     await this.roomResource.loading;
   });
 
-  private get hasMessagesOrPending() {
-    return (this.room && this.room.messages.length > 0) || this.pendingMessage;
-  }
-
   private get room() {
-    return this.roomResource.room;
+    let room = this.roomResource.room;
+    return room;
   }
 
   private doWhenRoomChanges = restartableTask(async () => {
@@ -177,10 +166,6 @@ export default class Room extends Component<Signature> {
     return this.matrixService.cardsToSend.get(this.args.roomId);
   }
 
-  private get pendingMessage() {
-    return this.matrixService.pendingMessages.get(this.args.roomId);
-  }
-
   @action resendLastMessage() {
     if (!this.room) {
       throw new Error(
@@ -202,7 +187,11 @@ export default class Room extends Component<Signature> {
       .map((resource) => resource.card)
       .filter((card) => card !== undefined) as CardDef[];
 
-    this.doSendMessage.perform(myLastMessage.message, attachedCards);
+    this.doSendMessage.perform(
+      myLastMessage.message,
+      attachedCards,
+      myLastMessage.clientGeneratedId,
+    );
   }
 
   @action sendPrompt(prompt: string) {
@@ -253,7 +242,11 @@ export default class Room extends Component<Signature> {
     }
   }
   private doSendMessage = enqueueTask(
-    async (message: string | undefined, cards?: CardDef[]) => {
+    async (
+      message: string | undefined,
+      cards?: CardDef[],
+      clientGeneratedId: string = uuidv4(),
+    ) => {
       this.matrixService.messagesToSend.set(this.args.roomId, undefined);
       this.matrixService.cardsToSend.set(this.args.roomId, undefined);
       let context = {
@@ -267,6 +260,7 @@ export default class Room extends Component<Signature> {
         this.args.roomId,
         message,
         cards,
+        clientGeneratedId,
         context,
       );
     },
@@ -306,7 +300,9 @@ export default class Room extends Component<Signature> {
         this.messageToSend ||
           this.cardsToAttach?.length ||
           this.autoAttachedCard,
-      )
+      ) &&
+      !!this.room &&
+      !this.room.messages.some((m) => this.isPendingMessage(m))
     );
   }
 
@@ -320,6 +316,10 @@ export default class Room extends Component<Signature> {
   @action private setCurrentMonacoContainer(index: number | undefined) {
     this.currentMonacoContainer = index;
   }
+
+  private isPendingMessage(message: MessageField) {
+    return message.status === 'sending' || message.status === 'queued';
+  }
 }
 
 declare module '@glint/environment-ember-loose/registry' {

packages/host/app/lib/externals.ts

@@ -20,6 +20,7 @@ import * as emberResources from 'ember-resources';
 import * as ethers from 'ethers';
 import * as flat from 'flat';
 import * as lodash from 'lodash';
+import * as matrixJsSDK from 'matrix-js-sdk';
 import * as superFastMD5 from 'super-fast-md5';
 import * as tracked from 'tracked-built-ins';
 
@@ -70,4 +71,5 @@ export function shimExternals(virtualNetwork: VirtualNetwork) {
     default: class {},
   });
   virtualNetwork.shimModule('super-fast-md5', superFastMD5);
+  virtualNetwork.shimModule('matrix-js-sdk', matrixJsSDK);
 }

packages/host/app/lib/matrix-handlers/index.ts

@@ -9,10 +9,8 @@ import { type LooseCardResource, baseRealm } from '@cardstack/runtime-common';
 
 import type * as CardAPI from 'https://cardstack.com/base/card-api';
 import type {
-  CardMessageContent,
   RoomField,
   MatrixEvent as DiscreteMatrixEvent,
-  MessageField,
 } from 'https://cardstack.com/base/room';
 
 import type LoaderService from '../../services/loader-service';
@@ -35,11 +33,10 @@ export interface RoomMeta {
   name?: string;
 }
 
-export type Event = Partial<IEvent>;
+export type Event = Partial<IEvent> & { status: MatrixSDK.EventStatus | null };
 
 export interface EventSendingContext {
   rooms: Map<string, Promise<RoomField>>;
-  pendingMessages: Map<string, MessageField | undefined>;
   cardAPI: typeof CardAPI;
   loaderService: LoaderService;
 }
@@ -48,7 +45,7 @@ export interface Context extends EventSendingContext {
   flushTimeline: Promise<void> | undefined;
   flushMembership: Promise<void> | undefined;
   roomMembershipQueue: { event: MatrixEvent; member: RoomMember }[];
-  timelineQueue: MatrixEvent[];
+  timelineQueue: { event: MatrixEvent; oldEventId?: string }[];
   client: MatrixClient;
   matrixSDK: typeof MatrixSDK;
   handleMessage?: (
@@ -105,16 +102,42 @@ export async function addRoomEvent(context: EventSendingContext, event: Event) {
       ...(resolvedRoom.events ?? []),
       event as unknown as DiscreteMatrixEvent,
     ];
+  }
+}
 
-    let pendingMessage = context.pendingMessages.get(resolvedRoom.roomId);
-    if (
-      pendingMessage &&
-      event.type === 'm.room.message' &&
-      event.content?.msgtype === 'org.boxel.message' &&
-      (event.content as CardMessageContent).clientGeneratedId ===
-        pendingMessage.clientGeneratedId
-    ) {
-      context.pendingMessages.set(resolvedRoom.roomId, undefined);
-    }
+export async function updateRoomEvent(
+  context: EventSendingContext,
+  event: Event,
+  oldEventId: string,
+) {
+  if (event.content?.data && typeof event.content.data === 'string') {
+    event.content.data = JSON.parse(event.content.data);
+  }
+  let { event_id: eventId, room_id: roomId, state_key: stateKey } = event;
+  eventId = eventId ?? stateKey; // room state may not necessary have an event ID
+  if (!eventId) {
+    throw new Error(
+      `bug: event ID is undefined for event ${JSON.stringify(event, null, 2)}`,
+    );
+  }
+  if (!roomId) {
+    throw new Error(
+      `bug: roomId is undefined for event ${JSON.stringify(event, null, 2)}`,
+    );
+  }
+  let room = context.rooms.get(roomId);
+  if (!room) {
+    throw new Error(
+      `bug: unknown room for event ${JSON.stringify(event, null, 2)}`,
+    );
+  }
+  let resolvedRoom = await room;
+  let oldEventIndex = resolvedRoom.events.findIndex(
+    (e) => e.event_id === oldEventId,
+  );
+  if (oldEventIndex >= 0) {
+    resolvedRoom.events[oldEventIndex] =
+      event as unknown as DiscreteMatrixEvent;
+    resolvedRoom.events = [...resolvedRoom.events];
   }
 }

packages/host/app/lib/matrix-handlers/membership.ts

@@ -30,7 +30,9 @@ async function drainMembership(context: Context) {
   context.roomMembershipQueue = [];
 
   await Promise.all(
-    events.map(({ event: { event } }) => addRoomEvent(context, event)),
+    events.map(({ event: { event, status } }) =>
+      addRoomEvent(context, { ...event, status }),
+    ),
   );
 
   // For rooms that we have been invited to we are unable to get the full
@@ -78,6 +80,7 @@ async function drainMembership(context: Context) {
                 ...e.event,
                 // annoyingly these events have been stripped of their id's
                 event_id: `${roomId}_${eventType}_${e.localTimestamp}`,
+                status: e.status,
               }))
               .map((event) => addRoomEvent(context, event)),
           );