Reasoning Display Panel
AI
Explainability
Collapsible step-by-step AI reasoning visualization with confidence scores and data inspection capabilities. Shows the AI's decision-making process in an accessible format.
Preview
Interactive reasoning process visualization
AI Reasoning Process
3 steps to reach decision
1
Data Collection
95%
Analyzed 15,000 user interactions
2
Pattern Recognition
88%
Identified correlation between features
3
Recommendation
91%
Prioritize mobile-first approach
Props
ReasoningDisplayPanel component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
steps* | ReasoningStep[] | — | Array of reasoning steps |
isExpanded | boolean | false | Whether all steps are expanded |
onToggle | () => void | — | Callback when expand/collapse is clicked |
variant | 'default' | 'compact' | 'default' | Display variant |
className | string | — | Additional CSS classes |
ReasoningStep Type
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | — | Unique step identifier |
step* | number | — | Step number |
title* | string | — | Step title |
description* | string | — | Step description |
data | Record<string, any> | — | Optional data to inspect |
confidence | number | — | Confidence percentage (0-100) |
Usage
Import and implementation example
import { ReasoningDisplayPanel } from '@/components/ui/reasoning-display-panel'
const steps = [
{
id: '1',
step: 1,
title: 'Data Collection',
description: 'Analyzed 15,000 user interactions',
confidence: 95,
data: { users: 15000, period: '3 months' }
},
{
id: '2',
step: 2,
title: 'Pattern Recognition',
description: 'Identified correlation between features',
confidence: 88,
},
]
export default function Example() {
const [expanded, setExpanded] = useState(false)
return (
<ReasoningDisplayPanel
steps={steps}
isExpanded={expanded}
onToggle={() => setExpanded(!expanded)}
variant="default"
/>
)
}This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Step-by-step visualization: Numbered steps with connecting lines show reasoning flow
- Confidence indicators: Color-coded scores per step (green for high, amber for medium)
- Expandable data: Click to inspect underlying data for each step
- Compact variant: Minimal version for inline usage
- Collapsible header: Expand/collapse all steps at once
- Timeline structure: Visual hierarchy with connecting line
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Expand/collapse button is a native button elementStep numbers provide sequence contextConfidence shown as text percentageKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate to expand/collapse button |
| Enter / Space | Toggle expand/collapse state |
Notes
- Confidence communicated through number, not just color
- Step titles and descriptions are readable text
- Timeline is decorative (connecting line)
- Consider aria-live for dynamic updates