From 1f3c5002b34c82327922c0e60b81e47fa1a5c323 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 1 Feb 2022 16:34:54 +0530
Subject: [PATCH] feat: Shows agent avatar for message sent by agent (#3884)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../scss/widgets/_conversation-view.scss      |  6 +++
 .../widgets/conversation/Message.vue          | 47 ++++++++++++-------
 .../i18n/locale/en/conversation.json          |  1 +
 3 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index 1be9e31e0..3066d0e43 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -228,8 +228,14 @@
     @include flex-align(right, null);
 
     .wrap {
+      align-items: flex-end;
+      display: flex;
       margin-right: $space-normal;
       text-align: right;
+
+      .sender--info {
+        padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
+      }
     }
 
     .bubble {
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index a79d4150f..97fda5bcf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -57,22 +57,26 @@
         />
       </div>
       <spinner v-if="isPending" size="tiny" />
-      <a
-        v-if="isATweet && isIncoming && sender"
+      <div
+        v-if="showAvatar"
+        v-tooltip.top="tooltipForSender"
         class="sender--info"
-        :href="twitterProfileLink"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
       >
         <woot-thumbnail
           :src="sender.thumbnail"
           :username="sender.name"
           size="16px"
         />
-        <div class="sender--available-name">
+        <a
+          v-if="isATweet && isIncoming"
+          class="sender--available-name"
+          :href="twitterProfileLink"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
           {{ sender.name }}
-        </div>
-      </a>
+        </a>
+      </div>
       <div v-if="isFailed" class="message-failed--alert">
         <woot-button
           v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
@@ -113,7 +117,6 @@ import BubbleActions from './bubble/Actions';
 import Spinner from 'shared/components/Spinner';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu';
 
-import { isEmptyObject } from 'dashboard/helper/commons';
 import alertMixin from 'shared/mixins/alertMixin';
 import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
@@ -242,6 +245,9 @@ export default {
     isIncoming() {
       return this.data.message_type === MESSAGE_TYPE.INCOMING;
     },
+    isOutgoing() {
+      return this.data.message_type === MESSAGE_TYPE.OUTGOING;
+    },
     emailHeadAttributes() {
       return {
         email: this.contentAttributes.email,
@@ -258,6 +264,15 @@ export default {
     hasText() {
       return !!this.data.content;
     },
+    tooltipForSender() {
+      const { name = this.$t('CONVERSATION.BOT') } = this.sender || {};
+      return this.data.message_type === MESSAGE_TYPE.OUTGOING
+        ? {
+            content: `${this.$t('CONVERSATION.SENT_BY')} ${name}`,
+            classes: 'top',
+          }
+        : false;
+    },
     messageToolTip() {
       if (this.isMessageDeleted) {
         return false;
@@ -265,13 +280,7 @@ export default {
       if (this.isFailed) {
         return this.$t(`CONVERSATION.SEND_FAILED`);
       }
-      const { sender } = this;
-      return this.data.message_type === 1 && !isEmptyObject(sender)
-        ? {
-            content: `${this.$t('CONVERSATION.SENT_BY')} ${sender.name}`,
-            classes: 'top',
-          }
-        : false;
+      return false;
     },
     wrapClass() {
       return {
@@ -313,6 +322,12 @@ export default {
       const { meta } = this.data;
       return meta ? meta.error : '';
     },
+    showAvatar() {
+      if (this.isOutgoing) {
+        return this.sender;
+      }
+      return this.isATweet && this.isIncoming && this.sender;
+    },
   },
   watch: {
     data() {
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 80b085fc9..e3cf94b83 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -90,6 +90,7 @@
     "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit",
     "MESSAGE_ERROR": "Unable to send this message, please try again later",
     "SENT_BY": "Sent by:",
+    "BOT": "Bot",
     "SEND_FAILED": "Couldn't send message! Try again",
     "TRY_AGAIN": "retry",
     "ASSIGNMENT": {