AI Coauthor Badge
Lightweight component for displaying AI/human authorship attribution. Shows the percentage split between human and AI-generated content with badge, inline, and card variants.
Badge Variant
Compact authorship indicator with tooltip
Inline Variant
Horizontal layout for document headers
Card Variant
Card with progress bar and stats
Authorship
Pure AI Content
Card showing 100% AI-generated content
Authorship
Props
AICoauthorBadge component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
stats* | AuthorshipStats | — | Authorship statistics with human/AI percentages |
variant | 'badge' | 'inline' | 'card' | 'badge' | Display variant |
showHighlighting | boolean | false | Whether authorship highlighting is active |
onHighlightingChange | (enabled: boolean) => void | — | Callback when highlighting toggle changes |
Type Interface
AuthorshipStats data model
interface AuthorshipStats { humanPercentage: number // 0-100 aiPercentage: number // 0-100 totalEdits?: number // Optional edit count}Usage
Import and basic examples
import { AICoauthorBadge } from '@/blocks/ai-transparency/ai-coauthor-badge'
// Simple badge<AICoauthorBadge stats={{ humanPercentage: 65, aiPercentage: 35 }}/>
// Inline with highlighting toggle<AICoauthorBadge variant="inline" stats={{ humanPercentage: 55, aiPercentage: 45 }} showHighlighting={isHighlighting} onHighlightingChange={setIsHighlighting}/>
// Card variant<AICoauthorBadge variant="card" stats={{ humanPercentage: 40, aiPercentage: 60, totalEdits: 8 }}/>Built With
3 componentsThis block uses the following UI components from the design system:
Simplification Note
Simplified from AI Coauthor Indicator
Simplified Component
This is a streamlined version of the original AI Coauthor Indicator (~500 lines reduced to ~250 lines). It focuses on the most common use case — showing authorship attribution — without the detailed segment-level editing features. For segment-level content tracking, consider using the original AI Coauthor Indicator directly.
Features
Built-in functionality
- Three variants: Badge, inline, and card display modes
- Auto-detection: Automatically determines human/AI/mixed authorship type
- Progress visualization: Split progress bar showing human vs AI contribution
- Highlighting toggle: Optional toggle for showing authorship highlighting
- Tooltip details: Badge shows detailed breakdown on hover
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Authorship values conveyed via text labelsTooltip accessible via keyboard focusKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus interactive elements |
| Enter / Space | Toggle highlighting |
Notes
- Color-coded indicators always paired with text labels
- Progress bar supplemented by percentage text