test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: show different type of messages

Browse Source 
image, video, audio & document
This commit is contained in:
Shariq Ansari 2024-04-19 10:23:55 +05:30
parent 803d02f796
commit 9398d87f92
3 changed files with 76 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/Activities.vue
View File

@ -927,6 +927,9 @@ const whatsappMessages = createListResource({
'to',
'from',
'content_type',
'attach',
'template',
'use_template',
'creation',
'message',
'status',

20
frontend/src/components/Icons/DocumentIcon.vue Normal file
View File

@ -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>

54
frontend/src/components/WhatsAppArea.vue
View File

@ -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>')