Artifact card inlinePro

A compact artifact card for inside a message that keeps every version: step back and the minimap marks the lines that version added.

Markdown

On this page

ProA clinic’s reminder component gets a third version. Step back through versions: the minimap marks what each one added.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/artifact-card-inline

Usage

tsx

import { ArtifactCardInline } from "@/components/ui/chatcn/pro/artifact-card-inline"

<ArtifactCardInline
  title="AppointmentReminder.tsx"
  label="React component"
  versions={versions}
  status={status}
  open={panelOpen}
  onOpen={(index) => openPanel(index)}
/>

Built on the free Artifact card's geometry and minimap. Each version carries its source; the card shows the newest unless you pick another with the switcher, and a new version arriving takes the card along. Lines a version added over the one before are drawn in the diff green inside the minimap, with +6 −4 in the meta line, so you can see where it changed before opening it. While the newest version is written the card shows Writing and a live line count. On phones the switcher moves into the meta line and Open becomes an icon, so the file name keeps its room. changesOf is exported for your own panels.

Examples

States

ProWriting, one version, the second of three with its changes, open, stopped, a long document title, and disabled.

Props

Prop	Type	Notes
`title`	`ReactNode`	Truncates on one line
`kind`	`"code" \| "document" \| "html" \| "image"`	Default `code`
`label`	`ReactNode`	Type label. Defaults to the kind
`versions`	`InlineArtifactVersion[]`	`{ id, content?, imageSrc? }`, oldest first
`version`, `defaultVersion`, `onVersionChange`	`number`	0 based
`status`	`"streaming" \| "done" \| "error"`	Of the newest version
`onOpen`	`(index) => void`	Open, or a click anywhere on the card
`open`	`boolean`	The panel is showing it
`errorText`, `onRetry`, `disabled`

Keyboard

Key	Action
Tab	Switcher, then Open
Left and Right on the switcher	Previous and next version

Accessibility

Open is a toggle button with aria-pressed; the switcher is a group named Version 2 of 3.
Change counts are read as 6 lines added, 4 lines removed; the minimap is decorative.
Finishing is announced once, politely: Artifact ready.

Motion

The minimap swaps with the kit's 150 ms swap when you change version; the status icon swaps the same way. Reduced motion keeps a fade only.