@green-on-grey/ui-kit 1.1.0 → 1.3.0

package/dist/chat.js

@@ -1,14 +1,14 @@
-import { c as e, d as t, i as n, l as r, s as i } from "./ui-joAvYmUH.js";
+import { c as e, d as t, i as n, l as r, s as i } from "./ui-ChXUXoIB.js";
 import { n as a, t as o } from "./i18n-BJ8rsBp6.js";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useCallback as u, useEffect as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
-import { useTranslation as h } from "react-i18next";
+import { useCallback as u, useEffect as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { useTranslation as g } from "react-i18next";
 //#region src/chat/CommandPalette.tsx
-function g(e, t) {
+function _(e, t) {
 	let n = t.toLowerCase();
 	return e.filter((e) => e.name.toLowerCase().includes(n) || (e.description ?? "").toLowerCase().includes(n));
 }
-function _({ items: e, active: n, onPick: r, onHover: i }) {
+function v({ items: e, active: n, onPick: r, onHover: i }) {
 	let o = a(), s = e.filter((e) => e.kind === "command"), u = e.filter((e) => e.kind === "skill"), d = (e, a) => /* @__PURE__ */ l("button", {
 		type: "button",
 		role: "option",
@@ -24,7 +24,7 @@ function _({ items: e, active: n, onPick: r, onHover: i }) {
 				size: 14
 			}) : /* @__PURE__ */ c("span", {
 				className: "slash",
-				children: "/"
+				"aria-hidden": "true"
 			}),
 			/* @__PURE__ */ c("span", {
 				className: "nm",
@@ -67,31 +67,34 @@ function _({ items: e, active: n, onPick: r, onHover: i }) {
 	});
 }
 //#endregion
+//#region src/chat/intl.ts
+var y = (e) => e === "zh" ? "zh-CN" : e;
+//#endregion
 //#region src/chat/ContextMeter.tsx
-function v(e, t) {
-	return new Intl.NumberFormat(t === "zh" ? "zh-CN" : t, {
+function b(e, t) {
+	return new Intl.NumberFormat(y(t), {
 		notation: "compact",
 		maximumFractionDigits: 1
 	}).format(e);
 }
-function y({ context: e, onCompact: n, onReset: r }) {
-	let s = a(), { i18n: u } = h(o), [d, f] = m(!1), p = i(d, () => f(!1)), g = e.window > 0 ? Math.min(1, e.tokens / e.window) : 0, _ = Math.round(g * 100), y = g >= .9 ? "full" : g >= .7 ? "warn" : "", b = 2 * Math.PI * 7, x = u.language;
+function x({ context: e, onCompact: n, onReset: r }) {
+	let s = a(), { i18n: u } = g(o), [d, f] = h(!1), p = i(d, () => f(!1)), m = e.window > 0 ? Math.min(1, e.tokens / e.window) : 0, _ = Math.round(m * 100), v = m >= .9 ? "full" : m >= .7 ? "warn" : "", y = 2 * Math.PI * 7, x = u.language;
 	return /* @__PURE__ */ l("div", {
 		className: "ctxmeter",
 		ref: p,
 		children: [/* @__PURE__ */ c("button", {
 			type: "button",
-			className: `ctxring ${y}`,
+			className: `ctxring ${v}`,
 			"aria-expanded": d,
 			onClick: () => f((e) => !e),
 			"aria-label": s("chat.context.meter", {
-				used: v(e.tokens, x),
-				total: v(e.window, x),
+				used: b(e.tokens, x),
+				total: b(e.window, x),
 				pct: _
 			}),
 			title: s("chat.context.meter", {
-				used: v(e.tokens, x),
-				total: v(e.window, x),
+				used: b(e.tokens, x),
+				total: b(e.window, x),
 				pct: _
 			}),
 			children: /* @__PURE__ */ l("svg", {
@@ -107,7 +110,7 @@ function y({ context: e, onCompact: n, onReset: r }) {
 					cx: "9",
 					cy: "9",
 					r: 7,
-					strokeDasharray: `${(b * g).toFixed(1)} ${b.toFixed(1)}`,
+					strokeDasharray: `${(y * m).toFixed(1)} ${y.toFixed(1)}`,
 					transform: "rotate(-90 9 9)"
 				})]
 			})
@@ -116,16 +119,16 @@ function y({ context: e, onCompact: n, onReset: r }) {
 			role: "dialog",
 			children: [
 				/* @__PURE__ */ c("div", { children: s("chat.context.meter", {
-					used: v(e.tokens, x),
-					total: v(e.window, x),
+					used: b(e.tokens, x),
+					total: b(e.window, x),
 					pct: _
 				}) }),
-				y === "full" && /* @__PURE__ */ c("div", {
+				v === "full" && /* @__PURE__ */ c("div", {
 					className: "small muted",
 					style: { marginTop: 4 },
 					children: s("chat.context.full")
 				}),
-				y === "full" && (n || r) && /* @__PURE__ */ l("div", {
+				v === "full" && (n || r) && /* @__PURE__ */ l("div", {
 					className: "row",
 					style: {
 						marginTop: 8,
@@ -158,18 +161,280 @@ function y({ context: e, onCompact: n, onReset: r }) {
 	});
 }
 //#endregion
+//#region src/chat/Attachments.tsx
+var S = /* @__PURE__ */ new Set([
+	"image/png",
+	"image/jpeg",
+	"image/gif",
+	"image/webp",
+	"image/svg+xml"
+]), C = /\.(png|jpe?g|gif|webp|svg)$/, w = /\.(txt|log|json|ya?ml|xml|ini|toml|sql|sh|py|go|js|ts|tsx|java|kt|rb|rs|c|cpp|h|css|html?)$/;
+function T(e) {
+	let t = (e.mimeType ?? "").toLowerCase().split(";")[0].trim(), n = e.fileName.toLowerCase();
+	return S.has(t) || (!t || t === "application/octet-stream") && C.test(n) ? "image" : t === "application/pdf" || n.endsWith(".pdf") ? "pdf" : t === "text/markdown" || /\.(md|markdown)$/.test(n) ? "markdown" : t === "text/csv" || t === "text/tab-separated-values" || /\.(csv|tsv)$/.test(n) ? "table" : t.startsWith("text/") || t === "application/json" || t === "application/xml" || w.test(n) ? "text" : null;
+}
+var E = {
+	image: "image",
+	pdf: "pdf",
+	markdown: "markdown",
+	table: "table",
+	text: "source"
+};
+function D(e, t) {
+	return t === "pdf" ? "PDF" : t === "markdown" ? "MD" : /\.([a-z0-9]{1,5})$/i.exec(e.fileName)?.[1]?.toUpperCase() ?? (t ? "TXT" : "FILE");
+}
+function O(e, t) {
+	let n = [
+		"byte",
+		"kilobyte",
+		"megabyte",
+		"gigabyte"
+	], r = e, i = 0;
+	for (; r >= 1024 && i < n.length - 1;) r /= 1024, i++;
+	return new Intl.NumberFormat(y(t), {
+		style: "unit",
+		unit: n[i],
+		unitDisplay: "short",
+		maximumFractionDigits: i === 0 ? 0 : 1
+	}).format(r);
+}
+function k(e, t) {
+	if (t) return e.replace(/\r?\n$/, "").split(/\r?\n/).map((e) => e.split("	"));
+	let n = [], r = [], i = "", a = !1;
+	for (let t = 0; t < e.length; t++) {
+		let o = e[t];
+		a ? o === "\"" && e[t + 1] === "\"" ? (i += "\"", t++) : o === "\"" ? a = !1 : i += o : o === "\"" ? a = !0 : o === "," ? (r.push(i), i = "") : o === "\n" || o === "\r" ? (o === "\r" && e[t + 1] === "\n" && t++, r.push(i), n.push(r), r = [], i = "") : i += o;
+	}
+	return (i !== "" || r.length > 0) && (r.push(i), n.push(r)), n;
+}
+function A(e, t, n = !0) {
+	let [r, i] = h({}), { id: a, href: o, fileName: s, mimeType: c, size: l } = e;
+	return d(() => {
+		if (!n) return;
+		let e, r = !0;
+		return t({
+			id: a,
+			href: o,
+			fileName: s,
+			mimeType: c,
+			size: l
+		}).then((t) => {
+			if (!r) return;
+			let n = c && t.type !== c ? new Blob([t], { type: c }) : t;
+			e = URL.createObjectURL(n), i({
+				url: e,
+				blob: n
+			});
+		}, () => r && i({ failed: !0 })), () => {
+			r = !1, e && URL.revokeObjectURL(e);
+		};
+	}, [
+		n,
+		t,
+		a,
+		o,
+		s,
+		c,
+		l
+	]), r;
+}
+function j({ a: e, load: t, onOpen: n }) {
+	let r = a(), { url: i, failed: o } = A(e, t);
+	return o ? /* @__PURE__ */ c(M, {
+		a: e,
+		kind: "image",
+		onOpen: n
+	}) : /* @__PURE__ */ l("button", {
+		type: "button",
+		className: "att-thumb",
+		onClick: n,
+		"aria-label": r("chat.files.open", { name: e.fileName }),
+		title: e.fileName,
+		children: [i ? /* @__PURE__ */ c("img", {
+			src: i,
+			alt: ""
+		}) : /* @__PURE__ */ c("span", {
+			className: "spin",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ c("span", {
+			className: "att-cap",
+			children: e.fileName
+		})]
+	});
+}
+function M({ a: e, kind: n, onOpen: r }) {
+	let i = a(), { i18n: u } = g(o), d = n !== null && r !== void 0, f = /* @__PURE__ */ l(s, { children: [
+		/* @__PURE__ */ l("span", {
+			className: "att-ic",
+			children: [/* @__PURE__ */ c(t, {
+				name: d && n ? E[n] : "download",
+				size: 24
+			}), /* @__PURE__ */ c("span", {
+				className: "att-kl",
+				children: D(e, n)
+			})]
+		}),
+		/* @__PURE__ */ c("span", {
+			className: "att-name",
+			children: e.fileName
+		}),
+		e.size != null && /* @__PURE__ */ c("span", {
+			className: "att-size",
+			children: O(e.size, u.language)
+		})
+	] });
+	return d ? /* @__PURE__ */ c("button", {
+		type: "button",
+		className: `att-tile ${n}`,
+		onClick: r,
+		"aria-label": i("chat.files.open", { name: e.fileName }),
+		title: e.fileName,
+		children: f
+	}) : /* @__PURE__ */ c("a", {
+		className: "att-tile dl",
+		href: e.href,
+		download: e.fileName,
+		"aria-label": i("chat.files.save", { name: e.fileName }),
+		title: e.fileName,
+		children: f
+	});
+}
+function N({ items: e, load: t, onOpen: n }) {
+	return /* @__PURE__ */ c("div", {
+		className: "atts",
+		children: e.map((e) => {
+			let r = t && n ? () => n(e) : void 0, i = T(e);
+			return t && r && i === "image" ? /* @__PURE__ */ c(j, {
+				a: e,
+				load: t,
+				onOpen: r
+			}, e.id) : /* @__PURE__ */ c(M, {
+				a: e,
+				kind: i,
+				onOpen: r
+			}, e.id);
+		})
+	});
+}
+function P({ text: e, tab: t }) {
+	let n = a(), [r, ...i] = k(e, t), o = i.slice(0, 500);
+	return /* @__PURE__ */ l("div", {
+		className: "att-table",
+		children: [/* @__PURE__ */ l("table", { children: [r && /* @__PURE__ */ c("thead", { children: /* @__PURE__ */ c("tr", { children: r.map((e, t) => /* @__PURE__ */ c("th", { children: e }, t)) }) }), /* @__PURE__ */ c("tbody", { children: o.map((e, t) => /* @__PURE__ */ c("tr", { children: e.map((e, t) => /* @__PURE__ */ c("td", { children: e }, t)) }, t)) })] }), i.length > o.length && /* @__PURE__ */ c("div", {
+			className: "att-more",
+			children: n("chat.files.rows", {
+				shown: o.length,
+				total: i.length
+			})
+		})]
+	});
+}
+function ee({ a: e, load: i, onClose: u }) {
+	let f = a(), { i18n: p } = g(o), m = T(e), _ = m === "markdown" || m === "table" || m === "text", v = _ && (e.size ?? 0) > 1048576, { url: y, blob: b, failed: x } = A(e, i, !v), [S, C] = h(null), w = v || _ && (b?.size ?? 0) > 1048576;
+	d(() => {
+		_ && b && !w && b.arrayBuffer().then((e) => {
+			try {
+				C({ text: new TextDecoder("utf-8", { fatal: !0 }).decode(e) });
+			} catch {
+				C({ text: null });
+			}
+		}, () => C({ text: null }));
+	}, [
+		_,
+		b,
+		w
+	]);
+	let E = S?.text, D;
+	return D = x ? /* @__PURE__ */ c("div", {
+		className: "att-msg err-text",
+		children: f("chat.files.failed")
+	}) : w ? /* @__PURE__ */ c("div", {
+		className: "att-msg",
+		children: f("chat.files.tooLarge")
+	}) : S && E === null ? /* @__PURE__ */ c("div", {
+		className: "att-msg",
+		children: f("chat.files.notUtf8")
+	}) : !y || _ && E == null ? /* @__PURE__ */ l("div", {
+		className: "att-msg",
+		children: [
+			/* @__PURE__ */ c("span", {
+				className: "spin",
+				"aria-hidden": "true"
+			}),
+			" ",
+			f("loading")
+		]
+	}) : m === "image" ? /* @__PURE__ */ c("img", {
+		className: "att-img",
+		src: y,
+		alt: e.fileName
+	}) : m === "pdf" ? /* @__PURE__ */ c("object", {
+		className: "att-pdf",
+		data: y,
+		type: "application/pdf",
+		"aria-label": e.fileName,
+		children: /* @__PURE__ */ c("div", {
+			className: "att-msg",
+			children: f("chat.files.failed")
+		})
+	}) : m === "markdown" ? /* @__PURE__ */ c("div", {
+		className: "att-md",
+		children: /* @__PURE__ */ c(r, { text: E ?? "" })
+	}) : m === "table" ? /* @__PURE__ */ c(P, {
+		text: E ?? "",
+		tab: /\.tsv$/i.test(e.fileName) || e.mimeType === "text/tab-separated-values"
+	}) : /* @__PURE__ */ c("pre", {
+		className: "att-text",
+		children: E
+	}), /* @__PURE__ */ c(n, {
+		wide: !0,
+		onClose: u,
+		title: /* @__PURE__ */ l("span", {
+			className: "att-title",
+			children: [/* @__PURE__ */ c("span", {
+				className: "att-name",
+				children: e.fileName
+			}), e.size != null && /* @__PURE__ */ c("span", {
+				className: "muted small",
+				children: O(e.size, p.language)
+			})]
+		}),
+		footer: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("a", {
+			className: "btn ghost",
+			href: y ?? e.href,
+			download: e.fileName,
+			children: [
+				/* @__PURE__ */ c(t, {
+					name: "download",
+					size: 14
+				}),
+				" ",
+				f("chat.files.download")
+			]
+		}), /* @__PURE__ */ c("button", {
+			type: "button",
+			className: "btn primary",
+			onClick: u,
+			children: f("close")
+		})] }),
+		children: /* @__PURE__ */ c("div", {
+			className: `att-view ${m ?? ""}`,
+			children: D
+		})
+	});
+}
+//#endregion
 //#region src/chat/MessageView.tsx
-var b = (e) => e === "zh" ? "zh-CN" : e;
-function x(e, t) {
-	return new Intl.DateTimeFormat(b(t), {
+function F(e, t) {
+	return new Intl.DateTimeFormat(y(t), {
 		hour: "2-digit",
 		minute: "2-digit"
 	}).format(new Date(e));
 }
-function S(e, t) {
+function I(e, t) {
 	return t || e.length <= 3 ? e : e.slice(-2);
 }
-var C = {
+var L = {
 	done: {
 		icon: "check",
 		cls: "ok"
@@ -183,14 +448,14 @@ var C = {
 		cls: "run"
 	}
 };
-function w({ m: e, busy: n, onRetry: i }) {
-	let { t: a, i18n: u } = h(o), [d, f] = m(!1);
+function R({ m: e, busy: n, onRetry: i, loadAttachment: a, onOpenAttachment: u }) {
+	let { t: d, i18n: f } = g(o), [p, m] = h(!1);
 	if (e.role === "note") return /* @__PURE__ */ c("div", {
 		className: "sysnote",
 		children: e.text
 	});
-	if (e.role === "event" && e.event) return /* @__PURE__ */ c(T, { m: e });
-	let p = e.mark && /* @__PURE__ */ l("div", {
+	if (e.role === "event" && e.event) return /* @__PURE__ */ c(z, { m: e });
+	let _ = e.mark && /* @__PURE__ */ l("div", {
 		className: "chan",
 		children: [
 			/* @__PURE__ */ c(t, {
@@ -200,73 +465,64 @@ function w({ m: e, busy: n, onRetry: i }) {
 			" ",
 			e.mark.text,
 			" · ",
-			x(e.createdAt, u.language)
+			F(e.createdAt, f.language)
 		]
-	}), g = e.attachments && e.attachments.length > 0 && /* @__PURE__ */ c("div", {
-		className: "atts",
-		children: e.attachments.map((e) => /* @__PURE__ */ l("a", {
-			href: e.href,
-			children: [
-				/* @__PURE__ */ c(t, {
-					name: "clip",
-					size: 12
-				}),
-				" ",
-				e.fileName
-			]
-		}, e.id))
+	}), v = e.attachments && e.attachments.length > 0 && /* @__PURE__ */ c(N, {
+		items: e.attachments,
+		load: a,
+		onOpen: u
 	});
 	if (e.role === "user") return /* @__PURE__ */ l("div", {
 		className: "m u",
 		children: [
-			p,
+			_,
 			e.content,
 			e.text && /* @__PURE__ */ c("div", {
 				className: "bub",
 				children: e.text
 			}),
-			g,
+			v,
 			e.wait && /* @__PURE__ */ c("div", {
 				className: `turnstate${e.wait.state === "queued" ? " q" : ""}`,
 				role: "status",
 				children: e.wait.state === "queued" ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
 					name: "clock",
 					size: 12
-				}), a("chat.wait.queued", { count: e.wait.position })] }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+				}), d("chat.wait.queued", { count: e.wait.position })] }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
 					className: "spin",
 					"aria-hidden": "true"
-				}), a("chat.wait.starting")] })
+				}), d("chat.wait.starting")] })
 			})
 		]
 	});
-	let _ = e.steps ?? [], v = (e.status === "streaming" || e.status === "pending") && !e.text && !e.content;
+	let y = e.steps ?? [], b = (e.status === "streaming" || e.status === "pending") && !e.text && !e.content;
 	return /* @__PURE__ */ l("div", {
 		className: "m a",
 		children: [
-			p,
-			_.length > 3 && /* @__PURE__ */ c("button", {
+			_,
+			y.length > 3 && /* @__PURE__ */ c("button", {
 				className: "tools-fold",
-				onClick: () => f((e) => !e),
-				"aria-expanded": d,
-				children: d ? a("chat.hideSteps") : a("chat.moreSteps", { count: _.length - 2 })
+				onClick: () => m((e) => !e),
+				"aria-expanded": p,
+				children: p ? d("chat.hideSteps") : d("chat.moreSteps", { count: y.length - 2 })
 			}),
-			S(_, d).map((e) => /* @__PURE__ */ l("div", {
+			I(y, p).map((e) => /* @__PURE__ */ l("div", {
 				className: "tool",
 				title: e.title,
 				children: [/* @__PURE__ */ c(t, {
-					name: C[e.status].icon,
+					name: L[e.status].icon,
 					size: 14,
-					className: C[e.status].cls
+					className: L[e.status].cls
 				}), /* @__PURE__ */ c("span", {
 					className: "tx",
 					children: e.text
 				})]
 			}, e.id)),
-			v && /* @__PURE__ */ c("div", {
+			b && /* @__PURE__ */ c("div", {
 				className: "bub",
 				children: /* @__PURE__ */ l("span", {
 					className: "typing",
-					"aria-label": a("chat.typing"),
+					"aria-label": d("chat.typing"),
 					children: [
 						/* @__PURE__ */ c("i", {}),
 						/* @__PURE__ */ c("i", {}),
@@ -279,7 +535,7 @@ function w({ m: e, busy: n, onRetry: i }) {
 				title: e.hint,
 				children: /* @__PURE__ */ c(r, { text: e.text })
 			})),
-			g,
+			v,
 			e.error && /* @__PURE__ */ l("div", {
 				className: `llmerr${e.error.transient ? " amber" : ""}`,
 				role: "alert",
@@ -293,15 +549,15 @@ function w({ m: e, busy: n, onRetry: i }) {
 						children: [/* @__PURE__ */ c(t, {
 							name: "refresh",
 							size: 14
-						}), a("chat.retry")]
+						}), d("chat.retry")]
 					})
 				})]
 			})
 		]
 	});
 }
-function T({ m: e }) {
-	let { t: n, i18n: r } = h(o), [i, a] = m(!1), s = e.event;
+function z({ m: e }) {
+	let { t: n, i18n: r } = g(o), [i, a] = h(!1), s = e.event;
 	return /* @__PURE__ */ l("div", {
 		className: "evdiv",
 		children: [/* @__PURE__ */ c("div", {
@@ -316,7 +572,7 @@ function T({ m: e }) {
 					}),
 					s.text,
 					" · ",
-					x(e.createdAt, r.language),
+					F(e.createdAt, r.language),
 					s.details && /* @__PURE__ */ l("button", {
 						type: "button",
 						className: "textbtn",
@@ -337,16 +593,29 @@ function T({ m: e }) {
 	});
 }
 //#endregion
+//#region src/chat/transcription.ts
+async function te(e, t, n) {
+	n.busy(!0);
+	let r;
+	try {
+		r = await t(e);
+	} catch (r) {
+		n.busy(!1), n.failed(r instanceof Error && r.message ? r.message : void 0, () => void te(e, t, n));
+		return;
+	}
+	n.busy(!1), r !== null && (r ? n.text(r) : n.empty());
+}
+//#endregion
 //#region src/chat/useRecorder.ts
-function E(e = 300, t) {
-	let n = typeof window < "u" && "MediaRecorder" in window && !!navigator.mediaDevices?.getUserMedia, [r, i] = m(!1), [a, o] = m(0), [s, c] = m(0), [l, f] = m(!1), h = p(null), g = p([]), _ = p(void 0), v = p(null), y = p(null), b = p(!1), x = p(t);
+function ne(e = 300, t) {
+	let n = typeof window < "u" && "MediaRecorder" in window && !!navigator.mediaDevices?.getUserMedia, [r, i] = h(!1), [a, o] = h(0), [s, c] = h(0), [l, f] = h(!1), p = m(null), g = m([]), _ = m(void 0), v = m(null), y = m(null), b = m(!1), x = m(t);
 	d(() => {
 		x.current = t;
 	});
 	let S = u(() => {
-		window.clearInterval(_.current), h.current?.stream.getTracks().forEach((e) => e.stop()), h.current = null, v.current?.close().catch(() => void 0), v.current = null, i(!1), c(0);
+		window.clearInterval(_.current), p.current?.stream.getTracks().forEach((e) => e.stop()), p.current = null, v.current?.close().catch(() => void 0), v.current = null, i(!1), c(0);
 	}, []), C = u(async () => {
-		if (n && !h.current) {
+		if (n && !p.current) {
 			f(!1);
 			try {
 				let t = await navigator.mediaDevices.getUserMedia({ audio: !0 }), n = new MediaRecorder(t);
@@ -362,7 +631,7 @@ function E(e = 300, t) {
 					r = null;
 				}
 				let a = r ? new Uint8Array(r.fftSize) : null;
-				h.current = n, n.start(), o(0), i(!0);
+				p.current = n, n.start(), o(0), i(!0);
 				let s = Date.now(), l = !1;
 				_.current = window.setInterval(() => {
 					let t = Math.floor((Date.now() - s) / 1e3);
@@ -383,7 +652,7 @@ function E(e = 300, t) {
 		S,
 		e
 	]), w = u(() => new Promise((e) => {
-		let t = h.current;
+		let t = p.current;
 		if (!t || t.state === "inactive") return e(null);
 		y.current = e, t.stop();
 	}), []), T = u(() => {
@@ -400,71 +669,75 @@ function E(e = 300, t) {
 		cancel: T
 	};
 }
-function D(e) {
+function re(e) {
 	return `${Math.floor(e / 60)}:${String(e % 60).padStart(2, "0")}`;
 }
 //#endregion
 //#region src/chat/Chat.tsx
-function O(n) {
-	let r = a(), i = e(), [o, u] = m(""), [h, v] = m([]), [b, x] = m(!1), [S, C] = m(null), [T, O] = m(0), [k, A] = m(!1), [j, M] = m(null), [N, P] = m(!1), F = p(!1), I = p(null), L = p(null), R = p(null), z = n.voiceMaxSeconds ?? 300, B = E(z, () => void ae()), { messages: V, busy: H = !1 } = n, U = n.onPendingChange;
-	d(() => U?.(h), [h, U]);
-	let W = V[0]?.id, G = V[V.length - 1], K = G?.id, ee = G?.text.length, te = G?.steps?.length, q = p({ height: 0 });
+function B(n) {
+	let r = a(), i = e(), [o, u] = h(""), [g, y] = h([]), [b, S] = h(!1), [C, w] = h(null), [T, E] = h(0), [D, O] = h(!1), [k, A] = h(null), [j, M] = h(!1), [N, P] = h(null), F = m(n.loadAttachment);
+	d(() => {
+		F.current = n.loadAttachment;
+	});
+	let I = !!n.loadAttachment, L = p(() => I ? (e) => F.current ? F.current(e) : Promise.reject(/* @__PURE__ */ Error("no loader")) : void 0, [I]), z = m(!1), B = m(null), V = m(null), H = m(null), U = n.voiceMaxSeconds ?? 300, W = ne(U, () => void me()), { messages: G, busy: K = !1 } = n, ae = n.onPendingChange;
+	d(() => ae?.(g), [g, ae]);
+	let q = G[0]?.id, J = G[G.length - 1], Y = J?.id, oe = J?.text.length, se = J?.steps?.length, ce = m({ height: 0 });
 	f(() => {
-		let e = I.current;
+		let e = B.current;
 		if (!e) return;
-		let t = q.current;
-		e.scrollTop = t.first !== void 0 && W !== t.first && K === t.last ? e.scrollTop + (e.scrollHeight - t.height) : e.scrollHeight, q.current = {
-			first: W,
-			last: K,
+		let t = ce.current;
+		e.scrollTop = t.first !== void 0 && q !== t.first && Y === t.last ? e.scrollTop + (e.scrollHeight - t.height) : e.scrollHeight, ce.current = {
+			first: q,
+			last: Y,
 			height: e.scrollHeight
 		};
 	}, [
-		V.length,
-		W,
-		K,
-		ee,
-		te
+		G.length,
+		q,
+		Y,
+		oe,
+		se
 	]);
-	let J = n.commands && !S && o.startsWith("/") && !/\s/.test(o) ? o.slice(1) : null, Y = J === null ? [] : g(n.commands ?? [], J), X = J !== null && !k, Z = () => {
-		u(""), v([]), C(null), M(null), F.current = !1;
-	}, Q = async (e, t) => {
+	let X = n.commands && !C && o.startsWith("/") && !/\s/.test(o) ? o.slice(1) : null, Z = X === null ? [] : _(n.commands ?? [], X), Q = X !== null && !D, le = () => {
+		u(""), y([]), w(null), A(null), z.current = !1;
+	}, ue = async (e, t) => {
 		if (n.onCommand) try {
-			await n.onCommand(e, t), Z();
+			await n.onCommand(e, t), le();
 		} catch {}
 	}, $ = async (e, t = !1) => {
 		let r = e.trim();
-		if (!(!r && h.length === 0 && !S || H || n.readOnly)) {
-			if (!t && !S && n.commands && r.startsWith("/")) {
+		if (!(!r && g.length === 0 && !C || K || n.readOnly)) {
+			if (!t && !C && n.commands && r.startsWith("/")) {
 				let [e, ...t] = r.slice(1).split(/\s+/), i = n.commands.find((t) => t.kind === "command" && t.name === e);
-				if (i) return Q(i.name, t.join(" "));
+				if (i) return ue(i.name, t.join(" "));
 				if (e && !r.includes("\n")) {
-					M("/" + e);
+					A("/" + e);
 					return;
 				}
 			}
 			try {
-				await n.onSend(r, h.map((e) => e.id), F.current, S ?? void 0), Z();
+				await n.onSend(r, g.map((e) => e.id), z.current, C ?? void 0), le();
 			} catch {}
 		}
-	}, ne = (e) => {
-		O(0), e.kind === "skill" ? (C(e.name), u("")) : e.takesText ? u("/" + e.name + " ") : Q(e.name, ""), R.current?.focus();
-	}, re = (e) => {
-		if (X && Y.length > 0) {
+	}, de = (e) => {
+		E(0), e.kind === "skill" ? (w(e.name), u("")) : e.takesText ? u("/" + e.name + " ") : ue(e.name, ""), H.current?.focus();
+	}, fe = (e) => {
+		if (Q && Z.length > 0) {
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 				e.preventDefault();
 				let t = e.key === "ArrowDown" ? 1 : -1;
-				O((e) => (e + t + Y.length) % Y.length);
+				E((e) => (e + t + Z.length) % Z.length);
 				return;
 			}
 			if (e.key === "Enter" && !e.shiftKey || e.key === "Tab") {
-				e.preventDefault(), ne(Y[Math.min(T, Y.length - 1)]);
+				e.preventDefault(), de(Z[Math.min(T, Z.length - 1)]);
 				return;
 			}
 		}
-		X && e.key === "Escape" ? (e.preventDefault(), A(!0)) : e.key === "Backspace" && S && o === "" ? C(null) : e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), $(o));
-	}, ie = async (e) => {
+		Q && e.key === "Escape" ? (e.preventDefault(), O(!0)) : e.key === "Backspace" && C && o === "" ? w(null) : e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), $(o));
+	}, pe = async (e) => {
 		if (e?.length && n.onUpload) {
-			x(!0);
+			S(!0);
 			for (let t of Array.from(e)) {
 				if (n.upload && t.size > n.upload.maxBytes) {
 					i({
@@ -475,24 +748,36 @@ function O(n) {
 					continue;
 				}
 				let e = await n.onUpload(t).catch(() => null);
-				e && v((t) => [...t, e]);
+				e && y((t) => [...t, e]);
 			}
-			x(!1), L.current && (L.current.value = "");
+			S(!1), V.current && (V.current.value = "");
 		}
 	};
-	async function ae() {
-		let e = await B.stop();
-		if (!e || !n.onTranscribe) return;
-		P(!0);
-		let t = await n.onTranscribe(e).catch(() => null);
-		P(!1), t !== null && (t ? (F.current = !0, u((e) => e.trim() ? e.trimEnd() + " " + t : t), R.current?.focus()) : i({
-			kind: "error",
-			title: r("chat.voice.notRecognized")
-		}));
+	async function me() {
+		let e = await W.stop();
+		e && n.onTranscribe && await te(e, n.onTranscribe, {
+			busy: M,
+			empty: () => i({
+				kind: "error",
+				title: r("chat.voice.notRecognized")
+			}),
+			failed: (e, t) => i({
+				kind: "error",
+				title: e ?? r("chat.voice.failed"),
+				actions: [{
+					label: r("chat.voice.retry"),
+					primary: !0,
+					onClick: t
+				}]
+			}),
+			text: (e) => {
+				z.current = !0, u((t) => t.trim() ? t.trimEnd() + " " + e : e), H.current?.focus();
+			}
+		});
 	}
-	let oe = (e) => {
-		e.key === "Escape" && B.recording && (e.preventDefault(), B.cancel());
-	}, se = S ? r("chat.skillPlaceholder") : r("chat.placeholder", { name: n.agentName }), ce = z - B.seconds;
+	let he = (e) => {
+		e.key === "Escape" && W.recording && (e.preventDefault(), W.cancel());
+	}, ge = C ? r("chat.skillPlaceholder") : r("chat.placeholder", { name: n.agentName }), _e = U - W.seconds;
 	return /* @__PURE__ */ l("section", {
 		className: "nb-chat",
 		"aria-label": r("chat.title"),
@@ -500,7 +785,7 @@ function O(n) {
 			n.header,
 			/* @__PURE__ */ l("div", {
 				className: "msgs",
-				ref: I,
+				ref: B,
 				"aria-live": "polite",
 				children: [
 					n.hasOlder && n.onLoadOlder && /* @__PURE__ */ c("button", {
@@ -514,7 +799,7 @@ function O(n) {
 						className: "err-text",
 						children: n.historyError
 					}),
-					V.length === 0 && !n.loading && !n.historyError && /* @__PURE__ */ l("div", {
+					G.length === 0 && !n.loading && !n.historyError && /* @__PURE__ */ l("div", {
 						className: "empty",
 						children: [
 							/* @__PURE__ */ c("div", {
@@ -525,10 +810,12 @@ function O(n) {
 							n.emptyHint
 						]
 					}),
-					V.map((e) => /* @__PURE__ */ c(w, {
+					G.map((e) => /* @__PURE__ */ c(R, {
 						m: e,
-						busy: H,
-						onRetry: n.onRetry && (() => n.onRetry?.(e.id))
+						busy: K,
+						onRetry: n.onRetry && (() => n.onRetry?.(e.id)),
+						loadAttachment: L,
+						onOpenAttachment: P
 					}, e.id)),
 					n.onConfirm && (n.confirmations ?? []).map((e) => /* @__PURE__ */ l("div", {
 						className: "confirm",
@@ -570,16 +857,16 @@ function O(n) {
 			}) : /* @__PURE__ */ l("div", {
 				className: "composer-wrap",
 				children: [
-					X && /* @__PURE__ */ c(_, {
-						items: Y,
-						active: Math.min(T, Math.max(Y.length - 1, 0)),
-						onPick: ne,
-						onHover: O
+					Q && /* @__PURE__ */ c(v, {
+						items: Z,
+						active: Math.min(T, Math.max(Z.length - 1, 0)),
+						onPick: de,
+						onHover: E
 					}),
 					n.aboveComposer,
-					h.length > 0 && /* @__PURE__ */ c("div", {
+					g.length > 0 && /* @__PURE__ */ c("div", {
 						className: "pending-files",
-						children: h.map((e) => /* @__PURE__ */ l("span", {
+						children: g.map((e) => /* @__PURE__ */ l("span", {
 							className: "chip",
 							children: [
 								/* @__PURE__ */ c(t, {
@@ -594,7 +881,7 @@ function O(n) {
 										height: 18
 									},
 									"aria-label": r("remove"),
-									onClick: () => v((t) => t.filter((t) => t.id !== e.id)),
+									onClick: () => y((t) => t.filter((t) => t.id !== e.id)),
 									children: /* @__PURE__ */ c(t, {
 										name: "x",
 										size: 12
@@ -603,10 +890,10 @@ function O(n) {
 							]
 						}, e.id))
 					}),
-					j && /* @__PURE__ */ l("div", {
+					k && /* @__PURE__ */ l("div", {
 						className: "cmd-unknown",
 						role: "status",
-						children: [r("chat.unknownCommand", { name: j }), /* @__PURE__ */ c("button", {
+						children: [r("chat.unknownCommand", { name: k }), /* @__PURE__ */ c("button", {
 							type: "button",
 							className: "textbtn",
 							onClick: () => void $(o, !0),
@@ -616,22 +903,22 @@ function O(n) {
 					/* @__PURE__ */ l("div", {
 						className: "composer",
 						children: [
-							n.onUpload && !B.recording && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("button", {
+							n.onUpload && !W.recording && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("button", {
 								className: "iconbtn",
 								"aria-label": r("chat.attach"),
 								disabled: b,
-								onClick: () => L.current?.click(),
+								onClick: () => V.current?.click(),
 								children: /* @__PURE__ */ c(t, { name: "clip" })
 							}), /* @__PURE__ */ c("input", {
-								ref: L,
+								ref: V,
 								type: "file",
 								multiple: !0,
 								hidden: !0,
 								accept: n.upload?.accept,
-								onChange: (e) => ie(e.target.files)
+								onChange: (e) => pe(e.target.files)
 							})] }),
-							B.recording ? /* @__PURE__ */ l("div", {
-								className: `recbar${ce <= 15 ? " ending" : ""}`,
+							W.recording ? /* @__PURE__ */ l("div", {
+								className: `recbar${_e <= 15 ? " ending" : ""}`,
 								role: "status",
 								"aria-label": r("chat.voice.recordingNow"),
 								children: [
@@ -642,40 +929,41 @@ function O(n) {
 									/* @__PURE__ */ l("span", {
 										className: "tm",
 										children: [
-											D(B.seconds),
+											re(W.seconds),
 											" / ",
-											D(z)
+											re(U)
 										]
 									}),
 									/* @__PURE__ */ c("span", {
 										className: "lvl",
 										"aria-hidden": "true",
-										children: /* @__PURE__ */ c("i", { style: { transform: `scaleX(${Math.max(.04, B.level)})` } })
+										children: /* @__PURE__ */ c("i", { style: { transform: `scaleX(${Math.max(.04, W.level)})` } })
 									}),
 									/* @__PURE__ */ c("button", {
 										type: "button",
 										className: "btn ghost sm",
-										onClick: B.cancel,
+										onClick: W.cancel,
 										children: r("cancel")
 									}),
 									/* @__PURE__ */ c("button", {
 										type: "button",
 										className: "btn primary sm",
-										onKeyDown: oe,
-										onClick: () => void ae(),
+										onKeyDown: he,
+										onClick: () => void me(),
 										children: r("chat.voice.done")
 									})
 								]
 							}) : /* @__PURE__ */ l("div", {
-								className: `field${S ? " with-skill" : ""}`,
-								children: [S && /* @__PURE__ */ l("span", {
+								className: `field${C ? " with-skill" : ""}${j ? " recognizing" : ""}`,
+								"aria-busy": j || void 0,
+								children: [C && /* @__PURE__ */ l("span", {
 									className: "chip skill-chip",
 									children: [
 										/* @__PURE__ */ c(t, {
 											name: "spark",
 											size: 12
 										}),
-										S,
+										C,
 										/* @__PURE__ */ c("button", {
 											className: "iconbtn",
 											style: {
@@ -683,7 +971,7 @@ function O(n) {
 												height: 18
 											},
 											"aria-label": r("remove"),
-											onClick: () => C(null),
+											onClick: () => w(null),
 											children: /* @__PURE__ */ c(t, {
 												name: "x",
 												size: 12
@@ -691,34 +979,31 @@ function O(n) {
 										})
 									]
 								}), /* @__PURE__ */ c("textarea", {
-									ref: R,
+									ref: H,
 									rows: 1,
 									value: o,
-									placeholder: N ? r("chat.voice.recognizing") : se,
-									"aria-label": se,
-									disabled: N,
-									"aria-expanded": X,
+									placeholder: j ? r("chat.voice.recognizing") : ge,
+									"aria-label": ge,
+									disabled: j,
+									"aria-expanded": Q,
 									"aria-autocomplete": n.commands ? "list" : void 0,
 									onChange: (e) => {
-										u(e.target.value), A(!1), O(0), M(null);
+										u(e.target.value), O(!1), E(0), A(null);
 									},
-									onKeyDown: re
+									onKeyDown: fe
 								})]
 							}),
-							n.context && !B.recording && /* @__PURE__ */ c(y, {
+							n.context && !W.recording && /* @__PURE__ */ c(x, {
 								context: n.context,
 								onCompact: n.onCompact,
 								onReset: n.onReset
 							}),
-							n.onTranscribe && !B.recording && /* @__PURE__ */ c("button", {
-								className: "iconbtn",
-								disabled: !B.supported || N,
-								"aria-label": r("chat.voice.start"),
-								title: B.supported ? r("chat.voice.start") : r("chat.voice.unsupported"),
-								onClick: () => void B.start(),
-								children: /* @__PURE__ */ c(t, { name: "mic" })
+							n.onTranscribe && !W.recording && /* @__PURE__ */ c(ie, {
+								supported: W.supported,
+								recognizing: j,
+								onStart: () => void W.start()
 							}),
-							!B.recording && (n.onCancel && H ? /* @__PURE__ */ c("button", {
+							!W.recording && (n.onCancel && K ? /* @__PURE__ */ c("button", {
 								className: "iconbtn fill",
 								"aria-label": r("chat.stop"),
 								onClick: n.onCancel,
@@ -726,26 +1011,54 @@ function O(n) {
 							}) : /* @__PURE__ */ c("button", {
 								className: "iconbtn fill",
 								"aria-label": r("chat.send"),
-								disabled: !o.trim() && h.length === 0 && !S || H,
+								disabled: !o.trim() && g.length === 0 && !C || K || j,
 								onClick: () => $(o),
 								children: /* @__PURE__ */ c(t, { name: "send" })
 							}))
 						]
 					}),
-					B.error && /* @__PURE__ */ c("div", {
+					W.error && /* @__PURE__ */ c("div", {
 						className: "err-text",
 						style: { padding: "0 12px 8px" },
 						children: r("chat.voice.micDenied")
 					})
 				]
+			}),
+			N && L && /* @__PURE__ */ c(ee, {
+				a: N,
+				load: L,
+				onClose: () => P(null)
 			})
 		]
 	});
 }
+function ie({ supported: e, recognizing: n, onStart: r }) {
+	let i = a();
+	return n ? /* @__PURE__ */ l("span", {
+		className: "voicewait",
+		role: "status",
+		"aria-label": i("chat.voice.recognizing"),
+		title: i("chat.voice.recognizing"),
+		children: [
+			/* @__PURE__ */ c("i", {}),
+			/* @__PURE__ */ c("i", {}),
+			/* @__PURE__ */ c("i", {}),
+			/* @__PURE__ */ c("i", {}),
+			/* @__PURE__ */ c("i", {})
+		]
+	}) : /* @__PURE__ */ c("button", {
+		className: "iconbtn",
+		disabled: !e,
+		"aria-label": i("chat.voice.start"),
+		title: i(e ? "chat.voice.start" : "chat.voice.unsupported"),
+		onClick: r,
+		children: /* @__PURE__ */ c(t, { name: "mic" })
+	});
+}
 //#endregion
 //#region src/chat/ConversationList.tsx
-function k({ conversations: e, currentId: n, open: r, onPick: i, onClose: o, onCreate: u }) {
-	let f = a(), [p, h] = m(!1);
+function V({ conversations: e, currentId: n, open: r, onPick: i, onClose: o, onCreate: u }) {
+	let f = a(), [p, m] = h(!1);
 	d(() => {
 		if (!r) return;
 		let e = (e) => e.key === "Escape" && o();
@@ -786,7 +1099,7 @@ function k({ conversations: e, currentId: n, open: r, onPick: i, onClose: o, onC
 						width: "100%",
 						justifyContent: "center"
 					},
-					onClick: () => h(!0),
+					onClick: () => m(!0),
 					children: [/* @__PURE__ */ c(t, {
 						name: "plus",
 						size: 15
@@ -820,20 +1133,20 @@ function k({ conversations: e, currentId: n, open: r, onPick: i, onClose: o, onC
 			"aria-label": f("close"),
 			onClick: o
 		}),
-		p && u && /* @__PURE__ */ c(j, {
-			onClose: () => h(!1),
+		p && u && /* @__PURE__ */ c(U, {
+			onClose: () => m(!1),
 			onCreate: u
 		})
 	] });
 }
-function A({ narrow: e, children: t }) {
+function H({ narrow: e, children: t }) {
 	return /* @__PURE__ */ c("div", {
 		className: `nb-app${e ? " narrow" : ""}`,
 		children: t
 	});
 }
-function j({ onClose: e, onCreate: t }) {
-	let r = a(), [i, o] = m(""), [u, d] = m(!1), [f, p] = m(null), h = async () => {
+function U({ onClose: e, onCreate: t }) {
+	let r = a(), [i, o] = h(""), [u, d] = h(!1), [f, p] = h(null), m = async () => {
 		if (i.trim() && !u) {
 			d(!0), p(null);
 			try {
@@ -853,7 +1166,7 @@ function j({ onClose: e, onCreate: t }) {
 		}), /* @__PURE__ */ c("button", {
 			className: "btn primary",
 			disabled: !i.trim() || u,
-			onClick: h,
+			onClick: m,
 			children: r("create")
 		})] }),
 		children: [/* @__PURE__ */ l("div", {
@@ -869,7 +1182,7 @@ function j({ onClose: e, onCreate: t }) {
 					value: i,
 					maxLength: 120,
 					onChange: (e) => o(e.target.value),
-					onKeyDown: (e) => e.key === "Enter" && h()
+					onKeyDown: (e) => e.key === "Enter" && m()
 				}),
 				/* @__PURE__ */ c("div", {
 					className: "hint",
@@ -884,7 +1197,7 @@ function j({ onClose: e, onCreate: t }) {
 }
 //#endregion
 //#region src/chat/AgentMenu.tsx
-function M({ icon: e, label: n, title: r, expanded: i, small: a, disabled: o, onClick: s }) {
+function W({ icon: e, label: n, title: r, expanded: i, small: a, disabled: o, onClick: s }) {
 	return /* @__PURE__ */ c("button", {
 		type: "button",
 		className: `agentbtn${a ? " s" : ""}`,
@@ -900,8 +1213,8 @@ function M({ icon: e, label: n, title: r, expanded: i, small: a, disabled: o, on
 		})
 	});
 }
-function N({ label: e, name: n, options: r, value: o, optionsLabel: u, hint: d, narrow: f, models: p, onRename: h, onPick: g, onClose: _ }) {
-	let v = a(), [y, b] = m(n), x = i(!0, _);
+function G({ label: e, name: n, options: r, value: o, optionsLabel: u, hint: d, narrow: f, models: p, onRename: m, onPick: g, onClose: _ }) {
+	let v = a(), [y, b] = h(n), x = i(!0, _);
 	return /* @__PURE__ */ l("div", {
 		className: `agentmenu${f ? " narrow" : ""}`,
 		ref: x,
@@ -921,7 +1234,7 @@ function N({ label: e, name: n, options: r, value: o, optionsLabel: u, hint: d,
 				onChange: (e) => b(e.target.value),
 				onBlur: () => {
 					let e = y.trim();
-					e && e !== n && h(e);
+					e && e !== n && m(e);
 				},
 				onKeyDown: (e) => e.key === "Enter" && e.target.blur()
 			}),
@@ -1011,6 +1324,6 @@ function N({ label: e, name: n, options: r, value: o, optionsLabel: u, hint: d,
 	});
 }
 //#endregion
-export { M as AgentButton, N as AgentMenu, O as Chat, A as ChatLayout, _ as CommandPalette, y as ContextMeter, k as ConversationList, w as MessageView, j as NewTopicModal, v as tokens, E as useRecorder };
+export { W as AgentButton, G as AgentMenu, N as AttachmentList, ee as AttachmentPreview, B as Chat, H as ChatLayout, v as CommandPalette, x as ContextMeter, V as ConversationList, R as MessageView, U as NewTopicModal, ie as VoiceButton, O as fileSize, k as parseTable, T as previewKind, b as tokens, ne as useRecorder };
 
 //# sourceMappingURL=chat.js.map