AI Streaming Chat Window
Problem statement
Streaming chat is the signature UI of the AI era — every product from ChatGPT to Perplexity to Cursor renders bot replies token-by-token as they arrive. The reason isn't just aesthetics. Streaming dramatically improves perceived latency: a 4-second response that starts rendering at 200ms feels faster than a 1-second response that arrives all at once.
Build a chat interface that progressively renders an assistant message as it streams in. Include a Send button that becomes a Stop button while a response is streaming, a typing indicator that appears before the first token, and an auto-scroll behavior that respects the user — if they've scrolled up to read, don't yank them back to the bottom.
The architectural insight is separating three orthogonal concerns: token aggregation (state mutation as chunks arrive), cancellation (clean teardown via a ref flag or AbortController), and scroll discipline (a pinned-to-bottom mode that releases when the user takes scroll control). Conflating any two will produce subtle bugs.
Requirements & constraints
- Render assistant messages progressively, not all at once
- Show a typing indicator (animated dots) before the first token arrives
- Send button becomes a Stop button while streaming; Stop halts the stream
- Auto-scroll to bottom only when the user is already near the bottom
- Show a 'Jump to latest' pill when the user has scrolled up during streaming
- Enter sends the message; Shift+Enter inserts a newline
- Empty input cannot be submitted
How to approach AI Streaming Chat Window
The strategy an interviewer expects you to reach for.
How I'd Think About This Problem Streaming chat looks like one feature but is really three independent systems pretending to cooperate: a producer emitting tokens over time, a reducer aggregating those tokens into message state, and a viewport that renders the message and reacts to scroll position. Most candidates conflate the three — they write a single useEffect that fetches, renders, and scrolls — and then everything breaks the moment the user does something unexpected like scrolling up while a reply is streaming, or hitting Stop, or backgrounding the tab. Before I write a line, I draw three boxes on the whiteboard: Source → State → View. The source emits tokens. The state aggregates them into a message. The view renders and reacts to scroll. Each arrow is a contract — and most bugs in chat UIs come from violating those contracts.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.