feat: Allow users to mark a conversation as unread (#5924)

Allow users to mark conversations as unread.
Loom video: https://www.loom.com/share/ab70552d3c9c48b685da7dfa64be8bb3

fixes: #5552

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

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

@@ -8,7 +8,7 @@ import {
   buildConversationList,
   isOnMentionsView,
 } from './helpers/actionHelpers';
-
+import messageReadActions from './actions/messageReadActions';
 // actions
 const actions = {
   getConversation: async ({ commit }, conversationId) => {
@@ -257,17 +257,6 @@ const actions = {
     dispatch('contacts/setContact', sender);
   },
 
-  markMessagesRead: async ({ commit }, data) => {
-    try {
-      const {
-        data: { id, agent_last_seen_at: lastSeen },
-      } = await ConversationApi.markMessageRead(data);
-      setTimeout(() => commit(types.MARK_MESSAGE_READ, { id, lastSeen }), 4000);
-    } catch (error) {
-      // Handle error
-    }
-  },
-
   setChatFilter({ commit }, data) {
     commit(types.CHANGE_CHAT_STATUS_FILTER, data);
   },
@@ -336,6 +325,7 @@ const actions = {
   clearConversationFilters({ commit }) {
     commit(types.CLEAR_CONVERSATION_FILTERS);
   },
+  ...messageReadActions,
 };
 
 export default actions;

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

@@ -0,0 +1,35 @@
+import { throwErrorMessage } from 'dashboard/store/utils/api';
+import ConversationApi from '../../../../api/inbox/conversation';
+import mutationTypes from '../../../mutation-types';
+
+export default {
+  markMessagesRead: async ({ commit }, data) => {
+    try {
+      const {
+        data: { id, agent_last_seen_at: lastSeen },
+      } = await ConversationApi.markMessageRead(data);
+      setTimeout(
+        () =>
+          commit(mutationTypes.UPDATE_MESSAGE_UNREAD_COUNT, { id, lastSeen }),
+        4000
+      );
+    } catch (error) {
+      // Handle error
+    }
+  },
+
+  markMessagesUnread: async ({ commit }, { id }) => {
+    try {
+      const {
+        data: { agent_last_seen_at: lastSeen, unread_count: unreadCount },
+      } = await ConversationApi.markMessagesUnread({ id });
+      commit(mutationTypes.UPDATE_MESSAGE_UNREAD_COUNT, {
+        id,
+        lastSeen,
+        unreadCount,
+      });
+    } catch (error) {
+      throwErrorMessage(error);
+    }
+  },
+};

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

@@ -146,13 +146,16 @@ export const mutations = {
     _state.listLoadingStatus = false;
   },
 
-  [types.MARK_MESSAGE_READ](_state, { id, lastSeen }) {
+  [types.UPDATE_MESSAGE_UNREAD_COUNT](
+    _state,
+    { id, lastSeen, unreadCount = 0 }
+  ) {
     const [chat] = _state.allConversations.filter(c => c.id === id);
     if (chat) {
-      chat.agent_last_seen_at = lastSeen;
+      Vue.set(chat, 'agent_last_seen_at', lastSeen);
+      Vue.set(chat, 'unread_count', unreadCount);
     }
   },
-
   [types.CHANGE_CHAT_STATUS_FILTER](_state, data) {
     _state.chatStatusFilter = data;
   },