feat: Rewrite conversation/labelMixin to a composable (#9936)

# Pull Request Template

## Description

This PR will replace the usage of `conversation/labelMixin` with a
composable

Fixes
https://linear.app/chatwoot/issue/CW-3439/rewrite-conversationlabelmixin-mixin-to-a-composable

## Type of change

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

## How Has This Been Tested?

**Test cases**

1. Add/remove labels from conversation sidebar
2. See labels are showing up dynamically
3. Check add/remove labels working fine with CMD bar
4. Check card labels in conversation card and SLA reports table.


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] 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
- [x] 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/routes/dashboard/commands/commandbar.vue

@@ -1,5 +1,6 @@
 <script>
 import '@chatwoot/ninja-keys';
+import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
 import wootConstants from 'dashboard/constants/globals';
 import conversationHotKeysMixin from './conversationHotKeys';
 import bulkActionsHotKeysMixin from './bulkActionsHotKeys';
@@ -7,7 +8,6 @@ import inboxHotKeysMixin from './inboxHotKeys';
 import goToCommandHotKeys from './goToCommandHotKeys';
 import appearanceHotKeys from './appearanceHotKeys';
 import agentMixin from 'dashboard/mixins/agentMixin';
-import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
 import { GENERAL_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
 export default {
@@ -16,10 +16,25 @@ export default {
     conversationHotKeysMixin,
     bulkActionsHotKeysMixin,
     inboxHotKeysMixin,
-    conversationLabelMixin,
     appearanceHotKeys,
     goToCommandHotKeys,
   ],
+  setup() {
+    // used in conversationHotKeysMixin
+    const {
+      activeLabels,
+      inactiveLabels,
+      addLabelToConversation,
+      removeLabelFromConversation,
+    } = useConversationLabels();
+
+    return {
+      activeLabels,
+      inactiveLabels,
+      addLabelToConversation,
+      removeLabelFromConversation,
+    };
+  },
   data() {
     return {
       // Added selectedSnoozeType to track the selected snooze type

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -2,11 +2,11 @@
 import { ref } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import Spinner from 'shared/components/Spinner.vue';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
 
 export default {
   components: {
@@ -14,20 +14,17 @@ export default {
     LabelDropdown,
     AddLabel,
   },
-
-  mixins: [conversationLabelMixin],
-  props: {
-    // conversationId prop is used in /conversation/labelMixin,
-    // remove this props when refactoring to composable if not needed
-    // eslint-disable-next-line vue/no-unused-properties
-    conversationId: {
-      type: Number,
-      required: true,
-    },
-  },
   setup() {
     const { isAdmin } = useAdmin();
 
+    const {
+      savedLabels,
+      activeLabels,
+      accountLabels,
+      addLabelToConversation,
+      removeLabelFromConversation,
+    } = useConversationLabels();
+
     const conversationLabelBoxRef = ref(null);
     const showSearchDropdownLabel = ref(false);
 
@@ -58,6 +55,11 @@ export default {
     useKeyboardEvents(keyboardEvents, conversationLabelBoxRef);
     return {
       isAdmin,
+      savedLabels,
+      activeLabels,
+      accountLabels,
+      addLabelToConversation,
+      removeLabelFromConversation,
       conversationLabelBoxRef,
       showSearchDropdownLabel,
       closeDropdownLabel,

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue

@@ -1,8 +1,9 @@
 <script setup>
+import { computed } from 'vue';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
 import SLAViewDetails from './SLAViewDetails.vue';
-defineProps({
+const props = defineProps({
   slaName: {
     type: String,
     required: true,
@@ -20,6 +21,12 @@ defineProps({
     default: () => [],
   },
 });
+
+const conversationLabels = computed(() => {
+  return props.conversation.labels
+    ? props.conversation.labels.split(',').map(item => item.trim())
+    : [];
+});
 </script>
 
 <template>
@@ -41,7 +48,7 @@ defineProps({
       <CardLabels
         class="w-[80%]"
         :conversation-id="conversationId"
-        :conversation-labels="conversation.labels"
+        :conversation-labels="conversationLabels"
       />
     </div>
     <div