feat: cache messages received via web sockets (#2766)

Author: gavinbarron

packages/mgt-chat/src/statefulClient/Caching/MessageCache.ts

@@ -73,20 +73,24 @@ export class MessageCache {
   }
 
   private addMessageToCacheData(message: ChatMessage, cachedData: CachedMessageData) {
-    // this message hasn't been modified, it should not be in the cache already
-    // NB this assumption may prove to be an issue later, in which case, I'm sorry future developer.
-    if (message.lastModifiedDateTime === message.createdDateTime) {
-      cachedData.value.push(message);
+    const spliceIndex = cachedData.value.findIndex(m => m.id === message.id);
+    if (spliceIndex !== -1) {
+      cachedData.value.splice(spliceIndex, 1, message);
     } else {
-      const spliceIndex = cachedData.value.findIndex(m => m.id === message.id);
-      if (spliceIndex !== -1) {
-        cachedData.value.splice(spliceIndex, 1, message);
-      } else {
-        cachedData.value.push(message);
-      }
+      cachedData.value.push(message);
     }
     // coerce potential nullish values to an empty string to allow comparison
     if (message.lastModifiedDateTime && message.lastModifiedDateTime > (cachedData.lastModifiedDateTime ?? ''))
       cachedData.lastModifiedDateTime = message.lastModifiedDateTime;
   }
+
+  public async deleteMessage(chatId: string, message: ChatMessage) {
+    const cachedData = await this.cache.getValue(chatId);
+    // for now we're ignoring the case where we didn't find anything in the cache for the given chatId as there's nothing to delete.
+    if (cachedData) {
+      const spliceIndex = cachedData.value.findIndex(m => m.id === message.id);
+      cachedData.value.splice(spliceIndex, 1);
+      await this.cache.putValue(chatId, cachedData);
+    }
+  }
 }

packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts

@@ -772,6 +772,7 @@ detail: ${JSON.stringify(eventDetail)}`);
    * Event handler to be called when a new message is received by the notification service
    */
   private readonly onMessageReceived = async (message: ChatMessage) => {
+    await this._cache.cacheMessage(this._chatId, message);
     const messageConversion = this.convertChatMessage(message);
     const acsMessage = messageConversion.currentValue;
     this.updateMessages(acsMessage);
@@ -786,8 +787,10 @@ detail: ${JSON.stringify(eventDetail)}`);
    * Event handler to be called when a message deletion is received by the notification service
    */
   private readonly onMessageDeleted = (message: ChatMessage) => {
+    void this._cache.deleteMessage(this.chatId, message);
     this.notifyStateChange((draft: GraphChatClient) => {
       const draftMessage = draft.messages.find(m => m.messageId === message.id) as AcsChatMessage;
+      // TODO: confirm if we should show the deleted content message in all cases or only when the message was deleted by the current user
       if (draftMessage) this.setDeletedContent(draftMessage);
     });
   };
@@ -796,6 +799,7 @@ detail: ${JSON.stringify(eventDetail)}`);
    * Event handler to be called when a message edit is received by the notification service
    */
   private readonly onMessageEdited = async (message: ChatMessage) => {
+    await this._cache.cacheMessage(this._chatId, message);
     const messageConversion = this.convertChatMessage(message);
     this.updateMessages(messageConversion.currentValue);
     if (messageConversion.futureValue) {