From aa5d01b572c6fd0b1cb7f47486d9b518300ab3f0 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 14 Sep 2021 11:55:48 +0530
Subject: [PATCH] fix: Hide quoted replies by default from messages (#3009)

Fixes: #2009 , #2365
---
 .../widgets/conversation/Message.vue          | 36 +++++++-----
 .../widgets/conversation/bubble/Text.vue      | 56 ++++++++++++++++++-
 .../dashboard/i18n/locale/en/chatlist.json    |  4 +-
 .../shared/mixins/messageFormatterMixin.js    |  1 +
 4 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 3b716d9eb..e5de1b040 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -12,6 +12,7 @@
           :message="message"
           :is-email="isEmailContentType"
           :readable-time="readableTime"
+          :display-quoted-button="displayQuotedButton"
         />
         <span
           v-if="isPending && hasAttachments"
@@ -36,7 +37,6 @@
             />
           </div>
         </div>
-
         <bubble-actions
           :id="data.id"
           :sender="data.sender"
@@ -128,6 +128,24 @@ export default {
     };
   },
   computed: {
+    contentToBeParsed() {
+      const {
+        html_content: { full: fullHTMLContent } = {},
+        text_content: { full: fullTextContent } = {},
+      } = this.contentAttributes.email || {};
+      return fullHTMLContent || fullTextContent || '';
+    },
+    displayQuotedButton() {
+      if (!this.isIncoming) {
+        return false;
+      }
+
+      if (this.contentToBeParsed.includes('<blockquote')) {
+        return true;
+      }
+
+      return false;
+    },
     message() {
       const botMessageContent = generateBotMessageContent(
         this.contentType,
@@ -142,20 +160,10 @@ export default {
       );
 
       const {
-        email: {
-          content_type: contentType = '',
-          html_content: { full: fullHTMLContent, reply: replyHTMLContent } = {},
-          text_content: { full: fullTextContent, reply: replyTextContent } = {},
-        } = {},
+        email: { content_type: contentType = '' } = {},
       } = this.contentAttributes;
-      let contentToBeParsed =
-        replyHTMLContent ||
-        replyTextContent ||
-        fullHTMLContent ||
-        fullTextContent ||
-        '';
-      if (contentToBeParsed && this.isIncoming) {
-        const parsedContent = this.stripStyleCharacters(contentToBeParsed);
+      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.
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index 263e23f4f..be1cc555e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -1,6 +1,26 @@
 <template>
-  <div class="message-text__wrap">
+  <div
+    class="message-text__wrap"
+    :class="{
+      'show--quoted': showQuotedContent,
+      'hide--quoted': !showQuotedContent,
+    }"
+  >
     <div class="text-content" v-html="message"></div>
+    <button
+      v-if="displayQuotedButton"
+      class="quoted-text--button"
+      @click="toggleQuotedContent"
+    >
+      <span v-if="showQuotedContent">
+        <i class="ion-chevron-up" />
+        {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
+      </span>
+      <span v-else>
+        <i class="ion-chevron-down" />
+        {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
+      </span>
+    </button>
   </div>
 </template>
 
@@ -19,6 +39,20 @@ export default {
       type: Boolean,
       default: true,
     },
+    displayQuotedButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showQuotedContent: false,
+    };
+  },
+  methods: {
+    toggleQuotedContent() {
+      this.showQuotedContent = !this.showQuotedContent;
+    },
   },
 };
 </script>
@@ -53,4 +87,24 @@ export default {
     font-size: var(--font-size-normal);
   }
 }
+
+.show--quoted {
+  blockquote {
+    display: block;
+  }
+}
+
+.hide--quoted {
+  blockquote {
+    display: none;
+  }
+}
+
+.quoted-text--button {
+  color: var(--s-400);
+  cursor: pointer;
+  font-size: var(--font-size-mini);
+  padding-bottom: var(--space-small);
+  padding-top: var(--space-small);
+}
 </style>
diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json
index f30c89196..3445aeb95 100644
--- a/app/javascript/dashboard/i18n/locale/en/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json
@@ -85,6 +85,8 @@
     "VIEW_TWEET_IN_TWITTER": "View tweet in Twitter",
     "REPLY_TO_TWEET": "Reply to this tweet",
     "NO_MESSAGES": "No Messages",
-    "NO_CONTENT": "No content available"
+    "NO_CONTENT": "No content available",
+    "HIDE_QUOTED_TEXT": "Hide Quoted Text",
+    "SHOW_QUOTED_TEXT": "Show Quoted Text"
   }
 }
diff --git a/app/javascript/shared/mixins/messageFormatterMixin.js b/app/javascript/shared/mixins/messageFormatterMixin.js
index 3d6902bfe..21096409d 100644
--- a/app/javascript/shared/mixins/messageFormatterMixin.js
+++ b/app/javascript/shared/mixins/messageFormatterMixin.js
@@ -34,6 +34,7 @@ export default {
           'lang',
           'align',
           'size',
+          'border',
         ],
       });
     },