refactor: use message preview in reply-to-message

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

@@ -21,9 +21,7 @@
     <div class="reply-box__top">
       <reply-to-message
         v-if="shouldShowReplyToMessage"
-        :message-id="inReplyTo.id"
-        :content="inReplyTo.content"
-        :attachments="inReplyTo.attachments"
+        :message="inReplyTo"
         @dismiss="resetReplyToMessage"
         @navigate-to-message="navigateToMessage"
       />

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

@@ -4,8 +4,9 @@
     @click="$emit('navigate-to-message', messageId)"
   >
     <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" icon-size="14" />
-    <div class="flex-grow overflow-hidden text-ellipsis">
-      {{ $t('CONVERSATION.REPLYBOX.REPLYING_TO') }} {{ cleanedContent }}.
+    <div class="flex items-center flex-grow gap-1 text-xs">
+      {{ $t('CONVERSATION.REPLYBOX.REPLYING_TO') }}
+      <message-preview :message="message" :show-message-type="false" />
     </div>
     <woot-button
       v-tooltip="$t('CONVERSATION.REPLYBOX.DISMISS_REPLY')"
@@ -20,57 +21,15 @@
 </template>
 
 <script>
-import { ATTACHMENT_ICONS } from 'shared/constants/messages';
-import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
+import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
 
 export default {
+  components: { MessagePreview },
   props: {
-    messageId: {
-      type: Number,
+    message: {
+      type: Object,
       required: true,
     },
-    content: {
-      type: String,
-      default: '',
-    },
-    attachments: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    cleanedContent() {
-      return extractTextFromMarkdown(this.content);
-    },
-    attachmentIcon() {
-      if (!this.attachments.length) return null;
-      return ATTACHMENT_ICONS[this.attachments[0]?.file_type];
-    },
-    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')
-      );
-    },
   },
 };
 </script>