@parallelworks/ui 0.29.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

@@ -11,8 +11,8 @@ 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 { SidebarRow, useRowDialogs } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import ShareDialog from "./ShareDialog.js";
 import cx from "classnames";
@@ -41,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 = [
@@ -81,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
@@ -94,7 +95,7 @@ function ConversationRow({ conv, isCurrent, sharingAvailable, openMenu, onRename
 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);
@@ -114,22 +115,28 @@ function ChatSidebar({ actions = true }) {
 		onDelete: (conv) => deleteConversation(conv.id),
 		onRename: (conv, title) => updateConversationTitle(conv.id, title)
 	});
+	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;
@@ -157,100 +164,111 @@ function ChatSidebar({ actions = true }) {
 		setShareDialogOpen(true);
 	};
 	const handleNewChat = () => {
+		closeDrawer();
 		clearCurrentConversation();
 		navigation.toNewChat();
 	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(ConversationSidebar, {
-			collapsed: sidebarCollapsed,
-			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
-			}),
-			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,
-					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
-					})]
+	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
 				})]
-			}), !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)"
-					})]
-				})
-			})] }),
-			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
+			}), 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 === "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)"
 				})]
 			})
-		}),
+		})] }),
+		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 {};

package/dist/ai/core/ChatProvider.js

@@ -2,25 +2,13 @@ import { applyPartDelta, finalizeParts } from "./parts.js";
 import { chatReducer, initialState } from "./chatReducer.js";
 import { ChatConfigProvider, resolveChatConfig } from "./config.js";
 import { providerIssueFor } from "./providerIssues.js";
+import { ReportSidebarPresentationContext, readStoredSidebar, storeSidebar, useControllable } from "./sidebarState.js";
 import { useSSEStream } from "./useSSEStream.js";
-import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/core/ChatProvider.tsx
 var SELECTED_MODEL_STORAGE_KEY = "aiChatSelectedModel";
-var SIDEBAR_COLLAPSED_STORAGE_KEY = "aiChatSidebarCollapsed";
-function readStoredSidebarCollapsed() {
-	try {
-		return globalThis.localStorage?.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === "1";
-	} catch {
-		return false;
-	}
-}
-function storeSidebarCollapsed(collapsed) {
-	try {
-		globalThis.localStorage?.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, collapsed ? "1" : "0");
-	} catch {}
-}
 function readStoredModel() {
 	try {
 		return globalThis.localStorage?.getItem(SELECTED_MODEL_STORAGE_KEY) ?? null;
@@ -73,11 +61,8 @@ function useChat() {
 	if (!context) throw new Error("useChat must be used within a ChatProvider");
 	return context;
 }
-function ChatProvider({ adapter, currentUser, navigation, notify, activeConversationId = null, config, children }) {
-	const [state, dispatch] = useReducer(chatReducer, initialState, (seed) => ({
-		...seed,
-		sidebarCollapsed: readStoredSidebarCollapsed()
-	}));
+function ChatProvider({ adapter, currentUser, navigation, notify, activeConversationId = null, config, sidebar: sidebarProp, onSidebarChange, drawerOpen: drawerOpenProp, onDrawerOpenChange, children }) {
+	const [state, dispatch] = useReducer(chatReducer, initialState);
 	const hasLoadedConversationsRef = useRef(false);
 	const { onStreamingChunk, startStreaming, stopAnimationLoop, resetAnimationRefs, targetStreamContentRef, streamActiveRef, streamingConversationIdRef, backgroundStreamsRef, abortControllerRef } = useSSEStream(dispatch);
 	const currentConversationIdRef = useRef(null);
@@ -700,12 +685,24 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		state.currentConversation?.messages,
 		state.thinkingStartTime
 	]);
-	const sidebarCollapsedRef = useRef(state.sidebarCollapsed);
-	sidebarCollapsedRef.current = state.sidebarCollapsed;
+	const [sidebar, setSidebar, sidebarRef] = useControllable(sidebarProp, readStoredSidebar, onSidebarChange, storeSidebar);
+	const [drawerOpen, setDrawerOpen, drawerOpenRef] = useControllable(drawerOpenProp, () => false, onDrawerOpenChange);
+	const [sidebarPresentation, setSidebarPresentation] = useState("inline");
+	const presentationRef = useRef(sidebarPresentation);
+	presentationRef.current = sidebarPresentation;
+	const reportSidebarPresentation = useCallback((presentation) => {
+		setSidebarPresentation(presentation);
+		if (presentation === "inline") setDrawerOpen(false);
+	}, [setDrawerOpen]);
 	const toggleSidebar = useCallback(() => {
-		storeSidebarCollapsed(!sidebarCollapsedRef.current);
-		dispatch({ type: "TOGGLE_SIDEBAR" });
-	}, []);
+		if (presentationRef.current === "drawer") setDrawerOpen(!drawerOpenRef.current.value);
+		else setSidebar(sidebarRef.current.value === "expanded" ? "collapsed" : "expanded");
+	}, [
+		setDrawerOpen,
+		drawerOpenRef,
+		setSidebar,
+		sidebarRef
+	]);
 	const navigateToBranch = useCallback((messageId) => {
 		if (!state.currentConversation) return;
 		dispatch({
@@ -770,7 +767,10 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		streamingReasoning: state.streamingReasoning,
 		streamingParts: state.streamingParts,
 		thinkingStartTime: state.thinkingStartTime,
-		sidebarCollapsed: state.sidebarCollapsed,
+		sidebar,
+		sidebarCollapsed: sidebar !== "expanded",
+		sidebarPresentation,
+		drawerOpen,
 		queuedMessages: state.queuedMessages,
 		loadConversations,
 		loadConversation,
@@ -786,6 +786,8 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		stopStreaming,
 		removeQueuedMessage,
 		flushQueuedMessages,
+		setSidebar,
+		setDrawerOpen,
 		toggleSidebar,
 		updateConversationTitle,
 		navigateToBranch,
@@ -797,6 +799,9 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		notify,
 		activeConversationId,
 		state,
+		sidebar,
+		sidebarPresentation,
+		drawerOpen,
 		isSelectedModelAvailable,
 		loadConversations,
 		loadConversation,
@@ -812,6 +817,8 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		stopStreaming,
 		removeQueuedMessage,
 		flushQueuedMessages,
+		setSidebar,
+		setDrawerOpen,
 		toggleSidebar,
 		updateConversationTitle,
 		navigateToBranch,
@@ -819,9 +826,12 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 	]);
 	return /* @__PURE__ */ jsx(ChatConfigProvider, {
 		value: resolvedConfig,
-		children: /* @__PURE__ */ jsx(ChatContext.Provider, {
-			value,
-			children
+		children: /* @__PURE__ */ jsx(ReportSidebarPresentationContext.Provider, {
+			value: reportSidebarPresentation,
+			children: /* @__PURE__ */ jsx(ChatContext.Provider, {
+				value,
+				children
+			})
 		})
 	});
 }

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

@@ -20,7 +20,6 @@ export interface ChatState {
     streamingReasoning: string;
     streamingParts: MessagePart[];
     thinkingStartTime: number | null;
-    sidebarCollapsed: boolean;
     queuedMessages: ChatMessage[];
 }
 export type ChatAction = {
@@ -80,8 +79,6 @@ export type ChatAction = {
     messageId: string;
     updates: Partial<ChatMessage>;
     conversationId: string;
-} | {
-    type: 'TOGGLE_SIDEBAR';
 } | {
     type: 'ADD_CONVERSATION';
     conversation: ConversationSummary;

package/dist/ai/core/chatReducer.js

@@ -20,7 +20,6 @@ var initialState = {
 	streamingReasoning: "",
 	streamingParts: [],
 	thinkingStartTime: null,
-	sidebarCollapsed: false,
 	queuedMessages: []
 };
 function chatReducer(state, action) {
@@ -165,10 +164,6 @@ function chatReducer(state, action) {
 					} : msg)
 				}
 			};
-		case "TOGGLE_SIDEBAR": return {
-			...state,
-			sidebarCollapsed: !state.sidebarCollapsed
-		};
 		case "ADD_CONVERSATION":
 			if (state.conversations.some((c) => c.id === action.conversation.id)) return state;
 			return {

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

@@ -0,0 +1,19 @@
+/** The conversation list beside the thread: full width, a rail of icons, or
+ *  not shown at all (the host offers its own way back). */
+export type SidebarState = 'expanded' | 'collapsed' | 'hidden';
+/** How the layout shows the list right now: as a column beside the thread,
+ *  or as a drawer over it. */
+export type SidebarPresentation = 'inline' | 'drawer';
+export declare function readStoredSidebar(): SidebarState;
+export declare function storeSidebar(state: SidebarState): void;
+/** A value the host may own through a prop. Without the prop the provider
+ *  keeps it; either way the change callback hears every change. The ref
+ *  reads the latest value from callbacks that should not re-create. */
+export declare function useControllable<T>(controlled: T | undefined, initial: () => T, onChange: ((value: T) => void) | undefined, remember?: (value: T) => void): readonly [T, (next: T) => void, import("react").RefObject<{
+    value: T;
+    controlled: boolean;
+    onChange: ((value: T) => void) | undefined;
+    remember: ((value: T) => void) | undefined;
+}>];
+export declare const ReportSidebarPresentationContext: import("react").Context<(presentation: SidebarPresentation) => void>;
+export declare function useReportSidebarPresentation(): (presentation: SidebarPresentation) => void;