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

feat: setup instagram

Browse Source
This commit is contained in:
Shivam Mishra
2024-12-05 15:08:37 +05:30
parent 68f02e06b7
commit 26b5c2c136
5 changed files with 260 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/message/Message.vue
+5
View File
@@ -18,6 +18,7 @@ import ImageBubble from './bubbles/Image.vue';
import FileBubble from './bubbles/File.vue';
import AudioBubble from './bubbles/Audio.vue';
import VideoBubble from './bubbles/Video.vue';
import InstagramStoryBubble from './bubbles/InstagramStory.vue';
import AttachmentsBubble from './bubbles/Attachments.vue';
import EmailBubble from './bubbles/Email/Index.vue';
@@ -238,6 +239,10 @@ const componentToRender = computed(() => {
if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
}
if (props.contentAttributes.imageType === 'story_mention') {
return InstagramStoryBubble;
}
if (props.attachments.length === 1 && !props.content) {
const fileType = props.attachments[0].fileType;
if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
app/javascript/dashboard/components-next/message/bubbles/Image.vue
+8 -1
View File
@@ -29,12 +29,19 @@ const props = defineProps({
},
});
const emit = defineEmits(['error']);
const attachment = computed(() => {
return props.attachments[0];
});
const hasError = ref(false);
const handleError = () => {
hasError.value = true;
emit('error');
};
const downloadAttachment = async () => {
const response = await fetch(attachment.value.dataUrl);
const blob = await response.blob();
@@ -51,7 +58,7 @@ const downloadAttachment = async () => {
<template>
<BaseBubble class="overflow-hidden relative group">
<img :src="attachment.thumbUrl" @click="onClick" @error="hasError = true" />
<img :src="attachment.thumbUrl" @click="onClick" @error="handleError" />
<div
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"
>
app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
+91
View File
@@ -0,0 +1,91 @@
<script setup>
import { ref, computed } from 'vue';
import { useMessageContext } from '../provider.js';
import Icon from 'next/icon/Icon.vue';
import ImageBubble from './Image.vue';
import VideoBubble from './Video.vue';
import BaseBubble from 'next/message/bubbles/Base.vue';
import MessageFormatter from 'shared/helpers/MessageFormatter.js';
import { MESSAGE_VARIANTS } 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 emit = defineEmits(['error']);
const attachment = computed(() => {
return props.attachments[0];
});
const { variant } = useMessageContext();
const hasImgStoryError = ref(false);
const hasVideoStoryError = ref(false);
const formattedContent = computed(() => {
if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
return props.content;
}
return new MessageFormatter(props.content).formattedMessage;
});
const onImageLoadError = () => {
hasImgStoryError.value = true;
emit('error');
};
const onVideoLoadError = () => {
hasVideoStoryError.value = true;
emit('error');
};
</script>
<template>
<BaseBubble class="p-3 overflow-hidden">
<div v-if="content" class="mb-2" v-html="formattedContent" />
<img
v-if="!hasImgStoryError"
class="rounded-lg max-w-80"
:src="attachment.dataUrl"
@error="onImageLoadError"
/>
<video
v-else-if="!hasVideoStoryError"
class="rounded-lg max-w-80"
controls
:src="attachment.dataUrl"
@error="onVideoLoadError"
/>
<div
v-else
class="flex items-center bg-n-alpha-1 gap-1 text-center px-5 py-4 rounded-lg"
>
<Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
<p class="mb-0 text-n-slate-11">
{{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
</p>
</div>
</BaseBubble>
</template>
app/javascript/dashboard/components-next/message/bubbles/Video.vue
+9 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed } from 'vue';
import { ref, computed } from 'vue';
import BaseBubble from './Base.vue';
import Icon from 'next/icon/Icon.vue';
import { ATTACHMENT_TYPES } from '../constants';
@@ -29,6 +29,13 @@ const props = defineProps({
required: true,
},
});
const emit = defineEmits(['error']);
const hasError = ref(false);
const handleError = () => {
hasError.value = true;
emit('error');
};
const attachment = computed(() => {
return props.attachments[0];
@@ -54,7 +61,7 @@ const isReel = computed(() => {
'max-w-48': isReel,
'max-w-full': !isReel,
}"
@error="hasError = true"
@error="handleError"
/>
</BaseBubble>
</template>
app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
+147 -234
View File
@@ -2,6 +2,151 @@ import camelcaseKeys from 'camelcase-keys';
export default camelcaseKeys(
[
{
id: 25281804,
content: 'cwtestinglocal mentioned you in the story: ',
inbox_id: 27355,
conversation_id: 23731,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {
story_sender: 'cwtestinglocal',
story_id: '17889220763812855',
image_type: 'story_mention',
},
created_at: 1692765935,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 53375128,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
attachments: [
{
id: 2053726,
message_id: 25281804,
file_type: 'image',
account_id: 1,
extension: null,
data_url:
'https://videos.pexels.com/video-files/7722989/7722989-uhd_1440_2560_25fps.mp4',
thumb_url:
'https://videos.pexels.com/video-files/7722989/7722989-uhd_1440_2560_25fps.mp4',
file_size: 376973,
width: 1179,
height: 2096,
},
],
},
{
id: 25281804,
content: 'cwtestinglocal mentioned you in the story: ',
inbox_id: 27355,
conversation_id: 23731,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {
story_sender: 'cwtestinglocal',
story_id: '17889220763812855',
image_type: 'story_mention',
},
created_at: 1692765935,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 53375128,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
attachments: [
{
id: 2053726,
message_id: 25281804,
file_type: 'image',
account_id: 1,
extension: null,
data_url:
'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
thumb_url:
'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
file_size: 376973,
width: 1179,
height: 2096,
},
],
},
{
id: 25281804,
content: 'cwtestinglocal mentioned you in the story: ',
inbox_id: 27355,
conversation_id: 23731,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {
story_sender: 'cwtestinglocal',
story_id: '17889220763812855',
image_type: 'story_mention',
},
created_at: 1692765935,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 53375128,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
attachments: [
{
id: 2053726,
message_id: 25281804,
file_type: 'image',
account_id: 1,
extension: null,
data_url: 'https://chatwoot.dev/definitely-broken-image',
thumb_url: 'https://chatwoot.dev/definitely-broken-image',
file_size: 376973,
width: 1179,
height: 2096,
},
],
},
{
id: 26433202,
content: 'Hi, Jane here (testing)',
@@ -55,238 +200,6 @@ export default camelcaseKeys(
thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
},
},
{
id: 26433221,
content: 'Hi',
inbox_id: 27355,
conversation_id: 26942,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {},
created_at: 1692765971,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDYzMDMyMTgyMjA1MTgxMDYwOTM4OTg5NTY4MAZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 70222869,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
id: 26433223,
content: 'Hi',
inbox_id: 27355,
conversation_id: 26942,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {},
created_at: 1692765973,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDY1MDUzNTAwNzg5MTI3NDUxMzk1OTA5MjIyNAZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 70222869,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
id: 26433224,
content: 'Test',
inbox_id: 27355,
conversation_id: 26942,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {},
created_at: 1692765975,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDY3ODc5NTIzNTM0NDc1NjgwOTkzOTI4ODA2NAZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 70222869,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
id: 26433229,
content: 'One',
inbox_id: 27355,
conversation_id: 26942,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {},
created_at: 1692765976,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDcyOTA1Mzg2OTE4ODkyNDM5OTc2NTQyMjA4MAZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 70222869,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
id: 26433230,
content: 'Two',
inbox_id: 27355,
conversation_id: 26942,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {},
created_at: 1692765978,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDc3MDQ1NzU4NjI2MjM2NTQ4ODM2NzUzNDA4MAZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 70222869,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
id: 26433231,
content: 'Three',
inbox_id: 27355,
conversation_id: 26942,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {},
created_at: 1692765979,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDc4OTQ2MTQ0MDQ1Mzg0NTE0MjE1MTg4ODg5NgZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 70222869,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
id: 26433232,
content: 'Four',
inbox_id: 27355,
conversation_id: 26942,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {},
created_at: 1692765981,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDgxNTIxMDAzMzAyMTIyNzQ0MDQyMjI1NjY0MAZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 70222869,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
id: 26433234,
content: 'Five',
inbox_id: 27355,
conversation_id: 26942,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {},
created_at: 1692765982,
private: false,
source_id:
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDgzOTc4MzYwNDg4NDYwMjU4NzY3Mzc4ODQxNgZDZD',
sender: {
additional_attributes: {
social_profiles: {
instagram: 'cwtestinglocal',
},
},
custom_attributes: {},
email: null,
id: 70222869,
identifier: null,
name: 'Jane Doe',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
id: 26433277,
content: 'Conversation was marked resolved by Jane Doe',
@@ -502,8 +415,8 @@ export default camelcaseKeys(
'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjEwNzM4NDA4NTgwMzUxNzY3OTYxNTM4MDI5MTU4NAZDZD',
sender: {
id: 10,
name: 'Sojan',
available_name: 'Sojan',
name: 'Jane',
available_name: 'Jane',
avatar_url:
'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4a2c0c8e787a381c0a809905e7cb172d5a40f589/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/73185.jpeg',
type: 'user',