fix: Shows tooltip and avatar for template messages (#3898)

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -64,7 +64,7 @@
       >
         <woot-thumbnail
           :src="sender.thumbnail"
-          :username="sender.name"
+          :username="senderNameForAvatar"
           size="16px"
         />
         <a
@@ -248,6 +248,9 @@ export default {
     isOutgoing() {
       return this.data.message_type === MESSAGE_TYPE.OUTGOING;
     },
+    isTemplate() {
+      return this.data.message_type === MESSAGE_TYPE.TEMPLATE;
+    },
     emailHeadAttributes() {
       return {
         email: this.contentAttributes.email,
@@ -265,8 +268,12 @@ export default {
       return !!this.data.content;
     },
     tooltipForSender() {
-      const { name = this.$t('CONVERSATION.BOT') } = this.sender || {};
+      const name = this.senderNameForAvatar;
-      return this.data.message_type === MESSAGE_TYPE.OUTGOING
+      const { message_type: messageType } = this.data;
+      const showTooltip =
+        messageType === MESSAGE_TYPE.OUTGOING ||
+        messageType === MESSAGE_TYPE.TEMPLATE;
+      return showTooltip
         ? {
             content: `${this.$t('CONVERSATION.SENT_BY')} ${name}`,
             classes: 'top',
@@ -323,11 +330,18 @@ export default {
       return meta ? meta.error : '';
     },
     showAvatar() {
-      if (this.isOutgoing) {
+      if (this.isOutgoing || this.isTemplate) {
-        return this.sender;
+        return true;
       }
       return this.isATweet && this.isIncoming && this.sender;
     },
+    senderNameForAvatar() {
+      if (this.isOutgoing || this.isTemplate) {
+        const { name = this.$t('CONVERSATION.BOT') } = this.sender || {};
+        return name;
+      }
+      return '';
+    },
   },
   watch: {
     data() {