feat: add attachments

app/javascript/dashboard/components-next/message/bubbles/Email.vue

@@ -3,7 +3,14 @@ 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 { MESSAGE_STATUS } from '../constants';
+import { ATTACHMENT_TYPES } from '../constants';
 
 const props = defineProps({
   content: {
@@ -14,6 +21,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
   status: {
     type: String,
     required: true,
@@ -90,11 +101,35 @@ 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>
   <BaseBubble class="w-full overflow-hidden">
-    <div
+    <section
       v-if="showMeta"
       class="p-4 space-y-1 pr-9 border-b border-n-strong"
       :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
@@ -120,8 +155,8 @@ const showMeta = computed(() => {
         {{ $t('EMAIL_HEADER.SUBJECT') }}:
         {{ subject }}
       </div>
-    </div>
-    <div
+    </section>
+    <section
       ref="contentContainer"
       class="p-4"
       :class="{
@@ -145,6 +180,35 @@ const showMeta = computed(() => {
         :html="contentToShow"
         :text="textToShow"
       />
-    </div>
+    </section>
+    <section class="p-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>
+    </section>
   </BaseBubble>
 </template>