"use client" import { useState, useCallback, useRef, useMemo } from "react" import { motion, AnimatePresence } from "motion/react" // ============================================================================ // TYPES // ============================================================================ export interface Memory { id: string content: string embedding?: number[] type: "short_term" | "long_term" | "episodic" | "semantic" importance: number accessCount: number createdAt: Date lastAccessedAt: Date metadata?: Record associations?: string[] // IDs of related memories } export interface ConversationContext { id: string role: "user" | "assistant" content: string timestamp: Date } export interface MemoryStats { shortTermCount: number longTermCount: number episodicCount: number semanticCount: number totalAccesses: number avgImportance: number } export interface MemoryConfig { shortTermLimit?: number longTermLimit?: number importanceThreshold?: number decayRate?: number consolidationInterval?: number } export interface MemorySearchResult { memory: Memory relevanceScore: number } // ============================================================================ // MEMORY STORE // ============================================================================ class MemoryStore { private memories: Map = new Map() private shortTermLimit: number private longTermLimit: number private importanceThreshold: number private decayRate: number constructor(config: MemoryConfig = {}) { this.shortTermLimit = config.shortTermLimit || 10 this.longTermLimit = config.longTermLimit || 100 this.importanceThreshold = config.importanceThreshold || 0.6 this.decayRate = config.decayRate || 0.1 } // Add a new memory add(memory: Omit): Memory { const newMemory: Memory = { ...memory, id: crypto.randomUUID(), accessCount: 0, createdAt: new Date(), lastAccessedAt: new Date(), } // Enforce limits this.enforceLimit(memory.type) this.memories.set(newMemory.id, newMemory) return newMemory } // Retrieve a memory by ID get(id: string): Memory | undefined { const memory = this.memories.get(id) if (memory) { memory.accessCount++ memory.lastAccessedAt = new Date() } return memory } // Get all memories of a type getByType(type: Memory["type"]): Memory[] { return Array.from(this.memories.values()) .filter((m) => m.type === type) .sort((a, b) => b.lastAccessedAt.getTime() - a.lastAccessedAt.getTime()) } // Search memories by content (simple keyword matching) search(query: string, limit = 5): MemorySearchResult[] { const queryLower = query.toLowerCase() const results: MemorySearchResult[] = [] for (const memory of this.memories.values()) { const contentLower = memory.content.toLowerCase() // Simple relevance scoring let score = 0 const words = queryLower.split(/\s+/) for (const word of words) { if (contentLower.includes(word)) { score += 0.2 } } // Boost by importance and recency score *= 1 + memory.importance * 0.5 score *= 1 + Math.min(1, memory.accessCount / 10) * 0.3 const hoursSinceAccess = (Date.now() - memory.lastAccessedAt.getTime()) / 3600000 score *= Math.exp(-hoursSinceAccess * 0.01) // Decay factor if (score > 0) { results.push({ memory, relevanceScore: Math.min(1, score) }) } } return results .sort((a, b) => b.relevanceScore - a.relevanceScore) .slice(0, limit) } // Consolidate short-term to long-term memory consolidate(): Memory[] { const shortTermMemories = this.getByType("short_term") const consolidated: Memory[] = [] for (const memory of shortTermMemories) { if (memory.importance >= this.importanceThreshold || memory.accessCount >= 3) { // Promote to long-term const longTermMemory: Memory = { ...memory, type: "long_term", lastAccessedAt: new Date(), } this.memories.set(memory.id, longTermMemory) consolidated.push(longTermMemory) } } return consolidated } // Apply decay to importance scores decay(): void { for (const memory of this.memories.values()) { if (memory.type === "short_term") { memory.importance *= 1 - this.decayRate // Remove very low importance short-term memories if (memory.importance < 0.1) { this.memories.delete(memory.id) } } } } // Get all memories getAll(): Memory[] { return Array.from(this.memories.values()) .sort((a, b) => b.lastAccessedAt.getTime() - a.lastAccessedAt.getTime()) } // Get statistics getStats(): MemoryStats { const memories = Array.from(this.memories.values()) return { shortTermCount: memories.filter((m) => m.type === "short_term").length, longTermCount: memories.filter((m) => m.type === "long_term").length, episodicCount: memories.filter((m) => m.type === "episodic").length, semanticCount: memories.filter((m) => m.type === "semantic").length, totalAccesses: memories.reduce((sum, m) => sum + m.accessCount, 0), avgImportance: memories.length > 0 ? memories.reduce((sum, m) => sum + m.importance, 0) / memories.length : 0, } } // Clear all memories clear(): void { this.memories.clear() } // Clear memories by type clearByType(type: Memory["type"]): void { for (const [id, memory] of this.memories) { if (memory.type === type) { this.memories.delete(id) } } } // Size size(): number { return this.memories.size } // Enforce memory limits by evicting least accessed private enforceLimit(type: Memory["type"]): void { const limit = type === "short_term" ? this.shortTermLimit : this.longTermLimit const memories = this.getByType(type) if (memories.length >= limit) { // Find least important/accessed memory const sortedByPriority = memories.sort( (a, b) => a.importance * a.accessCount - b.importance * b.accessCount ) const toRemove = sortedByPriority[0] if (toRemove) { this.memories.delete(toRemove.id) } } } } // ============================================================================ // HOOK: useAgentMemory // ============================================================================ interface UseAgentMemoryOptions extends MemoryConfig { onMemoryAdded?: (memory: Memory) => void onMemoryConsolidated?: (memories: Memory[]) => void onMemoryDecayed?: () => void } export function useAgentMemory(options: UseAgentMemoryOptions = {}) { const { onMemoryAdded, onMemoryConsolidated, onMemoryDecayed, ...config } = options const storeRef = useRef(new MemoryStore(config)) const [version, setVersion] = useState(0) // Force re-render const refresh = useCallback(() => setVersion((v) => v + 1), []) // Add a memory const addMemory = useCallback( ( content: string, type: Memory["type"], importance: number, metadata?: Record ): Memory => { const memory = storeRef.current.add({ content, type, importance, metadata, }) onMemoryAdded?.(memory) refresh() return memory }, [onMemoryAdded, refresh] ) // Search memories const searchMemories = useCallback( (query: string, limit = 5): MemorySearchResult[] => { return storeRef.current.search(query, limit) }, [] ) // Get context for a query (returns relevant memories formatted) const getContextForQuery = useCallback( (query: string, maxTokens = 2000): string => { const results = storeRef.current.search(query, 10) let context = "" let estimatedTokens = 0 for (const result of results) { const memoryText = `[${result.memory.type}] ${result.memory.content}\n` const tokens = memoryText.length / 4 // Rough estimate if (estimatedTokens + tokens > maxTokens) break context += memoryText estimatedTokens += tokens } return context }, [] ) // Consolidate memories const consolidateMemories = useCallback(() => { const consolidated = storeRef.current.consolidate() if (consolidated.length > 0) { onMemoryConsolidated?.(consolidated) refresh() } return consolidated }, [onMemoryConsolidated, refresh]) // Decay memories const decayMemories = useCallback(() => { storeRef.current.decay() onMemoryDecayed?.() refresh() }, [onMemoryDecayed, refresh]) // Get all memories const getAllMemories = useCallback((): Memory[] => { return storeRef.current.getAll() }, []) // Get memories by type const getMemoriesByType = useCallback((type: Memory["type"]): Memory[] => { return storeRef.current.getByType(type) }, []) // Get stats const getStats = useCallback((): MemoryStats => { return storeRef.current.getStats() }, []) // Clear all const clearAll = useCallback(() => { storeRef.current.clear() refresh() }, [refresh]) // Clear by type const clearByType = useCallback( (type: Memory["type"]) => { storeRef.current.clearByType(type) refresh() }, [refresh] ) return { addMemory, searchMemories, getContextForQuery, consolidateMemories, decayMemories, getAllMemories, getMemoriesByType, getStats, clearAll, clearByType, memoryCount: storeRef.current.size(), } } // ============================================================================ // MEMORY TYPE BADGE // ============================================================================ interface MemoryTypeBadgeProps { type: Memory["type"] size?: "sm" | "md" } export function MemoryTypeBadge({ type, size = "sm" }: MemoryTypeBadgeProps) { const config = { short_term: { label: "Short-Term", color: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/30", icon: , }, long_term: { label: "Long-Term", color: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/30", icon: , }, episodic: { label: "Episodic", color: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/30", icon: , }, semantic: { label: "Semantic", color: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/30", icon: , }, } const { label, color, icon } = config[type] const sizeClasses = size === "sm" ? "px-2 py-0.5 text-[10px]" : "px-3 py-1 text-xs" return ( {icon} {label} ) } // ============================================================================ // MEMORY STATS PANEL // ============================================================================ interface MemoryStatsPanelProps { stats: MemoryStats } export function MemoryStatsPanel({ stats }: MemoryStatsPanelProps) { const totalMemories = stats.shortTermCount + stats.longTermCount + stats.episodicCount + stats.semanticCount return (

Memory Statistics

} color="blue" /> } color="purple" /> } color="amber" /> } color="emerald" />

{/* Memory distribution bar */} {totalMemories > 0 && (

Memory Distribution {totalMemories} total

)} {/* Additional stats */}

{stats.totalAccesses}

Total Accesses

{(stats.avgImportance * 100).toFixed(0)}%

Avg Importance

) } function StatCard({ label, value, icon, color, }: { label: string value: string icon: React.ReactNode color: "blue" | "purple" | "amber" | "emerald" }) { const colorClasses = { blue: "bg-blue-500/10 text-blue-600 dark:text-blue-400", purple: "bg-purple-500/10 text-purple-600 dark:text-purple-400", amber: "bg-amber-500/10 text-amber-600 dark:text-amber-400", emerald: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", } return (

{icon}

{value}

{label}

) } // ============================================================================ // MEMORY LIST // ============================================================================ interface MemoryListProps { memories: Memory[] onClear?: () => void title?: string } export function MemoryList({ memories, onClear, title = "Memories" }: MemoryListProps) { if (memories.length === 0) { return (

No memories yet

Interact with the agent to create memories

) } return (

{title} {onClear && ( )}

{memories.map((memory, index) => (

{memory.content}

{memory.accessCount} accesses • {formatRelativeTime(memory.lastAccessedAt)}

))}

) } // ============================================================================ // IMPORTANCE METER // ============================================================================ function ImportanceMeter({ importance }: { importance: number }) { const percentage = importance * 100 const color = percentage >= 80 ? "text-emerald-500" : percentage >= 50 ? "text-amber-500" : "text-zinc-500" return (

{[0, 1, 2, 3, 4].map((i) => (

))}

{percentage.toFixed(0)}%

) } // ============================================================================ // SEARCH RESULTS // ============================================================================ interface SearchResultsProps { results: MemorySearchResult[] query: string } export function SearchResults({ results, query }: SearchResultsProps) { if (!query) return null if (results.length === 0) { return (

No memories found for "{query}"

) } return (

Found {results.length} relevant memories

{results.map((result) => (

{(result.relevanceScore * 100).toFixed(0)}% match

{result.memory.content}

))}

) } // ============================================================================ // CONTEXT PREVIEW // ============================================================================ interface ContextPreviewProps { context: string tokenEstimate?: number } export function ContextPreview({ context, tokenEstimate }: ContextPreviewProps) { if (!context) { return (

Context will appear here when relevant memories are found

) } return (

Memory Context {tokenEstimate && ( ~{tokenEstimate} tokens )}

        {context}

) } // ============================================================================ // CONSOLIDATION BUTTON // ============================================================================ interface ConsolidationButtonProps { onConsolidate: () => Memory[] shortTermCount: number } export function ConsolidationButton({ onConsolidate, shortTermCount, }: ConsolidationButtonProps) { const [lastConsolidated, setLastConsolidated] = useState(0) const handleConsolidate = () => { const consolidated = onConsolidate() setLastConsolidated(consolidated.length) setTimeout(() => setLastConsolidated(0), 2000) } return ( ) } // ============================================================================ // UTILITIES // ============================================================================ function formatRelativeTime(date: Date): string { const now = new Date() const diff = now.getTime() - date.getTime() const minutes = Math.floor(diff / 60000) const hours = Math.floor(diff / 3600000) if (minutes < 1) return "Just now" if (minutes < 60) return `${minutes}m ago` if (hours < 24) return `${hours}h ago` return date.toLocaleDateString() } // ============================================================================ // ICONS // ============================================================================ function ClockIcon({ className }: { className?: string }) { return ( ) } function ArchiveIcon({ className }: { className?: string }) { return ( ) } function FilmIcon({ className }: { className?: string }) { return ( ) } function BrainIcon({ className }: { className?: string }) { return ( ) } function ConsolidateIcon({ className }: { className?: string }) { return ( ) }

Agent Memory Kit