Merge branch 'develop' into fix/conversation-tabs-limit
This commit is contained in:
Shivam Mishra
@@ -4,7 +4,6 @@ import { OnClickOutside } from '@vueuse/components';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { usePolicy } from 'dashboard/composables/usePolicy';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import BackButton from 'dashboard/components/widgets/BackButton.vue';
|
||||
import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
|
||||
@@ -117,58 +116,57 @@ const handleCreateAssistant = () => {
|
||||
<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"
|
||||
>
|
||||
<div class="flex gap-4 items-center">
|
||||
<div class="flex gap-3 items-center">
|
||||
<BackButton v-if="backUrl" :back-url="backUrl" />
|
||||
<slot name="headerTitle">
|
||||
<div v-if="showAssistantSwitcher" class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<span
|
||||
v-if="activeAssistantName"
|
||||
class="text-xl font-medium truncate text-n-slate-12"
|
||||
<div v-if="showAssistantSwitcher" class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
v-if="activeAssistantName"
|
||||
class="text-xl font-medium truncate text-n-slate-12"
|
||||
>
|
||||
{{ activeAssistantName }}
|
||||
</span>
|
||||
<div v-if="activeAssistantName" class="relative group">
|
||||
<OnClickOutside
|
||||
@trigger="showAssistantSwitcherDropdown = false"
|
||||
>
|
||||
{{ activeAssistantName }}
|
||||
</span>
|
||||
<div v-if="activeAssistantName" class="relative group">
|
||||
<OnClickOutside
|
||||
@trigger="showAssistantSwitcherDropdown = false"
|
||||
>
|
||||
<Button
|
||||
icon="i-lucide-chevron-down"
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
|
||||
@click="toggleAssistantSwitcher"
|
||||
/>
|
||||
<Button
|
||||
icon="i-lucide-chevron-down"
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
|
||||
@click="toggleAssistantSwitcher"
|
||||
/>
|
||||
|
||||
<AssistantSwitcher
|
||||
v-if="showAssistantSwitcherDropdown"
|
||||
class="absolute ltr:left-0 rtl:right-0 top-9"
|
||||
@close="showAssistantSwitcherDropdown = false"
|
||||
@create-assistant="handleCreateAssistant"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
</div>
|
||||
<Icon
|
||||
v-if="activeAssistantName"
|
||||
icon="i-lucide-chevron-right"
|
||||
class="size-6 text-n-slate-11"
|
||||
/>
|
||||
<span class="text-xl font-medium text-n-slate-11">
|
||||
{{ headerTitle }}
|
||||
</span>
|
||||
<AssistantSwitcher
|
||||
v-if="showAssistantSwitcherDropdown"
|
||||
class="absolute ltr:left-0 rtl:right-0 top-9"
|
||||
@close="showAssistantSwitcherDropdown = false"
|
||||
@create-assistant="handleCreateAssistant"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="text-xl font-medium text-n-slate-12">
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
v-if="showAssistantSwitcher && headerTitle"
|
||||
class="w-0.5 h-4 rounded-2xl bg-n-weak"
|
||||
/>
|
||||
<span
|
||||
v-if="headerTitle"
|
||||
class="text-xl font-medium text-n-slate-12"
|
||||
>
|
||||
{{ headerTitle }}
|
||||
</span>
|
||||
</slot>
|
||||
<div
|
||||
v-if="!isEmpty && showKnowMore"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
|
||||
<slot name="knowMore" />
|
||||
<div
|
||||
v-if="!isEmpty && showKnowMore"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
|
||||
<slot name="knowMore" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -75,9 +75,9 @@ const sendMessage = async () => {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col h-full rounded-lg p-4 border border-n-slate-4 text-n-slate-11"
|
||||
class="flex flex-col h-full rounded-xl border py-6 border-n-weak text-n-slate-11"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<div class="mb-8 px-6">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h3 class="text-lg font-medium">
|
||||
{{ t('CAPTAIN.PLAYGROUND.HEADER') }}
|
||||
@@ -85,6 +85,7 @@ const sendMessage = async () => {
|
||||
<NextButton
|
||||
ghost
|
||||
sm
|
||||
slate
|
||||
icon="i-lucide-rotate-ccw"
|
||||
@click="resetConversation"
|
||||
/>
|
||||
@@ -97,11 +98,11 @@ const sendMessage = async () => {
|
||||
<MessageList :messages="messages" :is-loading="isLoading" />
|
||||
|
||||
<div
|
||||
class="flex items-center bg-n-solid-1 outline outline-n-container rounded-lg p-3"
|
||||
class="flex items-center mx-6 bg-n-background outline outline-1 outline-n-weak rounded-xl p-3"
|
||||
>
|
||||
<input
|
||||
v-model="newMessage"
|
||||
class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0"
|
||||
class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0 text-n-slate-12 placeholder:text-n-slate-10"
|
||||
:placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
|
||||
@keyup.enter="sendMessage"
|
||||
/>
|
||||
|
||||
@@ -35,8 +35,8 @@ const getAvatarName = sender =>
|
||||
|
||||
const getMessageStyle = sender =>
|
||||
isUserMessage(sender)
|
||||
? 'bg-n-strong text-n-white'
|
||||
: 'bg-n-solid-iris text-n-slate-12';
|
||||
? 'bg-n-solid-blue text-n-slate-12 rounded-br-sm rounded-bl-xl rounded-t-xl'
|
||||
: 'bg-n-solid-iris text-n-slate-12 rounded-bl-sm rounded-br-xl rounded-t-xl';
|
||||
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick();
|
||||
@@ -49,7 +49,10 @@ watch(() => props.messages.length, scrollToBottom);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="messageContainer" class="flex-1 overflow-y-auto mb-4 space-y-2">
|
||||
<div
|
||||
ref="messageContainer"
|
||||
class="flex-1 overflow-y-auto mb-4 px-6 space-y-6"
|
||||
>
|
||||
<div
|
||||
v-for="(message, index) in messages"
|
||||
:key="index"
|
||||
@@ -57,15 +60,20 @@ watch(() => props.messages.length, scrollToBottom);
|
||||
:class="getMessageAlignment(message.sender)"
|
||||
>
|
||||
<div
|
||||
class="flex items-start gap-1.5"
|
||||
class="flex items-end gap-1.5 max-w-[90%] md:max-w-[60%]"
|
||||
:class="getMessageDirection(message.sender)"
|
||||
>
|
||||
<Avatar :name="getAvatarName(message.sender)" rounded-full :size="24" />
|
||||
<Avatar
|
||||
:name="getAvatarName(message.sender)"
|
||||
rounded-full
|
||||
:size="24"
|
||||
class="shrink-0"
|
||||
/>
|
||||
<div
|
||||
class="max-w-[80%] rounded-lg p-3 text-sm"
|
||||
class="px-4 py-3 text-sm [overflow-wrap:break-word]"
|
||||
:class="getMessageStyle(message.sender)"
|
||||
>
|
||||
<div class="break-words" v-html="formatMessage(message.content)" />
|
||||
<div v-html="formatMessage(message.content)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,11 +8,15 @@ import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
const props = defineProps({
|
||||
menuItems: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
validator: value => {
|
||||
return value.every(item => item.action && item.value && item.label);
|
||||
},
|
||||
},
|
||||
menuSections: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
thumbnailSize: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
@@ -42,19 +46,62 @@ const { t } = useI18n();
|
||||
const searchInput = ref(null);
|
||||
const searchQuery = ref('');
|
||||
|
||||
const filteredMenuItems = computed(() => {
|
||||
if (!searchQuery.value) return props.menuItems;
|
||||
const hasSections = computed(() => props.menuSections.length > 0);
|
||||
|
||||
return props.menuItems.filter(item =>
|
||||
const flattenedMenuItems = computed(() => {
|
||||
if (!hasSections.value) {
|
||||
return props.menuItems;
|
||||
}
|
||||
|
||||
return props.menuSections.flatMap(section => section.items || []);
|
||||
});
|
||||
|
||||
const filteredMenuItems = computed(() => {
|
||||
if (!searchQuery.value) return flattenedMenuItems.value;
|
||||
|
||||
return flattenedMenuItems.value.filter(item =>
|
||||
item.label.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
const filteredMenuSections = computed(() => {
|
||||
if (!hasSections.value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (!searchQuery.value) {
|
||||
return props.menuSections;
|
||||
}
|
||||
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
|
||||
return props.menuSections
|
||||
.map(section => {
|
||||
const filteredItems = (section.items || []).filter(item =>
|
||||
item.label.toLowerCase().includes(query)
|
||||
);
|
||||
|
||||
return {
|
||||
...section,
|
||||
items: filteredItems,
|
||||
};
|
||||
})
|
||||
.filter(section => section.items.length > 0);
|
||||
});
|
||||
|
||||
const handleAction = item => {
|
||||
const { action, value, ...rest } = item;
|
||||
emit('action', { action, value, ...rest });
|
||||
};
|
||||
|
||||
const shouldShowEmptyState = computed(() => {
|
||||
if (hasSections.value) {
|
||||
return filteredMenuSections.value.length === 0;
|
||||
}
|
||||
|
||||
return filteredMenuItems.value.length === 0;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (searchInput.value && props.showSearch) {
|
||||
searchInput.value.focus();
|
||||
@@ -64,54 +111,122 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 py-2 px-2 gap-2 flex flex-col min-w-[136px] shadow-lg"
|
||||
class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 gap-2 flex flex-col min-w-[136px] shadow-lg pb-2 px-2"
|
||||
:class="{
|
||||
'pt-2': !showSearch,
|
||||
}"
|
||||
>
|
||||
<div v-if="showSearch" class="relative">
|
||||
<span class="absolute i-lucide-search size-3.5 top-2 left-3" />
|
||||
<input
|
||||
ref="searchInput"
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
:placeholder="
|
||||
searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
|
||||
"
|
||||
class="reset-base w-full h-8 py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
v-for="(item, index) in filteredMenuItems"
|
||||
:key="index"
|
||||
type="button"
|
||||
class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
|
||||
:class="{
|
||||
'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
|
||||
'text-n-ruby-11': item.action === 'delete',
|
||||
'text-n-slate-12': item.action !== 'delete',
|
||||
}"
|
||||
:disabled="item.disabled"
|
||||
@click="handleAction(item)"
|
||||
>
|
||||
<slot name="thumbnail" :item="item">
|
||||
<Avatar
|
||||
v-if="item.thumbnail"
|
||||
:name="item.thumbnail.name"
|
||||
:src="item.thumbnail.src"
|
||||
:size="thumbnailSize"
|
||||
rounded-full
|
||||
/>
|
||||
</slot>
|
||||
<Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0 size-3.5" />
|
||||
<span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
|
||||
<span
|
||||
v-if="item.label"
|
||||
class="min-w-0 text-sm truncate"
|
||||
:class="labelClass"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
v-if="filteredMenuItems.length === 0"
|
||||
v-if="showSearch"
|
||||
class="sticky top-0 bg-n-alpha-3 backdrop-blur-sm pt-2"
|
||||
>
|
||||
<div class="relative">
|
||||
<span class="absolute i-lucide-search size-3.5 top-2 left-3" />
|
||||
<input
|
||||
ref="searchInput"
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
:placeholder="
|
||||
searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
|
||||
"
|
||||
class="reset-base w-full h-8 py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="hasSections">
|
||||
<div
|
||||
v-for="(section, sectionIndex) in filteredMenuSections"
|
||||
:key="section.title || sectionIndex"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<p
|
||||
v-if="section.title"
|
||||
class="px-2 pt-2 text-xs font-medium text-n-slate-11 uppercase tracking-wide"
|
||||
>
|
||||
{{ section.title }}
|
||||
</p>
|
||||
<button
|
||||
v-for="(item, itemIndex) in section.items"
|
||||
:key="item.value || itemIndex"
|
||||
type="button"
|
||||
class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
|
||||
:class="{
|
||||
'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
|
||||
'text-n-ruby-11': item.action === 'delete',
|
||||
'text-n-slate-12': item.action !== 'delete',
|
||||
}"
|
||||
:disabled="item.disabled"
|
||||
@click="handleAction(item)"
|
||||
>
|
||||
<slot name="thumbnail" :item="item">
|
||||
<Avatar
|
||||
v-if="item.thumbnail"
|
||||
:name="item.thumbnail.name"
|
||||
:src="item.thumbnail.src"
|
||||
:size="thumbnailSize"
|
||||
rounded-full
|
||||
/>
|
||||
</slot>
|
||||
<Icon
|
||||
v-if="item.icon"
|
||||
:icon="item.icon"
|
||||
class="flex-shrink-0 size-3.5"
|
||||
/>
|
||||
<span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
|
||||
<span
|
||||
v-if="item.label"
|
||||
class="min-w-0 text-sm truncate"
|
||||
:class="labelClass"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
v-if="sectionIndex < filteredMenuSections.length - 1"
|
||||
class="h-px bg-n-alpha-2 mx-2 my-1"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="(item, index) in filteredMenuItems"
|
||||
:key="index"
|
||||
type="button"
|
||||
class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
|
||||
:class="{
|
||||
'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
|
||||
'text-n-ruby-11': item.action === 'delete',
|
||||
'text-n-slate-12': item.action !== 'delete',
|
||||
}"
|
||||
:disabled="item.disabled"
|
||||
@click="handleAction(item)"
|
||||
>
|
||||
<slot name="thumbnail" :item="item">
|
||||
<Avatar
|
||||
v-if="item.thumbnail"
|
||||
:name="item.thumbnail.name"
|
||||
:src="item.thumbnail.src"
|
||||
:size="thumbnailSize"
|
||||
rounded-full
|
||||
/>
|
||||
</slot>
|
||||
<Icon
|
||||
v-if="item.icon"
|
||||
:icon="item.icon"
|
||||
class="flex-shrink-0 size-3.5"
|
||||
/>
|
||||
<span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
|
||||
<span
|
||||
v-if="item.label"
|
||||
class="min-w-0 text-sm truncate"
|
||||
:class="labelClass"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<div
|
||||
v-if="shouldShowEmptyState"
|
||||
class="text-sm text-n-slate-11 px-2 py-1.5"
|
||||
>
|
||||
{{
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
} from 'dashboard/constants/automation';
|
||||
|
||||
/**
|
||||
* This is a shared composables that holds utilites used to build dropdown and file options
|
||||
* This is a shared composables that holds utilities used to build dropdown and file options
|
||||
* @returns {Object} An object containing various automation-related functions and computed properties.
|
||||
*/
|
||||
export default function useAutomationValues() {
|
||||
|
||||
@@ -21,7 +21,7 @@ export const initializeAudioAlerts = user => {
|
||||
enable_audio_alerts: audioAlertType,
|
||||
alert_if_unread_assigned_conversation_exist: alertIfUnreadConversationExist,
|
||||
notification_tone: audioAlertTone,
|
||||
// UI Settings can be undefined initally as we don't send the
|
||||
// UI Settings can be undefined initially as we don't send the
|
||||
// entire payload for the user during the signup process.
|
||||
} = uiSettings || {};
|
||||
|
||||
|
||||
@@ -53,6 +53,8 @@
|
||||
"LAST_7_DAYS": "Last 7 days",
|
||||
"LAST_14_DAYS": "Last 14 days",
|
||||
"LAST_30_DAYS": "Last 30 days",
|
||||
"THIS_MONTH": "This month",
|
||||
"LAST_MONTH": "Last month",
|
||||
"LAST_3_MONTHS": "Last 3 months",
|
||||
"LAST_6_MONTHS": "Last 6 months",
|
||||
"LAST_YEAR": "Last year",
|
||||
|
||||
@@ -10,14 +10,14 @@ const assistantId = computed(() => Number(route.params.assistantId));
|
||||
|
||||
<template>
|
||||
<PageLayout
|
||||
:header-title="$t('CAPTAIN.PLAYGROUND.HEADER')"
|
||||
show-assistant-switcher
|
||||
:show-pagination-footer="false"
|
||||
:show-know-more="false"
|
||||
class="h-full"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col h-full">
|
||||
<AssistantPlayground :assistant-id="assistantId" />
|
||||
<AssistantPlayground :assistant-id="assistantId" class="bg-n-solid-1" />
|
||||
</div>
|
||||
</template>
|
||||
</PageLayout>
|
||||
|
||||
@@ -104,7 +104,6 @@ const handleDeleteSuccess = () => {
|
||||
|
||||
<template>
|
||||
<PageLayout
|
||||
:header-title="$t('CAPTAIN.ASSISTANTS.SETTINGS.HEADER')"
|
||||
:is-fetching="isFetching"
|
||||
:show-pagination-footer="false"
|
||||
:show-know-more="false"
|
||||
|
||||
@@ -195,7 +195,10 @@ const navigateToPendingFAQs = () => {
|
||||
|
||||
onMounted(() => {
|
||||
initializeFromURL();
|
||||
store.dispatch('captainResponses/fetchPendingCount', selectedAssistantId);
|
||||
store.dispatch(
|
||||
'captainResponses/fetchPendingCount',
|
||||
selectedAssistantId.value
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
+1
-1
@@ -119,7 +119,7 @@ const tooltip = useHeatmapTooltip();
|
||||
<!-- eslint-disable vue/no-static-inline-styles -->
|
||||
<template>
|
||||
<div
|
||||
class="grid relative w-full gap-x-4 gap-y-2.5 overflow-y-scroll md:overflow-visible grid-cols-[80px_1fr] min-h-72"
|
||||
class="grid relative w-full gap-x-4 gap-y-2.5 overflow-y-scroll md:overflow-visible grid-cols-[80px_1fr]"
|
||||
>
|
||||
<template v-if="isLoading">
|
||||
<div class="grid gap-[5px] flex-shrink-0">
|
||||
|
||||
+105
-57
@@ -1,15 +1,18 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { onMounted, ref, computed, watch } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import MetricCard from '../overview/MetricCard.vue';
|
||||
import BaseHeatmap from './BaseHeatmap.vue';
|
||||
import HeatmapDateRangeSelector from './HeatmapDateRangeSelector.vue';
|
||||
import { useStore, useMapGetter } from 'dashboard/composables/store';
|
||||
import { useLiveRefresh } from 'dashboard/composables/useLiveRefresh';
|
||||
import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
|
||||
import endOfDay from 'date-fns/endOfDay';
|
||||
import format from 'date-fns/format';
|
||||
import getUnixTime from 'date-fns/getUnixTime';
|
||||
import startOfDay from 'date-fns/startOfDay';
|
||||
import startOfMonth from 'date-fns/startOfMonth';
|
||||
import subDays from 'date-fns/subDays';
|
||||
import format from 'date-fns/format';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -57,27 +60,33 @@ const uiFlags = useMapGetter('getOverviewUIFlags');
|
||||
const heatmapData = useMapGetter(props.storeGetter);
|
||||
const inboxes = useMapGetter('inboxes/getInboxes');
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
label: t('REPORT.DATE_RANGE_OPTIONS.LAST_7_DAYS'),
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
label: t('REPORT.DATE_RANGE_OPTIONS.LAST_14_DAYS'),
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
label: t('REPORT.DATE_RANGE_OPTIONS.LAST_30_DAYS'),
|
||||
value: 29,
|
||||
},
|
||||
];
|
||||
|
||||
const selectedDays = ref(6);
|
||||
const selectedFrom = ref(null);
|
||||
const selectedTo = ref(null);
|
||||
const selectedDaysBefore = ref(null);
|
||||
const selectedInbox = ref(null);
|
||||
const isMonthFilter = ref(false);
|
||||
const currentMonthOffset = ref(0);
|
||||
|
||||
const selectedDayFilter = computed(() =>
|
||||
menuItems.find(menuItem => menuItem.value === selectedDays.value)
|
||||
);
|
||||
const selectedRange = computed(() => {
|
||||
if (!selectedFrom.value || !selectedTo.value) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
from: selectedFrom.value,
|
||||
to: selectedTo.value,
|
||||
};
|
||||
});
|
||||
|
||||
const numberOfRows = computed(() => {
|
||||
if (!selectedRange.value) {
|
||||
return 0;
|
||||
}
|
||||
const dateDifference = differenceInCalendarDays(
|
||||
selectedRange.value.to,
|
||||
selectedRange.value.from
|
||||
);
|
||||
return dateDifference + 1;
|
||||
});
|
||||
|
||||
const inboxMenuItems = computed(() => {
|
||||
return [
|
||||
@@ -105,13 +114,42 @@ const selectedInboxFilter = computed(() => {
|
||||
|
||||
const isLoading = computed(() => uiFlags.value[props.uiFlagKey]);
|
||||
|
||||
// Keeps relative presets (last 7 days / this month) aligned with "now" during live refreshes.
|
||||
const resolveActiveRange = () => {
|
||||
if (isMonthFilter.value && currentMonthOffset.value === 0) {
|
||||
const now = new Date();
|
||||
const monthStart = startOfMonth(now);
|
||||
return {
|
||||
from: startOfDay(monthStart),
|
||||
to: endOfDay(now),
|
||||
};
|
||||
}
|
||||
|
||||
if (!isMonthFilter.value && selectedDaysBefore.value !== null) {
|
||||
const to = endOfDay(new Date());
|
||||
return {
|
||||
from: startOfDay(subDays(to, Number(selectedDaysBefore.value))),
|
||||
to,
|
||||
};
|
||||
}
|
||||
|
||||
return selectedRange.value;
|
||||
};
|
||||
|
||||
const downloadHeatmapData = () => {
|
||||
const to = endOfDay(new Date());
|
||||
const range = resolveActiveRange();
|
||||
if (!range) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { to } = range;
|
||||
const shouldUseBackendDownload =
|
||||
!isMonthFilter.value && !selectedInbox.value && props.downloadAction;
|
||||
|
||||
// If no inbox is selected and download action exists, use backend endpoint
|
||||
if (!selectedInbox.value && props.downloadAction) {
|
||||
if (shouldUseBackendDownload) {
|
||||
store.dispatch(props.downloadAction, {
|
||||
daysBefore: selectedDays.value,
|
||||
daysBefore: selectedDaysBefore.value,
|
||||
to: getUnixTime(to),
|
||||
});
|
||||
return;
|
||||
@@ -150,7 +188,6 @@ const downloadHeatmapData = () => {
|
||||
downloadCsvFile(fileName, csvContent);
|
||||
};
|
||||
|
||||
const [showDropdown, toggleDropdown] = useToggle();
|
||||
const [showInboxDropdown, toggleInboxDropdown] = useToggle();
|
||||
|
||||
const fetchHeatmapData = () => {
|
||||
@@ -158,8 +195,12 @@ const fetchHeatmapData = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
let to = endOfDay(new Date());
|
||||
let from = startOfDay(subDays(to, Number(selectedDays.value)));
|
||||
const range = resolveActiveRange();
|
||||
if (!range) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { from, to } = range;
|
||||
|
||||
const params = {
|
||||
metric: props.metric,
|
||||
@@ -178,25 +219,43 @@ const fetchHeatmapData = () => {
|
||||
store.dispatch(props.storeAction, params);
|
||||
};
|
||||
|
||||
const handleAction = ({ value }) => {
|
||||
toggleDropdown(false);
|
||||
selectedDays.value = value;
|
||||
fetchHeatmapData();
|
||||
};
|
||||
|
||||
const handleInboxAction = ({ value }) => {
|
||||
toggleInboxDropdown(false);
|
||||
selectedInbox.value = value
|
||||
? inboxes.value.find(inbox => inbox.id === value)
|
||||
: null;
|
||||
fetchHeatmapData();
|
||||
};
|
||||
|
||||
const { startRefetching } = useLiveRefresh(fetchHeatmapData);
|
||||
|
||||
const handleRangeTypeChange = type => {
|
||||
isMonthFilter.value = type === 'month';
|
||||
};
|
||||
|
||||
const handleMonthOffsetChange = offset => {
|
||||
currentMonthOffset.value = offset;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [selectedFrom.value, selectedTo.value],
|
||||
([from, to]) => {
|
||||
if (from && to) {
|
||||
fetchHeatmapData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => selectedInbox.value,
|
||||
() => {
|
||||
if (selectedRange.value) {
|
||||
fetchHeatmapData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
store.dispatch('inboxes/get');
|
||||
fetchHeatmapData();
|
||||
startRefetching();
|
||||
});
|
||||
</script>
|
||||
@@ -205,25 +264,13 @@ onMounted(() => {
|
||||
<div class="flex flex-row flex-wrap max-w-full">
|
||||
<MetricCard :header="title">
|
||||
<template #control>
|
||||
<div
|
||||
v-on-clickaway="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group"
|
||||
>
|
||||
<Button
|
||||
sm
|
||||
slate
|
||||
faded
|
||||
:label="selectedDayFilter.label"
|
||||
class="rounded-md group-hover:bg-n-alpha-2"
|
||||
@click="toggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showDropdown"
|
||||
:menu-items="menuItems"
|
||||
class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
|
||||
@action="handleAction($event)"
|
||||
/>
|
||||
</div>
|
||||
<HeatmapDateRangeSelector
|
||||
v-model:from="selectedFrom"
|
||||
v-model:to="selectedTo"
|
||||
v-model:days-num="selectedDaysBefore"
|
||||
@range-type-change="handleRangeTypeChange"
|
||||
@month-offset-change="handleMonthOffsetChange"
|
||||
/>
|
||||
<div
|
||||
v-on-clickaway="() => toggleInboxDropdown(false)"
|
||||
class="relative flex items-center group"
|
||||
@@ -241,22 +288,23 @@ onMounted(() => {
|
||||
:menu-items="inboxMenuItems"
|
||||
show-search
|
||||
:search-placeholder="t('INBOX_REPORTS.SEARCH_INBOX')"
|
||||
class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full min-w-[200px]"
|
||||
class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full !min-w-56 max-w-56 max-h-96 overflow-y-auto"
|
||||
@action="handleInboxAction($event)"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
v-tooltip="t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT')"
|
||||
sm
|
||||
slate
|
||||
faded
|
||||
:label="t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT')"
|
||||
icon="i-lucide-download"
|
||||
class="rounded-md group-hover:bg-n-alpha-2"
|
||||
@click="downloadHeatmapData"
|
||||
/>
|
||||
</template>
|
||||
<BaseHeatmap
|
||||
:heatmap-data="heatmapData"
|
||||
:number-of-rows="selectedDays + 1"
|
||||
:number-of-rows="numberOfRows"
|
||||
:is-loading="isLoading"
|
||||
:color-scheme="colorScheme"
|
||||
/>
|
||||
|
||||
+211
@@ -0,0 +1,211 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch, defineModel } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import addMonths from 'date-fns/addMonths';
|
||||
import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
|
||||
import endOfDay from 'date-fns/endOfDay';
|
||||
import endOfMonth from 'date-fns/endOfMonth';
|
||||
import startOfDay from 'date-fns/startOfDay';
|
||||
import startOfMonth from 'date-fns/startOfMonth';
|
||||
import subDays from 'date-fns/subDays';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
|
||||
const emit = defineEmits(['rangeTypeChange', 'monthOffsetChange']);
|
||||
|
||||
const fromModel = defineModel('from', { type: Date, default: null });
|
||||
const toModel = defineModel('to', { type: Date, default: null });
|
||||
const daysNumModel = defineModel('daysNum', { type: Number, default: null });
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const DATE_FILTER_TYPES = {
|
||||
DAY: 'day',
|
||||
MONTH: 'month',
|
||||
};
|
||||
|
||||
const DATE_FILTER_ACTION = 'select_date_range';
|
||||
|
||||
const dayMenuItemConfigs = computed(() => [
|
||||
{
|
||||
label: t('REPORT.DATE_RANGE_OPTIONS.LAST_7_DAYS'),
|
||||
value: 'last_7_days',
|
||||
action: DATE_FILTER_ACTION,
|
||||
type: DATE_FILTER_TYPES.DAY,
|
||||
daysBefore: 6,
|
||||
},
|
||||
{
|
||||
label: t('REPORT.DATE_RANGE_OPTIONS.LAST_14_DAYS'),
|
||||
value: 'last_14_days',
|
||||
action: DATE_FILTER_ACTION,
|
||||
type: DATE_FILTER_TYPES.DAY,
|
||||
daysBefore: 13,
|
||||
},
|
||||
{
|
||||
label: t('REPORT.DATE_RANGE_OPTIONS.LAST_30_DAYS'),
|
||||
value: 'last_30_days',
|
||||
action: DATE_FILTER_ACTION,
|
||||
type: DATE_FILTER_TYPES.DAY,
|
||||
daysBefore: 29,
|
||||
},
|
||||
]);
|
||||
|
||||
const resolvedLocale = computed(
|
||||
() =>
|
||||
locale.value ||
|
||||
(typeof navigator !== 'undefined' ? navigator.language : 'en')
|
||||
);
|
||||
|
||||
const monthFormatter = computed(
|
||||
() =>
|
||||
new Intl.DateTimeFormat(resolvedLocale.value, {
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
})
|
||||
);
|
||||
|
||||
const monthMenuItemConfigs = computed(() => {
|
||||
const now = new Date();
|
||||
const offsets = [0, -1, -2];
|
||||
|
||||
return offsets.map(offset => ({
|
||||
label:
|
||||
offset === 0
|
||||
? t('REPORT.DATE_RANGE_OPTIONS.THIS_MONTH')
|
||||
: monthFormatter.value.format(addMonths(now, offset)),
|
||||
value: offset === 0 ? 'this_month' : `month_${offset}`,
|
||||
action: DATE_FILTER_ACTION,
|
||||
type: DATE_FILTER_TYPES.MONTH,
|
||||
monthOffset: offset,
|
||||
}));
|
||||
});
|
||||
|
||||
const selectedDateRangeValue = ref('');
|
||||
|
||||
const [showDropdown, toggleDropdown] = useToggle();
|
||||
const monthOffset = ref(0);
|
||||
|
||||
const menuItems = computed(() => {
|
||||
const selectedValue = selectedDateRangeValue.value;
|
||||
return [...dayMenuItemConfigs.value, ...monthMenuItemConfigs.value].map(
|
||||
config => ({
|
||||
...config,
|
||||
isSelected: selectedValue === config.value,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
selectedDateRangeValue.value = menuItems.value[0]?.value || '';
|
||||
|
||||
const menuSections = computed(() => {
|
||||
const dayItems = menuItems.value.filter(
|
||||
item => item.type === DATE_FILTER_TYPES.DAY
|
||||
);
|
||||
const monthItems = menuItems.value.filter(
|
||||
item => item.type === DATE_FILTER_TYPES.MONTH
|
||||
);
|
||||
|
||||
return [{ items: dayItems }, { items: monthItems }].filter(
|
||||
section => section.items.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
const selectedConfig = computed(
|
||||
() =>
|
||||
menuItems.value.find(
|
||||
menuItem => menuItem.value === selectedDateRangeValue.value
|
||||
) || menuItems.value[0]
|
||||
);
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
const selectedItem = menuItems.value.find(
|
||||
item => item.value === selectedDateRangeValue.value
|
||||
);
|
||||
return selectedItem?.label || '';
|
||||
});
|
||||
|
||||
const computeRange = config => {
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (config.type === DATE_FILTER_TYPES.MONTH) {
|
||||
const now = new Date();
|
||||
const baseMonthStart = startOfMonth(addMonths(now, monthOffset.value));
|
||||
const from = startOfDay(baseMonthStart);
|
||||
const isCurrentMonth =
|
||||
config.value === 'this_month' && monthOffset.value === 0;
|
||||
const to = isCurrentMonth
|
||||
? endOfDay(now)
|
||||
: endOfDay(endOfMonth(baseMonthStart));
|
||||
const daysBefore = differenceInCalendarDays(to, from);
|
||||
return { from, to, daysBefore };
|
||||
}
|
||||
|
||||
const to = endOfDay(new Date());
|
||||
const from = startOfDay(subDays(to, Number(config.daysBefore)));
|
||||
return { from, to, daysBefore: Number(config.daysBefore) };
|
||||
};
|
||||
|
||||
const applySelection = config => {
|
||||
if (!config) return;
|
||||
|
||||
if (config.type === DATE_FILTER_TYPES.MONTH) {
|
||||
monthOffset.value = config.monthOffset || 0;
|
||||
} else {
|
||||
monthOffset.value = 0;
|
||||
}
|
||||
|
||||
const range = computeRange(config);
|
||||
if (!range) return;
|
||||
|
||||
const { from, to, daysBefore } = range;
|
||||
fromModel.value = from;
|
||||
toModel.value = to;
|
||||
daysNumModel.value = daysBefore;
|
||||
|
||||
emit('rangeTypeChange', config.type);
|
||||
emit('monthOffsetChange', monthOffset.value);
|
||||
};
|
||||
|
||||
const handleAction = ({ action, value }) => {
|
||||
toggleDropdown(false);
|
||||
if (action !== DATE_FILTER_ACTION) {
|
||||
return;
|
||||
}
|
||||
selectedDateRangeValue.value = value;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => selectedConfig.value,
|
||||
config => {
|
||||
applySelection(config);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group"
|
||||
>
|
||||
<Button
|
||||
sm
|
||||
slate
|
||||
faded
|
||||
:label="selectedLabel"
|
||||
class="rounded-md group-hover:bg-n-alpha-2"
|
||||
@click="toggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showDropdown"
|
||||
:menu-items="menuItems"
|
||||
:menu-sections="menuSections"
|
||||
class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
|
||||
@action="handleAction($event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user