AI Relationship Stage
Trust progression indicator showing the relationship journey from stranger to trusted advisor. Displays metrics, progress to next stage, and unlocked features at each level.
Preview - Acquaintance Stage
New user progressing from stranger
Acquaintance
Learning your preferences
Interactions
15
Success Rate
68%
Time Together
3 days
Tasks Done
5
Unlocked Features
Partner Stage
Advanced user with established trust
Partner
Deeply understanding your needs
Interactions
215
Success Rate
87%
Time Together
2 months
Tasks Done
112
Unlocked Features
Trusted Advisor Stage
Maximum trust level achieved
Trusted Advisor
Your go-to AI assistant
Interactions
550
Success Rate
93%
Time Together
6 months
Tasks Done
320
Unlocked Features
Compact Mode
Minimal display with progress bar
Without Progress Tracking
Show only current stage and metrics
Collaborator
Working together effectively
Interactions
215
Success Rate
87%
Time Together
2 months
Tasks Done
112
Props
AIRelationshipStage component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
stage | 'stranger' | 'acquaintance' | 'collaborator' | 'partner' | 'trusted_advisor' | 'acquaintance' | Current relationship stage |
metrics | StageMetrics | — | Current metrics (interactions, success rate, time using, tasks completed) |
stages | StageConfig[] | — | Custom stage configurations (overrides defaults) |
showProgress | boolean | true | Show progress to next stage |
showMetrics | boolean | true | Show metrics breakdown |
showUnlocks | boolean | true | Show unlocked features |
compact | boolean | false | Compact display mode |
onViewDetails | (stage: RelationshipStage) => void | — | Callback when user views stage details |
className | string | — | Additional CSS classes |
StageMetrics Type
| Prop | Type | Default | Description |
|---|---|---|---|
interactions* | number | — | Number of interactions |
successRate* | number | — | Success rate percentage (0-100) |
timeUsing* | string | — | Time using the AI (e.g., "2 weeks") |
tasksCompleted* | number | — | Tasks completed together |
StageConfig Type
| Prop | Type | Default | Description |
|---|---|---|---|
stage* | RelationshipStage | — | Stage identifier |
label* | string | — | Display name |
description* | string | — | Description of this stage |
unlocks* | string[] | — | What's unlocked at this stage |
icon* | LucideIcon | — | Icon for this stage |
color* | string | — | Color classes |
gradient* | string | — | Background gradient classes |
requirements | Partial<StageMetrics> | — | Minimum metrics to reach this stage |
Usage
Import and implementation example
import { AIRelationshipStage } from '@/blocks/ai-transparency/ai-relationship-stage'
export default function Example() { const metrics = { interactions: 47, successRate: 78, timeUsing: '2 weeks', tasksCompleted: 18, }
return ( <AIRelationshipStage stage="acquaintance" metrics={metrics} showProgress={true} showMetrics={true} showUnlocks={true} onViewDetails={(stage) => { console.log('Viewing details for:', stage) }} /> )}Features
Built-in functionality
- Five relationship stages: Stranger, Acquaintance, Collaborator, Partner, Trusted Advisor
- Visual progression: Timeline showing past, current, and future stages
- Progress calculation: Automatic progress to next stage based on metrics
- Metrics display: Shows interactions, success rate, time together, and tasks completed
- Unlocked features: Displays what capabilities are available at current stage
- Stage requirements: Shows what's needed to reach next level
- Compact mode: Minimal version with just progress bar
- Custom stages: Override default stage configurations
- Dark mode support: Full dark mode with proper contrast
Default Relationship Stages
Built-in stage progression
1. Stranger
Just getting started
Requirements: None
2. Acquaintance
Learning your preferences
Requirements: 10+ interactions, 60%+ success rate
3. Collaborator
Working together effectively
Requirements: 50+ interactions, 75%+ success, 20+ tasks
4. Partner
Deeply understanding your needs
Requirements: 200+ interactions, 85%+ success, 100+ tasks
5. Trusted Advisor
Your go-to AI assistant
Requirements: 500+ interactions, 90%+ success, 300+ tasks
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
Stage markers are interactive buttonsProgress bar has implicit progress roleCompleted stages have checkmark iconsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between stage markers |
| Enter | View stage details |
Notes
- Consider adding aria-label describing relationship progression
- Progress percentage should be announced to screen readers
- Stage names and descriptions provide context
- Unlocked features are clearly labeled and grouped