From 7added2d48008d5ba7d36ca778f2cd8026f1f4d1 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 10 Oct 2023 11:15:31 +0530
Subject: [PATCH] feat: support attachments in bubble

---
 .../widgets/conversation/Message.vue          |  1 +
 .../widgets/conversation/bubble/ReplyTo.vue   | 82 ++++++++++++++-----
 2 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 71cf1ef4b..d40ed3482 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -37,6 +37,7 @@
         <bubble-reply-to
           v-if="inReplyToMessageId && inboxSupportsReplyTo"
           :content="inReplyTo.content"
+          :attachments="inReplyTo.attachments"
           :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
           @click="navigateToMessage"
         />
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
index a7a5ad64a..2c457a224 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
@@ -1,29 +1,69 @@
-<script setup>
-import { computed } from 'vue';
-import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
-
-const props = defineProps({
-  content: {
-    type: String,
-    default: '',
-  },
-  defaultEmptyMessage: {
-    type: String,
-    required: true,
-  },
-});
-
-const cleanedContent = computed(() => extractTextFromMarkdown(props.content));
-</script>
-
 <template>
   <div
-    class="p-2 -mx-2 overflow-hidden rounded-md bg-woot-600 line-clamp-3 min-w-[15rem] mb-2 cursor-pointer"
+    class="p-2 -mx-2 rounded-md bg-woot-600 min-w-[15rem] mb-2 cursor-pointer"
     @click="$emit('click')"
   >
-    <template v-if="content">
+    <div v-if="content" class="line-clamp-3">
       {{ cleanedContent }}
-    </template>
+    </div>
+    <div v-else-if="hasAttachments" class="line-clamp-3">
+      {{ attachmentLabel }}
+    </div>
     <template v-else> {{ defaultEmptyMessage }} </template>
   </div>
 </template>
+
+<script>
+import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
+
+export default {
+  name: 'ReplyTo',
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    attachments: {
+      type: Array,
+      default: () => [],
+    },
+    defaultEmptyMessage: {
+      type: String,
+      required: true,
+    },
+  },
+  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')
+      );
+    },
+  },
+};
+</script>