Thinking Panel

An expanded panel revealing the steps the AI worked through before giving its answer.

Loading demo: thinking-panel-real-world

Installation

npx sdaia-ui@latest add thinking-panel

Usage

import { ThinkingPanel } from "sdaia-ui"

1<ThinkingPanel
2  defaultState="expanded"
3  count="4 activities executed"
4  items={[
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/>

Examples

Hidden

A dashed placeholder shown when there is no active trace.

Loading demo: thinking-panel-hidden

Collapsed

Thinking dots, a running label, an activity-count badge and an Expand button.

Loading demo: thinking-panel-collapsed

Expanded

A header over a reasoning timeline of Trace Items on one continuous rail.

Loading demo: thinking-panel-expanded

API Reference

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