AI Uncertainty Highlighter
Inline highlighting for low-confidence text spans with hover tooltips, confidence indicators, and alternative suggestions. Helps users identify which parts of AI-generated content may be uncertain.
Preview - Highlight Variant
Default highlight style with background colors
The capital of France is Paris, which has been the country's capital since 987 AD. Paris is home to approximately 2.2 million residents and is known for its iconic Eiffel Tower.
Underline Variant
Wavy underline style for subtle indication
The capital of France is Paris, which has been the country's capital since 987 AD. Paris is home to approximately 2.2 million residents and is known for its iconic Eiffel Tower.
Badge Variant
Badge style with icons and borders
The capital of France is Paris, which has been the country's capital since 987 AD. Paris is home to approximately 2.2 million residents and is known for its iconic Eiffel Tower.
Confidence Levels
Different confidence levels with color coding
This is high confidence information.
This is medium confidence information.
This is low confidence information.
This is very low confidence information.
Props
AIUncertaintyHighlighter component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The full text content to display |
uncertainSpans | UncertainSpan[] | [] | Array of uncertain spans within the text |
showIndicators | boolean | true | Show confidence indicators inline |
enableTooltips | boolean | true | Enable hover tooltips for explanations |
onSpanClick | (span: UncertainSpan, index: number) => void | — | Callback when user clicks on an uncertain span |
onSelectAlternative | (span: UncertainSpan, alternative: string) => void | — | Callback when user selects an alternative suggestion |
variant | 'highlight' | 'underline' | 'badge' | 'highlight' | Visual style variant |
className | string | — | Additional CSS classes |
UncertainSpan Type
| Prop | Type | Default | Description |
|---|---|---|---|
start* | number | — | Start index of the uncertain text |
end* | number | — | End index of the uncertain text |
confidence* | 'high' | 'medium' | 'low' | 'very_low' | — | Confidence level for this span |
reason | string | — | Optional explanation for why this is uncertain |
alternatives | string[] | — | Alternative suggestions |
Usage
Import and implementation example
import { AIUncertaintyHighlighter } from '@/blocks/ai-transparency/ai-uncertainty-highlighter'
export default function Example() { const text = "Paris became the capital of France in 987 AD." const uncertainSpans = [ { start: 40, end: 46, confidence: 'medium', reason: 'The exact year is disputed among historians', alternatives: ['508 AD', '1000 AD'], }, ]
return ( <AIUncertaintyHighlighter text={text} uncertainSpans={uncertainSpans} variant="highlight" onSelectAlternative={(span, alternative) => { console.log('Selected alternative:', alternative) }} /> )}Features
Built-in functionality
- Multiple variants: Choose between highlight, underline, or badge styles
- Four confidence levels: High, medium, low, and very low with color coding
- Interactive tooltips: Hover to see explanations and alternatives
- Alternative suggestions: Show and select alternative phrasings
- Click callbacks: Handle span clicks and alternative selections
- Visual indicators: Icons indicate confidence levels inline
- Smart positioning: Tooltips automatically position to stay in viewport
- Dark mode support: Full dark mode support with proper contrast
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
Uncertain spans are interactive and keyboard accessibleTooltips appear on hover and focusColor is not the only indicator (icons and labels are used)Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between uncertain spans |
| Enter | Activate span to view alternatives |
| Escape | Close tooltip |
Notes
- Consider adding aria-label to describe confidence level
- Ensure sufficient color contrast for all confidence levels
- Tooltips should be dismissible with Escape key
- Screen readers should announce confidence level