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

app/javascript/dashboard/helper/actionCable.js

@@ -30,6 +30,36 @@ class ActionCableConnector extends BaseActionCableConnector {
     };
   }
 
+  onReconnect = () => {
+    this.syncActiveConversationMessages();
+  };
+
+  onDisconnected = () => {
+    this.setActiveConversationLastMessageId();
+  };
+
+  setActiveConversationLastMessageId = () => {
+    const {
+      params: { conversation_id },
+    } = this.app.$route;
+    if (conversation_id) {
+      this.app.$store.dispatch('setConversationLastMessageId', {
+        conversationId: Number(conversation_id),
+      });
+    }
+  };
+
+  syncActiveConversationMessages = () => {
+    const {
+      params: { conversation_id },
+    } = this.app.$route;
+    if (conversation_id) {
+      this.app.$store.dispatch('syncActiveConversationMessages', {
+        conversationId: Number(conversation_id),
+      });
+    }
+  };
+
   isAValidEvent = data => {
     return this.app.$store.getters.getCurrentAccountId === data.account_id;
   };

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',
 

app/javascript/shared/constants/busEvents.js

@@ -5,6 +5,6 @@ export const BUS_EVENTS = {
   FOCUS_CUSTOM_ATTRIBUTE: 'FOCUS_CUSTOM_ATTRIBUTE',
   SCROLL_TO_MESSAGE: 'SCROLL_TO_MESSAGE',
   TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
-  WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
   ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
+  WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
 };

app/javascript/shared/helpers/BaseActionCableConnector.js

@@ -4,8 +4,11 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 const PRESENCE_INTERVAL = 20000;
 
 class BaseActionCableConnector {
+  static isDisconnected = false;
+
   constructor(app, pubsubToken, websocketHost = '') {
     const websocketURL = websocketHost ? `${websocketHost}/cable` : undefined;
+
     this.consumer = createConsumer(websocketURL);
     this.subscription = this.consumer.subscriptions.create(
       {
@@ -19,27 +22,45 @@ class BaseActionCableConnector {
           this.perform('update_presence');
         },
         received: this.onReceived,
-        disconnected: this.onDisconnected,
+        disconnected: () => {
+          BaseActionCableConnector.isDisconnected = true;
+          this.onDisconnected();
+          // TODO: Remove this after completing the conversation list refetching
+          window.bus.$emit(BUS_EVENTS.WEBSOCKET_DISCONNECT);
+        },
       }
     );
     this.app = app;
     this.events = {};
     this.isAValidEvent = () => true;
-
-    setInterval(() => {
-      this.subscription.updatePresence();
-    }, PRESENCE_INTERVAL);
+    this.triggerPresenceInterval = () => {
+      setTimeout(() => {
+        this.subscription.updatePresence();
+        this.checkConnection();
+        this.triggerPresenceInterval();
+      }, PRESENCE_INTERVAL);
+    };
+    this.triggerPresenceInterval();
   }
 
+  checkConnection() {
+    const isConnectionActive = this.consumer.connection.isOpen();
+    const isReconnected =
+      BaseActionCableConnector.isDisconnected && isConnectionActive;
+    if (isReconnected) {
+      this.onReconnect();
+      BaseActionCableConnector.isDisconnected = false;
+    }
+  }
+
+  onReconnect = () => {};
+
+  onDisconnected = () => {};
+
   disconnect() {
     this.consumer.disconnect();
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  onDisconnected() {
-    window.bus.$emit(BUS_EVENTS.WEBSOCKET_DISCONNECT);
-  }
-
   onReceived = ({ event, data } = {}) => {
     if (this.isAValidEvent(data)) {
       if (this.events[event] && typeof this.events[event] === 'function') {