@parallelworks/ui 0.33.0 → 0.35.0

package/dist/ai/components/ChatSidebar.js

@@ -1,76 +1,21 @@
-import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
-import { FaCloudDownloadAlt } from "../../icons/fa/FaCloudDownloadAlt.js";
-import { FaEdit } from "../../icons/fa/FaEdit.js";
 import { FaRegFileImage } from "../../icons/fa/FaRegFileImage.js";
 import { FaSearch } from "../../icons/fa/FaSearch.js";
 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 { useRowMenu } from "../../list/RowContextMenu.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
+import { ManageProvidersLink } from "./ComposerChrome.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 { SidebarPlaceholder, SidebarRow } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
-import ShareDialog from "./ShareDialog.js";
+import { groupConversationsByDate, useConversationActions } from "./conversationActions.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 = {
-		groupToday: [],
-		groupYesterday: [],
-		groupThisWeek: [],
-		groupThisMonth: [],
-		groupOlder: []
-	};
-	for (const conv of conversations) {
-		const dt = DateTime.fromISO(conv.createdAt);
-		const diff = now.diff(dt, "days").days;
-		if (diff < 1) groups.groupToday.push(conv);
-		else if (diff < 2) groups.groupYesterday.push(conv);
-		else if (diff < 7) groups.groupThisWeek.push(conv);
-		else if (diff < 30) groups.groupThisMonth.push(conv);
-		else groups.groupOlder.push(conv);
-	}
-	return Object.entries(groups).filter(([, items]) => items.length > 0);
-}
-function ConversationRow({ conv, isCurrent, sharingAvailable, openMenu, onRename, onShare, onDelete, onExport, onOpen }) {
+function ConversationRow({ conv, isCurrent, menuItems, openMenu, onOpen }) {
 	const { LinkComponent, strings } = useChatConfig();
 	const t = strings.sidebar;
-	const menuItems = [
-		{
-			kind: "action",
-			label: t.rename,
-			icon: /* @__PURE__ */ jsx(FaEdit, {}),
-			onSelect: () => onRename(conv)
-		},
-		...sharingAvailable ? [{
-			kind: "action",
-			label: t.share,
-			icon: /* @__PURE__ */ jsx(PiShareBold, {}),
-			onSelect: () => onShare(conv.id)
-		}] : [],
-		{
-			kind: "action",
-			label: strings.chrome.download,
-			icon: /* @__PURE__ */ jsx(FaCloudDownloadAlt, {}),
-			onSelect: () => onExport(conv.id)
-		},
-		{
-			kind: "action",
-			label: t.delete,
-			icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
-			destructive: true,
-			onSelect: () => onDelete(conv)
-		}
-	];
 	return /* @__PURE__ */ jsx(SidebarRow, {
 		selected: isCurrent,
 		menuItems,
@@ -93,28 +38,11 @@ function ConversationRow({ conv, isCurrent, sharingAvailable, openMenu, onRename
 	});
 }
 function ChatSidebar({ actions = true, top }) {
-	const { extraLinks, LinkComponent, strings } = useChatConfig();
+	const { LinkComponent, strings } = useChatConfig();
 	const tSidebar = strings.sidebar;
-	const { adapter, navigation, notify, activeConversationId, conversations, sidebar, sidebarPresentation, drawerOpen, setSidebar, setDrawerOpen, toggleSidebar, isLoading, loadConversations, deleteConversation, updateConversationTitle, clearCurrentConversation } = useChat();
-	const sharingAvailable = !!adapter.sharing;
+	const { adapter, navigation, activeConversationId, conversations, sidebar, sidebarPresentation, drawerOpen, setSidebar, setDrawerOpen, toggleSidebar, isLoading, loadConversations, clearCurrentConversation } = useChat();
 	const attachmentsAvailable = !!adapter.attachments;
-	const [shareDialogOpen, setShareDialogOpen] = useState(false);
-	const [conversationToShare, setConversationToShare] = useState(null);
-	const { openMenu, contextMenu } = useRowMenu();
-	const { requestDelete, requestRename, dialogs } = useRowDialogs({
-		strings: {
-			deleteTitle: tSidebar.deleteTitle,
-			deleteBody: () => tSidebar.deleteBody,
-			deleteAction: tSidebar.deleteAction,
-			renameTitle: tSidebar.renameTitle,
-			renameLabel: tSidebar.renameLabel,
-			renamePlaceholder: tSidebar.renamePlaceholder,
-			renameAction: tSidebar.renameAction
-		},
-		nameOf: (conv) => conv.title || tSidebar.untitled,
-		onDelete: (conv) => deleteConversation(conv.id),
-		onRename: (conv, title) => updateConversationTitle(conv.id, title)
-	});
+	const { menuItems, openMenu, overlays } = useConversationActions();
 	const drawer = sidebarPresentation === "drawer";
 	const sidebarCollapsed = !drawer && sidebar !== "expanded";
 	const closeDrawer = () => setDrawerOpen(false);
@@ -146,23 +74,11 @@ function ChatSidebar({ actions = true, top }) {
 		search,
 		tSidebar.untitled
 	]);
-	const groups = useMemo(() => groupByDate(filteredConversations).map(([key, items]) => ({
+	const groups = useMemo(() => groupConversationsByDate(filteredConversations).map(({ key, items }) => ({
 		key,
 		label: tSidebar[key],
 		items
 	})), [filteredConversations, tSidebar]);
-	const handleExport = async (id) => {
-		try {
-			const conversation = await adapter.conversations.get(id);
-			downloadText(exportFilename(conversation.title), conversationToMarkdown(conversation));
-		} catch {
-			notify.error(strings.chrome.exportError);
-		}
-	};
-	const handleShareClick = (id) => {
-		setConversationToShare(id);
-		setShareDialogOpen(true);
-	};
 	const handleNewChat = () => {
 		closeDrawer();
 		clearCurrentConversation();
@@ -170,14 +86,18 @@ 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,
 			close: tSidebar.closeSidebar
 		},
 		resize: {
-			storageKey: SIDEBAR_WIDTH_STORAGE_KEY,
 			label: tSidebar.resizeLabel,
 			hint: tSidebar.resizeHint
 		},
@@ -186,22 +106,12 @@ function ChatSidebar({ actions = true, top }) {
 		renderRow: (conv) => /* @__PURE__ */ jsx(ConversationRow, {
 			conv,
 			isCurrent: activeConversationId === conv.id,
-			sharingAvailable,
+			menuItems: menuItems(conv),
 			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
-		}),
+		placeholder: /* @__PURE__ */ jsx(SidebarPlaceholder, { children: conversations.length === 0 ? tSidebar.noConversations : strings.chrome.noMatches }),
 		cycle: {
 			current: filteredConversations.find((conv) => conv.id === activeConversationId),
 			onSelect: (conv) => navigation.toConversation(conv.id)
@@ -248,38 +158,9 @@ function ChatSidebar({ actions = true, top }) {
 				})]
 			})
 		})] })] }),
-		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
-			})]
-		})
+		footer: /* @__PURE__ */ jsx(ManageProvidersLink, {})
 	});
-	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, {
-			conversationId: conversationToShare,
-			isOpen: shareDialogOpen,
-			onClose: () => {
-				setShareDialogOpen(false);
-				setConversationToShare(null);
-			}
-		})
-	] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(drawer || sidebar !== "hidden") && list, overlays] });
 }
 //#endregion
 export { ChatSidebar as default };

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+/** Where a new conversation starts: the heading and the composer together, a
+ *  little above centre, with what the surface offers next under the box. The
+ *  composer keeps its place however much is under it, so surfaces that share
+ *  the stage put it in the same spot; a long list scrolls instead. */
+export default function ChatStage({ heading, subheading, children, }: {
+    heading?: ReactNode;
+    subheading?: ReactNode;
+    /** The composer, then whatever goes under it. */
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/ai/components/ChatStage.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ChatStage.tsx
+/** Where a new conversation starts: the heading and the composer together, a
+*  little above centre, with what the surface offers next under the box. The
+*  composer keeps its place however much is under it, so surfaces that share
+*  the stage put it in the same spot; a long list scrolls instead. */
+function ChatStage({ heading, subheading, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-0 flex-1 flex-col overflow-y-auto [container-type:size] [scrollbar-gutter:stable_both-edges]",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-full pt-[max(2rem,24cqh)] pb-[12vh]",
+			children: [heading && /* @__PURE__ */ jsxs("div", {
+				className: "mx-auto mb-6 max-w-[var(--chat-column,50rem)] px-8 text-center",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-[1.75rem] leading-tight font-medium tracking-[-0.02em] text-balance text-(--theme-panel)",
+					children: heading
+				}), subheading && /* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-sm theme-muted-text",
+					children: subheading
+				})]
+			}), children]
+		})
+	});
+}
+//#endregion
+export { ChatStage as default };

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

@@ -22,4 +22,7 @@ export declare function ComposerUsage({ children }: {
 export declare function ComposerControls({ targetSession }: {
     targetSession?: string | null | undefined;
 }): import("react").JSX.Element;
+/** Where the reader manages the providers behind the model picker, at the
+ *  foot of a conversation list. */
+export declare function ManageProvidersLink(): import("react").JSX.Element | null;
 export declare function ConnectToolsLink(): import("react").JSX.Element | null;

package/dist/ai/components/ComposerChrome.js

@@ -1,3 +1,4 @@
+import { IoSettingsOutline } from "../../icons/io5/IoSettingsOutline.js";
 import { PiPlugsConnectedFill } from "../../icons/pi/PiPlugsConnectedFill.js";
 import { useChatConfig } from "../core/config.js";
 import AllocationSelector from "./AllocationSelector.js";
@@ -8,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *  it: the machine, the workspace, and whatever else names the place. */
 function ComposerContext({ children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "mb-1.5 flex flex-wrap items-center gap-1.5",
+		className: "mb-1.5 flex min-h-7 flex-wrap items-center gap-1.5",
 		children
 	});
 }
@@ -45,6 +46,24 @@ function ComposerControls({ targetSession }) {
 		targetSession
 	}), /* @__PURE__ */ jsx(AllocationSelector, { variant: "bare" })] });
 }
+/** Where the reader manages the providers behind the model picker, at the
+*  foot of a conversation list. */
+function ManageProvidersLink() {
+	const { extraLinks, LinkComponent, strings } = useChatConfig();
+	if (!extraLinks.manageProviders) return null;
+	return /* @__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: strings.sidebar.manageProviders,
+		children: [/* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: strings.sidebar.manageProviders
+		})]
+	});
+}
 function ConnectToolsLink() {
 	const { extraLinks, LinkComponent, strings } = useChatConfig();
 	if (!extraLinks.connectTools) return null;
@@ -58,4 +77,4 @@ function ConnectToolsLink() {
 	});
 }
 //#endregion
-export { ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink };
+export { ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ManageProvidersLink };

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

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import { type OpenMenu, type RowMenuItem } from '../../list/index.js';
+import type { ConversationSummary } from '../types.js';
+export type ConversationGroupKey = 'groupToday' | 'groupYesterday' | 'groupThisWeek' | 'groupThisMonth' | 'groupOlder';
+/** Conversations by how long ago they started, newest group first, leaving
+ *  out the groups with none. Each key names its label in the sidebar strings. */
+export declare function groupConversationsByDate<T extends {
+    createdAt: string;
+}>(conversations: T[]): {
+    key: ConversationGroupKey;
+    items: T[];
+}[];
+/** What a conversation row offers behind its menu (rename, share, download,
+ *  delete) and the menu and dialogs that carry them out, for any list of
+ *  conversations. Render `overlays` once beside the list. */
+export declare function useConversationActions({ menuZClassName, }?: {
+    /** The menu's stacking class, for a list inside a layer above the page. */
+    menuZClassName?: string;
+}): {
+    menuItems: (conv: ConversationSummary) => RowMenuItem[];
+    openMenu: OpenMenu;
+    overlays: ReactNode;
+};

package/dist/ai/components/conversationActions.js

@@ -0,0 +1,108 @@
+import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
+import { FaCloudDownloadAlt } from "../../icons/fa/FaCloudDownloadAlt.js";
+import { FaEdit } from "../../icons/fa/FaEdit.js";
+import { PiShareBold } from "../../icons/pi/PiShareBold.js";
+import { useRowMenu } from "../../list/RowContextMenu.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import { useRowDialogs } from "../ui/sidebar.js";
+import { conversationToMarkdown, downloadText, exportFilename } from "../core/exportConversation.js";
+import ShareDialog from "./ShareDialog.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+//#region src/ai/components/conversationActions.tsx
+/** Conversations by how long ago they started, newest group first, leaving
+*  out the groups with none. Each key names its label in the sidebar strings. */
+function groupConversationsByDate(conversations) {
+	const now = DateTime.now();
+	const groups = {
+		groupToday: [],
+		groupYesterday: [],
+		groupThisWeek: [],
+		groupThisMonth: [],
+		groupOlder: []
+	};
+	for (const conv of conversations) {
+		const days = now.diff(DateTime.fromISO(conv.createdAt), "days").days;
+		groups[days < 1 ? "groupToday" : days < 2 ? "groupYesterday" : days < 7 ? "groupThisWeek" : days < 30 ? "groupThisMonth" : "groupOlder"].push(conv);
+	}
+	return Object.entries(groups).filter(([, items]) => items.length > 0).map(([key, items]) => ({
+		key,
+		items
+	}));
+}
+/** What a conversation row offers behind its menu (rename, share, download,
+*  delete) and the menu and dialogs that carry them out, for any list of
+*  conversations. Render `overlays` once beside the list. */
+function useConversationActions({ menuZClassName } = {}) {
+	const { strings } = useChatConfig();
+	const t = strings.sidebar;
+	const { adapter, notify, deleteConversation, updateConversationTitle } = useChat();
+	const { openMenu, contextMenu } = useRowMenu(menuZClassName);
+	const [sharing, setSharing] = useState(null);
+	const { requestDelete, requestRename, dialogs } = useRowDialogs({
+		strings: {
+			deleteTitle: t.deleteTitle,
+			deleteBody: () => t.deleteBody,
+			deleteAction: t.deleteAction,
+			renameTitle: t.renameTitle,
+			renameLabel: t.renameLabel,
+			renamePlaceholder: t.renamePlaceholder,
+			renameAction: t.renameAction
+		},
+		nameOf: (conv) => conv.title || t.untitled,
+		onDelete: (conv) => deleteConversation(conv.id),
+		onRename: (conv, title) => updateConversationTitle(conv.id, title)
+	});
+	const download = async (id) => {
+		try {
+			const conversation = await adapter.conversations.get(id);
+			downloadText(exportFilename(conversation.title), conversationToMarkdown(conversation));
+		} catch {
+			notify.error(strings.chrome.exportError);
+		}
+	};
+	const menuItems = (conv) => [
+		{
+			kind: "action",
+			label: t.rename,
+			icon: /* @__PURE__ */ jsx(FaEdit, {}),
+			onSelect: () => requestRename(conv)
+		},
+		...adapter.sharing && conv.isOwner !== false ? [{
+			kind: "action",
+			label: t.share,
+			icon: /* @__PURE__ */ jsx(PiShareBold, {}),
+			onSelect: () => setSharing(conv.id)
+		}] : [],
+		{
+			kind: "action",
+			label: strings.chrome.download,
+			icon: /* @__PURE__ */ jsx(FaCloudDownloadAlt, {}),
+			onSelect: () => void download(conv.id)
+		},
+		{
+			kind: "action",
+			label: t.delete,
+			icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
+			destructive: true,
+			onSelect: () => requestDelete(conv)
+		}
+	];
+	return {
+		menuItems,
+		openMenu,
+		overlays: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			contextMenu,
+			dialogs,
+			sharing && /* @__PURE__ */ jsx(ShareDialog, {
+				conversationId: sharing,
+				isOpen: true,
+				onClose: () => setSharing(null)
+			})
+		] })
+	};
+}
+//#endregion
+export { groupConversationsByDate, useConversationActions };

package/dist/ai/index.d.ts

@@ -11,13 +11,14 @@ 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';
+export { default as ChatStage } from './components/ChatStage.js';
 export { default as ChatThread } from './components/ChatThread.js';
-export { ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, } from './components/ComposerChrome.js';
-export { default as ComposerFrame } from './components/ComposerFrame.js';
+export { ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ManageProvidersLink, } from './components/ComposerChrome.js';
+export { type ConversationGroupKey, groupConversationsByDate, useConversationActions, } from './components/conversationActions.js';
 export { default as DragOverlay } from './components/DragOverlay.js';
 export { default as ModelSelector, getProviderKeyFromModelId, } from './components/ModelSelector.js';
 export { default as ProviderIssueBanner } from './components/ProviderIssueBanner.js';
@@ -42,5 +43,5 @@ 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, OutputCard } from './ui/Notice.js';
-export { RenameDialog, type RowDialogStrings, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
+export { RenameDialog, type RowDialogStrings, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
 export { formatFileSize, isMac, isOrgModel } from './utils.js';

package/dist/ai/index.js

@@ -25,24 +25,25 @@ import BlockedGroupBanner from "./components/BlockedGroupBanner.js";
 import BranchNavigator from "./components/BranchNavigator.js";
 import { getGreeting } from "./core/greeting.js";
 import useDragDrop from "./core/useDragDrop.js";
-import { ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink } from "./components/ComposerChrome.js";
+import { NoticeBar, NoticeCard, OutputCard } from "./ui/Notice.js";
+import { ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ManageProvidersLink } from "./components/ComposerChrome.js";
 import DragOverlay from "./components/DragOverlay.js";
 import { pasteInlineMaxBytes } from "./core/pastes.js";
 import { slashMatches } from "./components/SlashMenu.js";
 import ChatInput from "./components/ChatInput.js";
+import ChatStage from "./components/ChatStage.js";
 import ProviderIssueBanner from "./components/ProviderIssueBanner.js";
 import ChatEmptyState from "./components/ChatEmptyState.js";
 import { FOCUS_SIDEBAR_SEARCH_EVENT } from "./core/events.js";
 import { useKeyboardShortcuts } from "./core/useKeyboardShortcuts.js";
 import { KeyboardShortcutsProvider } from "./core/KeyboardShortcutsProvider.js";
-import { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
+import { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
 import { ConversationSidebar, useResizableSidebarWidth } from "./ui/ConversationSidebar.js";
 import ShareDialog, { ShareButton } from "./components/ShareDialog.js";
+import { groupConversationsByDate, useConversationActions } from "./components/conversationActions.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, ChatStage, ChatThread, ComposerContext, ComposerControls, 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, ManageProvidersLink, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, 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, groupConversationsByDate, 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, useConversationActions, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };

package/dist/ai/strings.d.ts

@@ -143,6 +143,7 @@ export interface ChatStrings {
         download: string;
         exportError: string;
         jumpToLatest: string;
+        dismiss: string;
     };
     messageMeta: {
         stopped: string;

package/dist/ai/strings.js

@@ -142,7 +142,8 @@ var defaultChatStrings = {
 		noMatches: "No conversations match your search",
 		download: "Download",
 		exportError: "Failed to export conversation",
-		jumpToLatest: "Jump to latest"
+		jumpToLatest: "Jump to latest",
+		dismiss: "Dismiss"
 	},
 	messageMeta: {
 		stopped: "Stopped",

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;
@@ -27,15 +27,24 @@ export declare function ConversationSidebar<T>({ label, collapsed: collapsedProp
         open: string;
         close: string;
     };
-    /** Omit for a fixed width. */
+    /** Omit for a fixed width. A `storageKey` keeps this list's width apart
+     *  from the others'. */
     resize?: {
-        storageKey: string;
+        storageKey?: string;
         label: string;
         hint: string;
     };
     /** 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,8 +1,9 @@
 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";
+var SHARED_WIDTH_STORAGE_KEY = "aiChatSidebarWidth";
 function clampSidebarWidth(width) {
 	return Math.min(480, Math.max(200, width));
 }
@@ -90,12 +91,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 }) {
-	const sized = useResizableSidebarWidth(resize?.storageKey ?? "");
+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 ?? SHARED_WIDTH_STORAGE_KEY);
 	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 +162,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/dist/ai/ui/sidebar.d.ts

@@ -37,6 +37,12 @@ export declare function SidebarGroupHeading({ children, tone, testId, }: {
     tone?: 'default' | 'attention';
     testId?: string | undefined;
 }): import("react").JSX.Element;
+/** What a list says in place of its rows: none yet, no matches, or why it
+ *  could not load. Plain text, so an empty list reads the same in every list. */
+export declare function SidebarPlaceholder({ children, testId, }: {
+    children: ReactNode;
+    testId?: string | undefined;
+}): import("react").JSX.Element;
 /** One entry in the list: the row highlights while it is the open one or
  *  while its menu is up, and the menu opens from its button or a right-click. */
 export declare function SidebarRow({ selected, menuItems, openMenu, className, children, }: {

package/dist/ai/ui/sidebar.js

@@ -76,6 +76,15 @@ function SidebarGroupHeading({ children, tone = "default", testId }) {
 		children
 	});
 }
+/** What a list says in place of its rows: none yet, no matches, or why it
+*  could not load. Plain text, so an empty list reads the same in every list. */
+function SidebarPlaceholder({ children, testId }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-testid": testId,
+		className: "px-2 pt-1 text-sm theme-muted-text",
+		children
+	});
+}
 /** One entry in the list: the row highlights while it is the open one or
 *  while its menu is up, and the menu opens from its button or a right-click. */
 function SidebarRow({ selected, menuItems, openMenu, className, children }) {
@@ -182,4 +191,4 @@ function useRowDialogs({ strings, nameOf, onDelete, onRename }) {
 	};
 }
 //#endregion
-export { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs };
+export { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs };