chore: Add sender details in Unread message (#2277)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/UnreadMessage.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="chat-bubble-wrap">
+    <div class="chat-bubble agent">
+      <div v-if="showSender" class="row--agent-block">
+        <thumbnail
+          :src="avatarUrl"
+          size="20px"
+          :username="agentName"
+          :status="sender.availability_status"
+        />
+        <span class="agent--name">{{ agentName }}</span>
+        <span class="company--name"> {{ companyName }}</span>
+      </div>
+      <div class="message-content" v-html="formatMessage(message, false)"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import configMixin from '../mixins/configMixin';
+import { isEmptyObject } from 'widget/helpers/utils';
+export default {
+  name: 'UnreadMessage',
+  components: { Thumbnail },
+  mixins: [messageFormatterMixin, configMixin],
+  props: {
+    message: {
+      type: String,
+      default: '',
+    },
+    showSender: {
+      type: Boolean,
+      default: false,
+    },
+    sender: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    companyName() {
+      return `${this.$t('UNREAD_VIEW.COMPANY_FROM')} ${
+        this.channelConfig.websiteName
+      }`;
+    },
+    avatarUrl() {
+      const { avatar_url: avatarUrl } = this.sender;
+      // eslint-disable-next-line
+      const BotImage = require('dashboard/assets/images/chatwoot_bot.png');
+      const displayImage = this.useInboxAvatarForBot
+        ? this.inboxAvatarUrl
+        : BotImage;
+      return !isEmptyObject(this.sender) ? avatarUrl : displayImage;
+    },
+    agentName() {
+      const { available_name: availableName, name } = this.sender;
+      if (!isEmptyObject(this.sender)) {
+        return availableName || name;
+      }
+      return this.$t('UNREAD_VIEW.BOT');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~widget/assets/scss/variables.scss';
+.chat-bubble {
+  max-width: 85%;
+  padding: $space-normal;
+}
+</style>
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+.row--agent-block {
+  align-items: center;
+  display: flex;
+  text-align: left;
+  padding-bottom: $space-small;
+  font-size: $font-size-small;
+  .agent--name {
+    font-weight: $font-weight-bold;
+    margin-left: $space-smaller;
+  }
+  .company--name {
+    color: $color-light-gray;
+    margin-left: $space-smaller;
+  }
+}
+</style>

app/javascript/widget/i18n/locale/en.json

@@ -20,7 +20,8 @@
   "START_CONVERSATION": "Start Conversation",
   "UNREAD_VIEW": {
     "VIEW_MESSAGES_BUTTON": "See new messages",
-    "CLOSE_MESSAGES_BUTTON": "Close"
+    "CLOSE_MESSAGES_BUTTON": "Close",
+    "COMPANY_FROM": "from"
   },
   "BUBBLE": {
     "LABEL": "Chat with us"

app/javascript/widget/views/Unread.vue

@@ -11,13 +11,16 @@
       </button>
     </div>
     <div class="unread-messages">
-      <agent-bubble
+      <unread-message
-        v-for="message in unreadMessages"
+        v-for="(message, index) in unreadMessages"
         :key="message.id"
         :message-id="message.id"
+        :show-sender="!index"
+        :sender="message.sender"
         :message="getMessageContent(message)"
       />
     </div>
+
     <div>
       <button
         v-if="unreadMessageCount"
@@ -33,14 +36,15 @@
 
 <script>
 import { IFrameHelper } from 'widget/helpers/utils';
-import AgentBubble from 'widget/components/AgentMessageBubble.vue';
+import UnreadMessage from 'widget/components/UnreadMessage.vue';
+
 import configMixin from '../mixins/configMixin';
 import { mapGetters } from 'vuex';
 
 export default {
   name: 'Unread',
   components: {
-    AgentBubble,
+    UnreadMessage,
   },
   mixins: [configMixin],
   props: {
@@ -64,6 +68,10 @@ export default {
     showCloseButton() {
       return this.unreadMessageCount && this.hideMessageBubble;
     },
+    sender() {
+      const [firstMessage] = this.unreadMessages;
+      return firstMessage.sender || {};
+    },
   },
   methods: {
     openFullView() {