789 lines
31 KiB
TypeScript
789 lines
31 KiB
TypeScript
import { useRef, useEffect, useCallback, useState } from 'react';
|
|
import { Topbar } from '../../components/layout/Topbar';
|
|
import { Send, Download, Zap, Paperclip, X, FileText, AlertCircle } from 'lucide-react';
|
|
import { usePageState } from '../../contexts';
|
|
import type { RagCitation } from '../../contexts';
|
|
import { useLanguage } from '../../contexts/LanguageContext';
|
|
import { agenticChat } from '../../api/rag';
|
|
import type { SSEMessage } from '../../api/index';
|
|
|
|
const TOKEN_KEY = 'auth_token';
|
|
function authHeader(): Record<string, string> {
|
|
const t = localStorage.getItem(TOKEN_KEY);
|
|
return t ? { Authorization: `Bearer ${t}` } : {};
|
|
}
|
|
|
|
// ── Document context state ─────────────────────────────────────────────────────
|
|
|
|
interface DocContext {
|
|
filename: string;
|
|
text: string;
|
|
charCount: number;
|
|
truncated: boolean;
|
|
/** 'extracting' while the backend is parsing; 'ready' when text is available; 'error' on failure */
|
|
status: 'extracting' | 'ready' | 'error';
|
|
errorMsg?: string;
|
|
}
|
|
|
|
// ── Agentic-mode types ────────────────────────────────────────────────────────
|
|
|
|
interface ThinkingStep {
|
|
id: string;
|
|
step: string;
|
|
status: 'running' | 'done';
|
|
intent_type?: string;
|
|
reason?: string;
|
|
requires_decomposition?: boolean;
|
|
sub_queries?: string[];
|
|
query?: string;
|
|
index?: number;
|
|
total?: number;
|
|
found?: number;
|
|
sufficient?: boolean;
|
|
confidence?: number;
|
|
retry?: boolean;
|
|
}
|
|
|
|
const STEP_ICONS: Record<string, string> = {
|
|
intent_analysis: '🔍',
|
|
query_planning: '📋',
|
|
retrieving: '📚',
|
|
grounding_check: '🔗',
|
|
};
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
|
|
// Map a raw source doc from the backend "retrieved" event to our Citation shape.
|
|
function mapSource(s: Record<string, unknown>, idx: number): RagCitation {
|
|
const rawScore = typeof s.score === 'number' ? s.score : 0;
|
|
const displayScore = rawScore <= 1 ? Math.round(rawScore * 100) : Math.round(rawScore);
|
|
return {
|
|
index: idx,
|
|
score: displayScore,
|
|
name: String(s.doc_name ?? ''),
|
|
clause: String(s.clause ?? s.section_title ?? ''),
|
|
snippet: String(s.preview ?? s.text ?? ''),
|
|
docId: s.doc_id ? String(s.doc_id) : undefined,
|
|
};
|
|
}
|
|
|
|
// Parse message text and replace [N] with clickable <button class="cite-ref"> elements.
|
|
function renderWithCitations(
|
|
text: string,
|
|
onCiteClick: (n: number) => void,
|
|
): React.ReactNode[] {
|
|
const parts = text.split(/(\[\d+\])/g);
|
|
return parts.map((part, i) => {
|
|
const m = part.match(/^\[(\d+)\]$/);
|
|
if (m) {
|
|
const n = parseInt(m[1], 10);
|
|
return (
|
|
<button
|
|
key={i}
|
|
className="cite-ref"
|
|
onClick={() => onCiteClick(n)}
|
|
title={`Jump to source [${n}]`}
|
|
>
|
|
{n}
|
|
</button>
|
|
);
|
|
}
|
|
return part;
|
|
});
|
|
}
|
|
|
|
const MOCK_QUICK = [
|
|
'What does EU AI Act Art. 9 require for risk management?',
|
|
'Which documents need CSMS certification?',
|
|
'Summarize MIIT training data rules',
|
|
'What are high-risk AI categories under Annex III?',
|
|
];
|
|
|
|
export function RagChatPage() {
|
|
// All persistent state lives in PageStateContext — survives route changes
|
|
const { ragState, setRagState, ragStreamingRef, ragAbortRef } = usePageState();
|
|
const { t } = useLanguage();
|
|
const { messages, citations, sessionId, inputDraft } = ragState;
|
|
|
|
// Local-only UI state: highlighted citation and streaming indicator
|
|
// These are fine to reset on navigation since they're transient UI feedback
|
|
const [highlightedCit, setHighlightedCit] = useState<number | null>(null);
|
|
const [streaming, setStreaming] = useState(ragStreamingRef.current);
|
|
const [quickPrompts, setQuickPrompts] = useState<string[]>(MOCK_QUICK);
|
|
|
|
// P0-1 Agentic mode state
|
|
const [agenticMode, setAgenticMode] = useState(false);
|
|
const [thinkingSteps, setThinkingSteps] = useState<ThinkingStep[]>([]);
|
|
const [thinkingExpanded, setThinkingExpanded] = useState(true);
|
|
|
|
// ── Document context state ─────────────────────────────────────────────────
|
|
// Holds the extracted text from the attached file; sent to the backend as
|
|
// conversation context on every message while it is set.
|
|
const [docContext, setDocContext] = useState<DocContext | null>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const bottomRef = useRef<HTMLDivElement>(null);
|
|
const citRailRef = useRef<HTMLDivElement>(null);
|
|
const citItemRefs = useRef<Record<number, HTMLDivElement | null>>({});
|
|
|
|
// ── Document context helpers ───────────────────────────────────────────────
|
|
|
|
/** Upload file to /rag/upload-context, extract its text, store as context. */
|
|
async function handleFileAttach(file: File) {
|
|
setDocContext({ filename: file.name, text: '', charCount: 0, truncated: false, status: 'extracting' });
|
|
|
|
const fd = new FormData();
|
|
fd.append('file', file);
|
|
|
|
try {
|
|
const res = await fetch('/api/v1/rag/upload-context', {
|
|
method: 'POST',
|
|
headers: authHeader(),
|
|
body: fd,
|
|
});
|
|
if (!res.ok) {
|
|
const errText = await res.text().catch(() => t.ragchat.attachErrorMsg);
|
|
setDocContext(prev => prev ? { ...prev, status: 'error', errorMsg: errText.slice(0, 120) } : null);
|
|
return;
|
|
}
|
|
const data = await res.json();
|
|
setDocContext({
|
|
filename: data.filename ?? file.name,
|
|
text: data.text ?? '',
|
|
charCount: data.char_count ?? 0,
|
|
truncated: data.truncated ?? false,
|
|
status: 'ready',
|
|
});
|
|
} catch (err) {
|
|
setDocContext(prev => prev
|
|
? { ...prev, status: 'error', errorMsg: String(err).slice(0, 120) }
|
|
: null
|
|
);
|
|
}
|
|
}
|
|
|
|
function handleFileInputChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const file = e.target.files?.[0];
|
|
if (file) void handleFileAttach(file);
|
|
// Reset so the same file can be re-selected
|
|
e.target.value = '';
|
|
}
|
|
|
|
function handleFileDrop(e: React.DragEvent<HTMLDivElement>) {
|
|
e.preventDefault();
|
|
const file = Array.from(e.dataTransfer.files).find(f =>
|
|
/\.(pdf|docx?|txt|md)$/i.test(f.name)
|
|
);
|
|
if (file) void handleFileAttach(file);
|
|
}
|
|
|
|
// Fetch quick questions from backend on mount (only once per session)
|
|
useEffect(() => {
|
|
fetch('/api/v1/rag/quick-questions', { headers: authHeader() })
|
|
.then(r => r.json())
|
|
.then(d => {
|
|
if (Array.isArray(d?.questions) && d.questions.length > 0) {
|
|
setQuickPrompts(d.questions.map((q: { question: string }) => q.question));
|
|
}
|
|
})
|
|
.catch(() => { /* keep mock */ });
|
|
}, []);
|
|
|
|
// Auto-scroll to latest message
|
|
useEffect(() => {
|
|
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
}, [messages]);
|
|
|
|
// Jump to citation N in the rail and highlight it
|
|
const jumpToCitation = useCallback((n: number) => {
|
|
setHighlightedCit(n);
|
|
const el = citItemRefs.current[n];
|
|
if (el) {
|
|
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
}
|
|
setTimeout(() => setHighlightedCit(h => h === n ? null : h), 3000);
|
|
}, []);
|
|
|
|
async function send(text?: string) {
|
|
const q = (text ?? inputDraft).trim();
|
|
// Block send while a document is still being extracted
|
|
if (!q || ragStreamingRef.current || docContext?.status === 'extracting') return;
|
|
|
|
setRagState(s => ({ ...s, inputDraft: '' }));
|
|
|
|
// Show document context badge in user message bubble when active
|
|
const docPrefix = docContext?.status === 'ready'
|
|
? `📄 ${docContext.filename}\n`
|
|
: '';
|
|
const displayQuery = docPrefix + q;
|
|
|
|
const userMsgId = Date.now().toString();
|
|
const assistantId = (Date.now() + 1).toString();
|
|
|
|
setRagState(s => ({
|
|
...s,
|
|
messages: [
|
|
...s.messages,
|
|
{ id: userMsgId, role: 'user', text: displayQuery },
|
|
{ id: assistantId, role: 'assistant', text: '' },
|
|
],
|
|
citations: [],
|
|
}));
|
|
|
|
ragStreamingRef.current = true;
|
|
setStreaming(true);
|
|
setHighlightedCit(null);
|
|
|
|
// P0-1: reset thinking panel for new query
|
|
if (agenticMode) {
|
|
setThinkingSteps([]);
|
|
setThinkingExpanded(true);
|
|
}
|
|
|
|
const ctrl = new AbortController();
|
|
ragAbortRef.current = ctrl;
|
|
|
|
if (agenticMode) {
|
|
// ── Agentic path ────────────────────────────────────────────────────
|
|
const newCitations: RagCitation[] = [];
|
|
|
|
const handleMessage = (msg: SSEMessage) => {
|
|
if (msg.type === 'session') {
|
|
if (msg.session_id) setRagState(s => ({ ...s, sessionId: msg.session_id! }));
|
|
|
|
} else if (msg.type === 'thinking') {
|
|
// Build a stable step id so we can upsert running→done transitions.
|
|
const stepId = `${msg.step}-${msg.retry ? 'retry' : (msg.index ?? 0)}`;
|
|
setThinkingSteps(prev => {
|
|
const idx = prev.findIndex(s => s.id === stepId);
|
|
const stepObj: ThinkingStep = {
|
|
id: stepId,
|
|
step: msg.step ?? '',
|
|
status: (msg.status as 'running' | 'done') ?? 'running',
|
|
intent_type: msg.intent_type,
|
|
reason: msg.reason,
|
|
sub_queries: msg.sub_queries,
|
|
query: msg.query,
|
|
index: msg.index,
|
|
total: msg.total,
|
|
found: msg.found,
|
|
sufficient: msg.sufficient,
|
|
confidence: msg.confidence,
|
|
retry: msg.retry,
|
|
};
|
|
if (idx >= 0) {
|
|
const updated = [...prev];
|
|
updated[idx] = stepObj;
|
|
return updated;
|
|
}
|
|
return [...prev, stepObj];
|
|
});
|
|
|
|
} else if (msg.type === 'retrieved' && Array.isArray(msg.docs)) {
|
|
const mapped = (msg.docs as unknown as Record<string, unknown>[]).map((d, i) => mapSource(d, i + 1));
|
|
newCitations.push(...mapped);
|
|
setRagState(s => ({ ...s, citations: [...mapped] }));
|
|
|
|
} else if (msg.type === 'chunk' && msg.text) {
|
|
setRagState(s => ({
|
|
...s,
|
|
messages: s.messages.map(m =>
|
|
m.id === assistantId ? { ...m, text: m.text + msg.text! } : m
|
|
),
|
|
}));
|
|
|
|
} else if (msg.type === 'done') {
|
|
setThinkingExpanded(false);
|
|
setRagState(s => ({
|
|
...s,
|
|
messages: s.messages.map(m => {
|
|
if (m.id !== assistantId) return m;
|
|
const refs = [...new Set(
|
|
[...m.text.matchAll(/\[(\d+)\]/g)].map(r => parseInt(r[1], 10))
|
|
)].filter(n => n >= 1 && n <= newCitations.length);
|
|
return { ...m, citationRefs: refs };
|
|
}),
|
|
}));
|
|
|
|
} else if (msg.type === 'error') {
|
|
setRagState(s => ({
|
|
...s,
|
|
messages: s.messages.map(m =>
|
|
m.id === assistantId ? { ...m, text: `Error: ${msg.text ?? 'Unknown error'}` } : m
|
|
),
|
|
}));
|
|
}
|
|
};
|
|
|
|
try {
|
|
await agenticChat(
|
|
q, 5, handleMessage,
|
|
(err) => {
|
|
setRagState(s => ({
|
|
...s,
|
|
messages: s.messages.map(m =>
|
|
m.id === assistantId ? { ...m, text: t.ragchat.apiError } : m
|
|
),
|
|
}));
|
|
console.error('agenticChat error:', err);
|
|
},
|
|
undefined,
|
|
undefined,
|
|
sessionId ?? undefined,
|
|
ctrl.signal,
|
|
// Pass document context to agentic pipeline
|
|
docContext?.status === 'ready' ? docContext.text : undefined,
|
|
docContext?.status === 'ready' ? docContext.filename : undefined,
|
|
);
|
|
} finally {
|
|
ragStreamingRef.current = false;
|
|
setStreaming(false);
|
|
}
|
|
|
|
} else {
|
|
// ── Standard RAG path (unchanged) ───────────────────────────────────
|
|
try {
|
|
const body: Record<string, unknown> = { query: q, top_k: 5 };
|
|
if (sessionId) body.session_id = sessionId;
|
|
// Inject document text as conversation context when a file is attached
|
|
if (docContext?.status === 'ready') {
|
|
body.context_text = docContext.text;
|
|
body.context_filename = docContext.filename;
|
|
}
|
|
|
|
const res = await fetch('/api/v1/rag/chat', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', ...authHeader() },
|
|
body: JSON.stringify(body),
|
|
signal: ctrl.signal,
|
|
});
|
|
|
|
if (!res.body) throw new Error('No stream');
|
|
const reader = res.body.getReader();
|
|
const dec = new TextDecoder();
|
|
let buffer = '';
|
|
const newCitations: RagCitation[] = [];
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
buffer += dec.decode(value, { stream: true });
|
|
|
|
const blocks = buffer.split('\n\n');
|
|
buffer = blocks.pop() ?? '';
|
|
|
|
for (const block of blocks) {
|
|
const dataLine = block.split('\n').find(l => l.startsWith('data: '));
|
|
if (!dataLine) continue;
|
|
const raw = dataLine.slice(6).trim();
|
|
if (!raw) continue;
|
|
try {
|
|
const j = JSON.parse(raw);
|
|
|
|
if (j.type === 'session') {
|
|
if (j.session_id) setRagState(s => ({ ...s, sessionId: j.session_id }));
|
|
|
|
} else if (j.type === 'retrieved' && Array.isArray(j.docs)) {
|
|
const mapped = j.docs.map((d: Record<string, unknown>, i: number) => mapSource(d, i + 1));
|
|
newCitations.push(...mapped);
|
|
setRagState(s => ({ ...s, citations: [...mapped] }));
|
|
|
|
} else if (j.type === 'chunk' && j.text) {
|
|
setRagState(s => ({
|
|
...s,
|
|
messages: s.messages.map(msg =>
|
|
msg.id === assistantId
|
|
? { ...msg, text: msg.text + (j.text as string) }
|
|
: msg
|
|
),
|
|
}));
|
|
|
|
} else if (j.type === 'done') {
|
|
setRagState(s => ({
|
|
...s,
|
|
messages: s.messages.map(msg => {
|
|
if (msg.id !== assistantId) return msg;
|
|
const refs = [...new Set(
|
|
[...msg.text.matchAll(/\[(\d+)\]/g)].map(r => parseInt(r[1], 10))
|
|
)].filter(n => n >= 1 && n <= newCitations.length);
|
|
return { ...msg, citationRefs: refs };
|
|
}),
|
|
}));
|
|
break;
|
|
|
|
} else if (j.type === 'error') {
|
|
setRagState(s => ({
|
|
...s,
|
|
messages: s.messages.map(msg =>
|
|
msg.id === assistantId
|
|
? { ...msg, text: `Error: ${j.text ?? 'Unknown error'}` }
|
|
: msg
|
|
),
|
|
}));
|
|
}
|
|
} catch { /* malformed JSON chunk, skip */ }
|
|
}
|
|
}
|
|
} catch (e: unknown) {
|
|
if (e instanceof Error && e.name !== 'AbortError') {
|
|
setRagState(s => ({
|
|
...s,
|
|
messages: s.messages.map(msg =>
|
|
msg.id === assistantId
|
|
? { ...msg, text: t.ragchat.apiError }
|
|
: msg
|
|
),
|
|
}));
|
|
}
|
|
} finally {
|
|
ragStreamingRef.current = false;
|
|
setStreaming(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
const lastAssistantId = [...messages].reverse().find(m => m.role === 'assistant')?.id;
|
|
|
|
return (
|
|
<div className="chat-page">
|
|
<Topbar
|
|
title={t.ragchat.topbarTitle}
|
|
actions={
|
|
<button
|
|
className="btn sm"
|
|
onClick={() => {
|
|
const text = messages.map(m => `${m.role === 'user' ? 'Q' : 'A'}: ${m.text}`).join('\n\n');
|
|
const blob = new Blob([text], { type: 'text/plain' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a'); a.href = url; a.download = 'chat-export.txt'; a.click();
|
|
URL.revokeObjectURL(url);
|
|
}}
|
|
>
|
|
<Download size={13} />{t.ragchat.exportBtn}
|
|
</button>
|
|
}
|
|
/>
|
|
|
|
<div className="chat-body">
|
|
{/* ── History pane ── */}
|
|
<div className="history-pane">
|
|
<div className="history-header">{t.ragchat.quickPromptsHeader}</div>
|
|
{quickPrompts.map(q => (
|
|
<button key={q} className="quick-item" onClick={() => send(q)}>
|
|
{q}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* ── Chat main ── */}
|
|
<div className="chat-main">
|
|
{/* P0-1: Agentic Thinking Panel — shown when agentic mode is active */}
|
|
{agenticMode && thinkingSteps.length > 0 && (
|
|
<div style={{
|
|
margin: '0 0 4px 0',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: 8,
|
|
background: streaming ? 'var(--surface)' : 'var(--surface-2, var(--surface))',
|
|
overflow: 'hidden',
|
|
transition: 'max-height 0.4s ease',
|
|
flexShrink: 0,
|
|
}}>
|
|
{/* Panel header — clickable to collapse/expand */}
|
|
<button
|
|
onClick={() => setThinkingExpanded(x => !x)}
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
padding: '6px 12px',
|
|
background: 'none',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
fontSize: 12,
|
|
color: streaming ? 'var(--accent, #6366f1)' : 'var(--success-fg, #16a34a)',
|
|
textAlign: 'left',
|
|
}}
|
|
>
|
|
<span>{streaming ? '⚙' : '✓'}</span>
|
|
<span style={{ fontWeight: 600 }}>
|
|
{streaming
|
|
? t.ragchat.agentThinking
|
|
: `${t.ragchat.agentDone} · ${thinkingSteps.filter(s => s.status === 'done').length} ${t.ragchat.stepSuffix}`
|
|
}
|
|
</span>
|
|
<span style={{ marginLeft: 'auto', fontSize: 10 }}>{thinkingExpanded ? '▲' : '▼'}</span>
|
|
</button>
|
|
{/* Step list */}
|
|
{thinkingExpanded && (
|
|
<div style={{ padding: '0 12px 8px' }}>
|
|
{thinkingSteps.map(step => {
|
|
const stepLabels: Record<string, string> = {
|
|
intent_analysis: t.ragchat.stepIntentAnalysis,
|
|
query_planning: t.ragchat.stepQueryPlanning,
|
|
retrieving: t.ragchat.stepRetrieving,
|
|
grounding_check: t.ragchat.stepGrounding,
|
|
};
|
|
const intentLabels: Record<string, string> = {
|
|
simple_qa: t.ragchat.intentSimpleQa,
|
|
compare: t.ragchat.intentCompare,
|
|
multi_hop: t.ragchat.intentMultiHop,
|
|
ambiguous: t.ragchat.intentAmbiguous,
|
|
};
|
|
return (
|
|
<div key={step.id} style={{
|
|
display: 'flex',
|
|
alignItems: 'flex-start',
|
|
gap: 6,
|
|
fontSize: 12,
|
|
padding: '3px 0',
|
|
color: step.status === 'done' ? 'var(--fg)' : 'var(--muted)',
|
|
}}>
|
|
<span style={{ width: 16, textAlign: 'center', flexShrink: 0 }}>
|
|
{step.status === 'running'
|
|
? <span style={{ animation: 'spin 1s linear infinite', display: 'inline-block' }}>⟳</span>
|
|
: (STEP_ICONS[step.step] ?? '·')
|
|
}
|
|
</span>
|
|
<span>
|
|
<strong>{stepLabels[step.step] ?? step.step}</strong>
|
|
{/* Intent analysis detail */}
|
|
{step.step === 'intent_analysis' && step.status === 'done' && step.intent_type && (
|
|
<span style={{ marginLeft: 6, color: 'var(--muted)' }}>
|
|
→ {intentLabels[step.intent_type] ?? step.intent_type}
|
|
{step.requires_decomposition && ` · ${t.ragchat.intentNeedsDecomposition}`}
|
|
</span>
|
|
)}
|
|
{/* Query planning detail */}
|
|
{step.step === 'query_planning' && step.status === 'done' && step.sub_queries && (
|
|
<span style={{ marginLeft: 6, color: 'var(--muted)' }}>
|
|
→ {step.sub_queries.length} {t.ragchat.subQueriesCountSuffix}
|
|
</span>
|
|
)}
|
|
{/* Retrieval detail */}
|
|
{step.step === 'retrieving' && (
|
|
<span style={{ marginLeft: 6, color: 'var(--muted)', wordBreak: 'break-all' }}>
|
|
{step.total && step.total > 1 && `[${step.index}/${step.total}] `}
|
|
{step.retry && t.ragchat.retryLabel}
|
|
{step.query && step.query.length > 50
|
|
? step.query.slice(0, 50) + '…'
|
|
: step.query}
|
|
{step.status === 'done' && step.found !== undefined && (
|
|
<span style={{ color: step.found > 0 ? 'var(--success-fg, #16a34a)' : 'var(--warning, #ca8a04)' }}>
|
|
{' '}· {step.found} {t.ragchat.chunksFoundSuffix}
|
|
</span>
|
|
)}
|
|
</span>
|
|
)}
|
|
{/* Grounding check detail */}
|
|
{step.step === 'grounding_check' && step.status === 'done' && (
|
|
<span style={{ marginLeft: 6, color: step.sufficient ? 'var(--success-fg, #16a34a)' : 'var(--warning, #ca8a04)' }}>
|
|
→ {step.sufficient ? t.ragchat.groundingSufficient : t.ragchat.groundingInsufficient}
|
|
{step.confidence !== undefined && ` (${Math.round(step.confidence * 100)}%)`}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Messages area — accepts drag-and-drop document context attachment */}
|
|
<div
|
|
className="messages"
|
|
onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }}
|
|
onDrop={handleFileDrop}
|
|
>
|
|
{messages.map(msg => (
|
|
<div key={msg.id} className={`message msg-${msg.role}`}>
|
|
{msg.role === 'assistant' && <div className="msg-avatar">AI</div>}
|
|
<div className="msg-bubble">
|
|
{msg.role === 'assistant'
|
|
? renderWithCitations(msg.text, jumpToCitation)
|
|
: msg.text
|
|
}
|
|
{streaming && msg.id === lastAssistantId && (
|
|
<span className="blink-cursor">▋</span>
|
|
)}
|
|
</div>
|
|
{msg.role === 'user' && <div className="msg-avatar user-av">You</div>}
|
|
</div>
|
|
))}
|
|
<div ref={bottomRef} />
|
|
</div>
|
|
|
|
<div className="composer">
|
|
<div className="quick-chips">
|
|
{quickPrompts.slice(0, 3).map(q => (
|
|
<button key={q} className="chip" onClick={() => send(q)}>
|
|
{q.length > 42 ? q.slice(0, 42) + '…' : q}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{/* P0-1: Agentic mode toggle */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
|
|
<label style={{
|
|
display: 'flex', alignItems: 'center', gap: 5,
|
|
fontSize: 12, color: agenticMode ? 'var(--accent, #6366f1)' : 'var(--muted)',
|
|
cursor: 'pointer', userSelect: 'none',
|
|
}}>
|
|
<input
|
|
type="checkbox"
|
|
checked={agenticMode}
|
|
onChange={e => {
|
|
setAgenticMode(e.target.checked);
|
|
setThinkingSteps([]);
|
|
}}
|
|
style={{ cursor: 'pointer', accentColor: 'var(--accent, #6366f1)' }}
|
|
/>
|
|
<Zap size={11} />
|
|
<span>{t.ragchat.agenticMode}</span>
|
|
</label>
|
|
{agenticMode && (
|
|
<span style={{ fontSize: 11, color: 'var(--muted)' }}>
|
|
{t.ragchat.agenticModeHint}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Document context badge ── */}
|
|
{docContext && (
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: 8,
|
|
padding: '6px 10px', marginBottom: 6,
|
|
background: docContext.status === 'error'
|
|
? 'rgba(220,38,38,0.06)'
|
|
: docContext.status === 'ready'
|
|
? 'rgba(34,197,94,0.06)'
|
|
: 'rgba(99,102,241,0.06)',
|
|
border: `1px solid ${
|
|
docContext.status === 'error' ? 'rgba(220,38,38,0.3)'
|
|
: docContext.status === 'ready' ? 'rgba(34,197,94,0.3)'
|
|
: 'rgba(99,102,241,0.3)'
|
|
}`,
|
|
borderRadius: 8, fontSize: 12,
|
|
}}>
|
|
{docContext.status === 'extracting' && (
|
|
<span style={{ animation: 'spin 1s linear infinite', display: 'inline-block', color: 'var(--accent,#6366f1)' }}>⟳</span>
|
|
)}
|
|
{docContext.status === 'ready' && <FileText size={13} color="#16a34a" />}
|
|
{docContext.status === 'error' && <AlertCircle size={13} color="#dc2626" />}
|
|
|
|
<span style={{
|
|
fontWeight: 600, fontSize: 11,
|
|
color: docContext.status === 'error' ? '#dc2626'
|
|
: docContext.status === 'ready' ? '#16a34a'
|
|
: 'var(--accent,#6366f1)',
|
|
flexShrink: 0,
|
|
}}>
|
|
{t.ragchat.attachContextBadge}
|
|
</span>
|
|
|
|
<span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--fg)' }}
|
|
title={docContext.filename}>
|
|
{docContext.filename}
|
|
</span>
|
|
|
|
{docContext.status === 'ready' && (
|
|
<span style={{ fontSize: 10, color: 'var(--muted)', flexShrink: 0 }}>
|
|
{(docContext.charCount / 1000).toFixed(1)}k chars
|
|
{docContext.truncated ? ` · ${t.ragchat.attachTruncated}` : ''}
|
|
</span>
|
|
)}
|
|
{docContext.status === 'extracting' && (
|
|
<span style={{ fontSize: 11, color: 'var(--accent,#6366f1)', flexShrink: 0 }}>
|
|
{t.ragchat.attachExtracting}
|
|
</span>
|
|
)}
|
|
{docContext.status === 'error' && (
|
|
<span style={{ fontSize: 11, color: '#dc2626', flexShrink: 0 }} title={docContext.errorMsg}>
|
|
{t.ragchat.attachError}
|
|
</span>
|
|
)}
|
|
|
|
{/* Clear button */}
|
|
<button
|
|
onClick={() => setDocContext(null)}
|
|
style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 2, fontSize: 11, flexShrink: 0 }}
|
|
title={t.ragchat.attachClearLabel}
|
|
>
|
|
<X size={11} /> {t.ragchat.attachClearLabel}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Hidden file input */}
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept={t.ragchat.attachAccept}
|
|
style={{ display: 'none' }}
|
|
onChange={handleFileInputChange}
|
|
/>
|
|
|
|
<div className="composer-row">
|
|
{/* Paperclip button — replaces attached doc when clicked again */}
|
|
<button
|
|
className="btn icon-btn"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
disabled={streaming || docContext?.status === 'extracting'}
|
|
title={t.ragchat.attachBtn}
|
|
style={{ flexShrink: 0, padding: '8px', color: docContext?.status === 'ready' ? 'var(--accent, #6366f1)' : undefined }}
|
|
>
|
|
<Paperclip size={15} />
|
|
</button>
|
|
<textarea
|
|
className="composer-input"
|
|
placeholder={t.ragchat.inputPlaceholder}
|
|
value={inputDraft}
|
|
onChange={e => setRagState(s => ({ ...s, inputDraft: e.target.value }))}
|
|
onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); void send(); } }}
|
|
rows={2}
|
|
/>
|
|
<button
|
|
className="btn primary"
|
|
onClick={() => void send()}
|
|
disabled={!inputDraft.trim() || streaming || docContext?.status === 'extracting'}
|
|
>
|
|
<Send size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Citation rail ── */}
|
|
<div className="citation-rail" ref={citRailRef}>
|
|
<div className="citation-header">
|
|
{t.ragchat.citationsHeader}{citations.length > 0 && ` (${citations.length})`}
|
|
</div>
|
|
{citations.length === 0 && (
|
|
<p style={{ padding: '12px 16px', fontSize: 12, color: 'var(--muted)', lineHeight: 1.5 }}>
|
|
{t.ragchat.citationsEmpty}
|
|
</p>
|
|
)}
|
|
{citations.map(c => (
|
|
<div
|
|
key={c.index}
|
|
ref={el => { citItemRefs.current[c.index] = el; }}
|
|
className={`citation-item${highlightedCit === c.index ? ' highlighted' : ''}`}
|
|
>
|
|
<div className="cit-index">[{c.index}]</div>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 3 }}>
|
|
<div className="cit-name">{c.name}</div>
|
|
{c.clause && <span className="cit-clause">{c.clause}</span>}
|
|
<span className="cit-score" style={{ marginLeft: 'auto' }}>{c.score}%</span>
|
|
</div>
|
|
<div className="cit-snippet">{c.snippet}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|