AI Chat
A focused chat card — answers stream in with folding reasoning, tool chips and cited sources, and people can switch chats and models, edit or retry a message into versions, rate replies and stop a reply mid-stream.
To lay the card out as a full page, with a conversation sidebar and a slot for generated code and documents, see AI Chat Page.
The card is a composition, so it follows your theme preset. Copy the source from the Code tab and replace the sample chats and models with your own; the replies here are scripted, and nothing is sent.
What it's made of
| Part | Component |
|---|---|
| Card shell | Card, filled on a grouped page |
| Chat and model menus | Dropdown Menu with radio rows |
| New chat | Icon Button with a Tooltip |
| Thread | Chat Bubble — the list follows new text and offers a jump to the latest |
| Reasoning | ChatBubbleSteps — a "Thought for 4s" line that folds open |
| Tool chips | Collapsible pills that open to the searches and sources, or the query and its result |
| Answer | Streaming Response with Citations and code blocks that copy |
| Message actions | ChatBubbleActions — copy, edit, retry, feedback and the version switcher |
| Failed reply | Streaming Response's failure alert, with the reason and Retry |
| Editing a message | Textarea |
| Composer | Prompt Input with attachments; Send turns into Stop |
A turn, top to bottom
Each turn is the question and its reply. The question is a quiet bubble on the end side; hover or focus it to copy or edit it. The reply is unboxed: the mark of the model that wrote it, a "Thought for 4s" line that opens to the reasoning, the tools it used, then the answer.
A tool is a pill. While it runs it says what it is doing beside a spinner; once done it says what it found ("4 sources", "40,213,880 rows") and opens to the detail. A tool that failed shows an alert glyph and what went wrong, and does not open.
Every citation in an answer is a numbered chip. Hover or focus it to read the source; press it to open the source in a new tab.
States
- Empty. A new chat shows a heading and three suggested prompts. Picking one sends it.
- Thinking. The reasoning line reads Thinking, and its newest words echo beside it while it is closed.
- Streaming. The answer arrives a few words at a time. Send becomes Stop, and Escape in the composer stops the reply too.
- Stopped. What arrived stays, marked Stopped, with every action available.
- Failed. What arrived stays; under it an alert says the reply failed and why, with Retry inside it. The replication-lag suggestion fails on its first try to show it.
Versions
Retry asks for the same question again; editing a question and sending it asks a new one in its place. Either way the turn keeps both, and a "2 / 2" switcher under the reply moves between them. Turns that came after a version stay with it, so switching back brings them back.
Chats and models
The title is a menu of recent chats, grouped by when they were last used, with New chat at the top. Switching chats crossfades the thread and never replays a finished reply. The model menu sets the model for new replies; earlier replies keep the mark of the model that wrote them.
Motion
Every movement explains a change, and none plays when the card first appears.
- A label that changes — Thinking to "Thought for 4s", a tool's running label to its result, the chat title, the model — fades in from just below.
- Reasoning and tool details open on the panel curve, and their content rises with the height; chevrons turn on the indicator spring.
- A new question, a new reply, an opened editor and a switched version fade in from just below.
- While you are at the bottom, the thread follows new text. Scrolling up lets go, and a pill brings you back to the latest.
- Menus open from their trigger on the popup clocks.
With reduced motion, every change happens at once and the answer still arrives a few words at a time: that is content arriving, not movement.
Keyboard and screen readers
- Tab moves through the chat menu, the model menu, New chat, each message's actions, the reasoning and tool toggles, the citations and the composer.
- Enter sends from the composer and from the edit field; Shift+Enter adds a line. Escape stops a streaming reply, cancels an edit, and closes a menu.
- The reasoning line and tool chips are buttons that report whether they are open. Feedback buttons report whether they are pressed.
- A reply starting and finishing is announced once, never word by word. Model and chat changes, versions, feedback and failures are announced in one polite status region.
- Status never rests on colour alone: a failed reply has an alert glyph and the words Reply failed, a stopped reply says Stopped, and a failed tool says what went wrong.
In a narrow card
The header title truncates before the model and New chat move, and below 24rem of card width the model shows its mark alone. Code blocks scroll sideways inside themselves. On touch screens message actions are always visible, and every control keeps a 44px target.