@parallelworks/ui 0.44.0 → 0.46.0

package/dist/ai/components/ChatMessageList.js

@@ -1,21 +1,22 @@
-import { FaCheck } from "../../icons/fa/FaCheck.js";
-import { FiClock } from "../../icons/fi/FiClock.js";
-import { durationToAbsHumanDuration } from "../../duration.js";
+import { cx } from "../../cx.js";
+import { CheckIcon, ClockIcon } from "../../icons.js";
+import { useStrings } from "../../components/Provider.js";
+import { formatDuration } from "../../format.js";
+import { useElapsed } from "../../components/relativeTime.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import Markdown from "../ui/Markdown.js";
-import { ReasoningBody, ReasoningToggle } from "./Reasoning.js";
+import { Reasoning, ReasoningBody } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import ChatMessage_default from "./ChatMessage.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-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 }) {
 	const { adapter, isStreaming: providerStreaming, isThinking, streamingReasoning, streamingParts, thinkingStartTime } = useChat();
 	const isStreaming = isStreamingProp ?? providerStreaming;
 	const { strings } = useChatConfig();
+	const { common } = useStrings();
 	const tThinking = strings.thinking;
 	const attachmentDownloadUrl = useMemo(() => {
 		const attachments = adapter.attachments;
@@ -38,7 +39,6 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 	const messageCount = messages.length;
 	const streamingContent = streamingMessage?.content;
 	const streamingMessageParts = streamingMessage?.parts;
-	const [elapsedTime, setElapsedTime] = useState(0);
 	const [finalThinkingDuration, setFinalThinkingDuration] = useState(null);
 	const [reasoningOpen, setReasoningOpen] = useState(false);
 	const wasThinkingRef = useRef(false);
@@ -58,16 +58,6 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 			setReasoningOpen(false);
 		}
 	}, [isStreaming]);
-	useEffect(() => {
-		if (!thinkingStartTime || !isThinking) {
-			setElapsedTime(0);
-			return;
-		}
-		const interval = setInterval(() => {
-			setElapsedTime(Math.floor((Date.now() - thinkingStartTime) / 1e3));
-		}, 1e3);
-		return () => clearInterval(interval);
-	}, [thinkingStartTime, isThinking]);
 	useEffect(() => {
 		if (reasoningScrollRef.current && isThinking) reasoningScrollRef.current.scrollTop = reasoningScrollRef.current.scrollHeight;
 	}, [streamingReasoning, isThinking]);
@@ -151,7 +141,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 		children: [
 			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
 			footer && /* @__PURE__ */ jsx("div", {
-				className: clsx("w-full max-w-[var(--chat-column,50rem)] mx-auto", !flush && "px-4"),
+				className: cx("w-full max-w-[var(--chat-column,50rem)] mx-auto", !flush && "px-4"),
 				children: footer
 			}),
 			inputElement && /* @__PURE__ */ jsx("div", {
@@ -201,31 +191,37 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 					}),
 					isStreaming && streamingReasoning && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: clsx("pt-3", !flush && "px-4"),
-							children: [/* @__PURE__ */ jsx(ReasoningToggle, {
-								open: reasoningOpen,
+						children: /* @__PURE__ */ jsx("div", {
+							className: cx("pt-3", !flush && "px-4"),
+							children: /* @__PURE__ */ jsx(Reasoning, {
+								label: /* @__PURE__ */ jsx(ThinkingLabel, {
+									startedAt: isThinking ? thinkingStartTime : void 0,
+									finalDuration: finalThinkingDuration
+								}),
 								shimmer: isThinking,
-								onToggle: () => onOpenReasoning ? onOpenReasoning(streamingReasoning, finalThinkingDuration) : setReasoningOpen((o) => !o),
-								children: isThinking ? elapsedTime > 0 ? `${tThinking.label} (${elapsedTime}s)` : tThinking.ellipsis : tThinking.thoughtFor(finalThinkingDuration ? durationToAbsHumanDuration(Duration.fromMillis(finalThinkingDuration)) : `${elapsedTime}s`)
-							}), reasoningOpen ? /* @__PURE__ */ jsx(ReasoningBody, { children: /* @__PURE__ */ jsx(Markdown, {
-								isStreaming: isThinking,
-								children: streamingReasoning
-							}) }) : isThinking && /* @__PURE__ */ jsx(ReasoningBody, {
-								className: "chat-reasoning-tail",
-								children: /* @__PURE__ */ jsx("div", {
-									ref: reasoningScrollRef,
-									className: "max-h-20 overflow-y-hidden",
-									children: /* @__PURE__ */ jsx(Markdown, {
-										isStreaming: true,
-										children: streamingReasoning
+								open: reasoningOpen,
+								onOpenChange: setReasoningOpen,
+								onOpenPanel: onOpenReasoning && (() => onOpenReasoning(streamingReasoning, finalThinkingDuration)),
+								preview: isThinking && /* @__PURE__ */ jsx(ReasoningBody, {
+									className: "chat-reasoning-tail",
+									children: /* @__PURE__ */ jsx("div", {
+										ref: reasoningScrollRef,
+										className: "max-h-20 overflow-y-hidden",
+										children: /* @__PURE__ */ jsx(Markdown, {
+											isStreaming: true,
+											children: streamingReasoning
+										})
 									})
+								}),
+								children: /* @__PURE__ */ jsx(Markdown, {
+									isStreaming: isThinking,
+									children: streamingReasoning
 								})
-							})]
+							})
 						})
 					}, "thinking"),
 					isStreaming && streamingParts.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: clsx("animate-chat-enter py-1", !flush && "px-4"),
+						className: cx("animate-chat-enter py-1", !flush && "px-4"),
 						children: /* @__PURE__ */ jsx(AgentMessageParts, {
 							message: {
 								id: "streaming-parts",
@@ -238,7 +234,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 					showWorkingIndicator && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
 						children: /* @__PURE__ */ jsx("div", {
-							className: clsx("py-3", !flush && "px-4"),
+							className: cx("py-3", !flush && "px-4"),
 							children: /* @__PURE__ */ jsx("div", {
 								className: "animate-shimmer text-shimmer text-sm",
 								children: tThinking.ellipsis
@@ -261,7 +257,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: clsx("animate-chat-enter", removable && "chat-queued"),
+							className: cx("animate-chat-enter", removable && "chat-queued"),
 							children: [/* @__PURE__ */ jsx(ChatMessage_default, {
 								message: msg,
 								allMessages,
@@ -270,9 +266,9 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 								onOpenAttachment
 							}), /* @__PURE__ */ jsxs("div", {
 								"data-testid": "queued-status",
-								className: clsx("-mt-4 mb-2 flex items-center justify-end gap-2 text-xs theme-muted-text", !flush && "px-4"),
+								className: cx("-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" }),
+									removable ? /* @__PURE__ */ jsx(ClockIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }),
 									/* @__PURE__ */ jsx("span", { children: status }),
 									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 										"aria-hidden": "true",
@@ -282,7 +278,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 										"aria-label": strings.queue.remove,
 										onClick: () => onRemoveQueued(msg.id),
 										className: "rounded font-medium underline-offset-2 hover:theme-text hover:underline",
-										children: strings.queue.removeShort
+										children: common.remove
 									})] })
 								]
 							})]
@@ -311,5 +307,13 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 		]
 	});
 }
+/** "Thinking (12s)" while it thinks, then how long it took. Its own component,
+*  so the clock re-renders only this label, not the list. */
+function ThinkingLabel({ startedAt, finalDuration }) {
+	const t = useChatConfig().strings.thinking;
+	const elapsed = useElapsed(startedAt);
+	if (startedAt) return elapsed ? `${t.label} (${formatDuration(elapsed)})` : t.ellipsis;
+	return t.thoughtFor(formatDuration(finalDuration ?? 0));
+}
 //#endregion
 export { ChatMessageList as default };

package/dist/ai/components/ChatSidebar.js

@@ -1,20 +1,19 @@
-import { FaRegFileImage } from "../../icons/fa/FaRegFileImage.js";
-import { FaSearch } from "../../icons/fa/FaSearch.js";
-import { FaUsers } from "../../icons/fa/FaUsers.js";
-import { TbEdit } from "../../icons/tb/TbEdit.js";
-import { useRelativeTime } from "../../components/relativeTime.js";
+import { cx } from "../../cx.js";
+import { ImageIcon, NewChatIcon, UsersIcon } from "../../icons.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 { SidebarPlaceholder, SidebarRow, SidebarRowTitle } from "../ui/sidebar.js";
+import { SidebarRow, SidebarRowTitle } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import { groupConversationsByDate, useConversationActions } from "./conversationActions.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 //#region src/ai/components/ChatSidebar.tsx
-function ConversationRow({ conv, isCurrent, updated, menuItems, openMenu, onOpen }) {
+function ConversationRow({ conv, isCurrent, menuItems, openMenu, onOpen }) {
 	const { LinkComponent, strings } = useChatConfig();
 	const t = strings.sidebar;
 	return /* @__PURE__ */ jsx(SidebarRow, {
@@ -28,11 +27,14 @@ function ConversationRow({ conv, isCurrent, updated, menuItems, openMenu, onOpen
 			},
 			className: "flex min-w-0 flex-1 items-center gap-1.5 py-1 text-left",
 			onClick: onOpen,
-			children: [conv.isOwner === false && /* @__PURE__ */ jsx(FaUsers, {
+			children: [conv.isOwner === false && /* @__PURE__ */ jsx(UsersIcon, {
 				className: "h-3 w-3 shrink-0 theme-muted-text",
 				title: t.sharedWithYou
 			}), /* @__PURE__ */ jsx(SidebarRowTitle, {
-				time: updated,
+				time: /* @__PURE__ */ jsx(RelativeTime, {
+					value: conv.updatedAt ?? conv.createdAt,
+					format: "compact"
+				}),
 				children: conv.title || t.untitled
 			})]
 		})
@@ -44,7 +46,6 @@ function ChatSidebar({ actions = true, top }) {
 	const { adapter, navigation, activeConversationId, conversations, sidebar, sidebarPresentation, drawerOpen, setSidebar, setDrawerOpen, toggleSidebar, isLoading, loadConversations, clearCurrentConversation } = useChat();
 	const attachmentsAvailable = !!adapter.attachments;
 	const { menuItems, openMenu, overlays } = useConversationActions();
-	const { compact } = useRelativeTime();
 	const drawer = sidebarPresentation === "drawer";
 	const sidebarCollapsed = !drawer && sidebar !== "expanded";
 	const closeDrawer = () => setDrawerOpen(false);
@@ -107,13 +108,15 @@ function ChatSidebar({ actions = true, top }) {
 		renderRow: (conv) => /* @__PURE__ */ jsx(ConversationRow, {
 			conv,
 			isCurrent: activeConversationId === conv.id,
-			updated: compact(conv.updatedAt ?? conv.createdAt),
 			menuItems: menuItems(conv),
 			openMenu,
 			onOpen: closeDrawer
 		}),
 		loading: isLoading,
-		placeholder: /* @__PURE__ */ jsx(SidebarPlaceholder, { children: conversations.length === 0 ? tSidebar.noConversations : strings.chrome.noMatches }),
+		placeholder: /* @__PURE__ */ jsx(EmptyState, {
+			variant: "bare",
+			title: conversations.length === 0 ? tSidebar.noConversations : strings.chrome.noMatches
+		}),
 		cycle: {
 			current: filteredConversations.find((conv) => conv.id === activeConversationId),
 			onSelect: (conv) => navigation.toConversation(conv.id)
@@ -125,8 +128,8 @@ function ChatSidebar({ actions = true, top }) {
 				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: 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: [/* @__PURE__ */ jsx(NewChatIcon, { 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, {
@@ -134,30 +137,19 @@ function ChatSidebar({ actions = true, top }) {
 				className: "flex items-center h-9 px-2 gap-3 rounded-lg transition-colors hover:chat-tint",
 				title: tSidebar.attachments,
 				onClick: closeDrawer,
-				children: [/* @__PURE__ */ jsx(FaRegFileImage, { className: "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: [/* @__PURE__ */ jsx(ImageIcon, { 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
 				})]
 			})]
 		}), !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)"
-				})]
+			children: /* @__PURE__ */ jsx(SearchInput, {
+				ref: searchInputRef,
+				value: search,
+				onValueChange: setSearch,
+				label: strings.chrome.searchLabel,
+				placeholder: strings.chrome.searchPlaceholder
 			})
 		})] })] }),
 		footer: /* @__PURE__ */ jsx(ManageProvidersLink, {})

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

@@ -1,6 +1,6 @@
 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
+ *  little above center, 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, }: {

package/dist/ai/components/ChatStage.js

@@ -1,7 +1,7 @@
 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
+*  little above center, 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 }) {
@@ -12,7 +12,7 @@ function ChatStage({ heading, subheading, children }) {
 			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)",
+					className: "text-[1.75rem] leading-tight font-medium tracking-[-0.02em] text-balance text-(--theme-app)",
 					children: heading
 				}), subheading && /* @__PURE__ */ jsx("p", {
 					className: "mt-2 text-sm theme-muted-text",

package/dist/ai/components/ComposerChrome.js

@@ -1,5 +1,4 @@
-import { IoSettingsOutline } from "../../icons/io5/IoSettingsOutline.js";
-import { PiPlugsConnectedFill } from "../../icons/pi/PiPlugsConnectedFill.js";
+import { ConnectIcon, SettingsIcon } from "../../icons.js";
 import { useChatConfig } from "../core/config.js";
 import AllocationSelector from "./AllocationSelector.js";
 import ModelSelector from "./ModelSelector.js";
@@ -55,7 +54,7 @@ function ManageProvidersLink() {
 		},
 		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", {
+		children: [/* @__PURE__ */ jsx(SettingsIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
 			className: "truncate",
 			children: strings.sidebar.manageProviders
 		})]
@@ -70,7 +69,7 @@ function ConnectToolsLink() {
 			href: extraLinks.connectTools
 		},
 		className: "flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text",
-		children: [/* @__PURE__ */ jsx(PiPlugsConnectedFill, { className: "h-3 w-3" }), strings.sidebar.connectTools]
+		children: [/* @__PURE__ */ jsx(ConnectIcon, { className: "h-3 w-3" }), strings.sidebar.connectTools]
 	});
 }
 //#endregion

package/dist/ai/components/DragOverlay.js

@@ -1,17 +1,19 @@
-import { clsx } from "clsx";
+import { cx } from "../../cx.js";
+import { useChatConfig } from "../core/config.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/DragOverlay.tsx
 function DragOverlay({ className }) {
+	const t = useChatConfig().strings.attachmentUpload;
 	return /* @__PURE__ */ jsx("div", {
-		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),
+		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),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "text-lg font-medium text-blue-600",
-				children: "Drop files here"
+				children: t.dropFilesHere
 			}), /* @__PURE__ */ jsx("p", {
 				className: "text-sm text-blue-500/80",
-				children: "Release to upload"
+				children: t.releaseToUpload
 			})]
 		})
 	});

package/dist/ai/components/ModelSelector.js

@@ -1,13 +1,11 @@
-import { FaChevronDown } from "../../icons/fa/FaChevronDown.js";
-import { FaCloud } from "../../icons/fa/FaCloud.js";
-import { FaExclamationTriangle } from "../../icons/fa/FaExclamationTriangle.js";
-import { FaUndoAlt } from "../../icons/fa/FaUndoAlt.js";
+import { cx } from "../../cx.js";
+import { ChevronDownIcon, CloudIcon, RetryIcon, WarningIcon } from "../../icons.js";
+import { useStrings } from "../../components/Provider.js";
 import { Combobox } from "../../components/Combobox.js";
 import { useChatConfig } from "../core/config.js";
 import { issueDetail, issueLabel, providerIssueFor } from "../core/providerIssues.js";
 import { useChat } from "../core/ChatProvider.js";
 import { chipClassName } from "../ui/chip.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 //#region src/ai/components/ModelSelector.tsx
@@ -23,7 +21,7 @@ function CspIcon({ cspKind, className }) {
 	const { slots } = useChatConfig();
 	const custom = slots.providerIcon?.(cspKind, className);
 	if (custom) return /* @__PURE__ */ jsx(Fragment, { children: custom });
-	return /* @__PURE__ */ jsx(FaCloud, { className: clsx("text-purple-500", className) });
+	return /* @__PURE__ */ jsx(CloudIcon, { className: cx("text-purple-500", className) });
 }
 function getProviderKeyFromModelId(modelId) {
 	const idx = modelId.indexOf("/");
@@ -55,13 +53,14 @@ function groupModelsByProvider(models) {
 function ModelSelector({ targetSession }) {
 	const { providers, models, unreachableSessions, providerIssues, selectedProvider, setSelectedProvider, isLoadingModels, hasLoadedModels, modelsError, refreshModels, currentUser } = useChat();
 	const { strings } = useChatConfig();
+	const { common } = useStrings();
 	const t = strings.modelPicker;
 	const targetSessionFound = !!targetSession && models.some((m) => m.id.startsWith(`session:${targetSession}/`));
 	const targetSessionStatus = !targetSession ? null : isLoadingModels ? "connecting" : hasLoadedModels && !targetSessionFound ? "offline" : null;
 	const groups = useMemo(() => {
 		const status = (label, description) => ({
 			label,
-			icon: /* @__PURE__ */ jsx(FaCloud, { className: "h-3 w-3 text-amber-500" }),
+			icon: /* @__PURE__ */ jsx(CloudIcon, { className: "h-3 w-3 text-amber-500" }),
 			description,
 			items: []
 		});
@@ -106,20 +105,20 @@ function ModelSelector({ targetSession }) {
 		t
 	]);
 	if (isLoadingModels && models.length === 0 && !targetSession) return /* @__PURE__ */ jsx("span", {
-		className: clsx(chipClassName, "cursor-default animate-pulse"),
+		className: cx(chipClassName, "cursor-default animate-pulse"),
 		children: t.loading
 	});
 	if (modelsError && models.length === 0) return /* @__PURE__ */ jsxs("span", {
-		className: clsx(chipClassName, "cursor-default text-(--theme-error)"),
+		className: cx(chipClassName, "cursor-default text-(--theme-error)"),
 		children: [t.failed, /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => refreshModels(),
-			className: "flex items-center gap-1 text-xs text-(--theme-element) hover:underline",
-			children: [/* @__PURE__ */ jsx(FaUndoAlt, { className: "h-2.5 w-2.5" }), t.retry]
+			className: "flex items-center gap-1 text-xs text-(--theme-accent) hover:underline",
+			children: [/* @__PURE__ */ jsx(RetryIcon, { className: "h-2.5 w-2.5" }), common.retry]
 		})]
 	});
 	if (groups.length === 0 && hasLoadedModels) return /* @__PURE__ */ jsx("span", {
-		className: clsx(chipClassName, "cursor-default"),
+		className: cx(chipClassName, "cursor-default"),
 		children: t.none
 	});
 	const selected = models.find((m) => m.id === selectedProvider);
@@ -144,11 +143,11 @@ function ModelSelector({ targetSession }) {
 					className: "max-w-[45%] shrink-0 truncate text-xs",
 					children: selected.provider
 				}),
-				issue && /* @__PURE__ */ jsx(FaExclamationTriangle, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" })
+				issue && /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" })
 			] }) : /* @__PURE__ */ jsx("span", {
-				className: clsx("truncate", targetSessionStatus === "connecting" && "animate-pulse"),
+				className: cx("truncate", targetSessionStatus === "connecting" && "animate-pulse"),
 				children: targetSessionStatus === "connecting" ? t.connecting : t.select
-			}), /* @__PURE__ */ jsx(FaChevronDown, { className: "h-3 w-3 shrink-0" })]
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3 shrink-0" })]
 		})
 	});
 }

package/dist/ai/components/PastedText.js

@@ -1,42 +1,46 @@
-import { FiFile } from "../../icons/fi/FiFile.js";
-import { FiX } from "../../icons/fi/FiX.js";
-import { ImSpinner5 } from "../../icons/im/ImSpinner5.js";
+import { cx } from "../../cx.js";
+import { FileIcon, RemoveIcon } from "../../icons.js";
+import { Loader } from "../../components/Loader.js";
+import { formatBytes } from "../../format.js";
 import { useChatConfig } from "../core/config.js";
-import { formatFileSize } from "../utils.js";
 import Markdown from "../ui/Markdown.js";
 import { fencePaste } from "../core/pasteLanguage.js";
 import { splitPastes } from "../core/pastes.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
 //#region src/ai/components/PastedText.tsx
 /** A paste sent, or about to be sent, as its saved file. */
 function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
 	const t = useChatConfig().strings.paste;
-	const detail = error ?? (saving ? t.saving : `${t.lines(lines)} · ${formatFileSize(bytes)}`);
+	const detail = error ?? (saving ? t.saving : `${t.lines(lines)} · ${formatBytes(bytes)}`);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "paste-file-card",
-		className: clsx("inline-flex max-w-full items-center gap-2.5 rounded-xl px-3 py-2 align-top whitespace-normal", "bg-(--theme-panel-bg)", error ? "border border-red-500" : "chat-hairline"),
+		className: cx("inline-flex max-w-full items-center gap-2.5 rounded-xl px-3 py-2 align-top whitespace-normal", "bg-(--theme-panel-bg)", error ? "border border-red-500" : "chat-hairline"),
 		children: [
-			/* @__PURE__ */ jsx(FiFile, { className: "h-5 w-5 flex-shrink-0 theme-muted-text" }),
+			/* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 flex-shrink-0 theme-muted-text" }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 text-left leading-tight",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "truncate text-sm font-medium theme-text",
 					children: id ? `paste-${id}.txt` : t.title
 				}), /* @__PURE__ */ jsx("div", {
-					className: clsx("truncate text-xs", error ? "text-red-500" : "theme-muted-text"),
+					className: cx("truncate text-xs", error ? "text-red-500" : "theme-muted-text"),
 					children: detail
 				})]
 			}),
-			saving && /* @__PURE__ */ jsx(ImSpinner5, { className: "h-3.5 w-3.5 flex-shrink-0 animate-spin theme-muted-text" }),
+			saving && /* @__PURE__ */ jsx(Loader, {
+				inline: true,
+				decorative: true,
+				size: 14,
+				color: "var(--theme-muted-text-color)"
+			}),
 			onRemove && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: onRemove,
 				"aria-label": t.remove,
 				title: t.remove,
 				className: "flex-shrink-0 rounded p-0.5 theme-muted-text hover:theme-text",
-				children: /* @__PURE__ */ jsx(FiX, { className: "h-3.5 w-3.5" })
+				children: /* @__PURE__ */ jsx(RemoveIcon, { className: "h-3.5 w-3.5" })
 			})
 		]
 	});
@@ -48,7 +52,7 @@ function UserMessageText({ content, pastes }) {
 	if (!pastes?.length) return /* @__PURE__ */ jsx(Fragment, { children: content });
 	const segments = splitPastes(content, pastes);
 	const shows = (seg) => typeof seg !== "string" || seg.trim() !== "";
-	const blockSpacing = (i) => clsx(segments.slice(0, i).some(shows) ? "mt-2.5" : "mt-0", segments.slice(i + 1).some(shows) ? "mb-2.5" : "mb-0");
+	const blockSpacing = (i) => cx(segments.slice(0, i).some(shows) ? "mt-2.5" : "mt-0", segments.slice(i + 1).some(shows) ? "mb-2.5" : "mb-0");
 	return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, i) => {
 		if (typeof segment === "string") {
 			let text = segment;
@@ -57,11 +61,11 @@ function UserMessageText({ content, pastes }) {
 			return text ? /* @__PURE__ */ jsx(Fragment$1, { children: text }, i) : null;
 		}
 		if (segment.inline && segment.text !== void 0) return /* @__PURE__ */ jsx("span", {
-			className: clsx("chat-paste-code block", blockSpacing(i)),
+			className: cx("chat-paste-code block", blockSpacing(i)),
 			children: /* @__PURE__ */ jsx(Markdown, { children: fencePaste(segment.text) })
 		}, i);
 		return /* @__PURE__ */ jsx("span", {
-			className: clsx("flex [&>*]:flex-1", blockSpacing(i)),
+			className: cx("flex [&>*]:flex-1", blockSpacing(i)),
 			children: /* @__PURE__ */ jsx(PasteFileCard, {
 				id: segment.id,
 				lines: segment.lines,

package/dist/ai/components/ProviderIssueBanner.js

@@ -1,5 +1,4 @@
-import { FaExclamationTriangle } from "../../icons/fa/FaExclamationTriangle.js";
-import { IoSettingsOutline } from "../../icons/io5/IoSettingsOutline.js";
+import { SettingsIcon, WarningIcon } from "../../icons.js";
 import { useChatConfig } from "../core/config.js";
 import { issueDetail, providerIssueFor } from "../core/providerIssues.js";
 import { useChat } from "../core/ChatProvider.js";
@@ -22,7 +21,7 @@ function ProviderIssueBanner() {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-4 mt-2 flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20",
 		children: [
-			/* @__PURE__ */ jsx(FaExclamationTriangle, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }),
+			/* @__PURE__ */ jsx(WarningIcon, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex-1 min-w-0",
 				children: [/* @__PURE__ */ jsx("p", {
@@ -39,7 +38,7 @@ function ProviderIssueBanner() {
 					href: settingsHref
 				},
 				className: "flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-amber-700 transition-colors hover:bg-amber-500/10",
-				children: [/* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-3.5 w-3.5" }), strings.modelPicker.manageProvider]
+				children: [/* @__PURE__ */ jsx(SettingsIcon, { className: "h-3.5 w-3.5" }), strings.modelPicker.manageProvider]
 			})
 		]
 	});

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

@@ -1,12 +1,18 @@
 import type { ReactNode } from 'react';
-/** The line a turn's reasoning folds under. It opens the reasoning in place,
- *  above the answer it led to, rather than in a panel the eye has to cross
- *  the page to read. */
-export declare function ReasoningToggle({ open, onToggle, shimmer, children, }: {
-    open: boolean;
-    onToggle: () => void;
+/** A turn's reasoning, folded under a line such as "Thought for 5s". It opens
+ *  in place, above the answer it led to, rather than in a panel the eye has to
+ *  cross the page to read; with `onOpenPanel` the host shows it elsewhere
+ *  instead. */
+export declare function Reasoning({ label, shimmer, open, onOpenChange, onOpenPanel, preview, children, }: {
+    label: ReactNode;
     /** While the model is still thinking the label shimmers. */
     shimmer?: boolean;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Shows the reasoning in the host's own panel in place of opening it here. */
+    onOpenPanel?: (() => void) | undefined;
+    /** Shown under the folded line, such as the latest lines while it streams. */
+    preview?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;
 /** The reasoning itself: smaller and quieter than the answer, hung off a