feat(frontend): add compact anonymous conversation labels

frontend/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue

@@ -4,6 +4,7 @@ import { getInboxIconByType } from 'dashboard/helper/inbox';
 import { useRouter, useRoute } from 'vue-router';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
+import { getConversationContactDisplayName } from 'dashboard/helper/conversationHelper';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
@@ -37,7 +38,12 @@ const cardMessagePreviewWithMetaRef = ref(null);
 
 const currentContact = computed(() => props.contact);
 
-const currentContactName = computed(() => currentContact.value?.name);
+const currentContactName = computed(() =>
+  getConversationContactDisplayName(
+    currentContact.value,
+    props.conversation?.id
+  )
+);
 const currentContactThumbnail = computed(() => currentContact.value?.thumbnail);
 const currentContactStatus = computed(
   () => currentContact.value?.availabilityStatus

frontend/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { computed, useTemplateRef } from 'vue';
-import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import {
+  getConversationContactDisplayName,
+  getLastMessage,
+} from 'dashboard/helper/conversationHelper';
 import CardAvatar from './CardAvatar.vue';
 import CardContent from './CardContent.vue';
 import CardLabels from './CardLabelsV5.vue';
@@ -33,6 +36,9 @@ const emit = defineEmits([
 ]);
 
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
+const currentContactName = computed(() =>
+  getConversationContactDisplayName(props.currentContact, props.chat.id)
+);
 const showLabelsSection = computed(() => props.chat.labels?.length > 0);
 
 const voiceCallData = computed(() => {
@@ -155,7 +161,7 @@ const selectedModel = computed({
           <h4
             class="text-heading-3 my-0 min-w-0 flex-1 capitalize truncate text-n-slate-12 font-medium"
           >
-            {{ currentContact.name }}
+            {{ currentContactName }}
           </h4>
           <TimeAgo
             :conversation-id="chat.id"