From d93e2ee60ab9c9c738af8fe1d8477610277f4da3 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 27 Nov 2024 20:05:35 +0530
Subject: [PATCH] feat: add download option

TODO: Get better designs
---
 .../components-next/message/bubbles/Media.vue | 25 +++++++++++++++++--
 .../components-next/message/constants.js      |  7 ++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Media.vue b/app/javascript/dashboard/components-next/message/bubbles/Media.vue
index 51a525597..5d3770ce4 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Media.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Media.vue
@@ -34,15 +34,36 @@ const attachment = computed(() => {
 });
 
 const hasError = ref(false);
+
+const downloadAttachment = async () => {
+  const response = await fetch(attachment.value.dataUrl);
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `attachment${attachment.value.extension || ''}`;
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(a);
+};
 </script>
 
 <template>
   <BaseBubble class="overflow-hidden relative group">
     <img :src="attachment.thumbUrl" @click="onClick" @error="hasError = true" />
     <div
-      class="inset-0 absolute bg-gradient-to-t from-n-slate-12/10 to-transparent hidden group-hover:flex items-end justify-end"
+      class="inset-0 p-2 absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex items-end justify-end gap-1.5"
     >
-      <Button xs faded slate icon="i-lucide-download" />
+      <Button xs solid slate icon="i-lucide-expand" class="opacity-60" />
+      <Button
+        xs
+        solid
+        slate
+        icon="i-lucide-download"
+        class="opacity-60"
+        @click="downloadAttachment"
+      />
     </div>
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/constants.js b/app/javascript/dashboard/components-next/message/constants.js
index e7d5f0976..9291be776 100644
--- a/app/javascript/dashboard/components-next/message/constants.js
+++ b/app/javascript/dashboard/components-next/message/constants.js
@@ -46,3 +46,10 @@ export const ATTACHMENT_TYPES = {
   CONTACT: 'contact',
   IG_REEL: 'ig_reel',
 };
+
+export const MEDIA_TYPES = [
+  ATTACHMENT_TYPES.IMAGE,
+  ATTACHMENT_TYPES.VIDEO,
+  ATTACHMENT_TYPES.AUDIO,
+  ATTACHMENT_TYPES.IG_REEL,
+];