@parallelworks/ui 0.44.0 → 0.45.0

package/dist/ai/components/BranchNavigator.js

@@ -1,5 +1,4 @@
-import { FaAngleLeft } from "../../icons/fa/FaAngleLeft.js";
-import { FaAngleRight } from "../../icons/fa/FaAngleRight.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../icons.js";
 import { useChatConfig } from "../core/config.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
@@ -34,7 +33,7 @@ function BranchNavigator({ messages, currentMessageId, onNavigate }) {
 				className: "p-1.5 rounded-md transition-colors enabled:hover:chat-tint enabled:hover:theme-text disabled:opacity-30 disabled:cursor-not-allowed",
 				title: t.previous,
 				"aria-label": t.previous,
-				children: /* @__PURE__ */ jsx(FaAngleLeft, { className: "w-3.5 h-3.5" })
+				children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-3.5 h-3.5" })
 			}),
 			/* @__PURE__ */ jsxs("span", {
 				className: "min-w-[3ch] text-center tabular-nums",
@@ -51,7 +50,7 @@ function BranchNavigator({ messages, currentMessageId, onNavigate }) {
 				className: "p-1.5 rounded-md transition-colors enabled:hover:chat-tint enabled:hover:theme-text disabled:opacity-30 disabled:cursor-not-allowed",
 				title: t.next,
 				"aria-label": t.next,
-				children: /* @__PURE__ */ jsx(FaAngleRight, { className: "w-3.5 h-3.5" })
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })
 			})
 		]
 	});

package/dist/ai/components/ChatEmptyState.js

@@ -1,6 +1,6 @@
-import { FaCloud } from "../../icons/fa/FaCloud.js";
-import { FaPlus } from "../../icons/fa/FaPlus.js";
+import { AddIcon, CloudIcon } from "../../icons.js";
 import { keyedByContent } from "../../components/keys.js";
+import { useStrings } from "../../components/Provider.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import BlockedGroupBanner from "./BlockedGroupBanner.js";
@@ -20,6 +20,7 @@ function pickRandom(arr, count) {
 }
 function ChatEmptyState({ targetSession }) {
 	const { extraLinks, LinkComponent, slots, suggestedPrompts, strings } = useChatConfig();
+	const { common } = useStrings();
 	const t = strings.emptyState;
 	const tInput = strings.input;
 	const { adapter, currentUser, models, loadProviders, loadConversations, sendMessage, isLoading, isLoadingModels, hasLoadedModels, clearCurrentConversation, setSelectedProvider, refreshModels } = useChat();
@@ -81,7 +82,7 @@ function ChatEmptyState({ targetSession }) {
 					children: /* @__PURE__ */ jsxs(NoticeCard, {
 						tone: "warning",
 						onDismiss: () => setSessionBannerDismissed(true),
-						dismissLabel: strings.chrome.dismiss,
+						dismissLabel: common.dismiss,
 						children: [
 							/* @__PURE__ */ jsx("span", {
 								className: "block font-medium",
@@ -95,7 +96,7 @@ function ChatEmptyState({ targetSession }) {
 								type: "button",
 								onClick: () => refreshModels(),
 								className: "mt-1 font-medium underline-offset-2 hover:underline",
-								children: t.retry
+								children: common.retry
 							})
 						]
 					})
@@ -112,7 +113,7 @@ function ChatEmptyState({ targetSession }) {
 							hasLoadedModels && models.length === 0 && /* @__PURE__ */ jsxs("div", {
 								className: "mx-auto mb-6 flex max-w-md flex-col items-center gap-3 px-8 text-center",
 								children: [
-									/* @__PURE__ */ jsx(FaCloud, { className: "h-10 w-10 theme-muted-text opacity-60" }),
+									/* @__PURE__ */ jsx(CloudIcon, { className: "h-10 w-10 theme-muted-text opacity-60" }),
 									/* @__PURE__ */ jsx("p", {
 										className: "text-lg font-medium theme-text",
 										children: t.noProvidersTitle
@@ -126,8 +127,8 @@ function ChatEmptyState({ targetSession }) {
 											kind: "external",
 											href: extraLinks.addProvider
 										},
-										className: "mt-1 inline-flex items-center gap-2 px-4 py-2 rounded-full transition-opacity text-sm font-medium theme-element hover:opacity-90",
-										children: [/* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }), t.addProvider]
+										className: "mt-1 inline-flex items-center gap-2 px-4 py-2 rounded-full transition-opacity text-sm font-medium theme-accent hover:opacity-90",
+										children: [/* @__PURE__ */ jsx(AddIcon, { className: "h-3 w-3" }), t.addProvider]
 									})
 								]
 							}),

package/dist/ai/components/ChatInput.js

@@ -1,6 +1,5 @@
-import { FaArrowUp } from "../../icons/fa/FaArrowUp.js";
-import { FaStop } from "../../icons/fa/FaStop.js";
-import { GoPlus } from "../../icons/go/GoPlus.js";
+import { cx } from "../../cx.js";
+import { AddIcon, ArrowUpIcon, StopIcon } from "../../icons.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import AttachmentUpload from "./AttachmentUpload.js";
@@ -11,7 +10,6 @@ import DragOverlay from "./DragOverlay.js";
 import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
 import { usePasteCards } from "./usePasteCards.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 //#region src/ai/components/ChatInput.tsx
@@ -35,10 +33,10 @@ function AttachButton({ open, disabled, label, onClick }) {
 		onClick,
 		disabled,
 		"aria-expanded": open,
-		className: clsx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors", open ? "theme-text chat-tint-strong" : "theme-muted-text hover:theme-text hover:chat-tint", "disabled:opacity-50 disabled:cursor-not-allowed"),
+		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors", open ? "theme-text chat-tint-strong" : "theme-muted-text hover:theme-text hover:chat-tint", "disabled:opacity-50 disabled:cursor-not-allowed"),
 		"aria-label": label,
 		title: label,
-		children: /* @__PURE__ */ jsx(GoPlus, { className: clsx("h-5 w-5 transition-transform duration-200", open && "rotate-45") })
+		children: /* @__PURE__ */ jsx(AddIcon, { className: cx("h-5 w-5 transition-transform duration-200", open && "rotate-45") })
 	});
 }
 function SendButton({ onClick, enabled, emphasised, label, testId }) {
@@ -47,10 +45,10 @@ function SendButton({ onClick, enabled, emphasised, label, testId }) {
 		onClick,
 		disabled: !enabled,
 		"data-testid": testId,
-		className: clsx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 active:scale-95", emphasised ? "theme-element hover:opacity-90" : "chat-send-idle", !enabled && "cursor-not-allowed active:scale-100"),
+		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 active:scale-95", emphasised ? "theme-accent hover:opacity-90" : "chat-send-idle", !enabled && "cursor-not-allowed active:scale-100"),
 		"aria-label": label,
 		title: label,
-		children: /* @__PURE__ */ jsx(FaArrowUp, { className: "h-4 w-4" })
+		children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-4 w-4" })
 	});
 }
 /** A host-driven turn stands in for the provider's stream and queue. */
@@ -190,10 +188,10 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 		type: "button",
 		onClick: stopStreaming,
 		disabled: turn?.stopping,
-		className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-(--theme-panel) text-(--theme-panel-bg) transition-opacity hover:opacity-85 disabled:opacity-50",
+		className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-(--theme-app) text-(--theme-panel-bg) transition-opacity hover:opacity-85 disabled:opacity-50",
 		"aria-label": t.stopGenerating,
 		title: t.stopGenerating,
-		children: /* @__PURE__ */ jsx(FaStop, { className: "h-3 w-3" })
+		children: /* @__PURE__ */ jsx(StopIcon, { className: "h-3 w-3" })
 	}) : /* @__PURE__ */ jsx(SendButton, {
 		onClick: handleSubmit,
 		enabled: canSend,
@@ -249,7 +247,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 								})
 							}),
 							/* @__PURE__ */ jsxs("div", {
-								className: clsx(!toolbar && "flex items-end gap-2 pr-2 pb-2"),
+								className: cx(!toolbar && "flex items-end gap-2 pr-2 pb-2"),
 								children: [/* @__PURE__ */ jsx("div", {
 									className: "max-h-[200px] min-w-0 flex-1 overflow-y-auto",
 									children: /* @__PURE__ */ jsx("textarea", {
@@ -263,7 +261,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 										"aria-label": inputLabel ?? effectivePlaceholder,
 										disabled,
 										rows: 1,
-										className: clsx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
+										className: cx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
 									})
 								}), !toolbar && action]
 							}),

package/dist/ai/components/ChatLayout.js

@@ -1,10 +1,10 @@
+import { cx } from "../../cx.js";
 import { useChatConfig } from "../core/config.js";
 import { useReportSidebarPresentation } from "../core/sidebarState.js";
 import { useChat } from "../core/ChatProvider.js";
 import { KeyboardShortcutsProvider } from "../core/KeyboardShortcutsProvider.js";
 import { SidebarToggle } from "../ui/sidebar.js";
 import ChatSidebar from "./ChatSidebar.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
 //#region src/ai/components/ChatLayout.tsx
@@ -51,9 +51,9 @@ function ConversationLayout({ sidebar, children, sidebarMode = "inline", drawerB
 	const { strings } = useChatConfig();
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: clsx("flex h-full", drawer && "relative overflow-hidden"),
+		className: cx("flex h-full", drawer && "relative overflow-hidden"),
 		children: [sidebar, /* @__PURE__ */ jsxs("main", {
-			className: clsx("flex min-w-0 flex-1 flex-col", CHAT_COLUMN_SCOPE),
+			className: cx("flex min-w-0 flex-1 flex-col", CHAT_COLUMN_SCOPE),
 			children: [drawer && (drawerToggle || drawerBar) && /* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center gap-2 bg-(--theme-panel-bg) px-2 pt-2",
 				children: [drawerToggle && /* @__PURE__ */ jsx(SidebarToggle, {

package/dist/ai/components/ChatMessage.js

@@ -1,31 +1,22 @@
-import { BiError } from "../../icons/bi/BiError.js";
-import { FaCheck } from "../../icons/fa/FaCheck.js";
-import { FaEdit } from "../../icons/fa/FaEdit.js";
-import { FaUndoAlt } from "../../icons/fa/FaUndoAlt.js";
-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 { cx } from "../../cx.js";
+import { CheckIcon, CopyIcon, DownloadIcon, EditIcon, ErrorIcon, FileIcon, RetryIcon } from "../../icons.js";
 import { safeUrl } from "../../safeUrl.js";
-import { durationToAbsHumanDuration } from "../../duration.js";
+import { useStrings } from "../../components/Provider.js";
+import { useCopy } from "../../components/useCopy.js";
+import { Avatar } from "../../components/Avatar.js";
+import { formatBytes, formatDuration } from "../../format.js";
+import { RelativeTime } from "../../components/relativeTime.js";
 import { useChatConfig } from "../core/config.js";
-import { formatFileSize } from "../utils.js";
 import Markdown from "../ui/Markdown.js";
 import { chatProseClasses } from "../ui/prose.js";
-import { ReasoningBody, ReasoningToggle } from "./Reasoning.js";
+import { Reasoning } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import BranchNavigator from "./BranchNavigator.js";
 import { UserMessageText } from "./PastedText.js";
-import { Avatar } from "../ui/Avatar.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef, useState } from "react";
-import { DateTime, Duration } from "luxon";
+import { DateTime } from "luxon";
 //#region src/ai/components/ChatMessage.tsx
-function formatDuration(ms) {
-	if (!ms) return "";
-	return durationToAbsHumanDuration(Duration.fromMillis(ms));
-}
 var COLLAPSE_THRESHOLD = 680;
 function parseTimestamp(iso) {
 	if (!iso) return null;
@@ -54,8 +45,9 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	const toolCallCount = message.parts?.filter((p) => p.kind === "tool_call").length ?? 0;
 	const showReasoningButton = !isUser && !isStreaming && hasReasoning;
 	const showTurnDurationLabel = !isUser && !isStreaming && !hasReasoning && (!!message.reasoningDuration || toolCallCount > 0);
-	const t = useChatConfig().strings.messageMeta;
-	const [copied, setCopied] = useState(false);
+	const { messageMeta: t, thinking: tThinking } = useChatConfig().strings;
+	const { common } = useStrings();
+	const { copy, copied } = useCopy();
 	const [showActions, setShowActions] = useState(false);
 	const [editContent, setEditContent] = useState(message.content || "");
 	const textareaRef = useRef(null);
@@ -102,7 +94,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	};
 	const hasParts = !!message.parts?.length;
 	if (hasParts && !message.content) return /* @__PURE__ */ jsx("div", {
-		className: clsx("group py-3 w-full", !flush && "px-4"),
+		className: cx("group py-3 w-full", !flush && "px-4"),
 		children: /* @__PURE__ */ jsx(AgentMessageParts, {
 			message,
 			isStreaming,
@@ -115,15 +107,11 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	const totalTokens = message.tokensUsed?.total_tokens;
 	const collapsed = !isUser && collapsible && !expanded && !isStreaming && !latest;
 	const copyToClipboard = async () => {
-		if (message.content) {
-			await navigator.clipboard.writeText(message.content);
-			setCopied(true);
-			setTimeout(() => setCopied(false), 2e3);
-		}
+		if (message.content) await copy(message.content, { quiet: true });
 	};
 	return /* @__PURE__ */ jsx("div", {
 		role: "none",
-		className: clsx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "px-4"),
+		className: cx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "px-4"),
 		onMouseEnter: () => setShowActions(true),
 		onMouseLeave: () => setShowActions(false),
 		onFocus: () => setShowActions(true),
@@ -142,34 +130,36 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 				children: [/* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onCancelEdit,
-					className: "px-4 py-1.5 text-sm font-medium rounded-full transition-colors chat-tint hover:chat-tint-strong text-(--theme-panel)",
-					children: t.cancel
+					className: "px-4 py-1.5 text-sm font-medium rounded-full transition-colors chat-tint hover:chat-tint-strong text-(--theme-app)",
+					children: common.cancel
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: handleSave,
 					disabled: !editContent.trim(),
-					className: "px-4 py-1.5 text-sm font-medium rounded-full transition-colors hover:opacity-85 disabled:opacity-50 disabled:cursor-not-allowed bg-(--theme-panel) text-(--theme-panel-bg)",
-					children: t.send
+					className: "px-4 py-1.5 text-sm font-medium rounded-full transition-colors hover:opacity-85 disabled:opacity-50 disabled:cursor-not-allowed bg-(--theme-app) text-(--theme-panel-bg)",
+					children: common.send
 				})]
 			})]
 		}) : /* @__PURE__ */ jsx("div", {
-			className: clsx("flex gap-3 w-full", isRightAligned ? "flex-row-reverse" : "flex-row"),
+			className: cx("flex gap-3 w-full", isRightAligned ? "flex-row-reverse" : "flex-row"),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: clsx("flex-1 min-w-0 space-y-1", isRightAligned && "relative flex flex-col items-end"),
+				className: cx("flex-1 min-w-0 space-y-1", isRightAligned && "relative flex flex-col items-end"),
 				children: [
-					showReasoningButton && /* @__PURE__ */ jsxs("div", {
+					showReasoningButton && /* @__PURE__ */ jsx("div", {
 						className: "mb-2",
-						children: [/* @__PURE__ */ jsx(ReasoningToggle, {
+						children: /* @__PURE__ */ jsx(Reasoning, {
+							label: message.reasoningDuration ? tThinking.thoughtFor(formatDuration(message.reasoningDuration)) : tThinking.thoughtProcess,
 							open: reasoningOpen,
-							onToggle: () => onOpenReasoning ? onOpenReasoning(message.reasoning || "", message.reasoningDuration ?? null) : setReasoningOpen((o) => !o),
-							children: message.reasoningDuration ? `Thought for ${formatDuration(message.reasoningDuration)}` : "Thought process"
-						}), reasoningOpen && /* @__PURE__ */ jsx(ReasoningBody, { children: /* @__PURE__ */ jsx(Markdown, { children: message.reasoning || "" }) })]
+							onOpenChange: setReasoningOpen,
+							onOpenPanel: onOpenReasoning && (() => onOpenReasoning(message.reasoning || "", message.reasoningDuration ?? null)),
+							children: /* @__PURE__ */ jsx(Markdown, { children: message.reasoning || "" })
+						})
 					}),
 					showTurnDurationLabel && /* @__PURE__ */ jsx("div", {
 						className: "mb-2",
 						children: /* @__PURE__ */ jsx("div", {
 							className: "flex items-center gap-x-1.5 text-sm theme-muted-text",
-							children: /* @__PURE__ */ jsx("span", { children: message.reasoningDuration ? `Thought for ${formatDuration(message.reasoningDuration)}` : `Ran ${toolCallCount} tool ${toolCallCount === 1 ? "call" : "calls"}` })
+							children: /* @__PURE__ */ jsx("span", { children: message.reasoningDuration ? tThinking.thoughtFor(formatDuration(message.reasoningDuration)) : tThinking.ranToolCalls(toolCallCount) })
 						})
 					}),
 					!isUser && hasParts && /* @__PURE__ */ jsx("div", {
@@ -187,25 +177,26 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 					message.content ? otherAuthor ? /* @__PURE__ */ jsxs("div", {
 						className: "flex items-end gap-2",
 						children: [/* @__PURE__ */ jsx(Avatar, {
-							src: otherAuthor.avatarUrl ?? void 0,
+							src: otherAuthor.avatarUrl,
 							name: otherAuthor.name || otherAuthor.username,
-							className: "flex-shrink-0 mb-0.5"
+							size: "sm",
+							className: "mb-0.5"
 						}), /* @__PURE__ */ jsx("div", {
-							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"),
+							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"),
 							children: /* @__PURE__ */ jsx(UserMessageText, {
 								content: message.content,
 								pastes: message.pastes
 							})
 						})]
 					}) : isUser ? /* @__PURE__ */ jsx("div", {
-						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"),
+						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"),
 						children: /* @__PURE__ */ jsx(UserMessageText, {
 							content: message.content,
 							pastes: message.pastes
 						})
 					}) : /* @__PURE__ */ jsx("div", {
 						ref: contentRef,
-						className: clsx(chatProseClasses, collapsed && "chat-message-clamp"),
+						className: cx(chatProseClasses, collapsed && "chat-message-clamp"),
 						children: /* @__PURE__ */ jsx(Markdown, {
 							isStreaming,
 							children: message.content
@@ -215,7 +206,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 						type: "button",
 						onClick: () => setExpanded((e) => !e),
 						className: "text-xs font-medium theme-muted-text hover:theme-text transition-colors",
-						children: expanded ? t.showLess : t.showMore
+						children: expanded ? common.showLess : common.showMore
 					}),
 					message.stopped && !isStreaming && /* @__PURE__ */ jsx("span", {
 						className: "inline-flex items-center mt-1 text-[11px] italic theme-muted-text",
@@ -224,7 +215,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 					hasError && /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2 mt-2 p-3 rounded-lg bg-red-500/10 border border-red-500/30",
 						children: [
-							/* @__PURE__ */ jsx(BiError, { className: "w-4 h-4 text-red-600 flex-shrink-0" }),
+							/* @__PURE__ */ jsx(ErrorIcon, { className: "w-4 h-4 text-red-600 flex-shrink-0" }),
 							/* @__PURE__ */ jsx("span", {
 								className: "text-sm text-red-700 flex-1",
 								children: message.error
@@ -233,7 +224,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 								type: "button",
 								onClick: () => onRetry(message.id),
 								className: "flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-700 hover:bg-red-500/15 rounded transition-colors",
-								children: [/* @__PURE__ */ jsx(FaUndoAlt, { className: "w-3 h-3" }), t.retry]
+								children: [/* @__PURE__ */ jsx(RetryIcon, { className: "w-3 h-3" }), common.retry]
 							})
 						]
 					}),
@@ -261,7 +252,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 								onClick: () => onOpenAttachment ? onOpenAttachment(att) : triggerDownload(downloadUrl, att.filename || "File"),
 								className: "inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg bg-(--theme-muted-panel-bg) hover:theme-hover transition-colors cursor-pointer",
 								children: [
-									/* @__PURE__ */ jsx(FiFile, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+									/* @__PURE__ */ jsx(FileIcon, { className: "w-3.5 h-3.5 flex-shrink-0" }),
 									/* @__PURE__ */ jsx("span", {
 										className: "truncate max-w-[150px]",
 										children: att.filename || "File"
@@ -270,11 +261,11 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 										className: "theme-muted-text",
 										children: [
 											"(",
-											formatFileSize(att.size),
+											formatBytes(att.size),
 											")"
 										]
 									}) : null,
-									/* @__PURE__ */ jsx(FiDownload, { className: "w-3 h-3 flex-shrink-0" })
+									/* @__PURE__ */ jsx(DownloadIcon, { className: "w-3 h-3 flex-shrink-0" })
 								]
 							}, att.id);
 							return /* @__PURE__ */ jsxs("div", {
@@ -285,7 +276,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 									style: { cursor: "pointer" }
 								} : {},
 								children: [
-									/* @__PURE__ */ jsx(FiFile, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+									/* @__PURE__ */ jsx(FileIcon, { className: "w-3.5 h-3.5 flex-shrink-0" }),
 									/* @__PURE__ */ jsx("span", {
 										className: "truncate max-w-[150px]",
 										children: att.filename || "File"
@@ -294,7 +285,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 										className: "theme-muted-text",
 										children: [
 											"(",
-											formatFileSize(att.size),
+											formatBytes(att.size),
 											")"
 										]
 									}) : null
@@ -303,28 +294,28 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 						})
 					}),
 					!isStreaming && !isEditing && /* @__PURE__ */ jsxs("div", {
-						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")),
+						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")),
 						children: [
 							/* @__PURE__ */ jsx("button", {
 								type: "button",
 								onClick: copyToClipboard,
 								className: "p-1.5 rounded-md hover:chat-tint theme-muted-text hover:theme-text transition-colors",
 								title: t.copy,
-								children: copied ? /* @__PURE__ */ jsx(FaCheck, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ jsx(FiCopy, { className: "w-4 h-4" })
+								children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "w-4 h-4" })
 							}),
 							isUser && !isOtherUser && onEdit && /* @__PURE__ */ jsx("button", {
 								type: "button",
 								onClick: () => onEdit(message.id),
 								className: "p-1.5 rounded-md hover:chat-tint theme-muted-text hover:theme-text transition-colors",
 								title: t.edit,
-								children: /* @__PURE__ */ jsx(FaEdit, { className: "w-4 h-4" })
+								children: /* @__PURE__ */ jsx(EditIcon, { className: "w-4 h-4" })
 							}),
 							!isUser && onRegenerate && /* @__PURE__ */ jsx("button", {
 								type: "button",
 								onClick: () => onRegenerate(message.id),
 								className: "p-1.5 rounded-md hover:chat-tint theme-muted-text hover:theme-text transition-colors",
 								title: t.regenerate,
-								children: /* @__PURE__ */ jsx(MdRefresh, { className: "w-4 h-4" })
+								children: /* @__PURE__ */ jsx(RetryIcon, { className: "w-4 h-4" })
 							}),
 							!isUser && onNavigateBranch && /* @__PURE__ */ jsx(BranchNavigator, {
 								messages: allMessages,
@@ -332,12 +323,9 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 								onNavigate: onNavigateBranch
 							}),
 							(timestamp || !isUser && (message.model || totalTokens)) && /* @__PURE__ */ jsxs("span", {
-								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"),
+								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"),
 								children: [
-									timestamp && /* @__PURE__ */ jsx("span", {
-										title: timestamp.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
-										children: timestamp.toRelative()
-									}),
+									/* @__PURE__ */ jsx(RelativeTime, { value: timestamp }),
 									!isUser && message.model && /* @__PURE__ */ jsx("span", { children: message.model }),
 									!isUser && totalTokens ? /* @__PURE__ */ jsx("span", {
 										title: message.tokensUsed?.prompt_tokens !== void 0 && message.tokensUsed?.completion_tokens !== void 0 ? t.tokensBreakdown(message.tokensUsed.prompt_tokens, message.tokensUsed.completion_tokens) : void 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 };