/* global React, ReactDOM */
const { useState, useEffect, useRef, useCallback } = React;
/* ============================================
Logo
============================================ */
function Logo({ size = 22 }) {
return (
Gospel[1]
);
}
window.Logo = Logo;
/* ============================================
Icons
============================================ */
const I = {
arrow: (
),
check: (
),
x: (
),
spark: (
),
external: (
),
};
window.I = I;
/* ============================================
Citation visuals (small SVGs for three-things cards)
============================================ */
function VisCite() {
return (
);
}
function VisSource() {
return (
);
}
function VisHonest() {
return (
);
}
window.VisCite = VisCite;
window.VisSource = VisSource;
window.VisHonest = VisHonest;
/* ============================================
Streaming answer renderer
- Takes a tokens array (alternating {text} | {cite} | {para})
- Streams text char-by-char, citations pop in instantly
============================================ */
function StreamingAnswer({ qData, onComplete, speed = 8 }) {
const [renderedTokens, setRenderedTokens] = useState([]);
const [done, setDone] = useState(false);
const [hoveredCite, setHoveredCite] = useState(null);
const [popPos, setPopPos] = useState({ x: 0, y: 0 });
const cancelRef = useRef(false);
useEffect(() => {
cancelRef.current = false;
setRenderedTokens([]);
setDone(false);
let i = 0;
const tokens = qData.answer;
async function run() {
const acc = [];
for (let ti = 0; ti < tokens.length; ti++) {
if (cancelRef.current) return;
const t = tokens[ti];
if (t.text) {
// stream char by char
let partial = "";
for (let c = 0; c < t.text.length; c++) {
if (cancelRef.current) return;
partial += t.text[c];
const next = [...acc, { text: partial }];
setRenderedTokens([...next]);
await new Promise(r => setTimeout(r, speed));
}
acc.push({ text: t.text });
} else if (t.cite !== undefined) {
acc.push({ cite: t.cite });
setRenderedTokens([...acc]);
await new Promise(r => setTimeout(r, 80));
} else if (t.para) {
acc.push({ para: true });
setRenderedTokens([...acc]);
await new Promise(r => setTimeout(r, 100));
}
}
setDone(true);
onComplete && onComplete();
}
run();
return () => { cancelRef.current = true; };
}, [qData, speed]);
// group into paragraphs
const paragraphs = [];
let current = [];
renderedTokens.forEach((t, i) => {
if (t.para) {
paragraphs.push(current);
current = [];
} else {
current.push({ ...t, _i: i });
}
});
paragraphs.push(current);
const handleCiteHover = (e, num) => {
const r = e.currentTarget.getBoundingClientRect();
setPopPos({ x: r.left + r.width / 2, y: r.top - 8 });
setHoveredCite(num);
};
const sourceMap = {};
qData.sources.forEach(s => { sourceMap[s.num] = s; });
return (
<>
{hoveredCite !== null && sourceMap[hoveredCite] && (
{sourceMap[hoveredCite].domain} · {sourceMap[hoveredCite].year}
{sourceMap[hoveredCite].title}
)}
);
}
window.StreamingAnswer = StreamingAnswer;
/* ============================================
Sources panel — animated reveal
============================================ */
function SourcesPanel({ sources, revealCount }) {
return (
);
}
window.SourcesPanel = SourcesPanel;