CanvasPanel
StableA side panel for a document, code or design that stays after the chat message.
Also known as canvas, artboard, workspace
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Versioned document
const [v, setV] = useState(2);
<div className="h-75 max-w-xl">
<CanvasPanel title="Launch announcement.md" version={v} versions={3} onVersionChange={setV} onRegenerate={() => {}} onClose={() => {}}>
<p className="text-body leading-5">Draft text for version {v}.</p>
</CanvasPanel>
</div>With more than one version, Previous and Next appear and turn off at the ends.
When to use it
A side panel for work that lasts longer than one message, such as a document, code or a design. It keeps versions, so people can go back while the chat moves on.
Made of: Title · Version buttons · Regenerate · Your own buttons · Close · Scrolling content
Do and avoid
Do
- Give the panel a height. It fills it and scrolls its own content.
- Use it for content that stays after the message that made it.
- Start version numbers at 1, and update the content when the version changes.
- Mark made content with an AI label in your own buttons area.
Avoid
- Do not use it for one-off messages. Replies belong in the conversation.
- Do not put the main controls for making things inside it. They belong in the main column.
- Do not give a version count above 1 without saying which version is shown, or the buttons stay hidden.
On a phone
- It is a side panel with no phone layout of its own, so on a phone you must give it the full screen or a sheet yourself.
- It fills the height of its parent and scrolls its content inside, so the parent needs a set height.
- The title is cut to one line and the version, regenerate and close controls wrap below it. Each control has a 44px tap area on a touch screen.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | none | Artifact name. Shown truncated in the header and used as the panel's aria-label. |
| version | number | none | Current version, 1-based. Needed for the version switcher to appear. |
| versions | number | 1 | Total number of versions. The switcher shows only when this is greater than 1. |
| onVersionChange | (v: number) => void | none | Called with the new version number from the previous and next buttons. |
| onClose | () => void | none | Shows a Close panel icon button when provided. |
| onRegenerate | () => void | none | Shows a Regenerate icon button when provided. |
| childrenrequired | ReactNode | none | The artifact. Rendered in a scrolling body with 16px padding. |
| actions | ReactNode | none | Extra header controls, such as an AI badge or an Export button. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- first or last version
- The previous arrow is disabled on version 1 and the next arrow on the last version.
- single version
- When versions is 1 or version is not set, the version switcher is hidden.
Tokens
Change one of these and every part that uses it follows.
--surface--border (line)--shadow-md--fg-muted--radius-card
Built in
- It is an area named by its title, and the title is also a heading.
- The version buttons sit in a group named "Version history", are named "Previous version" and "Next version", and turn off at the ends.
- Regenerate and Close are icon buttons named "Regenerate" and "Close panel".
- When the version changes, screen readers hear it, such as "Version 2 of 3".
- The content area can be reached with Tab and scrolled with the arrow keys.
- After Close, keyboard focus returns to what had focus when the panel opened, such as the button that opened it. Pass focusAfterClose to choose another place.
What you need to do
- Give any buttons you pass in actions their own names.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide