Before the answer appears: building a streaming interface

Make waiting visible

The user is already waiting before the first text appears. I separated waiting for the first chunk from streaming, and allow stopping in either state. The slow scenario adds a delay so this behaviour can be inspected.

The demo has two preset topics instead of an open prompt box, so it is clear that this is not a live question-answering service. Speed changes the local delay between chunks; interruption fails after some text has arrived.

Stopping also means refusing late chunks

Clearing the screen is insufficient when work may still be running. A late chunk can refill it. Each attempt has its own generation number. Stop, reset and a new attempt invalidate the old number; both text and status updates check ownership.

AbortController asks the local simulator to stop waiting. The generation check rejects old callbacks even when a source ignores cancellation. Tests deliberately use such a source and deliver late chunks, errors and completion after a newer action.

For a real service, stopping browser reads does not guarantee that server inference or billing has stopped. Cancellation would also need to follow the service contract. This example checks client ownership and recovery.

Retry needs a clear meaning

An error keeps the text already received and displays an interruption message. Restoring the simulated connection and retrying clears it and starts from the beginning. The demo does not implement resumable streams.

Start is disabled while waiting or streaming, and the state layer also rejects duplicate starts. Clearing cancels the active attempt and returns to the initial view.

The answer is rendered as plain text, not HTML. Status announcements occur on phase changes rather than on every chunk. The page does not force the reader to the bottom as text arrives.

The browser check found a concrete bug: globally disabling animations for reduced motion left the Ant Design dropdown at its initial zero scale. I synchronized the system preference with ConfigProvider’s motion option so the component could handle its own final visibility, then rechecked topic selection and keyboard interaction.

Connect the demo to code and checks

The implementation separates stream.ts, which owns state and chunk identity, from App.tsx, which presents controls with React and Ant Design. Tests feed events into the state layer without relying on network speed or playing a full answer.

Ten core tests cover chunk ordering, duplicate starts, stopping before the first chunk, recovery, stale chunks after reset and disposal. Browser checks separately cover controls, the actual simulation and mobile layout. An SSE integration would also require chunk-boundary parsing, timeouts, server error contracts and authorization.