An expanded panel revealing the steps the AI worked through before giving its answer.
Loading demo: thinking-panel-real-world
npx sdaia-ui@latest add thinking-panel
import { ThinkingPanel } from "sdaia-ui"1<ThinkingPanel2defaultState="expanded"3count="4 activities executed"4items={[5{ type: "reasoning", title: "Reasoning Chain Initialized", timestamp: "14:40:02", description: "…" },6{ type: "search", title: "External Web Search Webhook", timestamp: "14:40:04", query: "…", result: "200 OK" },7]}8/>
A dashed placeholder shown when there is no active trace.
Loading demo: thinking-panel-hidden
Thinking dots, a running label, an activity-count badge and an Expand button.
Loading demo: thinking-panel-collapsed
A header over a reasoning timeline of Trace Items on one continuous rail.
Loading demo: thinking-panel-expanded
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
state | 'hidden' | 'collapsed' | 'expanded' | — | optional |
defaultState | 'hidden' | 'collapsed' | 'expanded' | 'collapsed' | optional |
onStateChange | (state) => void | — | optional |
items | TraceItemProps[] | — | optional |
count | ReactNode | — | optional |
title | ReactNode | 'Execution Trace Monitor' | optional |
pipelineLabel | ReactNode | 'Active Pipeline' | optional |
showCount / showPipeline | boolean | true | optional |
dir | 'ltr' | 'rtl' | — | optional |