Array of transcription entries (unsorted is fine)
Time window in milliseconds for grouping (default: 5000ms)
Array of grouped transcriptions, sorted by time
Groups consecutive entries from the same speaker if they're within the specified time window. This creates a more readable display by combining related messages into coherent speech blocks.
windowMs has passed since the last entryThis hook is used internally by TranscriptViewer, but you can use it directly
when building custom transcript displays. It's memoized for performance.
useMemo to avoid recalculating on every renderentries or windowMs changesBasic usage with default window:
function TranscriptDisplay({ entries }) {
const groups = useTranscriptionGrouping(entries);
return (
<div>
{groups.map(group => (
<TranscriptionGroup
key={`${group.speaker}-${group.startTime.getTime()}`}
group={group}
/>
))}
</div>
);
}
Custom window with date dividers:
function TranscriptWithDates({ entries }) {
const groups = useTranscriptionGrouping(entries, 3000); // 3 second window
return (
<div>
{groups.map((group, index) => {
const prevGroup = index > 0 ? groups[index - 1] : null;
const showDate = needsDateDivider(group, prevGroup);
return (
<React.Fragment key={`${group.speaker}-${group.startTime.getTime()}`}>
{showDate && <DateDivider date={group.startTime} />}
<TranscriptionGroup group={group} />
</React.Fragment>
);
})}
</div>
);
}
Export transcript as text:
function ExportButton({ entries }) {
const groups = useTranscriptionGrouping(entries, 10000); // 10s window for export
const handleExport = () => {
const text = groups
.map(g => `[${g.startTime.toLocaleTimeString()}] ${g.speakerName}: ${g.combinedText}`)
.join('\n\n');
downloadAsText(text, 'transcript.txt');
};
return <Button onClick={handleExport}>Export Transcript</Button>;
}
Hook to group transcription entries by speaker within time windows.