"use client"; /** * @author: @kokonutui * @description: AI Memory * @version: 1.0.0 * @date: 2026-10-21 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ArrowUp, Bookmark, Check, Pencil, Trash2 } from "lucide-react"; import { AnimatePresence, MotionConfig, motion, useReducedMotion, } from "motion/react"; import { useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export interface MemoryItem { id: string; text: string; group: string; /** When it was saved, in words, e.g. "Today" or "Sep 12". */ saved: string; } export interface MemoryChange { reply: string; /** A fact to save. With `replaces`, it takes the place of an older one. */ memory?: { text: string; group: string; replaces?: string }; } export interface AIMemoryProps { title?: string; initialMemories?: MemoryItem[]; /** Messages offered as one-tap replies. */ suggestions?: string[]; /** Answers a message and decides what to remember. Demo when omitted. */ remember?: (text: string, memories: MemoryItem[]) => MemoryChange; className?: string; } type RowState = "live" | "new" | "replaced"; interface Row extends MemoryItem { state: RowState; } interface ChatMessage { id: string; role: "user" | "assistant"; text: string; /** Id of the memory this reply saved. */ saved?: string; savedText?: string; replaced?: string; } const EASE_OUT = [0.23, 1, 0.32, 1] as const; const WORDS = /\S+\s*/g; const GROUPS = ["About you", "Food", "Work"]; const DEMO_MEMORIES: MemoryItem[] = [ { id: "name", text: "Goes by Samantha", group: "About you", saved: "Aug 3" }, { id: "city", text: "Lives in Berlin", group: "About you", saved: "Aug 3" }, { id: "diet", text: "Is pescatarian", group: "Food", saved: "Sep 12" }, { id: "spice", text: "Likes food very spicy", group: "Food", saved: "Sep 12", }, { id: "job", text: "Product designer at Fieldwork", group: "Work", saved: "Jul 28", }, { id: "tone", text: "Wants short, direct answers", group: "Work", saved: "Jul 28", }, ]; const DEMO_REPLIES: Record = { "I just moved to Lisbon": { reply: "Congrats on the move! I'll plan around Lisbon from now on, so weather, events and dinner ideas will be local.", memory: { text: "Lives in Lisbon, moved Oct 2026", group: "About you", replaces: "city", }, }, "I'm vegetarian now": { reply: "Noted. Recipes and restaurant picks will be vegetarian from here on, still spicy.", memory: { text: "Is vegetarian", group: "Food", replaces: "diet" }, }, "Please call me Sam": { reply: "Sure thing, Sam.", memory: { text: "Goes by Sam", group: "About you", replaces: "name" }, }, "I started at Linear as a design engineer": { reply: "Big news, congrats! I'll keep that in mind when you ask about design systems or code.", memory: { text: "Design engineer at Linear", group: "Work", replaces: "job", }, }, "My daughter Ava starts school next year": { reply: "Exciting! I'll remember that when you ask about schools or planning next year.", memory: { text: "Has a daughter, Ava, starting school next year", group: "About you", }, }, }; const demoRemember = (text: string): MemoryChange => DEMO_REPLIES[text] ?? { reply: "Got it. Nothing in that I need to remember.", }; let counter = 0; const uid = (prefix: string) => { counter += 1; return `${prefix}-${counter}`; }; export default function AIMemory({ title = "Assistant", initialMemories = DEMO_MEMORIES, suggestions = Object.keys(DEMO_REPLIES), remember = demoRemember, className, }: AIMemoryProps) { const reduceMotion = useReducedMotion(); const [rows, setRows] = useState(() => initialMemories.map((m) => ({ ...m, state: "live" })) ); const [messages, setMessages] = useState([ { id: "a-0", role: "assistant", text: "Hi Samantha. What's new? Tell me anything and I'll keep what matters.", }, ]); const [used, setUsed] = useState([]); const [draft, setDraft] = useState(""); const [shown, setShown] = useState(Number.POSITIVE_INFINITY); const [pending, setPending] = useState(null); const [enabled, setEnabled] = useState(true); const [flash, setFlash] = useState(null); const [undo, setUndo] = useState<{ row: Row; index: number } | null>(null); const [incoming, setIncoming] = useState<{ row: Row; after: string } | null>( null ); const threadRef = useRef(null); const last = messages.at(-1); const words = useMemo( () => (last?.role === "assistant" ? (last.text.match(WORDS) ?? []) : []), [last] ); const streaming = last?.role === "assistant" && shown < words.length; // Stream the reply, then save what it learned. useEffect(() => { if (!(last?.role === "assistant" && pending)) { return; } if (shown < words.length && !reduceMotion) { const id = setTimeout(() => setShown((n) => n + 1), 45); return () => clearTimeout(id); } const change = pending; setPending(null); setShown(Number.POSITIVE_INFINITY); if (!(change.memory && enabled)) { return; } const { text, group, replaces } = change.memory; const id = uid("mem"); const old = rows.find((r) => r.id === replaces && r.state === "live"); const next: Row = { id, text, group, saved: "Today", state: "new" }; if (old) { // Strike the old fact first; the new one slides in under it. setRows((list) => list.map((r) => (r.id === old.id ? { ...r, state: "replaced" } : r)) ); setIncoming({ row: next, after: old.id }); } else { setRows((list) => [...list, next]); } setMessages((list) => list.map((m) => m.id === last.id ? { ...m, saved: id, savedText: text, replaced: old?.text } : m ) ); }, [last, pending, shown, words, reduceMotion, enabled, rows]); // The replacement lands once the strike has had a beat to read. useEffect(() => { if (!incoming) { return; } const id = setTimeout( () => { setRows((list) => { const copy = [...list]; const at = copy.findIndex((r) => r.id === incoming.after); copy.splice(at < 0 ? copy.length : at + 1, 0, incoming.row); return copy; }); setIncoming(null); }, reduceMotion ? 0 : 320 ); return () => clearTimeout(id); }, [incoming, reduceMotion]); const hasReplaced = rows.some((r) => r.state === "replaced"); const hasNew = rows.some((r) => r.state === "new"); // Struck facts fold away once they have been read. useEffect(() => { if (!hasReplaced) { return; } const id = setTimeout( () => setRows((list) => list.filter((r) => r.state !== "replaced")), reduceMotion ? 0 : 1600 ); return () => clearTimeout(id); }, [hasReplaced, reduceMotion]); // New facts lose their tint. useEffect(() => { if (!hasNew) { return; } const id = setTimeout( () => setRows((list) => list.map((r) => (r.state === "new" ? { ...r, state: "live" } : r)) ), 2400 ); return () => clearTimeout(id); }, [hasNew]); useEffect(() => { if (!flash) { return; } const id = setTimeout(() => setFlash(null), 1200); return () => clearTimeout(id); }, [flash]); useEffect(() => { if (!undo) { return; } const id = setTimeout(() => setUndo(null), 5000); return () => clearTimeout(id); }, [undo]); const messageCount = messages.length; const lastSaved = last?.saved; useEffect(() => { const el = threadRef.current; if ((messageCount > 1 || lastSaved) && el) { el.scrollTo({ top: el.scrollHeight, behavior: "smooth" }); } }, [messageCount, lastSaved]); const send = (raw: string) => { const text = raw.trim(); if (!text || streaming || pending || incoming) { return; } const change = enabled ? remember(text, rows) : { reply: "Memory is off, so I won't save anything from this chat." }; setUsed((u) => [...u, text]); setDraft(""); setMessages((list) => [ ...list, { id: uid("u"), role: "user", text }, { id: uid("a"), role: "assistant", text: change.reply }, ]); setShown(0); setPending(change); }; const forget = (row: Row) => { const index = rows.findIndex((r) => r.id === row.id); setRows((list) => list.filter((r) => r.id !== row.id)); setUndo({ row, index }); }; const restoreRow = () => { if (!undo) { return; } setRows((list) => { const copy = [...list]; copy.splice(undo.index, 0, { ...undo.row, state: "live" }); return copy; }); setUndo(null); }; const left = suggestions.filter((s) => !used.includes(s)); const live = rows.filter((r) => r.state !== "replaced"); const groups = [ ...GROUPS.filter((g) => rows.some((r) => r.group === g)), ...new Set(rows.map((r) => r.group).filter((g) => !GROUPS.includes(g))), ]; return (

{title}

{messages.map((message) => { if (message.role === "user") { return (

{message.text}

); } const isLast = message === last; const text = isLast ? words.slice(0, shown).join("") : message.text; return (

{text}

{message.saved && ( setFlash(message.saved ?? null)} transition={{ duration: 0.25, ease: EASE_OUT }} type="button" > )}

); })}

{left.length > 0 && ( {left.slice(0, 3).map((s) => ( send(s)} transition={{ duration: 0.2, ease: EASE_OUT }} type="button" > {s} ))} )}

Memory

{live.length} setEnabled((e) => !e)} />

{groups.map((group) => (

{group}

{rows .filter((r) => r.group === group) .map((row) => ( setRows((list) => list.map((r) => r.id === row.id ? { ...r, text, saved: "Today" } : r ) ) } onForget={() => forget(row)} row={row} /> ))}

))}

{undo && ( Forgot “{undo.row.text}” )}

); } function MemoryRow({ row, flash, onEdit, onForget, }: { row: Row; flash: boolean; onEdit: (text: string) => void; onForget: () => void; }) { const [editing, setEditing] = useState(false); const [value, setValue] = useState(row.text); const inputRef = useRef(null); const rowRef = useRef(null); const replaced = row.state === "replaced"; // Tapping "Saved to memory" in the chat brings the fact into view. useEffect(() => { if (flash) { rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" }); } }, [flash]); useEffect(() => { if (editing) { inputRef.current?.focus(); inputRef.current?.select(); } }, [editing]); const save = () => { const text = value.trim(); if (text && text !== row.text) { onEdit(text); } else { setValue(row.text); } setEditing(false); }; const icon = "flex size-6 shrink-0 items-center justify-center rounded-md text-zinc-400 outline-hidden transition-colors duration-100 hover:bg-zinc-900/[0.06] hover:text-zinc-800 focus-visible:bg-zinc-900/[0.06] focus-visible:text-zinc-800 active:bg-zinc-900/[0.1] dark:text-zinc-500 dark:active:bg-white/15 dark:focus-visible:bg-white/10 dark:focus-visible:text-zinc-100 dark:hover:bg-white/10 dark:hover:text-zinc-100"; return (

{editing ? ( setValue(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") { event.preventDefault(); save(); } else if (event.key === "Escape") { event.preventDefault(); setValue(row.text); setEditing(false); } }} ref={inputRef} value={value} /> ) : (

{row.text} {replaced ? "Replaced" : row.saved}

)} {row.state === "new" && !editing && ( )} {!(replaced || editing) && (

)}

); } function Switch({ on, onToggle }: { on: boolean; onToggle: () => void }) { return ( ); }

AI Memory

On this page