AI Info Panel
Unified component for displaying AI rationale, detailed explanations, and active context. Supports tooltip, panel, and inline display modes with content organized by rationale items, reasoning steps, or context awareness.
Rationale — Panel
Expandable panel showing why AI gave a specific answer
Pattern matching
Your query matched several known patterns in medical literature about symptom combinations.
WHO Guidelines 2024
Referenced section 4.2 on diagnostic criteria for seasonal allergies.
View sourceLocation-based
Assumed temperate climate based on your profile location setting.
Not a diagnosis
This analysis is informational only and should not replace professional medical advice.
Rationale — Tooltip
Hover over trigger to see rationale
Explanation — Panel
Step-by-step reasoning with alternatives and details
Analyzed user query for intent
Identified product comparison request with budget constraint
Retrieved matching products from catalog
47 products matched within the specified budget range
Applied ranking algorithm
Weighted by reviews (40%), price (30%), and features (30%)
Generated personalized recommendations
Top 3 products selected based on user preference history
Explanation — Collapsed
Compact state showing summary
Context — Panel
Active context and capabilities overview
Context — Inline
Lightweight inline context display
Props
AIInfoPanel component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
mode* | 'rationale' | 'explanation' | 'context' | — | Content mode — determines data model and layout |
display | 'tooltip' | 'panel' | 'inline' | 'panel' | How the component is displayed |
trigger | 'hover' | 'click' | 'always' | 'always' | Trigger mode for tooltip display |
title | string | — | Override the default title (auto-generated per mode) |
position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Tooltip position relative to trigger |
maxWidth | number | 320 | Maximum width for tooltip display |
defaultExpanded | boolean | false | Whether the panel starts expanded |
showCopyButton | boolean | true | Show copy to clipboard button (rationale/explanation only) |
exportable | boolean | false | Show JSON export button |
items | InfoItem[] | — | Rationale items (for mode="rationale") |
reasoning | ReasoningStep[] | — | Reasoning steps (for mode="explanation") |
alternatives | Alternative[] | — | Alternative options (for mode="explanation") |
assumptions | string[] | — | Assumptions made (for mode="explanation") |
limitations | string[] | — | Known limitations (for mode="explanation") |
contextItems | ContextItem[] | — | Context items (for mode="context") |
capabilities | ContextCapability[] | — | AI capabilities (for mode="context") |
onReportIssue | () => void | — | Callback for reporting an issue |
Type Interfaces
Data models for each mode
// Rationale itemstype InfoCategory = 'reasoning' | 'source' | 'context' | 'assumption' | 'limitation'interface InfoItem { category: InfoCategory label: string content: string details?: string confidence?: number sourceUrl?: string icon?: LucideIcon}
// Explanation reasoninginterface ReasoningStep { step: string label?: string keyFindings?: string confidence?: number dataSources?: string[]}
interface Alternative { option: string confidence?: number predictedOutcome?: string}
// Context itemstype ContextItemType = 'file' | 'url' | 'memory'interface ContextItem { type: ContextItemType name: string size?: string icon?: LucideIcon}
interface ContextCapability { name: string enabled: boolean icon?: LucideIcon}Usage
Import and basic examples
import { AIInfoPanel } from '@/blocks/ai-transparency/ai-info-panel'
// Rationale tooltip<AIInfoPanel mode="rationale" display="tooltip" trigger="hover" items={[ { category: 'reasoning', label: 'Pattern match', content: 'Matched known patterns' }, { category: 'source', label: 'WHO 2024', content: 'Section 4.2', sourceUrl: '#' }, ]}> <span className="underline">Why this answer?</span></AIInfoPanel>
// Explanation panel<AIInfoPanel mode="explanation" reasoning={steps} alternatives={alts} assumptions={['User prefers quality over price']} defaultExpanded exportable/>
// Context awareness<AIInfoPanel mode="context" contextItems={[{ type: 'file', name: 'report.pdf', size: '2.4 MB' }]} capabilities={[{ name: 'Code Analysis', enabled: true }]}/>Consolidation Note
Which blocks this replaces
Unified Component
This component consolidates three previously separate blocks:
- AI Rationale Tooltip — now
mode="rationale"withdisplay="tooltip" - Explanation Panel — now
mode="explanation" - AI Context Panel — now
mode="context"
Features
Built-in functionality
- Three content modes: Rationale, explanation, and context in one component
- Three display modes: Tooltip, expandable panel, and inline variants
- Tooltip positioning: Smart viewport-aware positioning with four directions
- Tabbed navigation: Explanation mode with Reasoning, Alternatives, and Details tabs
- Timeline visualization: Numbered reasoning steps with confidence bars
- Copy to clipboard: Copy rationale or reasoning as formatted text
- JSON export: Export full analysis data as downloadable JSON
- Context items: Display files, URLs, and memory items with type icons
- Capabilities grid: Show enabled/disabled AI capabilities
- Dark mode support: Full dark mode styling throughout
Accessibility
Accessibility considerations
ARIA Attributes
Panel expansion state conveyed via aria-expandedTab selection communicated to screen readersCopy success state announced via icon changeKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between interactive elements |
| Enter / Space | Toggle panel expansion and activate buttons |
| Escape | Close tooltip (click mode) |
Notes
- Tooltip uses fixed positioning to avoid layout shifts
- Categories use icons and text labels for colorblind accessibility
- Outside click detection closes tooltip in click mode