Marble UI
← Components

Memory Panel

Preview: Default

What the assistant remembers about the user: searchable, editable inline, pin/delete, with a global on/off. "Forget everything" asks first.

Import

import { MemoryPanel } from '@marbleui/ui'

Props

<MemoryPanel>

PropTypeDefaultDescription
memories *requiredMemory[]—The memories to show. Edits are kept locally and reported; pass a new array (e.g. from `onMemoriesChange`) to replace them.
classNamestring—
defaultEnabledbooleantrue
isEnabledboolean—The "Use memory" switch.
onEdit(id: string, text: string) => void—
onEnabledChange(enabled: boolean) => void—
onForget(id: string) => void—
onForgetAll() => void—
onMemoriesChange(memories: Memory[]) => void—Every change to the list: edit, pin, forget, forget everything.
onPinnedChange(id: string, pinned: boolean) => void—

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria DialogTrigger. Follow the primitive's docs for the full keyboard map.

Usage notes

What an assistant remembers about the user: search, inline edit, pin, forget, “Forget everything” and a “Use memory” switch.

<MemoryPanel
  memories={memories}
  onMemoriesChange={setMemories}
  onForget={(id) => api.forget(id)}
  isEnabled={memoryOn}
  onEnabledChange={setMemoryOn}
/>
  • Changes are kept locally and reported: onMemoriesChange gets the whole new list after every edit, pin and forget, and onEdit(id, text), onPinnedChange(id, pinned), onForget(id) and onForgetAll() report each action. The panel follows memories when its contents change, so feeding onMemoriesChange back in makes it fully controlled.
  • “Use memory” is isEnabled/defaultEnabled/onEnabledChange. Off only dims the list; acting on it is your app’s job.
  • “Forget everything” asks for confirmation in an alert dialog. After a forget, focus moves to the next row’s Forget button (or the search field), and a polite status line says what was forgotten.
  • Each memory is an Editable: Enter or blur saves, Escape cancels. Pinned items sort to the top; the Pin button keeps its name and reports its state with aria-pressed.
Example source · show
import { MemoryPanel } from './memory-panel'

export const styles = { Default: () => <MemoryPanel memories={[
  { id: '1', text: 'Prefers concise answers with code first', source: 'chat', date: 'Oct 12', pinned: true },
  { id: '2', text: 'Works at Acme as head of design systems', source: 'manual', date: 'Sep 30' },
  { id: '3', text: 'Uses React Aria, Tailwind v4 and Motion', source: 'doc', date: 'Sep 28' },
  { id: '4', text: 'Timezone is Europe/Amsterdam', source: 'chat', date: 'Sep 2' },
]} /> }

Source: packages/ui/src/memory-panel/memory-panel.tsx

Catalog

Category
ai-agents
Priority
Extra
Primitive
composed
React Aria
GridList