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/components/widgets/conversation/ConversationCard.vue

@@ -102,10 +102,12 @@
       <conversation-context-menu
         :status="chat.status"
         :inbox-id="inbox.id"
+        :has-unread-messages="hasUnread"
         @update-conversation="onUpdateConversation"
         @assign-agent="onAssignAgent"
         @assign-label="onAssignLabel"
         @assign-team="onAssignTeam"
+        @mark-as-unread="markAsUnread"
       />
     </woot-context-menu>
   </div>
@@ -241,7 +243,7 @@ export default {
     },
 
     unreadCount() {
-      return this.unreadMessagesCount(this.chat);
+      return this.chat.unread_count;
     },
 
     hasUnread() {
@@ -359,6 +361,10 @@ export default {
       this.$emit('assign-team', team, this.chat.id);
       this.closeContextMenu();
     },
+    async markAsUnread() {
+      this.$emit('mark-as-unread', this.chat.id);
+      this.closeContextMenu();
+    },
   },
 };
 </script>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -44,11 +44,11 @@
         "
         :is-web-widget-inbox="isAWebWidgetInbox"
       />
-      <li v-show="getUnreadCount != 0" class="unread--toast">
+      <li v-show="unreadMessageCount != 0" class="unread--toast">
         <span class="text-uppercase">
-          {{ getUnreadCount }}
+          {{ unreadMessageCount }}
           {{
-            getUnreadCount > 1
+            unreadMessageCount > 1
               ? $t('CONVERSATION.UNREAD_MESSAGES')
               : $t('CONVERSATION.UNREAD_MESSAGE')
           }}
@@ -137,7 +137,6 @@ export default {
       allConversations: 'getAllConversations',
       inboxesList: 'inboxes/getInboxes',
       listLoadingStatus: 'getAllMessagesLoaded',
-      getUnreadCount: 'getUnreadCount',
       loadingChatList: 'getChatListLoadingStatus',
     }),
     inboxId() {
@@ -271,6 +270,9 @@ export default {
       }
       return '';
     },
+    unreadMessageCount() {
+      return this.currentChat.unread_count;
+    },
   },
 
   watch: {
@@ -331,7 +333,7 @@ export default {
     },
     scrollToBottom() {
       let relevantMessages = [];
-      if (this.getUnreadCount > 0) {
+      if (this.unreadMessageCount > 0) {
         // capturing only the unread messages
         relevantMessages = this.conversationPanel.querySelectorAll(
           '.message--unread'

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="menu-container">
+    <menu-item
+      v-if="!hasUnreadMessages"
+      :option="unreadOption"
+      variant="icon"
+      @click="$emit('mark-as-unread')"
+    />
     <template v-for="option in statusMenuConfig">
       <menu-item
         v-if="show(option.key)"
@@ -79,6 +85,10 @@ export default {
       type: String,
       default: '',
     },
+    hasUnreadMessages: {
+      type: Boolean,
+      default: false,
+    },
     inboxId: {
       type: Number,
       default: null,
@@ -87,6 +97,10 @@ export default {
   data() {
     return {
       STATUS_TYPE: wootConstants.STATUS_TYPE,
+      unreadOption: {
+        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_UNREAD'),
+        icon: 'mail',
+      },
       statusMenuConfig: [
         {
           key: wootConstants.STATUS_TYPE.RESOLVED,