/* global React, ReactDOM */ const { useState, useRef, useEffect, useCallback } = React; const D = window.TREE_DEMO; /* ---------------- tiny icon set (inline svg) ---------------- */ const Ic = { tree: (p) => , plus: (p) => , search: (p) => , send: (p) => , settings: (p) => , chart: (p) => , chevron: (p) => , file: (p) => , upload: (p) => , close: (p) => , warn: (p) => , spark: (p) => }; const LANGS = [["ko","KR"],["en","EN"],["ja","JP"]]; /* ---------------- helpers ---------------- */ function pickAnswer(text) { const A = D.ANSWERS, q = text.toLowerCase(); const hit = (k) => A[k].match.some((m) => q.includes(m.toLowerCase())); if (hit("compare")) return "compare"; if (hit("process")) return "process"; if (hit("control")) return "control"; if (hit("residual")) return "residual"; return "fallback"; } function flattenTree(node, out = []) { out.push(node); (node.children || []).forEach((c) => flattenTree(c, out)); return out; } /* renders **bold** + newlines inside a text segment */ function RichText({ value }) { const lines = value.split("\n"); return lines.map((ln, i) => ( {ln.split(/(\*\*[^*]+\*\*)/g).map((part, j) => part.startsWith("**") ? {part.slice(2, -2)} : {part} )} {i < lines.length - 1 &&
} )); } /* ---------------- Tree node ---------------- */ function TreeNode({ node, depth, open, setOpen, active, ctx, onCtx }) { const hasKids = (node.children || []).length > 0; const isOpen = open[node.id] !== false; // default open const isActive = active.includes(node.id); const isCtx = ctx.includes(node.id); return (
{ if (e.shiftKey) { onCtx(node.id); return; } if (hasKids) setOpen((o) => ({ ...o, [node.id]: o[node.id] === false })); }} title={node.summary} > {hasKids ? : } {node.title} {node.page_ref}
{hasKids && isOpen && node.children.map((c) => ( ))}
); } /* ---------------- Main app ---------------- */ function App() { const [lang, setLang] = useState("ko"); const t = D.UI[lang]; const [domain, setDomain] = useState(1); // Medical const [deep, setDeep] = useState(true); const [maxDepth, setMaxDepth] = useState(5); const [maxBranch, setMaxBranch] = useState(3); const [docIdx, setDocIdx] = useState(0); const [openMap, setOpenMap] = useState({}); const [activeNodes, setActiveNodes] = useState([]); // highlighted (cited / traversed) const [ctxNodes, setCtxNodes] = useState([]); // shift-selected const [showTree, setShowTree] = useState(true); const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [busy, setBusy] = useState(false); const [thinking, setThinking] = useState(null); // {nodes:[], i} const [pdf, setPdf] = useState(null); // {doc, page} const [panel, setPanel] = useState(null); // 'settings' | 'perf' const [sessions] = useState(D.SESSIONS); const [activeSession, setActiveSession] = useState("se1"); const [sQuery, setSQuery] = useState(""); const scrollRef = useRef(null); useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [messages, thinking]); const doc = D.DOCS[docIdx]; const onCtx = useCallback((id) => { setCtxNodes((c) => c.includes(id) ? c.filter((x) => x !== id) : [...c, id]); }, []); async function ask(text) { if (!text.trim() || busy) return; const key = pickAnswer(text); const ans = D.ANSWERS[key]; const segs = ans[lang] || ans.en; setInput(""); setMessages((m) => [...m, { role: "user", text }]); setBusy(true); // make sure relevant doc panel is right one for comparison if (ans.multiDoc && docIdx !== 0) setDocIdx(0); // ---- traversal animation ---- const visit = deep ? ans.traversal : flattenTree(doc.tree).map((n) => n.id); setActiveNodes([]); setThinking({ total: visit.length, i: 0 }); for (let i = 0; i < visit.length; i++) { await sleep(deep ? 170 : 60); setActiveNodes((a) => [...a, visit[i]]); setThinking({ total: visit.length, i: i + 1 }); } await sleep(260); setThinking(null); // ---- stream answer segment by segment ---- const reduction = deep ? 88 + Math.floor(Math.random() * 8) : 0; const respTime = +(deep ? 2.1 + Math.random() * 0.8 : 1.3 + Math.random() * 0.5).toFixed(1); const ctxTok = deep ? 1100 + Math.floor(Math.random() * 600) : 11000 + Math.floor(Math.random() * 4000); const cited = segs.filter((s) => s.cite).map((s) => s.cite.node); const msg = { role: "assistant", lang, segs, shown: 0, deep, reduction, respTime, ctxTok, nodes: visit.length }; setMessages((m) => [...m, msg]); for (let i = 1; i <= segs.length; i++) { await sleep(95); setMessages((m) => { const c = [...m]; const last = c[c.length - 1]; c[c.length - 1] = { ...last, shown: i }; return c; }); } setActiveNodes(cited); // keep cited nodes highlighted setBusy(false); } /* derived perf stats */ const aMsgs = messages.filter((m) => m.role === "assistant"); const totalQ = aMsgs.length; const avgT = totalQ ? (aMsgs.reduce((s, m) => s + m.respTime, 0) / totalQ).toFixed(1) : "0.0"; const avgCtx = totalQ ? Math.round(aMsgs.reduce((s, m) => s + m.ctxTok, 0) / totalQ) : 0; const deepUse = totalQ ? Math.round(aMsgs.filter((m) => m.deep).length / totalQ * 100) : 0; const filteredSessions = sessions.filter((s) => s.title.toLowerCase().includes(sQuery.toLowerCase())); return (
{/* ===== app header ===== */}
🌳 TreeRAG Hierarchical Document Intelligence
{t.domains[domain]}
{LANGS.map(([code, lbl]) => ( ))}
{/* ===== sidebar ===== */} {/* ===== chat ===== */}
{messages.length === 0 && (
🌳

{t.greeting}

{t.greetingSub}

{(D.SUGGESTIONS[lang] || D.SUGGESTIONS.en).map((s, i) => ( ))}
)} {messages.map((m, i) => m.role === "user" ?
{m.text}
: setPdf(c)} /> )} {thinking && (
{t.thinking} · {thinking.i}/{thinking.total} {t.nodesVisited}
)}
{/* input */}
{ctxNodes.length > 0 && (
{ctxNodes.length}{t.ctxSelected}
)}