bunx shadcn@latest add @elements/memory-viewer

import {
  MemoryViewer,
  MemoryViewerCompact,
} from "@/components/elements/ai-elements/multi-agent/memory-viewer";

const workingMemory = [
  {
    id: "1",
    content: "User prefers concise responses",
    type: "working",
    source: "user",
    createdAt: new Date(),
  },
  {
    id: "2",
    content: "Current task: code review",
    type: "working",
    source: "system",
    createdAt: new Date(),
  },
];

const conversationHistory = [
  {
    id: "3",
    content: "Previous discussion about React hooks",
    type: "history",
    source: "conversation",
    createdAt: new Date(),
  },
];

export function MemoryViewerExample() {
  return (
    <MemoryViewer
      workingMemory={workingMemory}
      conversationHistory={conversationHistory}
      onAdd={(content, type) => console.log("Add:", content, type)}
      onRemove={(id) => console.log("Remove:", id)}
      maxItems={100}
    />
  );
}

interface MemoryItem {
  id: string;
  content: string;
  type: "working" | "history" | "system";
  source?: "user" | "system" | "conversation";
  createdAt: Date;
  metadata?: Record<string, unknown>;
}