@parallelworks/ui 0.70.0 → 0.71.0

package/README.md

@@ -874,6 +874,14 @@ passes `ChatInput`'s props; `ComposerControls` takes `model` and `allocation`
 as a `BoundSetting` for a session that owns its own, and `tools={false}` keeps
 the chat's tools out of a composer they don't apply to.
 
+A host's own list of conversations or sessions builds on `ConversationSidebar`
+with the same pieces the chat's list uses: `SidebarRow` with `SidebarRowBody`
+inside its link (an optional `leading` mark such as a status dot, the title
+and time, and an optional `detail` line), `useSessionMenu` for the row menu
+(rename, share, download, then delete apart, each with an optional
+`disabledReason`), `useRowDialogs` for rename and delete, and `SidebarEmpty`
+for an empty list or a failed load.
+
 `ChatLayout sidebarMode="auto"` shows the conversation list as a drawer over
 the thread when the chat is narrower than `drawerBelowPx` (`DRAWER_BELOW_PX`, 896, by default),
 measured on the chat's own box; `"drawer"` always does, and `"inline"` (the

package/dist/ai/components/ChatSidebar.js

@@ -1,14 +1,13 @@
 import { cx } from "../../cx.js";
 import { ImageIcon, NewChatIcon, UsersIcon } from "../../icons.js";
 import { isPlainClick } from "../../components/AppLink.js";
-import { EmptyState } from "../../components/EmptyState.js";
 import { RelativeTime } from "../../components/relativeTime.js";
 import { SearchInput } from "../../components/SearchInput.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 { SidebarRow, SidebarRowTitle } from "../ui/sidebar.js";
+import { SidebarEmpty, SidebarRow, SidebarRowBody } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import { groupConversationsByDate, useConversationActions } from "./conversationActions.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -21,25 +20,26 @@ function ConversationRow({ conv, isCurrent, menuItems, openMenu, onOpen }) {
 		selected: isCurrent,
 		menuItems,
 		openMenu,
-		children: /* @__PURE__ */ jsxs(LinkComponent, {
+		children: /* @__PURE__ */ jsx(LinkComponent, {
 			target: {
 				kind: "conversation",
 				id: conv.id
 			},
-			className: "flex min-w-0 flex-1 items-center gap-1.5 py-1 text-left",
+			className: "flex min-w-0 flex-1 py-1 text-left",
 			onClick: (e) => {
 				if (isPlainClick(e)) onOpen();
 			},
-			children: [conv.isOwner === false && /* @__PURE__ */ jsx(UsersIcon, {
-				className: "h-3 w-3 shrink-0 theme-muted-text",
-				title: t.sharedWithYou
-			}), /* @__PURE__ */ jsx(SidebarRowTitle, {
+			children: /* @__PURE__ */ jsx(SidebarRowBody, {
+				leading: conv.isOwner === false && /* @__PURE__ */ jsx(UsersIcon, {
+					className: "h-3 w-3 theme-muted-text",
+					title: t.sharedWithYou
+				}),
+				title: conv.title || t.untitled,
 				time: /* @__PURE__ */ jsx(RelativeTime, {
 					value: conv.updatedAt ?? conv.createdAt,
 					format: "compact"
-				}),
-				children: conv.title || t.untitled
-			})]
+				})
+			})
 		})
 	});
 }
@@ -117,10 +117,7 @@ function ChatSidebar({ actions = true, top }) {
 			onOpen: closeDrawer
 		}),
 		loading: isLoading,
-		placeholder: /* @__PURE__ */ jsx(EmptyState, {
-			variant: "bare",
-			title: conversations.length === 0 ? tSidebar.noConversations : strings.chrome.noMatches
-		}),
+		placeholder: /* @__PURE__ */ jsx(SidebarEmpty, { title: conversations.length === 0 ? tSidebar.noConversations : strings.chrome.noMatches }),
 		cycle: {
 			current: filteredConversations.find((conv) => conv.id === activeConversationId),
 			onSelect: (conv) => navigation.toConversation(conv.id)

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

@@ -3,10 +3,12 @@ import { type OpenMenu } from '../../components/ContextMenu.js';
 import type { MenuEntry } from '../../components/MenuEntries.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. */
+/** Conversations by how long ago they last changed, the time each row shows,
+ *  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;
+    updatedAt?: string | null | undefined;
 }>(conversations: T[]): {
     key: ConversationGroupKey;
     items: T[];

package/dist/ai/components/conversationActions.js

@@ -1,18 +1,18 @@
-import { DownloadIcon, RenameIcon, ShareIcon, TrashIcon } from "../../icons.js";
 import { toast } from "../../components/Toast.js";
 import { useStrings } from "../../components/Provider.js";
 import { useContextMenu } from "../../components/ContextMenu.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
-import { useRowDialogs } from "../ui/sidebar.js";
+import { useRowDialogs, useSessionMenu } from "../ui/sidebar.js";
 import { conversationToMarkdown, downloadText, exportFilename } from "../core/exportConversation.js";
 import ShareDialog from "./ShareDialog.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 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. */
+/** Conversations by how long ago they last changed, the time each row shows,
+*  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 = {
@@ -23,7 +23,7 @@ function groupConversationsByDate(conversations) {
 		groupOlder: []
 	};
 	for (const conv of conversations) {
-		const days = now.diff(DateTime.fromISO(conv.createdAt), "days").days;
+		const days = now.diff(DateTime.fromISO(conv.updatedAt ?? 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]) => ({
@@ -63,29 +63,13 @@ function useConversationActions() {
 			toast.error(strings.chrome.exportError);
 		}
 	};
-	const menuItems = (conv) => [
-		{
-			label: common.rename,
-			icon: /* @__PURE__ */ jsx(RenameIcon, {}),
-			onClick: () => requestRename(conv)
-		},
-		...adapter.sharing && conv.isOwner !== false ? [{
-			label: common.share,
-			icon: /* @__PURE__ */ jsx(ShareIcon, {}),
-			onClick: () => setSharing(conv.id)
-		}] : [],
-		{
-			label: common.download,
-			icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
-			onClick: () => void download(conv.id)
-		},
-		{
-			label: common.delete,
-			icon: /* @__PURE__ */ jsx(TrashIcon, {}),
-			destructive: true,
-			onClick: () => requestDelete(conv)
-		}
-	];
+	const sessionMenu = useSessionMenu();
+	const menuItems = (conv) => sessionMenu({
+		rename: { onClick: () => requestRename(conv) },
+		share: adapter.sharing && conv.isOwner !== false ? { onClick: () => setSharing(conv.id) } : void 0,
+		download: { onClick: () => void download(conv.id) },
+		remove: { onClick: () => requestDelete(conv) }
+	});
 	return {
 		menuItems,
 		openMenu,

package/dist/ai/index.d.ts

@@ -42,5 +42,5 @@ export { type ChatStrings, defaultChatStrings } from './strings.js';
 export * from './types.js';
 export { ConversationSidebar, type ConversationSidebarGroup, sidebarDrawerProps, } from './ui/ConversationSidebar.js';
 export { NoticeBar, NoticeCard, type NoticeTone, OutputCard } from './ui/Notice.js';
-export { RenameDialog, type RowDialogStrings, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
+export { RenameDialog, type RowDialogStrings, type SessionMenuAction, SidebarEmpty, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowBody, SidebarRowTitle, SidebarToggle, useRowDialogs, useSessionMenu, } from './ui/sidebar.js';
 export { isMac, isOrgModel } from './utils.js';

package/dist/ai/index.js

@@ -35,7 +35,7 @@ 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, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
+import { RenameDialog, SidebarEmpty, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowBody, SidebarRowTitle, SidebarToggle, useRowDialogs, useSessionMenu } from "./ui/sidebar.js";
 import { ConversationSidebar, sidebarDrawerProps } from "./ui/ConversationSidebar.js";
 import ShareDialog, { ShareButton } from "./components/ShareDialog.js";
 import { groupConversationsByDate, useConversationActions } from "./components/conversationActions.js";
@@ -46,4 +46,4 @@ import ChatMessageList from "./components/ChatMessageList.js";
 import SessionView from "./components/SessionView.js";
 import ChatThread from "./components/ChatThread.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, ChatStage, ChatThread, ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, 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, SessionView, ShareButton, ShareDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, computeEditDiff, computeWriteRows, defaultChatStrings, defaultToolStrings, editSummary, finalizeParts, firstNonEmptyLine, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, sidebarDrawerProps, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useChatStream, useConversationActions, useDragDrop, useKeyboardShortcuts, 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, 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, SessionView, ShareButton, ShareDialog, SidebarEmpty, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowBody, SidebarRowTitle, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, computeEditDiff, computeWriteRows, defaultChatStrings, defaultToolStrings, editSummary, finalizeParts, firstNonEmptyLine, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, sidebarDrawerProps, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useChatStream, useConversationActions, useDragDrop, useKeyboardShortcuts, useRowDialogs, useSessionMenu, wordEmphasisRanges };

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

@@ -1,6 +1,6 @@
 import { type CSSProperties, type ReactNode } from 'react';
 import type { OpenMenu } from '../../components/ContextMenu.js';
-import type { MenuEntry } from '../../components/MenuEntries.js';
+import { type MenuEntry } from '../../components/MenuEntries.js';
 export declare const SIDEBAR_DEFAULT_WIDTH_PX = 256;
 /** The column a conversation list lives in: it animates between its width
  *  and a rail, unless a drag is setting the width right now. */
@@ -34,6 +34,34 @@ export declare function SidebarRowTitle({ children, time, }: {
     /** When it last changed, short: a compact `RelativeTime`. */
     time?: ReactNode;
 }): import("react").JSX.Element;
+/** A row's content: an optional mark before it (a status dot, a shared
+ *  icon), the title with its time, and an optional line under it for what the
+ *  mark cannot say, such as the machine or a state that needs the reader. */
+export declare function SidebarRowBody({ leading, title, time, detail, }: {
+    leading?: ReactNode;
+    title: ReactNode;
+    time?: ReactNode;
+    detail?: ReactNode;
+}): import("react").JSX.Element;
+/** An action a row's menu offers, and why it is unavailable when it is. */
+export interface SessionMenuAction {
+    onClick: () => void;
+    disabledReason?: string | undefined;
+}
+/** A row's menu in one order wherever a list of conversations or sessions
+ *  shows: rename, share, download, then delete apart. Each is left out unless given. */
+export declare function useSessionMenu(): (actions: {
+    rename?: SessionMenuAction | undefined;
+    share?: SessionMenuAction | undefined;
+    download?: SessionMenuAction | undefined;
+    remove?: SessionMenuAction | undefined;
+}) => MenuEntry[];
+/** In place of a list with nothing to show: none yet, nothing matching, or
+ *  why it could not load. */
+export declare function SidebarEmpty({ title, error }: {
+    title: string;
+    error?: 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

@@ -1,7 +1,10 @@
 import { cx } from "../../cx.js";
-import { SidebarIcon } from "../../icons.js";
+import { DownloadIcon, RenameIcon, ShareIcon, SidebarIcon, TrashIcon } from "../../icons.js";
 import { Tooltip } from "../../components/Tooltip.js";
+import { useStrings } from "../../components/Provider.js";
 import { AppLink, isPlainClick } from "../../components/AppLink.js";
+import { EmptyState } from "../../components/EmptyState.js";
+import { menuDivider } from "../../components/MenuEntries.js";
 import { IconButton } from "../../components/IconButton.js";
 import { fieldBox } from "../../components/fieldBox.js";
 import { focusOnMount } from "../../components/focus.js";
@@ -56,6 +59,65 @@ function SidebarRowTitle({ children, time }) {
 		})]
 	});
 }
+/** A row's content: an optional mark before it (a status dot, a shared
+*  icon), the title with its time, and an optional line under it for what the
+*  mark cannot say, such as the machine or a state that needs the reader. */
+function SidebarRowBody({ leading, title, time, detail }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 items-start gap-2",
+		children: [leading && /* @__PURE__ */ jsx("span", {
+			className: "mt-1 flex h-3 shrink-0 items-center",
+			children: leading
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx(SidebarRowTitle, {
+				time,
+				children: title
+			}), detail && /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 flex min-w-0 items-center gap-1.5 text-[11px]",
+				children: detail
+			})]
+		})]
+	});
+}
+/** A row's menu in one order wherever a list of conversations or sessions
+*  shows: rename, share, download, then delete apart. Each is left out unless given. */
+function useSessionMenu() {
+	const { common } = useStrings();
+	return ({ rename, share, download, remove }) => {
+		const entry = (label, icon, action) => ({
+			label,
+			icon,
+			onClick: action.onClick,
+			...action.disabledReason ? {
+				disabled: true,
+				disabledReason: action.disabledReason
+			} : {}
+		});
+		const items = [
+			...rename ? [entry(common.rename, /* @__PURE__ */ jsx(RenameIcon, {}), rename)] : [],
+			...share ? [entry(common.share, /* @__PURE__ */ jsx(ShareIcon, {}), share)] : [],
+			...download ? [entry(common.download, /* @__PURE__ */ jsx(DownloadIcon, {}), download)] : []
+		];
+		if (remove) {
+			if (items.length > 0) items.push(menuDivider);
+			items.push({
+				...entry(common.delete, /* @__PURE__ */ jsx(TrashIcon, {}), remove),
+				destructive: true
+			});
+		}
+		return items;
+	};
+}
+/** In place of a list with nothing to show: none yet, nothing matching, or
+*  why it could not load. */
+function SidebarEmpty({ title, error }) {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		variant: "bare",
+		title: error ?? title,
+		...error ? { testId: "sidebar-list-error" } : {}
+	});
+}
 /** 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 }) {
@@ -176,4 +238,4 @@ function useRowDialogs({ strings, nameOf, onDelete, onRename }) {
 	};
 }
 //#endregion
-export { RenameDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, useRowDialogs };
+export { RenameDialog, SidebarEmpty, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowBody, SidebarRowTitle, SidebarToggle, useRowDialogs, useSessionMenu };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.70.0",
+  "version": "0.71.0",
   "description": "React UI components: a theme contract, icons, brand logos, 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": {