Memory Chips

1'use client';
2 
3import { useState } from 'react';
4import { Brain, Plus, X } from 'lucide-react';
5import { cn } from '@/lib/utils';
6 
7const KEYFRAMES = `
8@keyframes su-msg-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
9`;
10 
11export interface MemoryItem {
12  id: string;
13  fact: string;
14}
15 
16export type MemoryChipsVariant = 'Panel' | 'Row';
17 
18export interface MemoryChipsProps {
19  memories: MemoryItem[];
20  title?: string;
21  onRemove?: (id: string) => void;
22  onAdd?: () => void;
23  variant?: MemoryChipsVariant;
24  className?: string;
25}
26 
27export function MemoryChips({
28  memories: memoriesProp,
29  title = 'Assistant memory',
30  onRemove,
31  onAdd,
32  variant = 'Panel',
33  className,
34}: MemoryChipsProps) {
35  const [removed, setRemoved] = useState<Set<string>>(new Set());
36  const memories = memoriesProp.filter((memory) => !removed.has(memory.id));
37 
38  function remove(id: string) {
39    setRemoved((previous) => new Set(previous).add(id));
40    onRemove?.(id);
41  }
42 
43  const chips = (
44    <ul className="flex flex-wrap gap-1.5">
45      {memories.map((memory, index) => (
46        <li
47          key={memory.id}
48          className="motion-safe:animate-[su-msg-in_240ms_cubic-bezier(0.23,1,0.32,1)_both]"
49          style={{ animationDelay: `${Math.min(index, 5) * 40}ms` }}
50        >
51          <span className="flex items-center gap-1.5 rounded-full border border-black/[0.08] bg-white py-1 pl-2.5 pr-1 text-[12px] text-neutral-700 dark:border-white/[0.1] dark:bg-white/[0.03] dark:text-neutral-300">
52            {memory.fact}
53            <button
54              type="button"
55              aria-label={`Forget: ${memory.fact}`}
56              onClick={() => remove(memory.id)}
57              className="grid size-4 place-items-center rounded-full text-neutral-400 transition-[color,background-color,transform] duration-150 hover:bg-black/[0.06] hover:text-neutral-700 active:scale-[0.85] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400 dark:hover:bg-white/[0.1] dark:hover:text-neutral-200"
58            >
59              <X className="size-2.5" />
60            </button>
61          </span>
62        </li>
63      ))}
64      {onAdd && (
65        <li>
66          <button
67            type="button"
68            onClick={onAdd}
69// … truncated