@parallelworks/ui 0.28.0 → 0.30.0

package/README.md

@@ -114,6 +114,15 @@ export function Chat() {
 }
 ```
 
+`ChatLayout sidebarMode="auto"` shows the conversation list as a drawer over
+the thread when the chat is narrower than `drawerBelowPx` (768 by default),
+measured on the chat's own box; `"drawer"` always does, and `"inline"` (the
+default) never does. The reader's toggle drives the list unless the host
+passes `sidebar` (`'expanded' | 'collapsed' | 'hidden'`) and `drawerOpen` to
+`ChatProvider`, with `onSidebarChange` and `onDrawerOpenChange` to hear the
+reader's requests. `useChat().toggleSidebar` opens or closes whichever the
+layout shows, for a host header's own button.
+
 Swap the mock for `createOpenAIChatAdapter({ baseUrl, apiKey })` from
 `@parallelworks/ui/ai/openai`, or implement `ChatAdapter` against your own
 backend. It requires `conversations`, `models` and `streamCompletion`; the

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

@@ -1,5 +1,14 @@
-import type { ReactNode } from 'react';
-export default function ChatLayout({ children, sidebarActions, }: {
+import { type ReactNode } from 'react';
+/** Where the conversation list goes: beside the thread, in a drawer over it,
+ *  or whichever fits the width the chat is given. */
+export type SidebarMode = 'inline' | 'drawer' | 'auto';
+export declare const DRAWER_BELOW_PX = 768;
+export default function ChatLayout({ children, sidebarActions, sidebarMode, drawerBelowPx, drawerToggle, }: {
     children: ReactNode;
     sidebarActions?: boolean;
+    sidebarMode?: SidebarMode;
+    /** The chat's width under which 'auto' shows the drawer. */
+    drawerBelowPx?: number;
+    /** False when the host's own header opens the drawer. */
+    drawerToggle?: boolean;
 }): import("react").JSX.Element;

package/dist/ai/components/ChatLayout.js

@@ -1,15 +1,63 @@
+import { useChatConfig } from "../core/config.js";
+import { useReportSidebarPresentation } from "../core/sidebarState.js";
+import { useChat } from "../core/ChatProvider.js";
 import { KeyboardShortcutsProvider } from "../core/KeyboardShortcutsProvider.js";
+import { SidebarToggle } from "../ui/sidebar.js";
 import ChatSidebar from "./ChatSidebar.js";
+import cx from "classnames";
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatLayout.tsx
-function ChatLayout({ children, sidebarActions = true }) {
+var DRAWER_BELOW_PX = 768;
+function useSidebarPresentation(ref, mode, drawerBelowPx) {
+	const [narrow, setNarrow] = useState(false);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (mode !== "auto" || !el) return;
+		const measure = () => setNarrow(el.clientWidth < drawerBelowPx);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [
+		ref,
+		mode,
+		drawerBelowPx
+	]);
+	const presentation = mode === "drawer" || mode === "auto" && narrow ? "drawer" : "inline";
+	const report = useReportSidebarPresentation();
+	useLayoutEffect(() => {
+		report(presentation);
+	}, [report, presentation]);
+	useLayoutEffect(() => () => report("inline"), [report]);
+	return presentation;
+}
+function ChatLayout({ children, sidebarActions = true, sidebarMode = "inline", drawerBelowPx = 768, drawerToggle = true }) {
+	const ref = useRef(null);
+	const drawer = useSidebarPresentation(ref, sidebarMode, drawerBelowPx) === "drawer";
+	const { drawerOpen, toggleSidebar } = useChat();
+	const { strings } = useChatConfig();
 	return /* @__PURE__ */ jsx(KeyboardShortcutsProvider, { children: /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full",
-		children: [/* @__PURE__ */ jsx(ChatSidebar, { actions: sidebarActions }), /* @__PURE__ */ jsx("main", {
+		ref,
+		className: cx("flex h-full", drawer && "relative overflow-hidden"),
+		children: [/* @__PURE__ */ jsx(ChatSidebar, { actions: sidebarActions }), /* @__PURE__ */ jsxs("main", {
+			inert: drawer && drawerOpen,
 			className: "flex-1 flex flex-col min-w-0",
-			children
+			children: [drawer && drawerToggle && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center bg-(--theme-panel-bg) px-2 pt-2",
+				children: /* @__PURE__ */ jsx(SidebarToggle, {
+					collapsed: !drawerOpen,
+					onToggle: toggleSidebar,
+					openLabel: strings.sidebar.openSidebar,
+					closeLabel: strings.sidebar.closeSidebar
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex min-h-0 flex-1 flex-col",
+				children
+			})]
 		})]
 	}) });
 }
 //#endregion
-export { ChatLayout as default };
+export { DRAWER_BELOW_PX, ChatLayout as default };

package/dist/ai/components/ChatSidebar.js

@@ -7,19 +7,20 @@ import { FaUsers } from "../../icons/fa/FaUsers.js";
 import { IoSettingsOutline } from "../../icons/io5/IoSettingsOutline.js";
 import { PiShareBold } from "../../icons/pi/PiShareBold.js";
 import { TbEdit } from "../../icons/tb/TbEdit.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 { SidebarDrawer, SidebarRow, useRowDialogs } from "../ui/sidebar.js";
 import { conversationToMarkdown, downloadText, exportFilename } from "../core/exportConversation.js";
-import { SidebarGroupHeading, SidebarPanel, SidebarRow, SidebarToggle, useRowDialogs } from "../ui/sidebar.js";
+import { ConversationSidebar } from "../ui/ConversationSidebar.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
+var SIDEBAR_WIDTH_STORAGE_KEY = "aiChatSidebarWidth";
 function groupByDate(conversations) {
 	const now = DateTime.now();
 	const groups = {
@@ -40,7 +41,7 @@ function groupByDate(conversations) {
 	}
 	return Object.entries(groups).filter(([, items]) => items.length > 0);
 }
-function ConversationRow({ conv, isCurrent, sharingAvailable, openMenu, onRename, onShare, onDelete, onExport }) {
+function ConversationRow({ conv, isCurrent, sharingAvailable, openMenu, onRename, onShare, onDelete, onExport, onOpen }) {
 	const { LinkComponent, strings } = useChatConfig();
 	const t = strings.sidebar;
 	const menuItems = [
@@ -80,6 +81,7 @@ function ConversationRow({ conv, isCurrent, sharingAvailable, openMenu, onRename
 				id: conv.id
 			},
 			className: "flex min-w-0 flex-1 items-center gap-1.5 py-1 text-left",
+			onClick: onOpen,
 			children: [conv.isOwner === false && /* @__PURE__ */ jsx(FaUsers, {
 				className: "h-3 w-3 shrink-0 theme-muted-text",
 				title: t.sharedWithYou
@@ -90,68 +92,10 @@ function ConversationRow({ conv, isCurrent, sharingAvailable, openMenu, onRename
 		})
 	});
 }
-var SIDEBAR_WIDTH_STORAGE_KEY = "aiChatSidebarWidth";
-var SIDEBAR_MIN_WIDTH_PX = 200;
-var SIDEBAR_MAX_WIDTH_PX = 480;
-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) : 256;
-	} catch {
-		return 256;
-	}
-}
-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(256);
-		storeSidebarWidth(256);
-	};
-	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 { adapter, navigation, notify, activeConversationId, conversations, sidebar, sidebarPresentation, drawerOpen, setSidebar, setDrawerOpen, toggleSidebar, isLoading, loadConversations, deleteConversation, updateConversationTitle, clearCurrentConversation } = useChat();
 	const sharingAvailable = !!adapter.sharing;
 	const attachmentsAvailable = !!adapter.attachments;
 	const [shareDialogOpen, setShareDialogOpen] = useState(false);
@@ -171,23 +115,28 @@ function ChatSidebar({ actions = true }) {
 		onDelete: (conv) => deleteConversation(conv.id),
 		onRename: (conv, title) => updateConversationTitle(conv.id, title)
 	});
-	const { width: sidebarWidth, resizing, startResize, reset: resetSidebarWidth, nudge: nudgeSidebarWidth } = useResizableSidebarWidth();
+	const drawer = sidebarPresentation === "drawer";
+	const sidebarCollapsed = !drawer && sidebar !== "expanded";
+	const closeDrawer = () => setDrawerOpen(false);
 	const [search, setSearch] = useState("");
 	const searchInputRef = useRef(null);
-	const sidebarCollapsedRef = useRef(sidebarCollapsed);
-	sidebarCollapsedRef.current = sidebarCollapsed;
+	const revealRef = useRef(() => {});
+	revealRef.current = () => {
+		if (drawer) setDrawerOpen(true);
+		else if (sidebar !== "expanded") setSidebar("expanded");
+	};
 	useEffect(() => {
 		loadConversations();
 	}, [loadConversations]);
 	useEffect(() => {
 		if (!actions) return;
 		const focusSearch = () => {
-			if (sidebarCollapsedRef.current) toggleSidebar();
+			revealRef.current();
 			requestAnimationFrame(() => searchInputRef.current?.focus());
 		};
 		document.addEventListener(FOCUS_SIDEBAR_SEARCH_EVENT, focusSearch);
 		return () => document.removeEventListener(FOCUS_SIDEBAR_SEARCH_EVENT, focusSearch);
-	}, [actions, toggleSidebar]);
+	}, [actions]);
 	const filteredConversations = useMemo(() => {
 		const query = search.trim().toLowerCase();
 		if (!query) return conversations;
@@ -197,7 +146,11 @@ function ChatSidebar({ actions = true }) {
 		search,
 		tSidebar.untitled
 	]);
-	const groupedConversations = useMemo(() => groupByDate(filteredConversations), [filteredConversations]);
+	const groups = useMemo(() => groupByDate(filteredConversations).map(([key, items]) => ({
+		key,
+		label: tSidebar[key],
+		items
+	})), [filteredConversations, tSidebar]);
 	const handleExport = async (id) => {
 		try {
 			const conversation = await adapter.conversations.get(id);
@@ -211,130 +164,111 @@ function ChatSidebar({ actions = true }) {
 		setShareDialogOpen(true);
 	};
 	const handleNewChat = () => {
+		closeDrawer();
 		clearCurrentConversation();
 		navigation.toNewChat();
 	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsxs(SidebarPanel, {
-			collapsed: sidebarCollapsed,
-			width: sidebarWidth,
-			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,
+	const list = /* @__PURE__ */ jsx(ConversationSidebar, {
+		collapsed: sidebarCollapsed,
+		fill: drawer,
+		onToggle: toggleSidebar,
+		toggleLabels: {
+			open: tSidebar.openSidebar,
+			close: tSidebar.closeSidebar
+		},
+		resize: {
+			storageKey: SIDEBAR_WIDTH_STORAGE_KEY,
+			label: tSidebar.resizeLabel,
+			hint: tSidebar.resizeHint
+		},
+		groups,
+		getKey: (conv) => conv.id,
+		renderRow: (conv) => /* @__PURE__ */ jsx(ConversationRow, {
+			conv,
+			isCurrent: activeConversationId === conv.id,
+			sharingAvailable,
+			openMenu,
+			onRename: requestRename,
+			onShare: handleShareClick,
+			onDelete: requestDelete,
+			onExport: handleExport,
+			onOpen: closeDrawer
+		}),
+		loading: isLoading,
+		placeholder: conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "theme-muted-text text-sm px-2 whitespace-nowrap",
+			children: tSidebar.noConversations
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "theme-muted-text text-sm px-2",
+			children: strings.chrome.noMatches
+		}),
+		cycle: {
+			current: filteredConversations.find((conv) => conv.id === activeConversationId),
+			onSelect: (conv) => navigation.toConversation(conv.id)
+		},
+		top: actions && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-0.5 px-2 pt-2 pb-1",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: handleNewChat,
+				className: "flex items-center h-9 px-2 gap-3 rounded-lg font-medium transition-colors hover:chat-tint",
+				title: tSidebar.newChat,
+				children: [/* @__PURE__ */ jsx(TbEdit, { 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 transition-colors hover:chat-tint",
+				title: tSidebar.attachments,
+				onClick: closeDrawer,
+				children: [/* @__PURE__ */ jsx(FaRegFileImage, { 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
+				})]
+			})]
+		}), !sidebarCollapsed && conversations.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "px-2 pb-2",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx(FaSearch, { 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 === "ArrowLeft") nudgeSidebarWidth(-16);
-						else if (e.key === "ArrowRight") nudgeSidebarWidth(16);
+						if (e.key === "Escape" && search) {
+							e.stopPropagation();
+							setSearch("");
+						}
 					},
-					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-0.5 px-2 pt-2 pb-1",
-					children: [/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: handleNewChat,
-						className: "flex items-center h-9 px-2 gap-3 rounded-lg font-medium transition-colors hover:chat-tint",
-						title: tSidebar.newChat,
-						children: [/* @__PURE__ */ jsx(TbEdit, { 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 transition-colors hover:chat-tint",
-						title: tSidebar.attachments,
-						children: [/* @__PURE__ */ jsx(FaRegFileImage, { 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-2",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "relative",
-						children: [/* @__PURE__ */ jsx(FaSearch, { 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-9 pl-8 pr-2 text-sm rounded-lg border border-transparent chat-tint theme-text placeholder:theme-muted-text transition-colors focus:outline-none focus:border-(--theme-border) focus:bg-(--theme-panel-bg)"
-						})]
-					})
-				}),
-				/* @__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 transition-colors hover:chat-tint hover:theme-text",
-						title: tSidebar.manageProviders,
-						children: [/* @__PURE__ */ jsx(IoSettingsOutline, { 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
-					})]
-				})
-			]
-		}),
+					placeholder: strings.chrome.searchPlaceholder,
+					"aria-label": strings.chrome.searchLabel,
+					className: "w-full h-9 pl-8 pr-2 text-sm rounded-lg border border-transparent chat-tint theme-text placeholder:theme-muted-text transition-colors focus:outline-none focus:border-(--theme-border) focus:bg-(--theme-panel-bg)"
+				})]
+			})
+		})] }),
+		footer: 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 transition-colors hover:chat-tint hover:theme-text",
+			title: tSidebar.manageProviders,
+			children: [/* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: tSidebar.manageProviders
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		drawer ? /* @__PURE__ */ jsx(SidebarDrawer, {
+			open: drawerOpen,
+			onClose: closeDrawer,
+			label: tSidebar.drawerLabel,
+			closeLabel: tSidebar.closeSidebar,
+			children: list
+		}) : sidebar !== "hidden" && list,
 		contextMenu,
 		dialogs,
 		conversationToShare && /* @__PURE__ */ jsx(ShareDialog, {

package/dist/ai/components/ModelSelector.js

@@ -13,6 +13,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/ai/components/ModelSelector.tsx
+var ORG_OWNER = "org";
 /** The search field plus the list's max-h-80, so the flip decision matches
 *  what renders. */
 var MAX_PANEL_HEIGHT_PX = 380;
@@ -181,6 +182,8 @@ function ModelSelector({ targetSession, variant = "default" }) {
 			ref: buttonRef,
 			type: "button",
 			onClick: () => setIsOpen(!isOpen),
+			"aria-haspopup": "dialog",
+			"aria-expanded": isOpen,
 			disabled: models.length === 0 && !targetSessionStatus && unreachableSessions.length === 0,
 			className: cx(boxClass, "transition-all cursor-pointer bg-transparent", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed", bare ? "hover:chat-tint" : "border theme-border hover:theme-hover"),
 			children: [
@@ -299,6 +302,7 @@ function ModelSelector({ targetSession, variant = "default" }) {
 						const platform = providerInfo?.platformLabel;
 						const platformSuffix = providerInfo && platform && platform.toLowerCase() !== providerName.toLowerCase() ? platform : null;
 						const isOwner = providerInfo?.user === currentUser.username;
+						const headerSuffix = [platformSuffix, providerInfo && !isOwner && providerInfo.user !== ORG_OWNER ? strings.modelPicker.sharedBy(providerInfo.user) : null].filter(Boolean).join(" · ");
 						const settingsHref = providerInfo && extraLinks.providerSettings ? extraLinks.providerSettings(providerInfo.user, providerInfo.name) : null;
 						const issue = providerIssueFor(providerIssues, providerModels[0]);
 						return /* @__PURE__ */ jsxs("div", { children: [
@@ -317,7 +321,7 @@ function ModelSelector({ targetSession, variant = "default" }) {
 										}),
 										/* @__PURE__ */ jsx("span", {
 											className: "min-w-0 flex-1 truncate text-xs theme-muted-text",
-											children: platformSuffix ? `· ${platformSuffix}` : ""
+											children: headerSuffix ? `· ${headerSuffix}` : ""
 										}),
 										/* @__PURE__ */ jsxs("span", {
 											className: "text-xs theme-muted-text",

package/dist/ai/core/ChatProvider.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import type { ChatAdapter } from '../adapter/types.js';
 import type { AttachmentMeta, ChatModel, ChatNavigation, ChatNotify, ChatUser, Conversation, ConversationSummary, ChatMessage as Message, MessagePart, ProviderInfo, ProviderIssue, UnreachableSession } from '../types.js';
 import { type ChatUIConfig } from './config.js';
+import { type SidebarPresentation, type SidebarState } from './sidebarState.js';
 interface ChatContextValue {
     adapter: ChatAdapter;
     currentUser: ChatUser;
@@ -28,7 +29,11 @@ interface ChatContextValue {
     streamingReasoning: string;
     streamingParts: MessagePart[];
     thinkingStartTime: number | null;
+    sidebar: SidebarState;
+    /** True unless the sidebar is expanded. */
     sidebarCollapsed: boolean;
+    sidebarPresentation: SidebarPresentation;
+    drawerOpen: boolean;
     queuedMessages: Message[];
     loadConversations: () => Promise<void>;
     loadConversation: (id: string) => Promise<void>;
@@ -44,6 +49,10 @@ interface ChatContextValue {
     stopStreaming: () => void;
     removeQueuedMessage: (id: string) => void;
     flushQueuedMessages: () => void;
+    setSidebar: (sidebar: SidebarState) => void;
+    setDrawerOpen: (open: boolean) => void;
+    /** Opens or closes the drawer while the layout shows one; otherwise moves
+     *  between expanded and the rail. */
     toggleSidebar: () => void;
     updateConversationTitle: (id: string, title: string) => Promise<boolean>;
     navigateToBranch: (messageId: string) => void;
@@ -57,7 +66,15 @@ export interface ChatProviderProps {
     notify: ChatNotify;
     activeConversationId?: string | null;
     config?: ChatUIConfig;
+    /** Owns the sidebar's state. Omit to leave it to the reader, remembered
+     *  per browser. */
+    sidebar?: SidebarState;
+    onSidebarChange?: (sidebar: SidebarState) => void;
+    /** Owns whether the drawer is open while the layout shows the sidebar as
+     *  one. Omit to leave it to the reader; it starts closed. */
+    drawerOpen?: boolean;
+    onDrawerOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export declare function ChatProvider({ adapter, currentUser, navigation, notify, activeConversationId, config, children, }: ChatProviderProps): import("react").JSX.Element;
+export declare function ChatProvider({ adapter, currentUser, navigation, notify, activeConversationId, config, sidebar: sidebarProp, onSidebarChange, drawerOpen: drawerOpenProp, onDrawerOpenChange, children, }: ChatProviderProps): import("react").JSX.Element;
 export {};