AI Learning Progress

Trust

Settings

Shows what the AI has learned about the user over time, including communication preferences, expertise levels, workflow patterns, and behavioral insights. Tracks confidence levels and allows users to provide feedback on learnings.

Compact Variant

Minimal display with tooltip

3 learned(85% avg)

Card Variant

Summary card with progress bars

Learning Progress

85% confidence

Total

Confident

Recent

Preferences92%

Communication Style85%

Expertise78%

Dashboard Variant

Full dashboard with filtering and domain breakdown

Total

Confident

Avg. Confidence

80%

Recent

Milestones

✨First preference learned

✨10 interactions

Profile complete(75%)

Prefers code examples over theoretical explanations

Confident

User consistently requests practical examples

95% confidenceUsed 24xLearned 14d ago

Professional but friendly tone

Confident

Responds well to conversational style

88% confidenceUsed 30xLearned 10d ago

Props

AILearningProgress component API reference

Prop	Type	Default	Description
`learnings*`	`LearningItem[]`	—	List of things the AI has learned
`milestones`	`LearningMilestone[]`	—	Achievement milestones
`stats`	`LearningStats`	—	Learning statistics (calculated if not provided)
`onProvideFeedback`	`(learningId: string, isCorrect: boolean) => void`	—	Callback when user provides feedback on a learning
`onForget`	`(learningId: string) => void`	—	Callback when user wants AI to forget something
`onResetDomain`	`(domain: LearningDomain) => void`	—	Callback when user wants to reset learnings in a domain
`variant`	`'compact' \| 'card' \| 'detailed' \| 'dashboard'`	`'card'`	Display mode variant
`showMilestones`	`boolean`	`true`	Show milestone achievements
`showStats`	`boolean`	`true`	Show learning statistics
`enableFiltering`	`boolean`	`true`	Enable domain filtering
`collapsible`	`boolean`	`false`	Collapsible domain sections
`className`	`string`	—	Additional CSS classes

LearningItem Type

Prop	Type	Default	Description
`id*`	`string`	—	Unique learning identifier
`domain*`	`'preferences' \| 'communication' \| 'expertise' \| 'workflow' \| 'context' \| 'behavior'`	—	Learning domain
`label*`	`string`	—	Learning label
`description`	`string`	—	Detailed description
`confidence*`	`number`	—	Confidence level (0-100)
`status*`	`'learning' \| 'confident' \| 'needs_feedback' \| 'outdated'`	—	Learning status
`learnedAt`	`Date`	—	When this was learned
`lastUsed`	`Date`	—	Last time this knowledge was used
`usageCount`	`number`	—	How many times this has been applied
`example`	`string`	—	Example of this learning in action

Usage

Import and implementation example

import { AILearningProgress } from '@/blocks/ai-transparency/ai-learning-progress'

export default function UserProfile() {
 const learnings = [
 {
 id: '1',
 domain: 'preferences',
 label: 'Prefers code examples',
 description: 'User learns best with practical examples',
 confidence: 95,
 status: 'confident',
 learnedAt: new Date(),
 usageCount: 24,
 },
 {
 id: '2',
 domain: 'communication',
 label: 'Conversational tone',
 confidence: 88,
 status: 'confident',
 learnedAt: new Date(),
 usageCount: 30,
 },
 ]

 const milestones = [
 {
 id: '1',
 label: 'First learning',
 achieved: true,
 achievedAt: new Date(),
 },
 {
 id: '2',
 label: 'Profile 50% complete',
 achieved: false,
 progress: 75,
 },
 ]

 const handleFeedback = (id: string, isCorrect: boolean) => {
 // Update learning confidence based on feedback
 }

 const handleForget = (id: string) => {
 // Remove this learning
 }

 return (
 <AILearningProgress
 learnings={learnings}
 milestones={milestones}
 variant="dashboard"
 showMilestones={true}
 enableFiltering={true}
 onProvideFeedback={handleFeedback}
 onForget={handleForget}
 />
 )
}

Built With

3 components

This block uses the following UI components from the design system:

Button Badge Tooltip

Features

Built-in functionality

Domain categorization: Organized by preferences, communication, expertise, workflow, context, behavior
Confidence tracking: Shows AI confidence level for each learning
Learning status: Learning, confident, needs feedback, or outdated states
Usage tracking: Shows how many times each learning has been applied
Milestone achievements: Gamified progress tracking with unlockable achievements
Domain filtering: Filter learnings by specific domains
Feedback mechanism: Users can confirm or correct AI learnings
Forget option: Allow users to remove incorrect learnings
Domain reset: Reset all learnings in a specific domain
Progress visualization: Progress bars for each domain showing average confidence
Example display: Show real examples of learnings in action
Dark mode support: Full dark mode with proper contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

All interactive elements use semantic buttonsProgress bars include text percentagesStatus badges use both color and text labels

Keyboard Navigation

Key	Action
`Tab`	Navigate through items and actions
`Enter / Space`	Activate buttons and toggles

Notes

Color coding supplemented with icons and text
Confidence levels shown as both progress bars and percentages
Milestone progress clearly indicated
Consider adding aria-live for real-time learning updates

Related Components

AI Context Awareness AI Feedback Loop User Profile Progress Tracker