Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,109 @@
|
||||
<script setup>
|
||||
import { useTemplateRef, onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
note: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
writtenBy: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
allowDelete: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
collapsible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['delete']);
|
||||
const noteContentRef = useTemplateRef('noteContentRef');
|
||||
const needsCollapse = ref(false);
|
||||
const [isExpanded, toggleExpanded] = useToggle();
|
||||
const { t } = useI18n();
|
||||
const { formatMessage } = useMessageFormatter();
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('delete', props.note.id);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.collapsible) {
|
||||
// Check if content height exceeds approximately 4 lines
|
||||
// Assuming line height is ~1.625 and font size is ~14px
|
||||
const threshold = 14 * 1.625 * 4; // ~84px
|
||||
needsCollapse.value = noteContentRef.value?.clientHeight > threshold;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 border-b border-n-strong group/note">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<Avatar
|
||||
:name="note?.user?.name || 'Bot'"
|
||||
:src="
|
||||
note?.user?.name
|
||||
? note?.user?.thumbnail
|
||||
: '/assets/images/chatwoot_bot.png'
|
||||
"
|
||||
:size="16"
|
||||
rounded-full
|
||||
/>
|
||||
<div class="min-w-0 truncate">
|
||||
<span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
|
||||
<span class="font-medium text-n-slate-12">{{ writtenBy }}</span>
|
||||
{{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
|
||||
<span class="font-medium text-n-slate-12">
|
||||
{{ dynamicTime(note.createdAt) }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
v-if="allowDelete"
|
||||
variant="faded"
|
||||
color="ruby"
|
||||
size="xs"
|
||||
icon="i-lucide-trash"
|
||||
class="opacity-0 group-hover/note:opacity-100"
|
||||
@click="handleDelete"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
ref="noteContentRef"
|
||||
v-dompurify-html="formatMessage(note.content || '')"
|
||||
class="mb-0 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
|
||||
:class="{
|
||||
'line-clamp-4': collapsible && !isExpanded && needsCollapse,
|
||||
}"
|
||||
/>
|
||||
<p v-if="collapsible && needsCollapse">
|
||||
<Button
|
||||
variant="faded"
|
||||
color="blue"
|
||||
size="xs"
|
||||
:icon="isExpanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
|
||||
@click="() => toggleExpanded()"
|
||||
>
|
||||
<template v-if="isExpanded">
|
||||
{{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.COLLAPSE') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EXPAND') }}
|
||||
</template>
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup>
|
||||
import ContactNoteItem from '../ContactNoteItem.vue';
|
||||
import notes from './fixtures';
|
||||
|
||||
const controls = {
|
||||
writtenBy: {
|
||||
type: 'text',
|
||||
default: 'You',
|
||||
},
|
||||
};
|
||||
|
||||
// Example delete handler
|
||||
const onDelete = noteId => {
|
||||
console.log('Note deleted:', noteId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Components/Contacts/ContactNoteItem"
|
||||
:layout="{ type: 'grid', width: '600px' }"
|
||||
>
|
||||
<Variant title="Multiple Notes">
|
||||
<div class="flex flex-col border rounded-lg border-n-strong">
|
||||
<ContactNoteItem
|
||||
v-for="note in notes"
|
||||
:key="note.id"
|
||||
:note="note"
|
||||
:written-by="
|
||||
note.id === notes[1].id
|
||||
? controls.writtenBy.default
|
||||
: note.user.name
|
||||
"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,69 @@
|
||||
export default [
|
||||
{
|
||||
id: 12,
|
||||
content:
|
||||
'This tutorial will show you how to use Chatwoot and, hence, ensure you practice effective customer communication. We will explain in detail the following:\n\n* Step-by-step setup of your account, with illustrative screenshots.\n\n* An in-depth explanation of all the core features of Chatwoot.\n\n* Get your account up and running by the end of this tutorial.\n\n* Basic concepts of customer communication.',
|
||||
accountId: null,
|
||||
contactId: null,
|
||||
user: {
|
||||
id: 30,
|
||||
account_id: 2,
|
||||
availability_status: 'offline',
|
||||
auto_offline: true,
|
||||
confirmed: true,
|
||||
email: 'bruce@paperlayer.test',
|
||||
available_name: 'Bruce',
|
||||
name: 'Bruce',
|
||||
role: 'administrator',
|
||||
thumbnail:
|
||||
'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBJZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--515dbb35e9ba3c36d14f4c4b77220a675513c1fb/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/2.jpg',
|
||||
custom_role_id: null,
|
||||
},
|
||||
createdAt: 1730786556,
|
||||
updatedAt: 1730786556,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
content:
|
||||
'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.',
|
||||
accountId: null,
|
||||
contactId: null,
|
||||
user: {
|
||||
id: 1,
|
||||
account_id: 2,
|
||||
availability_status: 'online',
|
||||
auto_offline: false,
|
||||
confirmed: true,
|
||||
email: 'hillary@chatwoot.com',
|
||||
available_name: 'Hillary',
|
||||
name: 'Hillary',
|
||||
role: 'administrator',
|
||||
thumbnail: '',
|
||||
custom_role_id: null,
|
||||
},
|
||||
createdAt: 1730782566,
|
||||
updatedAt: 1730782566,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
content:
|
||||
'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.',
|
||||
accountId: null,
|
||||
contactId: null,
|
||||
user: {
|
||||
id: 1,
|
||||
account_id: 2,
|
||||
availability_status: 'online',
|
||||
auto_offline: false,
|
||||
confirmed: true,
|
||||
email: 'john@chatwoot.com',
|
||||
available_name: 'John',
|
||||
name: 'John',
|
||||
role: 'administrator',
|
||||
thumbnail: '',
|
||||
custom_role_id: null,
|
||||
},
|
||||
createdAt: 1730782564,
|
||||
updatedAt: 1730782564,
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user