@parallelworks/ui 0.27.0 → 0.29.0

package/dist/ai/adapter/types.d.ts

@@ -28,6 +28,11 @@ export interface StreamHandlers {
     onPart?: (delta: PartDelta) => void;
 }
 export type PartDelta = {
+    type: 'text' | 'reasoning';
+    text: string;
+} | {
+    type: 'retract';
+} | {
     type: 'tool_start';
     id: string;
     name: string;

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 { conversationToMarkdown, downloadText, exportFilename } from "../core/exportConversation.js";
-import { SidebarGroupHeading, SidebarPanel, SidebarRow, SidebarToggle, useRowDialogs } from "../ui/sidebar.js";
+import { SidebarRow, 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 = {
@@ -90,64 +91,6 @@ 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;
@@ -171,7 +114,6 @@ 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 [search, setSearch] = useState("");
 	const searchInputRef = useRef(null);
 	const sidebarCollapsedRef = useRef(sidebarCollapsed);
@@ -197,7 +139,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);
@@ -215,125 +161,95 @@ function ChatSidebar({ actions = true }) {
 		navigation.toNewChat();
 	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsxs(SidebarPanel, {
+		/* @__PURE__ */ jsx(ConversationSidebar, {
 			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,
-					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-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
-						})]
+			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
 					})]
-				}),
-				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
+				})]
+			}), !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("");
+							}
 						},
-						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
+				})]
+			})
 		}),
 		contextMenu,
 		dialogs,

package/dist/ai/core/parts.js

@@ -5,6 +5,23 @@
 *  rather than invented — an end without a start has nothing to render. */
 function applyPartDelta(parts, delta) {
 	switch (delta.type) {
+		case "text":
+		case "reasoning": {
+			const last = parts.at(-1);
+			if (last?.kind === delta.type) return [...parts.slice(0, -1), {
+				...last,
+				text: last.text + delta.text
+			}];
+			return [...parts, {
+				kind: delta.type,
+				text: delta.text
+			}];
+		}
+		case "retract": {
+			let end = parts.length;
+			while (end > 0 && isStreamedText(parts[end - 1])) end -= 1;
+			return end === parts.length ? parts : parts.slice(0, end);
+		}
 		case "tool_start": return [...parts, {
 			kind: "tool_call",
 			id: delta.id,
@@ -70,6 +87,9 @@ function applyPartDelta(parts, delta) {
 		default: return parts;
 	}
 }
+function isStreamedText(part) {
+	return part?.kind === "text" || part?.kind === "reasoning";
+}
 /** A turn can end (completed or stopped) with tool calls still marked
 *  running — the transport died before their tool_end arrived. A stored
 *  message must not spin forever, so close them out as interrupted. */

package/dist/ai/index.d.ts

@@ -38,7 +38,8 @@ export { default as useDragDrop } from './core/useDragDrop.js';
 export { useKeyboardShortcuts } from './core/useKeyboardShortcuts.js';
 export { type ChatStrings, defaultChatStrings } from './strings.js';
 export * from './types.js';
+export { ConversationSidebar, type ConversationSidebarGroup, useResizableSidebarWidth, } from './ui/ConversationSidebar.js';
 export { type DropdownOption, default as Dropdown } from './ui/Dropdown.js';
-export { NoticeBar, NoticeCard, type NoticeTone } from './ui/Notice.js';
+export { NoticeBar, NoticeCard, type NoticeTone, OutputCard } from './ui/Notice.js';
 export { RenameDialog, type RowDialogStrings, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
 export { formatFileSize, isMac, isOrgModel } from './utils.js';

package/dist/ai/index.js

@@ -36,6 +36,7 @@ import { FOCUS_SIDEBAR_SEARCH_EVENT } from "./core/events.js";
 import { useKeyboardShortcuts } from "./core/useKeyboardShortcuts.js";
 import { KeyboardShortcutsProvider } from "./core/KeyboardShortcutsProvider.js";
 import { RenameDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
+import { ConversationSidebar, useResizableSidebarWidth } from "./ui/ConversationSidebar.js";
 import ShareDialog, { ShareButton } from "./components/ShareDialog.js";
 import ChatSidebar from "./components/ChatSidebar.js";
 import ChatLayout from "./components/ChatLayout.js";
@@ -43,5 +44,5 @@ 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 } from "./ui/Notice.js";
-export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ConnectToolsLink, DEFAULT_PERMISSION_MODE, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, 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, useRowDialogs, wordEmphasisRanges };
+import { NoticeBar, NoticeCard, OutputCard } from "./ui/Notice.js";
+export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ConnectToolsLink, ConversationSidebar, DEFAULT_PERMISSION_MODE, 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, 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/strings.d.ts

@@ -96,6 +96,8 @@ export interface ChatStrings {
         sharedWithYou: string;
         openSidebar: string;
         closeSidebar: string;
+        resizeLabel: string;
+        resizeHint: string;
         newChat: string;
         attachments: string;
         connectTools: string;

package/dist/ai/strings.js

@@ -100,6 +100,8 @@ var defaultChatStrings = {
 		sharedWithYou: "Shared with you",
 		openSidebar: "Open sidebar",
 		closeSidebar: "Close sidebar",
+		resizeLabel: "Resize conversation list",
+		resizeHint: "Drag to resize; double-click to reset",
 		newChat: "New chat",
 		attachments: "Attachments",
 		connectTools: "Connect Tools",

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

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+export declare const SIDEBAR_MIN_WIDTH_PX = 200;
+export declare const SIDEBAR_MAX_WIDTH_PX = 480;
+/** A sidebar width the reader drags, nudges or resets, kept per list under
+ *  its own storage key. */
+export declare function useResizableSidebarWidth(storageKey: string): {
+    width: number;
+    resizing: boolean;
+    startResize: (e: React.PointerEvent<HTMLElement>) => void;
+    reset: () => void;
+    nudge: (delta: number) => void;
+};
+export interface ConversationSidebarGroup<T> {
+    key: string;
+    label: ReactNode;
+    tone?: 'default' | 'attention';
+    items: 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, onToggle, toggleLabels, resize, groups, getKey, renderRow, loading, placeholder, top, rail, footer, cycle, groupTestId, children, }: {
+    label?: string;
+    collapsed: boolean;
+    onToggle: () => void;
+    toggleLabels: {
+        open: string;
+        close: string;
+    };
+    /** Omit for a fixed width. */
+    resize?: {
+        storageKey: string;
+        label: string;
+        hint: string;
+    };
+    groups: ConversationSidebarGroup<T>[];
+    getKey: (item: T) => string;
+    /** One `SidebarRow`. */
+    renderRow: (item: T) => ReactNode;
+    loading?: boolean;
+    /** Shown instead of the groups when there are none, such as an empty
+     *  state, a search with no matches, or an error. */
+    placeholder?: ReactNode;
+    /** Above the list, collapsed or not: new-item buttons and search. */
+    top?: ReactNode;
+    /** What the collapsed rail holds, as `SidebarRailItem`s. */
+    rail?: ReactNode;
+    /** Beside the toggle at the bottom, while expanded. */
+    footer?: ReactNode;
+    /** ⌘⌥↑ and ⌘⌥↓ (Ctrl+Alt elsewhere) select the previous or next item. */
+    cycle?: {
+        current: T | undefined;
+        onSelect: (item: T) => void;
+    };
+    groupTestId?: string;
+    /** Dialogs and menus that belong to the list. */
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/ai/ui/ConversationSidebar.js

@@ -0,0 +1,162 @@
+import { positionKeys } from "../../components/keys.js";
+import { SidebarGroupHeading, SidebarPanel, SidebarToggle } from "./sidebar.js";
+import cx from "classnames";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function clampSidebarWidth(width) {
+	return Math.min(480, Math.max(200, width));
+}
+function readStoredSidebarWidth(storageKey) {
+	try {
+		const stored = Number(window.localStorage.getItem(storageKey));
+		return Number.isFinite(stored) && stored > 0 ? clampSidebarWidth(stored) : 256;
+	} catch {
+		return 256;
+	}
+}
+function storeSidebarWidth(storageKey, width) {
+	try {
+		window.localStorage.setItem(storageKey, String(width));
+	} catch {}
+}
+/** A sidebar width the reader drags, nudges or resets, kept per list under
+*  its own storage key. */
+function useResizableSidebarWidth(storageKey) {
+	const [width, setWidth] = useState(() => readStoredSidebarWidth(storageKey));
+	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(storageKey, widthRef.current);
+		};
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	};
+	const reset = () => {
+		setWidth(256);
+		storeSidebarWidth(storageKey, 256);
+	};
+	const nudge = (delta) => {
+		const next = clampSidebarWidth(widthRef.current + delta);
+		setWidth(next);
+		storeSidebarWidth(storageKey, next);
+	};
+	return {
+		width,
+		resizing,
+		startResize,
+		reset,
+		nudge
+	};
+}
+/** Steps through the listed items in order and wraps, so moving between
+*  conversations never needs the pointer. */
+function useItemCycling(ordered, cycle) {
+	const latest = useRef({
+		ordered,
+		cycle
+	});
+	latest.current = {
+		ordered,
+		cycle
+	};
+	const enabled = !!cycle;
+	useEffect(() => {
+		if (!enabled) return;
+		const onKeyDown = (e) => {
+			const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
+			const { ordered: items, cycle: c } = latest.current;
+			if (!step || !e.altKey || !(e.metaKey || e.ctrlKey) || !c || items.length === 0) return;
+			e.preventDefault();
+			const at = c.current === void 0 ? -1 : items.indexOf(c.current);
+			const next = at < 0 ? items[step > 0 ? 0 : items.length - 1] : items[(at + step + items.length) % items.length];
+			if (next !== void 0) c.onSelect(next);
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [enabled]);
+}
+/** 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, onToggle, toggleLabels, resize, groups, getKey, renderRow, loading = false, placeholder, top, rail, footer, cycle, groupTestId, children }) {
+	const sized = useResizableSidebarWidth(resize?.storageKey ?? "");
+	useItemCycling(groups.flatMap((g) => g.items), cycle);
+	return /* @__PURE__ */ jsxs(SidebarPanel, {
+		collapsed,
+		label,
+		...resize ? {
+			width: sized.width,
+			resizing: sized.resizing
+		} : {},
+		children: [
+			resize && !collapsed && /* @__PURE__ */ jsx("div", {
+				role: "separator",
+				tabIndex: 0,
+				"aria-orientation": "vertical",
+				"aria-label": resize.label,
+				"aria-valuemin": 200,
+				"aria-valuemax": 480,
+				"aria-valuenow": sized.width,
+				title: resize.hint,
+				onPointerDown: sized.startResize,
+				onDoubleClick: sized.reset,
+				onKeyDown: (e) => {
+					if (e.key === "ArrowLeft") sized.nudge(-16);
+					else if (e.key === "ArrowRight") sized.nudge(16);
+				},
+				className: cx("absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none", sized.resizing ? "bg-(--theme-element)" : "hover:bg-(--theme-border)")
+			}),
+			top,
+			collapsed && rail ? /* @__PURE__ */ jsx("ul", {
+				className: "flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto py-1",
+				children: rail
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cx("min-h-0 flex-1 overflow-y-auto px-2 pb-2 transition-opacity duration-200", collapsed ? "pointer-events-none opacity-0" : "opacity-100"),
+				children: loading ? /* @__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))
+				}) : groups.length === 0 ? placeholder : groups.map((group) => /* @__PURE__ */ jsxs("div", {
+					className: "mb-2",
+					children: [/* @__PURE__ */ jsx(SidebarGroupHeading, {
+						tone: group.tone ?? "default",
+						testId: groupTestId,
+						children: group.label
+					}), /* @__PURE__ */ jsx("ul", {
+						className: "space-y-0.5",
+						children: group.items.map((item) => /* @__PURE__ */ jsx(Fragment, { children: renderRow(item) }, getKey(item)))
+					})]
+				}, group.key))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("flex shrink-0 items-center gap-1 p-1.5", collapsed ? "justify-center" : footer ? "justify-between" : "justify-end"),
+				children: [!collapsed && footer, /* @__PURE__ */ jsx(SidebarToggle, {
+					collapsed,
+					onToggle,
+					openLabel: toggleLabels.open,
+					closeLabel: toggleLabels.close
+				})]
+			}),
+			children
+		]
+	});
+}
+//#endregion
+export { ConversationSidebar, useResizableSidebarWidth };

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

@@ -10,6 +10,14 @@ export declare function NoticeBar({ tone, title, children, action, onAction, tes
     onAction?: () => void;
     testId?: string;
 }): import("react").JSX.Element;
+/** What a command printed, kept verbatim under the command that printed it. */
+export declare function OutputCard({ title, text, onDismiss, dismissLabel, testId, }: {
+    title: string;
+    text: string;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    testId?: string;
+}): import("react").JSX.Element;
 /** An inline notice next to the composer. One with no dismiss states a fact
  *  that is still true; one with a dismiss is a message the reader can put away. */
 export declare function NoticeCard({ tone, children, onDismiss, dismissLabel, testId, }: {