Streaming Text

Usage

import { StreamingText } from '@wdzyi/ui';

<StreamingText
  text='Connor designs products end to end. [1]'
  sources={[{ name: 'Connor Woods', domain: 'wdzyi.xyz', href: 'https://wdzyi.xyz' }]}
  followUps={['Where is Connor based?']}
  onFollowUp={ask}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

textstring

The answer. A [1] on its own cites the first source, and so on. Text that grows carries on from where it had got to, so it can be fed as it arrives, and a different text starts again.

sourcesSource[]

A name, a domain, a link and an icon. Without an icon, its first letter stands in.

followUpsstring[]

Questions to ask next, shown once it’s done.

pacenumber = 100

Roughly how long a word takes, in ms, so 100 is about ten words a second. It’s never quite even.

instantboolean = false

Shows the whole answer at once, for one that arrived earlier in the conversation.

onFollowUp, onRetry, onDonefunctions

A follow-up was chosen, Retry was pressed, and it finished.

Notes

• Words come a word or two at a time, about ten a second and never evenly, each out of a 6px blur over 420ms, with a beat of a third of a second at the end of each sentence, the way a model sends them rather than to a metronome.
• The timing is Stream’s, which the package exports too: Stream for plain text, with paragraphs, or typed a letter at a time, and useStream for anything that draws its own words. A text keeps the same rhythm each time, so streamTime can say how long it will take.
• Copy takes the text without its citation marks. Good and Bad stay pressed until they’re pressed again.
• The paragraph is marked busy while it streams, so a screen reader waits for the whole answer.
• With reduced motion, the whole answer appears at once.