50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T5004,// Hairline UI · chat-history · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { Pencil, Pin, PinOff, Search, SquarePen, Trash2, X } from "lucide-react"; /* ───────────────────────────────────────────────────────── * CHAT HISTORY: past conversations, findable and tidy * * grouped Pinned, Today, Yesterday, Previous 7 days, * Previous 30 days, then by month * new a fresh chat shimmers "New chat" until its title * is generated, then the title types itself in * search filters as you type and marks the match; the rows * that stay glide up to close the gaps * pin the row glides into Pinned (and back); the pin * icon trades places with unpin through a blur * rename the row turns into a field in place * delete the row's text gives way to "Chat deleted · Undo"; * it is only deleted once the undo window passes, * then folds away * * Rows are buttons; arrow keys move between them. * ───────────────────────────────────────────────────────── */ export interface ChatSummary { id: string; /** Empty while the title is being generated. */ title?: string; updatedAt: number | Date; pinned?: boolean; /** True while the title is being generated. */ generating?: boolean; } export interface ChatHistoryProps extends Omit, "onSelect"> { chats: ChatSummary[]; activeId?: string; onSelect: (id: string) => void; onNew?: () => void; onRename?: (id: string, title: string) => void; /** Called once the undo window has passed. */ onDelete?: (id: string) => void; onPin?: (id: string, pinned: boolean) => void; /** How long Undo is offered after deleting (ms). */ undoWindow?: number; searchable?: boolean; defaultQuery?: string; } const EASE = "cubic-bezier(0.23,1,0.32,1)"; const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const ICON = `cursor-pointer flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-background hover:text-foreground [&_svg]:size-3.5 ${FOCUS}`; const SHIMMER = "bg-[linear-gradient(90deg,color-mix(in_oklab,var(--muted-foreground)_55%,transparent)_35%,var(--foreground)_50%,color-mix(in_oklab,var(--muted-foreground)_55%,transparent)_65%)] bg-[length:200%_100%] bg-clip-text text-transparent animate-[ui-shimmer_1.4s_linear_infinite] motion-reduce:animate-none motion-reduce:bg-none motion-reduce:text-foreground/70"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`, }); /** One layer of a row: it fades in through a blur when it becomes the row, and out when it stops being it. */ const layer = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, filter: on ? "none" : "blur(4px)", transition: reduced ? "none" : on ? `opacity 280ms ${MORPH} 60ms, filter 280ms ${MORPH} 60ms` : "opacity 140ms ease-out, filter 140ms ease-out", }); /** Rows that weren't in the list before rise in; rows that were (even if they moved group) don't replay it. */ function Arrive({ fresh, children }: { fresh: boolean; children: React.ReactNode }) { const [animate] = React.useState(fresh); return

{children}

; } const DAY = 86_400_000; const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); function bucket(date: Date, today: number) { const days = Math.round((today - startOfDay(date)) / DAY); if (days <= 0) return "Today"; if (days === 1) return "Yesterday"; if (days < 7) return "Previous 7 days"; if (days < 30) return "Previous 30 days"; return date.toLocaleDateString("en-US", { month: "long", year: new Date(today).getFullYear() === date.getFullYear() ? undefined : "numeric" }); } function Mark({ text, query }: { text: string; query: string }) { const i = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1; if (i < 0) return <>{text}; return ( <> {text.slice(0, i)} {text.slice(i, i + query.length)} {text.slice(i + query.length)} ); } /** Types a freshly generated title in, once; titles that were already there just show. */ function useArrivingTitle(title: string | undefined, generating: boolean, reduced: boolean) { const [shown, setShown] = React.useState(title ?? ""); const waited = React.useRef(generating || !title); React.useEffect(() => { if (generating || !title) { waited.current = true; return; } if (!waited.current || reduced) { setShown(title); return; } waited.current = false; let i = 0; let frame = 0; const step = () => { i = Math.min(title.length, i + 1); setShown(title.slice(0, i)); if (i < title.length) frame = requestAnimationFrame(step); }; frame = requestAnimationFrame(step); return () => cancelAnimationFrame(frame); }, [title, generating, reduced]); return shown; } function Row({ chat, active, query, reduced, deleted, onSelect, onRename, onPin, onDelete, onUndo, }: { chat: ChatSummary; active: boolean; query: string; reduced: boolean; deleted: boolean; onSelect: () => void; onRename?: (title: string) => void; onPin?: () => void; onDelete?: () => void; onUndo: () => void; }) { const generating = Boolean(chat.generating || !chat.title); const title = useArrivingTitle(chat.title, generating, reduced); const [renaming, setRenaming] = React.useState(false); const [draft, setDraft] = React.useState(""); const fieldRef = React.useRef(null); const rowRef = React.useRef(null); React.useEffect(() => { if (!renaming) return; fieldRef.current?.focus(); fieldRef.current?.select(); }, [renaming]); const save = () => { const next = draft.trim(); setRenaming(false); if (next && next !== chat.title) onRename?.(next); requestAnimationFrame(() => rowRef.current?.focus({ preventScroll: true })); }; const mode = deleted ? "deleted" : renaming ? "renaming" : "row"; // One surface: the row, its rename field and its "deleted" note are layers of the same box. return (

{!generating && (onPin || onRename || onDelete) && ( {onPin && ( )} {onRename && ( )} {onDelete && ( )} )}

{(onRename || renaming) && (

setDraft(e.target.value)} onBlur={() => mode === "renaming" && save()} onKeyDown={(e) => { if (e.nativeEvent.isComposing) return; if (e.key === "Enter") { e.preventDefault(); save(); } else if (e.key === "Escape") { e.preventDefault(); setDraft(chat.title ?? ""); setRenaming(false); requestAnimationFrame(() => rowRef.current?.focus({ preventScroll: true })); } }} className="h-7 min-w-0 flex-1 rounded-lg bg-transparent px-2 text-[13px] text-foreground outline-none" />

)}

{deleted ? "Chat deleted" : ""}

); } export function ChatHistory({ chats, activeId, onSelect, onNew, onRename, onDelete, onPin, undoWindow = 5000, searchable = true, defaultQuery = "", className = "", ...props }: ChatHistoryProps) { const reduced = useReducedMotion(); const [query, setQuery] = React.useState(defaultQuery); const [deleted, setDeleted] = React.useState>(() => new Set()); const [gone, setGone] = React.useState>(() => new Set()); const timers = React.useRef(new Map()); const listRef = React.useRef(null); const known = React.useRef(new Set()); const snapshot = React.useRef<{ at: number; tops: Map } | null>(null); const [today, setToday] = React.useState(() => startOfDay(new Date())); // Just before a reorder (a pin, a search keystroke), note where every row is... const capture = () => { const tops = new Map(); listRef.current?.querySelectorAll("[data-row]").forEach((el) => tops.set(el.dataset.row ?? "", el.offsetTop)); snapshot.current = { at: performance.now(), tops }; }; // ...then glide each row from there to its new place: into Pinned and back, or up as a search filters others out. React.useLayoutEffect(() => { const list = listRef.current; const before = snapshot.current; if (list) known.current = new Set([...list.querySelectorAll("[data-row]")].map((el) => el.dataset.row ?? "")); if (!list || !before) return; snapshot.current = null; if (reduced || performance.now() - before.at > 1000) return; list.querySelectorAll("[data-row]").forEach((el) => { const from = before.tops.get(el.dataset.row ?? ""); if (from !== undefined && Math.abs(from - el.offsetTop) > 1) { el.animate([{ transform: `translateY(${from - el.offsetTop}px)` }, { transform: "none" }], { duration: 420, easing: MORPH }); } }); }); React.useEffect(() => { const all = timers.current; return () => all.forEach((t) => window.clearTimeout(t)); }, []); // Regroup at midnight. React.useEffect(() => { const timer = window.setTimeout(() => setToday(startOfDay(new Date())), today + DAY - Date.now() + 1000); return () => window.clearTimeout(timer); }, [today]); const remove = (id: string) => { setDeleted((d) => new Set(d).add(id)); timers.current.set( id, window.setTimeout(() => { timers.current.delete(id); setGone((g) => new Set(g).add(id)); // Let the row fold away before the parent drops it. window.setTimeout(() => onDelete?.(id), reduced ? 0 : 360); }, undoWindow) ); }; const undo = (id: string) => { window.clearTimeout(timers.current.get(id)); timers.current.delete(id); setDeleted((d) => { const next = new Set(d); next.delete(id); return next; }); }; const q = query.trim().toLowerCase(); const visible = chats.filter((c) => !q || (c.title ?? "").toLowerCase().includes(q)); const groups = new Map(); for (const chat of [...visible].sort((a, b) => +new Date(b.updatedAt) - +new Date(a.updatedAt))) { const name = chat.pinned ? "Pinned" : bucket(new Date(chat.updatedAt), today); groups.set(name, [...(groups.get(name) ?? []), chat]); } const ordered = [...groups.entries()].sort(([a], [b]) => (a === "Pinned" ? -1 : b === "Pinned" ? 1 : 0)); // Up and down move between chats. const onKeyDown = (e: React.KeyboardEvent) => { if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return; if (e.target instanceof HTMLInputElement && e.key === "ArrowUp") return; const rows = Array.from(listRef.current?.querySelectorAll("[data-chat]") ?? []); if (!rows.length) return; e.preventDefault(); const i = rows.indexOf(document.activeElement as HTMLButtonElement); const next = e.key === "ArrowDown" ? (i < 0 ? 0 : Math.min(rows.length - 1, i + 1)) : Math.max(0, i - 1); rows[next]?.focus(); }; return (

{(searchable || onNew) && (

{searchable && ( { capture(); setQuery(e.target.value); }} onKeyDown={(e) => { if (e.key !== "Escape") return; capture(); setQuery(""); }} placeholder="Search chats" aria-label="Search chats" className="h-full min-w-0 flex-1 bg-transparent text-[13px] text-foreground outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden" /> {query && ( )} )} {onNew && ( )}

)}

{ordered.length === 0 && (

{q ? `No chats match “${query.trim()}”` : "No chats yet"}

)} {ordered.map(([name, items]) => (

{name}

onSelect(chat.id)} onRename={onRename ? (title) => onRename(chat.id, title) : undefined} onPin={ onPin ? () => { capture(); onPin(chat.id, !chat.pinned); } : undefined } onDelete={onDelete ? () => remove(chat.id) : undefined} onUndo={() => undo(chat.id)} />

))}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-shimmer {\n\t0% {\n\t\tbackground-position: 150% 0;\n\t}\n\t100% {\n\t\tbackground-position: -50% 0;\n\t}\n}\n\n@keyframes ui-fade-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(4px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/chat-history.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]