Context chips
The context the agent will read with the next message: files, a selection, a link, the current page. Removable, with overflow folded into +3.
On this page
Files, a selection, links and a page, with overflow.
Installation
Usage
import { ContextChips } from "@/components/ui/chatcn/context-chips"
<PromptInputHeader>
<ContextChips
items={[
{ id: "1", kind: "selection", label: "billing.ts", detail: "L118-164" },
{ id: "2", kind: "page", label: "Pricing", title: "https://tallyline.app/pricing" },
]}
onRemove={(id) => remove(id)}
/>
</PromptInputHeader>Props
| Prop | Type | Notes |
|---|---|---|
items | ContextItem[] | id, kind, label, detail, title, icon |
kind | "file" | "folder" | "selection" | "url" | "page" | "image" | Picks the icon and the spoken prefix |
onRemove | (id) => void | Shows remove buttons |
max | number | Chips before the rest fold into +3. Default 3 |
Accessibility
- A labelled list. Each chip reads its kind first: Selection: billing.ts L118-164.
- The overflow button names the count, Show 3 more, and opens a popover with the rest.
- Remove buttons extend to 44 px on touch without growing the chip.
Motion
- Chips enter at 0.97 over 150 ms and leave at 0.96 over 140 ms, then focus moves to the next chip.