@coffer-org/plugin-webchat 2.2.1 → 2.2.3

package/dist/{ChatWidget-Cew9znAf.js → ChatWidget-1G0ZxQH2.js}

@@ -6186,12 +6186,49 @@ function useMinWidth(name, fallback) {
 }
 //#endregion
 //#region ../web/api.ts
+function uploadFileWithProgress(file, onProgress) {
+	return new Promise((resolve) => {
+		const xhr = new XMLHttpRequest();
+		xhr.open("POST", "/api/upload");
+		xhr.upload.addEventListener("progress", (event) => {
+			if (event.lengthComputable) onProgress(Math.min(100, Math.round(event.loaded / event.total * 100)));
+		});
+		xhr.addEventListener("load", () => {
+			if (xhr.status < 200 || xhr.status >= 300) {
+				resolve(null);
+				return;
+			}
+			try {
+				const j = JSON.parse(xhr.responseText);
+				const name = j.name ?? j.filename;
+				if (!name) {
+					resolve(null);
+					return;
+				}
+				onProgress(100);
+				resolve({
+					name,
+					...j.mime ? { mime: j.mime } : {},
+					...j.size != null ? { size: j.size } : {}
+				});
+			} catch {
+				resolve(null);
+			}
+		});
+		xhr.addEventListener("error", () => resolve(null));
+		xhr.addEventListener("abort", () => resolve(null));
+		const fd = new FormData();
+		fd.append("file", file);
+		xhr.send(fd);
+	});
+}
 /**
 * Upload a file → descriptor from the server (or null).
 * Take mime/size from the response, not the browser File: the server overwrites
 * them from disk anyway, so client values would only be noise.
 */
-async function uploadFile(file) {
+async function uploadFile(file, onProgress) {
+	if (onProgress) return uploadFileWithProgress(file, onProgress);
 	const fd = new FormData();
 	fd.append("file", file);
 	const r = await fetch("/api/upload", {
@@ -29254,7 +29291,7 @@ var Bubble = memo(function Bubble({ role, text, reasoning, attachments }) {
 });
 //#endregion
 //#region src/ui/ChatComposer.tsx
-function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploadError, onPickFiles, onRemoveAttachment }) {
+function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploadError, uploadProgress, onPickFiles, onRemoveAttachment }) {
 	const { t } = useTranslation();
 	const [text, setText] = useState("");
 	function submit() {
@@ -29263,7 +29300,7 @@ function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploa
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex shrink-0 flex-col gap-2 border-t border-border p-2",
-		children: [(attachments.length > 0 || uploadError) && /* @__PURE__ */ jsxs("div", {
+		children: [(attachments.length > 0 || uploading || uploadError) && /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-center gap-1.5 px-1",
 			"data-chat-attachments": true,
 			children: [
@@ -29287,10 +29324,31 @@ function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploa
 						})
 					]
 				}, `${a.name}-${i}`)),
-				uploading && /* @__PURE__ */ jsx(LoaderCircle, {
-					size: 14,
-					className: "animate-spin text-muted",
-					"aria-label": t("webchat.uploading")
+				uploading && /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-32 flex-1 items-center gap-2",
+					"aria-label": t("webchat.uploading"),
+					children: [
+						/* @__PURE__ */ jsx(LoaderCircle, {
+							size: 14,
+							className: "shrink-0 animate-spin text-muted"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							role: "progressbar",
+							"aria-label": t("webchat.uploadProgress"),
+							"aria-valuemin": 0,
+							"aria-valuemax": 100,
+							"aria-valuenow": uploadProgress,
+							className: "h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-border",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full rounded-full bg-accent transition-[width]",
+								style: { width: `${uploadProgress}%` }
+							})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-xs tabular-nums text-muted",
+							children: [uploadProgress, "%"]
+						})
+					]
 				}),
 				uploadError && /* @__PURE__ */ jsx("span", {
 					className: "text-xs text-danger",
@@ -29443,6 +29501,7 @@ function ChatWidget() {
 	const [threadsOpen, setThreadsOpen] = useState(false);
 	const [attachments, setAttachments] = useState([]);
 	const [uploading, setUploading] = useState(false);
+	const [uploadProgress, setUploadProgress] = useState(0);
 	const [uploadError, setUploadError] = useState(null);
 	const wide = useMinWidth("sm", 640);
 	const wideNav = useMinWidth("nav", 768);
@@ -29486,6 +29545,7 @@ function ChatWidget() {
 		if (!files.length) return;
 		setUploadError(null);
 		setUploading(true);
+		setUploadProgress(0);
 		const added = [];
 		let error = null;
 		for (const file of files) {
@@ -29494,7 +29554,8 @@ function ChatWidget() {
 				continue;
 			}
 			try {
-				const rec = await uploadFile(file);
+				setUploadProgress(0);
+				const rec = await uploadFile(file, setUploadProgress);
 				if (rec) added.push({
 					...rec,
 					label: file.name
@@ -29506,6 +29567,7 @@ function ChatWidget() {
 		}
 		if (added.length) setAttachments((prev) => [...prev, ...added]);
 		setUploading(false);
+		setUploadProgress(0);
 		if (error) setUploadError(error);
 	}, []);
 	const hasConversation = chat.messages.length > 0 || chat.pending !== null;
@@ -29564,6 +29626,7 @@ function ChatWidget() {
 					streaming: chat.pending !== null,
 					attachments,
 					uploading,
+					uploadProgress,
 					uploadError,
 					onPickFiles: (files) => void pickFiles(Array.from(files)),
 					onRemoveAttachment: (index) => setAttachments((prev) => prev.filter((_, i) => i !== index)),
@@ -29582,7 +29645,7 @@ function ChatWidget() {
 	});
 	if (mode === "bubble") return /* @__PURE__ */ jsx("button", {
 		"aria-label": t("webchat.open"),
-		onClick: () => setMode("panel"),
+		onClick: () => setMode(wide ? "panel" : "modal"),
 		className: "fixed bottom-20 right-4 z-40 grid h-14 w-14 place-items-center rounded-full bg-accent text-white shadow-lg nav:bottom-4",
 		children: /* @__PURE__ */ jsx(MessageCircle, { size: 24 })
 	});

package/dist/web.js

@@ -11,7 +11,7 @@ import { definePluginUI } from "@coffer-org/web-sdk";
 var ui_default = definePluginUI({ slots: [{
 	slot: "overlay",
 	id: "webchat",
-	load: () => import("./ChatWidget-Cew9znAf.js")
+	load: () => import("./ChatWidget-1G0ZxQH2.js")
 }] });
 //#endregion
 export { ui_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffer-org/plugin-webchat",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "type": "module",
   "engines": {
     "node": ">=24"