feat: Show shared contact's name in Telegram channel (#10856)

# Pull Request Template

## Description

This PR adds the ability to see the shared contact name in Telegram
channels.

## Type of change

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

## How Has This Been Tested?

**Loom video**

https://www.loom.com/share/cd318056ad4d44d4a1fc4b5d4ad38d60?sid=26d833ae-ded9-4cf0-9af7-81eecfa37f19


## 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

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue

@@ -10,6 +10,7 @@ defineProps({
   iconBgColor: { type: String, default: 'bg-n-alpha-3' },
   senderTranslationKey: { type: String, required: true },
   content: { type: String, required: true },
+  title: { type: String, default: '' }, // Title can be any name, description, etc
   action: {
     type: Object,
     required: true,
@@ -48,6 +49,9 @@ const senderName = computed(() => {
             }}
           </div>
           <slot>
+            <div v-if="title" class="truncate text-sm text-n-slate-12">
+              {{ title }}
+            </div>
             <div v-if="content" class="truncate text-sm text-n-slate-11">
               {{ content }}
             </div>

app/javascript/dashboard/components-next/message/bubbles/Contact.vue

@@ -11,7 +11,7 @@ import {
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
 
-const { content, attachments } = useMessageContext();
+const { attachments } = useMessageContext();
 
 const $store = useStore();
 const { t } = useI18n();
@@ -24,6 +24,12 @@ const phoneNumber = computed(() => {
   return attachment.value.fallbackTitle;
 });
 
+const contactName = computed(() => {
+  const { meta } = attachment.value ?? {};
+  const { firstName, lastName } = meta ?? {};
+  return `${firstName ?? ''} ${lastName ?? ''}`.trim();
+});
+
 const formattedPhoneNumber = computed(() => {
   return phoneNumber.value.replace(/\s|-|[A-Za-z]/g, '');
 });
@@ -32,13 +38,9 @@ const rawPhoneNumber = computed(() => {
   return phoneNumber.value.replace(/\D/g, '');
 });
 
-const name = computed(() => {
-  return content.value;
-});
-
 function getContactObject() {
   const contactItem = {
-    name: name.value,
+    name: contactName.value,
     phone_number: `+${rawPhoneNumber.value}`,
   };
   return contactItem;
@@ -99,6 +101,7 @@ const action = computed(() => ({
     icon="i-teenyicons-user-circle-solid"
     icon-bg-color="bg-[#D6409F]"
     sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.CONTACT"
+    :title="contactName"
     :content="phoneNumber"
     :action="formattedPhoneNumber ? action : null"
   />