Streaming ui Ai Questions

Follow the stream only while the user is already at the bottom. Track a "stick to bottom" flag from scroll position, turn it off as soon as the user scrolls up, and show a "Jump to latest" button instead of pulling them back down. Scroll when the content actually grows (a ResizeObserver on the message container works well), and turn sticking back on when the user sends a new message or clicks the button.

Keep finished messages stable and isolate the one that is still streaming, so only that bubble re-renders. Wrap message rows in React.memo with stable keys and unchanged object references, and batch incoming chunks so you update state at most once per animation frame instead of once per token.

Render markdown to React elements with a library like react-markdown, which escapes raw HTML by default, instead of piping parsed HTML into dangerouslySetInnerHTML. To avoid flicker and wasted work, split the text into blocks and memoize finished blocks so only the last one re-parses, and handle unclosed syntax such as an open code fence, either yourself or with a streaming-aware renderer like Streamdown.

Model each assistant reply as a message with a status (streaming, done, stopped or error) and a list of versions. Stop aborts the request and marks the current version as stopped while keeping its text. Regenerate rebuilds the history up to the user message before that reply, streams a new version into the same message slot, and keeps older versions available so nothing the user saw is silently lost.

Do not let the screen reader announce the answer token by token. Keep the streaming text out of an active live region, and use a separate, visually hidden polite status region to announce short lifecycle messages such as "Generating response" and "Response complete". Keep focus in the input, give each message a clear structure the user can navigate, and test with real screen readers because live region support varies.