The Canonical Chat Turn and Its UI States
Explore how to model a canonical chat turn that manages streaming AI responses through distinct UI states like idle, loading, streaming, and failed. Understand how to store state data separately from render logic and build a React-friendly turn structure to ensure reliable and predictable updates in AI-powered interfaces.
The previous lesson asked what a turn consists of. This lesson works out the answer, starting from a concrete example of what a UI actually does mid-turn. A minimal chat UI already shows the problem. You submit a user message, the assistant message appears immediately but starts empty, then text arrives in fragments, then the message stops changing. A single request or response mental model does not explain the middle, where the UI renders partial output while the network is still active.
That visible timeline is the course’s canonical unit of work, a chat turn. One turn begins when the user submits input and ends when the assistant's output is settled, even if the output arrives incrementally or pauses to run a tool.
To ground the vocabulary, inspect a single-turn timeline and mark the points where a React tree can re-render due to new information arriving.
In this canonical sequence, the UI can update when the user message is accepted, on every partial assistant delta, after a tool result changes what gets streamed next, and when the turn reaches a ...