Eidetic

AI Voice Transcript

AI
Results

Voice-to-text transcription with speaker identification, confidence scores, playback controls, and AI-powered features like summarization and keyword extraction. Supports live transcription, editing, and export.

Compact Variant

Minimal live transcription display

Live transcription
LIVE
3:00
0:00User:Hello, can you help me understand this code?
0:03AI Assistant:Of course! I would be happy to help. What specific part would you like me to explain?
0:08User:The async function syntax is confusing me.

Standard Variant

Transcript with playback controls

Voice Transcript
0:08 / 3:00
User

Hello, can you help me understand this code?

AI Assistant

Of course! I would be happy to help. What specific part would you like me to explain?

User

The async function syntax is confusing me.

Detailed Variant

Full featured transcript with search, filter, and AI summary

Voice Transcript

4 segments • 4:00

0:00 / 4:00

AI Summary

User requested help debugging a React component with state update issues. AI provided guidance on event handler syntax.

User

I need help debugging this React component.

debugging
React
concern
AI

I can help with that. Let me analyze your component structure first.

analyze
component
User

The state is not updating when I click the button.

state
button
click
AI

That suggests an issue with your event handler. Make sure you are using the correct syntax for state updates.

event handler
state updates
4 of 4 segmentsTranscription complete

Live Transcription

Real-time transcription with live badge

Voice Transcript
LIVE
User

Hello, can you help me understand this code?

AI Assistant

Of course! I would be happy to help. What specific part would you like me to explain?

User

The async function syntax is confusing me.

Props

AIVoiceTranscript component API reference

PropTypeDefaultDescription
segments*TranscriptSegment[]Transcript segments with speaker and content
status'live' | 'processing' | 'complete' | 'error''complete'Current transcription status
totalDurationnumber0Total duration in seconds
currentPositionnumber0Current playback position in seconds
highlightsTranscriptHighlight[]Text highlights (keywords, actions, questions)
isPlayingbooleanfalseWhether audio is playing
onPlayPause() => voidCallback when play/pause is toggled
onSeek(position: number) => voidCallback when seeking to a position
onEditSegment(segmentId: string, newContent: string) => voidCallback when segment is edited
onExport(format: 'txt' | 'srt' | 'json') => voidCallback when transcript is exported
onRequestSummary() => voidCallback when AI summary is requested
summarystringAI-generated summary of the transcript
showSpeakersbooleantrueShow speaker labels and avatars
showTimestampsbooleantrueShow timestamps for each segment
showConfidencebooleanfalseShow transcription confidence scores
allowEditingbooleanfalseAllow editing transcript segments
searchablebooleantrueEnable search functionality
variant'compact' | 'standard' | 'detailed''standard'Display mode variant
autoScrollbooleantrueAuto-scroll to current segment during playback
classNamestringAdditional CSS classes

TranscriptSegment Type

PropTypeDefaultDescription
id*stringUnique segment identifier
speaker*'human' | 'ai' | 'system'Speaker type
speakerNamestringSpeaker display name
content*stringTranscribed text
timestamp*numberStart time in seconds
durationnumberDuration in seconds
confidencenumberConfidence score (0-100)
isEditedbooleanWhether this was manually edited
originalContentstringOriginal content before edits
emotionsstring[]Detected emotions
keywordsstring[]Extracted keywords

Usage

Import and implementation example

import { AIVoiceTranscript } from '@/blocks/ai-transparency/ai-voice-transcript'
export default function VoiceChat() {
const [segments, setSegments] = useState([])
const [isPlaying, setIsPlaying] = useState(false)
const [currentPosition, setCurrentPosition] = useState(0)
const handleEdit = (id: string, newContent: string) => {
setSegments(prev => prev.map(seg =>
seg.id === id
? { ...seg, content: newContent, isEdited: true, originalContent: seg.content }
: seg
))
}
const handleExport = (format: 'txt' | 'srt' | 'json') => {
// Export transcript in selected format
}
const handleRequestSummary = async () => {
// Generate AI summary
const summary = await generateSummary(segments)
setSummary(summary)
}
return (
<AIVoiceTranscript
segments={segments}
status="complete"
totalDuration={300}
currentPosition={currentPosition}
isPlaying={isPlaying}
summary={summary}
showSpeakers={true}
showTimestamps={true}
showConfidence={true}
allowEditing={true}
searchable={true}
variant="detailed"
onPlayPause={() => setIsPlaying(!isPlaying)}
onSeek={setCurrentPosition}
onEditSegment={handleEdit}
onExport={handleExport}
onRequestSummary={handleRequestSummary}
/>
)
}

Built With

5 components

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

Features

Built-in functionality

  • Speaker identification: Distinguish between human, AI, and system speakers
  • Confidence scores: Display transcription accuracy for each segment
  • Playback controls: Play/pause and seek through audio with progress bar
  • Live transcription: Real-time transcription with live badge and auto-scroll
  • Segment editing: Edit transcription errors with original content tracking
  • Search and filter: Search transcript and filter by speaker
  • AI summarization: Generate AI-powered summaries of conversations
  • Keyword extraction: Automatically identify and highlight key terms
  • Emotion detection: Optional emotion tagging for segments
  • Export options: Export as TXT, SRT subtitles, or JSON
  • Copy to clipboard: Copy entire transcript with formatting
  • Timestamp navigation: Click timestamps to jump to that position
  • Dark mode support: Full dark mode with proper contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

Playback controls use semantic media controlsSpeaker avatars have proper labelsLive regions for real-time transcription updates

Keyboard Navigation

KeyAction
TabNavigate through controls and segments
SpacePlay/pause playback
Left/Right arrowsSeek backward/forward
EnterJump to timestamp or edit segment

Notes

  • Confidence indicators use both color and percentage
  • Live status clearly indicated with animated badge
  • Speaker types distinguished by icons and colors
  • Consider adding aria-live="polite" for new segments in live mode