Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,52 @@
|
||||
<script setup>
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
|
||||
import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
|
||||
import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
const { isOnChatwootCloud } = useAccount();
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FeatureSpotlight
|
||||
:title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
|
||||
:note="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
|
||||
fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
|
||||
fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
|
||||
learn-more-url="https://chwt.app/captain-assistant"
|
||||
class="mb-8"
|
||||
:hide-actions="!isOnChatwootCloud"
|
||||
/>
|
||||
<EmptyStateLayout
|
||||
:title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"
|
||||
:subtitle="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.SUBTITLE')"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #empty-state-item>
|
||||
<div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
|
||||
<AssistantCard
|
||||
v-for="(assistant, index) in assistantsList.slice(0, 5)"
|
||||
:id="assistant.id"
|
||||
:key="`assistant-${index}`"
|
||||
:name="assistant.name"
|
||||
:description="assistant.description"
|
||||
:updated-at="assistant.created_at"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.ASSISTANTS.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup>
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EmptyStateLayout
|
||||
:title="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.TITLE')"
|
||||
:subtitle="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.SUBTITLE')"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #empty-state-item>
|
||||
<div class="min-h-[600px]" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.CUSTOM_TOOLS.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
|
||||
import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
|
||||
import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
const { isOnChatwootCloud } = useAccount();
|
||||
|
||||
const { replaceInstallationName } = useBranding();
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FeatureSpotlight
|
||||
:title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
|
||||
:note="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
|
||||
fallback-thumbnail="/assets/images/dashboard/captain/document-light.svg"
|
||||
fallback-thumbnail-dark="/assets/images/dashboard/captain/document-dark.svg"
|
||||
learn-more-url="https://chwt.app/captain-document"
|
||||
:hide-actions="!isOnChatwootCloud"
|
||||
class="mb-8"
|
||||
/>
|
||||
<EmptyStateLayout
|
||||
:title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.TITLE')"
|
||||
:subtitle="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.SUBTITLE')"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #empty-state-item>
|
||||
<div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
|
||||
<DocumentCard
|
||||
v-for="(document, index) in documentsList.slice(0, 5)"
|
||||
:id="document.id"
|
||||
:key="`document-${index}`"
|
||||
:name="replaceInstallationName(document.name)"
|
||||
:assistant="document.assistant"
|
||||
:external-link="document.external_link"
|
||||
:created-at="document.created_at"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.DOCUMENTS.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup>
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import InboxCard from 'dashboard/components-next/captain/assistant/InboxCard.vue';
|
||||
import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EmptyStateLayout
|
||||
:title="$t('CAPTAIN.INBOXES.EMPTY_STATE.TITLE')"
|
||||
:subtitle="$t('CAPTAIN.INBOXES.EMPTY_STATE.SUBTITLE')"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #empty-state-item>
|
||||
<div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
|
||||
<InboxCard
|
||||
v-for="(inbox, index) in inboxes.slice(0, 5)"
|
||||
:id="inbox.id"
|
||||
:key="`inbox-${index}`"
|
||||
:inbox="inbox"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.INBOXES.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
|
||||
import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
|
||||
import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'approved',
|
||||
validator: value => ['approved', 'pending'].includes(value),
|
||||
},
|
||||
hasActiveFilters: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click', 'clearFilters']);
|
||||
|
||||
const isApproved = computed(() => props.variant === 'approved');
|
||||
const isPending = computed(() => props.variant === 'pending');
|
||||
|
||||
const { isOnChatwootCloud } = useAccount();
|
||||
const { replaceInstallationName } = useBranding();
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
|
||||
const onClearFilters = () => {
|
||||
emit('clearFilters');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FeatureSpotlight
|
||||
v-if="isApproved"
|
||||
:title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
|
||||
:note="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
|
||||
fallback-thumbnail="/assets/images/dashboard/captain/faqs-light.svg"
|
||||
fallback-thumbnail-dark="/assets/images/dashboard/captain/faqs-dark.svg"
|
||||
learn-more-url="https://chwt.app/captain-faq"
|
||||
:hide-actions="!isOnChatwootCloud"
|
||||
class="mb-8"
|
||||
/>
|
||||
<EmptyStateLayout
|
||||
:title="
|
||||
isPending
|
||||
? $t('CAPTAIN.RESPONSES.EMPTY_STATE.NO_PENDING_TITLE')
|
||||
: $t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')
|
||||
"
|
||||
:subtitle="isApproved ? $t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE') : ''"
|
||||
:action-perms="['administrator']"
|
||||
:show-backdrop="isApproved"
|
||||
>
|
||||
<template v-if="isApproved" #empty-state-item>
|
||||
<div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
|
||||
<ResponseCard
|
||||
v-for="(response, index) in responsesList.slice(0, 5)"
|
||||
:id="response.id"
|
||||
:key="`response-${index}`"
|
||||
:question="replaceInstallationName(response.question)"
|
||||
:answer="replaceInstallationName(response.answer)"
|
||||
:status="response.status"
|
||||
:assistant="response.assistant"
|
||||
:created-at="response.created_at"
|
||||
:updated-at="response.created_at"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<Button
|
||||
v-if="isApproved"
|
||||
:label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
<Button
|
||||
v-else-if="isPending && hasActiveFilters"
|
||||
:label="$t('CAPTAIN.RESPONSES.EMPTY_STATE.CLEAR_SEARCH')"
|
||||
variant="link"
|
||||
size="sm"
|
||||
@click="onClearFilters"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,286 @@
|
||||
import { INBOX_TYPES } from 'dashboard/helper/inbox';
|
||||
|
||||
export const assistantsList = [
|
||||
{
|
||||
account_id: 2,
|
||||
config: { product_name: 'HelpDesk Pro' },
|
||||
created_at: 1736033561,
|
||||
description:
|
||||
'An advanced AI assistant designed to enhance customer support solutions by automating workflows and providing instant responses.',
|
||||
id: 4,
|
||||
name: 'Support Genie',
|
||||
},
|
||||
{
|
||||
account_id: 3,
|
||||
config: { product_name: 'CRM Tools' },
|
||||
created_at: 1736033562,
|
||||
description:
|
||||
'Helps streamline customer relationship management by organizing contacts, automating follow-ups, and providing insights.',
|
||||
id: 5,
|
||||
name: 'CRM Assistant',
|
||||
},
|
||||
{
|
||||
account_id: 4,
|
||||
config: { product_name: 'SalesFlow' },
|
||||
created_at: 1736033563,
|
||||
description:
|
||||
'Optimizes your sales pipeline by tracking prospects, forecasting sales, and automating administrative tasks.',
|
||||
id: 6,
|
||||
name: 'SalesBot',
|
||||
},
|
||||
{
|
||||
account_id: 5,
|
||||
config: { product_name: 'TicketMaster AI' },
|
||||
created_at: 1736033564,
|
||||
description:
|
||||
'Automates ticket assignment, categorization, and customer query responses to enhance support efficiency.',
|
||||
id: 7,
|
||||
name: 'TicketBot',
|
||||
},
|
||||
{
|
||||
account_id: 6,
|
||||
config: { product_name: 'FinanceAssist' },
|
||||
created_at: 1736033565,
|
||||
description:
|
||||
'Provides financial analytics, reporting, and insights, helping teams make data-driven financial decisions.',
|
||||
id: 8,
|
||||
name: 'Finance Wizard',
|
||||
},
|
||||
{
|
||||
account_id: 8,
|
||||
config: { product_name: 'HR Assistant' },
|
||||
created_at: 1736033567,
|
||||
description:
|
||||
'Streamlines HR operations including employee management, payroll, and recruitment processes.',
|
||||
id: 10,
|
||||
name: 'HR Helper',
|
||||
},
|
||||
];
|
||||
|
||||
export const documentsList = [
|
||||
{
|
||||
account_id: 1,
|
||||
assistant: { id: 1, name: 'Helper Pro' },
|
||||
content:
|
||||
'Comprehensive guide on using conversation filters to manage chats effectively.',
|
||||
created_at: 1736143272,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688192-how-to-use-conversation-filters',
|
||||
id: 3059,
|
||||
name: 'How to use Conversation Filters? | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 2,
|
||||
assistant: { id: 2, name: 'Support Genie' },
|
||||
content:
|
||||
'Step-by-step guide for automating ticket assignments and improving support workflow in Chatwoot.',
|
||||
created_at: 1736143273,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688200-automating-ticket-assignments',
|
||||
id: 3060,
|
||||
name: 'Automating Ticket Assignments | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 3,
|
||||
assistant: { id: 3, name: 'CRM Assistant' },
|
||||
content:
|
||||
'A detailed guide on managing and organizing customer profiles for better relationship management.',
|
||||
created_at: 1736143274,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688210-managing-customer-profiles',
|
||||
id: 3061,
|
||||
name: 'Managing Customer Profiles | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 4,
|
||||
assistant: { id: 4, name: 'SalesBot' },
|
||||
content:
|
||||
'Learn how to optimize sales tracking and improve your sales forecasting using advanced features.',
|
||||
created_at: 1736143275,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688220-sales-tracking-guide',
|
||||
id: 3062,
|
||||
name: 'Sales Tracking Guide | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 5,
|
||||
assistant: { id: 5, name: 'TicketBot' },
|
||||
content:
|
||||
'How to efficiently create, manage, and resolve tickets in Chatwoot.',
|
||||
created_at: 1736143276,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688230-managing-tickets',
|
||||
id: 3063,
|
||||
name: 'Managing Tickets | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 6,
|
||||
assistant: { id: 6, name: 'Finance Wizard' },
|
||||
content:
|
||||
'Detailed guide on how to use financial reporting tools and generate insightful analytics.',
|
||||
created_at: 1736143277,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688240-financial-reporting',
|
||||
id: 3064,
|
||||
name: 'Financial Reporting | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
];
|
||||
|
||||
export const responsesList = [
|
||||
{
|
||||
account_id: 1,
|
||||
answer:
|
||||
'Messenger may be deactivated because you are on a free plan or the limit for inboxes might have been reached.',
|
||||
created_at: 1736283330,
|
||||
id: 87,
|
||||
question: 'Why is my Messenger in Chatwoot deactivated?',
|
||||
status: 'pending',
|
||||
assistant: {
|
||||
account_id: 1,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033280,
|
||||
description: 'Assists with general queries and system-wide issues.',
|
||||
id: 1,
|
||||
name: 'Assistant 2',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 2,
|
||||
answer:
|
||||
'You can integrate your WhatsApp account by navigating to the Integrations section and selecting the WhatsApp integration option.',
|
||||
created_at: 1736283340,
|
||||
id: 88,
|
||||
question: 'How do I integrate WhatsApp with Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 2,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033281,
|
||||
description: 'Helps with integration and setup-related inquiries.',
|
||||
id: 2,
|
||||
name: 'Assistant 3',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 3,
|
||||
answer:
|
||||
"To reset your password, go to the login page and click on 'Forgot Password', then follow the instructions sent to your email.",
|
||||
created_at: 1736283350,
|
||||
id: 89,
|
||||
question: 'How can I reset my password in Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 3,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033282,
|
||||
description: 'Handles account management and recovery support.',
|
||||
id: 3,
|
||||
name: 'Assistant 4',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 4,
|
||||
answer:
|
||||
"You can enable the dark mode in settings by navigating to 'Appearance' and selecting 'Dark Mode'.",
|
||||
created_at: 1736283360,
|
||||
id: 90,
|
||||
question: 'How do I enable dark mode in Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 4,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033283,
|
||||
description: 'Helps with UI and theme-related inquiries.',
|
||||
id: 4,
|
||||
name: 'Assistant 5',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 5,
|
||||
answer:
|
||||
"To add a new team member, navigate to 'Settings', then 'Team', and click on 'Add Team Member'.",
|
||||
created_at: 1736283370,
|
||||
id: 91,
|
||||
question: 'How do I add a new team member in Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 5,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033284,
|
||||
description: 'Supports team management and user access-related queries.',
|
||||
id: 5,
|
||||
name: 'Assistant 6',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 6,
|
||||
answer:
|
||||
"Campaigns in Chatwoot allow you to send targeted messages to specific user segments. You can create them in the 'Campaigns' section.",
|
||||
created_at: 1736283380,
|
||||
id: 92,
|
||||
question: 'What are campaigns in Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 6,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033285,
|
||||
description:
|
||||
'Specialized in marketing, campaign management, and messaging strategies.',
|
||||
id: 6,
|
||||
name: 'Assistant 7',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const inboxes = [
|
||||
{
|
||||
id: 7,
|
||||
name: 'Email Support',
|
||||
channel_type: INBOX_TYPES.EMAIL,
|
||||
email: 'support@company.com',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'Website Chat',
|
||||
channel_type: INBOX_TYPES.WEB,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Facebook Support',
|
||||
channel_type: INBOX_TYPES.FB,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'SMS Service',
|
||||
channel_type: INBOX_TYPES.TWILIO,
|
||||
messaging_service_sid: 'MGxxxxxx',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'WhatsApp Support',
|
||||
channel_type: INBOX_TYPES.WHATSAPP,
|
||||
phone_number: '+1987654321',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'Telegram Support',
|
||||
channel_type: INBOX_TYPES.TELEGRAM,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: 'LINE Support',
|
||||
channel_type: INBOX_TYPES.LINE,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: 'API Channel',
|
||||
channel_type: INBOX_TYPES.API,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: 'SMS Basic',
|
||||
channel_type: INBOX_TYPES.SMS,
|
||||
phone_number: '+1555555555',
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user