AI Answer

The block is a composition, so it follows your theme preset. Copy the source from the Code tab and connect your model where the sample answers are scripted; nothing here calls a model, and Share copies a sample link.

What it's made of

States

• Empty. New thread clears the page to a heading, one line and four sample questions; picking one asks it.
• Thinking. The row reads Thinking while the reasoning summary streams into its one-line preview, and the sources arrive before the first word.
• Writing. The answer arrives a few words at a time. Headings, list items, table rows and code lines appear once their line is complete, and text that has arrived never moves.
• Ready. The action bar, the model line with tokens and time, and three related questions appear under the answer.
• Stopped. Stop keeps what arrived, marks it stopped and offers Regenerate beside the word.
• Failed. The last sample question fails once, to show the error alert, its reason and Retry.

Actions

• Copy writes the answer's markdown, not its rendered text.
• Regenerate offers Try again, More concise, More detailed and Switch model. Each one adds a version; the switcher pages between them.
• Thumbs up toggles. Thumbs down asks what went wrong and sends once a reason is picked; pressing it again takes the feedback back.
• Share copies a link, in the top bar for the thread and in the action bar for the answer.
• A related question replaces the current one and moves focus to its heading; New thread moves focus to the composer.

Motion

Every movement explains a change, and nothing animates when the block first appears.

• The sources row opens on the panel curve, and its cards rise into place 20ms apart. Hovering the row fans its marks apart.
• A new question, a switched version and the action bar fade in from just below. The streaming text itself never fades.
• Chevrons settle on the indicator spring.

With reduced motion the answer still arrives in chunks — that is content, not movement — and every fade, fan and spring is dropped.

Keyboard and screen readers

• The thread is a region named by its question, busy while an answer streams. One polite status announces Thinking, Writing the answer, Answer ready, Answer stopped or the error; a second announces copied links and feedback.
• The thinking and sources rows are disclosure buttons. Citations are links named by their source, and focusing one shows its source card.
• Thumbs up and down report their state, and every icon button has a name.

Composer

The composer is one line that grows to six as you type. Its pill sits 8px inside the card's 32px corners, so its 24px ends are concentric with them.

On a phone

• The card is shorter on a phone, so the composer stays in view under the answer, and it never takes more than three quarters of the screen.
• On touch the composer takes its small size: its 44px targets and 16px type keep it one 50px line, so its ends stay round inside the card's corners.
• Below 30rem of card width Share becomes an icon button with the same name, so the thread title keeps its room.
• Below 32rem the source cards become one row that scrolls and snaps, each four fifths of the row wide, so the next card always shows.
• Below 36rem the model line wraps under the actions, and the version switcher takes its own line when it does not fit.
• Menus and the feedback popover keep 8px from the screen edge and flip below their button when there is no room above.