Inline chip

A token inside text for a mention, file, URL, command or prompt variable. Shares the prose baseline, inverts when selected and removes as one unit.

Markdown

On this page

Mentions, commands and variables inside text, selected and removable.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/inline-chip.json

Usage

tsx

import { InlineChip } from "@/components/ui/chatcn/inline-chip"

<p>
  Ask <InlineChip kind="agent" label="Reviewer" /> to check{" "}
  <InlineChip kind="file" label="runs.ts" value="src/server/runs.ts" />
</p>

The editor uses it for every chip, and you can use it to render a sent message from value.segments so the bubble matches what was typed. 20 px tall in a 24 px line: a chip never grows the line or pushes neighbouring text, and its label sits on the prose baseline.

Props

Prop	Type	Notes
`kind`	`InlineChipKind`	`file`, `folder`, `symbol`, `person`, `agent`, `connector`, `url`, `command` or `variable`. Picks the icon and the shape
`label`	`string`	Command names without the slash
`value`	`string`	Full value for the tooltip, such as the path
`icon`	`ReactNode`	Overrides the kind icon, for example a connector logo
`selected`	`boolean`	Default `false`. Inverted ink; variables get a solid outline
`onRemove`	`() => void`	Outside an editor: makes the chip focusable, Backspace or Delete removes it

Keyboard

Key	Action
`Backspace`, `Delete`	With `onRemove`: remove and move focus to the neighbouring chip

Accessibility

Reads as kind and name: "File: runs.ts", "Command: /review". Icons are decorative.
Removable chips are buttons named by kind and label, with aria-keyshortcuts="Backspace Delete".
In forced colors the chip keeps an outline.

Motion

None. Chips are inserted and removed from the keyboard, so they never animate.