Studio
2

Response Stream

Installation

pnpm dlx @mielui/svelte add response-stream

Usage

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. Source delivery, completion callbacks, wrapping, 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, independently of reveal speed. Lines take their natural height as text wraps. Reduced motion displays static text immediately; live sources still update as chunks arrive.

Replacing a source or removing the component invalidates pending chunks, completion, and errors from that source. The component requests iterator cleanup; cancel the underlying network request in your application. Plain text remains available if the optional text renderer cannot load.

Live responses

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

import { ResponseStream } from '@mielui/svelte/components/response-stream';

<ResponseStream textStream={modelResponse} />

Complete responses

For a complete string, use speed from 1 (slowest) to 100 (fastest) to control the reveal pace.

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

Stop and retry a response

Use streaming with cumulative string snapshots when your application owns delivery. Stop the request or timer separately; keep the last snapshot visible. This example can interrupt delivery, preserve partial text, and start a fresh response.

Complete text

API reference

ResponseStream

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

Prop Type Default
textStream Required string | AsyncIterable<string>

A complete response or an async source of response chunks.

 —
streaming boolean | undefined

Treat string values as cumulative snapshots of one live response.

 false
speed number | undefined

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

 20
characterChunkSize number | undefined

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

 —
onComplete (() => void) | undefined —
onError ((error: unknown) => void) | undefined —
as keyof SvelteHTMLElements | undefined 'span'
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —