A live, inspectable activity disclosure for AI agents: a shimmering status line, explicit thinking/complete/error states and a collapsible log of tool, file, search and progress steps.
"use client";
import { useState } from "react";
import {
Thinking,
ThinkingActivity,
ThinkingContent,
type ThinkingStatus,
ThinkingTrigger,
} from "@/components/ui/thinking";
const copy: Record<ThinkingStatus, { summary: string; duration: string; label: string }> = {
thinking: { summary: "Checking the component interface and useful states.", duration: "1.8s", label: "Live" },
complete: { summary: "The component contract is ready to review.", duration: "3.4s", label: "Complete" },
error: { summary: "The registry build stopped before validation.", duration: "2.6s", label: "Error" },
};
export default function ThinkingDemo() {
const [status, setStatus] = useState<ThinkingStatus>("thinking");
return (
<div className="flex min-h-[360px] w-full items-center justify-center p-6">
<div className="grid w-full max-w-[520px] gap-3">
<div
role="radiogroup"
aria-label="Thinking status"
className="inline-flex justify-self-center rounded-full bg-muted p-0.5"
>
{(Object.keys(copy) as ThinkingStatus[]).map((value) => (
<button
key={value}
type="button"
role="radio"
aria-checked={status === value}
onClick={() => setStatus(value)}
className="h-7 rounded-full px-3 text-xs font-medium text-muted-foreground transition-[background-color,color] duration-150 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-checked:bg-background aria-checked:text-foreground aria-checked:shadow-sm"
>
{copy[value].label}
</button>
))}
</div>
<Thinking variant="card" status={status} defaultOpen>
<ThinkingTrigger summary={copy[status].summary} duration={copy[status].duration} />
<ThinkingContent>
<ThinkingActivity type="search" query="Thinking component accessibility" elapsed="0.3s">
Found the component contract
</ThinkingActivity>
<ThinkingActivity type="file" path="src/components/ui/thinking.tsx" elapsed="0.8s">
Read the public interface
</ThinkingActivity>
<ThinkingActivity
type="tool"
tool="npm run build"
elapsed={status === "thinking" ? undefined : status === "complete" ? "3.4s" : "2.6s"}
>
{status === "error" ? "Build failed" : "Checked the build output"}
</ThinkingActivity>
</ThinkingContent>
</Thinking>
</div>
</div>
);
}Part of Uai — browse the full library on 21st.dev.