Text Stream
A hook that reveals text in word-sized steps at a steady pace, for replaying or smoothing a streamed agent response.
agentstextstream
Loading interactive preview
A hook that reveals text in word-sized steps at a steady pace, for replaying or smoothing a streamed agent response.
A hook that reveals text in word-sized steps at a steady pace, for replaying or smoothing a streamed agent response.
A hook that reveals text in word-sized steps at a steady pace, for replaying or smoothing a streamed agent response.
'use client';
import { useEffect, useMemo, useState } from 'react';
export interface TextStreamOptions {
/** Words revealed per second. */
speed?: number;
/** Pauses the reveal while false, keeping what is already shown. */
enabled?: boolean;
}
export interface TextStream {
/** The text revealed so far, always ending on a whole word. */
text: string;
/** True once every word of `source` is shown. */
done: boolean;
/** Shows the rest of the text at once, e.g. when the user skips ahead. */
skip: () => void;
}
/**
* Reveals `source` a word at a time at a steady pace. When `source` grows (a
* response still arriving from the model) the reveal continues from where it
* is; when it is replaced with unrelated text it starts over. Readers who
* prefer reduced motion get the full text immediately.
*/
export function useTextStream(source: string, { speed = 30, enabled = true }: TextStreamOptions = {}): TextStream {
const words = useMemo(() => source.match(/\S+\s*|\s+/g) ?? [], [source]);Unlock everything with Supporter
The complete source and every other premium item unlock with Supporter.
Unlock everything with Supporter
The complete source and every other premium item unlock with Supporter.