AI Agent Memory Panel

"use client";

import React from "react";
import { Database, Clock, Key, Plus } from "lucide-react";

const memories = [
    { id: "1", type: "Context", label: "User Preference", value: "Prefers Python for data analysis", date: "2m ago" },
    { id: "2", type: "History", label: "Last Topic", value: "Distributed systems architecture", date: "1h ago" },
    { id: "3", type: "Knowledge", label: "Project Alpha", value: "Q3 roadmap and tech stack details", date: "Yesterday" },
];

export default function AIAgentMemory() {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-md mx-auto">
            <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-2">
                    <Database className="h-4 w-4 text-zinc-500" />
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Short-term Memory</h3>
                </div>
                <button className="p-1 text-zinc-400 hover:text-zinc-600 transition-colors">
                    <Plus className="h-4 w-4" />
                </button>
            </div>

            <div className="space-y-3">
                {memories.map((m) => (
                    <div key={m.id} className="p-3 rounded-lg border border-zinc-100 dark:border-zinc-800/50 bg-zinc-50/50 dark:bg-zinc-900/50">
                        <div className="flex items-center justify-between mb-1.5">
                            <div className="flex items-center gap-2">
                                <span className={`text-[9px] font-black uppercase tracking-tighter px-1.5 py-0.5 rounded ${m.type === "Context" ? "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400" :
                                        m.type === "History" ? "bg-zinc-200 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400" :
                                            "bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
                                    }`}>
                                    {m.type}
                                </span>
                                <span className="text-[11px] font-bold text-zinc-900 dark:text-zinc-100">{m.label}</span>
                            </div>
                            <span className="text-[10px] text-zinc-400">{m.date}</span>
                        </div>
                        <p className="text-xs text-zinc-500 leading-normal">{m.value}</p>
                    </div>
                ))}
            </div>

            <div className="mt-6 pt-4 border-t border-zinc-100 dark:border-zinc-800/50">
                <div className="flex items-center justify-between text-[10px] font-medium text-zinc-400">
                    <span>Vector Store Usage</span>
                    <span>12.4 MB / 100 MB</span>
                </div>
                <div className="mt-2 h-1 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
                    <div className="h-full w-[12%] bg-blue-500" />
                </div>
            </div>
        </div>
    );
}