STT Renderer

Usage

00:00 - 00:03

Welcome to today's standup. Let's start with updates.

00:03 - 00:09

I shipped the streaming refactor yesterday and we're seeing 40% lower latency.

00:09 - 00:14

Next on my list is the speaker diarization fix

import TranscriptWaveGlyph from '@jamie/icons/TranscriptWaveGlyph'
import { SttRender } from '@jamie/ui/compose/stt-render'
 
export function SttRendererDemo() {
  return (
    <SttRender.List className="max-w-md">
      <SttRender.Segment>
        <SttRender.Timestamp startMs={0} endMs={3500} />
        <SttRender.Text>Welcome to today's standup. Let's start with updates.</SttRender.Text>
      </SttRender.Segment>
      <SttRender.Segment>
        <SttRender.Timestamp startMs={3500} endMs={9200} />
        <SttRender.Text>
          I shipped the streaming refactor yesterday and we're seeing 40% lower latency.
        </SttRender.Text>
      </SttRender.Segment>
      <SttRender.Segment>
        <SttRender.Timestamp startMs={9200} endMs={14800} />
        <SttRender.InterimText
          finalText="Next on my list is"
          nonFinalText=" the speaker diarization fix"
        >
          <TranscriptWaveGlyph className="ml-1 inline-block align-middle text-on-surface" />
        </SttRender.InterimText>
      </SttRender.Segment>
    </SttRender.List>
  )
}

Drop it in

import { SttRender } from '@jamie/ui/compose/stt-render'
 
<SttRender.List>
  <SttRender.Segment>
    <SttRender.Timestamp startMs={0} endMs={3500} />
    <SttRender.Text>Welcome to today's standup.</SttRender.Text>
  </SttRender.Segment>
</SttRender.List>

Render the in-progress segment

InterimText shows confirmed tokens beside provisional ones. Pass children to slot trailing content like an activity glyph.

<SttRender.InterimText
  finalText="Next on my list is"
  nonFinalText=" the speaker diarization fix"
/>

Add the activity glyph

import TranscriptWaveGlyph from '@jamie/icons/TranscriptWaveGlyph'
 
<SttRender.InterimText finalText={final} nonFinalText={nonFinal}>
  <TranscriptWaveGlyph className="ml-1 inline-block align-middle text-on-surface" />
</SttRender.InterimText>

Restyle the two-tone interim

<SttRender.InterimText
  finalText={final}
  nonFinalText={nonFinal}
  finalClassName="text-foreground"
  nonFinalClassName="text-muted-foreground italic"
/>

Override container spacing

<SttRender.List className="space-y-6">
  <SttRender.Segment className="space-y-2">{/* ... */}</SttRender.Segment>
</SttRender.List>

Props

`SttRender.Timestamp`

Prop	Type	Default	Description
`startMs`	`number`	—	Segment start in milliseconds. Renders `null` if `undefined`.
`endMs`	`number`	—	Segment end in milliseconds. Renders `null` if `undefined`.
`className`	`string`	—	Merged with the default label-medium / on-surface-variant styles.

`SttRender.InterimText`

Prop	Type	Default	Description
`finalText`	`string`	—	Confirmed tokens since the last segment flush.
`nonFinalText`	`string`	—	Provisional tokens, restyled to read as in-flux.
`finalClassName`	`string`	—	Merged onto the final-text `<span>`.
`nonFinalClassName`	`string`	—	Merged onto the non-final-text `<span>`.
`children`	`ReactNode`	—	Trailing slot, after the non-final span.