import { Head, usePage } from '@inertiajs/react'; import { useState, useRef, useEffect } from 'react'; import { Sparkles, Send, TrendingUp, TrendingDown, Lightbulb } from 'lucide-react'; type Artifact = { type: string; metric?: string; value?: number | null; unit?: string; period?: { start: string; end: string }; source?: string; freshness?: string; current?: number | null; previous?: number | null; change_percent?: number | null; }; type Msg = { role: string; content: string; artifacts?: Artifact[] | null }; type Suggestion = { label: string; prompt: string }; function fmt(v: number | null | undefined, unit = 'number') { if (v === null || v === undefined) return '—'; if (unit === 'currency') return '$' + v.toLocaleString(undefined, { maximumFractionDigits: 0 }); if (unit === 'percent') return v + '%'; return v.toLocaleString(); } export default function AiAnalyst() { const props = usePage().props as unknown as { conversation?: { id: number; messages: Msg[] }; suggestions?: Suggestion[]; }; const suggestions = props.suggestions ?? []; const [messages, setMessages] = useState(props.conversation?.messages ?? []); const [convId, setConvId] = useState(props.conversation?.id ?? null); const [input, setInput] = useState(''); const [busy, setBusy] = useState(false); const endRef = useRef(null); useEffect(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages, busy]); async function send(text?: string) { const message = (text ?? input).trim(); if (!message || busy) return; setInput(''); setMessages((m) => [...m, { role: 'user', content: message }]); setBusy(true); try { const res = await fetch('/ai/ask', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') as HTMLMetaElement)?.content ?? '', 'X-Requested-With': 'XMLHttpRequest', }, body: JSON.stringify({ message, conversation_id: convId }), }); if (res.status === 429) { setMessages((m) => [...m, { role: 'assistant', content: 'Your organization has reached its daily AI usage limit.' }]); } else if (!res.ok) { setMessages((m) => [...m, { role: 'assistant', content: 'The analyst is unavailable. Check that an AI key is set in Integration Settings.' }]); } else { const data = await res.json(); setConvId(data.conversation_id); setMessages((m) => [...m, { role: 'assistant', content: data.answer.content, artifacts: data.answer.artifacts }]); } } catch { setMessages((m) => [...m, { role: 'assistant', content: 'Something went wrong reaching the analyst. Please try again.' }]); } finally { setBusy(false); } } return ( <>
{messages.length === 0 ? (

Ask your data anything

Answers come only from your governed metrics — with exact periods and sources, never guessed.

{suggestions.length > 0 && (

Try one of these

{suggestions.map((s) => ( ))}
)}
) : (
{messages.map((m, i) => (

{m.content}

{m.artifacts?.map((a, j) => )}
))} {busy &&
Analyzing…
}
)}
{messages.length > 0 && suggestions.length > 0 && (
{suggestions.slice(0, 4).map((s) => ( ))}
)}