mielui
AI components

Response Stream

Reveal a complete response at a chosen pace, or render chunks from a model as they arrive.

Installation

pnpm dlx @mielui/svelte add response-stream

Usage

Pass the async iterable returned by your model as textStream. A caret marks the wait before the first chunk; later chunks render as soon as they arrive.

<script lang="ts">
    import { ResponseStream } from '@mielui/svelte/components/response-stream';

    let { response }: { response: AsyncIterable<string> } = $props();
</script>

<ResponseStream textStream={response} />

For a complete string, speed sets the reveal pace from 1, the slowest, to 100, the fastest. The default is 20.

<ResponseStream textStream="Draft saved." speed={70} />

Responses up to 4,000 UTF-16 code units use rolling text. Longer responses render as plain text to keep streaming work bounded as the answer grows. Reduced motion also renders plain text, and a completed response settles into plain text once its last characters arrive, so words wrap whole. Source delivery, completion callbacks, and accessible live status are the same in both modes.

Static text reveals whole graphemes, including emoji and combining marks. Arrival motion stays within the theme's panel duration, whatever the reveal speed.

Replacing a source or removing the component discards pending chunks, completion, and errors from that source. The component asks the iterator to clean up; cancel the underlying network request in your application.

Examples

Async stream

Chunks from an async iterable appear as they arrive. A caret waits until the first one lands.

Stop and retry

Set streaming and pass cumulative string snapshots when your application owns delivery. Stop the request or timer yourself; the last snapshot stays visible.

Complete text

Completion

onComplete enables Replay once the whole response has been revealed. characterChunkSize={3} reveals three characters per step.

Events and pace

onComplete runs once the whole response has been revealed, which is when to enable the composer again or show the actions under a message. onError runs with the error if the stream fails part way.

characterChunkSize sets how many characters appear per step; by default the step follows speed. Raise it for long answers. as sets the rendered element, span by default. The component draws the text itself and does not render children.

API reference

ResponseStream

Renders a streamed text response and a caret while waiting for the first chunk.

  • textStream Required
    string | AsyncIterable<string>

    A complete response or an async source of response chunks.

  • streaming
    boolean

    Treat string values as cumulative snapshots of one live response.

    Default false

  • speed
    number

    1 is slowest and 100 is fastest: reveal pace for static strings, roll duration for arrivals. Live chunks render on arrival.

    Default 20

  • characterChunkSize
    number

    Whole graphemes revealed per step; finite values are rounded down with a minimum of one.

  • onComplete
    (() => void)

    Called when the stream ends.

  • onError
    ((error: unknown) => void)

    Called with the error when the async source throws.

  • as
    keyof SvelteHTMLElements

    HTML element to render.

    Default 'span'

  • class
    (string & (ClassValue | null))

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.