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

feat: add text images

Browse Source
This commit is contained in:
Shivam Mishra
2024-11-27 20:19:06 +05:30
parent c2305a11c6
commit 59afa50b71
2 changed files with 53 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/message/bubbles/Text.vue
+37 -1
View File
@@ -3,13 +3,30 @@ import { computed } from 'vue';
import MessageFormatter from 'shared/helpers/MessageFormatter.js';
import BaseBubble from './Base.vue';
import { useMessageContext } from '../provider.js';
import { MESSAGE_VARIANTS } from '../constants';
import { MESSAGE_VARIANTS, MEDIA_TYPES } from '../constants';
/**
* @typedef {Object} Attachment
* @property {number} id - Unique identifier for the attachment
* @property {number} messageId - ID of the associated message
* @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
* @property {number} accountId - ID of the associated account
* @property {string|null} extension - File extension
* @property {string} dataUrl - URL to access the full attachment data
* @property {string} thumbUrl - URL to access the thumbnail version
* @property {number} fileSize - Size of the file in bytes
* @property {number|null} width - Width of the image if applicable
* @property {number|null} height - Height of the image if applicable
*/
const props = defineProps({
content: {
type: String,
required: true,
},
attachments: {
type: Array,
default: () => [],
},
});
const { variant } = useMessageContext();
@@ -21,11 +38,30 @@ const formattedContent = computed(() => {
return new MessageFormatter(props.content).formattedMessage;
});
const mediaAttachments = computed(() => {
const mediaTypes = props.attachments.filter(attachment =>
MEDIA_TYPES.includes(attachment.fileType)
);
return mediaTypes.sort(
(a, b) => MEDIA_TYPES.indexOf(a.fileType) - MEDIA_TYPES.indexOf(b.fileType)
);
});
</script>
<template>
<BaseBubble class="p-3">
<span v-html="formattedContent" />
<div v-if="mediaAttachments" 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>
</div>
</BaseBubble>
</template>
app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js
+16 -2
View File
@@ -759,9 +759,9 @@ export default camelcaseKeys(
account_id: 2,
extension: null,
data_url:
'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUlLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ffd23d216c4a6c15a7fae0f15c84620ba98d002e/letterhead-with-margin.png',
'https://images.pexels.com/photos/2526935/pexels-photo-2526935.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
thumb_url:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUlLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ffd23d216c4a6c15a7fae0f15c84620ba98d002e/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/letterhead-with-margin.png',
'https://images.pexels.com/photos/2526935/pexels-photo-2526935.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
file_size: 287949,
width: null,
height: null,
@@ -780,6 +780,20 @@ export default camelcaseKeys(
width: null,
height: null,
},
{
id: 22,
message_id: 5314,
file_type: 'image',
account_id: 2,
extension: null,
data_url:
'https://images.pexels.com/photos/3893788/pexels-photo-3893788.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
thumb_url:
'https://images.pexels.com/photos/3893788/pexels-photo-3893788.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
file_size: 287949,
width: null,
height: null,
},
],
sender: {
id: 1,