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>
| Prop | Type | Default | Description |
|---|---|---|---|
| memories *required | Memory[] | — | The memories to show. Edits are kept locally and reported; pass a new array (e.g. from `onMemoriesChange`) to replace them. |
| className | string | — | |
| defaultEnabled | boolean | true | |
| isEnabled | boolean | — | 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:
onMemoriesChangegets the whole new list after every edit, pin and forget, andonEdit(id, text),onPinnedChange(id, pinned),onForget(id)andonForgetAll()report each action. The panel followsmemorieswhen its contents change, so feedingonMemoriesChangeback 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 witharia-pressed.
Example source · show· hide
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