feat: Shows agent avatar for message sent by agent (#3884)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

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() {