Streaming Text Since v4.1.0

Plain text that fades in each chunk as it streams.

Usage

Pass the accumulated text on every chunk, not the chunk alone, along with whether the reply is still streaming. It works with any provider.

import { BuiStreamingText } from '@/bui/ui/streaming-text';
<p buiStreamingText [text]="text()" [streaming]="streaming()"></p>

Example

Each appended chunk fades in while the text before it stays in place.

Which client should I follow up with first?

<div buiMessage>
<div buiMessageContent>
<p buiStreamingText [text]="text()" [streaming]="streaming()"></p>
</div>
</div>

Streaming

While streaming is true, only the text added since the last update animates. When streaming ends, or when the text is replaced rather than extended, it renders as a single plain segment with no fade. Line breaks in the text are kept.

For formatted replies, use Streaming Markdown instead.

API Reference

buiStreamingText

Renders the accumulated text as it streams.

InputTypeDefaultDescription
textstring''The accumulated text.
streamingbooleanfalseFades in new chunks while true.