ContextPanel
ExperimentalEverything the AI can see right now, each item removable.
Also known as context window, attached context, context sources
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A support chat
What the assistant can see
6 itemsInstructions
- Answer as the store's support teamSet by your workspace
Open page
- Orders dashboardThe page you have open
Files
- Q3 refunds.csv1,204 rows
- Returns policy.pdf6 pages
Connected apps
- ShopifyRead only
Memories
- You prefer replies under 100 words
Uses 18,400 of 200,000 tokens
<ContextPanel
items={[
{ id: "i", kind: "instruction", label: "Answer as the store's support team", detail: "Set by your workspace", fixed: true },
{ id: "p", kind: "page", label: "Orders dashboard", detail: "The page you have open" },
{ id: "f1", kind: "file", label: "Q3 refunds.csv", detail: "1,204 rows" },
{ id: "a", kind: "app", label: "Shopify", detail: "Read only" },
{ id: "m", kind: "memory", label: "You prefer replies under 100 words" },
]}
onRemove={remove}
onAdd={openPicker}
room={{ used: 18400, total: 200000 }}
/>Take items out with the X. The instructions are set by the workspace, so they stay.
When to use it
Shows people exactly what the AI is working from, so its answers make sense and they can take out what it should not use.
Made of: Heading and count · Groups by kind · Items with a short detail · Take out buttons · Working memory bar · Add
Use it for
- A side panel or popover next to the message box.
- Explaining why the AI said something, by showing what it read.
- Freeing up room when the working memory is nearly full.
Not for
- One file or app chip inside the message box: use AttachmentChip.
- Only how full the working memory is: use ContextMeter.
- Saved memories across chats: use MemoryList.
Do and avoid
What the assistant can see
3 itemsOpen page
- Orders dashboard
Files
- Q3 refunds.csv1,204 rows
Memories
- You prefer short replies
Attached files
1 itemFiles
- Q3 refunds.csv
Do
- Show everything the assistant can use, including instructions and memories.
- Let people take items out in one press.
- Say when nothing is shared.
Avoid
- Do not hide what a connected app gives the assistant.
- Do not ask before taking an item out. It can be added back.
- Do not show token counts without the bar and plain words.
On a phone
- Each item is at least 40px tall, and its take-out button grows to 44px on touch screens.
- Long names wrap to two lines, then end with an ellipsis; the full name is in the button's label.
Seen in products
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | ContextItem[] | none | What the assistant can see: { id, kind: "file" | "app" | "memory" | "page" | "instruction", label, detail?, fixed? }. |
| onRemoverequired | (id: string) => void | none | Takes an item out of what the assistant can see. |
| onAdd | () => void | none | Opens a way to add files or apps. The button is hidden when omitted. |
| room | { used: number; total: number } | none | How full the working memory is, in tokens. The bar turns amber past 90%. |
| labels | ContextPanelLabels | none | Overrides heading, count(n), groups, remove(label), removed(label), add, empty, room(used, total) and roomLabel. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the part's heading, so it fits the page outline. |
| className | string | none | Extra classes on the root. |
"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.
- empty
- Says the assistant only sees this chat.
- fixed item
- An item the person cannot remove shows without a take-out button.
- nearly full
- The working memory bar turns amber past 90%.
- item taken out
- Focus moves to the next item's button, or to the heading when none are left, and a status line says what was taken out.
Tokens
Change one of these and every part that uses it follows.
--surface--line--hover--fg-muted--attention--radius-card--radius-control
Built in
- The panel is a region named by its heading, with a heading for each group.
- Each take-out button names the item it removes.
- After taking an item out, focus moves to the next item's button, or to the heading when none are left, and a status line says what was taken out.
- The working memory bar is a meter with its value in words.
What you need to do
- Give each item a name people recognise, such as the file name.
- Set headingLevel so the heading fits your page outline. It is 3 unless you change it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide