A restrained collapsible thinking section for AI responses that automatically closes when the final answer begins streaming.
"use client";
import * as React from "react";
import { ReasoningBlock } from "@/components/ui/ai-reasoning-block";
export default function ReasoningBlockDemo() {
const [streaming, setStreaming] = React.useState(false);
return <div className="grid min-h-[520px] w-full place-items-center bg-white p-5 dark:bg-zinc-950"><div className="w-full max-w-2xl space-y-5"><ReasoningBlock answerStreaming={streaming}>I’ll compare the account activity, isolate the unusual spike, and explain the most likely cause without over-indexing on a single data point.</ReasoningBlock><button onClick={() => setStreaming((v) => !v)} className="rounded-lg bg-zinc-950 px-3 py-2 text-xs text-white dark:bg-white dark:text-zinc-950">{streaming ? "Reset" : "Start answer"}</button>{streaming ? <p className="text-sm leading-7 text-zinc-700 dark:text-zinc-300">The increase came primarily from scheduled imports…</p> : null}</div></div>;
}