@coffer-org/plugin-webchat 2.1.0 → 2.2.0

package/dist/{ChatWidget-B5heKPXv.js → ChatWidget-Cew9znAf.js}

@@ -507,6 +507,34 @@ var createLucideIcon = (iconName, iconNode) => {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var FileText = createLucideIcon("file-text", [
+	["path", {
+		d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+		key: "1oefj6"
+	}],
+	["path", {
+		d: "M14 2v5a1 1 0 0 0 1 1h5",
+		key: "wfsgrz"
+	}],
+	["path", {
+		d: "M10 9H8",
+		key: "b1mrlr"
+	}],
+	["path", {
+		d: "M16 13H8",
+		key: "t4e002"
+	}],
+	["path", {
+		d: "M16 17H8",
+		key: "z1uh3a"
+	}]
+]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var List = createLucideIcon("list", [
 	["path", {
 		d: "M3 5h.01",
@@ -539,6 +567,16 @@ var List = createLucideIcon("list", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var LoaderCircle = createLucideIcon("loader-circle", [["path", {
+	d: "M21 12a9 9 0 1 1-6.219-8.56",
+	key: "13zald"
+}]]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Maximize2 = createLucideIcon("maximize-2", [
 	["path", {
 		d: "M15 3h6v6",
@@ -597,6 +635,16 @@ var Minimize2 = createLucideIcon("minimize-2", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Paperclip = createLucideIcon("paperclip", [["path", {
+	d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551",
+	key: "1miecu"
+}]]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Plus = createLucideIcon("plus", [["path", {
 	d: "M5 12h14",
 	key: "1ays0h"
@@ -637,6 +685,26 @@ var Square = createLucideIcon("square", [["rect", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Upload = createLucideIcon("upload", [
+	["path", {
+		d: "M12 3v12",
+		key: "1x0j5s"
+	}],
+	["path", {
+		d: "m17 8-5-5-5 5",
+		key: "7q97r8"
+	}],
+	["path", {
+		d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+		key: "ih7n3h"
+	}]
+]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var X = createLucideIcon("x", [["path", {
 	d: "M18 6 6 18",
 	key: "1bl5f8"
@@ -6040,7 +6108,7 @@ var getDefaultConfig = () => {
 var twMerge = /*#__PURE__*/ createTailwindMerge(getDefaultConfig);
 //#endregion
 //#region ../web/lib/utils.ts
-/** Об'єднує класи, розв'язуючи конфлікти Tailwind (shadcn-конвенція). */
+/** Merge classes while resolving Tailwind conflicts (shadcn convention). */
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
@@ -6054,7 +6122,7 @@ var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 	...props
 }));
 DialogOverlay.displayName = DialogOverlay$1.displayName;
-/** Респонсивний контент: bottom-sheet на мобільному, центрований modal на desktop. */
+/** Responsive content: bottom sheet on mobile, centered modal on desktop. */
 var DialogContent = React.forwardRef(({ className, children, hideClose, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogContent$1, {
 	ref,
 	className: cn("fixed z-50 flex flex-col border border-border bg-surface text-text shadow-xl", "inset-x-0 bottom-0 max-h-[88dvh] overflow-y-auto rounded-t-2xl", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom data-[state=closed]:duration-200", "md:inset-x-auto md:bottom-auto md:left-1/2 md:top-1/2 md:max-h-[85dvh] md:w-full md:max-w-xl md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-2xl", "md:data-[state=open]:slide-in-from-bottom-0 md:data-[state=closed]:slide-out-to-bottom-0 md:data-[state=open]:zoom-in-95 md:data-[state=closed]:zoom-out-95", className),
@@ -6083,14 +6151,13 @@ DialogDescription.displayName = DialogDescription$1.displayName;
 //#endregion
 //#region ../web/hooks/use-media-query.ts
 /**
-* Стан media-запиту як реактивне значення.
+* Media-query state as a reactive value.
 *
-* Потрібен там, де CSS-приховування (`hidden list:block`) недостатньо: приховані
-* елементи все одно в DOM і все одно рендеряться. Для списку на 700 записів це
-* подвійна робота — таблиця і картки одночасно.
+* Needed where CSS hiding (`hidden list:block`) is insufficient: hidden elements remain in the
+* DOM and still render. For a list of 700 records, that means doing the work twice — table and cards.
 *
-* `fallback` — відповідь, коли `matchMedia` недоступний (jsdom у тестах): за
-* замовчуванням «широкий екран», щоб тести бачили десктопну розмітку.
+* `fallback` is the answer when `matchMedia` is unavailable (jsdom tests): default to a
+* “wide screen” so tests see the desktop layout.
 */
 function useMediaQuery(query, fallback = true) {
 	return useSyncExternalStore(useCallback((onChange) => {
@@ -6104,8 +6171,8 @@ function useMediaQuery(query, fallback = true) {
 	}, [query, fallback]), () => fallback);
 }
 /**
-* Значення брейкпоінта з `@theme` (globals.css) — щоб JS і CSS не розʼїхались.
-* Tailwind v4 публікує їх як CSS-змінні на :root. Без CSS (тести) — `fallback`.
+* Breakpoint value from `@theme` (globals.css), so JS and CSS do not drift.
+* Tailwind v4 publishes them as CSS variables on :root. Without CSS (tests), use `fallback`.
 */
 function breakpointPx(name, fallback) {
 	if (typeof window === "undefined" || typeof getComputedStyle !== "function") return fallback;
@@ -6113,11 +6180,35 @@ function breakpointPx(name, fallback) {
 	const n = Number.parseInt(raw.trim(), 10);
 	return Number.isFinite(n) && n > 0 ? n : fallback;
 }
-/** `(min-width: …)` для брейкпоінта з теми. */
+/** `(min-width: …)` for a theme breakpoint. */
 function useMinWidth(name, fallback) {
 	return useMediaQuery(`(min-width: ${breakpointPx(name, fallback)}px)`, true);
 }
 //#endregion
+//#region ../web/api.ts
+/**
+* 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) {
+	const fd = new FormData();
+	fd.append("file", file);
+	const r = await fetch("/api/upload", {
+		method: "POST",
+		body: fd
+	});
+	if (!r.ok) return null;
+	const j = await r.json();
+	const name = j.name ?? j.filename;
+	if (!name) return null;
+	return {
+		name,
+		...j.mime ? { mime: j.mime } : {},
+		...j.size != null ? { size: j.size } : {}
+	};
+}
+//#endregion
 //#region src/ui/sse.ts
 async function* readSse(body) {
 	const reader = body.getReader();
@@ -6147,14 +6238,13 @@ async function* readSse(body) {
 }
 //#endregion
 //#region src/ui/chat-api.ts
-/** Транспорт веб-чату. Куки сесії їдуть автоматично (same-origin), тому окремої
-*  авторизації тут немає — гейт стоїть на сервері. */
+/** Web-chat transport. Session cookies are sent automatically (same-origin), so there is no
+*  separate authorization here; the gate is on the server. */
 var BASE = "/api/plugins/webchat/user";
 /**
-* Кидає на будь-якій відмові, зокрема 404 — «плагін вимкнули вже ПІСЛЯ того, як
-* бандл віджета завантажився». Окремого `null` для цього випадку немає навмисно:
-* викликач однаково лишає поточний список розмов, тож два коди повернення
-* означали б рівно одне.
+* Throws on any rejection, including 404 (“plugin was disabled AFTER the widget bundle
+* loaded”). There is deliberately no separate `null` for this case: the caller keeps
+* the current thread list either way, so two return codes would mean the same thing.
 */
 async function fetchThreads() {
 	const r = await fetch(`${BASE}/threads`, {
@@ -6182,7 +6272,8 @@ async function sendMessage(req) {
 			convId: req.convId,
 			text: req.text,
 			replyTo: req.replyTo,
-			context: req.context
+			context: req.context,
+			...req.attachments?.length ? { attachments: req.attachments } : {}
 		}),
 		signal: req.signal
 	});
@@ -6278,7 +6369,7 @@ function useChat() {
 		pending,
 		pendingReasoning,
 		error,
-		send: useCallback((text, context) => {
+		send: useCallback((text, context, attachments = []) => {
 			if (!text.trim() || sendingRef.current) return false;
 			sendingRef.current = true;
 			const myTurn = turnRef.current;
@@ -6289,7 +6380,8 @@ function useChat() {
 				msgId: `local-${newId()}`,
 				role: "user",
 				text,
-				ts: Math.floor(Date.now() / 1e3)
+				ts: Math.floor(Date.now() / 1e3),
+				...attachments.length ? { attachments } : {}
 			}]);
 			setPending("");
 			const ctl = new AbortController();
@@ -6303,6 +6395,7 @@ function useChat() {
 						text,
 						replyTo: headRef.current,
 						context,
+						attachments,
 						signal: ctl.signal,
 						onDelta: (t) => {
 							if (turnRef.current !== myTurn) return;
@@ -6358,8 +6451,8 @@ function useChat() {
 }
 //#endregion
 //#region src/ui/use-page-context.ts
-/** Контекст поточної сторінки для агента. Роути SPA: `/:library/:type[/:id]`;
-*  системні гілки (settings, browse) віддаємо лише шляхом. */
+/** Current-page context for the agent. SPA routes: `/:library/:type[/:id]`;
+*  system branches (settings, browse) are returned by path only. */
 function usePageContext() {
 	const { pathname } = useLocation();
 	const parts = pathname.split("/").filter(Boolean);
@@ -29005,9 +29098,8 @@ function remarkGfm(options) {
 //#endregion
 //#region src/ui/internal-link.ts
 var SEGMENT = /^[A-Za-z0-9._~%-]+$/;
-/** Повертає захоплені значення ':param' при збігу, або null. '*' легальний
-*  лише останнім сегментом шаблону — тому ця гілка може повернутись одразу,
-*  не дочитуючи got до кінця. */
+/** Returns captured ':param' values on a match, or null. '*' is legal only as the
+*  last pattern segment, so this branch may return immediately without reading got to the end. */
 function matchesPattern(pathname, pattern) {
 	const got = pathname.split("/").filter(Boolean);
 	const want = pattern.split("/").filter(Boolean);
@@ -29053,9 +29145,9 @@ function classifyHref(href, origin, routes, pairs = []) {
 }
 //#endregion
 //#region src/ui/chat-nav.tsx
-/** Що робити з віджетом, коли користувач пішов по лінку з відповіді.
-*  Колбек дає ChatWidget (він володіє mode/open) — щоб не тягнути проп
-*  через ChatMessages і Bubble. */
+/** What to do with the widget when the user follows a link from a response.
+*  ChatWidget supplies the callback (it owns mode/open), avoiding a prop
+*  threaded through ChatMessages and Bubble. */
 var ChatNavContext = createContext(() => {});
 function ChatNavProvider({ onNavigate, children }) {
 	return /* @__PURE__ */ jsx(ChatNavContext.Provider, {
@@ -29115,31 +29207,37 @@ function ChatMessages({ messages, pending, pendingReasoning }) {
 		children: [messages.map((m) => /* @__PURE__ */ jsx(Bubble, {
 			role: m.role,
 			text: m.text,
-			reasoning: m.reasoning
+			reasoning: m.reasoning,
+			attachments: m.attachments
 		}, m.msgId)), pending !== null && /* @__PURE__ */ jsx(Bubble, {
 			role: "assistant",
 			text: pending || t("webchat.thinking"),
-			reasoning: pendingReasoning,
-			live: true
+			reasoning: pendingReasoning
 		})]
 	});
 }
 /**
-* memo: під час стріму батько ререндериться на КОЖНУ дельту (кілька разів на
-* секунду). Без memo кожен такт заново рендерив би (і, отже, заново парсив
-* markdown) усіх уже готових повідомлень, поки жива лише одна бульбашка знизу.
-* Props тут — примітиви, тож дефолтного поверхневого порівняння досить.
+* memo: during streaming, the parent re-renders on EVERY delta (several times per
+* second). Without memo, each tick would re-render (and therefore re-parse markdown)
+* for every completed message while only one bubble at the bottom is changing.
+* The props are primitives, so the default shallow comparison is sufficient.
 */
-var Bubble = memo(function Bubble({ role, text, reasoning, live }) {
+var Bubble = memo(function Bubble({ role, text, reasoning, attachments }) {
 	const { t } = useTranslation();
-	if (role === "user") return /* @__PURE__ */ jsx("div", {
+	if (role === "user") return /* @__PURE__ */ jsxs("div", {
 		className: "self-end max-w-[85%] rounded-2xl rounded-br-sm bg-accent/15 px-3 py-2 text-sm whitespace-pre-wrap break-words",
-		children: text
+		children: [attachments?.length ? /* @__PURE__ */ jsx("div", {
+			className: "mb-1.5 flex flex-wrap gap-1",
+			children: attachments.map((a) => /* @__PURE__ */ jsx("span", {
+				className: "inline-flex max-w-full items-center rounded-md bg-bg/60 px-1.5 py-0.5 text-xs",
+				title: a.name,
+				children: a.label ?? a.name
+			}, a.name))
+		}) : null, text]
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "self-start max-w-[95%] min-w-0 rounded-2xl rounded-bl-sm bg-elevated px-3 py-2 text-sm break-words",
 		children: [reasoning ? /* @__PURE__ */ jsxs("details", {
-			open: live,
 			className: "mb-2 rounded-lg border border-border px-2 py-1",
 			children: [/* @__PURE__ */ jsx("summary", {
 				className: "cursor-pointer select-none text-xs text-muted",
@@ -29156,37 +29254,91 @@ var Bubble = memo(function Bubble({ role, text, reasoning, live }) {
 });
 //#endregion
 //#region src/ui/ChatComposer.tsx
-function ChatComposer({ streaming, onSend, onStop }) {
+function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploadError, onPickFiles, onRemoveAttachment }) {
 	const { t } = useTranslation();
 	const [text, setText] = useState("");
 	function submit() {
 		if (!text.trim() || streaming) return;
-		if (onSend(text.trim())) setText("");
+		if (onSend(text.trim(), attachments)) setText("");
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex shrink-0 items-end gap-2 border-t border-border p-2",
-		children: [/* @__PURE__ */ jsx("textarea", {
-			className: "flex-1 resize-none rounded-lg border border-border bg-bg px-3 py-2 text-sm max-h-32",
-			rows: 1,
-			value: text,
-			placeholder: t("webchat.placeholder"),
-			onChange: (e) => setText(e.target.value),
-			onKeyDown: (e) => {
-				if (e.key === "Enter" && !e.shiftKey) {
-					e.preventDefault();
-					submit();
-				}
-			}
-		}), streaming ? /* @__PURE__ */ jsx("button", {
-			"aria-label": t("webchat.stop"),
-			className: "rounded-lg p-2 hover:bg-elevated",
-			onClick: onStop,
-			children: /* @__PURE__ */ jsx(Square, { size: 18 })
-		}) : /* @__PURE__ */ jsx("button", {
-			"aria-label": t("webchat.send"),
-			className: "rounded-lg p-2 hover:bg-elevated",
-			onClick: submit,
-			children: /* @__PURE__ */ jsx(Send, { size: 18 })
+		className: "flex shrink-0 flex-col gap-2 border-t border-border p-2",
+		children: [(attachments.length > 0 || uploadError) && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-1.5 px-1",
+			"data-chat-attachments": true,
+			children: [
+				attachments.map((a, i) => /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex min-w-0 max-w-full items-center gap-1 rounded-md bg-elevated px-2 py-1 text-xs",
+					children: [
+						/* @__PURE__ */ jsx(FileText, {
+							size: 13,
+							className: "shrink-0 text-muted"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "max-w-48 truncate",
+							children: a.label ?? a.name
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": t("webchat.removeAttachment", { name: a.label ?? a.name }),
+							className: "shrink-0 rounded p-0.5 text-muted hover:text-danger",
+							onClick: () => onRemoveAttachment(i),
+							children: /* @__PURE__ */ jsx(X, { size: 13 })
+						})
+					]
+				}, `${a.name}-${i}`)),
+				uploading && /* @__PURE__ */ jsx(LoaderCircle, {
+					size: 14,
+					className: "animate-spin text-muted",
+					"aria-label": t("webchat.uploading")
+				}),
+				uploadError && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-danger",
+					children: t(uploadError)
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-end gap-2",
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					"aria-label": t("webchat.attach"),
+					className: `cursor-pointer rounded-lg p-2 text-muted hover:bg-elevated hover:text-accent ${uploading ? "pointer-events-none opacity-60" : ""}`,
+					children: [/* @__PURE__ */ jsx(Paperclip, { size: 18 }), /* @__PURE__ */ jsx("input", {
+						type: "file",
+						multiple: true,
+						className: "hidden",
+						disabled: uploading,
+						onChange: (e) => {
+							if (e.target.files?.length) onPickFiles(e.target.files);
+							e.currentTarget.value = "";
+						}
+					})]
+				}),
+				/* @__PURE__ */ jsx("textarea", {
+					className: "flex-1 resize-none rounded-lg border border-border bg-bg px-3 py-2 text-sm max-h-32",
+					rows: 1,
+					value: text,
+					placeholder: t("webchat.placeholder"),
+					onChange: (e) => setText(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" && !e.shiftKey) {
+							e.preventDefault();
+							submit();
+						}
+					}
+				}),
+				streaming ? /* @__PURE__ */ jsx("button", {
+					"aria-label": t("webchat.stop"),
+					className: "rounded-lg p-2 hover:bg-elevated",
+					onClick: onStop,
+					children: /* @__PURE__ */ jsx(Square, { size: 18 })
+				}) : /* @__PURE__ */ jsx("button", {
+					"aria-label": t("webchat.send"),
+					className: "rounded-lg p-2 hover:bg-elevated",
+					onClick: submit,
+					children: /* @__PURE__ */ jsx(Send, { size: 18 })
+				})
+			]
 		})]
 	});
 }
@@ -29217,9 +29369,69 @@ function ChatThreadList({ threads, activeId, onOpen, onNew, className = "w-[220p
 }
 //#endregion
 //#region src/ui/ChatWidget.tsx
-/** Що робити з віджетом після переходу по лінку з відповіді. На desktop панель
-*  380px не заважає читати сторінку (а модаль із затемненням — заважає, тож
-*  згортається в неї); нижче nav-брейкпоінта панель з'їдає майже екран. */
+var MAX_CHAT_UPLOAD_BYTES = 25 * 1024 * 1024;
+function isFileDrag(e) {
+	return Array.from(e.dataTransfer.types).includes("Files");
+}
+/** One drop surface per popup. The overlay deliberately covers the header, feed, and composer. */
+function ChatDropSurface({ children, onFiles, className }) {
+	const { t } = useTranslation();
+	const [dragging, setDragging] = useState(false);
+	const depth = useRef(0);
+	function enter(e) {
+		if (!isFileDrag(e)) return;
+		e.preventDefault();
+		depth.current += 1;
+		setDragging(true);
+	}
+	function leave(e) {
+		if (!isFileDrag(e)) return;
+		e.preventDefault();
+		depth.current = Math.max(0, depth.current - 1);
+		if (depth.current === 0) setDragging(false);
+	}
+	function drop(e) {
+		if (!isFileDrag(e)) return;
+		e.preventDefault();
+		depth.current = 0;
+		setDragging(false);
+		onFiles(Array.from(e.dataTransfer.files));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		onDragEnter: enter,
+		onDragLeave: leave,
+		onDragOver: (e) => {
+			if (isFileDrag(e)) {
+				e.preventDefault();
+				e.dataTransfer.dropEffect = "copy";
+			}
+		},
+		onDrop: drop,
+		children: [children, dragging && /* @__PURE__ */ jsx("div", {
+			"data-chat-drop-overlay": true,
+			"data-testid": "chat-drop-overlay",
+			className: "pointer-events-none absolute inset-0 z-50 grid place-items-center bg-surface/95 p-6 text-center backdrop-blur-sm",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full w-full flex-col items-center justify-center rounded-2xl border-2 border-dashed border-accent bg-accent/10 text-accent",
+				children: [
+					/* @__PURE__ */ jsx(Upload, { size: 34 }),
+					/* @__PURE__ */ jsx("span", {
+						className: "mt-3 text-base font-medium",
+						children: t("webchat.dropFiles")
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "mt-1 text-xs text-muted",
+						children: t("webchat.dropFilesHint")
+					})
+				]
+			})
+		})]
+	});
+}
+/** What to do with the widget after following a link from a response. On desktop a 380px
+*  panel does not obstruct the page (a darkened modal does, so it collapses into it);
+*  below the nav breakpoint the panel consumes nearly the whole screen. */
 function nextModeAfterNav(wideNav) {
 	return wideNav ? "panel" : "bubble";
 }
@@ -29229,6 +29441,9 @@ function ChatWidget() {
 	const page = usePageContext();
 	const [mode, setMode] = useState("bubble");
 	const [threadsOpen, setThreadsOpen] = useState(false);
+	const [attachments, setAttachments] = useState([]);
+	const [uploading, setUploading] = useState(false);
+	const [uploadError, setUploadError] = useState(null);
 	const wide = useMinWidth("sm", 640);
 	const wideNav = useMinWidth("nav", 768);
 	const onChatNavigate = useCallback(() => {
@@ -29263,8 +29478,36 @@ function ChatWidget() {
 	}, [isOpen, chat.loadThreads]);
 	function startNew() {
 		chat.newConversation();
+		setAttachments([]);
+		setUploadError(null);
 		setThreadsOpen(false);
 	}
+	const pickFiles = useCallback(async (files) => {
+		if (!files.length) return;
+		setUploadError(null);
+		setUploading(true);
+		const added = [];
+		let error = null;
+		for (const file of files) {
+			if (file.size > MAX_CHAT_UPLOAD_BYTES) {
+				error ??= "webchat.uploadTooLarge";
+				continue;
+			}
+			try {
+				const rec = await uploadFile(file);
+				if (rec) added.push({
+					...rec,
+					label: file.name
+				});
+				else error ??= "webchat.uploadFailed";
+			} catch {
+				error ??= "webchat.uploadFailed";
+			}
+		}
+		if (added.length) setAttachments((prev) => [...prev, ...added]);
+		setUploading(false);
+		if (error) setUploadError(error);
+	}, []);
 	const hasConversation = chat.messages.length > 0 || chat.pending !== null;
 	const header = /* @__PURE__ */ jsxs("div", {
 		className: "flex shrink-0 items-center justify-between border-b border-border px-3 py-2",
@@ -29319,7 +29562,19 @@ function ChatWidget() {
 				}),
 				/* @__PURE__ */ jsx(ChatComposer, {
 					streaming: chat.pending !== null,
-					onSend: (text) => chat.send(text, page),
+					attachments,
+					uploading,
+					uploadError,
+					onPickFiles: (files) => void pickFiles(Array.from(files)),
+					onRemoveAttachment: (index) => setAttachments((prev) => prev.filter((_, i) => i !== index)),
+					onSend: (text, refs) => {
+						const accepted = refs.length ? chat.send(text, page, refs) : chat.send(text, page);
+						if (accepted) {
+							setAttachments([]);
+							setUploadError(null);
+						}
+						return accepted;
+					},
 					onStop: chat.stop
 				})
 			]
@@ -29331,7 +29586,8 @@ function ChatWidget() {
 		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 })
 	});
-	if (mode === "panel") return /* @__PURE__ */ jsxs("div", {
+	if (mode === "panel") return /* @__PURE__ */ jsxs(ChatDropSurface, {
+		onFiles: pickFiles,
 		className: "fixed bottom-20 right-4 z-40 flex h-[560px] max-h-[80dvh] w-[380px] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-2xl border border-border bg-surface shadow-xl nav:bottom-4",
 		children: [header, conversation]
 	});
@@ -29346,21 +29602,27 @@ function ChatWidget() {
 		}), /* @__PURE__ */ jsx(DialogContent, {
 			hideClose: true,
 			className: "h-[85dvh] w-full p-0 md:h-[85dvh] md:w-[80vw] md:max-w-[1040px] md:overflow-y-hidden",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex h-full min-h-0 flex-col",
-				children: [header, /* @__PURE__ */ jsxs("div", {
-					className: "flex min-h-0 flex-1",
-					children: [(wide || threadsOpen) && /* @__PURE__ */ jsx(ChatThreadList, {
-						threads: chat.threads,
-						activeId: chat.convId,
-						onOpen: (id) => {
-							chat.open(id);
-							setThreadsOpen(false);
-						},
-						onNew: startNew,
-						className: wide ? "w-[220px] shrink-0" : "w-full"
-					}), (wide || !threadsOpen) && conversation]
-				})]
+			children: /* @__PURE__ */ jsx(ChatDropSurface, {
+				onFiles: pickFiles,
+				className: "h-full",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex h-full min-h-0 flex-col",
+					children: [header, /* @__PURE__ */ jsxs("div", {
+						className: "flex min-h-0 flex-1",
+						children: [(wide || threadsOpen) && /* @__PURE__ */ jsx(ChatThreadList, {
+							threads: chat.threads,
+							activeId: chat.convId,
+							onOpen: (id) => {
+								chat.open(id);
+								setAttachments([]);
+								setUploadError(null);
+								setThreadsOpen(false);
+							},
+							onNew: startNew,
+							className: wide ? "w-[220px] shrink-0" : "w-full"
+						}), (wide || !threadsOpen) && conversation]
+					})]
+				})
 			})
 		})]
 	});

package/dist/runtime/actions.d.ts

@@ -11,6 +11,12 @@ export interface HistoryMsg {
     text: string;
     ts: number;
     reasoning?: string;
+    attachments?: {
+        name: string;
+        mime?: string;
+        size?: number;
+        label?: string;
+    }[];
 }
 export declare function threadsAction(_body: Record<string, unknown>, caller: ActionCaller): Promise<{
     threads: ThreadSummary[];

package/dist/runtime/actions.js

@@ -32,6 +32,7 @@ export async function historyAction(body, caller) {
             text: m.text,
             ts: m.ts,
             ...(reasoningByBot.has(m.msgId) ? { reasoning: reasoningByBot.get(m.msgId) } : {}),
+            ...(m.attachments?.length ? { attachments: m.attachments } : {}),
         })),
         headMsgId: visible.at(-1)?.msgId ?? null,
     };

package/dist/runtime/chain-store.d.ts

@@ -8,6 +8,7 @@ export declare function recordUser(m: {
     msgId: string;
     sender?: string | null;
     text: string;
+    attachments?: ConvMessage['attachments'];
     ts: number;
     replyToId: string | null;
 }): Promise<void>;

package/dist/runtime/chain-store.js

@@ -10,7 +10,17 @@ export function chatPrefixFor(userId) {
     return `u:${userId}:`;
 }
 export async function recordUser(m) {
-    await putThreadMessage({ connector: CONNECTOR, chatId: m.chatId, msgId: m.msgId, role: 'user', sender: m.sender ?? null, text: m.text, ts: m.ts, replyToId: m.replyToId });
+    await putThreadMessage({
+        connector: CONNECTOR,
+        chatId: m.chatId,
+        msgId: m.msgId,
+        role: 'user',
+        sender: m.sender ?? null,
+        ...(m.attachments?.length ? { attachments: m.attachments } : {}),
+        text: m.text,
+        ts: m.ts,
+        replyToId: m.replyToId,
+    });
 }
 export async function recordAssistant(m) {
     if (m.botMsgId == null || !m.text.trim())
@@ -43,7 +53,14 @@ export async function buildChain(headMsgId, opts) {
         if (!stored)
             break;
         if (stored.role !== 'reasoning') {
-            acc.push({ role: stored.role, content: stored.text, sender: stored.sender, msgId: stored.msgId, ts: stored.ts });
+            acc.push({
+                role: stored.role,
+                content: stored.text,
+                sender: stored.sender,
+                ...(stored.attachments ? { attachments: stored.attachments } : {}),
+                msgId: stored.msgId,
+                ts: stored.ts,
+            });
         }
         cur = stored.replyToId;
     }

package/dist/runtime/send.js

@@ -34,9 +34,10 @@ export async function sendAction(body, ctx, deps = {}) {
     const msgId = randomUUID();
     const botMsgId = randomUUID();
     const nowSec = Math.floor(Date.now() / 1000);
+    const attachments = parseAttachments(body['attachments']);
     const explicitReplyTo = typeof body['replyTo'] === 'string' && body['replyTo'] ? body['replyTo'] : null;
     const replyTo = explicitReplyTo ?? (await history(chatId, 1)).at(-1)?.msgId ?? null;
-    await recordUser({ chatId, msgId, sender: ctx.caller.id, text, ts: nowSec, replyToId: replyTo });
+    await recordUser({ chatId, msgId, sender: ctx.caller.id, text, attachments, ts: nowSec, replyToId: replyTo });
     const messages = await buildChain(msgId, { chatId });
     const { connector, recorded } = makeStreamingConnector({
         chatId,
@@ -55,3 +56,21 @@ export async function sendAction(body, ctx, deps = {}) {
     }, { policy: policy() });
     ctx.emit('done', { msgId: recorded(), parentMsgId: msgId });
 }
+function parseAttachments(value) {
+    if (!Array.isArray(value))
+        return undefined;
+    const refs = value.flatMap((item) => {
+        if (typeof item !== 'object' || item === null)
+            return [];
+        const r = item;
+        if (typeof r['name'] !== 'string' || !r['name'])
+            return [];
+        return [{
+                name: r['name'],
+                ...(typeof r['mime'] === 'string' ? { mime: r['mime'] } : {}),
+                ...(typeof r['size'] === 'number' ? { size: r['size'] } : {}),
+                ...(typeof r['label'] === 'string' ? { label: r['label'] } : {}),
+            }];
+    });
+    return refs.length ? refs : undefined;
+}

package/dist/schema.js

@@ -4391,11 +4391,11 @@ function resolveUnits(u) {
 //#endregion
 //#region ../sdk/src/currencies.ts
 /**
-* Валюти з вбудованого `Intl` (ISO 4217) — БЕЗ hand-list і без npm-залежності.
-* Коди — `Intl.supportedValuesOf('currency')`; символи/назви локалізовані через
+* Currencies from built-in `Intl` (ISO 4217), with NO hand list or npm dependency.
+* Codes come from `Intl.supportedValuesOf('currency')`; symbols/names are localized through
 * `Intl.NumberFormat`/`Intl.DisplayNames`.
 */
-/** Усі ISO 4217 коди. Fallback — кілька основних (на випадок старого рантайму). */
+/** All ISO 4217 codes. Fallback: several major codes for older runtimes. */
 var CURRENCY_CODES = (() => {
 	try {
 		return Intl.supportedValuesOf("currency");
@@ -4410,26 +4410,26 @@ var CURRENCY_CODES = (() => {
 	}
 })();
 var CODE_SET = new Set(CURRENCY_CODES);
-/** Чи валідний ISO 4217 код. */
+/** Whether an ISO 4217 code is valid. */
 var isCurrencyCode = (c) => CODE_SET.has(c);
 //#endregion
 //#region ../sdk/src/fields/validation.ts
-/** Структуроване повідомлення для zod: JSON {code, params}. Декодує mutate.ts. */
+/** Structured message for zod: JSON {code, params}. Decoded by mutate.ts. */
 function vmsg(code, params) {
 	return JSON.stringify(params ? {
 		code,
 		params
 	} : { code });
 }
-/** v4 error-map: повідомлення для відсутнього значення (колишній required_error). */
+/** v4 error-map: message for a missing value (formerly required_error). */
 function reqErr(code = "required") {
 	return { error: (iss) => iss.input === void 0 ? vmsg(code) : void 0 };
 }
-/** v4 error-map: повідомлення для невалідного типу (колишній invalid_type_error). */
+/** v4 error-map: message for an invalid type (formerly invalid_type_error). */
 function typeErr(code = "invalid_type") {
 	return { error: (iss) => iss.code === "invalid_type" ? vmsg(code) : void 0 };
 }
-/** v4 error-map: required + invalid_type разом (колишні required_error + invalid_type_error). */
+/** v4 error-map: required + invalid_type together (formerly required_error + invalid_type_error). */
 function reqTypeErr() {
 	return { error: (iss) => iss.code === "invalid_type" ? iss.input === void 0 ? vmsg("required") : vmsg("invalid_type") : void 0 };
 }
@@ -4447,10 +4447,10 @@ function jsonValue(raw) {
 	return raw;
 }
 /**
-* Фабрика для полів, що зберігають JSON і валідуються вкладеною zod-схемою.
-* Приймає нативне object/array (native form-state) АБО JSON-рядок (legacy).
-* Single-parse через jsonValue → inner.safeParse → issue `code`; рядок, що не
-* розпарсився, лишається рядком → код 'json'.
+* Factory for fields that store JSON and validate it with a nested zod schema.
+* Accepts a native object/array (native form state) OR a JSON string (legacy).
+* Single parse through jsonValue → inner.safeParse → issue `code`; an unparseable
+* string remains a string → code 'json'.
 */
 function jsonRefined(inner, code) {
 	return unknown().superRefine((raw, ctx) => {
@@ -4522,16 +4522,16 @@ function normalizeOpts(rawIn) {
 //#endregion
 //#region ../sdk/src/field-presets.ts
 /**
-* Пресети полів — тонкі обгортки над базовими примітивами з fields.ts.
+* Field presets are thin wrappers around the primitives in fields.ts.
 *
-* Кожен пресет = один kind (один віджет). Пресети не приймають `format` —
-* вони самі є семантичними типами. min/max/step — через `config`.
+* Each preset = one kind (one widget). Presets do not accept `format`;
+* they are semantic types themselves. min/max/step go through `config`.
 *
-* Пресети додаються до `f` через `composeF`, який гарантує, що жоден пресет
-* не перебиває примітив.
+* Presets are added to `f` through `composeF`, which guarantees no preset
+* overrides a primitive.
 *
-* Циклічний імпорт з fields.ts безпечний: фабрики/хелпери — hoisted-декларації,
-* а пресети викликають їх лише в тілі своїх функцій.
+* The cyclic import from fields.ts is safe: factories/helpers are hoisted declarations,
+* and presets call them only inside their function bodies.
 */
 function email(raw) {
 	const o = normalizeOpts(raw);
@@ -4705,9 +4705,9 @@ function link(raw) {
 	}, o.multiple ?? false));
 }
 var TEL_RE = /^\+?[\d\s()-]{4,}$/;
-/** Loose URL: будь-який scheme:// АБО host-з-крапкою (+опц. порт/шлях). Без пробілів. */
+/** Loose URL: any scheme:// OR dotted host (optional port/path). No spaces. */
 var LINK_RE = /^([a-z][a-z0-9+.-]*:\/\/\S+|[\w-]+(\.[\w-]+)+(:\d+)?(\/\S*)?)$/i;
-/** CSS named colors (CSS Color Module L4) — для f.colorname. */
+/** CSS named colors (CSS Color Module L4) for f.colorname. */
 var CSS_COLOR_NAMES = /* @__PURE__ */ new Set([
 	"aliceblue",
 	"antiquewhite",
@@ -4966,7 +4966,7 @@ function reminder(raw) {
 }
 var _real = real;
 var _int = int;
-/** Відсоток 0..100 — real з rules:{min:0,max:100}. */
+/** Percentage 0..100 — real with rules:{min:0,max:100}. */
 function percent(o) {
 	return _real({
 		...o,
@@ -4977,7 +4977,7 @@ function percent(o) {
 		}
 	});
 }
-/** Рік — int з rules:{min:1900,max:2100}; межі можна перекрити через rules.min/max. */
+/** Year — int with rules:{min:1900,max:2100}; bounds can be overridden via rules.min/max. */
 function year(o) {
 	return _int({
 		...o,
@@ -6027,13 +6027,6 @@ function wrapKey(opts, meta) {
 			role: opts.role
 		}
 	};
-	if (opts.pinned) m = {
-		...m,
-		hints: {
-			...m.hints,
-			pinned: true
-		}
-	};
 	if (opts.default !== void 0) m = {
 		...m,
 		default: opts.default

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-B5heKPXv.js")
+	load: () => import("./ChatWidget-Cew9znAf.js")
 }] });
 //#endregion
 export { ui_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffer-org/plugin-webchat",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "engines": {
     "node": ">=24"
@@ -26,9 +26,9 @@
     "test:ui": "vitest run --root ."
   },
   "dependencies": {
-    "@coffer-org/plugin-orchestrator": "^2.1.0",
-    "@coffer-org/sdk": "^2.1.0",
-    "@coffer-org/server": "^2.2.0",
+    "@coffer-org/plugin-orchestrator": "^2.1.1",
+    "@coffer-org/sdk": "^2.1.1",
+    "@coffer-org/server": "^2.2.2",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1"
   },