"use client" import { useCallback, useMemo, useRef, useState } from "react" import { AnimatePresence, motion } from "motion/react" // ============================================================================ // TYPES // ============================================================================ export interface CacheEntry { id: string query: string queryEmbedding: number[] response: string model: string tokensUsed: number costSaved: number createdAt: Date lastAccessedAt: Date hitCount: number } export interface CacheStats { totalQueries: number cacheHits: number cacheMisses: number tokensSaved: number costSaved: number hitRate: number } export interface CacheConfig { similarityThreshold?: number maxEntries?: number ttlMs?: number model?: string } export interface CacheResult { hit: boolean response?: string similarity?: number entry?: CacheEntry latencyMs: number } // ============================================================================ // MODEL PRICING (per 1K tokens) // ============================================================================ const MODEL_PRICING: Record = { "gpt-4o": { input: 0.0025, output: 0.01 }, "gpt-4o-mini": { input: 0.00015, output: 0.0006 }, "gpt-4-turbo": { input: 0.01, output: 0.03 }, "claude-sonnet-4-20250514": { input: 0.003, output: 0.015 }, "claude-3-5-sonnet": { input: 0.003, output: 0.015 }, "gemini-2.0-flash": { input: 0.000075, output: 0.0003 }, } // ============================================================================ // COSINE SIMILARITY // ============================================================================ function cosineSimilarity(a: number[], b: number[]): number { if (a.length !== b.length) return 0 let dotProduct = 0 let normA = 0 let normB = 0 for (let i = 0; i < a.length; i++) { dotProduct += a[i] * b[i] normA += a[i] * a[i] normB += b[i] * b[i] } const magnitude = Math.sqrt(normA) * Math.sqrt(normB) return magnitude === 0 ? 0 : dotProduct / magnitude } // ============================================================================ // IN-MEMORY CACHE STORE // ============================================================================ class SemanticCacheStore { private entries: Map = new Map() private maxEntries: number private ttlMs: number constructor(maxEntries = 1000, ttlMs = 3600000) { this.maxEntries = maxEntries this.ttlMs = ttlMs } add(entry: CacheEntry): void { // Evict oldest if at capacity if (this.entries.size >= this.maxEntries) { const oldest = Array.from(this.entries.values()).sort( (a, b) => a.lastAccessedAt.getTime() - b.lastAccessedAt.getTime() )[0] if (oldest) this.entries.delete(oldest.id) } this.entries.set(entry.id, entry) } findSimilar( embedding: number[], threshold: number ): { entry: CacheEntry; similarity: number } | null { const now = Date.now() let bestMatch: { entry: CacheEntry; similarity: number } | null = null for (const entry of this.entries.values()) { // Check TTL if (now - entry.createdAt.getTime() > this.ttlMs) { this.entries.delete(entry.id) continue } const similarity = cosineSimilarity(embedding, entry.queryEmbedding) if (similarity >= threshold) { if (!bestMatch || similarity > bestMatch.similarity) { bestMatch = { entry, similarity } } } } if (bestMatch) { // Update access time and hit count bestMatch.entry.lastAccessedAt = new Date() bestMatch.entry.hitCount++ } return bestMatch } getAll(): CacheEntry[] { return Array.from(this.entries.values()).sort( (a, b) => b.lastAccessedAt.getTime() - a.lastAccessedAt.getTime() ) } clear(): void { this.entries.clear() } size(): number { return this.entries.size } } // ============================================================================ // HOOK: useSemanticCache // ============================================================================ interface UseSemanticCacheOptions extends CacheConfig { onCacheHit?: (entry: CacheEntry, similarity: number) => void onCacheMiss?: (query: string) => void } export function useSemanticCache(options: UseSemanticCacheOptions = {}) { const { similarityThreshold = 0.92, maxEntries = 1000, ttlMs = 3600000, // 1 hour model = "gpt-4o-mini", onCacheHit, onCacheMiss, } = options const storeRef = useRef(new SemanticCacheStore(maxEntries, ttlMs)) const [stats, setStats] = useState({ totalQueries: 0, cacheHits: 0, cacheMisses: 0, tokensSaved: 0, costSaved: 0, hitRate: 0, }) const [lastResult, setLastResult] = useState(null) // Get embedding for a query const getEmbedding = useCallback(async (text: string): Promise => { const response = await fetch("/api/cache/embed", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }), }) if (!response.ok) { throw new Error("Failed to get embedding") } const data = await response.json() return data.embedding }, []) // Check cache and return result const checkCache = useCallback( async (query: string): Promise => { const startTime = performance.now() try { const embedding = await getEmbedding(query) const match = storeRef.current.findSimilar( embedding, similarityThreshold ) const latencyMs = performance.now() - startTime if (match) { // Cache hit const result: CacheResult = { hit: true, response: match.entry.response, similarity: match.similarity, entry: match.entry, latencyMs, } setStats((prev) => { const newHits = prev.cacheHits + 1 const newTotal = prev.totalQueries + 1 return { ...prev, totalQueries: newTotal, cacheHits: newHits, tokensSaved: prev.tokensSaved + match.entry.tokensUsed, costSaved: prev.costSaved + match.entry.costSaved, hitRate: (newHits / newTotal) * 100, } }) setLastResult(result) onCacheHit?.(match.entry, match.similarity) return result } else { // Cache miss const result: CacheResult = { hit: false, latencyMs, } setStats((prev) => { const newMisses = prev.cacheMisses + 1 const newTotal = prev.totalQueries + 1 return { ...prev, totalQueries: newTotal, cacheMisses: newMisses, hitRate: (prev.cacheHits / newTotal) * 100, } }) setLastResult(result) onCacheMiss?.(query) return result } } catch (error) { return { hit: false, latencyMs: performance.now() - startTime, } } }, [getEmbedding, similarityThreshold, onCacheHit, onCacheMiss] ) // Add response to cache const addToCache = useCallback( async ( query: string, response: string, tokensUsed: number ): Promise => { const embedding = await getEmbedding(query) const pricing = MODEL_PRICING[model] || MODEL_PRICING["gpt-4o-mini"] const costSaved = (tokensUsed / 1000) * (pricing.input + pricing.output) const entry: CacheEntry = { id: crypto.randomUUID(), query, queryEmbedding: embedding, response, model, tokensUsed, costSaved, createdAt: new Date(), lastAccessedAt: new Date(), hitCount: 0, } storeRef.current.add(entry) }, [getEmbedding, model] ) // Clear cache const clearCache = useCallback(() => { storeRef.current.clear() setStats({ totalQueries: 0, cacheHits: 0, cacheMisses: 0, tokensSaved: 0, costSaved: 0, hitRate: 0, }) setLastResult(null) }, []) // Get all cached entries const getCachedEntries = useCallback((): CacheEntry[] => { return storeRef.current.getAll() }, []) return { stats, lastResult, checkCache, addToCache, clearCache, getCachedEntries, cacheSize: storeRef.current.size(), } } // ============================================================================ // CACHE HIT INDICATOR // ============================================================================ interface CacheHitIndicatorProps { result: CacheResult | null } export function CacheHitIndicator({ result }: CacheHitIndicatorProps) { if (!result) return null return ( {result.hit ? ( <> CACHE HIT {(result.similarity! * 100).toFixed(1)}% similar {result.latencyMs.toFixed(0)}ms ) : ( <> CACHE MISS {result.latencyMs.toFixed(0)}ms )} ) } // ============================================================================ // CACHE SAVINGS PANEL // ============================================================================ interface CacheSavingsPanelProps { stats: CacheStats } export function CacheSavingsPanel({ stats }: CacheSavingsPanelProps) { return (

Cache Performance

} color={ stats.hitRate > 50 ? "emerald" : stats.hitRate > 25 ? "amber" : "zinc" } /> } color="emerald" /> } color="blue" /> } color="purple" />

{/* Hit/Miss ratio bar */}

Hits: {stats.cacheHits} Misses: {stats.cacheMisses}

0 ? `${(stats.cacheHits / stats.totalQueries) * 100}%` : "0%", }} transition={{ duration: 0.5 }} /> 0 ? `${(stats.cacheMisses / stats.totalQueries) * 100}%` : "0%", }} transition={{ duration: 0.5 }} />

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

{icon}

{value}

{label}

) } // ============================================================================ // SIMILARITY METER // ============================================================================ interface SimilarityMeterProps { similarity: number threshold: number } export function SimilarityMeter({ similarity, threshold, }: SimilarityMeterProps) { const percentage = similarity * 100 const isAboveThreshold = similarity >= threshold return (

Similarity Score {percentage.toFixed(1)}%

{/* Threshold marker */}

{/* Similarity bar */}

0% Threshold: {(threshold * 100).toFixed(0)}% 100%

) } // ============================================================================ // CACHE ENTRIES LIST // ============================================================================ interface CacheEntriesListProps { entries: CacheEntry[] onClear: () => void } export function CacheEntriesList({ entries, onClear }: CacheEntriesListProps) { if (entries.length === 0) { return (

Cache is empty

Send some messages to populate the cache

) } return (

{entries.length} cached responses

{entries.map((entry) => (

{entry.query}

{entry.hitCount} hits

{entry.response}

{entry.model} • {entry.tokensUsed} tokens • ${entry.costSaved.toFixed(4)} saved • {formatRelativeTime(entry.lastAccessedAt)}

))}

) } // ============================================================================ // COST PROJECTION // ============================================================================ interface CostProjectionProps { stats: CacheStats projectionDays?: number } export function CostProjection({ stats, projectionDays = 30, }: CostProjectionProps) { const dailyQueries = stats.totalQueries || 1 const dailySavings = stats.costSaved || 0 const projectedQueries = dailyQueries * projectionDays const projectedSavings = dailySavings * projectionDays const projectedTokens = stats.tokensSaved * projectionDays return (

{projectionDays}-Day Projection

${projectedSavings.toFixed(2)}

Estimated savings

{(projectedTokens / 1000000).toFixed(2)}M

Tokens saved

{projectedQueries.toLocaleString()}

Est. queries

Based on current hit rate of {stats.hitRate.toFixed(1)}%

) } // ============================================================================ // 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 CacheIcon({ className }: { className?: string }) { return ( ) } function MissIcon({ className }: { className?: string }) { return ( ) } function PercentIcon({ className }: { className?: string }) { return ( ) } function DollarIcon({ className }: { className?: string }) { return ( ) } function TokenIcon({ className }: { className?: string }) { return ( ) }

semantic-cache