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