feat: Add a read indicator for web-widget channel (#4224)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

@@ -199,6 +199,10 @@ const actions = {
     }
   },
 
+  updateConversationRead({ commit }, timestamp) {
+    commit(types.SET_CONVERSATION_LAST_SEEN, timestamp);
+  },
+
   updateMessage({ commit }, message) {
     commit(types.ADD_MESSAGE, message);
   },

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

@@ -91,6 +91,9 @@ const getters = {
       value => value.id === Number(conversationId)
     );
   },
+  getConversationLastSeen: _state => {
+    return _state.conversationLastSeen;
+  },
 };
 
 export default getters;

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

@@ -13,6 +13,7 @@ const state = {
   currentInbox: null,
   selectedChatId: null,
   appliedFilters: [],
+  conversationLastSeen: null,
 };
 
 // mutations
@@ -33,6 +34,9 @@ export const mutations = {
     _state.allConversations = [];
     _state.selectedChatId = null;
   },
+  [types.SET_CONVERSATION_LAST_SEEN](_state, timestamp) {
+    _state.conversationLastSeen = timestamp;
+  },
   [types.SET_ALL_MESSAGES_LOADED](_state) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat, 'allMessagesLoaded', true);

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

@@ -372,6 +372,15 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([[types.CLEAR_CONVERSATION_FILTERS]]);
     });
   });
+
+  describe('#updateConversationRead', () => {
+    it('commits the correct mutation and sets the contact_last_seen', () => {
+      actions.updateConversationRead({ commit }, 1649856659);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONVERSATION_LAST_SEEN, 1649856659],
+      ]);
+    });
+  });
 });
 
 describe('#deleteMessage', () => {

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

@@ -132,6 +132,16 @@ describe('#getters', () => {
     });
   });
 
+  describe('#getConversationLastSeen', () => {
+    it('getConversationLastSeen', () => {
+      const timestamp = 1649856659;
+      const state = {
+        conversationLastSeen: timestamp,
+      };
+      expect(getters.getConversationLastSeen(state)).toEqual(timestamp);
+    });
+  });
+
   describe('#getLastEmailInSelectedChat', () => {
     it('Returns cc in last email', () => {
       const state = {};

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

@@ -187,6 +187,18 @@ describe('#mutations', () => {
       ]);
     });
 
+    describe('#SET_CONVERSATION_LAST_SEEN', () => {
+      it('sets conversation last seen timestamp', () => {
+        const state = {
+          conversationLastSeen: null,
+        };
+
+        mutations[types.SET_CONVERSATION_LAST_SEEN](state, 1649856659);
+
+        expect(state.conversationLastSeen).toEqual(1649856659);
+      });
+    });
+
     describe('#UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES', () => {
       it('update conversation custom attributes', () => {
         const custom_attributes = { order_id: 1001 };