feat: assistant overview page [CW-7408] (#14889)
This PR adds a Captain Assistant **Overview** page to show some KPI metrics (conversations handled, auto-resolution, handoff, hours saved, reopen-after-resolve, conversation depth) with trend deltas vs the previous window, a real knowledge card, and a lazily-loaded, cached LLM welcome summary. ### Highlights - **Two contextual banners** on the overview: - **Inbox banner** — prompts the user to connect an inbox when the assistant has none, so it can actually do work. - **Coverage banner** — warns when FAQ coverage is below 85% with more than 100 responses pending review, linking straight to the pending queue. Dismissal persists per-assistant for 24h via localStorage. - **Batched stats builder** (`Captain::AssistantStatsBuilder`) computes both windows in single FILTER-aggregated scans to cut round trips, behind new `stats`/`summary` endpoints. - **Cards included but intentionally left dummy / not rendered yet:** `ResponseQualityCard` (flagged responses) and `CreditUsageCard` (credit usage + daily chart). Credits are an account-wide counter with no per-assistant or daily history, so there is no real data to back them yet; they ship in the codebase but are not wired into the page. ### Index migration - Replaces `index_messages_on_sender_type_and_sender_id` with `index_messages_on_sender_and_created` `(sender_type, sender_id, created_at)`. - **Why it helps:** the per-assistant windowed lookups filter `sender_*` *and* a `created_at` range. The old 2-column index matched every lifetime row for the assistant and filtered the time slice at the heap (~89% of rows discarded); adding `created_at` as a range column lets Postgres scan only the window, and fixes the row-count estimate so the planner picks a hash join over a nested loop on `reporting_events`. - **Why dropping the old index is safe:** the new index is a left-prefix superset `(sender_type, sender_id, ...)`, so every query the old one served is still served. No code references it by name, and dropping it keeps write amplification on `messages` neutral. Built/dropped with `CONCURRENTLY` and `if_not_exists`/`if_exists` guards. ## Preview <img width="2572" height="1754" alt="CleanShot 2026-06-29 at 22 38 51@2x" src="https://github.com/user-attachments/assets/3798d09e-7850-48e4-b2cd-508533f15cea" /> ## Banners #### Inbox connect alert <img width="2178" height="612" alt="CleanShot 2026-06-30 at 14 26 55@2x" src="https://github.com/user-attachments/assets/373c371c-bb7d-4291-a0f9-620673078302" /> #### Coverage alert <img width="2178" height="612" alt="CleanShot 2026-06-30 at 14 25 41@2x" src="https://github.com/user-attachments/assets/e12d6308-11b6-4ba2-88a2-8a3077dd3e8f" /> --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Shivam Mishra
co-authored by
Sivin Varghese
Sivin Varghese
parent
1e7218d439
commit
a5fcecb3f6
@@ -182,7 +182,8 @@ const handleCreateAssistant = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<slot name="headerActions" />
|
||||
<slot name="search" />
|
||||
<div
|
||||
v-if="!showPaywall && buttonLabel"
|
||||
|
||||
+96
@@ -0,0 +1,96 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { LocalStorage } from 'shared/helpers/localStorage';
|
||||
|
||||
const props = defineProps({
|
||||
knowledge: {
|
||||
type: Object,
|
||||
default: () => ({ approved: 0, pending: 0, documents: 0, coverage: 0 }),
|
||||
},
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// Dismissal is remembered per assistant for 24 hours (setFlag's default expiry).
|
||||
const DISMISS_STORE = 'captain_overview_coverage_banner';
|
||||
|
||||
const accountId = computed(() => route.params.accountId);
|
||||
const assistantId = computed(() => route.params.assistantId);
|
||||
|
||||
// Re-read the stored flag whenever the assistant changes, otherwise the banner
|
||||
// would keep the first assistant's dismissed state after switching.
|
||||
const dismissed = ref(false);
|
||||
|
||||
watch(
|
||||
[accountId, assistantId],
|
||||
([account, assistant]) => {
|
||||
dismissed.value = LocalStorage.getFlag(DISMISS_STORE, account, assistant);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// Thin coverage paired with a large review backlog: approving the pending FAQs
|
||||
// is the quickest lever to lift auto-resolution, so nudge the team to act.
|
||||
const COVERAGE_THRESHOLD = 85;
|
||||
const PENDING_THRESHOLD = 100;
|
||||
|
||||
const showBanner = computed(
|
||||
() =>
|
||||
!dismissed.value &&
|
||||
(props.knowledge?.coverage ?? 0) < COVERAGE_THRESHOLD &&
|
||||
(props.knowledge?.pending ?? 0) > PENDING_THRESHOLD
|
||||
);
|
||||
|
||||
const dismiss = () => {
|
||||
LocalStorage.setFlag(DISMISS_STORE, accountId.value, assistantId.value);
|
||||
dismissed.value = true;
|
||||
};
|
||||
|
||||
const goToPending = () => {
|
||||
router.push({
|
||||
name: 'captain_assistants_responses_pending',
|
||||
params: {
|
||||
accountId: route.params.accountId,
|
||||
assistantId: route.params.assistantId,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="showBanner"
|
||||
class="flex items-center justify-between gap-3 px-3 py-2 text-sm border rounded-xl bg-n-amber-3 border-n-amber-4 text-n-amber-11"
|
||||
>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="shrink-0 i-lucide-triangle-alert size-4" />
|
||||
<span class="truncate">
|
||||
{{
|
||||
$t('CAPTAIN.OVERVIEW.COVERAGE_BANNER.TEXT', {
|
||||
count: knowledge.pending,
|
||||
coverage: knowledge.coverage,
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="px-3 py-1 rounded-lg bg-n-amber-4 hover:bg-n-amber-5"
|
||||
@click="goToPending"
|
||||
>
|
||||
{{ $t('CAPTAIN.OVERVIEW.COVERAGE_BANNER.ACTION') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="grid rounded-lg size-7 place-content-center hover:bg-n-amber-4"
|
||||
:aria-label="$t('CAPTAIN.OVERVIEW.COVERAGE_BANNER.DISMISS')"
|
||||
@click="dismiss"
|
||||
>
|
||||
<span class="i-lucide-x size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore, useMapGetter } from 'dashboard/composables/store';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
const dismissed = ref(false);
|
||||
|
||||
const assistantId = computed(() => route.params.assistantId);
|
||||
const inboxes = useMapGetter('captainInboxes/getRecords');
|
||||
const uiFlags = useMapGetter('captainInboxes/getUIFlags');
|
||||
|
||||
// Only surface once we know the assistant has no connected inboxes.
|
||||
const showBanner = computed(
|
||||
() =>
|
||||
!dismissed.value &&
|
||||
!uiFlags.value.fetchingList &&
|
||||
inboxes.value.length === 0
|
||||
);
|
||||
|
||||
watch(
|
||||
assistantId,
|
||||
id => {
|
||||
dismissed.value = false;
|
||||
if (id) store.dispatch('captainInboxes/get', { assistantId: id });
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const goToInboxes = () => {
|
||||
router.push({
|
||||
name: 'captain_assistants_inboxes_index',
|
||||
params: {
|
||||
accountId: route.params.accountId,
|
||||
assistantId: assistantId.value,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="showBanner"
|
||||
class="flex items-center justify-between gap-3 px-3 py-2 text-sm border rounded-xl bg-n-amber-3 border-n-amber-4 text-n-amber-11"
|
||||
>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="shrink-0 i-lucide-triangle-alert size-4" />
|
||||
<span class="truncate">
|
||||
{{ $t('CAPTAIN.OVERVIEW.INBOX_BANNER.TEXT') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="px-3 py-1 rounded-lg bg-n-amber-4 hover:bg-n-amber-5"
|
||||
@click="goToInboxes"
|
||||
>
|
||||
{{ $t('CAPTAIN.OVERVIEW.INBOX_BANNER.ACTION') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="grid rounded-lg size-7 place-content-center hover:bg-n-amber-4"
|
||||
:aria-label="$t('CAPTAIN.OVERVIEW.INBOX_BANNER.DISMISS')"
|
||||
@click="dismissed = true"
|
||||
>
|
||||
<span class="i-lucide-x size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const props = defineProps({
|
||||
knowledge: {
|
||||
type: Object,
|
||||
default: () => ({ approved: 0, pending: 0, documents: 0, coverage: 0 }),
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const approvedPct = computed(() => props.knowledge.coverage ?? 0);
|
||||
|
||||
const linkTo = routeName => ({
|
||||
name: routeName,
|
||||
params: {
|
||||
accountId: route.params.accountId,
|
||||
assistantId: route.params.assistantId,
|
||||
},
|
||||
});
|
||||
|
||||
const stats = computed(() => [
|
||||
{
|
||||
key: 'approved',
|
||||
value: props.knowledge.approved,
|
||||
label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.APPROVED'),
|
||||
to: linkTo('captain_assistants_responses_index'),
|
||||
},
|
||||
{
|
||||
key: 'pending',
|
||||
value: props.knowledge.pending,
|
||||
label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.PENDING'),
|
||||
to: linkTo('captain_assistants_responses_pending'),
|
||||
},
|
||||
{
|
||||
key: 'documents',
|
||||
value: props.knowledge.documents,
|
||||
label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.DOCUMENTS'),
|
||||
to: linkTo('captain_assistants_documents_index'),
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-4 p-5 border rounded-xl bg-n-solid-1 border-n-weak"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-n-slate-12">
|
||||
{{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.TITLE') }}
|
||||
</span>
|
||||
<span class="text-sm tabular-nums text-n-slate-11">
|
||||
{{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.COVERAGE', { pct: approvedPct }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-full h-2 overflow-hidden rounded-full bg-n-alpha-2">
|
||||
<div
|
||||
class="h-full rounded-full bg-n-brand"
|
||||
:style="{ width: `${approvedPct}%` }"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<RouterLink
|
||||
v-for="stat in stats"
|
||||
:key="stat.key"
|
||||
:to="stat.to"
|
||||
class="flex flex-col gap-1 group/stat"
|
||||
>
|
||||
<span class="text-xl font-semibold tabular-nums text-n-slate-12">
|
||||
{{ stat.value }}
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex items-center gap-1 text-xs transition-colors text-n-slate-11 group-hover/stat:text-n-slate-12"
|
||||
>
|
||||
{{ stat.label }}
|
||||
<span
|
||||
class="transition-opacity opacity-0 i-lucide-arrow-up-right size-3 group-hover/stat:opacity-100"
|
||||
/>
|
||||
</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
label: { type: String, required: true },
|
||||
value: { type: String, required: true },
|
||||
trend: { type: String, default: '' },
|
||||
hint: { type: String, default: '' },
|
||||
// null = neutral, true = good direction, false = bad direction
|
||||
trendGood: { type: Boolean, default: null },
|
||||
});
|
||||
|
||||
const trendClass = computed(() => {
|
||||
if (props.trendGood === null) return 'text-n-slate-11';
|
||||
return props.trendGood ? 'text-n-teal-11' : 'text-n-ruby-11';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-3 p-5 group bg-n-solid-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-n-slate-11">{{ label }}</span>
|
||||
<span
|
||||
v-if="hint"
|
||||
v-tooltip="hint"
|
||||
class="transition-opacity opacity-0 cursor-help i-lucide-info size-3.5 text-n-slate-10 group-hover:opacity-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-end justify-between gap-2">
|
||||
<span
|
||||
class="text-3xl font-semibold tracking-tight tabular-nums text-n-slate-12"
|
||||
>
|
||||
{{ value }}
|
||||
</span>
|
||||
<span class="text-sm font-medium tabular-nums" :class="trendClass">
|
||||
{{ trend }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute, RouterLink } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import { getHelpUrlForFeature } from 'dashboard/helper/featureHelper';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const { isOnChatwootCloud } = useAccount();
|
||||
|
||||
const assistantParams = computed(() => ({
|
||||
accountId: route.params.accountId,
|
||||
assistantId: route.params.assistantId,
|
||||
}));
|
||||
|
||||
const links = computed(() => [
|
||||
{
|
||||
key: 'docs',
|
||||
title: t('CAPTAIN.OVERVIEW.LINKS.DOCS.TITLE'),
|
||||
description: t('CAPTAIN.OVERVIEW.LINKS.DOCS.DESCRIPTION'),
|
||||
icon: 'i-lucide-book-open',
|
||||
href: getHelpUrlForFeature('captain'),
|
||||
},
|
||||
{
|
||||
key: 'playground',
|
||||
title: t('CAPTAIN.OVERVIEW.LINKS.PLAYGROUND.TITLE'),
|
||||
description: t('CAPTAIN.OVERVIEW.LINKS.PLAYGROUND.DESCRIPTION'),
|
||||
icon: 'i-lucide-flask-conical',
|
||||
to: {
|
||||
name: 'captain_assistants_playground_index',
|
||||
params: assistantParams.value,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'billing',
|
||||
title: t('CAPTAIN.OVERVIEW.LINKS.BILLING.TITLE'),
|
||||
description: t('CAPTAIN.OVERVIEW.LINKS.BILLING.DESCRIPTION'),
|
||||
icon: 'i-lucide-credit-card',
|
||||
to: {
|
||||
name: 'billing_settings_index',
|
||||
params: { accountId: route.params.accountId },
|
||||
},
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isOnChatwootCloud" class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<component
|
||||
:is="link.href ? 'a' : RouterLink"
|
||||
v-for="link in links"
|
||||
:key="link.key"
|
||||
:href="link.href"
|
||||
:to="link.to"
|
||||
:target="link.href ? '_blank' : undefined"
|
||||
:rel="link.href ? 'noopener noreferrer' : undefined"
|
||||
class="flex items-center gap-3 p-4 transition-colors border rounded-xl bg-n-solid-1 border-n-weak hover:bg-n-alpha-1 group/link"
|
||||
>
|
||||
<span
|
||||
class="grid rounded-lg size-9 shrink-0 place-content-center bg-n-alpha-2 text-n-slate-11"
|
||||
>
|
||||
<span :class="link.icon" class="size-4" />
|
||||
</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span class="text-sm font-medium text-n-slate-12">
|
||||
{{ link.title }}
|
||||
</span>
|
||||
<span class="text-xs truncate text-n-slate-11">
|
||||
{{ link.description }}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
:class="
|
||||
link.href ? 'i-lucide-arrow-up-right' : 'i-lucide-chevron-right'
|
||||
"
|
||||
class="ml-auto transition-opacity opacity-0 size-4 text-n-slate-10 group-hover/link:opacity-100"
|
||||
/>
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
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 modelValue = defineModel({ type: String, default: '30' });
|
||||
|
||||
const { t } = useI18n();
|
||||
const [showDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const DAY_RANGES = ['7', '30', '90'];
|
||||
|
||||
const decorate = item => ({
|
||||
...item,
|
||||
action: 'select',
|
||||
isSelected: item.value === modelValue.value,
|
||||
});
|
||||
|
||||
const menuSections = computed(() => {
|
||||
const dayItems = DAY_RANGES.map(value =>
|
||||
decorate({
|
||||
value,
|
||||
label: t('CAPTAIN.OVERVIEW.RANGES.LAST_DAYS', { count: value }),
|
||||
})
|
||||
);
|
||||
const monthItems = [
|
||||
decorate({
|
||||
value: 'this_month',
|
||||
label: t('CAPTAIN.OVERVIEW.RANGES.THIS_MONTH'),
|
||||
}),
|
||||
decorate({
|
||||
value: 'last_month',
|
||||
label: t('CAPTAIN.OVERVIEW.RANGES.LAST_MONTH'),
|
||||
}),
|
||||
];
|
||||
return [{ items: dayItems }, { items: monthItems }];
|
||||
});
|
||||
|
||||
const menuItems = computed(() =>
|
||||
menuSections.value.flatMap(section => section.items)
|
||||
);
|
||||
|
||||
const selectedLabel = computed(
|
||||
() => menuItems.value.find(item => item.isSelected)?.label || ''
|
||||
);
|
||||
|
||||
const handleAction = ({ value }) => {
|
||||
toggleDropdown(false);
|
||||
modelValue.value = value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group"
|
||||
>
|
||||
<Button
|
||||
sm
|
||||
slate
|
||||
faded
|
||||
trailing-icon
|
||||
icon="i-lucide-chevron-down"
|
||||
:label="selectedLabel"
|
||||
class="rounded-md group-hover:bg-n-alpha-2"
|
||||
@click="toggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showDropdown"
|
||||
:menu-sections="menuSections"
|
||||
class="mt-1 ltr:right-0 rtl:left-0 top-full"
|
||||
@action="handleAction($event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import CaptainAssistant from 'dashboard/api/captain/assistant';
|
||||
import MessageFormatter from 'shared/helpers/MessageFormatter.js';
|
||||
|
||||
const props = defineProps({
|
||||
range: {
|
||||
type: String,
|
||||
default: '30',
|
||||
},
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const assistantId = computed(() => route.params.assistantId);
|
||||
|
||||
// Markdown summary generated by the model from the assistant's stats (served by
|
||||
// the captain/assistants/:id/summary endpoint). Numbers are emphasised with
|
||||
// **bold** so we can highlight them (see prose-strong styling below).
|
||||
const welcomeMarkdown = ref('');
|
||||
const isLoading = ref(false);
|
||||
|
||||
const fetchSummary = async () => {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const { data } = await CaptainAssistant.getSummary({
|
||||
assistantId: assistantId.value,
|
||||
range: props.range,
|
||||
});
|
||||
welcomeMarkdown.value = data.message ?? '';
|
||||
} catch {
|
||||
welcomeMarkdown.value = '';
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
watch([() => props.range, assistantId], fetchSummary, { immediate: true });
|
||||
|
||||
// Render through the shared markdown formatter (html disabled, so it is safe)
|
||||
// used everywhere else for Captain output, instead of a bespoke parser. It
|
||||
// handles paragraphs, line breaks, links, lists and emphasis consistently.
|
||||
const formattedSummary = computed(
|
||||
() => new MessageFormatter(welcomeMarkdown.value).formattedMessage
|
||||
);
|
||||
</script>
|
||||
|
||||
<!-- eslint-disable-next-line vue/no-root-v-if -->
|
||||
<template>
|
||||
<div v-if="isLoading || welcomeMarkdown" class="flex flex-col gap-3">
|
||||
<div class="flex items-center gap-1.5 text-n-slate-10">
|
||||
<span class="i-lucide-sparkles size-3.5" />
|
||||
<span class="text-xs">
|
||||
{{ $t('CAPTAIN.OVERVIEW.WELCOME.LABEL') }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="flex flex-col gap-5"
|
||||
:aria-label="$t('CAPTAIN.OVERVIEW.WELCOME.LOADING')"
|
||||
>
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<div class="w-full h-5 rounded bg-n-slate-3 animate-pulse" />
|
||||
<div class="w-11/12 h-5 rounded bg-n-slate-3 animate-pulse" />
|
||||
<div class="w-4/6 h-5 rounded bg-n-slate-3 animate-pulse" />
|
||||
</div>
|
||||
<div class="w-5/6 h-5 rounded bg-n-slate-3 animate-pulse" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
v-dompurify-html="formattedSummary"
|
||||
class="max-w-none prose prose-p:text-lg prose-p:leading-relaxed prose-p:mt-0 prose-p:mb-3 last:prose-p:mb-0 prose-strong:font-bold prose-strong:tabular-nums prose-strong:text-n-brand text-n-slate-12"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
+1
-1
@@ -65,7 +65,7 @@ const handleAssistantChange = async assistant => {
|
||||
|
||||
const currentRouteName = route.name;
|
||||
const targetRouteName =
|
||||
currentRouteName || 'captain_assistants_responses_index';
|
||||
currentRouteName || 'captain_assistants_overview_index';
|
||||
|
||||
await fetchDataForRoute(targetRouteName, assistant.id);
|
||||
|
||||
|
||||
@@ -440,6 +440,14 @@ const menuItems = computed(() => {
|
||||
label: t('SIDEBAR.CAPTAIN'),
|
||||
activeOn: ['captain_assistants_create_index'],
|
||||
children: [
|
||||
{
|
||||
name: 'Overview',
|
||||
label: t('SIDEBAR.CAPTAIN_OVERVIEW'),
|
||||
activeOn: ['captain_assistants_overview_index'],
|
||||
to: accountScopedRoute('captain_assistants_index', {
|
||||
navigationPath: 'captain_assistants_overview_index',
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'FAQs',
|
||||
label: t('SIDEBAR.CAPTAIN_RESPONSES'),
|
||||
|
||||
Reference in New Issue
Block a user