fix: Handle rendering HTML only email in UI (chatwoot#1987)

Leo-iun1n · Mar 27, 2021 · 8285f5d · 8285f5d
1 parent 8612f30
commit 8285f5d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -143,7 +143,9 @@ export default {
     },
 
     parsedLastMessage() {
-      return this.getPlainText(this.lastMessageInChat.content);
+      const { content_attributes: contentAttributes } = this.lastMessageInChat;
+      const { email: { subject } = {} } = contentAttributes || {};
+      return this.getPlainText(subject || this.lastMessageInChat.content);
     },
 
     chatInbox() {

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -107,11 +107,23 @@ export default {
         this.contentAttributes,
         this.$t('CONVERSATION.NO_RESPONSE')
       );
-      let messageContent =
-        this.formatMessage(this.data.content, this.isATweet) +
-        botMessageContent;
 
-      return messageContent;
+      const {
+        email: { html_content: { full: fullHTMLContent } = {} } = {},
+      } = this.contentAttributes;
+
+      if (fullHTMLContent && this.isIncoming) {
+        let parsedContent = new DOMParser().parseFromString(
+          fullHTMLContent || '',
+          'text/html'
+        );
+        if (!parsedContent.getElementsByTagName('parsererror').length) {
+          return parsedContent.body.innerHTML;
+        }
+      }
+      return (
+        this.formatMessage(this.data.content, this.isATweet) + botMessageContent
+      );
     },
     contentAttributes() {
       return this.data.content_attributes || {};
@@ -261,4 +273,10 @@ export default {
     margin-left: var(--space-smaller);
   }
 }
+
+// This is a hack to hide quoted content from GMAIL
+// Replace this with actual content parser
+.gmail_quote {
+  display: none;
+}
 </style>