Chat components.
Build the conversation: prompt inputs, messages, reasoning, citations and thread navigation. Explore the live previews and choose a layout for your app.
33 components
Composer
9The box people type into. Grows with the text, sends on Enter, and turns into a stop button while a reply streams.
A composer where typing / opens a filterable list of commands, and the pick becomes a chip in front of the message.
Type @ to pull a file, person or doc into the message as an inline pill, grouped by kind.
Lets people choose which model answers and how hard it thinks: an effort slider with a model list, a searchable list grouped by provider with a separate effort menu, a detailed list, or a quick three-way switch.
Ready-made prompts for an empty chat or follow-up questions under an answer.
Shows how much of the context window a conversation has used, and what is taking up the space.
Files on their way into a chat: a tray above the input with progress and retry, a drop zone that checks what it accepts, a grid of images to reorder, files weighed against the context limit, and how they look once sent.
A prompt box for image generation. Add reference images and say what each is for, pick shape, style and count from small menus, list what to leave out, and have the prompt rewritten in more detail.
Click a spot on an image or a page to pin a question to it, so the model answers about that exact place.
Messages
7The row under an assistant reply: copy, regenerate, thumbs up or down with a short feedback form, and share.
Text arriving as it's written: words fading in, markdown that forms cleanly mid-stream, a soft-focus edge, a caret with stop and skip controls, and a table filling row by row.
What to show in place of a reply that failed, hit a usage limit or was stopped partway.
A long answer laid out as a report: sections with a contents list, figures and numbered sources, with a short version that opens into the full one.
Thinking & status
4A status line that shows the model is working, like “Thinking” or “Searching the web”.
Shows the model's reasoning as it streams, then folds it away behind a short “Thought for 12s” line.
Thinking laid out as steps: a status list, a one-line summary that opens up, a research trail of searches and pages read, options weighed and ruled out, and steps woven into the answer as it writes.
Small loading indicators for when a reply hasn't started yet, each with an optional label.
Sources & citations
5Markers inside an answer that show where a claim came from: numbers, superscripts, a site chip, the quoted passage itself, or notes in the margin of a long report.
The full set of sources behind an answer: behind one button, as cards or a scrolling row, as numbered footnotes, in a side panel, or as the log of what a research run read and used.
Links shown with their content: a card with a loading skeleton, a hover card on a link in a reply, a pasted link in the composer, and rich embeds for videos, repos and posts.
Opens a cited source beside the answer with the quoted passage highlighted, and steps between every place the answer used it.
The files and connected apps a project's answers can draw on, and a quick way to narrow them for one question.
Thread & layout
8What a new chat shows before the first message: a greeting, a centred prompt, a project's home with its files and recent chats, a gallery of task templates, a return screen with unfinished work, an agent's own landing page, and a blank image studio.
The message area of a chat: one that follows new text down, one with edited prompts that branch, two models answering side by side, a side thread for a follow-up, and an agent transcript with tool calls folded in.
A column of ticks beside a long chat, one per prompt. Hover one to preview that turn, click to jump to it, and bookmark the ones you'll want again.
Where past chats live: a dated sidebar, chats filed into projects, a search palette that matches inside messages, a full page for managing chats in bulk, and a slim rail that opens on hover.
A round button in the corner of a page that opens a small chat panel, for help or support widgets.
The bar above a chat: title and model with a share and options menu, a project breadcrumb with who can see it, a status bar for an agent working on a task, and a header that tucks away as you read.
Several chats open at once as tabs, with the ones still running marked, so you can switch without losing your place.
A resizable panel docked beside or under the chat for files, previews and sources, which collapses out of the way.