From 9398d87f925d2b4fa2d00490f2d74ca556c6a1d0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 19 Apr 2024 10:23:55 +0530
Subject: [PATCH] fix: show different type of messages

image, video, audio & document
---
 frontend/src/components/Activities.vue        |  3 ++
 .../src/components/Icons/DocumentIcon.vue     | 20 +++++++
 frontend/src/components/WhatsAppArea.vue      | 54 ++++++++++++++++++-
 3 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Icons/DocumentIcon.vue

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 3645f561..047417c0 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -927,6 +927,9 @@ const whatsappMessages = createListResource({
     'to',
     'from',
     'content_type',
+    'attach',
+    'template',
+    'use_template',
     'creation',
     'message',
     'status',
diff --git a/frontend/src/components/Icons/DocumentIcon.vue b/frontend/src/components/Icons/DocumentIcon.vue
new file mode 100644
index 00000000..fb118911
--- /dev/null
+++ b/frontend/src/components/Icons/DocumentIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-file-text"
+  >
+    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+    <path d="M10 9H8" />
+    <path d="M16 13H8" />
+    <path d="M16 17H8" />
+  </svg>
+</template>
diff --git a/frontend/src/components/WhatsAppArea.vue b/frontend/src/components/WhatsAppArea.vue
index 9cfe5818..957ecd0b 100644
--- a/frontend/src/components/WhatsAppArea.vue
+++ b/frontend/src/components/WhatsAppArea.vue
@@ -7,9 +7,56 @@
       :class="{ 'justify-end': whatsapp.type == 'Outgoing' }"
     >
       <div
+        :id="whatsapp.name"
         class="mb-3 inline-flex max-w-[90%] gap-2 rounded-md bg-gray-50 p-1.5 pl-2 text-base shadow-sm"
       >
-        <div v-html="formatWhatsAppMessage(whatsapp.message)"></div>
+        <div
+          v-if="whatsapp.content_type == 'text'"
+          v-html="formatWhatsAppMessage(whatsapp.message)"
+        />
+        <div v-else-if="whatsapp.content_type == 'image'">
+          <img
+            :src="whatsapp.attach"
+            class="h-40 cursor-pointer rounded-md"
+            @click="() => openFileInAnotherTab(whatsapp.attach)"
+          />
+          <div
+            v-if="!whatsapp.message.startsWith('/files/')"
+            class="mt-1.5"
+            v-html="formatWhatsAppMessage(whatsapp.message)"
+          />
+        </div>
+        <div
+          v-else-if="whatsapp.content_type == 'document'"
+          class="flex items-center gap-2"
+        >
+          <DocumentIcon
+            class="size-10 cursor-pointer rounded-md text-gray-500"
+            @click="() => openFileInAnotherTab(whatsapp.attach)"
+          />
+          <div class="text-gray-600">Document</div>
+        </div>
+        <div
+          v-else-if="whatsapp.content_type == 'audio'"
+          class="flex items-center gap-2"
+        >
+          <audio :src="whatsapp.attach" controls class="cursor-pointer" />
+        </div>
+        <div
+          v-else-if="whatsapp.content_type == 'video'"
+          class="flex-col items-center gap-2"
+        >
+          <video
+            :src="whatsapp.attach"
+            controls
+            class="h-40 cursor-pointer rounded-md"
+          />
+          <div
+            v-if="!whatsapp.message.startsWith('/files/')"
+            class="mt-1.5"
+            v-html="formatWhatsAppMessage(whatsapp.message)"
+          />
+        </div>
         <div class="-mb-1 flex shrink-0 items-end gap-1 text-gray-600">
           <Tooltip :text="dateFormat(whatsapp.creation, 'ddd, MMM D, YYYY')">
             <div class="text-2xs">
@@ -36,6 +83,7 @@
 <script setup>
 import CheckIcon from '@/components/Icons/CheckIcon.vue'
 import DoubleCheckIcon from '@/components/Icons/DoubleCheckIcon.vue'
+import DocumentIcon from '@/components/Icons/DocumentIcon.vue'
 import { Tooltip } from 'frappe-ui'
 import { dateFormat } from '@/utils'
 
@@ -43,6 +91,10 @@ const props = defineProps({
   messages: Array,
 })
 
+function openFileInAnotherTab(url) {
+  window.open(url, '_blank')
+}
+
 function formatWhatsAppMessage(message) {
   // if message contains _text_, make it italic
   message = message.replace(/_(.*?)_/g, '<i>$1</i>')