AI Chat Page
The AI Chat card laid out as a full page — conversations in a sidebar, the thread and composer in the middle, and a slot beside them for the code the assistant writes.
For the chat card on its own — the same thread, replies and composer in one card — see AI Chat.
Every part of the page is a library component, so it follows your theme preset and needs no styles of its own. 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 |
|---|---|
| Conversation list | Sidebar — search, New chat, project groups with an add action, row badges, and the account in SidebarBrand with an Avatar |
| Header | SidebarTrigger, back and forward Icon Buttons, and Dropdown Menus for the chat and the model |
| Thread | Chat Bubble — the list follows new text and offers a jump to the latest |
| Reasoning, tools and answer | ChatBubbleSteps, Collapsible tool pills, Streaming Response with Citations |
| Message actions | ChatBubbleActions — copy, edit, retry, feedback and the version switcher |
| Composer | Prompt Input with attachments; Send turns into Stop |
| Code panel | Artifact Panel — resizable, with copy, and empty until there is code |
The thread behaves exactly as it does in AI Chat: reasoning and tools fold open, answers stream with citations, and a retry or an edit keeps both versions.
Chats
The sidebar opens with a search and New chat, then lists chats grouped by project; the ＋ beside a project starts a chat in it. A new chat takes its title from its first message.
Each row says what its chat is doing:
- A spinner while its reply is running. Replies keep running when you open another chat.
- A dot when a reply finished while you were elsewhere. Opening the chat clears it.
- A branch mark and a count when a message in it has more than one version.
Each of these is also spoken: the row's name ends with "replying", "new reply" or the number of versions.
The footer holds the account, with its menu above it.
Header
The first button hides the sidebar completely and brings it back; on a phone it opens the sidebar as a drawer. Back and forward move through the chats you opened, like a browser, and step aside in a narrow chat area. The title opens the chat's own menu: start another chat in the same project, or archive this one, which opens its neighbour. The model menu sets the model for new replies, and the last button shows or hides the code slot.
Code panel
The end edge of the page shows the code from the latest finished reply, so it stays in view while the conversation moves on. Until a reply has written code the panel says where it will appear. The code button in the header opens and closes it, and the panel slides in as the thread gives way. The panel starts open where the page is wide enough for it beside the thread; in a narrower page it lies over the thread when opened, and on a phone it is a sheet. It is a region named "Latest code", so it is a landmark screen readers can jump to.
Empty state
A new conversation should never open on a blank page. The empty thread shows a heading and three suggested prompts; picking one sends it. The first message replaces all of it.
Error states
A turn can fail in two places, and each is reported where its fix is.
- A message that never arrived stays in the thread marked "Not delivered", with its own Retry.
- A reply that failed says why in the thread, with Retry beside it; the tool that failed shows an alert glyph and what went wrong.
Neither discards what was written.
On a phone
Below the medium breakpoint the sidebar becomes a drawer, opened from the button in the header, and picking a chat closes it. Suggestions wrap, code scrolls sideways inside its block, message actions are always visible, and every control keeps a 44px target.