akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: common attachment chips

Browse Source
This commit is contained in:
Shivam Mishra
2024-12-04 17:46:57 +05:30
parent b1e55bab9e
commit 89956d006c
4 changed files with 100 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/message/bubbles/Text.vue
+3 -57
View File
@@ -1,15 +1,11 @@
<script setup>
import { computed } from 'vue';
import { useMessageContext } from '../provider.js';
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 AttachmentChips from 'next/message/chips/AttachmentChips.vue';
import MessageFormatter from 'shared/helpers/MessageFormatter.js';
import { MESSAGE_VARIANTS, ATTACHMENT_TYPES } from '../constants';
import { MESSAGE_VARIANTS } from '../constants';
/**
* @typedef {Object} Attachment
* @property {number} id - Unique identifier for the attachment
@@ -43,62 +39,12 @@ const formattedContent = computed(() => {
return new MessageFormatter(props.content).formattedMessage;
});
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="p-3 grid gap-3">
<span v-if="content" v-html="formattedContent" />
<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>
<AttachmentChips :attachments="attachments" class="gap-2" />
</BaseBubble>
</template>