affectUI › Components › Agents

Memory Panel

What the assistant remembers about you, grouped and editable – a master switch, category filters, and on every memory edit in place, pause or forget with Undo on the tray.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/memory-panel.json · Import from @/components/ui/memory-panel

When to use

Assistants and agents that remember things across chats – the place where people see, correct and remove what was kept
Settings or a side panel next to the chat, so a wrong memory can be fixed the moment it shows up in an answer
Products that need a clear off switch for personalization without losing what was saved

When not to use

What the model has in mind right now, inside one conversation – use Context Window
Hundreds of entries with sorting and bulk actions – a Data Table handles that better
Account settings that are not about what the assistant learned – a plain settings list says that with less

Usage

import { MemoryPanel } from "@/components/ui/memory-panel";

export function AssistantMemory() {
  return (
    <MemoryPanel
      memories={[
        { id: "ts", text: "Prefers TypeScript examples over plain JavaScript", category: "Preferences", source: "From chat", date: "Oct 12" },
        { id: "role", text: "Product designer and front-end developer", category: "Work", source: "From chat", date: "Sep 28" },
        { id: "fintech", text: "Redesigning a fintech onboarding flow, due Oct 24", category: "Projects", source: "From chat", date: "Oct 11" },
      ]}
    />
  );
}

Props

Name	Type	Default	Description
`memories`	`Memory[]`		{ id, text, category, source?, date?, paused? } – source and date are shown as given, e.g. "From chat" and "Oct 12"
`onChange`	`(memories: Memory[]) => void`		Called with the full list after any change. With it the panel shows exactly the memories you pass; without it the changes live inside the panel
`onAdd`	`(memory: Memory) => void`		A memory was added with New memory
`onEdit`	`(id: string, text: string) => void`		The text of a memory was edited and saved
`onPause`	`(id: string, paused: boolean) => void`		A memory was paused or resumed
`onForget`	`(id: string) => void`		A memory was forgotten – it can still come back with Undo
`onRestore`	`(memory: Memory) => void`		A forgotten memory was brought back with Undo, at its old place
`enabled`	`boolean`		The Use memory switch, controlled
`defaultEnabled`	`boolean`	`true`	Start state of the switch when it is not controlled
`onEnabledChange`	`(enabled: boolean) => void`		Called when the switch is flipped
`categories`	`string[]`		Order of the groups and the choices for new memories – defaults to the categories in the order they appear
`title`	`string`	`"Memory"`	Heading of the panel
`maxHeight`	`number`	`360`	Height of the list in px before it scrolls
`undoFor`	`number`	`5000`	How long Undo stays on the tray after forgetting, in ms
`addedSource`	`string`	`"You added"`	Source given to memories added in the panel; their date is today
`action`	`{ label: string; onClick: () => void }`		A button on the tray – Undo takes its place for a moment after forgetting
`className`	`string`		Extra class on the root

Keyboard

Tab: Switch, the selected category chip, search, then each memory's Edit, Pause and Forget, New memory and the tray button
← / →: Move between category chips (and between categories of a new memory)
Enter: Saves an edited or new memory (Shift + Enter for a line break)
Esc: Cancels editing, closes New memory or the search field

Accessibility

A group named by its title; Use memory is a switch with aria-checked and controls the note that unfolds
Category chips are a radiogroup with arrow keys and one tab stop; each group of memories is a labelled section
Every action button is named after its memory, e.g. "Forget “Prefers TypeScript…”"; actions also show on keyboard focus
Rows that are filtered out or folding away are inert, so the keyboard never lands on something hidden
The tray line is announced politely: counts, the forgotten memory with Undo, and editing hints

Responsive

Fills its container up to 380px; works from 300px wide. Below 340px the chips drop their counts, below 320px the switch keeps only its track
Category chips scroll sideways when they don't fit, with a soft fade at the edge
Touch screens: the actions are always visible and every button gets a taller hit area
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Context Window – What fills the model's context, as a field of cells – hover a part to light it up, remove files, and compact the conversation while its cells shimmer and clear
Chat Composer – Prompt composer with model picker, voice input, app connections and approval request
Integration Settings – Settings card for a connected service – on/off switch, API key, validated site address, time zone and a save bar
Filter Menu – Grouped filters with removable chips, collapsible checkbox groups, Clear all and full keyboard control