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[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"] 52:T3ce6,"use client"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { AuiIf, ThreadListItemMorePrimitive, ThreadListItemPrimitive, ThreadListPrimitive, useAui, useAuiState, } from "@assistant-ui/react"; import { ArchiveIcon, Loader2Icon, MoreHorizontalIcon, PencilIcon, PlusIcon, SearchIcon, TrashIcon, } from "lucide-react"; import { forwardRef, Fragment, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ComponentPropsWithoutRef, type FC, } from "react"; export const ThreadList: FC = () => { const [search, setSearch] = useState(""); const hasThreads = useAuiState((s) => s.threads.threadIds.length > 0); return ( {hasThreads && ( )} ); }; export const ThreadListSearch = forwardRef< HTMLInputElement, Omit, "value" | "onChange"> & { value: string; onValueChange: (value: string) => void; } >(({ className, value, onValueChange, ...props }, ref) => { return (

onValueChange(event.target.value)} aria-label="Search threads" placeholder="Search threads" className={cn("h-8 ps-8 text-sm", className)} {...props} />

); }); ThreadListSearch.displayName = "ThreadListSearch"; export const ThreadListRoot: FC< ComponentPropsWithoutRef > = ({ className, ...props }) => { return ( ); }; export const ThreadListItems: FC< ComponentPropsWithoutRef<"div"> & { searchQuery?: string } > = ({ className, searchQuery = "", ...props }) => { return (

s.threads.isLoading}> !s.threads.isLoading}>

); }; const dateGroupLabel = ( date: Date | undefined, startOfToday: number, startOfYesterday: number, ): string => { if (!date || date.getTime() >= startOfToday) return "Today"; if (date.getTime() >= startOfYesterday) return "Yesterday"; return "Earlier"; }; const startOfLocalDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime(); const subscribeToNextDay = (onDayChange: () => void) => { let timeout: number; const scheduleNextDay = () => { const now = new Date(); const startOfTomorrow = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 1, ).getTime(); timeout = window.setTimeout(() => { onDayChange(); scheduleNextDay(); }, startOfTomorrow - now.getTime()); }; scheduleNextDay(); return () => window.clearTimeout(timeout); }; const getStartOfToday = () => startOfLocalDay(new Date()); // A server render and hydration see no day start, so a prerender never reads // the clock; a client-only mount groups on its first render. const getServerStartOfToday = () => undefined; const useStartOfToday = () => useSyncExternalStore( subscribeToNextDay, getStartOfToday, getServerStartOfToday, ); export type ThreadListGroup = { label: string; indices: number[] }; /** * Filters the thread list by title and buckets the matches by last activity * (Today, Yesterday, Earlier). `groups` is null when no thread carries a date * or while the local day start is unknown during server render and hydration, * in which case `filteredIndices` keeps the runtime order. */ export const useThreadListGroups = (searchQuery = "") => { const threadIds = useAuiState((s) => s.threads.threadIds); const threadItems = useAuiState((s) => s.threads.threadItems); const query = searchQuery.trim().toLowerCase(); const startOfToday = useStartOfToday(); return useMemo(() => { const itemsById = new Map(threadItems.map((item) => [item.id, item])); const dates = threadIds.map((id) => itemsById.get(id)?.lastMessageAt); const filteredIndices = threadIds .map((id, index) => ({ id, index })) .filter( ({ id }) => !query || (itemsById.get(id)?.title || "New Chat") .toLowerCase() .includes(query), ) .map(({ index }) => index); if ( startOfToday === undefined || !filteredIndices.some((index) => dates[index]) ) { return { threadIds, filteredIndices, groups: null }; } const yesterday = new Date(startOfToday); yesterday.setDate(yesterday.getDate() - 1); const startOfYesterday = yesterday.getTime(); const time = (index: number) => dates[index]?.getTime() ?? Number.MAX_SAFE_INTEGER; const sorted = [...filteredIndices].sort((a, b) => time(b) - time(a)); const result: ThreadListGroup[] = []; for (const index of sorted) { const label = dateGroupLabel( dates[index], startOfToday, startOfYesterday, ); const lastGroup = result[result.length - 1]; if (lastGroup?.label === label) { lastGroup.indices.push(index); } else { result.push({ label, indices: [index] }); } } return { threadIds, filteredIndices, groups: result }; }, [threadIds, threadItems, query, startOfToday]); }; const ThreadListItemGroups: FC<{ searchQuery?: string }> = ({ searchQuery = "", }) => { const { threadIds, filteredIndices, groups } = useThreadListGroups(searchQuery); const query = searchQuery.trim(); if (query && filteredIndices.length === 0) { return (

No threads found

); } if (!groups) { return filteredIndices.map((index) => ( )); } return groups.map((group) => (

{group.label}

{group.indices.map((index) => ( ))} )); }; export const ThreadListNew = forwardRef< HTMLButtonElement, ComponentPropsWithoutRef & { labelClassName?: string } >(({ className, labelClassName, children, ...props }, ref) => { return ( ); }); ThreadListNew.displayName = "ThreadListNew"; const ThreadListSkeleton: FC = () => { return (

{Array.from({ length: 5 }, (_, i) => ( ))}

); }; export const ThreadListItem: FC = () => { const isRunning = useAuiState((s) => s.threadListItem.isRunning); const [isRenaming, setIsRenaming] = useState(false); const triggerRef = useRef(null); const restoreFocusRef = useRef(false); useEffect(() => { if (isRenaming || !restoreFocusRef.current) return; restoreFocusRef.current = false; triggerRef.current?.focus(); }, [isRenaming]); return ( {isRenaming ? ( { restoreFocusRef.current = restoreFocus; setIsRenaming(false); }} /> ) : ( {isRunning && ( )} {isRunning && Running} )} setIsRenaming(true)} /> ); }; const ThreadListItemRename: FC<{ onDone: (restoreFocus: boolean) => void; }> = ({ onDone }) => { const aui = useAui(); const title = useAuiState((s) => s.threadListItem.title) ?? ""; const [value, setValue] = useState(title); const inputRef = useRef(null); const settledRef = useRef(false); useEffect(() => { inputRef.current?.select(); }, []); const commit = (restoreFocus: boolean) => { if (settledRef.current) return; settledRef.current = true; const next = value.trim(); if (!next || next === title) { onDone(restoreFocus); return; } // Deferred so a synchronous throw lands on the rejection path too. Promise.resolve() .then(() => aui.threadListItem.rename(next)) .then( () => onDone(restoreFocus), () => { settledRef.current = false; if (restoreFocus) inputRef.current?.focus(); }, ); }; const cancel = () => { if (settledRef.current) return; settledRef.current = true; onDone(true); }; return ( setValue(event.target.value)} onBlur={() => commit(false)} onKeyDown={(event) => { if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return; if (event.key === "Enter") { event.preventDefault(); commit(true); } else if (event.key === "Escape") { event.preventDefault(); cancel(); } }} /> ); }; const ThreadListItemMore: FC<{ onRename: () => void }> = ({ onRename }) => { return ( Rename Archive Delete ); }; 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","@assistant-ui/react@^0.15.29",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40assistant-ui%2Freact","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":"@assistant-ui/react@^0.15.29"}]]}]}],["$","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":"@assistant-ui","registryDependencies":["button","input","skeleton"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/assistant-ui/elements/thread-list.aui.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]