feat: Improve email rendering, introduce a new layout for emails (#5039)

Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>

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

@@ -170,7 +170,7 @@ export default {
     };
   },
   computed: {
-    contentToBeParsed() {
+    emailMessageContent() {
       const {
         html_content: { full: fullHTMLContent } = {},
         text_content: { full: fullTextContent } = {},
@@ -182,13 +182,19 @@ export default {
         return false;
       }
 
-      if (this.contentToBeParsed.includes('<blockquote')) {
+      if (this.emailMessageContent.includes('<blockquote')) {
         return true;
       }
 
       return false;
     },
     message() {
+      // If the message is an email, emailMessageContent would be present
+      // In that case, we would use letter package to render the email
+      if (this.emailMessageContent && this.isIncoming) {
+        return this.emailMessageContent;
+      }
+
       const botMessageContent = generateBotMessageContent(
         this.contentType,
         this.contentAttributes,
@@ -200,21 +206,6 @@ export default {
           },
         }
       );
-
-      const {
-        email: { content_type: contentType = '' } = {},
-      } = this.contentAttributes;
-      if (this.contentToBeParsed && this.isIncoming) {
-        const parsedContent = this.stripStyleCharacters(this.contentToBeParsed);
-        if (parsedContent) {
-          // This is a temporary fix for line-breaks in text/plain emails
-          // Now, It is not rendered properly in the email preview.
-          // FIXME: Remove this once we have a better solution for rendering text/plain emails
-          return contentType.includes('text/plain')
-            ? parsedContent.replace(/\n/g, '<br />')
-            : parsedContent;
-        }
-      }
       return (
         this.formatMessage(
           this.data.content,
@@ -331,6 +322,7 @@ export default {
         'activity-wrap': !this.isBubble,
         'is-pending': this.isPending,
         'is-failed': this.isFailed,
+        'is-email': this.isEmailContentType,
       };
     },
     bubbleClass() {
@@ -342,6 +334,7 @@ export default {
         'is-text': this.hasText,
         'is-from-bot': this.isSentByBot,
         'is-failed': this.isFailed,
+        'is-email': this.isEmailContentType,
       };
     },
     isPending() {
@@ -518,6 +511,10 @@ export default {
   }
 }
 
+.wrap.is-email {
+  --bubble-max-width: 84% !important;
+}
+
 .sender--info {
   align-items: center;
   color: var(--b-700);