feat: Refetch the active conversation messages on action cable reconnect (#6790)

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -86,6 +86,70 @@ const actions = {
     }
   },
 
+  syncActiveConversationMessages: async (
+    { commit, state, dispatch },
+    { conversationId }
+  ) => {
+    const { allConversations, syncConversationsMessages } = state;
+    const lastMessageId = syncConversationsMessages[conversationId];
+    const selectedChat = allConversations.find(
+      conversation => conversation.id === conversationId
+    );
+    if (!selectedChat) return;
+    try {
+      const { messages } = selectedChat;
+      // Fetch all the messages after the last message id
+      const {
+        data: { meta, payload },
+      } = await MessageApi.getPreviousMessages({
+        conversationId,
+        after: lastMessageId,
+      });
+      commit(`conversationMetadata/${types.SET_CONVERSATION_METADATA}`, {
+        id: conversationId,
+        data: meta,
+      });
+      // Find the messages that are not already present in the store
+      const missingMessages = payload.filter(
+        message => !messages.find(item => item.id === message.id)
+      );
+      selectedChat.messages.push(...missingMessages);
+      // Sort the messages by created_at
+      const sortedMessages = selectedChat.messages.sort((a, b) => {
+        return new Date(a.created_at) - new Date(b.created_at);
+      });
+      commit(types.SET_MISSING_MESSAGES, {
+        id: conversationId,
+        data: sortedMessages,
+      });
+      commit(types.SET_LAST_MESSAGE_ID_IN_SYNC_CONVERSATION, {
+        conversationId,
+        messageId: null,
+      });
+      dispatch('markMessagesRead', { id: conversationId }, { root: true });
+    } catch (error) {
+      // Handle error
+    }
+  },
+
+  setConversationLastMessageId: async (
+    { commit, state },
+    { conversationId }
+  ) => {
+    const { allConversations } = state;
+    const selectedChat = allConversations.find(
+      conversation => conversation.id === conversationId
+    );
+    if (!selectedChat) return;
+    const { messages } = selectedChat;
+    const lastMessage = messages.last();
+    if (!lastMessage) return;
+    commit(types.SET_LAST_MESSAGE_ID_IN_SYNC_CONVERSATION, {
+      conversationId,
+      messageId: lastMessage.id,
+    });
+  },
+
   async setActiveChat({ commit, dispatch }, { data, after }) {
     commit(types.SET_CURRENT_CHAT_WINDOW, data);
     commit(types.CLEAR_ALL_MESSAGES_LOADED);

app/javascript/dashboard/store/modules/conversations/index.js

@@ -15,6 +15,7 @@ const state = {
   appliedFilters: [],
   conversationParticipants: [],
   conversationLastSeen: null,
+  syncConversationsMessages: {},
 };
 
 // mutations
@@ -54,6 +55,11 @@ export const mutations = {
       chat.messages.unshift(...data);
     }
   },
+  [types.SET_MISSING_MESSAGES](_state, { id, data }) {
+    const [chat] = _state.allConversations.filter(c => c.id === id);
+    if (!chat) return;
+    Vue.set(chat, 'messages', data);
+  },
 
   [types.SET_CURRENT_CHAT_WINDOW](_state, activeChat) {
     if (activeChat) {
@@ -202,6 +208,13 @@ export const mutations = {
   [types.CLEAR_CONVERSATION_FILTERS](_state) {
     _state.appliedFilters = [];
   },
+
+  [types.SET_LAST_MESSAGE_ID_IN_SYNC_CONVERSATION](
+    _state,
+    { conversationId, messageId }
+  ) {
+    _state.syncConversationsMessages[conversationId] = messageId;
+  },
 };
 
 export default {

app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js

@@ -465,4 +465,66 @@ describe('#addMentions', () => {
       ['updateConversation', { id: 1, meta: { sender: { id: 1 } } }],
     ]);
   });
+
+  it('#syncActiveConversationMessages', async () => {
+    const conversations = [
+      {
+        id: 1,
+        messages: [
+          {
+            id: 1,
+            content: 'Hello',
+          },
+        ],
+        meta: { sender: { id: 1, name: 'john-doe' } },
+        inbox_id: 1,
+      },
+    ];
+    axios.get.mockResolvedValue({
+      data: {
+        payload: [{ id: 2, content: 'Welcome' }],
+        meta: {
+          agent_last_seen_at: '2023-04-20T05:22:42.990Z',
+        },
+      },
+    });
+    await actions.syncActiveConversationMessages(
+      {
+        commit,
+        dispatch,
+        state: {
+          allConversations: conversations,
+          syncConversationsMessages: {
+            1: 1,
+          },
+        },
+      },
+      { conversationId: 1 }
+    );
+    expect(commit.mock.calls).toEqual([
+      [
+        'conversationMetadata/SET_CONVERSATION_METADATA',
+        {
+          id: 1,
+          data: {
+            agent_last_seen_at: '2023-04-20T05:22:42.990Z',
+          },
+        },
+      ],
+      [
+        'SET_MISSING_MESSAGES',
+        {
+          id: 1,
+          data: [
+            { id: 1, content: 'Hello' },
+            { id: 2, content: 'Welcome' },
+          ],
+        },
+      ],
+      [
+        'SET_LAST_MESSAGE_ID_FOR_SYNC_CONVERSATION',
+        { conversationId: 1, messageId: null },
+      ],
+    ]);
+  });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -22,6 +22,8 @@ export default {
   SET_CONVERSATION_FILTERS: 'SET_CONVERSATION_FILTERS',
   CLEAR_CONVERSATION_FILTERS: 'CLEAR_CONVERSATION_FILTERS',
   SET_CONVERSATION_LAST_SEEN: 'SET_CONVERSATION_LAST_SEEN',
+  SET_LAST_MESSAGE_ID_IN_SYNC_CONVERSATION:
+    'SET_LAST_MESSAGE_ID_FOR_SYNC_CONVERSATION',
 
   SET_CURRENT_CHAT_WINDOW: 'SET_CURRENT_CHAT_WINDOW',
   CLEAR_CURRENT_CHAT_WINDOW: 'CLEAR_CURRENT_CHAT_WINDOW',
@@ -42,6 +44,7 @@ export default {
   SET_ACTIVE_INBOX: 'SET_ACTIVE_INBOX',
   UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES:
     'UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES',
+  SET_MISSING_MESSAGES: 'SET_MISSING_MESSAGES',
 
   SET_CONVERSATION_CAN_REPLY: 'SET_CONVERSATION_CAN_REPLY',