Reasoning Trace

const [thinking, setThinking] = React.useState(true);
const [reasoning, setReasoning] = React.useState("");

React.useEffect(() => {
  const FULL = "The user wants a concise answer. Lead with the recommendation…";
  let i = 0;
  const id = setInterval(() => {
    i += 3;
    setReasoning(FULL.slice(0, i));
    if (i >= FULL.length) {
      clearInterval(id);
      setTimeout(() => setThinking(false), 700);
    }
  }, 28);
  return () => clearInterval(id);
}, []);

return <ReasoningTrace reasoning={reasoning} thinking={thinking} />;

const [expanded, setExpanded] = React.useState(false);
return (
  <ReasoningTrace
    reasoning="I considered three options and went with the simplest…"
    expanded={expanded}
    onExpandedChange={setExpanded}
  />
);