AI Timeline Results
AI
Results
Block
Chronological display of AI-generated results and process steps. Shows status progression with timestamps, source indicators, expandable details, and live updates.
Card Variant
Full timeline with progress tracking
Data Analysis Pipeline
2/5 completed
Live
Error State
Timeline with failed step
API Integration
1/3 completed
2:41 PMSystem
2:41 PMSystem
—AI
Inline Variant
Lightweight timeline without card wrapper
Query received and parsed
NLP
Natural language query analyzed for intent and entities
10:23:01 AMSystem
Database search completed
Search
Found 847 matching records across 3 tables
10:23:03 AMAI
Generating analysis report
Processing aggregated data and creating visualizations
10:23:05 AMAI
User review requested
Waiting for approval on data export
10:23:06 AMUser
Send notification
—System
Compact Variant
Minimal dot timeline for sidebars
Query received and parsed10:23:01 AM
Database search completed10:23:03 AM
Generating analysis report10:23:05 AM
User review requested10:23:06 AM
Send notification—
Props
AITimelineResults component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
items* | TimelineItem[] | — | Timeline items to display |
title | string | 'Results Timeline' | Card title |
variant | 'card' | 'inline' | 'compact' | 'card' | Display variant |
showTimestamps | boolean | true | Show timestamp for each item |
showSources | boolean | true | Show source indicator (AI/User/System) |
maxVisible | number | 10 | Items shown before "show more" |
live | boolean | false | Show live update indicator |
TimelineItem Type
Structure for individual timeline items
interface TimelineItem { id: string title: string description?: string timestamp: string status: 'completed' | 'in_progress' | 'error' | 'pending' source: 'ai' | 'user' | 'system' icon?: LucideIcon details?: string // Expandable detail text link?: { label: string; url: string } tags?: string[]}Usage
Import and implementation example
import { AITimelineResults } from '@/blocks/ai-conversation/ai-timeline-results'
<AITimelineResults title="Search Results" items={[ { id: '1', title: 'Query parsed', timestamp: '10:23 AM', status: 'completed', source: 'system', }, { id: '2', title: 'Generating response', timestamp: '10:23 AM', status: 'in_progress', source: 'ai', }, ]} live/>Features
Built-in functionality
- Three variants: Card, inline, and compact display modes
- Status tracking: Completed, in-progress, error, and pending states
- Source indicators: AI, user, and system source badges
- Expandable details: Click timeline items to reveal detail text
- Progress bar: Visual progress indicator in card header
- Live indicator: Animated badge for actively updating timelines
- Show more: Pagination with configurable max visible items
- External links: Optional links on individual timeline items
Accessibility
Accessibility considerations
ARIA Attributes
Status conveyed through icons and text labelsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between expandable items |
| Enter / Space | Toggle item details |
Notes
- In-progress spinner has accessible label
- Color-coded statuses always paired with text