@parallelworks/ui 0.18.0 → 0.19.1

package/dist/ai/components/ChatMessageList.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import type { ApprovalAnswerValue, ChatMessage as Message } from '../types.js';
+interface ChatMessageListProps {
+    messages: Message[];
+    allMessages: Message[];
+    streamingMessage?: Message | null;
+    queuedMessages?: Message[];
+    onRemoveQueued?: (id: string) => void;
+    editingMessageId?: string | null | undefined;
+    showAuthor?: boolean;
+    currentUsername?: string;
+    onNavigateBranch?: (messageId: string) => void;
+    onEditMessage?: ((messageId: string) => void) | undefined;
+    onSaveEdit?: (messageId: string, content: string) => void;
+    onCancelEdit?: () => void;
+    onRegenerateMessage?: ((messageId: string) => void) | undefined;
+    onRetryMessage?: ((messageId: string) => void) | undefined;
+    onOpenReasoning?: (reasoning: string, duration: number | null) => void;
+    onApprovalAnswer?: (id: string, answer: ApprovalAnswerValue) => void;
+    inputElement?: ReactNode;
+    /** Whether a turn is in flight, when the host tracks that itself rather
+     *  than streaming through the provider. */
+    isStreaming?: boolean;
+    /** Rows without their own side padding, for a host that pads the column. */
+    flush?: boolean;
+    /** Names the list as a live log for assistive technology. */
+    label?: string;
+    /** Rendered after the last message, inside the scrolling column. */
+    footer?: ReactNode;
+    /** Off for a host that shows the turn's activity elsewhere, so the wait
+     *  for the first frame is not announced twice. */
+    workingIndicator?: boolean;
+}
+export default function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator, }: ChatMessageListProps): import("react").JSX.Element;
+export {};

package/dist/ai/components/ChatMessageList.js

@@ -0,0 +1,301 @@
+import { ChevronRightIcon, XIcon } from "../../icons.js";
+import { durationToAbsHumanDuration } from "../../duration.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import Markdown from "../ui/Markdown.js";
+import AgentMessageParts from "./agent/AgentMessageParts.js";
+import ChatMessage_default from "./ChatMessage.js";
+import cx from "classnames";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Duration } from "luxon";
+//#region src/ai/components/ChatMessageList.tsx
+function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
+	const { adapter, isStreaming: providerStreaming, isThinking, streamingReasoning, streamingParts, thinkingStartTime } = useChat();
+	const isStreaming = isStreamingProp ?? providerStreaming;
+	const { strings } = useChatConfig();
+	const tThinking = strings.thinking;
+	const attachmentDownloadUrl = useMemo(() => {
+		const attachments = adapter.attachments;
+		return attachments ? (id) => attachments.downloadUrl(id) : void 0;
+	}, [adapter]);
+	const onOpenAttachment = useMemo(() => {
+		const open = adapter.attachments?.onOpen;
+		return open ? open.bind(adapter.attachments) : void 0;
+	}, [adapter]);
+	const bottomRef = useRef(null);
+	const containerRef = useRef(null);
+	const reasoningScrollRef = useRef(null);
+	const knownMessageIdsRef = useRef(/* @__PURE__ */ new Set());
+	const prevMessageCountRef = useRef(messages.length);
+	useEffect(() => {
+		const prev = prevMessageCountRef.current;
+		if (messages.length > 0 && (prev === 0 || messages.length < prev)) knownMessageIdsRef.current = new Set(messages.map((m) => m.id));
+		prevMessageCountRef.current = messages.length;
+	}, [messages]);
+	const messageCount = messages.length;
+	const streamingContent = streamingMessage?.content;
+	const streamingMessageParts = streamingMessage?.parts;
+	const [elapsedTime, setElapsedTime] = useState(0);
+	const [finalThinkingDuration, setFinalThinkingDuration] = useState(null);
+	const wasThinkingRef = useRef(false);
+	useEffect(() => {
+		if (isThinking && !wasThinkingRef.current) {
+			wasThinkingRef.current = true;
+			setFinalThinkingDuration(null);
+		} else if (!isThinking && wasThinkingRef.current && thinkingStartTime) {
+			wasThinkingRef.current = false;
+			setFinalThinkingDuration(Date.now() - thinkingStartTime);
+		}
+	}, [isThinking, thinkingStartTime]);
+	useEffect(() => {
+		if (!isStreaming) {
+			wasThinkingRef.current = false;
+			setFinalThinkingDuration(null);
+		}
+	}, [isStreaming]);
+	useEffect(() => {
+		if (!thinkingStartTime || !isThinking) {
+			setElapsedTime(0);
+			return;
+		}
+		const interval = setInterval(() => {
+			setElapsedTime(Math.floor((Date.now() - thinkingStartTime) / 1e3));
+		}, 1e3);
+		return () => clearInterval(interval);
+	}, [thinkingStartTime, isThinking]);
+	useEffect(() => {
+		if (reasoningScrollRef.current && isThinking) reasoningScrollRef.current.scrollTop = reasoningScrollRef.current.scrollHeight;
+	}, [streamingReasoning, isThinking]);
+	const isNearBottomRef = useRef(true);
+	const lastScrollTopRef = useRef(0);
+	const [pinned, setPinned] = useState(true);
+	const handleScroll = useCallback(() => {
+		if (!containerRef.current) return;
+		const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+		const scrolledDown = scrollTop >= lastScrollTopRef.current;
+		lastScrollTopRef.current = scrollTop;
+		if (scrollHeight - scrollTop - clientHeight < 24) {
+			if (scrolledDown) isNearBottomRef.current = true;
+		} else isNearBottomRef.current = false;
+		setPinned(isNearBottomRef.current);
+	}, []);
+	const jumpToLatest = useCallback(() => {
+		const el = containerRef.current;
+		if (el) {
+			el.scrollTop = el.scrollHeight;
+			lastScrollTopRef.current = el.scrollTop;
+			isNearBottomRef.current = true;
+			setPinned(true);
+		}
+	}, []);
+	const hasContent = messages.length > 0 || !!streamingMessage;
+	const awaitingApproval = streamingParts.some((part) => part.kind === "approval" && !part.resolved);
+	const showWorkingIndicator = workingIndicator && isStreaming && !streamingReasoning && !streamingMessage && !awaitingApproval;
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const releaseOnWheelUp = (e) => {
+			if (e.deltaY < 0) {
+				isNearBottomRef.current = false;
+				setPinned(false);
+			}
+		};
+		const releaseOnTouch = () => {
+			isNearBottomRef.current = false;
+			setPinned(false);
+		};
+		container.addEventListener("scroll", handleScroll);
+		container.addEventListener("wheel", releaseOnWheelUp, { passive: true });
+		container.addEventListener("touchmove", releaseOnTouch, { passive: true });
+		return () => {
+			container.removeEventListener("scroll", handleScroll);
+			container.removeEventListener("wheel", releaseOnWheelUp);
+			container.removeEventListener("touchmove", releaseOnTouch);
+		};
+	}, [handleScroll, hasContent]);
+	const hadMessagesRef = useRef(false);
+	useLayoutEffect(() => {
+		if (!containerRef.current || messageCount === 0) return;
+		if (!hadMessagesRef.current) {
+			hadMessagesRef.current = true;
+			containerRef.current.scrollTop = containerRef.current.scrollHeight;
+		}
+	}, [messageCount]);
+	useEffect(() => {
+		if (messageCount === 0) hadMessagesRef.current = false;
+	}, [messageCount]);
+	const hasQueuedMessages = queuedMessages && queuedMessages.length > 0;
+	useLayoutEffect(() => {
+		if (!containerRef.current || !isNearBottomRef.current || !isStreaming || hasQueuedMessages) return;
+		containerRef.current.scrollTop = containerRef.current.scrollHeight;
+	}, [
+		streamingContent,
+		streamingParts,
+		streamingMessageParts,
+		messageCount,
+		isStreaming,
+		hasQueuedMessages
+	]);
+	useEffect(() => {
+		if (!containerRef.current || !isNearBottomRef.current || isStreaming || !hadMessagesRef.current) return;
+		bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [messageCount, isStreaming]);
+	if (messages.length === 0 && !streamingMessage && !hasQueuedMessages) return /* @__PURE__ */ jsxs("div", {
+		className: "flex-1 overflow-y-auto flex flex-col bg-(--theme-panel-bg)",
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: cx("w-full max-w-[50rem] mx-auto", !flush && "px-4"),
+				children: footer
+			}),
+			inputElement && /* @__PURE__ */ jsx("div", {
+				className: "sticky bottom-0 z-10",
+				children: inputElement
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		...label ? {
+			role: "log",
+			"aria-relevant": "additions",
+			"aria-label": label
+		} : {},
+		className: "flex-1 overflow-y-auto theme-scrollbar flex flex-col bg-(--theme-panel-bg)",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "w-full max-w-[50rem] mx-auto pt-10 pb-6 flex-1 px-4",
+				children: [
+					messages.map((message) => {
+						if (message.pseudo) return null;
+						const isNew = !knownMessageIdsRef.current.has(message.id);
+						if (isNew) knownMessageIdsRef.current.add(message.id);
+						return /* @__PURE__ */ jsx("div", {
+							className: isNew ? "animate-chat-enter" : "",
+							children: /* @__PURE__ */ jsx(ChatMessage_default, {
+								message,
+								allMessages,
+								flush,
+								isEditing: editingMessageId === message.id,
+								showAuthor,
+								currentUsername,
+								attachmentDownloadUrl,
+								onOpenAttachment,
+								onNavigateBranch,
+								onEdit: onEditMessage,
+								onSaveEdit,
+								onCancelEdit,
+								onRegenerate: onRegenerateMessage,
+								onRetry: onRetryMessage,
+								onOpenReasoning,
+								onApprovalAnswer
+							})
+						}, message.id);
+					}),
+					isStreaming && streamingReasoning && /* @__PURE__ */ jsx("div", {
+						className: "animate-chat-enter",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "py-3 px-4",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2",
+								children: [/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => onOpenReasoning?.(streamingReasoning, finalThinkingDuration),
+									className: "flex items-center gap-x-2 text-left",
+									children: isThinking ? /* @__PURE__ */ jsx("div", {
+										className: "animate-shimmer text-shimmer flex items-center gap-x-2",
+										children: /* @__PURE__ */ jsx("span", { children: elapsedTime > 0 ? `${tThinking.label} (${elapsedTime}s)` : tThinking.ellipsis })
+									}) : /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-x-1 text-sm theme-muted-text hover:theme-text transition-colors",
+										children: [/* @__PURE__ */ jsx("span", { children: tThinking.thoughtFor(finalThinkingDuration ? durationToAbsHumanDuration(Duration.fromMillis(finalThinkingDuration)) : `${elapsedTime}s`) }), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })]
+									})
+								}), isThinking && /* @__PURE__ */ jsxs("div", {
+									className: "relative ml-6 pl-3 border-l-2 theme-border",
+									children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-3 bg-gradient-to-b from-(--theme-app-bg) to-transparent pointer-events-none z-[1]" }), /* @__PURE__ */ jsx("div", {
+										ref: reasoningScrollRef,
+										className: "text-sm theme-muted-text max-h-20 overflow-y-hidden pt-1",
+										children: /* @__PURE__ */ jsx(Markdown, {
+											isStreaming: true,
+											children: streamingReasoning
+										})
+									})]
+								})]
+							})
+						})
+					}, "thinking"),
+					isStreaming && streamingParts.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "animate-chat-enter py-1 px-4",
+						children: /* @__PURE__ */ jsx(AgentMessageParts, {
+							message: {
+								id: "streaming-parts",
+								role: "assistant",
+								parts: streamingParts
+							},
+							isStreaming
+						})
+					}, "streaming-parts"),
+					showWorkingIndicator && /* @__PURE__ */ jsx("div", {
+						className: "animate-chat-enter",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "py-3 px-4",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "animate-shimmer text-shimmer",
+								children: tThinking.ellipsis
+							})
+						})
+					}, "waiting"),
+					streamingMessage && /* @__PURE__ */ jsx("div", {
+						className: "animate-chat-enter",
+						children: /* @__PURE__ */ jsx(ChatMessage_default, {
+							message: streamingMessage,
+							allMessages,
+							flush,
+							isStreaming,
+							attachmentDownloadUrl,
+							onOpenAttachment,
+							onApprovalAnswer
+						})
+					}, "streaming"),
+					queuedMessages?.map((msg) => /* @__PURE__ */ jsxs("div", {
+						className: "group/queued relative animate-chat-enter opacity-60",
+						children: [/* @__PURE__ */ jsx(ChatMessage_default, {
+							message: msg,
+							allMessages,
+							flush,
+							attachmentDownloadUrl,
+							onOpenAttachment
+						}), onRemoveQueued && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": strings.queue.remove,
+							title: strings.queue.remove,
+							onClick: () => onRemoveQueued(msg.id),
+							className: "absolute top-1 right-1 rounded p-1 opacity-0 transition-opacity group-hover/queued:opacity-100 focus-visible:opacity-100 hover:bg-(--theme-hover) text-(--theme-muted-text-color)",
+							children: /* @__PURE__ */ jsx(XIcon, { className: "h-3.5 w-3.5" })
+						})]
+					}, msg.id)),
+					footer,
+					/* @__PURE__ */ jsx("div", {
+						ref: bottomRef,
+						className: "h-8"
+					})
+				]
+			}),
+			!pinned && /* @__PURE__ */ jsx("div", {
+				className: "sticky bottom-4 z-10 flex h-0 items-start justify-center overflow-visible",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: jumpToLatest,
+					className: "-translate-y-full rounded-full border theme-border bg-(--theme-panel-bg) px-3 py-1 text-xs shadow-sm hover:theme-hover",
+					children: strings.chrome.jumpToLatest
+				})
+			}),
+			inputElement && /* @__PURE__ */ jsx("div", {
+				className: "sticky bottom-0 z-10",
+				children: inputElement
+			})
+		]
+	});
+}
+//#endregion
+export { ChatMessageList as default };

package/dist/ai/components/ChatSidebar.d.ts

@@ -0,0 +1,5 @@
+export type ConversationGroupKey = 'groupToday' | 'groupYesterday' | 'groupThisWeek' | 'groupThisMonth' | 'groupOlder';
+export default function ChatSidebar({ actions, }: {
+    /** False when the host's page header carries new chat, attachments and search. */
+    actions?: boolean;
+}): import("react").JSX.Element;

package/dist/ai/components/ChatSidebar.js

@@ -0,0 +1,345 @@
+import { DownloadIcon, EditIcon, ImageIcon, NewChatIcon, SearchIcon, SettingsIcon, ShareIcon, SharingIcon, TrashIcon } from "../../icons.js";
+import { positionKeys } from "../../components/keys.js";
+import { useRowMenu } from "../../list/RowContextMenu.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import { FOCUS_SIDEBAR_SEARCH_EVENT } from "../core/events.js";
+import { conversationToMarkdown, downloadText, exportFilename } from "../core/exportConversation.js";
+import { SidebarGroupHeading, SidebarPanel, SidebarRow, SidebarToggle, useRowDialogs } from "../ui/sidebar.js";
+import ShareDialog from "./ShareDialog.js";
+import cx from "classnames";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+//#region src/ai/components/ChatSidebar.tsx
+function groupByDate(conversations) {
+	const now = DateTime.now();
+	const groups = {
+		groupToday: [],
+		groupYesterday: [],
+		groupThisWeek: [],
+		groupThisMonth: [],
+		groupOlder: []
+	};
+	for (const conv of conversations) {
+		const dt = DateTime.fromISO(conv.createdAt);
+		const diff = now.diff(dt, "days").days;
+		if (diff < 1) groups.groupToday.push(conv);
+		else if (diff < 2) groups.groupYesterday.push(conv);
+		else if (diff < 7) groups.groupThisWeek.push(conv);
+		else if (diff < 30) groups.groupThisMonth.push(conv);
+		else groups.groupOlder.push(conv);
+	}
+	return Object.entries(groups).filter(([, items]) => items.length > 0);
+}
+function ConversationRow({ conv, isCurrent, sharingAvailable, openMenu, onRename, onShare, onDelete, onExport }) {
+	const { LinkComponent, strings } = useChatConfig();
+	const t = strings.sidebar;
+	const menuItems = [
+		{
+			kind: "action",
+			label: t.rename,
+			icon: /* @__PURE__ */ jsx(EditIcon, {}),
+			onSelect: () => onRename(conv)
+		},
+		...sharingAvailable ? [{
+			kind: "action",
+			label: t.share,
+			icon: /* @__PURE__ */ jsx(ShareIcon, {}),
+			onSelect: () => onShare(conv.id)
+		}] : [],
+		{
+			kind: "action",
+			label: strings.chrome.download,
+			icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
+			onSelect: () => onExport(conv.id)
+		},
+		{
+			kind: "action",
+			label: t.delete,
+			icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+			destructive: true,
+			onSelect: () => onDelete(conv)
+		}
+	];
+	return /* @__PURE__ */ jsx(SidebarRow, {
+		selected: isCurrent,
+		menuItems,
+		openMenu,
+		children: /* @__PURE__ */ jsxs(LinkComponent, {
+			target: {
+				kind: "conversation",
+				id: conv.id
+			},
+			className: "flex min-w-0 flex-1 items-center gap-1.5 py-1 text-left",
+			children: [conv.isOwner === false && /* @__PURE__ */ jsx(SharingIcon, {
+				className: "h-3 w-3 shrink-0 theme-muted-text",
+				title: t.sharedWithYou
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-sm theme-text",
+				children: conv.title || t.untitled
+			})]
+		})
+	});
+}
+var SIDEBAR_WIDTH_STORAGE_KEY = "aiChatSidebarWidth";
+var SIDEBAR_MIN_WIDTH_PX = 200;
+var SIDEBAR_MAX_WIDTH_PX = 480;
+var SIDEBAR_DEFAULT_WIDTH_PX = 256;
+function clampSidebarWidth(width) {
+	return Math.min(SIDEBAR_MAX_WIDTH_PX, Math.max(SIDEBAR_MIN_WIDTH_PX, width));
+}
+function readStoredSidebarWidth() {
+	try {
+		const stored = Number(window.localStorage.getItem(SIDEBAR_WIDTH_STORAGE_KEY));
+		return Number.isFinite(stored) && stored > 0 ? clampSidebarWidth(stored) : SIDEBAR_DEFAULT_WIDTH_PX;
+	} catch {
+		return SIDEBAR_DEFAULT_WIDTH_PX;
+	}
+}
+function storeSidebarWidth(width) {
+	try {
+		window.localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, String(width));
+	} catch {}
+}
+function useResizableSidebarWidth() {
+	const [width, setWidth] = useState(readStoredSidebarWidth);
+	const [resizing, setResizing] = useState(false);
+	const widthRef = useRef(width);
+	widthRef.current = width;
+	const startResize = (e) => {
+		e.preventDefault();
+		const startX = e.clientX;
+		const startWidth = widthRef.current;
+		setResizing(true);
+		const onMove = (ev) => {
+			setWidth(clampSidebarWidth(startWidth + ev.clientX - startX));
+		};
+		const onUp = () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+			setResizing(false);
+			storeSidebarWidth(widthRef.current);
+		};
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	};
+	const reset = () => {
+		setWidth(SIDEBAR_DEFAULT_WIDTH_PX);
+		storeSidebarWidth(SIDEBAR_DEFAULT_WIDTH_PX);
+	};
+	const nudge = (delta) => {
+		const next = clampSidebarWidth(widthRef.current + delta);
+		setWidth(next);
+		storeSidebarWidth(next);
+	};
+	return {
+		width,
+		resizing,
+		startResize,
+		reset,
+		nudge
+	};
+}
+function ChatSidebar({ actions = true }) {
+	const { extraLinks, LinkComponent, strings } = useChatConfig();
+	const tSidebar = strings.sidebar;
+	const { adapter, navigation, notify, activeConversationId, conversations, sidebarCollapsed, toggleSidebar, isLoading, loadConversations, deleteConversation, updateConversationTitle, clearCurrentConversation } = useChat();
+	const sharingAvailable = !!adapter.sharing;
+	const attachmentsAvailable = !!adapter.attachments;
+	const [shareDialogOpen, setShareDialogOpen] = useState(false);
+	const [conversationToShare, setConversationToShare] = useState(null);
+	const { openMenu, contextMenu } = useRowMenu();
+	const { requestDelete, requestRename, dialogs } = useRowDialogs({
+		strings: {
+			deleteTitle: tSidebar.deleteTitle,
+			deleteBody: () => tSidebar.deleteBody,
+			deleteAction: tSidebar.deleteAction,
+			renameTitle: tSidebar.renameTitle,
+			renameLabel: tSidebar.renameLabel,
+			renamePlaceholder: tSidebar.renamePlaceholder,
+			renameAction: tSidebar.renameAction
+		},
+		nameOf: (conv) => conv.title || tSidebar.untitled,
+		onDelete: (conv) => deleteConversation(conv.id),
+		onRename: (conv, title) => updateConversationTitle(conv.id, title)
+	});
+	const { width: sidebarWidth, resizing, startResize, reset: resetSidebarWidth, nudge: nudgeSidebarWidth } = useResizableSidebarWidth();
+	const [search, setSearch] = useState("");
+	const searchInputRef = useRef(null);
+	const sidebarCollapsedRef = useRef(sidebarCollapsed);
+	sidebarCollapsedRef.current = sidebarCollapsed;
+	useEffect(() => {
+		loadConversations();
+	}, [loadConversations]);
+	useEffect(() => {
+		if (!actions) return;
+		const focusSearch = () => {
+			if (sidebarCollapsedRef.current) toggleSidebar();
+			requestAnimationFrame(() => searchInputRef.current?.focus());
+		};
+		document.addEventListener(FOCUS_SIDEBAR_SEARCH_EVENT, focusSearch);
+		return () => document.removeEventListener(FOCUS_SIDEBAR_SEARCH_EVENT, focusSearch);
+	}, [actions, toggleSidebar]);
+	const filteredConversations = useMemo(() => {
+		const query = search.trim().toLowerCase();
+		if (!query) return conversations;
+		return conversations.filter((conv) => (conv.title || tSidebar.untitled).toLowerCase().includes(query));
+	}, [
+		conversations,
+		search,
+		tSidebar.untitled
+	]);
+	const groupedConversations = useMemo(() => groupByDate(filteredConversations), [filteredConversations]);
+	const handleExport = async (id) => {
+		try {
+			const conversation = await adapter.conversations.get(id);
+			downloadText(exportFilename(conversation.title), conversationToMarkdown(conversation));
+		} catch {
+			notify.error(strings.chrome.exportError);
+		}
+	};
+	const handleShareClick = (id) => {
+		setConversationToShare(id);
+		setShareDialogOpen(true);
+	};
+	const handleNewChat = () => {
+		clearCurrentConversation();
+		navigation.toNewChat();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(SidebarPanel, {
+			collapsed: sidebarCollapsed,
+			width: sidebarWidth,
+			railWidth: 48,
+			resizing,
+			children: [
+				!sidebarCollapsed && /* @__PURE__ */ jsx("div", {
+					role: "separator",
+					tabIndex: 0,
+					"aria-orientation": "vertical",
+					"aria-label": "Resize conversation list",
+					"aria-valuemin": SIDEBAR_MIN_WIDTH_PX,
+					"aria-valuemax": SIDEBAR_MAX_WIDTH_PX,
+					"aria-valuenow": sidebarWidth,
+					title: "Drag to resize; double-click to reset",
+					onPointerDown: startResize,
+					onDoubleClick: resetSidebarWidth,
+					onKeyDown: (e) => {
+						if (e.key === "ArrowLeft") nudgeSidebarWidth(-16);
+						else if (e.key === "ArrowRight") nudgeSidebarWidth(16);
+					},
+					className: cx("absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none", resizing ? "bg-(--theme-element)" : "hover:bg-(--theme-border)")
+				}),
+				actions && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1 p-1.5",
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: handleNewChat,
+						className: cx("flex items-center h-9 px-2 gap-3 rounded-lg hover:theme-muted-panel", "transition-colors", !sidebarCollapsed && "border theme-border"),
+						title: tSidebar.newChat,
+						children: [/* @__PURE__ */ jsx(NewChatIcon, { className: cx("flex-shrink-0", "w-4 h-4") }), /* @__PURE__ */ jsx("span", {
+							className: cx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
+							children: tSidebar.newChat
+						})]
+					}), attachmentsAvailable && /* @__PURE__ */ jsxs(LinkComponent, {
+						target: { kind: "attachments" },
+						className: "flex items-center h-9 px-2 gap-3 rounded-lg hover:theme-muted-panel",
+						title: tSidebar.attachments,
+						children: [/* @__PURE__ */ jsx(ImageIcon, { className: "flex-shrink-0 w-4 h-4" }), /* @__PURE__ */ jsx("span", {
+							className: cx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
+							children: tSidebar.attachments
+						})]
+					})]
+				}),
+				actions && !sidebarCollapsed && conversations.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "px-2 pb-1",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx(SearchIcon, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 theme-muted-text pointer-events-none" }), /* @__PURE__ */ jsx("input", {
+							ref: searchInputRef,
+							type: "text",
+							value: search,
+							onChange: (e) => setSearch(e.target.value),
+							onKeyDown: (e) => {
+								if (e.key === "Escape" && search) {
+									e.stopPropagation();
+									setSearch("");
+								}
+							},
+							placeholder: strings.chrome.searchPlaceholder,
+							"aria-label": strings.chrome.searchLabel,
+							className: "w-full h-8 pl-8 pr-2 text-sm rounded-lg border theme-border bg-(--theme-input-bg) placeholder:theme-muted-text focus:outline-none focus:border-(--theme-element)"
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cx("min-h-0 flex-1 overflow-y-auto px-2 pb-2 transition-opacity duration-200", sidebarCollapsed ? "opacity-0 pointer-events-none" : "opacity-100"),
+					children: isLoading ? /* @__PURE__ */ jsx("div", {
+						className: "space-y-3 px-2 pt-2",
+						children: positionKeys(5, "skeleton").map((key, i) => /* @__PURE__ */ jsx("div", {
+							className: "animate-pulse",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-4 rounded theme-muted-panel",
+								style: { width: `${70 - i * 10}%` }
+							})
+						}, key))
+					}) : conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "theme-muted-text text-sm px-2 whitespace-nowrap",
+						children: tSidebar.noConversations
+					}) : filteredConversations.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "theme-muted-text text-sm px-2",
+						children: strings.chrome.noMatches
+					}) : groupedConversations.map(([label, convs]) => /* @__PURE__ */ jsxs("div", {
+						className: "mb-2",
+						children: [/* @__PURE__ */ jsx(SidebarGroupHeading, { children: tSidebar[label] }), /* @__PURE__ */ jsx("ul", {
+							className: "space-y-0.5",
+							children: convs.map((conv) => /* @__PURE__ */ jsx(ConversationRow, {
+								conv,
+								isCurrent: activeConversationId === conv.id,
+								sharingAvailable,
+								openMenu,
+								onRename: requestRename,
+								onShare: handleShareClick,
+								onDelete: requestDelete,
+								onExport: handleExport
+							}, conv.id))
+						})]
+					}, label))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cx("flex shrink-0 items-center gap-1 p-1.5", sidebarCollapsed ? "justify-center" : extraLinks.manageProviders ? "justify-between" : "justify-end"),
+					children: [!sidebarCollapsed && extraLinks.manageProviders && /* @__PURE__ */ jsxs(LinkComponent, {
+						target: {
+							kind: "external",
+							href: extraLinks.manageProviders
+						},
+						className: "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-xs theme-muted-text hover:theme-hover",
+						title: tSidebar.manageProviders,
+						children: [/* @__PURE__ */ jsx(SettingsIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: tSidebar.manageProviders
+						})]
+					}), /* @__PURE__ */ jsx(SidebarToggle, {
+						collapsed: sidebarCollapsed,
+						onToggle: toggleSidebar,
+						openLabel: tSidebar.openSidebar,
+						closeLabel: tSidebar.closeSidebar
+					})]
+				})
+			]
+		}),
+		contextMenu,
+		dialogs,
+		conversationToShare && /* @__PURE__ */ jsx(ShareDialog, {
+			conversationId: conversationToShare,
+			isOpen: shareDialogOpen,
+			onClose: () => {
+				setShareDialogOpen(false);
+				setConversationToShare(null);
+			}
+		})
+	] });
+}
+//#endregion
+export { ChatSidebar as default };