Merge branch 'develop' into feat/email-forwarding
This commit is contained in:
Sivin Varghese
@@ -17,6 +17,7 @@ const props = defineProps({
|
||||
additionalAttributes: { type: Object, default: () => ({}) },
|
||||
phoneNumber: { type: String, default: '' },
|
||||
thumbnail: { type: String, default: '' },
|
||||
availabilityStatus: { type: String, default: null },
|
||||
isExpanded: { type: Boolean, default: false },
|
||||
isUpdating: { type: Boolean, default: false },
|
||||
});
|
||||
@@ -92,7 +93,13 @@ const onClickViewDetails = () => emit('showContact', props.id);
|
||||
<template>
|
||||
<CardLayout :key="id" layout="row">
|
||||
<div class="flex items-center justify-start flex-1 gap-4">
|
||||
<Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
|
||||
<Avatar
|
||||
:name="name"
|
||||
:src="thumbnail"
|
||||
:size="48"
|
||||
:status="availabilityStatus"
|
||||
rounded-full
|
||||
/>
|
||||
<div class="flex flex-col gap-0.5 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-1">
|
||||
<span class="text-base font-medium truncate text-n-slate-12">
|
||||
|
||||
+18
-39
@@ -7,42 +7,16 @@ import ContactMoreActions from './components/ContactMoreActions.vue';
|
||||
import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
|
||||
|
||||
defineProps({
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
searchValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
headerTitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
activeSort: {
|
||||
type: String,
|
||||
default: 'last_activity_at',
|
||||
},
|
||||
activeOrdering: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isSegmentsView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
hasActiveFilters: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isLabelView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showSearch: { type: Boolean, default: true },
|
||||
searchValue: { type: String, default: '' },
|
||||
headerTitle: { type: String, required: true },
|
||||
buttonLabel: { type: String, default: '' },
|
||||
activeSort: { type: String, default: 'last_activity_at' },
|
||||
activeOrdering: { type: String, default: '' },
|
||||
isSegmentsView: { type: Boolean, default: false },
|
||||
hasActiveFilters: { type: Boolean, default: false },
|
||||
isLabelView: { type: Boolean, default: false },
|
||||
isActiveView: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
@@ -85,7 +59,7 @@ const emit = defineEmits([
|
||||
</Input>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div v-if="!isLabelView" class="relative">
|
||||
<div v-if="!isLabelView && !isActiveView" class="relative">
|
||||
<Button
|
||||
id="toggleContactsFilterButton"
|
||||
:icon="
|
||||
@@ -105,7 +79,12 @@ const emit = defineEmits([
|
||||
<slot name="filter" />
|
||||
</div>
|
||||
<Button
|
||||
v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
|
||||
v-if="
|
||||
hasActiveFilters &&
|
||||
!isSegmentsView &&
|
||||
!isLabelView &&
|
||||
!isActiveView
|
||||
"
|
||||
icon="i-lucide-save"
|
||||
color="slate"
|
||||
size="sm"
|
||||
@@ -113,7 +92,7 @@ const emit = defineEmits([
|
||||
@click="emit('createSegment')"
|
||||
/>
|
||||
<Button
|
||||
v-if="isSegmentsView && !isLabelView"
|
||||
v-if="isSegmentsView && !isLabelView && !isActiveView"
|
||||
icon="i-lucide-trash"
|
||||
color="slate"
|
||||
size="sm"
|
||||
|
||||
+2
@@ -36,6 +36,7 @@ const props = defineProps({
|
||||
activeSegment: { type: Object, default: null },
|
||||
hasAppliedFilters: { type: Boolean, default: false },
|
||||
isLabelView: { type: Boolean, default: false },
|
||||
isActiveView: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
@@ -277,6 +278,7 @@ defineExpose({
|
||||
:header-title="headerTitle"
|
||||
:is-segments-view="hasActiveSegments"
|
||||
:is-label-view="isLabelView"
|
||||
:is-active-view="isActiveView"
|
||||
:has-active-filters="hasAppliedFilters"
|
||||
:button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
|
||||
@search="emit('search', $event)"
|
||||
|
||||
@@ -6,7 +6,7 @@ import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/Contact
|
||||
import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
|
||||
import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
searchValue: { type: String, default: '' },
|
||||
headerTitle: { type: String, default: '' },
|
||||
showPaginationFooter: { type: Boolean, default: true },
|
||||
@@ -37,10 +37,23 @@ const isNotSegmentView = computed(() => {
|
||||
return route.name !== 'contacts_dashboard_segments_index';
|
||||
});
|
||||
|
||||
const isActiveView = computed(() => {
|
||||
return route.name === 'contacts_dashboard_active';
|
||||
});
|
||||
|
||||
const isLabelView = computed(
|
||||
() => route.name === 'contacts_dashboard_labels_index'
|
||||
);
|
||||
|
||||
const showActiveFiltersPreview = computed(() => {
|
||||
return (
|
||||
(props.hasAppliedFilters || !isNotSegmentView.value) &&
|
||||
!props.isFetchingList &&
|
||||
!isLabelView.value &&
|
||||
!isActiveView.value
|
||||
);
|
||||
});
|
||||
|
||||
const updateCurrentPage = page => {
|
||||
emit('update:currentPage', page);
|
||||
};
|
||||
@@ -57,7 +70,7 @@ const openFilter = () => {
|
||||
<div class="flex flex-col w-full h-full transition-all duration-300">
|
||||
<ContactListHeaderWrapper
|
||||
ref="contactListHeaderWrapper"
|
||||
:show-search="isNotSegmentView"
|
||||
:show-search="isNotSegmentView && !isActiveView"
|
||||
:search-value="searchValue"
|
||||
:active-sort="activeSort"
|
||||
:active-ordering="activeOrdering"
|
||||
@@ -66,6 +79,7 @@ const openFilter = () => {
|
||||
:segments-id="segmentsId"
|
||||
:has-applied-filters="hasAppliedFilters"
|
||||
:is-label-view="isLabelView"
|
||||
:is-active-view="isActiveView"
|
||||
@update:sort="emit('update:sort', $event)"
|
||||
@search="emit('search', $event)"
|
||||
@apply-filter="emit('applyFilter', $event)"
|
||||
@@ -74,11 +88,7 @@ const openFilter = () => {
|
||||
<main class="flex-1 overflow-y-auto">
|
||||
<div class="w-full mx-auto max-w-[60rem]">
|
||||
<ContactsActiveFiltersPreview
|
||||
v-if="
|
||||
(hasAppliedFilters || !isNotSegmentView) &&
|
||||
!isFetchingList &&
|
||||
!isLabelView
|
||||
"
|
||||
v-if="showActiveFiltersPreview"
|
||||
:active-segment="activeSegment"
|
||||
@clear-filters="emit('clearFilters')"
|
||||
@open-filter="openFilter"
|
||||
|
||||
@@ -71,6 +71,7 @@ const toggleExpanded = id => {
|
||||
:thumbnail="contact.thumbnail"
|
||||
:phone-number="contact.phoneNumber"
|
||||
:additional-attributes="contact.additionalAttributes"
|
||||
:availability-status="contact.availabilityStatus"
|
||||
:is-expanded="expandedCardId === contact.id"
|
||||
:is-updating="isUpdating"
|
||||
@toggle="toggleExpanded(contact.id)"
|
||||
|
||||
@@ -56,7 +56,7 @@ useKeyboardEvents(keyboardEvents);
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-center items-center absolute top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
|
||||
class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
|
||||
>
|
||||
<Button
|
||||
v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"
|
||||
|
||||
@@ -76,7 +76,7 @@ const handlePageChange = event => {
|
||||
|
||||
<template>
|
||||
<section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
|
||||
<header class="sticky top-0 z-10 px-6 xl:px-0">
|
||||
<header class="sticky top-0 z-10 px-6">
|
||||
<div class="w-full max-w-[60rem] mx-auto">
|
||||
<div
|
||||
class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
|
||||
@@ -116,7 +116,7 @@ const handlePageChange = event => {
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 px-6 overflow-y-auto xl:px-0">
|
||||
<main class="flex-1 px-6 overflow-y-auto">
|
||||
<div class="w-full max-w-[60rem] h-full mx-auto py-4">
|
||||
<slot v-if="!showPaywall" name="controls" />
|
||||
<div
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup>
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { nextTick, ref, watch, computed } from 'vue';
|
||||
import { useTrack } from 'dashboard/composables';
|
||||
import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
|
||||
import { useUISettings } from 'dashboard/composables/useUISettings';
|
||||
@@ -9,23 +8,17 @@ import CopilotInput from './CopilotInput.vue';
|
||||
import CopilotLoader from './CopilotLoader.vue';
|
||||
import CopilotAgentMessage from './CopilotAgentMessage.vue';
|
||||
import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
|
||||
import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
|
||||
import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import CopilotEmptyState from './CopilotEmptyState.vue';
|
||||
import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const props = defineProps({
|
||||
supportAgent: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
messages: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isCaptainTyping: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
conversationInboxType: {
|
||||
type: String,
|
||||
required: true,
|
||||
@@ -44,18 +37,11 @@ const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const COPILOT_USER_ROLES = ['assistant', 'system'];
|
||||
|
||||
const sendMessage = message => {
|
||||
emit('sendMessage', message);
|
||||
useTrack(COPILOT_EVENTS.SEND_MESSAGE);
|
||||
};
|
||||
|
||||
const useSuggestion = opt => {
|
||||
emit('sendMessage', t(opt.prompt));
|
||||
useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
|
||||
};
|
||||
|
||||
const chatContainer = ref(null);
|
||||
|
||||
const scrollToBottom = async () => {
|
||||
@@ -65,20 +51,40 @@ const scrollToBottom = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const promptOptions = [
|
||||
{
|
||||
label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
|
||||
prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
|
||||
},
|
||||
{
|
||||
label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
|
||||
prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
|
||||
},
|
||||
{
|
||||
label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
|
||||
prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
|
||||
},
|
||||
];
|
||||
const groupedMessages = computed(() => {
|
||||
const result = [];
|
||||
let thinkingGroup = [];
|
||||
props.messages.forEach(message => {
|
||||
if (message.message_type === 'assistant_thinking') {
|
||||
thinkingGroup.push(message);
|
||||
} else {
|
||||
if (thinkingGroup.length > 0) {
|
||||
result.push({
|
||||
id: thinkingGroup[0].id,
|
||||
message_type: 'thinking_group',
|
||||
messages: thinkingGroup,
|
||||
});
|
||||
thinkingGroup = [];
|
||||
}
|
||||
result.push(message);
|
||||
}
|
||||
});
|
||||
if (thinkingGroup.length > 0) {
|
||||
result.push({
|
||||
id: thinkingGroup[0].id,
|
||||
message_type: 'thinking_group',
|
||||
messages: thinkingGroup,
|
||||
});
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
const isLastMessageFromAssistant = computed(() => {
|
||||
return (
|
||||
groupedMessages.value[groupedMessages.value.length - 1].message_type ===
|
||||
'assistant'
|
||||
);
|
||||
});
|
||||
|
||||
const { updateUISettings } = useUISettings();
|
||||
|
||||
@@ -95,8 +101,22 @@ const handleSidebarAction = action => {
|
||||
}
|
||||
};
|
||||
|
||||
const hasAssistants = computed(() => props.assistants.length > 0);
|
||||
const hasMessages = computed(() => props.messages.length > 0);
|
||||
const copilotButtons = computed(() => {
|
||||
if (hasMessages.value) {
|
||||
return [
|
||||
{
|
||||
key: 'reset',
|
||||
icon: 'i-lucide-refresh-ccw',
|
||||
tooltip: t('CAPTAIN.COPILOT.RESET'),
|
||||
},
|
||||
];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
watch(
|
||||
[() => props.messages, () => props.isCaptainTyping],
|
||||
[() => props.messages],
|
||||
() => {
|
||||
scrollToBottom();
|
||||
},
|
||||
@@ -108,64 +128,57 @@ watch(
|
||||
<div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
|
||||
<SidebarActionsHeader
|
||||
:title="$t('CAPTAIN.COPILOT.TITLE')"
|
||||
:buttons="[
|
||||
{
|
||||
key: 'reset',
|
||||
icon: 'i-lucide-refresh-ccw',
|
||||
tooltip: $t('CAPTAIN.COPILOT.RESET'),
|
||||
},
|
||||
]"
|
||||
:buttons="copilotButtons"
|
||||
@click="handleSidebarAction"
|
||||
@close="closeCopilotPanel"
|
||||
/>
|
||||
<div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
|
||||
<template v-for="message in messages" :key="message.id">
|
||||
<CopilotAgentMessage
|
||||
v-if="message.role === 'user'"
|
||||
:support-agent="supportAgent"
|
||||
:message="message"
|
||||
/>
|
||||
<CopilotAssistantMessage
|
||||
v-else-if="COPILOT_USER_ROLES.includes(message.role)"
|
||||
:message="message"
|
||||
:conversation-inbox-type="conversationInboxType"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<CopilotLoader v-if="isCaptainTyping" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!messages.length"
|
||||
class="h-full w-full flex items-center justify-center"
|
||||
ref="chatContainer"
|
||||
class="flex-1 flex px-4 py-4 overflow-y-auto items-start"
|
||||
>
|
||||
<div class="h-fit px-3 py-3 space-y-1">
|
||||
<span class="text-xs text-n-slate-10">
|
||||
{{ $t('COPILOT.TRY_THESE_PROMPTS') }}
|
||||
</span>
|
||||
<button
|
||||
v-for="prompt in promptOptions"
|
||||
:key="prompt.label"
|
||||
class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
|
||||
@click="() => useSuggestion(prompt)"
|
||||
>
|
||||
<span>{{ t(prompt.label) }}</span>
|
||||
<Icon icon="i-lucide-chevron-right" />
|
||||
</button>
|
||||
<div v-if="hasMessages" class="space-y-6 flex-1 flex flex-col w-full">
|
||||
<template v-for="(item, index) in groupedMessages" :key="item.id">
|
||||
<CopilotAgentMessage
|
||||
v-if="item.message_type === 'user'"
|
||||
:message="item.message"
|
||||
/>
|
||||
<CopilotAssistantMessage
|
||||
v-else-if="item.message_type === 'assistant'"
|
||||
:message="item.message"
|
||||
:is-last-message="index === groupedMessages.length - 1"
|
||||
:conversation-inbox-type="conversationInboxType"
|
||||
/>
|
||||
<CopilotThinkingGroup
|
||||
v-else
|
||||
:messages="item.messages"
|
||||
:default-collapsed="isLastMessageFromAssistant"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<CopilotLoader v-if="!isLastMessageFromAssistant" />
|
||||
</div>
|
||||
<CopilotEmptyState
|
||||
v-else
|
||||
:has-assistants="hasAssistants"
|
||||
@use-suggestion="sendMessage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mx-3 mt-px mb-2">
|
||||
<div class="flex items-center gap-2 justify-between w-full mb-1">
|
||||
<ToggleCopilotAssistant
|
||||
v-if="assistants.length"
|
||||
v-if="assistants.length > 1"
|
||||
:assistants="assistants"
|
||||
:active-assistant="activeAssistant"
|
||||
@set-assistant="$event => emit('setAssistant', $event)"
|
||||
/>
|
||||
<div v-else />
|
||||
</div>
|
||||
<CopilotInput class="mb-1 w-full" @send="sendMessage" />
|
||||
<CopilotInput
|
||||
v-if="hasAssistants"
|
||||
class="mb-1 w-full"
|
||||
@send="sendMessage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,6 +11,10 @@ import MessageFormatter from 'shared/helpers/MessageFormatter.js';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
isLastMessage: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
message: {
|
||||
type: Object,
|
||||
required: true,
|
||||
@@ -20,6 +24,15 @@ const props = defineProps({
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const hasEmptyMessageContent = computed(() => !props.message?.content);
|
||||
|
||||
const showUseButton = computed(() => {
|
||||
return (
|
||||
!hasEmptyMessageContent.value &&
|
||||
props.message.reply_suggestion &&
|
||||
props.isLastMessage
|
||||
);
|
||||
});
|
||||
|
||||
const messageContent = computed(() => {
|
||||
const formatter = new MessageFormatter(props.message.content);
|
||||
@@ -32,8 +45,6 @@ const insertIntoRichEditor = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
const hasEmptyMessageContent = computed(() => !props.message?.content);
|
||||
|
||||
const useCopilotResponse = () => {
|
||||
if (insertIntoRichEditor.value) {
|
||||
emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
|
||||
@@ -57,7 +68,7 @@ const useCopilotResponse = () => {
|
||||
/>
|
||||
<div class="flex flex-row mt-1">
|
||||
<Button
|
||||
v-if="!hasEmptyMessageContent"
|
||||
v-if="showUseButton"
|
||||
:label="$t('CAPTAIN.COPILOT.USE')"
|
||||
faded
|
||||
sm
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import Icon from '../icon/Icon.vue';
|
||||
|
||||
defineProps({
|
||||
hasAssistants: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['useSuggestion']);
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const routePromptMap = {
|
||||
conversations: [
|
||||
{
|
||||
label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
|
||||
prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
|
||||
},
|
||||
{
|
||||
label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
|
||||
prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
|
||||
},
|
||||
{
|
||||
label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
|
||||
prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
|
||||
},
|
||||
],
|
||||
dashboard: [
|
||||
{
|
||||
label: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.LABEL',
|
||||
prompt: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.CONTENT',
|
||||
},
|
||||
{
|
||||
label: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.LABEL',
|
||||
prompt: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.CONTENT',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const getCurrentRoute = () => {
|
||||
const path = route.path;
|
||||
if (path.includes('/conversations')) return 'conversations';
|
||||
if (path.includes('/dashboard')) return 'dashboard';
|
||||
if (path.includes('/contacts')) return 'contacts';
|
||||
if (path.includes('/articles')) return 'articles';
|
||||
return 'dashboard';
|
||||
};
|
||||
|
||||
const promptOptions = computed(() => {
|
||||
const currentRoute = getCurrentRoute();
|
||||
return routePromptMap[currentRoute] || routePromptMap.conversations;
|
||||
});
|
||||
|
||||
const handleSuggestion = opt => {
|
||||
emit('useSuggestion', t(opt.prompt));
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1 flex flex-col gap-6 px-2">
|
||||
<div class="flex flex-col space-y-4 py-4">
|
||||
<Icon icon="i-woot-captain" class="text-n-slate-9 text-4xl" />
|
||||
<div class="space-y-1">
|
||||
<h3 class="text-base font-medium text-n-slate-12 leading-8">
|
||||
{{ $t('CAPTAIN.COPILOT.PANEL_TITLE') }}
|
||||
</h3>
|
||||
<p class="text-sm text-n-slate-11 leading-6">
|
||||
{{ $t('CAPTAIN.COPILOT.KICK_OFF_MESSAGE') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!hasAssistants" class="w-full space-y-2">
|
||||
<p class="text-sm text-n-slate-11 leading-6">
|
||||
{{ $t('CAPTAIN.ASSISTANTS.NO_ASSISTANTS_AVAILABLE') }}
|
||||
</p>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'captain_assistants_index',
|
||||
params: { accountId: route.params.accountId },
|
||||
}"
|
||||
class="text-n-slate-11 underline hover:text-n-slate-12"
|
||||
>
|
||||
{{ $t('CAPTAIN.ASSISTANTS.ADD_NEW') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else class="w-full space-y-2">
|
||||
<span class="text-xs text-n-slate-10 block">
|
||||
{{ $t('CAPTAIN.COPILOT.TRY_THESE_PROMPTS') }}
|
||||
</span>
|
||||
<div class="space-y-1">
|
||||
<button
|
||||
v-for="prompt in promptOptions"
|
||||
:key="prompt.label"
|
||||
class="w-full px-3 py-2 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center justify-between hover:bg-n-slate-3 transition-colors"
|
||||
@click="handleSuggestion(prompt)"
|
||||
>
|
||||
<span>{{ t(prompt.label) }}</span>
|
||||
<Icon icon="i-lucide-chevron-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import { useUISettings } from 'dashboard/composables/useUISettings';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
|
||||
const route = useRoute();
|
||||
|
||||
const { uiSettings, updateUISettings } = useUISettings();
|
||||
|
||||
const isConversationRoute = computed(() => {
|
||||
const CONVERSATION_ROUTES = [
|
||||
'inbox_conversation',
|
||||
'conversation_through_inbox',
|
||||
'conversations_through_label',
|
||||
'team_conversations_through_label',
|
||||
'conversations_through_folders',
|
||||
'conversation_through_mentions',
|
||||
'conversation_through_unattended',
|
||||
'conversation_through_participating',
|
||||
];
|
||||
return CONVERSATION_ROUTES.includes(route.name);
|
||||
});
|
||||
|
||||
const currentAccountId = useMapGetter('getCurrentAccountId');
|
||||
const isFeatureEnabledonAccount = useMapGetter(
|
||||
'accounts/isFeatureEnabledonAccount'
|
||||
);
|
||||
|
||||
const showCopilotLauncher = computed(() => {
|
||||
const isCaptainEnabled = isFeatureEnabledonAccount.value(
|
||||
currentAccountId.value,
|
||||
FEATURE_FLAGS.CAPTAIN
|
||||
);
|
||||
return (
|
||||
isCaptainEnabled &&
|
||||
!uiSettings.value.is_copilot_panel_open &&
|
||||
!isConversationRoute.value
|
||||
);
|
||||
});
|
||||
const toggleSidebar = () => {
|
||||
updateUISettings({
|
||||
is_copilot_panel_open: !uiSettings.value.is_copilot_panel_open,
|
||||
is_contact_sidebar_open: false,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="showCopilotLauncher" class="fixed bottom-4 right-4 z-50">
|
||||
<div class="rounded-full bg-n-alpha-2 p-1">
|
||||
<Button
|
||||
icon="i-woot-captain"
|
||||
class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl"
|
||||
lg
|
||||
@click="toggleSidebar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else />
|
||||
</template>
|
||||
@@ -17,7 +17,7 @@ defineProps({
|
||||
icon="i-lucide-sparkles"
|
||||
class="w-4 h-4 mt-0.5 flex-shrink-0 text-n-slate-9"
|
||||
/>
|
||||
<div class="text-sm text-n-slate-11">
|
||||
<div class="text-sm text-n-slate-12">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -51,10 +51,10 @@ watch(
|
||||
}"
|
||||
>
|
||||
<CopilotThinkingBlock
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
:content="message.content"
|
||||
:reasoning="message.reasoning"
|
||||
v-for="copilotMessage in messages"
|
||||
:key="copilotMessage.id"
|
||||
:content="copilotMessage.message.content"
|
||||
:reasoning="copilotMessage.message.reasoning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -74,6 +74,7 @@ const updateSelected = newValue => {
|
||||
<slot name="trigger" :toggle="toggle">
|
||||
<Button
|
||||
ref="triggerRef"
|
||||
type="button"
|
||||
sm
|
||||
slate
|
||||
:variant
|
||||
|
||||
@@ -9,7 +9,14 @@ import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
|
||||
import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
|
||||
import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
|
||||
|
||||
const { options } = defineProps({
|
||||
const {
|
||||
options,
|
||||
disableSearch,
|
||||
placeholderIcon,
|
||||
placeholder,
|
||||
placeholderTrailingIcon,
|
||||
searchPlaceholder,
|
||||
} = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
@@ -18,6 +25,22 @@ const { options } = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
placeholderIcon: {
|
||||
type: String,
|
||||
default: 'i-lucide-plus',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholderTrailingIcon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
searchPlaceholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
@@ -69,15 +92,26 @@ const toggleSelected = option => {
|
||||
sm
|
||||
slate
|
||||
faded
|
||||
type="button"
|
||||
:icon="selectedItem.icon"
|
||||
:label="selectedItem.name"
|
||||
@click="toggle"
|
||||
/>
|
||||
<Button v-else sm slate faded @click="toggle">
|
||||
<Button
|
||||
v-else
|
||||
sm
|
||||
slate
|
||||
faded
|
||||
type="button"
|
||||
:trailing-icon="placeholderTrailingIcon"
|
||||
@click="toggle"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="i-lucide-plus" class="text-n-slate-11" />
|
||||
<Icon :icon="placeholderIcon" class="text-n-slate-11" />
|
||||
</template>
|
||||
<span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
|
||||
<span class="text-n-slate-11">{{
|
||||
placeholder || t('COMBOBOX.PLACEHOLDER')
|
||||
}}</span>
|
||||
</Button>
|
||||
</template>
|
||||
<DropdownBody class="top-0 min-w-56 z-50" strong>
|
||||
@@ -87,7 +121,7 @@ const toggleSelected = option => {
|
||||
v-model="searchTerm"
|
||||
autofocus
|
||||
class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
|
||||
:placeholder="t('COMBOBOX.SEARCH_PLACEHOLDER')"
|
||||
:placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
|
||||
/>
|
||||
</div>
|
||||
<DropdownSection class="max-h-80 overflow-scroll">
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed, watch } from 'vue';
|
||||
import Input from './Input.vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { DURATION_UNITS } from './constants';
|
||||
|
||||
const props = defineProps({
|
||||
min: { type: Number, default: 0 },
|
||||
@@ -11,36 +12,50 @@ const props = defineProps({
|
||||
|
||||
const { t } = useI18n();
|
||||
const duration = defineModel('modelValue', { type: Number, default: null });
|
||||
const unit = defineModel('unit', {
|
||||
type: String,
|
||||
default: DURATION_UNITS.MINUTES,
|
||||
validate(value) {
|
||||
return Object.values(DURATION_UNITS).includes(value);
|
||||
},
|
||||
});
|
||||
|
||||
const UNIT_TYPES = {
|
||||
MINUTES: 'minutes',
|
||||
HOURS: 'hours',
|
||||
DAYS: 'days',
|
||||
const convertToMinutes = newValue => {
|
||||
if (unit.value === DURATION_UNITS.MINUTES) {
|
||||
return Math.floor(newValue);
|
||||
}
|
||||
if (unit.value === DURATION_UNITS.HOURS) {
|
||||
return Math.floor(newValue) * 60;
|
||||
}
|
||||
return Math.floor(newValue) * 24 * 60;
|
||||
};
|
||||
const unit = ref(UNIT_TYPES.MINUTES);
|
||||
|
||||
const transformedValue = computed({
|
||||
get() {
|
||||
if (unit.value === UNIT_TYPES.MINUTES) return duration.value;
|
||||
if (unit.value === UNIT_TYPES.HOURS) return Math.floor(duration.value / 60);
|
||||
if (unit.value === UNIT_TYPES.DAYS)
|
||||
if (unit.value === DURATION_UNITS.MINUTES) return duration.value;
|
||||
if (unit.value === DURATION_UNITS.HOURS)
|
||||
return Math.floor(duration.value / 60);
|
||||
if (unit.value === DURATION_UNITS.DAYS)
|
||||
return Math.floor(duration.value / 24 / 60);
|
||||
|
||||
return 0;
|
||||
},
|
||||
set(newValue) {
|
||||
let minuteValue;
|
||||
if (unit.value === UNIT_TYPES.MINUTES) {
|
||||
minuteValue = Math.floor(newValue);
|
||||
} else if (unit.value === UNIT_TYPES.HOURS) {
|
||||
minuteValue = Math.floor(newValue * 60);
|
||||
} else if (unit.value === UNIT_TYPES.DAYS) {
|
||||
minuteValue = Math.floor(newValue * 24 * 60);
|
||||
}
|
||||
let minuteValue = convertToMinutes(newValue);
|
||||
|
||||
duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
|
||||
},
|
||||
});
|
||||
|
||||
// when unit is changed set the nearest value to that unit
|
||||
// so if the minute is set to 900, and the user changes the unit to "days"
|
||||
// the transformed value will show 0, but the real value will still be 900
|
||||
// this might create some confusion, especially when saving
|
||||
// this watcher fixes it by rounding the duration basically, to the nearest unit value
|
||||
watch(unit, () => {
|
||||
let adjustedValue = convertToMinutes(transformedValue.value);
|
||||
duration.value = Math.min(Math.max(adjustedValue, props.min), props.max);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -57,10 +72,12 @@ const transformedValue = computed({
|
||||
:disabled="disabled"
|
||||
class="mb-0 text-sm disabled:outline-n-weak disabled:opacity-40"
|
||||
>
|
||||
<option :value="UNIT_TYPES.MINUTES">
|
||||
<option :value="DURATION_UNITS.MINUTES">
|
||||
{{ t('DURATION_INPUT.MINUTES') }}
|
||||
</option>
|
||||
<option :value="UNIT_TYPES.HOURS">{{ t('DURATION_INPUT.HOURS') }}</option>
|
||||
<option :value="UNIT_TYPES.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
|
||||
<option :value="DURATION_UNITS.HOURS">
|
||||
{{ t('DURATION_INPUT.HOURS') }}
|
||||
</option>
|
||||
<option :value="DURATION_UNITS.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
export const DURATION_UNITS = {
|
||||
MINUTES: 'minutes',
|
||||
HOURS: 'hours',
|
||||
DAYS: 'days',
|
||||
};
|
||||
@@ -235,6 +235,12 @@ const menuItems = computed(() => {
|
||||
),
|
||||
activeOn: ['contacts_dashboard_index', 'contacts_edit'],
|
||||
},
|
||||
{
|
||||
name: 'Active',
|
||||
label: t('SIDEBAR.ACTIVE'),
|
||||
to: accountScopedRoute('contacts_dashboard_active'),
|
||||
activeOn: ['contacts_dashboard_active'],
|
||||
},
|
||||
{
|
||||
name: 'Segments',
|
||||
icon: 'i-lucide-group',
|
||||
@@ -477,7 +483,7 @@ const menuItems = computed(() => {
|
||||
|
||||
<template>
|
||||
<aside
|
||||
class="w-[12.5rem] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
|
||||
class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
|
||||
>
|
||||
<section class="grid gap-2 mt-2 mb-4">
|
||||
<div class="flex items-center min-w-0 gap-2 px-2">
|
||||
|
||||
Reference in New Issue
Block a user