From d9ef6df4de427a69a851a4de930d9fa46de2d26e Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 28 Nov 2024 15:40:05 +0530
Subject: [PATCH] feat: add image and video chip

---
 .../components-next/message/bubbles/Text.vue  | 31 ++++++++++-------
 .../components-next/message/chips/Image.vue   | 16 +++++++++
 .../components-next/message/chips/Video.vue   | 34 +++++++++++++++++++
 3 files changed, 69 insertions(+), 12 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/message/chips/Image.vue
 create mode 100644 app/javascript/dashboard/components-next/message/chips/Video.vue

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text.vue b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
index 28dabe0cf..c2871abb8 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
@@ -1,10 +1,12 @@
 <script setup>
 import { computed } from 'vue';
-import MessageFormatter from 'shared/helpers/MessageFormatter.js';
-import BaseBubble from './Base.vue';
 import { useMessageContext } from '../provider.js';
-import { MESSAGE_VARIANTS, MEDIA_TYPES } from '../constants';
 
+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 MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS, ATTACHMENT_TYPES } from '../constants';
 /**
  * @typedef {Object} Attachment
  * @property {number} id - Unique identifier for the attachment
@@ -40,12 +42,14 @@ const formattedContent = computed(() => {
 });
 
 const mediaAttachments = computed(() => {
+  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
   const mediaTypes = props.attachments.filter(attachment =>
-    MEDIA_TYPES.includes(attachment.fileType)
+    allowedTypes.includes(attachment.fileType)
   );
 
   return mediaTypes.sort(
-    (a, b) => MEDIA_TYPES.indexOf(a.fileType) - MEDIA_TYPES.indexOf(b.fileType)
+    (a, b) =>
+      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
   );
 });
 </script>
@@ -54,13 +58,16 @@ const mediaAttachments = computed(() => {
   <BaseBubble class="p-3">
     <span v-html="formattedContent" />
     <div v-if="mediaAttachments.length" class="mt-[10px] flex gap-[10px]">
-      <div
-        v-for="attachment in mediaAttachments"
-        :key="attachment.id"
-        class="size-[72px] overflow-hidden contain-content rounded-xl"
-      >
-        <img class="object-contain" :src="attachment.dataUrl" />
-      </div>
+      <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>
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Image.vue b/app/javascript/dashboard/components-next/message/chips/Image.vue
new file mode 100644
index 000000000..48be0cb31
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/Image.vue
@@ -0,0 +1,16 @@
+<script setup>
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
+  >
+    <img class="w-full h-full object-cover" :src="attachment.dataUrl" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Video.vue b/app/javascript/dashboard/components-next/message/chips/Video.vue
new file mode 100644
index 000000000..483a5032c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/Video.vue
@@ -0,0 +1,34 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
+  >
+    <video
+      :src="attachment.dataUrl"
+      class="w-full h-full object-cover"
+      muted
+      playsInline
+    />
+    <div
+      class="absolute w-full h-full inset-0 p-1 flex items-center justify-center"
+    >
+      <div
+        class="size-7 bg-n-alpha-2 backdrop-blur-sm rounded-full overflow-hidden shadow-[0_5px_15px_rgba(0,0,0,0.4)]"
+      >
+        <Icon
+          icon="i-teenyicons-play-small-solid"
+          class="size-7 text-n-slate-12/60 backdrop-blur"
+        />
+      </div>
+    </div>
+  </div>
+</template>