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

@@ -316,7 +316,11 @@ export default {
           {{ unreadCount > 9 ? '9+' : unreadCount }}
         </span>
       </div>
-      <CardLabels :conversation-id="chat.id" class="mt-0.5 mx-2 mb-0">
+      <CardLabels
+        :conversation-id="chat.id"
+        :conversation-labels="chat.labels"
+        class="mt-0.5 mx-2 mb-0"
+      >
         <template v-if="hasSlaPolicyId" #before>
           <SLACardLabel :chat="chat" class="ltr:mr-1 rtl:ml-1" />
         </template>

app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue

@@ -1,23 +1,26 @@
 <script>
-import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
 export default {
-  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,
+    conversationLabels: {
+      type: Array,
       required: true,
     },
-    // conversationLabels prop is used in /conversation/labelMixin,
-    // remove this props when refactoring to composable if not needed
-    // eslint-disable-next-line vue/no-unused-properties
-    conversationLabels: {
-      type: String,
-      required: false,
-      default: '',
-    },
+  },
+  setup(props) {
+    const accountLabels = useMapGetter('labels/getLabels');
+
+    const activeLabels = computed(() => {
+      return props.conversationLabels.map(label =>
+        accountLabels.value.find(l => l.title === label)
+      );
+    });
+
+    return {
+      activeLabels,
+    };
   },
   data() {
     return {