From a2f32f72321faa733e3c76b437e6c92108889977 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 10 Oct 2024 22:05:08 +0530
Subject: [PATCH] feat: Add telegram user name in contact details  (#10259)

Fixes https://linear.app/chatwoot/issue/CW-3648/chore-show-telegram-user-name-next-to-the-contact-details-if-available
---
 .../routes/dashboard/conversation/contact/ContactInfo.vue | 8 ++++++--
 .../routes/dashboard/conversation/contact/SocialIcons.vue | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 31d421ba4..ffc7155f5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -85,9 +85,13 @@ export default {
       const {
         social_profiles: socialProfiles,
         screen_name: twitterScreenName,
+        social_telegram_user_name: telegramUsername,
       } = this.additionalAttributes;
-
-      return { twitter: twitterScreenName, ...(socialProfiles || {}) };
+      return {
+        twitter: twitterScreenName,
+        telegram: telegramUsername,
+        ...(socialProfiles || {}),
+      };
     },
     // Delete Modal
     confirmDeleteMessage() {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
index 633bd6ba3..0cd0ad4b5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
@@ -14,6 +14,7 @@ export default {
         { key: 'linkedin', icon: 'linkedin', link: 'https://linkedin.com/' },
         { key: 'github', icon: 'github', link: 'https://github.com/' },
         { key: 'instagram', icon: 'instagram', link: 'https://instagram.com/' },
+        { key: 'telegram', icon: 'telegram', link: 'https://t.me/' },
       ],
     };
   },
@@ -29,7 +30,7 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
+  <div v-if="availableProfiles.length" class="flex items-end gap-3 mx-0 my-2">
     <a
       v-for="profile in availableProfiles"
       :key="profile.key"