feat: Refetch the latest messages on action cable reconnect in widget (#6996)

app/javascript/widget/store/modules/conversation/actions.js

@@ -52,6 +52,10 @@ export const actions = {
     }
   },
 
+  setLastMessageId: async ({ commit }) => {
+    commit('setLastMessageId');
+  },
+
   sendAttachment: async ({ commit }, params) => {
     const {
       attachment: { thumbUrl, fileType },
@@ -99,6 +103,36 @@ export const actions = {
     }
   },
 
+  syncLatestMessages: async ({ state, commit }) => {
+    try {
+      const { lastMessageId, conversations } = state;
+
+      const {
+        data: { payload, meta },
+      } = await getMessagesAPI({ after: lastMessageId });
+
+      const { contact_last_seen_at: lastSeen } = meta;
+      const formattedMessages = getNonDeletedMessages({ messages: payload });
+      const missingMessages = formattedMessages.filter(
+        message => conversations?.[message.id] === undefined
+      );
+      if (!missingMessages.length) return;
+      missingMessages.forEach(message => {
+        conversations[message.id] = message;
+      });
+      // Sort conversation messages by created_at
+      const updatedConversation = Object.fromEntries(
+        Object.entries(conversations).sort(
+          (a, b) => a[1].created_at - b[1].created_at
+        )
+      );
+      commit('conversation/setMetaUserLastSeenAt', lastSeen, { root: true });
+      commit('setMissingMessagesInConversation', updatedConversation);
+    } catch (error) {
+      // IgnoreError
+    }
+  },
+
   clearConversations: ({ commit }) => {
     commit('clearConversations');
   },

app/javascript/widget/store/modules/conversation/index.js

@@ -13,6 +13,7 @@ const state = {
     isAgentTyping: false,
     isCreating: false,
   },
+  lastMessageId: null,
 };
 
 export default {

app/javascript/widget/store/modules/conversation/mutations.js

@@ -62,6 +62,10 @@ export const mutations = {
     payload.map(message => Vue.set($state.conversations, message.id, message));
   },
 
+  setMissingMessagesInConversation($state, payload) {
+    Vue.set($state, 'conversation', payload);
+  },
+
   updateMessage($state, { id, content_attributes }) {
     $state.conversations[id] = {
       ...$state.conversations[id],
@@ -94,4 +98,12 @@ export const mutations = {
   setMetaUserLastSeenAt($state, lastSeen) {
     $state.meta.userLastSeenAt = lastSeen;
   },
+
+  setLastMessageId($state) {
+    const { conversations } = $state;
+    const lastMessage = Object.values(conversations).pop();
+    if (!lastMessage) return;
+    const { id } = lastMessage;
+    $state.lastMessageId = id;
+  },
 };