Memory chip

The quiet line under an assistant turn that says memory changed, with View to read exactly what was saved and Undo to take it back.

Markdown

On this page

The assistant answers, then memory updates: the chip fades in with View and Undo.

Installation

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

Usage

tsx

import { MemoryChip } from "@/components/ui/chatcn/memory-chip"

<MemoryChip
  status="done"
  memories={[{ id: "m1", text: "Uses pnpm, not npm, in every repo." }]}
  onUndo={() => revert()}
  onManage={() => openSettings("memory")}
/>

Render it after the message finishes, never mid-stream. The referenced kind says which saved memories shaped an answer, so people can see why it knew something.

Examples

Every state

Saving, updated, forgotten, referenced, undone and failed.

Props

Prop	Type	Notes
`kind`	`"updated" \| "forgotten" \| "referenced"`	Default `updated`
`status`	`"saving" \| "done" \| "undone" \| "error"`	Default `done`
`memories`	`{ id, text, previous? }[]`	Shown by View. `previous` is struck through
`onUndo`	`() => void`	Shows Undo while `done`
`onManage`	`() => void`	Shows Manage memories in the popover
`onRetry`	`() => void`	Shows Retry on `error`
`label`	`ReactNode`	Override the text

Keyboard

Key	Action
`Tab`	Move to View, then Undo
`Enter`, `Space`	Open the popover or undo
`Esc`	Close the popover

Accessibility

The label is a polite live region: screen readers hear Memory updated or Change undone once.
View and Undo get a 44 px hit area on touch. The error state pairs a red icon with words.

Motion

The chip fades in over 200 ms when it mounts. The status glyph swaps with the 150 ms blur crossfade.
The popover grows from the View link, 180 ms. Reduced motion keeps the fades only.