fix: Hide quoted replies by default from messages (#3009)

Fixes: #2009 , #2365

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.

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>

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"
   }
 }

app/javascript/shared/mixins/messageFormatterMixin.js

@@ -34,6 +34,7 @@ export default {
           'lang',
           'align',
           'size',
+          'border',
         ],
       });
     },