From 35c69fc2822eda0d92ae353c24b09545ad303f9a Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Tue, 25 Feb 2025 16:48:04 +0530 Subject: [PATCH] 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** image image **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 --- .../dashboard/components/ChatList.vue | 10 ++++++++ .../dashboard/components/ConversationItem.vue | 2 ++ .../widgets/conversation/ConversationCard.vue | 6 +++++ .../conversation/contextMenu/Index.vue | 24 ++++++++++++++----- .../i18n/locale/en/conversation.json | 1 + 5 files changed, 37 insertions(+), 6 deletions(-) diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue index 1d2ff5bd4..84f4635da 100644 --- a/app/javascript/dashboard/components/ChatList.vue +++ b/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); diff --git a/app/javascript/dashboard/components/ConversationItem.vue b/app/javascript/dashboard/components/ConversationItem.vue index 27ba4c6d6..dcdf46e7e 100644 --- a/app/javascript/dashboard/components/ConversationItem.vue +++ b/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" /> diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue index a5695b22c..690259a5e 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue +++ b/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" /> diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue index 8778fc461..fccff3457 100644 --- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue +++ b/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')" /> + +