@parallelworks/ui 0.33.0 → 0.34.0

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

@@ -2,12 +2,31 @@ 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;
+/** The list at its default width beside the narrowest thread that still
+ *  reads comfortably; narrower than that, 'auto' moves the list to a drawer. */
+export declare const DRAWER_BELOW_PX: number;
 /** Put on the element the thread and composer sit in: their shared column
  *  grows with it, from 50rem to 64rem, instead of staying 50rem on a wide
  *  screen. */
 export declare const CHAT_COLUMN_SCOPE = "@container [--chat-column:clamp(50rem,60cqi,64rem)]";
-export default function ChatLayout({ children, sidebarActions, sidebarTop, sidebarMode, drawerBelowPx, drawerToggle, }: {
+/** A conversation list beside a thread, or in a drawer over it when the
+ *  space is narrow. The list reads where it goes from `useChat`
+ *  (`sidebarPresentation`, `drawerOpen`); `ChatLayout` is this with the chat
+ *  list, and a host with its own list uses it directly. Must be mounted
+ *  inside a ChatProvider. */
+export declare function ConversationLayout({ sidebar, children, sidebarMode, drawerBelowPx, drawerToggle, drawerBar, }: {
+    sidebar: ReactNode;
+    children: ReactNode;
+    sidebarMode?: SidebarMode;
+    /** The width under which 'auto' shows the drawer. */
+    drawerBelowPx?: number;
+    /** False when the host's own header opens the drawer. */
+    drawerToggle?: boolean;
+    /** Beside the drawer's toggle, while the list is a drawer: what the top of
+     *  the list would otherwise keep in view. */
+    drawerBar?: ReactNode;
+}): import("react").JSX.Element;
+export default function ChatLayout({ children, sidebarActions, sidebarTop, sidebarMode, drawerBelowPx, drawerToggle, drawerBar, }: {
     children: ReactNode;
     sidebarActions?: boolean;
     /** Above the conversation list, given whether it is collapsed to the rail. */
@@ -19,4 +38,6 @@ export default function ChatLayout({ children, sidebarActions, sidebarTop, sideb
     drawerBelowPx?: number;
     /** False when the host's own header opens the drawer. */
     drawerToggle?: boolean;
+    /** Beside the drawer's toggle, while the list is a drawer. */
+    drawerBar?: ReactNode;
 }): import("react").JSX.Element;

package/dist/ai/components/ChatLayout.js

@@ -8,7 +8,9 @@ import cx from "classnames";
 import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatLayout.tsx
-var DRAWER_BELOW_PX = 768;
+/** The list at its default width beside the narrowest thread that still
+*  reads comfortably; narrower than that, 'auto' moves the list to a drawer. */
+var DRAWER_BELOW_PX = 896;
 /** Put on the element the thread and composer sit in: their shared column
 *  grows with it, from 50rem to 64rem, instead of staying 50rem on a wide
 *  screen. */
@@ -37,34 +39,49 @@ function useSidebarPresentation(ref, mode, drawerBelowPx) {
 	useLayoutEffect(() => () => report("inline"), [report]);
 	return presentation;
 }
-function ChatLayout({ children, sidebarActions = true, sidebarTop, sidebarMode = "inline", drawerBelowPx = 768, drawerToggle = true }) {
+/** A conversation list beside a thread, or in a drawer over it when the
+*  space is narrow. The list reads where it goes from `useChat`
+*  (`sidebarPresentation`, `drawerOpen`); `ChatLayout` is this with the chat
+*  list, and a host with its own list uses it directly. Must be mounted
+*  inside a ChatProvider. */
+function ConversationLayout({ sidebar, children, sidebarMode = "inline", drawerBelowPx = DRAWER_BELOW_PX, drawerToggle = true, drawerBar }) {
 	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", {
+	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("flex h-full", drawer && "relative overflow-hidden"),
-		children: [/* @__PURE__ */ jsx(ChatSidebar, {
-			actions: sidebarActions,
-			top: sidebarTop
-		}), /* @__PURE__ */ jsxs("main", {
+		children: [sidebar, /* @__PURE__ */ jsxs("main", {
 			inert: drawer && drawerOpen,
 			className: cx("flex min-w-0 flex-1 flex-col", CHAT_COLUMN_SCOPE),
-			children: [drawer && drawerToggle && /* @__PURE__ */ jsx("div", {
-				className: "flex shrink-0 items-center bg-(--theme-panel-bg) px-2 pt-2",
-				children: /* @__PURE__ */ jsx(SidebarToggle, {
+			children: [drawer && (drawerToggle || drawerBar) && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-2 bg-(--theme-panel-bg) px-2 pt-2",
+				children: [drawerToggle && /* @__PURE__ */ jsx(SidebarToggle, {
 					collapsed: !drawerOpen,
 					onToggle: toggleSidebar,
 					openLabel: strings.sidebar.openSidebar,
 					closeLabel: strings.sidebar.closeSidebar
-				})
+				}), drawerBar]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "flex min-h-0 flex-1 flex-col",
 				children
 			})]
 		})]
+	});
+}
+function ChatLayout({ children, sidebarActions = true, sidebarTop, sidebarMode = "inline", drawerBelowPx = DRAWER_BELOW_PX, drawerToggle = true, drawerBar }) {
+	return /* @__PURE__ */ jsx(KeyboardShortcutsProvider, { children: /* @__PURE__ */ jsx(ConversationLayout, {
+		sidebar: /* @__PURE__ */ jsx(ChatSidebar, {
+			actions: sidebarActions,
+			top: sidebarTop
+		}),
+		sidebarMode,
+		drawerBelowPx,
+		drawerToggle,
+		drawerBar,
+		children
 	}) });
 }
 //#endregion
-export { CHAT_COLUMN_SCOPE, DRAWER_BELOW_PX, ChatLayout as default };
+export { CHAT_COLUMN_SCOPE, ConversationLayout, DRAWER_BELOW_PX, ChatLayout as default };

package/dist/ai/components/ChatSidebar.js

@@ -11,7 +11,7 @@ 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 { SidebarRow, useRowDialogs } from "../ui/sidebar.js";
 import { conversationToMarkdown, downloadText, exportFilename } from "../core/exportConversation.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import ShareDialog from "./ShareDialog.js";
@@ -170,7 +170,12 @@ function ChatSidebar({ actions = true, top }) {
 	};
 	const list = /* @__PURE__ */ jsx(ConversationSidebar, {
 		collapsed: sidebarCollapsed,
-		fill: drawer,
+		drawer: drawer ? {
+			open: drawerOpen,
+			onClose: closeDrawer,
+			label: tSidebar.drawerLabel,
+			closeLabel: tSidebar.closeSidebar
+		} : void 0,
 		onToggle: toggleSidebar,
 		toggleLabels: {
 			open: tSidebar.openSidebar,
@@ -262,13 +267,7 @@ function ChatSidebar({ actions = true, top }) {
 		})
 	});
 	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,
+		(drawer || sidebar !== "hidden") && list,
 		contextMenu,
 		dialogs,
 		conversationToShare && /* @__PURE__ */ jsx(ShareDialog, {

package/dist/ai/index.d.ts

@@ -11,7 +11,7 @@ export { default as BlockedGroupBanner } from './components/BlockedGroupBanner.j
 export { default as BranchNavigator } from './components/BranchNavigator.js';
 export { default as ChatEmptyState } from './components/ChatEmptyState.js';
 export { type ChatInputHandle, default as ChatInput, } from './components/ChatInput.js';
-export { CHAT_COLUMN_SCOPE, DRAWER_BELOW_PX, default as ChatLayout, type SidebarMode, } from './components/ChatLayout.js';
+export { CHAT_COLUMN_SCOPE, ConversationLayout, DRAWER_BELOW_PX, default as ChatLayout, type SidebarMode, } from './components/ChatLayout.js';
 export { default as ChatMessageView } from './components/ChatMessage.js';
 export { default as ChatMessageList } from './components/ChatMessageList.js';
 export { default as ChatSidebar } from './components/ChatSidebar.js';

package/dist/ai/index.js

@@ -39,10 +39,10 @@ import { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, Sidebar
 import { ConversationSidebar, useResizableSidebarWidth } from "./ui/ConversationSidebar.js";
 import ShareDialog, { ShareButton } from "./components/ShareDialog.js";
 import ChatSidebar from "./components/ChatSidebar.js";
-import ChatLayout, { CHAT_COLUMN_SCOPE, DRAWER_BELOW_PX } from "./components/ChatLayout.js";
+import ChatLayout, { CHAT_COLUMN_SCOPE, ConversationLayout, DRAWER_BELOW_PX } from "./components/ChatLayout.js";
 import ChatMessage_default from "./components/ChatMessage.js";
 import ChatMessageList from "./components/ChatMessageList.js";
 import ChatThread from "./components/ChatThread.js";
 import ComposerFrame from "./components/ComposerFrame.js";
 import { NoticeBar, NoticeCard, OutputCard } from "./ui/Notice.js";
-export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };
+export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };

package/dist/ai/ui/ConversationSidebar.d.ts

@@ -19,7 +19,7 @@ export interface ConversationSidebarGroup<T> {
 /** A list of conversations beside the thread: headed groups of rows that
  *  collapse to a rail, with an optional drag handle for the width. The host
  *  decides what is listed, how it is grouped and how each row reads. */
-export declare function ConversationSidebar<T>({ label, collapsed: collapsedProp, onToggle, toggleLabels, resize, fill, groups, getKey, renderRow, loading, placeholder, top, rail, footer, cycle, groupTestId, children, }: {
+export declare function ConversationSidebar<T>({ label, collapsed: collapsedProp, onToggle, toggleLabels, resize, fill: fillProp, drawer, groups, getKey, renderRow, loading, placeholder, top, rail, footer, cycle, groupTestId, children, }: {
     label?: string;
     collapsed: boolean;
     onToggle: () => void;
@@ -36,6 +36,14 @@ export declare function ConversationSidebar<T>({ label, collapsed: collapsedProp
     /** Takes the width of its container, as inside a drawer, with no rail and
      *  no drag handle. */
     fill?: boolean;
+    /** Shows the list in a drawer over the page instead of beside it; it fills
+     *  the drawer. */
+    drawer?: {
+        open: boolean;
+        onClose: () => void;
+        label: string;
+        closeLabel: string;
+    } | undefined;
     groups: ConversationSidebarGroup<T>[];
     getKey: (item: T) => string;
     /** One `SidebarRow`. */

package/dist/ai/ui/ConversationSidebar.js

@@ -1,5 +1,5 @@
 import { positionKeys } from "../../components/keys.js";
-import { SidebarGroupHeading, SidebarPanel, SidebarToggle } from "./sidebar.js";
+import { SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarToggle } from "./sidebar.js";
 import cx from "classnames";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -90,12 +90,13 @@ function useItemCycling(ordered, cycle) {
 /** A list of conversations beside the thread: headed groups of rows that
 *  collapse to a rail, with an optional drag handle for the width. The host
 *  decides what is listed, how it is grouped and how each row reads. */
-function ConversationSidebar({ label, collapsed: collapsedProp, onToggle, toggleLabels, resize, fill = false, groups, getKey, renderRow, loading = false, placeholder, top, rail, footer, cycle, groupTestId, children }) {
+function ConversationSidebar({ label, collapsed: collapsedProp, onToggle, toggleLabels, resize, fill: fillProp = false, drawer, groups, getKey, renderRow, loading = false, placeholder, top, rail, footer, cycle, groupTestId, children }) {
 	const sized = useResizableSidebarWidth(resize?.storageKey ?? "");
 	useItemCycling(groups.flatMap((g) => g.items), cycle);
+	const fill = fillProp || !!drawer;
 	const collapsed = collapsedProp && !fill;
 	const resizable = resize && !fill;
-	return /* @__PURE__ */ jsxs(SidebarPanel, {
+	const panel = /* @__PURE__ */ jsxs(SidebarPanel, {
 		collapsed,
 		label,
 		...resizable ? {
@@ -160,6 +161,13 @@ function ConversationSidebar({ label, collapsed: collapsedProp, onToggle, toggle
 			children
 		]
 	});
+	return drawer ? /* @__PURE__ */ jsx(SidebarDrawer, {
+		open: drawer.open,
+		onClose: drawer.onClose,
+		label: drawer.label,
+		closeLabel: drawer.closeLabel,
+		children: panel
+	}) : panel;
 }
 //#endregion
 export { ConversationSidebar, useResizableSidebarWidth };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "React UI components: a theme contract, icons, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {