Confidence Indicator
Visual display of ML confidence scores with color-coded badges. The ConfidenceIndicator is automatically integrated into MessageBubble suggestion chips and shows how certain the AI is about detected preferences.
How It Appears in Chat Messages
When you use MessageBubble with suggestions, the ConfidenceIndicator is automatically rendered inside each suggestion chip with color-coded badges based on the confidence level.
High Confidence (92% - Green)
I noticed you mentioned a coffee preference! I'll remember that for you.
Medium Confidence (68% - Blue)
Based on our conversation, I think you might prefer tea.
Low Confidence (42% - Yellow)
I'm not quite sure about your breakfast preference yet.
Automatic Integration
You don't need to manually add ConfidenceIndicator to your code. When you create a MessageBubble with suggestions, the confidence badge is automatically displayed based on the confidence value you provide:
I detected multiple preferences from your message!
Standalone Usage (Advanced)
If you need to display confidence scores outside of MessageBubble suggestions (e.g., in settings or detailed views), you can use ConfidenceIndicator as a standalone component:
Minimal Variant (Badge Only)
Detailed Variant (With Progress Bar)
Confidence Levels
The component automatically maps confidence scores to color-coded levels. See the examples above for how each level appears in context:
| Range | Level | Color | Description |
|---|---|---|---|
| 0.8 - 1.0 | Very Confident | Green (success) | AI is highly certain about this prediction |
| 0.5 - 0.8 | Confident | Blue (info) | AI is reasonably confident about this prediction |
| 0.3 - 0.5 | Learning | Yellow (warning) | AI is still learning, prediction may be uncertain |
| 0.0 - 0.3 | Uncertain | Gray (default) | AI is uncertain, user confirmation recommended |
Props
| Name | Type | Default | Description |
|---|---|---|---|
confidence* | number | - | Confidence score between 0.0 and 1.0 |
variant | 'minimal' | 'detailed' | 'minimal' | Display variant: minimal (badge only) or detailed (progress bar + badge + label) |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the badge |
showTooltip | boolean | true | Whether to show tooltip on hover |
className | string | - | Additional CSS classes to apply |
Usage Guidelines
When to use
- •Showing AI confidence in detected user preferences (automatic in MessageBubble)
- •Providing transparency in AI decision-making
- •Helping users understand when to trust AI predictions
- •Displaying confidence scores in settings or analytics pages (standalone)
Best practices
- •Just provide confidence values in MessageBubble suggestions - the indicator appears automatically
- •Always pass confidence values between 0.0 and 1.0
- •Use standalone mode only when displaying confidence outside of chat (e.g., settings)
- •Higher confidence (>0.8) should correlate with better AI training data
Accessibility
- •Color is not the only indicator (percentage also shown)
- •Tooltips provide additional context on hover
- •Uses semantic HTML and data attributes
- •Text labels in detailed variant improve clarity
Do's and Don'ts
Do
- •Just add confidence to MessageBubble suggestions - it works automatically
- •Pass confidence values between 0.0 and 1.0
- •Use color-coded badges to help users quickly assess AI certainty
- •Use standalone mode for settings or analytics pages
Don't
- •Don't manually add ConfidenceIndicator inside MessageBubble - it's automatic
- •Don't use confidence values outside 0.0-1.0 range
- •Don't show confidence scores without explaining what they mean
- •Don't use for non-ML certainty indicators (use Badge instead)
Related Components
Message Bubble
Chat message with AI suggestions
Badge
Status badge component used internally
Progress Bar
Progress bar used in detailed variant
Tooltip
Tooltip for additional context