@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/thread-list.aui.js

@@ -0,0 +1,331 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { cn } from "../../../lib/utils.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { Fragment, forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArchiveIcon, Loader2Icon, MoreHorizontalIcon, PencilIcon, PlusIcon, SearchIcon, TrashIcon } from "lucide-react";
+import { AuiIf, ThreadListItemMorePrimitive, ThreadListItemPrimitive, ThreadListPrimitive, useAui, useAuiState } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/thread-list.aui.tsx
+var thread_list_aui_exports = /* @__PURE__ */ __exportAll({
+	ThreadList: () => ThreadList,
+	ThreadListItem: () => ThreadListItem,
+	ThreadListItems: () => ThreadListItems,
+	ThreadListNew: () => ThreadListNew,
+	ThreadListRoot: () => ThreadListRoot,
+	ThreadListSearch: () => ThreadListSearch,
+	useThreadListGroups: () => useThreadListGroups
+});
+const ThreadList = () => {
+	const [search, setSearch] = useState("");
+	const hasThreads = useAuiState((s) => s.threads.threadIds.length > 0);
+	return /* @__PURE__ */ jsxs(ThreadListRoot, { children: [
+		/* @__PURE__ */ jsx(ThreadListNew, {}),
+		hasThreads && /* @__PURE__ */ jsx(ThreadListSearch, {
+			value: search,
+			onValueChange: setSearch
+		}),
+		/* @__PURE__ */ jsx(ThreadListItems, { searchQuery: hasThreads ? search : "" })
+	] });
+};
+const ThreadListSearch = forwardRef(({ className, value, onValueChange, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "aui_thread-list-search",
+		className: "relative px-0.5 py-1",
+		children: [/* @__PURE__ */ jsx(SearchIcon, {
+			"data-slot": "aui_thread-list-search-icon",
+			className: "text-muted-foreground pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2"
+		}), /* @__PURE__ */ jsx(Input, {
+			ref,
+			type: "search",
+			value,
+			onChange: (event) => onValueChange(event.target.value),
+			"aria-label": "Search threads",
+			placeholder: "Search threads",
+			className: cn("h-8 ps-8 text-sm [&::-webkit-search-cancel-button]:hidden", className),
+			...props
+		})]
+	});
+});
+ThreadListSearch.displayName = "ThreadListSearch";
+const ThreadListRoot = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(ThreadListPrimitive.Root, {
+		"data-slot": "aui_thread-list-root",
+		className: cn("flex flex-col gap-0.5", className),
+		...props
+	});
+};
+const ThreadListItems = ({ className, searchQuery = "", ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "aui_thread-list-items",
+		className: cn("flex flex-col gap-0.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(AuiIf, {
+			condition: (s) => s.threads.isLoading,
+			children: /* @__PURE__ */ jsx(ThreadListSkeleton, {})
+		}), /* @__PURE__ */ jsx(AuiIf, {
+			condition: (s) => !s.threads.isLoading,
+			children: /* @__PURE__ */ jsx(ThreadListItemGroups, { searchQuery })
+		})]
+	});
+};
+const dateGroupLabel = (date, startOfToday, startOfYesterday) => {
+	if (!date || date.getTime() >= startOfToday) return "Today";
+	if (date.getTime() >= startOfYesterday) return "Yesterday";
+	return "Earlier";
+};
+const startOfLocalDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+const useStartOfToday = () => {
+	const [startOfToday, setStartOfToday] = useState(() => startOfLocalDay(/* @__PURE__ */ new Date()));
+	useEffect(() => {
+		let timeout;
+		const scheduleNextDay = () => {
+			const now = /* @__PURE__ */ new Date();
+			setStartOfToday(startOfLocalDay(now));
+			const startOfTomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1).getTime();
+			timeout = window.setTimeout(scheduleNextDay, startOfTomorrow - now.getTime());
+		};
+		scheduleNextDay();
+		return () => window.clearTimeout(timeout);
+	}, []);
+	return startOfToday;
+};
+/**
+* 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, in which case `filteredIndices` keeps the runtime order.
+*/
+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 (!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) => dates[index]?.getTime() ?? Number.MAX_SAFE_INTEGER;
+		const sorted = [...filteredIndices].sort((a, b) => time(b) - time(a));
+		const result = [];
+		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 = ({ searchQuery = "" }) => {
+	const { threadIds, filteredIndices, groups } = useThreadListGroups(searchQuery);
+	if (searchQuery.trim() && filteredIndices.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "aui_thread-list-empty",
+		className: "text-muted-foreground px-2.5 py-4 text-sm",
+		children: "No threads found"
+	});
+	if (!groups) return filteredIndices.map((index) => /* @__PURE__ */ jsx(ThreadListPrimitive.ItemByIndex, {
+		index,
+		components: { ThreadListItem }
+	}, threadIds[index]));
+	return groups.map((group) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		"data-slot": "aui_thread-list-group-label",
+		className: "text-muted-foreground px-2.5 pt-3 pb-1 text-xs font-medium",
+		children: group.label
+	}), group.indices.map((index) => /* @__PURE__ */ jsx(ThreadListPrimitive.ItemByIndex, {
+		index,
+		components: { ThreadListItem }
+	}, threadIds[index]))] }, group.label));
+};
+const ThreadListNew = forwardRef(({ className, labelClassName, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(ThreadListPrimitive.New, {
+		render: /* @__PURE__ */ jsx(Button, {
+			ref,
+			variant: "ghost",
+			"data-slot": "aui_thread-list-new",
+			className: cn("hover:bg-muted data-active:bg-muted h-8 justify-start gap-2 rounded-md px-2.5 text-sm font-normal", className),
+			...props
+		}),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PlusIcon, {
+			"data-slot": "aui_thread-list-new-icon",
+			className: "size-4 shrink-0"
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "aui_thread-list-new-label",
+			className: cn("whitespace-nowrap", labelClassName),
+			children: "New Thread"
+		})] })
+	});
+});
+ThreadListNew.displayName = "ThreadListNew";
+const ThreadListSkeleton = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-0.5",
+		children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx("div", {
+			role: "status",
+			"aria-label": "Loading threads",
+			"data-slot": "aui_thread-list-skeleton-wrapper",
+			className: "flex h-8 items-center px-2.5",
+			children: /* @__PURE__ */ jsx(Skeleton, {
+				"data-slot": "aui_thread-list-skeleton",
+				className: "h-3.5 w-full"
+			})
+		}, i))
+	});
+};
+const ThreadListItem = () => {
+	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 /* @__PURE__ */ jsxs(ThreadListItemPrimitive.Root, {
+		"data-slot": "aui_thread-list-item",
+		className: "group hover:bg-muted focus-visible:bg-muted data-active:bg-muted has-focus-visible:bg-muted has-data-[state=open]:bg-muted relative flex h-8 items-center rounded-md transition-colors focus-visible:outline-none",
+		children: [isRenaming ? /* @__PURE__ */ jsx(ThreadListItemRename, { onDone: (restoreFocus) => {
+			restoreFocusRef.current = restoreFocus;
+			setIsRenaming(false);
+		} }) : /* @__PURE__ */ jsxs(ThreadListItemPrimitive.Trigger, {
+			ref: triggerRef,
+			"data-slot": "aui_thread-list-item-trigger",
+			className: "focus-visible:ring-ring/50 flex h-full min-w-0 flex-1 items-center rounded-md px-2.5 text-start text-sm outline-none group-hover:pe-9 group-has-focus-visible:pe-9 group-has-data-[state=open]:pe-9 group-data-active:pe-9 focus-visible:ring-1",
+			children: [
+				isRunning && /* @__PURE__ */ jsx(Loader2Icon, {
+					"aria-hidden": true,
+					"data-slot": "aui_thread-list-item-running",
+					className: "text-muted-foreground me-1.5 size-3.5 shrink-0 animate-spin"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "aui_thread-list-item-title",
+					className: "min-w-0 flex-1 truncate",
+					children: /* @__PURE__ */ jsx(ThreadListItemPrimitive.Title, { fallback: "New Chat" })
+				}),
+				isRunning && /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Running"
+				})
+			]
+		}), /* @__PURE__ */ jsx(ThreadListItemMore, { onRename: () => setIsRenaming(true) })]
+	});
+};
+const ThreadListItemRename = ({ 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) => {
+		if (settledRef.current) return;
+		settledRef.current = true;
+		const next = value.trim();
+		if (!next || next === title) {
+			onDone(restoreFocus);
+			return;
+		}
+		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 /* @__PURE__ */ jsx(Input, {
+		ref: inputRef,
+		autoFocus: true,
+		"data-slot": "aui_thread-list-item-rename",
+		"aria-label": "Rename thread",
+		value,
+		className: "h-7 min-w-0 flex-1 ps-2.5 pe-9 text-sm",
+		onChange: (event) => setValue(event.target.value),
+		onBlur: () => commit(false),
+		onKeyDown: (event) => {
+			if (event.key === "Enter") {
+				event.preventDefault();
+				commit(true);
+			} else if (event.key === "Escape") {
+				event.preventDefault();
+				cancel();
+			}
+		}
+	});
+};
+const ThreadListItemMore = ({ onRename }) => {
+	return /* @__PURE__ */ jsxs(ThreadListItemMorePrimitive.Root, {
+		sharedFocusGroup: true,
+		children: [/* @__PURE__ */ jsxs(ThreadListItemMorePrimitive.Trigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				"data-slot": "aui_thread-list-item-more",
+				className: "data-[state=open]:bg-accent absolute end-1.5 top-1/2 size-6 -translate-y-1/2 p-0 opacity-0 group-hover:opacity-100 group-has-focus-visible:opacity-100 group-data-active:opacity-100 data-[state=open]:opacity-100"
+			}),
+			children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-3.5" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "More options"
+			})]
+		}), /* @__PURE__ */ jsxs(ThreadListItemMorePrimitive.Content, {
+			side: "right",
+			align: "start",
+			sideOffset: 6,
+			"data-slot": "aui_thread-list-item-more-content",
+			className: "bg-popover text-popover-foreground data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-xl border p-1.5",
+			children: [
+				/* @__PURE__ */ jsxs(ThreadListItemMorePrimitive.Item, {
+					"data-slot": "aui_thread-list-item-more-item",
+					className: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none select-none",
+					onSelect: onRename,
+					children: [/* @__PURE__ */ jsx(PencilIcon, { className: "size-4" }), "Rename"]
+				}),
+				/* @__PURE__ */ jsxs(ThreadListItemPrimitive.Archive, {
+					render: /* @__PURE__ */ jsx(ThreadListItemMorePrimitive.Item, {
+						"data-slot": "aui_thread-list-item-more-item",
+						className: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none select-none"
+					}),
+					children: [/* @__PURE__ */ jsx(ArchiveIcon, { className: "size-4" }), "Archive"]
+				}),
+				/* @__PURE__ */ jsxs(ThreadListItemPrimitive.Delete, {
+					render: /* @__PURE__ */ jsx(ThreadListItemMorePrimitive.Item, {
+						"data-slot": "aui_thread-list-item-more-item",
+						className: "text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none select-none"
+					}),
+					children: [/* @__PURE__ */ jsx(TrashIcon, { className: "size-4" }), "Delete"]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { ThreadList, ThreadListItem, ThreadListItems, ThreadListNew, ThreadListRoot, ThreadListSearch, thread_list_aui_exports, useThreadListGroups };

package/dist/components/assistant-ui/elements/thread-list.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+declare namespace thread_list_d_exports {
+  export { ThreadItem, ThreadList };
+}
+export interface ThreadItem {
+  id: string;
+  title: string;
+  time: string;
+  unread?: boolean;
+}
+export declare function ThreadList({ threads, activeIndex, onActiveIndexChange, onRename, onDelete, className, ...props }: Omit<ComponentProps<"div">, "children" | "threads" | "activeIndex" | "onActiveIndexChange" | "onRename" | "onDelete"> & {
+  threads: readonly ThreadItem[];
+  activeIndex: number;
+  onActiveIndexChange?: (index: number) => void;
+  onRename?: (index: number) => void;
+  onDelete?: (index: number) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { thread_list_d_exports };

package/dist/components/assistant-ui/elements/thread-list.js

@@ -0,0 +1,72 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, mono } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PencilIcon, Trash2Icon } from "lucide-react";
+//#region src/components/assistant-ui/elements/thread-list.tsx
+var thread_list_exports = /* @__PURE__ */ __exportAll({ ThreadList: () => ThreadList });
+function ThreadList({ threads, activeIndex, onActiveIndexChange, onRename, onDelete, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "thread-list",
+		className: cn("flex w-full max-w-[240px] flex-col gap-0.5", threads.length === 0 && "min-h-40 flex-1 justify-center", className),
+		...props,
+		children: [threads.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground px-3 py-10 text-center text-xs",
+			children: "No conversations yet"
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cn(mono, "text-muted-foreground px-3 pb-1.5"),
+			children: "Today"
+		}), threads.map((thread, i) => {
+			const active = i === activeIndex;
+			const hasActions = onRename !== void 0 || onDelete !== void 0;
+			const hasTwoActions = onRename !== void 0 && onDelete !== void 0;
+			const rowClassName = cn("group relative flex w-full items-center rounded-xl text-[13.5px] transition-colors", active ? field : onActiveIndexChange ? "hover:bg-foreground/[0.03]" : void 0);
+			const contentClassName = cn("flex min-w-0 flex-1 items-center justify-between gap-2 rounded-xl px-3 py-2 text-start outline-none transition-colors focus-visible:bg-foreground/[0.05]", hasActions && (onActiveIndexChange ? hasTwoActions ? "group-focus-within:pe-14 group-hover:pe-14" : "group-focus-within:pe-9 group-hover:pe-9" : hasTwoActions ? "pe-14" : "pe-9"));
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate",
+				children: thread.title
+			}), /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "text-muted-foreground flex items-center gap-1.5 tabular-nums", hasActions && onActiveIndexChange && "group-focus-within:hidden group-hover:hidden"),
+				children: [thread.unread && !active && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "size-1.5 rounded-full bg-info dark:bg-info"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "unread"
+				})] }), hasActions && !onActiveIndexChange ? null : thread.time]
+			})] });
+			return /* @__PURE__ */ jsxs("div", {
+				className: rowClassName,
+				children: [onActiveIndexChange ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-current": active || void 0,
+					onClick: () => onActiveIndexChange(i),
+					className: contentClassName,
+					children: content
+				}) : /* @__PURE__ */ jsx("div", {
+					"aria-current": active || void 0,
+					className: contentClassName,
+					children: content
+				}), hasActions && /* @__PURE__ */ jsxs("div", {
+					className: cn("absolute end-2 flex items-center gap-1", onActiveIndexChange && "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"),
+					children: [onRename && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Rename ${thread.title}`,
+						onClick: () => onRename(i),
+						className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "p-1"),
+						children: /* @__PURE__ */ jsx(PencilIcon, { className: "size-3" })
+					}), onDelete && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Delete ${thread.title}`,
+						onClick: () => onDelete(i),
+						className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "p-1"),
+						children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3" })
+					})]
+				})]
+			}, thread.id);
+		})]
+	});
+}
+//#endregion
+export { ThreadList, thread_list_exports };

package/dist/components/assistant-ui/elements/thread-search.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+declare namespace thread_search_d_exports {
+  export { SearchableThread, ThreadSearch };
+}
+export interface SearchableThread {
+  id: string;
+  title: string;
+  group: string;
+  preview: string;
+  pinned?: boolean;
+}
+export declare function ThreadSearch({ threads, query, activeId, onQueryChange, onSelect, className, ...props }: Omit<ComponentProps<"div">, "children" | "threads" | "query" | "activeId" | "onQueryChange" | "onSelect"> & {
+  threads: readonly SearchableThread[];
+  query: string;
+  activeId: string;
+  onQueryChange?: (query: string) => void;
+  onSelect?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { thread_search_d_exports };

package/dist/components/assistant-ui/elements/thread-search.js

@@ -0,0 +1,94 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PinIcon, SearchIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/thread-search.tsx
+var thread_search_exports = /* @__PURE__ */ __exportAll({ ThreadSearch: () => ThreadSearch });
+function ThreadSearch({ threads, query, activeId, onQueryChange, onSelect, className, ...props }) {
+	const matches = threads.filter((thread) => `${thread.title} ${thread.preview}`.toLowerCase().includes(query.toLowerCase()));
+	const pinned = matches.filter((thread) => thread.pinned);
+	const groups = [...new Set(matches.filter((t) => !t.pinned).map((t) => t.group))];
+	const ordered = [...pinned, ...groups.flatMap((group) => matches.filter((thread) => !thread.pinned && thread.group === group))];
+	const move = (delta) => {
+		if (ordered.length === 0) return;
+		const at = ordered.findIndex((thread) => thread.id === activeId);
+		const next = ordered[((at === -1 ? delta > 0 ? -1 : 0 : at) + delta + ordered.length) % ordered.length];
+		if (next && onSelect) onSelect(next.id);
+	};
+	const onKeyDown = (event) => {
+		if (event.nativeEvent.isComposing) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			move(1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			move(-1);
+		}
+	};
+	const row = (thread) => {
+		const className = cn("flex flex-col gap-0.5 rounded-xl px-2 py-1 text-start outline-none transition-colors focus-visible:bg-foreground/[0.05]", thread.id === activeId ? "bg-foreground/[0.05]" : onSelect ? "hover:bg-foreground/[0.03]" : void 0);
+		const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-[13px]",
+				children: thread.title
+			}), thread.pinned && /* @__PURE__ */ jsx(PinIcon, { className: "text-muted-foreground size-2.5 shrink-0" })]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground truncate text-xs",
+			children: thread.preview
+		})] });
+		return onSelect ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => onSelect(thread.id),
+			className,
+			children: content
+		}, thread.id) : /* @__PURE__ */ jsx("div", {
+			className,
+			children: content
+		}, thread.id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "thread-search",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1.5 rounded-2xl p-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn(field, "flex items-center gap-2 rounded-xl px-2.5 py-1.5"),
+				children: [/* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-3.5 shrink-0" }), /* @__PURE__ */ jsx("input", {
+					value: query,
+					onChange: (event) => onQueryChange?.(event.target.value),
+					onKeyDown,
+					placeholder: "Search threads",
+					"aria-label": "Search threads",
+					className: "text-foreground/85 placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-[13px] outline-none"
+				})]
+			}),
+			pinned.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground px-2 pb-1"),
+					children: "Pinned"
+				}), pinned.map(row)]
+			}),
+			groups.map((group) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-muted-foreground px-2 pb-1"),
+					children: group
+				}), matches.filter((thread) => !thread.pinned && thread.group === group).map(row)]
+			}, group)),
+			matches.length === 0 && /* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground px-2 py-4 text-center text-xs",
+				children: [
+					"No thread matches “",
+					query,
+					"”"
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { ThreadSearch, thread_search_exports };

package/dist/components/assistant-ui/elements/thread.aui.d.ts

@@ -0,0 +1,36 @@
+import { ComponentType, FC, PropsWithChildren } from "react";
+import { MessagePrimitive, ToolCallMessagePartComponent } from "@assistant-ui/react";
+declare namespace thread_aui_d_exports {
+  export { Thread, ThreadComponents, ThreadGroupPart, ThreadProps };
+}
+export type ThreadGroupPart = MessagePrimitive.GroupedParts.GroupPart;
+/**
+ * Optional component overrides for the thread. `AssistantMessage` and
+ * `Welcome` replace whole sections; the remaining slots override how the
+ * assistant message renders tool calls and part groups. Tool UIs registered
+ * by name (toolkit `render`, `useAssistantDataUI`) take precedence over
+ * `ToolFallback`. When `TaskGroup` is set, tool calls that carry a nested
+ * conversation and have no registered UI render through it instead of the
+ * tool group; without it they render like any other tool call.
+ */
+export type ThreadComponents = {
+  AssistantMessage?: ComponentType | undefined;
+  Welcome?: ComponentType | undefined;
+  ToolFallback?: ToolCallMessagePartComponent | undefined;
+  ToolGroup?: ComponentType<PropsWithChildren<{
+    group: ThreadGroupPart;
+  }>> | undefined;
+  ReasoningGroup?: ComponentType<PropsWithChildren<{
+    group: ThreadGroupPart;
+  }>> | undefined;
+  TaskGroup?: ComponentType<{
+    group: ThreadGroupPart;
+  }> | undefined;
+};
+export type ThreadProps = {
+  components?: ThreadComponents | undefined;
+  autoFocus?: boolean | undefined;
+};
+export declare const Thread: FC<ThreadProps>;
+//#endregion
+export { thread_aui_d_exports };