From 603c45a90708ab455dff1566cde1cdaf1ccced45 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 10 Oct 2023 10:45:05 +0530
Subject: [PATCH] refactor: use vue 2 syntax

---
 .../widgets/conversation/ReplyToMessage.vue   | 61 +++++++++++++------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
index ffd8381a4..c8ad57f7c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
@@ -1,21 +1,3 @@
-<script setup>
-import { computed } from 'vue';
-import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
-
-const { content } = defineProps({
-  messageId: {
-    type: Number,
-    required: true,
-  },
-  content: {
-    type: String,
-    default: '',
-  },
-});
-
-const cleanedContent = computed(() => extractTextFromMarkdown(content));
-</script>
-
 <template>
   <div
     class="reply-editor bg-slate-50 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2 cursor-pointer"
@@ -37,6 +19,49 @@ const cleanedContent = computed(() => extractTextFromMarkdown(content));
   </div>
 </template>
 
+<script>
+import { ATTACHMENT_ICONS } from 'shared/constants/messages';
+import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
+
+export default {
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    attachments: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    cleanedContent() {
+      return extractTextFromMarkdown(this.content);
+    },
+    attachmentIcon() {
+      return ATTACHMENT_ICONS[this.attachments[0]?.file_type];
+    },
+    attachmentLabel() {
+      const firstFileName = this.attachments[0].data_url?.split('/').pop();
+
+      if (this.attachments.length > 1) {
+        if (firstFileName) {
+          return `${firstFileName} and ${this.attachments.length - 1} more`;
+        }
+
+        return `${this.attachments.length} files`;
+      }
+
+      return firstFileName ?? 'Attachment';
+    },
+  },
+};
+</script>
+
 <style lang="scss">
 // TODO: Remove this
 // override for dashboard/assets/scss/widgets/_reply-box.scss