feat: Add support for right click context menu in conversations (#4923)

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

app/javascript/dashboard/components/ChatList.vue

@@ -97,7 +97,11 @@
       @update-conversations="onUpdateConversations"
       @assign-labels="onAssignLabels"
     />
-    <div ref="activeConversation" class="conversations-list">
+    <div
+      ref="activeConversation"
+      class="conversations-list"
+      :class="{ 'is-context-menu-open': isContextMenuOpen }"
+    >
       <conversation-card
         v-for="chat in conversationList"
         :key="chat.id"
@@ -110,6 +114,10 @@
         :selected="isConversationSelected(chat.id)"
         @select-conversation="selectConversation"
         @de-select-conversation="deSelectConversation"
+        @assign-agent="onAssignAgent"
+        @assign-label="onAssignLabels"
+        @update-conversation-status="toggleConversationStatus"
+        @context-menu-toggle="onContextMenuToggle"
       />
 
       <div v-if="chatListLoading" class="text-center">
@@ -217,6 +225,7 @@ export default {
       showDeleteFoldersModal: false,
       selectedConversations: [],
       selectedInboxes: [],
+      isContextMenuOpen: false,
     };
   },
   computed: {
@@ -584,11 +593,12 @@ export default {
         this.resetBulkActions();
       }
     },
-    async onAssignAgent(agent) {
+    // Same method used in context menu, conversationId being passed from there.
+    async onAssignAgent(agent, conversationId = null) {
       try {
         await this.$store.dispatch('bulkActions/process', {
           type: 'Conversation',
-          ids: this.selectedConversations,
+          ids: conversationId || this.selectedConversations,
           fields: {
             assignee_id: agent.id,
           },
@@ -599,11 +609,12 @@ export default {
         this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
       }
     },
-    async onAssignLabels(labels) {
+    // Same method used in context menu, conversationId being passed from there.
+    async onAssignLabels(labels, conversationId = null) {
       try {
         await this.$store.dispatch('bulkActions/process', {
           type: 'Conversation',
-          ids: this.selectedConversations,
+          ids: conversationId || this.selectedConversations,
           labels: {
             add: labels,
           },
@@ -629,12 +640,27 @@ export default {
         this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
       }
     },
+    toggleConversationStatus(conversationId, status, snoozedUntil) {
+      this.$store
+        .dispatch('toggleStatus', {
+          conversationId,
+          status,
+          snoozedUntil,
+        })
+        .then(() => {
+          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
+          this.isLoading = false;
+        });
+    },
     allSelectedConversationsStatus(status) {
       if (!this.selectedConversations.length) return false;
       return this.selectedConversations.every(item => {
         return this.$store.getters.getConversationById(item).status === status;
       });
     },
+    onContextMenuToggle(state) {
+      this.isContextMenuOpen = state;
+    },
   },
 };
 </script>
@@ -647,6 +673,13 @@ export default {
   margin-bottom: var(--space-normal);
 }
 
+.conversations-list {
+  // Prevent the list from scrolling if the submenu is opened
+  &.is-context-menu-open {
+    overflow: hidden !important;
+  }
+}
+
 .conversations-list-wrap {
   flex-shrink: 0;
   width: 34rem;