AI Side Panel

The template is a composition, so it follows your theme preset. Copy the source from the Code tab and replace the sample page and the scripted responder with your own; answers here are simulated and nothing is saved.

What it's made of

How an edit works

An answer that changes the page brings a card with the part it touches, a word count, and the change as a word diff: removed words are struck through, added words are underlined, and both are real del and ins elements. Nothing on the page changes until you press Apply.

Apply replaces that one block, sweeps a soft tint across it and puts an Undo pill above the composer. The card's footer says Applied to the page. Undo puts the earlier text back and offers Apply again; Discard leaves the page as it is. A new column in a table shows as the table with the new column marked.

Asking about a passage

Select text inside one block of the page and an Ask about selection button appears under it. It adds the passage to the panel as a chip, marks the block with a rule beside it, and the composer asks about that part. Ask to make it shorter and the answer proposes a shorter version of that block. Remove the chip to go back to the whole page.

States

• Empty — what the assistant can do, with three suggestions.
• Reading — a spinner and Reading the page, before the answer arrives.
• Answering — the answer arrives in short chunks; Send becomes Stop.
• Stopped — what arrived stays, marked Stopped, and no edit is offered.
• Failed — the model's name, the reason and Retry, which answers in place. The preview fails the first free-form question once to show it.
• Proposed, applied, undone, discarded — the edit card's footer, each with its own icon and word.

Suggestions you have not used follow each finished answer.

Motion

Every movement explains a change, and none plays when the panel first appears.

• Closing narrows the dock on the panel curve while the panel slides out, and the page re-centres in the wider column. Opening runs it back.
• Each chunk of an answer fades in as it arrives; text that has arrived never moves.
• Apply and Undo crossfade the block to its new text while its height follows, and a tint sweeps across it once and fades.
• The edit card's footer, the chips and the Undo pill change in place with a short fade, so nothing around them shifts.

With reduced motion every state stays: the chunks appear without a fade, the block swaps at once and the tint only fades.

Keyboard and screen readers

• Tab moves through the page's Ask about selection button, the reopen button, the panel's close button and chips, the suggestions, the edit actions, the Undo pill and the composer. Enter sends.
• Escape closes the docked panel from anywhere inside it and returns focus to the reopen button, which reports whether the panel is open.
• After Apply focus moves to Undo; after Undo it returns to the card's Apply; after Discard it moves to the composer.
• One polite status region says each step once: reading, the answer and the part it would change, applied with undo available, undone, discarded, stopped and failures. The streamed text itself is never announced.
• Every status pairs an icon with a word, so none depends on colour.

On a phone

Below 768px the panel becomes a bottom sheet over the page with a dimmed backdrop and a close button; the page behind it cannot be reached while it is open. The sheet opens from the Assistant button or from Ask about selection, never on its own when the page loads.