@parallelworks/ui 0.40.1 → 0.42.0

package/dist/ai/components/ChatMessage.js

@@ -1,4 +1,3 @@
-import { safeUrl } from "../../safeUrl.js";
 import { BiError } from "../../icons/bi/BiError.js";
 import { FaCheck } from "../../icons/fa/FaCheck.js";
 import { FaEdit } from "../../icons/fa/FaEdit.js";
@@ -7,6 +6,7 @@ import { FiCopy } from "../../icons/fi/FiCopy.js";
 import { FiDownload } from "../../icons/fi/FiDownload.js";
 import { FiFile } from "../../icons/fi/FiFile.js";
 import { MdRefresh } from "../../icons/md/MdRefresh.js";
+import { safeUrl } from "../../safeUrl.js";
 import { durationToAbsHumanDuration } from "../../duration.js";
 import { useChatConfig } from "../core/config.js";
 import { formatFileSize } from "../utils.js";
@@ -17,9 +17,9 @@ import AgentMessageParts from "./agent/AgentMessageParts.js";
 import BranchNavigator from "./BranchNavigator.js";
 import { UserMessageText } from "./PastedText.js";
 import { Avatar } from "../ui/Avatar.js";
-import cx from "classnames";
-import { memo, useEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef, useState } from "react";
 import { DateTime, Duration } from "luxon";
 //#region src/ai/components/ChatMessage.tsx
 function formatDuration(ms) {
@@ -102,7 +102,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	};
 	const hasParts = !!message.parts?.length;
 	if (hasParts && !message.content) return /* @__PURE__ */ jsx("div", {
-		className: cx("group py-3 w-full", !flush && "px-4"),
+		className: clsx("group py-3 w-full", !flush && "px-4"),
 		children: /* @__PURE__ */ jsx(AgentMessageParts, {
 			message,
 			isStreaming,
@@ -123,7 +123,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	};
 	return /* @__PURE__ */ jsx("div", {
 		role: "none",
-		className: cx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "px-4"),
+		className: clsx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "px-4"),
 		onMouseEnter: () => setShowActions(true),
 		onMouseLeave: () => setShowActions(false),
 		onFocus: () => setShowActions(true),
@@ -153,9 +153,9 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 				})]
 			})]
 		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("flex gap-3 w-full", isRightAligned ? "flex-row-reverse" : "flex-row"),
+			className: clsx("flex gap-3 w-full", isRightAligned ? "flex-row-reverse" : "flex-row"),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cx("flex-1 min-w-0 space-y-1", isRightAligned && "relative flex flex-col items-end"),
+				className: clsx("flex-1 min-w-0 space-y-1", isRightAligned && "relative flex flex-col items-end"),
 				children: [
 					showReasoningButton && /* @__PURE__ */ jsxs("div", {
 						className: "mb-2",
@@ -191,21 +191,21 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 							name: otherAuthor.name || otherAuthor.username,
 							className: "flex-shrink-0 mb-0.5"
 						}), /* @__PURE__ */ jsx("div", {
-							className: cx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-tint", hasPastes && "chat-bubble-roomy"),
+							className: clsx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-tint", hasPastes && "chat-bubble-roomy"),
 							children: /* @__PURE__ */ jsx(UserMessageText, {
 								content: message.content,
 								pastes: message.pastes
 							})
 						})]
 					}) : isUser ? /* @__PURE__ */ jsx("div", {
-						className: cx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-bubble-user", hasPastes && "chat-bubble-roomy"),
+						className: clsx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-bubble-user", hasPastes && "chat-bubble-roomy"),
 						children: /* @__PURE__ */ jsx(UserMessageText, {
 							content: message.content,
 							pastes: message.pastes
 						})
 					}) : /* @__PURE__ */ jsx("div", {
 						ref: contentRef,
-						className: cx(chatProseClasses, collapsed && "chat-message-clamp"),
+						className: clsx(chatProseClasses, collapsed && "chat-message-clamp"),
 						children: /* @__PURE__ */ jsx(Markdown, {
 							isStreaming,
 							children: message.content
@@ -303,7 +303,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 						})
 					}),
 					!isStreaming && !isEditing && /* @__PURE__ */ jsxs("div", {
-						className: cx("chat-actions flex items-center gap-0.5 transition-opacity duration-150", isRightAligned ? "absolute right-0 top-full -mr-1.5 mt-0.5" : "-ml-1.5 mt-2", isRightAligned && (showActions ? "opacity-100" : "opacity-0 pointer-events-none")),
+						className: clsx("chat-actions flex items-center gap-0.5 transition-opacity duration-150", isRightAligned ? "absolute right-0 top-full -mr-1.5 mt-0.5" : "-ml-1.5 mt-2", isRightAligned && (showActions ? "opacity-100" : "opacity-0 pointer-events-none")),
 						children: [
 							/* @__PURE__ */ jsx("button", {
 								type: "button",
@@ -332,7 +332,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 								onNavigate: onNavigateBranch
 							}),
 							(timestamp || !isUser && (message.model || totalTokens)) && /* @__PURE__ */ jsxs("span", {
-								className: cx("chat-meta flex items-center gap-2 ml-2 text-xs tabular-nums theme-muted-text transition-opacity duration-150 select-none", showActions ? "opacity-100" : "opacity-0"),
+								className: clsx("chat-meta flex items-center gap-2 ml-2 text-xs tabular-nums theme-muted-text transition-opacity duration-150 select-none", showActions ? "opacity-100" : "opacity-0"),
 								children: [
 									timestamp && /* @__PURE__ */ jsx("span", {
 										title: timestamp.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),

package/dist/ai/components/ChatMessageList.js

@@ -7,9 +7,9 @@ import Markdown from "../ui/Markdown.js";
 import { ReasoningBody, ReasoningToggle } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import ChatMessage_default from "./ChatMessage.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Duration } from "luxon";
 //#region src/ai/components/ChatMessageList.tsx
 function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery = "afterReply", editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
@@ -151,7 +151,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 		children: [
 			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
 			footer && /* @__PURE__ */ jsx("div", {
-				className: cx("w-full max-w-[var(--chat-column,50rem)] mx-auto", !flush && "px-4"),
+				className: clsx("w-full max-w-[var(--chat-column,50rem)] mx-auto", !flush && "px-4"),
 				children: footer
 			}),
 			inputElement && /* @__PURE__ */ jsx("div", {
@@ -202,7 +202,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 					isStreaming && streamingReasoning && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
 						children: /* @__PURE__ */ jsxs("div", {
-							className: cx("pt-3", !flush && "px-4"),
+							className: clsx("pt-3", !flush && "px-4"),
 							children: [/* @__PURE__ */ jsx(ReasoningToggle, {
 								open: reasoningOpen,
 								shimmer: isThinking,
@@ -225,7 +225,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 						})
 					}, "thinking"),
 					isStreaming && streamingParts.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: cx("animate-chat-enter py-1", !flush && "px-4"),
+						className: clsx("animate-chat-enter py-1", !flush && "px-4"),
 						children: /* @__PURE__ */ jsx(AgentMessageParts, {
 							message: {
 								id: "streaming-parts",
@@ -238,7 +238,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 					showWorkingIndicator && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
 						children: /* @__PURE__ */ jsx("div", {
-							className: cx("py-3", !flush && "px-4"),
+							className: clsx("py-3", !flush && "px-4"),
 							children: /* @__PURE__ */ jsx("div", {
 								className: "animate-shimmer text-shimmer text-sm",
 								children: tThinking.ellipsis
@@ -261,7 +261,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 						const removable = canRemoveQueued?.(msg.id) ?? true;
 						const status = !removable ? strings.queue.handedOver : queueDelivery === "nextStep" ? strings.queue.waitingNextStep : strings.queue.waiting;
 						return /* @__PURE__ */ jsxs("div", {
-							className: cx("animate-chat-enter", removable && "chat-queued"),
+							className: clsx("animate-chat-enter", removable && "chat-queued"),
 							children: [/* @__PURE__ */ jsx(ChatMessage_default, {
 								message: msg,
 								allMessages,
@@ -270,11 +270,11 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 								onOpenAttachment
 							}), /* @__PURE__ */ jsxs("div", {
 								"data-testid": "queued-status",
-								className: cx("-mt-4 mb-2 flex items-center justify-end gap-2 text-xs theme-muted-text", !flush && "px-4"),
+								className: clsx("-mt-4 mb-2 flex items-center justify-end gap-2 text-xs theme-muted-text", !flush && "px-4"),
 								children: [
 									removable ? /* @__PURE__ */ jsx(FiClock, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FaCheck, { className: "h-3 w-3" }),
 									/* @__PURE__ */ jsx("span", { children: status }),
-									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 										"aria-hidden": "true",
 										children: "·"
 									}), /* @__PURE__ */ jsx("button", {

package/dist/ai/components/ChatSidebar.js

@@ -10,9 +10,9 @@ import { FOCUS_SIDEBAR_SEARCH_EVENT } from "../core/events.js";
 import { SidebarPlaceholder, SidebarRow, SidebarRowTitle } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import { groupConversationsByDate, useConversationActions } from "./conversationActions.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatSidebar.tsx
 function ConversationRow({ conv, isCurrent, updated, menuItems, openMenu, onOpen }) {
 	const { LinkComponent, strings } = useChatConfig();
@@ -91,8 +91,7 @@ function ChatSidebar({ actions = true, top }) {
 		drawer: drawer ? {
 			open: drawerOpen,
 			onClose: closeDrawer,
-			label: tSidebar.drawerLabel,
-			closeLabel: tSidebar.closeSidebar
+			label: tSidebar.drawerLabel
 		} : void 0,
 		onToggle: toggleSidebar,
 		toggleLabels: {
@@ -119,15 +118,15 @@ function ChatSidebar({ actions = true, top }) {
 			current: filteredConversations.find((conv) => conv.id === activeConversationId),
 			onSelect: (conv) => navigation.toConversation(conv.id)
 		},
-		top: (top || actions) && /* @__PURE__ */ jsxs(Fragment$1, { children: [top?.({ collapsed: sidebarCollapsed }), actions && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		top: (top || actions) && /* @__PURE__ */ jsxs(Fragment, { children: [top?.({ collapsed: sidebarCollapsed }), actions && /* @__PURE__ */ jsxs(Fragment, { 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: [/* @__PURE__ */ jsx(TbEdit, { className: clsx("flex-shrink-0", "w-4 h-4") }), /* @__PURE__ */ jsx("span", {
+					className: clsx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
 					children: tSidebar.newChat
 				})]
 			}), attachmentsAvailable && /* @__PURE__ */ jsxs(LinkComponent, {
@@ -136,7 +135,7 @@ function ChatSidebar({ actions = true, top }) {
 				title: tSidebar.attachments,
 				onClick: closeDrawer,
 				children: [/* @__PURE__ */ jsx(FaRegFileImage, { className: "flex-shrink-0 w-4 h-4" }), /* @__PURE__ */ jsx("span", {
-					className: cx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
+					className: clsx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
 					children: tSidebar.attachments
 				})]
 			})]
@@ -163,7 +162,7 @@ function ChatSidebar({ actions = true, top }) {
 		})] })] }),
 		footer: /* @__PURE__ */ jsx(ManageProvidersLink, {})
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(drawer || sidebar !== "hidden") && list, overlays] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [(drawer || sidebar !== "hidden") && list, overlays] });
 }
 //#endregion
 export { ChatSidebar as default };

package/dist/ai/components/ChatThread.js

@@ -8,8 +8,8 @@ import ChatInput from "./ChatInput.js";
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
 import { ShareButton } from "./ShareDialog.js";
 import ChatMessageList from "./ChatMessageList.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatThread.tsx
 function ChatThread({ conversationId }) {
 	const chatInputRef = useRef(null);
@@ -92,7 +92,7 @@ function ChatThread({ conversationId }) {
 			disabled: true,
 			conversationId,
 			settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
-			settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
+			settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
 		})]
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -126,8 +126,8 @@ function ChatThread({ conversationId }) {
 						placeholder: currentConversation?.canCollaborate === false ? strings.thread.viewOnly : void 0,
 						conversationId,
 						onEditLastMessage: handleEditLastMessage,
-						settingsLeft: /* @__PURE__ */ jsxs(Fragment$1, { children: [currentConversation?.isOwner !== false && /* @__PURE__ */ jsx(ShareButton, { conversationId }), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
-						settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
+						settingsLeft: /* @__PURE__ */ jsxs(Fragment, { children: [currentConversation?.isOwner !== false && /* @__PURE__ */ jsx(ShareButton, { conversationId }), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
+						settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
 					})
 				})
 			]

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

@@ -17,8 +17,8 @@ export declare function ComposerSettings({ left, children }: {
 export declare function ComposerUsage({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element | null;
-/** The two selectors every surface carries, bare so they read as text beside
- *  whatever the surface puts next to them. */
+/** The two selectors every surface carries, reading as text beside whatever
+ *  the surface puts next to them. */
 export declare function ComposerControls({ targetSession }: {
     targetSession?: string | null | undefined;
 }): import("react").JSX.Element;

package/dist/ai/components/ComposerChrome.js

@@ -38,13 +38,10 @@ function ComposerUsage({ children }) {
 		children
 	});
 }
-/** The two selectors every surface carries, bare so they read as text beside
-*  whatever the surface puts next to them. */
+/** The two selectors every surface carries, reading as text beside whatever
+*  the surface puts next to them. */
 function ComposerControls({ targetSession }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ModelSelector, {
-		variant: "bare",
-		targetSession
-	}), /* @__PURE__ */ jsx(AllocationSelector, { variant: "bare" })] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ModelSelector, { targetSession }), /* @__PURE__ */ jsx(AllocationSelector, {})] });
 }
 /** Where the reader manages the providers behind the model picker, at the
 *  foot of a conversation list. */

package/dist/ai/components/DragOverlay.js

@@ -1,9 +1,9 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/DragOverlay.tsx
 function DragOverlay({ className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("absolute inset-0 z-50 flex items-center justify-center bg-blue-500/10 border-2 border-dashed border-blue-500 backdrop-blur-sm pointer-events-none", className),
+		className: clsx("absolute inset-0 z-50 flex items-center justify-center bg-blue-500/10 border-2 border-dashed border-blue-500 backdrop-blur-sm pointer-events-none", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ jsx("p", {

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

@@ -1,6 +1,8 @@
 export declare function getProviderKeyFromModelId(modelId: string): string;
-export default function ModelSelector({ targetSession, variant, }: {
+/** Picks the model a conversation runs on, grouped by provider. Sessions that
+ *  are still connecting or not responding show as headings with their status,
+ *  so the reader sees why their models are missing. */
+export default function ModelSelector({ targetSession, }: {
+    /** A session, as "owner:name", whose models the reader is waiting for. */
     targetSession?: string | null | undefined;
-    /** 'bare' drops the border and the icon, for a toolbar that reads as text. */
-    variant?: 'default' | 'bare';
 }): import("react").JSX.Element;