AI reasoningPro

• Showing a model's steps while it works, then folding them away.

• The final answer itself.

Import it from @/components/ui/ai-reasoning after installing.

import { AiReasoning } from "@/components/ui/ai-reasoning";

export function Trace({ steps, thinking }: { steps: string[]; thinking: boolean }) {
  return <AiReasoning steps={steps} thinking={thinking} seconds={4} />;
}

• The toggle uses aria-expanded.

• Steps slide in; the header shimmers while thinking; folds on completion.

• Full width.

• Append steps; don't replace the array each token.

• Set thinking=false when the answer starts streaming.