Store the raw Markdown delta stream as the message source of truth. Do not store a partly-built React tree or append HTML directly into the DOM. When the stream finishes, the exact same source can be rendered again, copied, persisted, and rehydrated after a refresh.

type AssistantMessage = {
  id: string;
  markdown: string;     // every received delta, in order
  status: 'streaming' | 'complete' | 'interrupted';
};

Render the current markdown with a Markdown renderer on each batched update. It is fine if a parser treats unfinished syntax as plain text for a moment. It is not fine if your data model loses the original answer while trying to be clever.

Imagine these three deltas arriving one after another:

1. Try this:
```tsx
const Card = () =>
2.  <div>Hello</div>;
3. 
```
Done.

After delta 1, the user should already see an in-progress code block. Delta 2 extends that same block; delta 3 closes it and adds prose. The copy button should keep its identity throughout. An unfinished table can fall back to readable lines until it becomes a valid table, and an unfinished link can remain text until its destination is complete.

Prefer graceful fallback over a pile of token-level special cases. If your parser cannot safely render a construct yet, show its source in the current message rather than guessing at a structure that may change on the next chunk.

Re-parsing a long answer for every token can make syntax highlighting flicker and can re-render hundreds of already-complete blocks. First batch incoming deltas to an animation frame and measure. If the answer is long enough to need more work, split it at confirmed block boundaries and memoize the closed prefix. Keep the uncertain tail live: a paragraph may still turn into a table or continue a list when another line arrives.

const blocks = splitMarkdownIntoBlocks(markdown);
const { closed, tail } = partitionAtConfirmedBoundary(blocks);
// Cache closed blocks; re-render tail as new deltas arrive.

This is a rendering optimization, not a different data model. Keep one raw source string, derive blocks from it, and profile before adding a sophisticated incremental parser.

A final Markdown snapshot can pass while the experience is broken. Write a test that feeds the three deltas above in order and inspects the UI after each one. Check that code is readable before the closing fence, the copy control does not remount, and the final text has one code block followed by “Done.” Repeat with an incomplete link, a table header that gains its separator row, cancellation mid-fence, and a refreshed page restored from raw source.

If you are explaining this in an interview, walk through one of those intermediate frames. It shows why “just use a Markdown renderer” is only the starting point.

Users copy code while it is streaming. Give each code block a stable copy button, preserve whitespace with a monospace renderer, and delay expensive syntax highlighting until the block is complete if highlighting makes typing janky. A plain but stable in-progress code block is better than a rainbow block that redraws every 30ms.

Never execute model-generated code merely because it rendered in a code block. If your product offers a preview, run it in a sandbox with an explicit user action and clear resource limits.

Rendering correctness is only half the exercise. A response that repeatedly moves the scroll position, steals focus, or announces every token to a screen reader is technically streaming but unpleasant to use. Keep focus on the composer or the control the user chose. Auto-scroll only while the reader is already near the bottom; if they scroll up, let them read.

For assistive technology, announce a short status such as “Assistant is responding,” then announce a completed answer or batched meaningful chunks. Do not place a rapidly changing token stream in an assertive live region. If the stream is interrupted, retain the partial source with a clear “Interrupted” label and a retry action. That makes recovery honest instead of erasing what the user already saw.

Try a slow simulated stream, select text inside a code block, and keep typing in the composer. If selection jumps or keystrokes lag, that is a concrete signal to reduce rerenders or highlighting work.

Markdown can contain links, images, HTML-like payloads, and deceptive text. Render through an allowlist, sanitize any HTML path, and validate outbound URLs before opening them. Do not let a model response inject arbitrary tags, inline event handlers, or a browser URL with sensitive query data.