Memory manager

Everything the assistant remembers, searchable and editable in place. Delete hides a memory at once and offers Undo for 5 seconds before it is really gone.

Markdown

On this page

Search, edit in place, delete with a 5 second undo, grouped by topic.

Installation

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

Usage

tsx

import { MemoryManager } from "@/components/ui/chatcn/memory-manager"

<MemoryManager
  memories={memories}
  usage={0.62}
  onUpdate={(id, text) => updateMemory(id, text)}
  onDelete={(id) => deleteMemory(id)}
  onDeleteAll={() => deleteAllMemories()}
/>

onDelete runs when the undo window closes, or when the manager unmounts with a delete still pending. Your store never needs a restore endpoint.

Examples

States

Loading, empty, no results, memory off, nearly full and managed by an admin.

Props

Prop	Type	Notes
`memories`	`Memory[]`	`{ id, text, topic?, source?, updatedAt? }`
`onUpdate`	`(id, text) => void`	Omit to make memories read only
`onDelete`	`(id) => void`	Called after the 5 s undo window
`onDeleteAll`	`() => void`	Shows Delete all with an inline confirmation
`loading`	`boolean`	Static skeleton rows
`enabled`, `onEnable`	`boolean`, `() => void`	Memory off notice with Turn on
`usage`	`number`	0 to 1. Warns at 90%
`lockedReason`	`ReactNode`	Admin managed: no edits or deletes
`query`, `defaultQuery`, `onQueryChange`		Controlled or uncontrolled search
`groupByTopic`	`boolean`	Default true when memories have topics
`emptyState`	`ReactNode`	Replace the empty state

Keyboard

Key	Action
`Esc` in search	Clear the search
`Enter` while editing	Save. Never fires during IME composition
`Shift+Enter` while editing	New line
`Esc` while editing	Cancel and return focus to Edit

Accessibility

Edit and Delete are labelled icon buttons, revealed on hover or focus and always visible on touch.
After a delete, focus moves to the next memory's actions, or the search field. Undo returns focus to the restored memory.
The undo toast is a polite live region and pauses its timer while hovered or focused. Capacity is a meter with its percentage as text.

Motion

A deleted row folds away in 160 ms, so the list never jumps. A restored row fades back in.
The undo toast rises 8 px and fades in over 200 ms. Row actions appear instantly: they are used constantly.