Janady13/missionmatch / frontend/src/tools/missionmatch/Ask.tsx

1import { useState } from 'react' 2import { BrainCircuit, BookOpen, CornerDownLeft, Info, Loader2, Sparkles } from 'lucide-react' 3import { missionApi } from './api' 4import { missionBrand } from './brand' 5import { ApiError } from '../../lib/api' 6import { Badge, Panel } from '../../components/ui' 7import { ToolHeader } from '../../components/ToolHeader' 8import type { AskAnswer } from '../../lib/types' 9 10// Example prompts map to real registered intents and the seeded demo data, so the first click always 11// returns a grounded answer. Clicking a chip fills the input; the user still presses Ask to send it. 12const EXAMPLES = [ 13 'How many candidates hold a TS/SCI clearance?', 14 'What are our hardest staffing gaps right now?', 15 'Who can support the Intelligence Analyst mission?', 16 'What is the win probability on the Air Force segment?', 17 'Show the clearance coverage of our bench.', 18 'Which vendors perform best on our submissions?', 19] 20 21// pathLabel names each retrieval route in plain words for the answer badge. 22const PATH_LABEL: Record<AskAnswer['path'], string> = { 23 cag: 'Closed answer', 24 tag: 'Tool answer', 25 rag: 'Retrieval', 26 graph: 'Graph walk', 27} 28 29// The Ask panel is the UI over the closed Registry AI brain. The brain answers only from the tenant's 30// own cleared data, cites its evidence, and refuses questions about protected attributes or out of scope 31// questions. A refusal is a normal outcome the panel renders calmly, never an error. 32export function Ask() { 33 const [question, setQuestion] = useState('') 34 const [loading, setLoading] = useState(false) 35 const [answer, setAnswer] = useState<AskAnswer | null>(null) 36 // A refusal is the brain's calm decline (HTTP 422). errorLine is a generic friendly line for any other 37 // failure. The two are kept separate so a refusal never reads as a crash. 38 const [refusal, setRefusal] = useState<string | null>(null) 39 const [errorLine, setErrorLine] = useState<string | null>(null) 40 41 const trimmed = question.trim() 42 const canAsk = trimmed.length > 0 && !loading 43 44 async function submit() { 45 if (!canAsk) return 46 setLoading(true) 47 setAnswer(null) 48 setRefusal(null) 49 setErrorLine(null) 50 try { 51 const res = await missionApi.ask(trimmed) 52 setAnswer(res) 53 } catch (err) { 54 // A refused question returns 422 with an error body. Treat it as an expected, calm decline. 55 if (err instanceof ApiError && err.status === 422) { 56 setRefusal(err.message || 'That question is out of scope for the mission brain.') 57 } else { 58 setErrorLine('Something went wrong reaching the mission brain. Please try again.') 59 } 60 } finally { 61 setLoading(false) 62 } 63 } 64 65 function onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) { 66 // Enter with a modifier sends, so a plain Enter can still add a newline in a longer question. 67 if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { 68 e.preventDefault() 69 void submit() 70 } 71 } 72 73 return ( 74 <div className="mx-auto max-w-3xl space-y-4"> 75 <ToolHeader name={missionBrand.name} tagline={missionBrand.tagline} accent={missionBrand.accent} /> 76 77 <div className="flex items-center gap-2"> 78 <BrainCircuit size={18} className="text-gold" /> 79 <h2 className="text-lg font-bold tracking-tight">Ask the Brain™</h2> 80 </div> 81 <p className="text-sm text-muted"> 82 This is the grounded mission brain. It answers from your tenant's own cleared data and cites the 83 evidence behind every answer. 84 </p> 85 86 <Panel> 87 <label htmlFor="ask-input" className="sr-only"> 88 Ask the mission brain a question 89 </label> 90 <textarea 91 id="ask-input" 92 value={question} 93 onChange={(e) => setQuestion(e.target.value)} 94 onKeyDown={onKeyDown} 95 rows={3} 96 placeholder="Ask about your bench, your gaps, your win probability, or your incumbents." 97 className="w-full resize-y rounded-lg border border-line/70 bg-navy-950/60 px-3 py-2.5 text-sm text-ink outline-none placeholder:text-faint focus:border-blue/70" 98 /> 99 <div className="mt-2 flex items-center justify-between gap-3"> 100 <span className="text-[11px] text-faint"> 101 Press Ask, or Command plus Enter, to send. 102 </span> 103 <button 104 onClick={() => void submit()} 105 disabled={!canAsk} 106 className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50" 107 > 108 {loading ? <Loader2 size={15} className="animate-spin" /> : <CornerDownLeft size={15} />} 109 {loading ? 'Thinking…' : 'Ask'} 110 </button> 111 </div> 112 113 {/* Example prompt chips, mapped to real registered intents and the seeded demo data. */} 114 <div className="mt-3 flex flex-wrap gap-1.5 border-t border-line/50 pt-3"> 115 <span className="mr-1 flex items-center gap-1 text-[11px] font-semibold uppercase tracking-wide text-faint"> 116 <Sparkles size={12} /> Try 117 </span> 118 {EXAMPLES.map((ex) => ( 119 <button 120 key={ex} 121 type="button" 122 onClick={() => setQuestion(ex)} 123 disabled={loading} 124 className="rounded-full border border-line/70 bg-navy-800/50 px-3 py-1 text-[11px] text-blue-soft hover:border-blue/60 hover:text-ink disabled:opacity-50" 125 > 126 {ex} 127 </button> 128 ))} 129 </div> 130 </Panel> 131 132 {loading && ( 133 <Panel className="grid place-items-center py-10 text-muted"> 134 <Loader2 size={22} className="animate-spin" /> 135 <span className="mt-2 text-sm">Grounding the answer in your cleared data…</span> 136 </Panel> 137 )} 138 139 {refusal && !loading && ( 140 <Panel> 141 <div className="flex items-start gap-2.5 text-sm text-muted"> 142 <Info size={16} className="mt-0.5 shrink-0 text-blue-soft" /> 143 <div> 144 <div className="font-semibold text-ink">The mission brain declined this question.</div> 145 <p className="mt-0.5">{refusal}</p> 146 </div> 147 </div> 148 </Panel> 149 )} 150 151 {errorLine && !loading && ( 152 <Panel> 153 <p className="text-sm text-warn">{errorLine}</p> 154 </Panel> 155 )} 156 157 {answer && !loading && <AnswerCard answer={answer} />} 158 </div> 159 ) 160} 161 162// AnswerCard renders the grounded answer prose, a labeled route badge and a faithful chip, the evidence 163// count, and the citations the brain grounded on. When there are no citations the grounding section is 164// omitted rather than shown empty. 165function AnswerCard({ answer }: { answer: AskAnswer }) { 166 return ( 167 <Panel> 168 <div className="flex flex-wrap items-center gap-2"> 169 <Badge color="var(--color-blue-soft)" subtle> 170 {PATH_LABEL[answer.path]} 171 </Badge> 172 <Badge color={answer.faithful ? 'var(--color-gold)' : 'var(--color-warn)'} subtle> 173 {answer.faithful ? 'Faithful to evidence' : 'Not fully grounded'} 174 </Badge> 175 <span className="text-[11px] text-faint"> 176 {answer.evidence_count} evidence {answer.evidence_count === 1 ? 'row' : 'rows'} 177 </span> 178 </div> 179 180 <p className="mt-3 whitespace-pre-wrap text-sm leading-relaxed text-ink">{answer.answer}</p> 181 182 {answer.fallback_reason && ( 183 <p className="mt-2 text-[11px] text-faint">Note: {answer.fallback_reason}</p> 184 )} 185 186 {answer.citations.length > 0 && ( 187 <div className="mt-4 border-t border-line/50 pt-3"> 188 <div className="mb-1.5 flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-muted"> 189 <BookOpen size={13} /> Grounded on 190 </div> 191 <ul className="space-y-1"> 192 {/* Keyed on the citation itself, not its position. The whole answer is replaced on every 193 ask, so an index key lets React reuse the previous answer's row for a different source. */} 194 {answer.citations.map((c) => ( 195 <li key={c} className="font-mono text-[11px] text-faint"> 196 {c} 197 </li> 198 ))} 199 </ul> 200 </div> 201 )} 202 </Panel> 203 ) 204} 205