@parallelworks/ui 0.44.0 → 0.46.0

package/dist/ai/agent/toolfmt.js

@@ -1,3 +1,4 @@
+import { defaultToolStrings } from "./toolStrings.js";
 //#region src/ai/agent/toolfmt.ts
 var TOOL_HEADERS = {
 	Bash: {
@@ -141,27 +142,17 @@ function fullToolArgs(primary, argsJSON) {
 		totalClip: 0
 	});
 }
-function plural(n, noun) {
-	return `${n} ${pluralNoun(n, noun)}`;
-}
-function pluralNoun(n, noun) {
-	if (n === 1) return noun;
-	if (/(?:s|x|ch|sh)$/.test(noun)) return `${noun}es`;
-	return `${noun}s`;
-}
 var TOOL_OUTPUT_TRUNCATION_MARKER = "\n\n... output truncated to ";
 function trimToolOutputNotice(body) {
 	const i = body.lastIndexOf(TOOL_OUTPUT_TRUNCATION_MARKER);
 	if (i >= 0) return [body.slice(0, i).replace(/\n+$/, ""), true];
 	return [body, false];
 }
-function summarizeToolResult(result) {
+function summarizeToolResult(result, t) {
 	const trimmed = result.replace(/\n+$/, "");
-	if (trimmed.trim() === "") return "(no output)";
+	if (trimmed.trim() === "") return t.noOutput;
 	const lines = trimmed.split("\n");
-	const first = clip((lines[0] ?? "").trim(), 100);
-	if (lines.length > 1) return `${first}  (+${lines.length - 1} lines)`;
-	return first;
+	return t.firstLine(clip((lines[0] ?? "").trim(), 100), lines.length - 1);
 }
 function isErrorResult(text) {
 	return text.trim().startsWith("Error:");
@@ -195,15 +186,14 @@ function contentLines(body) {
 	if (rest === "") return [[], note];
 	return [rest.split("\n"), note];
 }
-function readFileSummary(body) {
-	if (body === "(empty file)") return "Empty file";
-	if (body.startsWith("Read image ")) return "Read image";
+function readFileSummary(body, t) {
+	if (body === "(empty file)") return t.emptyFile;
+	if (body.startsWith("Read image ")) return t.readImage;
 	const [lines, note] = contentLines(body);
 	let more = 0;
 	const m = note.match(/^\.\.\. \(truncated, (\d+) more lines\)/);
 	if (m) more = Number(m[1]);
-	if (more > 0) return `Read ${plural(lines.length, "line")} (${more} more)`;
-	return `Read ${plural(lines.length, "line")}`;
+	return t.readLines(lines.length, more);
 }
 var GREP_CONTENT_PATH = /^(.+?):\d+:/;
 function grepMatchPath(line, lineNums) {
@@ -213,9 +203,9 @@ function grepMatchPath(line, lineNums) {
 	}
 	return GREP_CONTENT_PATH.exec(line)?.[1] ?? null;
 }
-function grepSearchSummary(argsJSON, body) {
-	if (body === "No matches found." || body === "No results after applying offset.") return "No matches";
-	if (body.startsWith(RIPGREP_ERROR_PREFIX)) return summarizeToolResult(body);
+function grepSearchSummary(argsJSON, body, t) {
+	if (body === "No matches found." || body === "No results after applying offset.") return t.noMatches;
+	if (body.startsWith(RIPGREP_ERROR_PREFIX)) return summarizeToolResult(body, t);
 	const [lines, note] = contentLines(body);
 	let outputMode = "";
 	let lineNums = true;
@@ -234,7 +224,7 @@ function grepSearchSummary(argsJSON, body) {
 			matches++;
 			files.add(path);
 		}
-		s = `Found ${plural(matches, "match")} in ${plural(files.size, "file")}`;
+		s = t.foundMatches(matches, files.size);
 	} else if (outputMode === "count") {
 		let total = 0;
 		for (const l of lines) {
@@ -243,17 +233,15 @@ function grepSearchSummary(argsJSON, body) {
 			const n = Number.parseInt(tail, 10);
 			if (!Number.isNaN(n)) total += n;
 		}
-		s = `Found ${plural(total, "match")} in ${plural(lines.length, "file")}`;
-	} else s = `Found ${plural(lines.length, "file")}`;
-	if (note !== "") s += " (truncated)";
-	return s;
+		s = t.foundMatches(total, lines.length);
+	} else s = t.foundFiles(lines.length);
+	return note === "" ? s : t.truncated(s);
 }
-function globSearchSummary(body) {
-	if (body === "No files matched the pattern.") return "No files matched";
+function globSearchSummary(body, t) {
+	if (body === "No files matched the pattern.") return t.noFilesMatched;
 	const [lines, note] = contentLines(body);
-	let s = `Found ${plural(lines.length, "file")}`;
-	if (note !== "") s += " (truncated)";
-	return s;
+	const s = t.foundFiles(lines.length);
+	return note === "" ? s : t.truncated(s);
 }
 function bashExitCode(body) {
 	let i = body.lastIndexOf("\nExit code: ");
@@ -273,60 +261,59 @@ function bashExitCode(body) {
 		true
 	];
 }
-function bashSummary(body) {
-	if (body === "(no output)") return "(no output)";
+function bashSummary(body, t) {
+	if (body === "(no output)") return t.noOutput;
 	const [out, code, ok] = bashExitCode(body);
-	if (!ok) return summarizeToolResult(body);
-	if (out === "") return `Exit ${code}`;
-	return `Exit ${code} · ${plural(out.split("\n").length, "line")}`;
+	if (!ok) return summarizeToolResult(body, t);
+	return t.exitCode(code, out === "" ? 0 : out.split("\n").length);
 }
-function webFetchSummary(body) {
+function webFetchSummary(body, t) {
 	const m = body.match(/^HTTP (\d+)/);
-	if (!m) return summarizeToolResult(body);
+	if (!m) return summarizeToolResult(body, t);
 	const status = Number(m[1]);
 	const sep = body.indexOf("\n\n");
 	if (sep < 0) return clip(body.split("\n")[0] ?? "", 100);
-	return `HTTP ${status} · ${plural(body.slice(sep + 2).split("\n").length, "line")}`;
+	const rest = body.slice(sep + 2);
+	return t.httpStatus(status, rest.split("\n").length);
 }
-function toolSummary(name, args, result, isError, editSummaryFn) {
+function toolSummary(name, args, result, isError, { editSummary, strings: t = defaultToolStrings } = {}) {
 	const [body, spilled] = trimToolOutputNotice(result.replace(/\n+$/, ""));
-	if (isError || body.trim() === "" || isErrorResult(body)) return summarizeToolResult(result);
+	if (isError || body.trim() === "" || isErrorResult(body)) return summarizeToolResult(result, t);
 	let s;
 	switch (name) {
 		case "EditFile":
 		case "WriteFile": {
-			const e = editSummaryFn?.(name, args) ?? "";
-			return e !== "" ? e : summarizeToolResult(result);
+			const e = editSummary?.(name, args, t) ?? "";
+			return e !== "" ? e : summarizeToolResult(result, t);
 		}
 		case "ReadFile":
-			s = readFileSummary(body);
+			s = readFileSummary(body, t);
 			break;
 		case "GrepSearch":
-			s = grepSearchSummary(args, body);
+			s = grepSearchSummary(args, body, t);
 			break;
 		case "GlobSearch":
-			s = globSearchSummary(body);
+			s = globSearchSummary(body, t);
 			break;
 		case "Bash":
-			s = bashSummary(body);
+			s = bashSummary(body, t);
 			break;
 		case "WebFetch":
-			s = webFetchSummary(body);
+			s = webFetchSummary(body, t);
 			break;
-		default: return summarizeToolResult(result);
+		default: return summarizeToolResult(result, t);
 	}
-	if (spilled) s += " (output truncated)";
-	return s;
+	return spilled ? t.outputTruncated(s) : s;
 }
 var ROLLUP_CATEGORIES = [
-	[(n) => n === "GrepSearch" || n === "GlobSearch", (n) => `searched for ${plural(n, "pattern")}`],
-	[(n) => n === "ReadFile", (n) => `read ${plural(n, "file")}`],
-	[(n) => n === "Bash", (n) => `ran ${plural(n, "shell command")}`],
-	[(n) => n === "WebFetch", (n) => `fetched ${plural(n, "URL")}`],
-	[(n) => n === "Skill", (n) => `loaded ${plural(n, "skill")}`],
-	[(n) => n === "SendMessage", (n) => `sent ${plural(n, "message")}`],
-	[(n) => n.startsWith("mcp__"), (n) => `called ${plural(n, "MCP tool")}`],
-	[() => true, (n) => `ran ${plural(n, "tool")}`]
+	[(n) => n === "GrepSearch" || n === "GlobSearch", "searched"],
+	[(n) => n === "ReadFile", "read"],
+	[(n) => n === "Bash", "ranCommands"],
+	[(n) => n === "WebFetch", "fetched"],
+	[(n) => n === "Skill", "loadedSkills"],
+	[(n) => n === "SendMessage", "sentMessages"],
+	[(n) => n.startsWith("mcp__"), "calledMcpTools"],
+	[() => true, "ranTools"]
 ];
 var NON_GROUPABLE_TOOLS = /* @__PURE__ */ new Set([
 	"EditFile",
@@ -337,7 +324,7 @@ var NON_GROUPABLE_TOOLS = /* @__PURE__ */ new Set([
 function isGroupableTool(name) {
 	return !NON_GROUPABLE_TOOLS.has(name);
 }
-function rollupSentence(names) {
+function rollupSentence(names, t = defaultToolStrings) {
 	const counts = ROLLUP_CATEGORIES.map(() => 0);
 	for (const name of names) for (let i = 0; i < ROLLUP_CATEGORIES.length; i++) if (ROLLUP_CATEGORIES[i]?.[0](name)) {
 		counts[i] = (counts[i] ?? 0) + 1;
@@ -348,12 +335,10 @@ function rollupSentence(names) {
 		const n = counts[i] ?? 0;
 		if (n > 0) {
 			const cat = ROLLUP_CATEGORIES[i];
-			if (cat) parts.push(cat[1](n));
+			if (cat) parts.push(t.rollup[cat[1]](n));
 		}
 	}
-	if (parts.length === 0) return "";
-	const s = parts.join(", ");
-	return s.charAt(0).toUpperCase() + s.slice(1);
+	return parts.length === 0 ? "" : t.rollup.sentence(parts);
 }
 var AGENT_COLOR_NAMES = [
 	"blue",
@@ -379,4 +364,4 @@ function agentColorHex(name) {
 	return name ? AGENT_COLOR_HEX[name] ?? null : null;
 }
 //#endregion
-export { AGENT_COLOR_NAMES, agentColorHex, bashExitCode, clip, fullToolArgs, isGroupableTool, plural, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, summarizeToolArgs, toolHeaderFor, toolSummary };
+export { AGENT_COLOR_NAMES, agentColorHex, bashExitCode, clip, fullToolArgs, isGroupableTool, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, summarizeToolArgs, toolHeaderFor, toolSummary };

package/dist/ai/ai.css

@@ -6,8 +6,8 @@
  * on a dark one, from whatever ink the theme (or an org palette) supplies. */
 .chat-ink {
   --chat-ink: light-dark(
-    color-mix(in oklab, var(--theme-panel, #000) 60%, black),
-    color-mix(in oklab, var(--theme-panel, #fff) 75%, white)
+    color-mix(in oklab, var(--theme-app, #000) 60%, black),
+    color-mix(in oklab, var(--theme-app, #fff) 75%, white)
   );
   color: var(--chat-ink);
   --tw-prose-body: var(--chat-ink);
@@ -53,9 +53,9 @@
   font-size: 0.875rem;
   font-family: var(--font-mono, ui-monospace, monospace);
   padding: 0.125em 0.375em;
-  background-color: color-mix(in oklab, var(--theme-panel, #000) 8%, transparent);
+  background-color: color-mix(in oklab, var(--theme-app, #000) 8%, transparent);
   border-radius: 0.25rem;
-  /* Identifiers carry a colour of their own so they read as code at a glance
+  /* Identifiers carry a color of their own so they read as code at a glance
    * without the weight the plugin gives them: the theme's link blue, which
    * every palette already keeps legible on its surfaces. */
   color: var(--theme-link, #2f6fa8);
@@ -110,7 +110,7 @@
  * table reads as part of the answer rather than a widget dropped into it),
  * and the copy/download controls only while the pointer is over the table. */
 .markdown [data-streamdown="table-wrapper"] {
-  --table-line: color-mix(in oklab, var(--theme-panel, #000) 10%, transparent);
+  --table-line: color-mix(in oklab, var(--theme-app, #000) 10%, transparent);
   position: relative;
   display: block;
   background: transparent;
@@ -152,7 +152,7 @@
   font-weight: 600;
   color: inherit;
   background: transparent;
-  border-bottom: 1px solid color-mix(in oklab, var(--theme-panel, #000) 28%, transparent);
+  border-bottom: 1px solid color-mix(in oklab, var(--theme-app, #000) 28%, transparent);
 }
 .markdown [data-streamdown="table"] td {
   padding: 0.4375rem 0.75rem;
@@ -187,7 +187,8 @@
 }
 
 /* Streamdown code blocks: one surface, not a frame around an inset panel.
- * A wash of the ink with a hairline edge holds the language on its top edge,
+ * The theme's code surface, which the syntax colors are solved against, with a
+ * hairline edge holds the language on its top edge,
  * the copy and download controls quiet beside it, and the code on the same
  * ground, so the block reads as part of the answer. */
 .markdown [data-streamdown="code-block"] {
@@ -197,8 +198,8 @@
   border: 0;
   border-radius: 0.75rem;
   overflow: hidden;
-  background: color-mix(in oklab, var(--theme-panel, #000) 4%, var(--theme-panel-bg, #fff));
-  box-shadow: 0 0 0 1px color-mix(in oklab, var(--theme-panel, #000) 8%, transparent);
+  background: var(--theme-code-bg, #f3f4f6);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--theme-app, #000) 8%, transparent);
 }
 .markdown [data-streamdown="code-block-header"] {
   height: 2.25rem;
@@ -222,8 +223,8 @@
     color 150ms ease-out;
 }
 .markdown [data-streamdown="code-block-actions"] button:hover {
-  color: var(--theme-panel, #000);
-  background: color-mix(in oklab, var(--theme-panel, #000) 7%, transparent);
+  color: var(--theme-app, #000);
+  background: color-mix(in oklab, var(--theme-app, #000) 7%, transparent);
 }
 .markdown [data-streamdown="code-block-body"] {
   border: 0;
@@ -247,7 +248,7 @@
    explicitly to ensure correct colors in all modes.
    See: https://shiki.style/guide/dual-themes#class-based-dark-mode */
 
-/* Light mode: the primary Shiki theme's colours (--sdm-c) on the block's own
+/* Light mode: the primary Shiki theme's colors (--sdm-c) on the block's own
    surface, which stands in for the theme's background. */
 .markdown [data-streamdown="code-block-body"] pre {
   /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
@@ -258,7 +259,7 @@
   color: var(--sdm-c, inherit);
 }
 
-/* Dark mode: the --shiki-dark colours, again on the block's surface. */
+/* Dark mode: the --shiki-dark colors, again on the block's surface. */
 .dark .markdown [data-streamdown="code-block-body"] pre {
   /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
   background-color: transparent !important;
@@ -311,20 +312,6 @@
   -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 96px), transparent);
 }
 
-/* Theme-aware input styling (matches the host app's .theme-input; defined
- * here too so the edit textarea is styled in standalone use) */
-.theme-input {
-  background-color: var(--theme-input-bg, #f9fafb);
-  border-color: var(--theme-border, #d1d5db);
-  color: var(--theme-app, #374151);
-}
-
-.theme-input:focus {
-  border-color: var(--theme-element, #3b82f6);
-  outline: none;
-  box-shadow: 0 0 0 1px var(--theme-element, #3b82f6);
-}
-
 @keyframes shimmer {
   0% {
     background-position: 200% 0;
@@ -374,25 +361,25 @@
 /* Tints of the ink for controls that sit on the panel: the theme's hover is a
  * shade off another surface and would not read as a highlight here. */
 @utility chat-tint {
-  background-color: color-mix(in oklab, var(--theme-panel, #000) 6%, transparent);
+  background-color: color-mix(in oklab, var(--theme-app, #000) 6%, transparent);
 }
 @utility chat-tint-strong {
-  background-color: color-mix(in oklab, var(--theme-panel, #000) 10%, transparent);
+  background-color: color-mix(in oklab, var(--theme-app, #000) 10%, transparent);
 }
 
 /* The composer is one surface lifted off the page: a hairline of the ink for
  * its edge, and a short, soft shadow that deepens while it has focus. The
- * shadow is black on every scheme; an ink-coloured one would glow on dark. */
+ * shadow is black on every scheme; an ink-colored one would glow on dark. */
 .chat-composer {
   box-shadow:
-    0 0 0 1px color-mix(in oklab, var(--theme-panel, #000) 12%, transparent),
+    0 0 0 1px color-mix(in oklab, var(--theme-app, #000) 12%, transparent),
     0 1px 2px rgb(0 0 0 / 0.04),
     0 6px 16px -8px rgb(0 0 0 / 0.12);
   transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 .chat-composer:focus-within {
   box-shadow:
-    0 0 0 1px color-mix(in oklab, var(--theme-panel, #000) 22%, transparent),
+    0 0 0 1px color-mix(in oklab, var(--theme-app, #000) 22%, transparent),
     0 1px 2px rgb(0 0 0 / 0.05),
     0 10px 24px -10px rgb(0 0 0 / 0.18);
 }
@@ -425,7 +412,7 @@
 /* An edge drawn from the ink rather than the theme's border, so a card reads
  * the same on the panel and on a tinted bubble. */
 .chat-hairline {
-  box-shadow: 0 0 0 1px color-mix(in oklab, var(--theme-panel, #000) 10%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--theme-app, #000) 10%, transparent);
 }
 
 /* A bubble carrying pastes would shrink to its shortest line and squeeze
@@ -442,7 +429,7 @@
 .chat-composer,
 .chat-empty,
 .chat-reasoning-body {
-  --chat-accent: var(--theme-accent, var(--theme-element, #06354f));
+  --chat-accent: var(--theme-accent, var(--theme-accent, #06354f));
 }
 
 /* What the reader wrote carries a wash of the accent: theirs, not the
@@ -503,6 +490,6 @@
  * losing contrast. */
 .chat-queued .chat-bubble-user {
   background: transparent;
-  outline: 1px dashed color-mix(in oklab, var(--theme-panel, #000) 30%, transparent);
+  outline: 1px dashed color-mix(in oklab, var(--theme-app, #000) 30%, transparent);
   outline-offset: -1px;
 }

package/dist/ai/components/AllocationSelector.js

@@ -1,4 +1,4 @@
-import { FaAngleDown } from "../../icons/fa/FaAngleDown.js";
+import { ChevronDownIcon } from "../../icons.js";
 import { Select } from "../../components/Select.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
@@ -46,7 +46,7 @@ function AllocationSelector() {
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: selected?.name ?? t.placeholder
-				}), /* @__PURE__ */ jsx(FaAngleDown, {
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
 					className: "h-3 w-3 shrink-0",
 					"aria-hidden": "true"
 				})]

package/dist/ai/components/AttachmentManager.js

@@ -1,15 +1,17 @@
-import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
-import { FiDownload } from "../../icons/fi/FiDownload.js";
-import { FiFile } from "../../icons/fi/FiFile.js";
+import { cx } from "../../cx.js";
+import { DownloadIcon, FileIcon, TrashIcon } from "../../icons.js";
 import { safeUrl } from "../../safeUrl.js";
+import { EmptyState } from "../../components/EmptyState.js";
+import { Loader } from "../../components/Loader.js";
+import { toast } from "../../components/Toast.js";
+import { useStrings } from "../../components/Provider.js";
+import { formatBytes } from "../../format.js";
+import { RelativeTime } from "../../components/relativeTime.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
-import { formatFileSize } from "../utils.js";
 import { attachmentsPageKey } from "./attachmentKeys.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
-import { DateTime } from "luxon";
 import useSWRInfinite from "swr/infinite";
 //#region src/ai/components/AttachmentManager.tsx
 function triggerDownload(url, filename) {
@@ -23,8 +25,9 @@ function triggerDownload(url, filename) {
 	document.body.removeChild(a);
 }
 function AttachmentManager() {
-	const { adapter, notify } = useChat();
+	const { adapter } = useChat();
 	const t = useChatConfig().strings.attachmentManager;
+	const { common } = useStrings();
 	const attachmentsAdapter = adapter.attachments;
 	const [deleting, setDeleting] = useState(null);
 	const [thumbnails, setThumbnails] = useState({});
@@ -46,15 +49,11 @@ function AttachmentManager() {
 			await attachmentsAdapter.remove(attachmentId);
 			await mutate();
 		} catch (error) {
-			notify.error(error instanceof Error ? error.message : String(error));
+			toast.error(error instanceof Error ? error.message : String(error));
 		} finally {
 			setDeleting(null);
 		}
-	}, [
-		attachmentsAdapter,
-		mutate,
-		notify
-	]);
+	}, [attachmentsAdapter, mutate]);
 	if (!attachmentsAdapter) return null;
 	const hasMore = pages?.[pages.length - 1]?.hasMore ?? false;
 	return /* @__PURE__ */ jsx("div", {
@@ -66,14 +65,14 @@ function AttachmentManager() {
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "max-w-4xl mx-auto",
 					children: [/* @__PURE__ */ jsx("h1", {
-						className: "text-2xl font-semibold mb-6 text-(--theme-panel)",
+						className: "text-2xl font-semibold mb-6 text-(--theme-app)",
 						children: t.title
 					}), isLoading && attachments.length === 0 ? /* @__PURE__ */ jsx("div", {
-						className: "flex items-center justify-center py-12",
-						children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-current border-t-transparent theme-muted-text" })
-					}) : attachments.length === 0 ? /* @__PURE__ */ jsx("p", {
-						className: "text-center theme-muted-text py-12 text-sm",
-						children: t.empty
+						className: "py-12",
+						children: /* @__PURE__ */ jsx(Loader, { size: 32 })
+					}) : attachments.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+						variant: "bare",
+						title: t.empty
 					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 						className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",
 						children: attachments.map((att) => {
@@ -87,14 +86,14 @@ function AttachmentManager() {
 								style: { cursor: "pointer" }
 							} : {};
 							return /* @__PURE__ */ jsxs("div", {
-								className: clsx("rounded-lg border theme-border overflow-hidden", isDeleting && "opacity-50 pointer-events-none"),
+								className: cx("rounded-lg border theme-border overflow-hidden", isDeleting && "opacity-50 pointer-events-none"),
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "relative aspect-square bg-(--theme-muted-panel-bg) flex items-center justify-center",
 									...openProps,
-									children: [/* @__PURE__ */ jsx(FiFile, { className: "w-8 h-8 theme-muted-text" }), showThumbnail && /* @__PURE__ */ jsx("img", {
+									children: [/* @__PURE__ */ jsx(FileIcon, { className: "w-8 h-8 theme-muted-text" }), showThumbnail && /* @__PURE__ */ jsx("img", {
 										src: downloadUrl,
 										alt: att.filename || "Image",
-										className: clsx("absolute inset-0 w-full h-full object-cover", thumbnail !== "loaded" && "opacity-0"),
+										className: cx("absolute inset-0 w-full h-full object-cover", thumbnail !== "loaded" && "opacity-0"),
 										loading: "lazy",
 										onLoad: () => markThumbnail(att.id, "loaded"),
 										onError: () => markThumbnail(att.id, "broken")
@@ -104,11 +103,11 @@ function AttachmentManager() {
 									children: [/* @__PURE__ */ jsxs("div", {
 										className: "min-w-0 flex-1",
 										children: [/* @__PURE__ */ jsx("p", {
-											className: "truncate font-medium text-(--theme-panel)",
+											className: "truncate font-medium text-(--theme-app)",
 											children: att.filename || "File"
 										}), /* @__PURE__ */ jsxs("p", {
 											className: "truncate theme-muted-text",
-											children: [att.size ? formatFileSize(att.size) : "", att.uploadedAt && /* @__PURE__ */ jsxs(Fragment, { children: [att.size ? " · " : "", DateTime.fromISO(att.uploadedAt).toRelative()] })]
+											children: [att.size ? formatBytes(att.size) : "", att.uploadedAt && /* @__PURE__ */ jsxs(Fragment, { children: [att.size ? " · " : "", /* @__PURE__ */ jsx(RelativeTime, { value: att.uploadedAt })] })]
 										})]
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "flex items-center gap-0.5 flex-shrink-0",
@@ -116,15 +115,15 @@ function AttachmentManager() {
 											type: "button",
 											onClick: () => triggerDownload(downloadUrl, att.filename || "File"),
 											className: "p-1.5 rounded-lg hover:theme-hover theme-muted-text transition-colors",
-											title: t.download,
-											children: /* @__PURE__ */ jsx(FiDownload, { className: "w-4 h-4" })
+											title: common.download,
+											children: /* @__PURE__ */ jsx(DownloadIcon, { className: "w-4 h-4" })
 										}), /* @__PURE__ */ jsx("button", {
 											type: "button",
 											onClick: () => handleDelete(att.id),
 											disabled: isDeleting,
 											className: "p-1.5 rounded-lg hover:bg-red-500/15 theme-muted-text hover:text-red-600 transition-colors",
-											title: t.delete,
-											children: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "w-4 h-4" })
+											title: common.delete,
+											children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-4 h-4" })
 										})]
 									})]
 								})]
@@ -137,7 +136,7 @@ function AttachmentManager() {
 							onClick: () => setSize(size + 1),
 							disabled: isValidating,
 							className: "px-6 py-3 text-sm rounded-lg theme-muted-panel hover:theme-hover transition-colors disabled:opacity-50",
-							children: isValidating ? t.loading : t.loadMore
+							children: isValidating ? common.loading : common.loadMore
 						})
 					})] })]
 				})

package/dist/ai/components/AttachmentUpload.js

@@ -1,13 +1,11 @@
-import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
-import { FaFile } from "../../icons/fa/FaFile.js";
-import { FaFilePdf } from "../../icons/fa/FaFilePdf.js";
-import { FaImage } from "../../icons/fa/FaImage.js";
-import { FaPlus } from "../../icons/fa/FaPlus.js";
+import { cx } from "../../cx.js";
+import { AddIcon, FileIcon, ImageIcon, PdfIcon, TrashIcon, WarningIcon } from "../../icons.js";
+import { toast } from "../../components/Toast.js";
+import { useStrings } from "../../components/Provider.js";
+import { formatBytes } from "../../format.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
-import { formatFileSize } from "../utils.js";
 import { ATTACHMENTS_INFINITE_KEY } from "./attachmentKeys.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { mutate } from "swr";
@@ -15,18 +13,19 @@ import { mutate } from "swr";
 var DEFAULT_MAX_FILE_SIZE = 26214400;
 var DEFAULT_MAX_FILES = 10;
 function getFileIcon(mimeType) {
-	if (!mimeType) return FaFile;
-	if (mimeType.startsWith("image/")) return FaImage;
-	if (mimeType === "application/pdf") return FaFilePdf;
-	return FaFile;
+	if (!mimeType) return FileIcon;
+	if (mimeType.startsWith("image/")) return ImageIcon;
+	if (mimeType === "application/pdf") return PdfIcon;
+	return FileIcon;
 }
 var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, attachments, onAttachmentsChange, disabled = false, maxFiles = DEFAULT_MAX_FILES, maxFileSize = DEFAULT_MAX_FILE_SIZE }, ref) {
-	const { adapter, notify } = useChat();
+	const { adapter } = useChat();
 	const t = useChatConfig().strings.attachmentUpload;
+	const { common } = useStrings();
 	const [isDragging, setIsDragging] = useState(false);
 	const fileInputRef = useRef(null);
 	const validateFile = useCallback((file) => {
-		if (file.size > maxFileSize) return t.fileTooLarge(formatFileSize(maxFileSize));
+		if (file.size > maxFileSize) return t.fileTooLarge(formatBytes(maxFileSize));
 		if (attachments.length >= maxFiles) return t.maxFilesAllowed(maxFiles);
 		return null;
 	}, [
@@ -63,7 +62,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 		for (const file of fileArray) {
 			const error = validateFile(file);
 			if (error) {
-				notify.error(error);
+				toast.error(error);
 				continue;
 			}
 			const pendingAttachment = {
@@ -83,7 +82,6 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 		onAttachmentsChange(attachments.concat(uploaded.filter((a) => a !== null)));
 	}, [
 		attachments,
-		notify,
 		onAttachmentsChange,
 		uploadFile,
 		validateFile
@@ -127,7 +125,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			children: attachments.map((attachment, index) => {
 				const Icon = getFileIcon(attachment.mimeType);
 				return /* @__PURE__ */ jsxs("div", {
-					className: clsx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-red-500"),
+					className: cx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-red-500"),
 					children: [
 						/* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 theme-muted-text" }),
 						/* @__PURE__ */ jsx("span", {
@@ -136,24 +134,25 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "text-xs theme-muted-text",
-							children: formatFileSize(attachment.size)
+							children: formatBytes(attachment.size)
 						}),
 						attachment.uploading && /* @__PURE__ */ jsx("span", {
 							className: "text-xs text-blue-500 animate-pulse",
-							children: "Uploading..."
+							children: t.uploading
 						}),
 						attachment.error && /* @__PURE__ */ jsx("span", {
-							className: "text-xs text-red-500",
+							role: "img",
+							"aria-label": attachment.error,
 							title: attachment.error,
-							children: "⚠️"
+							children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 text-red-500" })
 						}),
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => handleRemove(index),
 							className: "p-0.5 rounded hover:bg-red-500/10",
-							title: t.remove,
+							title: common.remove,
 							disabled,
-							children: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "w-3 h-3 text-red-500" })
+							children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-red-500" })
 						})
 					]
 				}, attachment.id || index);
@@ -163,18 +162,14 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			onDragOver: handleDragOver,
 			onDragLeave: handleDragLeave,
 			onDrop: handleDrop,
-			className: clsx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-blue-500 bg-blue-500/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+			className: cx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-blue-500 bg-blue-500/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
 			onClick: disabled ? void 0 : handleClick,
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "flex items-center justify-center gap-2 text-sm theme-muted-text",
-				children: [/* @__PURE__ */ jsx(FaPlus, { className: "w-4 h-4" }), /* @__PURE__ */ jsx("span", { children: isDragging ? t.dropFilesHere : t.addFiles })]
-			}), /* @__PURE__ */ jsxs("span", {
+				children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-4 h-4" }), /* @__PURE__ */ jsx("span", { children: isDragging ? t.dropFilesHere : t.addFiles })]
+			}), /* @__PURE__ */ jsx("span", {
 				className: "block text-xs theme-muted-text mt-1",
-				children: [
-					"Max ",
-					formatFileSize(maxFileSize),
-					" per file"
-				]
+				children: t.maxSizePerFile(formatBytes(maxFileSize))
 			})]
 		})]
 	})] });