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

Fixes: #2009 , #2365

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>