feat: Add all filter for conversations (#3102)

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

@@ -8,7 +8,7 @@
     }"
     @click="cardClick(chat)"
   >
-    <Thumbnail
+    <thumbnail
       v-if="!hideThumbnail"
       :src="currentContact.thumbnail"
       :badge="inboxBadge"
@@ -18,10 +18,20 @@
       size="40px"
     />
     <div class="conversation--details columns">
-      <span v-if="showInboxName" class="label">
-        <i :class="computedInboxClass" />
-        {{ inboxName }}
-      </span>
+      <div class="conversation--metadata">
+        <span v-if="showInboxName" class="label">
+          <i :class="computedInboxClass" />
+          {{ inboxName }}
+        </span>
+
+        <span
+          v-if="showAssignee && assignee"
+          class="label assignee-label text-truncate"
+        >
+          <i class="ion-person" />
+          {{ assignee.name }}
+        </span>
+      </div>
       <h4 class="conversation--user">
         {{ currentContact.name }}
       </h4>
@@ -97,6 +107,10 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    showAssignee: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -109,7 +123,11 @@ export default {
     }),
 
     chatMetadata() {
-      return this.chat.meta;
+      return this.chat.meta || {};
+    },
+
+    assignee() {
+      return this.chatMetadata.assignee || {};
     },
 
     currentContact() {
@@ -252,4 +270,14 @@ export default {
   color: var(--s-600);
   font-size: var(--font-size-mini);
 }
+
+.conversation--metadata {
+  display: flex;
+  justify-content: space-between;
+  padding-right: var(--space-normal);
+
+  .assignee-label {
+    max-width: 50%;
+  }
+}
 </style>