fix: Usability issues in conversation card context menu (#10971)

# Pull Request Template

## Description

The PR includes usability feedback fixes for the conversation card
context menu. A "Mark as Read" option has been added after "Mark as
Unread" to prevent misclicks due to shifting menu positions.
Additionally, a separator line has been introduced for better grouping
and clarity

#### **Orders**  
<img width="210" alt="image"
src="https://github.com/user-attachments/assets/d7c04356-7cfb-4f43-ac55-beb4167f91e9"
/>
<img width="210" alt="image"
src="https://github.com/user-attachments/assets/593acd58-39cf-4b25-b119-03b89cb3528c"
/>

**Fixes** https://linear.app/chatwoot/issue/CW-4088/usability-feedback

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### **Loom video**

https://www.loom.com/share/59f8ad3bf4054b299bfcffc0ba24eca1?sid=98fbb67d-c3e9-4fa4-9b04-2a7cb3bf8568

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/components/ChatList.vue

@@ -675,6 +675,15 @@ async function markAsUnread(conversationId) {
     // Ignore error
   }
 }
+async function markAsRead(conversationId) {
+  try {
+    await store.dispatch('markMessagesRead', {
+      id: conversationId,
+    });
+  } catch (error) {
+    // Ignore error
+  }
+}
 async function onAssignTeam(team, conversationId = null) {
   try {
     await store.dispatch('assignTeam', {
@@ -744,6 +753,7 @@ provide('assignLabels', onAssignLabels);
 provide('updateConversationStatus', toggleConversationStatus);
 provide('toggleContextMenu', onContextMenuToggle);
 provide('markAsUnread', markAsUnread);
+provide('markAsRead', markAsRead);
 provide('assignPriority', assignPriority);
 provide('isConversationSelected', isConversationSelected);
 

app/javascript/dashboard/components/ConversationItem.vue

@@ -13,6 +13,7 @@ export default {
     'updateConversationStatus',
     'toggleContextMenu',
     'markAsUnread',
+    'markAsRead',
     'assignPriority',
     'isConversationSelected',
   ],
@@ -64,6 +65,7 @@ export default {
     @update-conversation-status="updateConversationStatus"
     @context-menu-toggle="toggleContextMenu"
     @mark-as-unread="markAsUnread"
+    @mark-as-read="markAsRead"
     @assign-priority="assignPriority"
   />
 </template>

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

@@ -75,6 +75,7 @@ export default {
     'assignLabel',
     'assignTeam',
     'markAsUnread',
+    'markAsRead',
     'assignPriority',
     'updateConversationStatus',
   ],
@@ -228,6 +229,10 @@ export default {
       this.$emit('markAsUnread', this.chat.id);
       this.closeContextMenu();
     },
+    async markAsRead() {
+      this.$emit('markAsRead', this.chat.id);
+      this.closeContextMenu();
+    },
     async assignPriority(priority) {
       this.$emit('assignPriority', priority, this.chat.id);
       this.closeContextMenu();
@@ -356,6 +361,7 @@ export default {
         @assign-label="onAssignLabel"
         @assign-team="onAssignTeam"
         @mark-as-unread="markAsUnread"
+        @mark-as-read="markAsRead"
         @assign-priority="assignPriority"
       />
     </ContextMenu>

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

@@ -41,6 +41,7 @@ export default {
     'updateConversation',
     'assignPriority',
     'markAsUnread',
+    'markAsRead',
     'assignAgent',
     'assignTeam',
     'assignLabel',
@@ -48,6 +49,10 @@ export default {
   data() {
     return {
       STATUS_TYPE: wootConstants.STATUS_TYPE,
+      readOption: {
+        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_READ'),
+        icon: 'mail',
+      },
       unreadOption: {
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_UNREAD'),
         icon: 'mail',
@@ -58,16 +63,16 @@ export default {
           label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.RESOLVED'),
           icon: 'checkmark',
         },
-        {
-          key: wootConstants.STATUS_TYPE.PENDING,
-          label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.PENDING'),
-          icon: 'book-clock',
-        },
         {
           key: wootConstants.STATUS_TYPE.OPEN,
           label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.REOPEN'),
           icon: 'arrow-redo',
         },
+        {
+          key: wootConstants.STATUS_TYPE.PENDING,
+          label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.PENDING'),
+          icon: 'book-clock',
+        },
       ],
       snoozeOption: {
         key: wootConstants.STATUS_TYPE.SNOOZED,
@@ -203,6 +208,13 @@ export default {
       variant="icon"
       @click.stop="$emit('markAsUnread')"
     />
+    <MenuItem
+      v-else
+      :option="readOption"
+      variant="icon"
+      @click.stop="$emit('markAsRead')"
+    />
+    <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
     <template v-for="option in statusMenuConfig">
       <MenuItem
         v-if="show(option.key)"
@@ -218,7 +230,7 @@ export default {
       variant="icon"
       @click.stop="snoozeConversation()"
     />
-
+    <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
     <MenuItemWithSubmenu :option="priorityConfig">
       <MenuItem
         v-for="(option, i) in priorityConfig.options"

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -117,6 +117,7 @@
       "PENDING": "Mark as pending",
       "RESOLVED": "Mark as resolved",
       "MARK_AS_UNREAD": "Mark as unread",
+      "MARK_AS_READ": "Mark as read",
       "REOPEN": "Reopen conversation",
       "SNOOZE": {
         "TITLE": "Snooze",