From 89956d006cb7dc5d9135a6ce939e982e1a5b8d3a Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 4 Dec 2024 17:46:28 +0530
Subject: [PATCH] feat: common attachment chips

---
 .../message/bubbles/Attachments.vue           | 62 +------------
 .../components-next/message/bubbles/Email.vue | 59 +-----------
 .../components-next/message/bubbles/Text.vue  | 60 +-----------
 .../message/chips/AttachmentChips.vue         | 92 +++++++++++++++++++
 4 files changed, 100 insertions(+), 173 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
index d3cfb6c1d..1dcdf21d7 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
@@ -1,13 +1,7 @@
 <script setup>
-import { computed } from 'vue';
-
 import BaseBubble from 'next/message/bubbles/Base.vue';
-import ImageChip from 'next/message/chips/Image.vue';
-import VideoChip from 'next/message/chips/Video.vue';
-import AudioChip from 'next/message/chips/Audio.vue';
-import FileChip from 'next/message/chips/File.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
 
-import { ATTACHMENT_TYPES } from '../constants';
 /**
  * @typedef {Object} Attachment
  * @property {number} id - Unique identifier for the attachment
@@ -21,66 +15,16 @@ import { ATTACHMENT_TYPES } from '../constants';
  * @property {number|null} width - Width of the image if applicable
  * @property {number|null} height - Height of the image if applicable
  */
-const props = defineProps({
+defineProps({
   attachments: {
     type: Array,
     default: () => [],
   },
 });
-
-const mediaAttachments = computed(() => {
-  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
-  const mediaTypes = props.attachments.filter(attachment =>
-    allowedTypes.includes(attachment.fileType)
-  );
-
-  return mediaTypes.sort(
-    (a, b) =>
-      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
-  );
-});
-
-const recordings = computed(() => {
-  return props.attachments.filter(
-    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
-  );
-});
-
-const files = computed(() => {
-  return props.attachments.filter(
-    attachment => attachment.fileType === ATTACHMENT_TYPES.FILE
-  );
-});
 </script>
 
 <template>
   <BaseBubble class="grid gap-2 bg-transparent">
-    <div v-if="mediaAttachments.length" class="flex gap-1">
-      <template v-for="attachment in mediaAttachments" :key="attachment.id">
-        <ImageChip
-          v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
-          :attachment="attachment"
-        />
-        <VideoChip
-          v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
-          :attachment="attachment"
-        />
-      </template>
-    </div>
-    <div v-if="recordings.length" class="flex flex-wrap gap-1">
-      <AudioChip
-        v-for="attachment in recordings"
-        :key="attachment.id"
-        class="bg-n-alpha-3 dark:bg-n-alpha-2 text-n-slate-12"
-        :attachment="attachment"
-      />
-    </div>
-    <div v-if="files.length" class="flex flex-wrap gap-1">
-      <FileChip
-        v-for="attachment in files"
-        :key="attachment.id"
-        :attachment="attachment"
-      />
-    </div>
+    <AttachmentChips :attachments="attachments" class="gap-1" />
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email.vue b/app/javascript/dashboard/components-next/message/bubbles/Email.vue
index 3863405df..a61d95d6d 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email.vue
@@ -3,14 +3,9 @@ import { computed, useTemplateRef, ref, watch } from 'vue';
 import { Letter } from 'vue-letter';
 import Icon from 'next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
-
-import ImageChip from 'next/message/chips/Image.vue';
-import VideoChip from 'next/message/chips/Video.vue';
-import AudioChip from 'next/message/chips/Audio.vue';
-import FileChip from 'next/message/chips/File.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
 
 import { MESSAGE_STATUS } from '../constants';
-import { ATTACHMENT_TYPES } from '../constants';
 
 const props = defineProps({
   content: {
@@ -101,30 +96,6 @@ const showMeta = computed(() => {
     subject.value
   );
 });
-
-const mediaAttachments = computed(() => {
-  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
-  const mediaTypes = props.attachments.filter(attachment =>
-    allowedTypes.includes(attachment.fileType)
-  );
-
-  return mediaTypes.sort(
-    (a, b) =>
-      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
-  );
-});
-
-const recordings = computed(() => {
-  return props.attachments.filter(
-    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
-  );
-});
-
-const files = computed(() => {
-  return props.attachments.filter(
-    attachment => attachment.fileType === ATTACHMENT_TYPES.FILE
-  );
-});
 </script>
 
 <template>
@@ -182,33 +153,7 @@ const files = computed(() => {
       />
     </section>
     <section class="px-4 pb-4">
-      <div v-if="mediaAttachments.length" class="flex flex-wrap gap-2">
-        <template v-for="attachment in mediaAttachments" :key="attachment.id">
-          <ImageChip
-            v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
-            :attachment="attachment"
-          />
-          <VideoChip
-            v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
-            :attachment="attachment"
-          />
-        </template>
-      </div>
-      <div v-if="recordings.length" class="flex flex-wrap gap-2">
-        <AudioChip
-          v-for="attachment in recordings"
-          :key="attachment.id"
-          class="bg-n-alpha-3 dark:bg-n-alpha-2 text-n-slate-12"
-          :attachment="attachment"
-        />
-      </div>
-      <div v-if="files.length" class="flex flex-wrap gap-2">
-        <FileChip
-          v-for="attachment in files"
-          :key="attachment.id"
-          :attachment="attachment"
-        />
-      </div>
+      <AttachmentChips :attachments="attachments" class="gap-1" />
     </section>
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text.vue b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
index 8d8231512..b269264e1 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
@@ -1,15 +1,11 @@
 <script setup>
 import { computed } from 'vue';
 import { useMessageContext } from '../provider.js';
-
 import BaseBubble from 'next/message/bubbles/Base.vue';
-import ImageChip from 'next/message/chips/Image.vue';
-import VideoChip from 'next/message/chips/Video.vue';
-import AudioChip from 'next/message/chips/Audio.vue';
-import FileChip from 'next/message/chips/File.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
 
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
-import { MESSAGE_VARIANTS, ATTACHMENT_TYPES } from '../constants';
+import { MESSAGE_VARIANTS } from '../constants';
 /**
  * @typedef {Object} Attachment
  * @property {number} id - Unique identifier for the attachment
@@ -43,62 +39,12 @@ const formattedContent = computed(() => {
 
   return new MessageFormatter(props.content).formattedMessage;
 });
-
-const mediaAttachments = computed(() => {
-  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
-  const mediaTypes = props.attachments.filter(attachment =>
-    allowedTypes.includes(attachment.fileType)
-  );
-
-  return mediaTypes.sort(
-    (a, b) =>
-      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
-  );
-});
-
-const recordings = computed(() => {
-  return props.attachments.filter(
-    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
-  );
-});
-
-const files = computed(() => {
-  return props.attachments.filter(
-    attachment => attachment.fileType === ATTACHMENT_TYPES.FILE
-  );
-});
 </script>
 
 <template>
   <BaseBubble class="p-3 grid gap-3">
     <span v-if="content" v-html="formattedContent" />
-    <div v-if="mediaAttachments.length" class="flex flex-wrap gap-2">
-      <template v-for="attachment in mediaAttachments" :key="attachment.id">
-        <ImageChip
-          v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
-          :attachment="attachment"
-        />
-        <VideoChip
-          v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
-          :attachment="attachment"
-        />
-      </template>
-    </div>
-    <div v-if="recordings.length" class="flex flex-wrap gap-2">
-      <AudioChip
-        v-for="attachment in recordings"
-        :key="attachment.id"
-        class="bg-n-alpha-3 dark:bg-n-alpha-2 text-n-slate-12"
-        :attachment="attachment"
-      />
-    </div>
-    <div v-if="files.length" class="flex flex-wrap gap-2">
-      <FileChip
-        v-for="attachment in files"
-        :key="attachment.id"
-        :attachment="attachment"
-      />
-    </div>
+    <AttachmentChips :attachments="attachments" class="gap-2" />
   </BaseBubble>
 </template>
 
diff --git a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
new file mode 100644
index 000000000..0a14b4666
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { computed, defineOptions } from 'vue';
+
+import ImageChip from 'next/message/chips/Image.vue';
+import VideoChip from 'next/message/chips/Video.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
+import FileChip from 'next/message/chips/File.vue';
+
+import { ATTACHMENT_TYPES } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const mediaAttachments = computed(() => {
+  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
+  const mediaTypes = props.attachments.filter(attachment =>
+    allowedTypes.includes(attachment.fileType)
+  );
+
+  return mediaTypes.sort(
+    (a, b) =>
+      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
+  );
+});
+
+const recordings = computed(() => {
+  return props.attachments.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
+  );
+});
+
+const files = computed(() => {
+  return props.attachments.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.FILE
+  );
+});
+</script>
+
+<template>
+  <div
+    v-if="mediaAttachments.length"
+    :class="[$attrs.class]"
+    class="flex flex-wrap"
+  >
+    <template v-for="attachment in mediaAttachments" :key="attachment.id">
+      <ImageChip
+        v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
+        :attachment="attachment"
+      />
+      <VideoChip
+        v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
+        :attachment="attachment"
+      />
+    </template>
+  </div>
+  <div v-if="recordings.length" :class="[$attrs.class]" class="flex flex-wrap">
+    <AudioChip
+      v-for="attachment in recordings"
+      :key="attachment.id"
+      class="bg-n-alpha-3 dark:bg-n-alpha-2 text-n-slate-12"
+      :attachment="attachment"
+    />
+  </div>
+  <div v-if="files.length" :class="[$attrs.class]" class="flex flex-wrap">
+    <FileChip
+      v-for="attachment in files"
+      :key="attachment.id"
+      :attachment="attachment"
+    />
+  </div>
+</template>