Renders a single group of transcription entries from one speaker within a time window. This component is used internally by TranscriptViewer but can also be used directly for custom transcript layouts.
Each group displays:
colors.localUser (default blue)getSpeakerColor() based on their user IDWhen showConfidence is enabled, displays a colored dot:
When showSentiment is enabled and entries have sentiment data (from mood analysis):
Basic usage within a custom transcript view:
function CustomTranscriptView({ groups, localUserId }) {
return (
<div className="transcript">
{groups.map(group => (
<TranscriptionGroup
key={`${group.speaker}-${group.startTime.getTime()}`}
group={group}
isLocalUser={group.speaker === localUserId}
showTimestamp
/>
))}
</div>
);
}
With all indicators and click handler:
<TranscriptionGroup
group={group}
isLocalUser={isLocal}
showTimestamp
showConfidence
showSentiment
onClick={() => seekToTimestamp(group.startTime)}
colors={{
localUser: '#6366f1',
confidenceHigh: '#22c55e',
sentimentPositive: '#10b981',
}}
styles={{
fontSize: '0.9rem',
speakerIndicatorWidth: 6,
}}
/>
Minimal display (text only, no metadata):
<TranscriptionGroup
group={group}
isLocalUser={false}
showTimestamp={false}
showConfidence={false}
showSentiment={false}
styles={{ speakerIndicatorWidth: 0 }} // Hide colored bar
/>
TranscriptionGroup component - displays a group of entries from the same speaker.