feat: Show e-mail meta data for conversations (chatwoot#2708)

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

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

@@ -2,6 +2,11 @@
   <li v-if="hasAttachments || data.content" :class="alignBubble">
     <div :class="wrapClass">
       <div v-tooltip.top-start="sentByMessage" :class="bubbleClass">
+        <bubble-mail-head
+          v-if="isEmailContentType"
+          :email-attributes="contentAttributes.email"
+          :is-incoming="isIncoming"
+        />
         <bubble-text
           v-if="data.content"
           :message="message"
@@ -79,6 +84,7 @@ import copy from 'copy-text-to-clipboard';
 
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import timeMixin from '../../../mixins/time';
+import BubbleMailHead from './bubble/MailHead';
 import BubbleText from './bubble/Text';
 import BubbleImage from './bubble/Image';
 import BubbleFile from './bubble/File';
@@ -98,6 +104,7 @@ export default {
     BubbleText,
     BubbleImage,
     BubbleFile,
+    BubbleMailHead,
     ContextMenu,
     Spinner,
   },

app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    v-if="showHead"
+    class="message__mail-head"
+    :class="{ 'is-incoming': isIncoming }"
+  >
+    <div v-if="toMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
+      <span>{{ toMails }}</span>
+    </div>
+    <div v-if="ccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
+      <span>{{ ccMails }}</span>
+    </div>
+    <div v-if="bccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
+      <span>{{ bccMails }}</span>
+    </div>
+    <div v-if="subject" class="meta-wrap">
+      <span class="message__content--type">
+        {{ $t('EMAIL_HEADER.SUBJECT') }}:
+      </span>
+      <span>{{ subject }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    emailAttributes: {
+      type: Array,
+      default: () => ({}),
+    },
+    isIncoming: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    toMails() {
+      const to = this.emailAttributes.to || [];
+      return to.join(', ');
+    },
+    ccMails() {
+      const cc = this.emailAttributes.cc || [];
+      return cc.join(', ');
+    },
+    bccMails() {
+      const bcc = this.emailAttributes.bcc || [];
+      return bcc.join(', ');
+    },
+    subject() {
+      return this.emailAttributes.subject || '';
+    },
+    showHead() {
+      return this.toMails || this.ccMails || this.bccMails;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.message__mail-head {
+  padding-bottom: var(--space-small);
+  margin-bottom: var(--space-small);
+  border-bottom: 1px solid var(--w-300);
+
+  &.is-incoming {
+    border-bottom: 1px solid var(--color-border-light);
+  }
+}
+
+.meta-wrap {
+  .message__content--type {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-mini);
+  }
+  span {
+    font-size: var(--font-size-mini);
+  }
+}
+</style>

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -130,5 +130,11 @@
     "SELECT": {
       "PLACEHOLDER": "None"
     }
+  },
+  "EMAIL_HEADER": {
+    "TO": "To",
+    "BCC": "Bcc",
+    "CC": "Cc",
+    "SUBJECT": "Subject"
   }
 }