refactor: use MessagePreview in reply to

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

@@ -36,9 +36,7 @@
         </blockquote>
         <bubble-reply-to
           v-if="inReplyToMessageId && inboxSupportsReplyTo"
-          :content="inReplyTo.content"
-          :attachments="inReplyTo.attachments"
-          :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
+          :message="inReplyTo"
           @click="navigateToMessage"
         />
         <bubble-text

app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue

@@ -3,66 +3,26 @@
     class="px-2 py-1.5 -mx-2 rounded-md bg-woot-600 min-w-[15rem] mb-2 cursor-pointer"
     @click="$emit('click')"
   >
-    <div v-if="content" class="line-clamp-3">
-      {{ cleanedContent }}
-    </div>
-    <div v-else-if="hasAttachments" class="line-clamp-3">
-      {{ attachmentLabel }}
-    </div>
-    <template v-else> {{ defaultEmptyMessage }} </template>
+    <message-preview
+      :message="message"
+      :show-message-type="false"
+      ::default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
+    />
   </div>
 </template>
 
 <script>
-import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
+import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
 
 export default {
   name: 'ReplyTo',
-  props: {
-    content: {
-      type: String,
-      default: '',
-    },
-    attachments: {
-      type: Array,
-      default: () => [],
-    },
-    defaultEmptyMessage: {
-      type: String,
-      required: true,
-    },
+  components: {
+    MessagePreview,
   },
-  computed: {
-    cleanedContent() {
-      return extractTextFromMarkdown(this.content);
-    },
-    hasAttachments() {
-      return this.attachments.length > 0;
-    },
-    attachmentLabel() {
-      if (!this.attachments.length) return null;
-
-      const firstFileName = this.attachments[0].data_url?.split('/').pop();
-
-      if (this.attachments.length > 1) {
-        if (firstFileName) {
-          return this.$t(
-            'CONVERSATION.REPLY_TO_ATTACHMENT.FILE_PLUS_MULTIPLE',
-            {
-              first: firstFileName,
-              count: (this.attachments.length - 1).toLocaleString(),
-            }
-          );
-        }
-
-        return this.$t('CONVERSATION.REPLY_TO_ATTACHMENT.COUNT', {
-          count: this.attachments.length.toLocaleString(),
-        });
-      }
-
-      return (
-        firstFileName ?? this.$t('CONVERSATION.REPLY_TO_ATTACHMENT.ATTACHMENT')
-      );
+  props: {
+    message: {
+      type: Object,
+      required: true,
     },
   },
 };