import { Head, Link, router } from '@inertiajs/react'; import { CheckCircle2, Lightbulb, Plus, XCircle } from 'lucide-react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import type { BreadcrumbItem } from '@/types'; type Gap = { id: string; agent_id: string; question: string; occurrences: number; last_seen_at: string | null; status: 'open' | 'answered' | 'ignored'; }; type AgentRef = { id: string; name: string }; type Filters = { agent_id: string; status: 'open' | 'answered' | 'ignored' | string; window: '7' | '30' | '90' | 'all' | string; }; type Props = { gaps: Gap[]; agents: AgentRef[]; filters: Filters; }; const ANY_AGENT = '__any__'; const STATUS_STYLES: Record = { open: 'border-amber-200 bg-amber-500/15 text-amber-800 dark:text-amber-300', answered: 'border-emerald-200 bg-emerald-500/15 text-emerald-800 dark:text-emerald-300', ignored: 'border-border bg-muted text-muted-foreground', }; export default function ContentGaps({ gaps, agents, filters }: Props) { const { t } = useT(); const [draft, setDraft] = useState(filters); const agentById = new Map(agents.map((a) => [a.id, a])); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Analytics'), href: '/app/analytics' }, { title: t('Content gaps'), href: '/app/analytics/content-gaps' }, ]; const apply = (overrides: Partial = {}) => { const merged = { ...draft, ...overrides }; const params: Record = {}; (Object.keys(merged) as (keyof Filters)[]).forEach((key) => { const v = merged[key]; if (typeof v === 'string' && v.trim() !== '') { params[key] = v; } }); router.get('/app/analytics/content-gaps', params, { preserveScroll: true, preserveState: true, }); }; const resolve = (gap: Gap, action: 'answered' | 'ignore') => { router.post( `/app/analytics/gaps/${gap.id}/resolve`, { action }, { preserveScroll: true }, ); }; return (

{t('Content gaps')}

{t( "Questions visitors asked that the agent couldn't answer well — your top opportunities to add curated answers or new sources.", )}

{gaps.length === 0 ? (

{t( "No gaps match the current filters. Either visitors aren't asking unanswerable questions, or your team has already triaged them.", )}

) : (
{gaps.map((g) => { const agent = agentById.get(g.agent_id); const curatedHref = agent ? `/app/agents/${agent.id}/curated?prefill=${encodeURIComponent(g.question)}` : null; return (

{g.question}

{agent && ( {agent.name} )} {t('asked :count times', { count: g.occurrences, })} {g.last_seen_at && ( <> {' '} {t('· last :time', { time: new Date( g.last_seen_at, ).toLocaleString(), })} )}

{t(g.status)} {g.status === 'open' && ( <> {curatedHref && ( )} )}
); })}
)}
); }