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

feat: use realworld like data

Browse Source
This commit is contained in:
Shivam Mishra
2024-11-21 19:44:30 +05:30
parent c3327502a1
commit d2634cb9a3
4 changed files with 858 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/message/Message.vue
+123 -28
View File
@@ -1,69 +1,161 @@
<script setup>
import { computed } from 'vue';
import {
MESSAGE_TYPES,
MESSAGE_VARIANTS,
SENDER_TYPES,
ORIENTATION,
} from './constants';
import TextBubble from './bubbles/Text.vue';
import Avatar from 'next/avatar/Avatar.vue';
import Icon from 'next/icon/Icon.vue';
// id: 5272,
// content: 'Hey, how are ya, I had a few questions about Chatwoot?',
// inbox_id: 475,
// conversation_id: 43,
// message_type: 0,
// content_type: 'text',
// status: 'sent',
// content_attributes: {
// in_reply_to: null,
// },
// created_at: 1732195656,
// private: false,
// source_id: null,
// sender: {
// additional_attributes: {},
// custom_attributes: {},
// email: 'hey@example.com',
// id: 597,
// identifier: null,
// name: 'hey',
// phone_number: null,
// thumbnail: '',
// type: 'contact',
// },
//
const props = defineProps({
variant: {
id: { type: Number, required: true },
messageType: {
type: Number,
required: true,
validator: value => Object.values(MESSAGE_TYPES).includes(value),
},
status: {
type: String,
required: true,
validator: value => ['user', 'agent', 'system', 'private'].includes(value),
validator: value => ['sent', 'delivered', 'read', 'failed'].includes(value),
},
orientation: {
private: {
type: Boolean,
default: false,
},
createdAt: {
type: Number,
required: true,
},
sender: {
type: Object,
default: null,
},
senderId: {
type: Number,
default: null,
},
senderType: {
type: String,
default: 'left',
validator: value => ['left', 'right', 'center'].includes(value),
default: null,
},
text: {
content: {
type: String,
default: 'Hello World',
required: true,
},
user: {
type: String,
default: '',
currentUserId: {
type: Number,
required: true,
},
});
const variant = computed(() => {
if (props.private) {
return MESSAGE_VARIANTS.PRIVATE;
}
if (props.messageType === MESSAGE_TYPES.INCOMING) {
return MESSAGE_VARIANTS.USER;
}
if (props.messageType === MESSAGE_TYPES.ACTIVITY) {
return MESSAGE_VARIANTS.ACTIVITY;
}
if (props.messageType === MESSAGE_TYPES.OUTGOING) {
return MESSAGE_VARIANTS.AGENT;
}
if (props.messageType === MESSAGE_TYPES.TEMPLATE) {
return MESSAGE_VARIANTS.TEMPLATE;
}
return MESSAGE_VARIANTS.USER;
});
const orientation = computed(() => {
if (
props.senderType === SENDER_TYPES.USER &&
props.currentUserId === props.senderId
) {
return ORIENTATION.RIGHT;
}
if (props.messageType === MESSAGE_TYPES.ACTIVITY) return ORIENTATION.CENTER;
return ORIENTATION.LEFT;
});
const flexOrientationClass = computed(() => {
const map = {
left: 'justify-start',
right: 'justify-end',
center: 'justify-center',
[ORIENTATION.LEFT]: 'justify-start',
[ORIENTATION.RIGHT]: 'justify-end',
[ORIENTATION.CENTER]: 'justify-center',
};
return map[props.orientation];
return map[orientation.value];
});
const gridClass = computed(() => {
const map = {
left: 'grid grid-cols-[24px_1fr]',
right: 'grid grid-cols-[1fr_24px]',
[ORIENTATION.LEFT]: 'grid grid-cols-[24px_1fr]',
[ORIENTATION.RIGHT]: 'grid grid-cols-[1fr_24px]',
};
return map[props.orientation];
return map[orientation.value];
});
const gridTemplate = computed(() => {
const map = {
left: `
[ORIENTATION.LEFT]: `
"avatar bubble"
"spacer meta"
`,
right: `
[ORIENTATION.RIGHT]: `
"bubble avatar"
"meta spacer"
`,
};
return map[props.orientation];
return map[orientation.value];
});
</script>
<template>
<div class="flex w-full" :class="flexOrientationClass">
<div v-if="variant === 'system'">
<TextBubble v-bind="props" />
<div v-if="variant === MESSAGE_VARIANTS.ACTIVITY">
<TextBubble v-bind="props" :variant :orientation />
</div>
<div
v-else
@@ -71,21 +163,24 @@ const gridTemplate = computed(() => {
class="gap-x-3 gap-y-2 grid-area"
:style="{
gridTemplateAreas: gridTemplate,
gridTemplateColumns:
props.orientation === 'center' ? '1fr' : 'auto 1fr',
}"
>
<div class="[grid-area:avatar] flex items-end">
<Avatar :name="user" src="" size="24" />
<Avatar :name="sender ? sender.name : ''" src="" :size="24" />
</div>
<TextBubble v-bind="props" class="[grid-area:bubble]" />
<TextBubble
v-bind="props"
:variant
:orientation
class="[grid-area:bubble]"
/>
<div
class="[grid-area:meta] text-xs text-n-slate-11 flex items-center gap-1.5"
:class="flexOrientationClass"
>
<span>{{ user }} {{ '• 1m ago' }}</span>
<span>{{ sender ? sender.name : '' }} {{ '• 1m ago' }}</span>
<Icon
v-if="variant === 'private'"
v-if="variant === MESSAGE_VARIANTS.PRIVATE"
icon="i-lucide-lock-keyhole"
class="text-n-slate-10 size-3"
/>
app/javascript/dashboard/components-next/message/Messages.story.vue
+694 -33
View File
@@ -1,55 +1,714 @@
<script setup>
import Message from './Message.vue';
import camelcaseKeys from 'camelcase-keys';
const messages = [
{
variant: 'user',
user: 'Elizabeth',
text: 'Hey, the usual things I order is out of stock.',
orientation: 'left',
id: 5272,
content: 'Hey, how are ya, I had a few questions about Chatwoot?',
inbox_id: 475,
conversation_id: 43,
message_type: 0,
content_type: 'text',
status: 'sent',
content_attributes: {
in_reply_to: null,
},
created_at: 1732195656,
private: false,
source_id: null,
sender: {
additional_attributes: {},
custom_attributes: {},
email: 'hey@example.com',
id: 597,
identifier: null,
name: 'hey',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
variant: 'system',
text: 'Conversation auto-assigned to Stanley',
orientation: 'center',
id: 5273,
content: 'Give the team a way to reach you.',
inbox_id: 475,
conversation_id: 43,
message_type: 3,
content_type: 'text',
status: 'read',
content_attributes: {},
created_at: 1732195656,
private: false,
source_id: null,
},
{
variant: 'agent',
user: 'Stanley',
text: 'Hello Elizabeth, there was a recent change in our office supplies.',
orientation: 'right',
id: 5274,
content: 'Get notified by email',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 3,
created_at: 1732195656,
updated_at: '2024-11-21T13:27:53.612Z',
private: false,
status: 'read',
source_id: null,
content_type: 'input_email',
content_attributes: {
submitted_email: 'hey@example.com',
},
sender_type: null,
sender_id: null,
external_source_ids: {},
additional_attributes: {},
processed_message_content: 'Get notified by email',
sentiment: {},
conversation: {
assignee_id: null,
unread_count: 1,
last_activity_at: 1732195656,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
},
{
variant: 'private',
user: 'Stanley',
text: 'Should we give her a premium discount?',
orientation: 'right',
id: 5275,
content:
'Does the Startup plan include the two users from the Free plan, or do I have to buy those separately?',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 0,
created_at: 1732195735,
updated_at: '2024-11-21T13:28:55.508Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {
in_reply_to: null,
},
sender_type: 'Contact',
sender_id: 597,
external_source_ids: {},
additional_attributes: {},
processed_message_content:
'Does the Startup plan include the two users from the Free plan, or do I have to buy those separately?',
sentiment: {},
conversation: {
assignee_id: null,
unread_count: 1,
last_activity_at: 1732195735,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
additional_attributes: {},
custom_attributes: {},
email: 'hey@example.com',
id: 597,
identifier: null,
name: 'hey',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
variant: 'private',
user: 'Jim',
text: 'They have placed multiple orders already, can go ahead. @Michael thoughts?',
orientation: 'left',
conversation_id: 43,
status: 'read',
content_type: 'text',
processed_message_content: 'John self-assigned this conversation',
id: 5276,
content: 'John self-assigned this conversation',
account_id: 1,
inbox_id: 475,
message_type: 2,
created_at: 1732195741,
updated_at: '2024-11-21T13:30:26.788Z',
private: false,
source_id: null,
content_attributes: {},
sender_type: null,
sender_id: null,
external_source_ids: {},
additional_attributes: {},
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732195826,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
previous_changes: {
updated_at: ['2024-11-21T13:29:01.570Z', '2024-11-21T13:30:26.788Z'],
status: ['sent', 'read'],
},
},
{
variant: 'private',
user: 'Michael',
text: 'Yes, let’s offer her a 20% discount',
orientation: 'left',
conversation_id: 43,
status: 'read',
content_type: 'text',
processed_message_content:
'Hey thanks for your interest in upgrading, no, the seats are not included, you will have to purchase them alongside the rest. How many seats are you planning to upgrade to?',
id: 5277,
content:
'Hey thanks for your interest in upgrading, no, the seats are not included, you will have to purchase them alongside the rest. How many seats are you planning to upgrade to?',
account_id: 1,
inbox_id: 475,
message_type: 1,
created_at: 1732195826,
updated_at: '2024-11-21T13:30:26.837Z',
private: false,
source_id: null,
content_attributes: {},
sender_type: 'User',
sender_id: 1,
external_source_ids: {},
additional_attributes: {},
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732195826,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
id: 1,
name: 'John',
available_name: 'John',
avatar_url:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
type: 'user',
availability_status: null,
thumbnail:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
},
previous_changes: {
updated_at: ['2024-11-21T13:30:26.149Z', '2024-11-21T13:30:26.837Z'],
status: ['sent', 'read'],
},
},
{
variant: 'agent',
user: 'Stanley',
text: 'If you want to buy our premium supplies, we can offer you a 20% discount! They come with indices and laser beams! ⚡',
orientation: 'right',
id: 5278,
content: "Oh, that's unfortunate",
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 0,
created_at: 1732195838,
updated_at: '2024-11-21T13:30:38.070Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {
in_reply_to: null,
},
sender_type: 'Contact',
sender_id: 597,
external_source_ids: {},
additional_attributes: {},
processed_message_content: "Oh, that's unfortunate",
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 1,
last_activity_at: 1732195838,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
additional_attributes: {},
custom_attributes: {},
email: 'hey@example.com',
id: 597,
identifier: null,
name: 'hey',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
variant: 'user',
user: 'Elizabeth',
text: 'That’s great!',
orientation: 'left',
id: 5279,
content:
'I plan to upgrade to 4 agents for now, but will grow to 6 in the next three months. ',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 0,
created_at: 1732195865,
updated_at: '2024-11-21T13:31:05.284Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {
in_reply_to: null,
},
sender_type: 'Contact',
sender_id: 597,
external_source_ids: {},
additional_attributes: {},
processed_message_content:
'I plan to upgrade to 4 agents for now, but will grow to 6 in the next three months. ',
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 1,
last_activity_at: 1732195865,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
additional_attributes: {},
custom_attributes: {},
email: 'hey@example.com',
id: 597,
identifier: null,
name: 'hey',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
];
{
id: 5280,
content: 'Is it possible to get a discount?',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 0,
created_at: 1732195872,
updated_at: '2024-11-21T13:31:12.545Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {
in_reply_to: null,
},
sender_type: 'Contact',
sender_id: 597,
external_source_ids: {},
additional_attributes: {},
processed_message_content: 'Is it possible to get a discount?',
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 1,
last_activity_at: 1732195872,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
additional_attributes: {},
custom_attributes: {},
email: 'hey@example.com',
id: 597,
identifier: null,
name: 'hey',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
conversation_id: 43,
status: 'read',
content_type: 'text',
processed_message_content:
'[@Bruce](mention://user/30/Bruce) should we offer them a discount',
id: 5281,
content:
'[@Bruce](mention://user/30/Bruce) should we offer them a discount',
account_id: 1,
inbox_id: 475,
message_type: 1,
created_at: 1732195887,
updated_at: '2024-11-21T13:32:59.863Z',
private: true,
source_id: null,
content_attributes: {},
sender_type: 'User',
sender_id: 1,
external_source_ids: {},
additional_attributes: {},
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732195972,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
id: 1,
name: 'John',
available_name: 'John',
avatar_url:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
type: 'user',
availability_status: null,
thumbnail:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
},
previous_changes: {
updated_at: ['2024-11-21T13:31:27.914Z', '2024-11-21T13:32:59.863Z'],
status: ['sent', 'read'],
},
},
{
conversation_id: 43,
status: 'read',
content_type: 'text',
processed_message_content:
'Sure, you can use the discount code KQS3242A at the checkout to get 30% off on your yearly subscription. This coupon only applies for a year, I hope this helps',
id: 5282,
content:
'Sure, you can use the discount code KQS3242A at the checkout to get 30% off on your yearly subscription. This coupon only applies for a year, I hope this helps',
account_id: 1,
inbox_id: 475,
message_type: 1,
created_at: 1732195972,
updated_at: '2024-11-21T13:32:59.902Z',
private: false,
source_id: null,
content_attributes: {},
sender_type: 'User',
sender_id: 1,
external_source_ids: {},
additional_attributes: {},
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732195972,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
id: 1,
name: 'John',
available_name: 'John',
avatar_url:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
type: 'user',
availability_status: null,
thumbnail:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
},
previous_changes: {
updated_at: ['2024-11-21T13:32:52.722Z', '2024-11-21T13:32:59.902Z'],
status: ['sent', 'read'],
},
},
{
id: 5283,
content: 'Great, thanks',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 0,
created_at: 1732195982,
updated_at: '2024-11-21T13:33:02.142Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {
in_reply_to: null,
},
sender_type: 'Contact',
sender_id: 597,
external_source_ids: {},
additional_attributes: {},
processed_message_content: 'Great, thanks',
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 1,
last_activity_at: 1732195982,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
additional_attributes: {},
custom_attributes: {},
email: 'hey@example.com',
id: 597,
identifier: null,
name: 'hey',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
id: 5284,
content: 'Really appreciate it',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 0,
created_at: 1732195984,
updated_at: '2024-11-21T13:33:04.856Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {
in_reply_to: null,
},
sender_type: 'Contact',
sender_id: 597,
external_source_ids: {},
additional_attributes: {},
processed_message_content: 'Really appreciate it',
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 1,
last_activity_at: 1732195984,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
additional_attributes: {},
custom_attributes: {},
email: 'hey@example.com',
id: 597,
identifier: null,
name: 'hey',
phone_number: null,
thumbnail: '',
type: 'contact',
},
},
{
conversation_id: 43,
status: 'read',
content_type: 'text',
processed_message_content: ' Happy to help :)',
id: 5285,
content: ' Happy to help :)',
account_id: 1,
inbox_id: 475,
message_type: 1,
created_at: 1732195991,
updated_at: '2024-11-21T13:33:12.229Z',
private: false,
source_id: null,
content_attributes: {},
sender_type: 'User',
sender_id: 1,
external_source_ids: {},
additional_attributes: {},
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732195991,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
id: 1,
name: 'John',
available_name: 'John',
avatar_url:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
type: 'user',
availability_status: null,
thumbnail:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
},
previous_changes: {
updated_at: ['2024-11-21T13:33:11.667Z', '2024-11-21T13:33:12.229Z'],
status: ['sent', 'read'],
},
},
{
conversation_id: 43,
status: 'read',
content_type: 'text',
processed_message_content:
"Let us know if you have any questions, I'll close this conversation for now",
id: 5286,
content:
"Let us know if you have any questions, I'll close this conversation for now",
account_id: 1,
inbox_id: 475,
message_type: 1,
created_at: 1732196013,
updated_at: '2024-11-21T13:33:33.879Z',
private: false,
source_id: null,
content_attributes: {},
sender_type: 'User',
sender_id: 1,
external_source_ids: {},
additional_attributes: {},
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732196013,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
sender: {
id: 1,
name: 'John',
available_name: 'John',
avatar_url:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
type: 'user',
availability_status: null,
thumbnail:
'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
},
previous_changes: {
updated_at: ['2024-11-21T13:33:33.511Z', '2024-11-21T13:33:33.879Z'],
status: ['sent', 'read'],
},
},
{
id: 5287,
content: 'John set the priority to urgent',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 2,
created_at: 1732196017,
updated_at: '2024-11-21T13:33:37.569Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {},
sender_type: null,
sender_id: null,
external_source_ids: {},
additional_attributes: {},
processed_message_content: 'John set the priority to urgent',
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732196017,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
},
{
id: 5288,
content: 'John added billing',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 2,
created_at: 1732196020,
updated_at: '2024-11-21T13:33:40.207Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {},
sender_type: null,
sender_id: null,
external_source_ids: {},
additional_attributes: {},
processed_message_content: 'John added billing',
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732196020,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
},
{
id: 5289,
content: 'John added delivery',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 2,
created_at: 1732196020,
updated_at: '2024-11-21T13:33:40.822Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {},
sender_type: null,
sender_id: null,
external_source_ids: {},
additional_attributes: {},
processed_message_content: 'John added delivery',
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732196020,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
},
{
id: 5290,
content: 'Conversation was marked resolved by John',
account_id: 1,
inbox_id: 475,
conversation_id: 43,
message_type: 2,
created_at: 1732196029,
updated_at: '2024-11-21T13:33:49.059Z',
private: false,
status: 'sent',
source_id: null,
content_type: 'text',
content_attributes: {},
sender_type: null,
sender_id: null,
external_source_ids: {},
additional_attributes: {},
processed_message_content: 'Conversation was marked resolved by John',
sentiment: {},
conversation: {
assignee_id: 1,
unread_count: 0,
last_activity_at: 1732196029,
contact_inbox: {
source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
},
},
},
].map(camelcaseKeys);
</script>
<template>
@@ -58,7 +717,9 @@ const messages = [
:layout="{ type: 'grid', width: '800' }"
>
<div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid gap-4">
<Message v-for="message in messages" v-bind="message" />
<template v-for="message in messages" :key="message.id">
<Message :current-user-id="1" v-bind="message" />
</template>
</div>
</Story>
</template>
app/javascript/dashboard/components-next/message/bubbles/Text.vue
+15 -10
View File
@@ -1,27 +1,32 @@
<script setup>
import { computed } from 'vue';
import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
const props = defineProps({
variant: {
type: String,
required: true,
validator: value => ['user', 'agent', 'system', 'private'].includes(value),
validator: value => Object.values(MESSAGE_VARIANTS).includes(value),
},
orientation: {
type: String,
default: 'left',
validator: value => ['left', 'right', 'center'].includes(value),
required: true,
validator: value => Object.values(ORIENTATION).includes(value),
},
text: {
content: {
type: String,
default: 'Hello World',
required: true,
},
});
const varaintBaseMap = {
agent: 'bg-n-solid-blue p-3 text-n-slate-12',
private: 'bg-n-solid-amber p-3 text-n-amber-12',
user: 'bg-n-slate-4 p-3 text-n-slate-12',
system: 'bg-n-alpha-1 px-2 py-0.5 text-n-slate-11 text-sm',
[MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue p-3 text-n-slate-12',
[MESSAGE_VARIANTS.PRIVATE]: 'bg-n-solid-amber p-3 text-n-amber-12',
[MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 p-3 text-n-slate-12',
[MESSAGE_VARIANTS.ACTIVITY]:
'bg-n-alpha-1 px-2 py-0.5 text-n-slate-11 text-sm',
[MESSAGE_VARIANTS.BOT]: 'bg-n-teal-5 p-3 text-n-slate-12',
[MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-teal-5 p-3 text-n-slate-12',
};
const orientationMap = {
@@ -44,6 +49,6 @@ const messageClass = computed(() => {
<template>
<div class="max-w-md text-sm" :class="messageClass">
{{ text }}
{{ content }}
</div>
</template>
app/javascript/dashboard/components-next/message/constants.js
+26
View File
@@ -0,0 +1,26 @@
export const MESSAGE_TYPES = {
INCOMING: 0,
OUTGOING: 1,
ACTIVITY: 2,
TEMPLATE: 3,
};
export const MESSAGE_VARIANTS = {
USER: 'user',
AGENT: 'agent',
ACTIVITY: 'activity',
PRIVATE: 'private',
BOT: 'bot',
TEMPLATE: 'template',
};
export const SENDER_TYPES = {
CONTACT: 'Contact',
USER: 'User',
};
export const ORIENTATION = {
LEFT: 'left',
RIGHT: 'right',
CENTER: 'center',
};