From 1266f0ab8ce2fe7737da0adaf184be44a83b7502 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 5 Jan 2021 10:06:40 +0530
Subject: [PATCH] feat: Add link to the Twitter profile of the sender (#1597)

---
 .../widgets/conversation/Message.vue           | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 5439f6451..4d0cf589e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -42,7 +42,13 @@
       </div>
       <spinner v-if="isPending" size="tiny" />
 
-      <div v-if="isATweet && isIncoming && sender" class="sender--info">
+      <a
+        v-if="isATweet && isIncoming && sender"
+        class="sender--info"
+        :href="twitterProfileLink"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
         <woot-thumbnail
           :src="sender.thumbnail"
           :username="sender.name"
@@ -51,7 +57,7 @@
         <div class="sender--available-name">
           {{ sender.name }}
         </div>
-      </div>
+      </a>
     </div>
   </li>
 </template>
@@ -104,6 +110,11 @@ export default {
       } = this;
       return contentType;
     },
+    twitterProfileLink() {
+      const additionalAttributes = this.sender.additional_attributes || {};
+      const { screen_name: screenName } = additionalAttributes;
+      return `https://twitter.com/${screenName}`;
+    },
     alignBubble() {
       return !this.data.message_type ? 'left' : 'right';
     },
@@ -181,8 +192,9 @@ export default {
 }
 
 .sender--info {
-  display: flex;
   align-items: center;
+  color: var(--b-700);
+  display: inline-flex;
   padding: var(--space-smaller) 0;
 
   .sender--available-name {