@8wave/ai-elements 0.111.0-beta.3 → 0.111.0-beta.8

package/dist-vue/_chunks/{PkChatbotInput-JnHaRlfk.js → PkChatbotInput-MSpF6SB6.js}

@@ -1,29 +1,29 @@
-import { t as e } from "./PkStreamingMarkdown-D8_LwZMR.js";
+import { t as e } from "./PkStreamingMarkdown-D0IOaETI.js";
 import { t } from "./PkChatbotFilePreview-CwiVQDF2.js";
 import { VvButton as n, VvDropdown as r, VvDropdownAction as i, VvIcon as a } from "@volverjs/ui-vue/components";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as ee, nextTick as g, normalizeClass as _, normalizeProps as te, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderList as ne, renderSlot as S, toDisplayString as C, unref as re, useModel as w, useTemplateRef as T, watch as ie, withCtx as E, withKeys as ae, withModifiers as D } from "vue";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, nextTick as _, normalizeClass as v, normalizeProps as ee, onBeforeUnmount as y, onMounted as b, openBlock as x, ref as S, renderList as te, renderSlot as C, toDisplayString as w, unref as T, useId as ne, useModel as E, useTemplateRef as D, watch as re, withCtx as O, withKeys as ie, withModifiers as ae } from "vue";
 import { useDropZone as oe } from "@vueuse/core";
 //#region ../../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js
-var O = /* @__PURE__ */ new Map();
-function k(e) {
-	var t = O.get(e);
+var k = /* @__PURE__ */ new Map();
+function A(e) {
+	var t = k.get(e);
 	t && t.destroy();
 }
-function A(e) {
-	var t = O.get(e);
+function j(e) {
+	var t = k.get(e);
 	t && t.update();
 }
-var j = null;
-typeof window > "u" ? ((j = function(e) {
+var M = null;
+typeof window > "u" ? ((M = function(e) {
 	return e;
 }).destroy = function(e) {
 	return e;
-}, j.update = function(e) {
+}, M.update = function(e) {
 	return e;
-}) : ((j = function(e, t) {
+}) : ((M = function(e, t) {
 	return e && Array.prototype.forEach.call(e.length ? e : [e], function(e) {
 		return function(e) {
-			if (e && e.nodeName && e.nodeName === "TEXTAREA" && !O.has(e)) {
+			if (e && e.nodeName && e.nodeName === "TEXTAREA" && !k.has(e)) {
 				var t, n = null, r = window.getComputedStyle(e), i = (t = e.value, function() {
 					o({
 						testForHeightReduction: t === "" || !e.value.startsWith(t),
@@ -32,7 +32,7 @@ typeof window > "u" ? ((j = function(e) {
 				}), a = function(t) {
 					e.removeEventListener("autosize:destroy", a), e.removeEventListener("autosize:update", s), e.removeEventListener("input", i), window.removeEventListener("resize", s), Object.keys(t).forEach(function(n) {
 						return e.style[n] = t[n];
-					}), O.delete(e);
+					}), k.delete(e);
 				}.bind(e, {
 					height: e.style.height,
 					resize: e.style.resize,
@@ -41,7 +41,7 @@ typeof window > "u" ? ((j = function(e) {
 					overflowX: e.style.overflowX,
 					wordWrap: e.style.wordWrap
 				});
-				e.addEventListener("autosize:destroy", a), e.addEventListener("autosize:update", s), e.addEventListener("input", i), window.addEventListener("resize", s), e.style.overflowX = "hidden", e.style.wordWrap = "break-word", O.set(e, {
+				e.addEventListener("autosize:destroy", a), e.addEventListener("autosize:update", s), e.addEventListener("input", i), window.addEventListener("resize", s), e.style.overflowX = "hidden", e.style.wordWrap = "break-word", k.set(e, {
 					destroy: a,
 					update: s
 				}), s();
@@ -73,14 +73,14 @@ typeof window > "u" ? ((j = function(e) {
 		}(e);
 	}), e;
 }).destroy = function(e) {
-	return e && Array.prototype.forEach.call(e.length ? e : [e], k), e;
-}, j.update = function(e) {
 	return e && Array.prototype.forEach.call(e.length ? e : [e], A), e;
+}, M.update = function(e) {
+	return e && Array.prototype.forEach.call(e.length ? e : [e], j), e;
 });
-var M = j, N = ["type"], P = {
+var N = M, P = ["type"], F = {
 	key: 0,
 	class: "pk-chat-button__label"
-}, F = /* @__PURE__ */ m({
+}, I = /* @__PURE__ */ m({
 	__name: "PkChatButton",
 	props: {
 		icon: {},
@@ -91,13 +91,13 @@ var M = j, N = ["type"], P = {
 	setup(e) {
 		return (t, n) => {
 			let r = a;
-			return b(), u("button", {
-				class: _(["pk-chat-button", [e.modifiers ? `pk-chat-button--${e.modifiers}` : void 0, { "pk-chat-button--labelled": e.label }]]),
+			return x(), u("button", {
+				class: v(["pk-chat-button", [e.modifiers ? `pk-chat-button--${e.modifiers}` : void 0, { "pk-chat-button--labelled": e.label }]]),
 				type: e.type
 			}, [p(r, {
 				name: e.icon,
 				class: "pk-chat-button__icon"
-			}, null, 8, ["name"]), e.label ? (b(), u("span", P, C(e.label), 1)) : l("", !0)], 10, N);
+			}, null, 8, ["name"]), e.label ? (x(), u("span", F, w(e.label), 1)) : l("", !0)], 10, P);
 		};
 	}
 }), se = { class: "pk-chatbot-input" }, ce = {
@@ -115,9 +115,11 @@ var M = j, N = ["type"], P = {
 	"onClick"
 ], pe = ["accept"], me = ["accept"], he = { class: "pk-chatbot-input__content" }, ge = [
 	"value",
-	"placeholder",
-	"onKeydown"
-], _e = { class: "opacity-60" }, I = /* @__PURE__ */ m({
+	"aria-label",
+	"aria-describedby",
+	"aria-invalid",
+	"placeholder"
+], _e = ["id"], ve = { class: "opacity-60" }, L = /* @__PURE__ */ m({
 	__name: "PkChatbotInput",
 	props: /*@__PURE__*/ h({
 		placeholder: {},
@@ -143,78 +145,84 @@ var M = j, N = ["type"], P = {
 		"voice-start"
 	], ["update:modelValue", "update:pendingAttachments"]),
 	setup(m, { emit: h }) {
-		let O = w(m, "modelValue"), k = w(m, "pendingAttachments"), A = h, j = m, N = T("textareaEl"), P = T("fileInputEl"), I = T("cameraInputEl"), L = T("formEl"), R = x(O.value ?? ""), z = null, B = () => {
-			z !== null && (clearTimeout(z), z = null);
-		}, ve = () => {
-			B(), O.value = R.value;
+		let k = E(m, "modelValue"), A = E(m, "pendingAttachments"), j = h, M = m, P = D("textareaEl"), F = D("fileInputEl"), L = D("cameraInputEl"), R = D("formEl"), z = S(k.value ?? ""), B = null, V = () => {
+			B !== null && (clearTimeout(B), B = null);
 		}, ye = () => {
-			B(), z = setTimeout(() => {
-				O.value = R.value, z = null;
-			}, 300);
+			V(), k.value = z.value;
 		}, be = () => {
-			R.value = N.value?.value ?? "", ye();
+			V(), B = setTimeout(() => {
+				k.value = z.value, B = null;
+			}, 300);
+		}, xe = () => {
+			z.value = P.value?.value ?? "", be();
 		};
-		ie(O, (e) => {
-			e !== R.value && (R.value = e ?? "", g(() => {
-				N.value && M.update(N.value);
+		re(k, (e) => {
+			e !== z.value && (z.value = e ?? "", _(() => {
+				P.value && N.update(P.value);
 			}));
 		});
-		let V = s(() => j.status === "streaming"), H = s(() => j.status === "submitted"), U = s(() => V.value || H.value), W = s(() => R.value.length), G = s(() => j.maxMessageLength !== void 0 && W.value > j.maxMessageLength), xe = s(() => k.value.some((e) => e.state === "uploading")), K = s(() => U.value || xe.value || G.value ? !1 : R.value.trim().length > 0), Se = "capture" in document.createElement("input"), Ce = s(() => j.fileUpload?.allowedMimeTypes?.join(",") ?? ""), q = s(() => (j.fileUpload?.allowedMimeTypes ?? []).filter((e) => e.startsWith("image/")).join(",")), J = s(() => Se && q.value.length > 0), Y = () => {
-			P.value?.click();
-		}, we = () => {
-			I.value?.click();
-		}, X = (e) => {
-			for (let t of e) A("file-select", t);
-		}, Z = (e) => {
+		let H = s(() => M.status === "streaming"), U = s(() => M.status === "submitted"), W = s(() => H.value || U.value), G = ne(), K = s(() => z.value.length), q = s(() => M.maxMessageLength !== void 0 && K.value > M.maxMessageLength), Se = s(() => A.value.some((e) => e.state === "uploading")), J = s(() => W.value || Se.value || q.value ? !1 : z.value.trim().length > 0), Ce = "capture" in document.createElement("input"), we = s(() => M.fileUpload?.allowedMimeTypes?.join(",") ?? ""), Y = s(() => (M.fileUpload?.allowedMimeTypes ?? []).filter((e) => e.startsWith("image/")).join(",")), X = s(() => Ce && Y.value.length > 0), Z = () => {
+			F.value?.click();
+		}, Te = () => {
+			L.value?.click();
+		}, Q = (e) => {
+			for (let t of e) j("file-select", t);
+		}, Ee = (e) => {
 			let t = e.target;
-			X(Array.from(t.files ?? [])), t.value = "";
-		}, Te = (e) => {
-			let t = k.value.find((t) => t.id === e);
-			t && URL.revokeObjectURL(t.localUrl), k.value = k.value.filter((t) => t.id !== e);
-		}, Q = s(() => (j.enableDragDrop ?? !0) && !!j.fileUpload?.enabled), { isOverDropZone: Ee } = oe(L, {
-			dataTypes: s(() => j.fileUpload?.allowedMimeTypes ?? []),
+			Q(Array.from(t.files ?? [])), t.value = "";
+		}, De = (e) => {
+			let t = A.value.find((t) => t.id === e);
+			t && URL.revokeObjectURL(t.localUrl), A.value = A.value.filter((t) => t.id !== e);
+		}, Oe = s(() => (M.enableDragDrop ?? !0) && !!M.fileUpload?.enabled), { isOverDropZone: ke } = oe(R, {
+			dataTypes: s(() => M.fileUpload?.allowedMimeTypes ?? []),
 			onDrop: (e) => {
-				Q.value && e && X(e);
+				Oe.value && e && Q(e);
 			}
-		}), De = x(!0), Oe = () => {
-			De.value = !1;
-		}, $ = s(() => j.attachmentNotice ? {
+		}), Ae = S(!0), je = () => {
+			Ae.value = !1;
+		}, $ = s(() => M.attachmentNotice ? {
 			id: "limit",
 			icon: "ri:information-line",
-			text: j.attachmentNotice,
-			dismiss: () => A("dismiss-attachment-notice")
-		} : j.dismissableNotice && De.value ? {
+			text: M.attachmentNotice,
+			dismiss: () => j("dismiss-attachment-notice")
+		} : M.dismissableNotice && Ae.value ? {
 			id: "dismissable",
-			markdown: j.dismissableNotice,
-			dismiss: Oe
-		} : null), ke = () => {
-			K.value && (ve(), A("submit"), R.value = "", O.value = "", g(() => {
-				N.value && (N.value.value = "", M.update(N.value));
+			markdown: M.dismissableNotice,
+			dismiss: je
+		} : null), Me = () => {
+			R.value?.querySelector("button:focus-visible") && P.value?.focus();
+		}, Ne = () => {
+			Me(), j("stop-generation");
+		}, Pe = () => {
+			J.value && (Me(), ye(), j("submit"), z.value = "", k.value = "", _(() => {
+				P.value && (P.value.value = "", N.update(P.value));
 			}));
+		}, Fe = (e) => {
+			e.shiftKey || e.isComposing || e.keyCode === 229 || (e.preventDefault(), Pe());
 		};
-		return y(() => {
-			N.value && M(N.value);
-		}), v(() => {
-			B(), N.value && M.destroy(N.value);
-			for (let e of k.value) URL.revokeObjectURL(e.localUrl);
+		return b(() => {
+			P.value && N(P.value);
+		}), y(() => {
+			V(), P.value && N.destroy(P.value);
+			for (let e of A.value) URL.revokeObjectURL(e.localUrl);
 		}), (s, h) => {
-			let g = a, v = n, y = i, x = r;
-			return b(), u("div", se, [$.value ? (b(), u("div", {
+			let _ = a, y = n, b = i, S = r;
+			return x(), u("div", se, [$.value ? (x(), u("div", {
 				key: $.value.id,
 				class: "pk-chatbot-input__notice",
 				role: "status"
 			}, [
-				$.value.icon ? (b(), c(g, {
+				$.value.icon ? (x(), c(_, {
 					key: 0,
 					name: $.value.icon,
 					class: "pk-chatbot-input__notice-icon"
 				}, null, 8, ["name"])) : l("", !0),
-				$.value.markdown ? (b(), c(e, {
+				$.value.markdown ? (x(), c(e, {
 					key: 1,
 					markdown: $.value.markdown,
 					class: "wysiwyg pk-chatbot-input__notice-text"
-				}, null, 8, ["markdown"])) : (b(), u("span", ce, C($.value.text), 1)),
-				$.value.dismiss ? (b(), c(v, {
+				}, null, 8, ["markdown"])) : (x(), u("span", ce, w($.value.text), 1)),
+				$.value.dismiss ? (x(), c(y, {
 					key: 3,
 					title: s.$t("action.close"),
 					modifiers: "action-quiet",
@@ -224,15 +232,15 @@ var M = j, N = ["type"], P = {
 				}, null, 8, ["title"])) : l("", !0)
 			])) : l("", !0), d("form", {
 				ref_key: "formEl",
-				ref: L,
+				ref: R,
 				class: "pk-chatbot-input__form",
-				onSubmit: D(ke, ["prevent"])
+				onSubmit: ae(Pe, ["prevent"])
 			}, [
-				re(Ee) && Q.value ? (b(), u("div", le, [p(g, {
+				T(ke) && Oe.value ? (x(), u("div", le, [p(_, {
 					name: "ri:upload-cloud-2-line",
 					class: "pk-chatbot-input__drop-overlay-icon"
-				}), d("span", null, C(s.$t("action.dropFile")), 1)])) : l("", !0),
-				k.value.length ? (b(), u("div", ue, [(b(!0), u(o, null, ne(k.value, (e) => (b(), c(t, {
+				}), d("span", null, w(s.$t("action.dropFile")), 1)])) : l("", !0),
+				A.value.length ? (x(), u("div", ue, [(x(!0), u(o, null, te(A.value, (e) => (x(), c(t, {
 					key: e.id,
 					"media-type": e.file.type,
 					url: e.localUrl,
@@ -242,7 +250,7 @@ var M = j, N = ["type"], P = {
 					error: e.state === "error" ? e.error : void 0,
 					removable: e.state !== "uploading",
 					compact: "",
-					onRemove: (t) => Te(e.id)
+					onRemove: (t) => De(e.id)
 				}, null, 8, [
 					"media-type",
 					"url",
@@ -254,108 +262,115 @@ var M = j, N = ["type"], P = {
 					"onRemove"
 				]))), 128))])) : l("", !0),
 				d("div", de, [
-					S(s.$slots, "prepend"),
-					m.fileUpload && m.fileUpload.enabled && (J.value || s.$slots["additional-actions"]) ? (b(), c(x, te(ee({ key: 0 }, {
+					C(s.$slots, "prepend"),
+					m.fileUpload && m.fileUpload.enabled && (X.value || s.$slots["additional-actions"]) ? (x(), c(S, ee(g({ key: 0 }, {
 						placement: "top-start",
 						modifiers: "menu",
 						flip: !0,
 						offset: 3
 					})), {
-						default: E(({ init: e, toggle: t, aria: n }) => [d("button", ee({ ref: (t) => e(t) }, n, {
+						default: O(({ init: e, toggle: t, aria: n }) => [d("button", g({ ref: (t) => e(t) }, n, {
 							class: "pk-chat-button",
 							type: "button",
 							title: s.$t("action.attachFile"),
-							disabled: U.value,
+							disabled: W.value,
 							onClick: t
-						}), [p(g, {
+						}), [p(_, {
 							name: "ri:add-line",
 							class: "pk-chat-button__icon"
 						})], 16, fe)]),
-						items: E(() => [
-							J.value ? (b(), c(y, {
+						items: O(() => [
+							X.value ? (x(), c(b, {
 								key: 0,
-								disabled: U.value || m.attachmentLimitReached,
-								onClick: we
+								disabled: W.value || m.attachmentLimitReached,
+								onClick: Te
 							}, {
-								default: E(() => [p(g, {
+								default: O(() => [p(_, {
 									name: "ri:camera-line",
 									class: "pk-chatbot-input__dropdown-icon"
-								}), f(" " + C(s.$t("action.takePhoto")), 1)]),
+								}), f(" " + w(s.$t("action.takePhoto")), 1)]),
 								_: 1
 							}, 8, ["disabled"])) : l("", !0),
-							p(y, {
-								disabled: U.value || m.attachmentLimitReached,
-								onClick: Y
+							p(b, {
+								disabled: W.value || m.attachmentLimitReached,
+								onClick: Z
 							}, {
-								default: E(() => [p(g, {
+								default: O(() => [p(_, {
 									name: "ri:attachment-line",
 									class: "pk-chatbot-input__dropdown-icon"
-								}), f(" " + C(s.$t("action.attachFile")), 1)]),
+								}), f(" " + w(s.$t("action.attachFile")), 1)]),
 								_: 1
 							}, 8, ["disabled"]),
-							S(s.$slots, "additional-actions")
+							C(s.$slots, "additional-actions")
 						]),
 						_: 3
-					}, 16)) : m.fileUpload && m.fileUpload.enabled ? (b(), c(F, {
+					}, 16)) : m.fileUpload && m.fileUpload.enabled ? (x(), c(I, {
 						key: 1,
 						icon: "ri:add-line",
 						title: s.$t("action.attachFile"),
-						disabled: U.value || m.attachmentLimitReached,
-						onClick: Y
+						disabled: W.value || m.attachmentLimitReached,
+						onClick: Z
 					}, null, 8, ["title", "disabled"])) : l("", !0),
-					m.fileUpload && m.fileUpload.enabled ? (b(), u("input", {
+					m.fileUpload && m.fileUpload.enabled ? (x(), u("input", {
 						key: 2,
 						ref_key: "fileInputEl",
-						ref: P,
+						ref: F,
 						type: "file",
 						hidden: "",
 						multiple: "",
-						accept: Ce.value,
-						onChange: Z
+						accept: we.value,
+						onChange: Ee
 					}, null, 40, pe)) : l("", !0),
-					m.fileUpload && m.fileUpload.enabled && J.value ? (b(), u("input", {
+					m.fileUpload && m.fileUpload.enabled && X.value ? (x(), u("input", {
 						key: 3,
 						ref_key: "cameraInputEl",
-						ref: I,
+						ref: L,
 						type: "file",
 						capture: "environment",
 						hidden: "",
-						accept: q.value,
-						onChange: Z
+						accept: Y.value,
+						onChange: Ee
 					}, null, 40, me)) : l("", !0),
 					d("div", he, [d("textarea", {
 						ref_key: "textareaEl",
-						ref: N,
-						value: R.value,
+						ref: P,
+						value: z.value,
 						class: "pk-chatbot-input__textarea",
 						name: "message",
 						rows: "1",
+						enterkeyhint: "send",
+						"aria-label": s.$t("label.message"),
+						"aria-describedby": m.maxMessageLength ? T(G) : void 0,
+						"aria-invalid": q.value || void 0,
 						placeholder: m.placeholder,
-						onInput: be,
-						onKeydown: ae(D(ke, ["prevent"]), ["enter"])
+						onInput: xe,
+						onKeydown: ie(Fe, ["enter"])
 					}, null, 40, ge)]),
-					m.maxMessageLength ? (b(), u("div", {
+					m.maxMessageLength ? (x(), u("div", {
 						key: 4,
-						class: _(["pk-chatbot-input__counter", { "pk-chatbot-input__counter--over": G.value }])
-					}, [f(C(s.$n(W.value, "integer")) + "/", 1), d("span", _e, C(s.$n(m.maxMessageLength, "integer")), 1)], 2)) : l("", !0),
-					m.voiceEnabled && !V.value ? (b(), c(F, {
+						id: T(G),
+						class: v(["pk-chatbot-input__counter", { "pk-chatbot-input__counter--over": q.value }])
+					}, [f(w(s.$n(K.value, "integer")) + "/", 1), d("span", ve, w(s.$n(m.maxMessageLength, "integer")), 1)], 10, _e)) : l("", !0),
+					m.voiceEnabled && !H.value ? (x(), c(I, {
 						key: 5,
 						icon: "ri:mic-line",
 						title: s.$t("action.talk"),
-						disabled: U.value,
-						onClick: h[1] ||= (e) => A("voice-start")
+						disabled: W.value,
+						onClick: h[1] ||= (e) => j("voice-start")
 					}, null, 8, ["title", "disabled"])) : l("", !0),
-					V.value ? (b(), c(F, {
+					H.value ? (x(), c(I, {
 						key: 6,
-						icon: "ri:stop-circle-line",
+						icon: "ri:stop-fill",
+						modifiers: "primary",
 						title: s.$t("action.stop"),
-						onClick: h[2] ||= (e) => A("stop-generation")
-					}, null, 8, ["title"])) : (b(), c(F, {
+						onClick: Ne
+					}, null, 8, ["title"])) : (x(), c(I, {
 						key: 7,
 						type: "submit",
-						icon: H.value ? "loading-loop" : K.value ? "ri:send-ins-fill" : "ri:send-ins-line",
-						title: K.value ? s.$t("action.submit") : s.$t("label.disabled"),
-						disabled: !K.value
+						modifiers: "primary",
+						icon: U.value ? "loading-loop" : "ri:arrow-up-line",
+						title: s.$t("action.submit"),
+						disabled: !J.value
 					}, null, 8, [
 						"icon",
 						"title",
@@ -367,6 +382,6 @@ var M = j, N = ["type"], P = {
 	}
 });
 //#endregion
-export { F as n, I as t };
+export { I as n, L as t };
 
-//# sourceMappingURL=PkChatbotInput-JnHaRlfk.js.map
+//# sourceMappingURL=PkChatbotInput-MSpF6SB6.js.map

package/dist-vue/_chunks/PkChatbotInput-MSpF6SB6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkChatbotInput-MSpF6SB6.js","names":["$t","$slots","$n"],"sources":["../../../../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js","../../../../packages/components/src/chat/PkChatButton.vue","../../../../packages/components/src/chat/PkChatButton.vue","../../../../packages/components/src/chat/PkChatbotInput.vue","../../../../packages/components/src/chat/PkChatbotInput.vue"],"sourcesContent":["var e=new Map;function t(t){var o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;\"undefined\"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&\"TEXTAREA\"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:\"\"===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener(\"autosize:destroy\",l),t.removeEventListener(\"autosize:update\",s),t.removeEventListener(\"input\",i),window.removeEventListener(\"resize\",s),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener(\"autosize:destroy\",l),t.addEventListener(\"autosize:update\",s),t.addEventListener(\"input\",i),window.addEventListener(\"resize\",s),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:l,update:s}),s()}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,c=n.overflowY;if(0!==t.scrollHeight&&(\"vertical\"===n.resize?t.style.resize=\"none\":\"both\"===n.resize&&(t.style.resize=\"horizontal\"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=\"\"),i=\"content-box\"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),\"none\"!==n.maxHeight&&i>parseFloat(n.maxHeight)?(\"hidden\"===n.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(n.maxHeight)):\"hidden\"!==n.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;\"hidden\"===n.overflow&&(t.style.textAlign=\"start\"===v?\"end\":\"start\"),a({restoreTextAlign:v,testForHeightReduction:!0})}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;export default n;\n","<script lang=\"ts\" setup>\n    /**\n     * The icon button of the chat dock: attach, send and stop in the input,\n     * mute and hang up in a live call. One component, because the call bar\n     * takes the place of the input and the two must not look like two\n     * different pieces of software.\n     *\n     * Native attributes fall through to the button, so `title`, `disabled` and\n     * `aria-pressed` are written by the caller as they would be on a `<button>`.\n     */\n    withDefaults(\n        defineProps<{\n            icon: string\n            /** Written next to the icon, for an action nobody should have to guess from a glyph. */\n            label?: string\n            type?: 'button' | 'submit'\n            /** `primary` is the filled circle of send and stop, the one action the dock is for. */\n            modifiers?: 'danger' | 'primary'\n        }>(),\n        { label: undefined, type: 'button', modifiers: undefined },\n    )\n</script>\n\n<template>\n    <button\n        class=\"pk-chat-button\"\n        :class=\"[\n            modifiers ? `pk-chat-button--${modifiers}` : undefined,\n            { 'pk-chat-button--labelled': label },\n        ]\"\n        :type=\"type\">\n        <VvIcon :name=\"icon\" class=\"pk-chat-button__icon\" />\n        <span v-if=\"label\" class=\"pk-chat-button__label\">{{ label }}</span>\n    </button>\n</template>\n\n<style lang=\"scss\">\n    .pk-chat-button {\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n        padding: var(--spacing-4);\n        border: none;\n        border-radius: var(--rounded);\n        background-color: transparent;\n        color: var(--color-word-1);\n        cursor: pointer;\n        transition: var(--transition-colors);\n\n        &:hover {\n            background-color: var(--color-surface-2);\n        }\n\n        // The fields' focus ring: a 1px surface-5 line measured 1.3:1 on the\n        // surface, under the 3:1 a focus indicator needs\n        &:focus-visible {\n            outline: var(--spacing-2) solid var(--input-focus-color);\n            outline-offset: 0;\n        }\n\n        &:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        // A toggle has to survive a glance: a crossed-out glyph alone changes\n        // too few pixels to notice mid-sentence.\n        &[aria-pressed='true'] {\n            background-color: var(--color-surface-3);\n            color: var(--color-word);\n        }\n\n        // A wash of the same red rather than a lighter red behind it: the\n        // `lighten-5` step lands close enough to the icon to leave it at about\n        // 2:1, which is a button that disappears exactly while it is being\n        // pointed at. The tint composites over whatever surface is behind, so\n        // it holds in the dark theme too.\n        &--danger {\n            color: var(--color-danger);\n\n            &:hover {\n                background-color: color-mix(\n                    in srgb,\n                    var(--color-danger) 12%,\n                    transparent\n                );\n            }\n        }\n\n        // Same 28px box as the ghost buttons, so the dock keeps its height,\n        // with a smaller glyph because a filled shape needs air around it.\n        // Its edge is visible, so it sits on the input's padding line just as\n        // the text does: a ghost glyph sat 6px further in and made the two\n        // sides of the input look unequal. Empty, it turns into a grey pad\n        // with the fields' disabled ink: a light arrow on that pad vanished,\n        // and with it the circle's edge, which is what squares the sides.\n        // The agent's color when the widget has one, like the user's bubble.\n        &--primary {\n            --pk-chat-button-fill: var(\n                --chatbot-main-color,\n                var(--color-word-1)\n            );\n\n            padding: var(--spacing-6);\n            border-radius: var(--rounded-full);\n            background-color: var(--pk-chat-button-fill);\n            color: var(--chatbot-contrast-color, var(--color-surface));\n\n            &:hover {\n                background-color: color-mix(\n                    in srgb,\n                    var(--pk-chat-button-fill) 85%,\n                    var(--color-surface)\n                );\n            }\n\n            // Off the disc, or a dark ring would sink into a dark fill\n            &:focus-visible {\n                outline-offset: var(--spacing-2);\n            }\n\n            &:disabled {\n                opacity: 1;\n                background-color: var(--color-surface-3);\n                color: var(--color-word-3);\n            }\n\n            .pk-chat-button__icon {\n                width: var(--spacing-16);\n                height: var(--spacing-16);\n            }\n        }\n\n        &--labelled {\n            gap: var(--spacing-4);\n            padding-inline: var(--spacing-8);\n            font-size: var(--text-12);\n        }\n\n        &__icon {\n            display: block;\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    /**\n     * The icon button of the chat dock: attach, send and stop in the input,\n     * mute and hang up in a live call. One component, because the call bar\n     * takes the place of the input and the two must not look like two\n     * different pieces of software.\n     *\n     * Native attributes fall through to the button, so `title`, `disabled` and\n     * `aria-pressed` are written by the caller as they would be on a `<button>`.\n     */\n    withDefaults(\n        defineProps<{\n            icon: string\n            /** Written next to the icon, for an action nobody should have to guess from a glyph. */\n            label?: string\n            type?: 'button' | 'submit'\n            /** `primary` is the filled circle of send and stop, the one action the dock is for. */\n            modifiers?: 'danger' | 'primary'\n        }>(),\n        { label: undefined, type: 'button', modifiers: undefined },\n    )\n</script>\n\n<template>\n    <button\n        class=\"pk-chat-button\"\n        :class=\"[\n            modifiers ? `pk-chat-button--${modifiers}` : undefined,\n            { 'pk-chat-button--labelled': label },\n        ]\"\n        :type=\"type\">\n        <VvIcon :name=\"icon\" class=\"pk-chat-button__icon\" />\n        <span v-if=\"label\" class=\"pk-chat-button__label\">{{ label }}</span>\n    </button>\n</template>\n\n<style lang=\"scss\">\n    .pk-chat-button {\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n        padding: var(--spacing-4);\n        border: none;\n        border-radius: var(--rounded);\n        background-color: transparent;\n        color: var(--color-word-1);\n        cursor: pointer;\n        transition: var(--transition-colors);\n\n        &:hover {\n            background-color: var(--color-surface-2);\n        }\n\n        // The fields' focus ring: a 1px surface-5 line measured 1.3:1 on the\n        // surface, under the 3:1 a focus indicator needs\n        &:focus-visible {\n            outline: var(--spacing-2) solid var(--input-focus-color);\n            outline-offset: 0;\n        }\n\n        &:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        // A toggle has to survive a glance: a crossed-out glyph alone changes\n        // too few pixels to notice mid-sentence.\n        &[aria-pressed='true'] {\n            background-color: var(--color-surface-3);\n            color: var(--color-word);\n        }\n\n        // A wash of the same red rather than a lighter red behind it: the\n        // `lighten-5` step lands close enough to the icon to leave it at about\n        // 2:1, which is a button that disappears exactly while it is being\n        // pointed at. The tint composites over whatever surface is behind, so\n        // it holds in the dark theme too.\n        &--danger {\n            color: var(--color-danger);\n\n            &:hover {\n                background-color: color-mix(\n                    in srgb,\n                    var(--color-danger) 12%,\n                    transparent\n                );\n            }\n        }\n\n        // Same 28px box as the ghost buttons, so the dock keeps its height,\n        // with a smaller glyph because a filled shape needs air around it.\n        // Its edge is visible, so it sits on the input's padding line just as\n        // the text does: a ghost glyph sat 6px further in and made the two\n        // sides of the input look unequal. Empty, it turns into a grey pad\n        // with the fields' disabled ink: a light arrow on that pad vanished,\n        // and with it the circle's edge, which is what squares the sides.\n        // The agent's color when the widget has one, like the user's bubble.\n        &--primary {\n            --pk-chat-button-fill: var(\n                --chatbot-main-color,\n                var(--color-word-1)\n            );\n\n            padding: var(--spacing-6);\n            border-radius: var(--rounded-full);\n            background-color: var(--pk-chat-button-fill);\n            color: var(--chatbot-contrast-color, var(--color-surface));\n\n            &:hover {\n                background-color: color-mix(\n                    in srgb,\n                    var(--pk-chat-button-fill) 85%,\n                    var(--color-surface)\n                );\n            }\n\n            // Off the disc, or a dark ring would sink into a dark fill\n            &:focus-visible {\n                outline-offset: var(--spacing-2);\n            }\n\n            &:disabled {\n                opacity: 1;\n                background-color: var(--color-surface-3);\n                color: var(--color-word-3);\n            }\n\n            .pk-chat-button__icon {\n                width: var(--spacing-16);\n                height: var(--spacing-16);\n            }\n        }\n\n        &--labelled {\n            gap: var(--spacing-4);\n            padding-inline: var(--spacing-8);\n            font-size: var(--text-12);\n        }\n\n        &__icon {\n            display: block;\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    // @ts-expect-error - no types for autosize\n    import autosize from 'autosize'\n    import {\n        computed,\n        nextTick,\n        onBeforeUnmount,\n        onMounted,\n        ref,\n        useId,\n        useTemplateRef,\n        watch,\n    } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import type { AgentFileUpload } from 'models'\n    import type { PendingAttachment } from 'composables'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n    import PkChatButton from './PkChatButton.vue'\n\n    // --- Models & Props ---\n\n    const modelValue = defineModel<string | undefined>({ default: undefined })\n    const pendingAttachments = defineModel<PendingAttachment[]>(\n        'pendingAttachments',\n        { default: () => [] },\n    )\n\n    const emit = defineEmits<{\n        submit: []\n        'stop-generation': []\n        'file-select': [file: File]\n        'dismiss-attachment-notice': []\n        'voice-start': []\n    }>()\n\n    const props = defineProps<{\n        placeholder?: string\n        dismissableNotice?: string\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        maxMessageLength?: number\n        fileUpload?: AgentFileUpload\n        enableDragDrop?: boolean\n        attachmentLimitReached?: boolean\n        attachmentNotice?: string\n        /** Show the talk button: the agent has voice enabled. */\n        voiceEnabled?: boolean\n    }>()\n\n    // --- Template refs ---\n\n    const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n    const fileInputEl = useTemplateRef<HTMLInputElement>('fileInputEl')\n    const cameraInputEl = useTemplateRef<HTMLInputElement>('cameraInputEl')\n    const formEl = useTemplateRef<HTMLFormElement>('formEl')\n\n    // --- Input buffering (decouples typing from reactive model propagation) ---\n\n    const localValue = ref(modelValue.value ?? '')\n    let syncTimer: ReturnType<typeof setTimeout> | null = null\n\n    const cancelSync = () => {\n        if (syncTimer !== null) {\n            clearTimeout(syncTimer)\n            syncTimer = null\n        }\n    }\n\n    const flushSync = () => {\n        cancelSync()\n        modelValue.value = localValue.value\n    }\n\n    const scheduleSync = () => {\n        cancelSync()\n        syncTimer = setTimeout(() => {\n            modelValue.value = localValue.value\n            syncTimer = null\n        }, 300)\n    }\n\n    const onTextareaInput = () => {\n        localValue.value = textareaEl.value?.value ?? ''\n        scheduleSync()\n    }\n\n    watch(modelValue, (v) => {\n        if (v !== localValue.value) {\n            localValue.value = v ?? ''\n            nextTick(() => {\n                if (textareaEl.value) {\n                    autosize.update(textareaEl.value)\n                }\n            })\n        }\n    })\n\n    // --- Status computeds ---\n\n    const isStreaming = computed(() => props.status === 'streaming')\n    const isSubmitted = computed(() => props.status === 'submitted')\n    const isInputDisabled = computed(\n        () => isStreaming.value || isSubmitted.value,\n    )\n\n    // --- Validation ---\n\n    const counterId = useId()\n    const currentLength = computed(() => localValue.value.length)\n\n    const isOverLimit = computed(\n        () =>\n            props.maxMessageLength !== undefined &&\n            currentLength.value > props.maxMessageLength,\n    )\n\n    const isUploadingAnyFile = computed(() =>\n        pendingAttachments.value.some((a) => a.state === 'uploading'),\n    )\n\n    const isSubmitEnabled = computed(() => {\n        if (\n            isInputDisabled.value ||\n            isUploadingAnyFile.value ||\n            isOverLimit.value\n        ) {\n            return false\n        }\n        return localValue.value.trim().length > 0\n    })\n\n    // --- File upload ---\n\n    const hasCaptureSupport = 'capture' in document.createElement('input')\n\n    const acceptMimeTypes = computed(\n        () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n    )\n\n    const acceptImageMimeTypes = computed(() =>\n        (props.fileUpload?.allowedMimeTypes ?? [])\n            .filter((m) => m.startsWith('image/'))\n            .join(','),\n    )\n\n    const showCameraOption = computed(\n        () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n    )\n\n    const openFilePicker = () => {\n        fileInputEl.value?.click()\n    }\n\n    const openCameraPicker = () => {\n        cameraInputEl.value?.click()\n    }\n\n    // The store owns the attachment limits and drops any overflow; the input\n    // just forwards every picked/dropped file.\n    const emitFiles = (files: File[]) => {\n        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        emitFiles(Array.from(input.files ?? []))\n        input.value = ''\n    }\n\n    // --- Attachments ---\n\n    const removeAttachment = (id: string) => {\n        const att = pendingAttachments.value.find((a) => a.id === id)\n        if (att) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n        pendingAttachments.value = pendingAttachments.value.filter(\n            (a) => a.id !== id,\n        )\n    }\n\n    // --- Drag & drop ---\n\n    const isDragDropEnabled = computed(\n        () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n    )\n\n    const handleDrop = (files: File[] | null) => {\n        if (!isDragDropEnabled.value || !files) {\n            return\n        }\n        emitFiles(files)\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Notice queue (single slot above the input, highest priority wins) ---\n\n    type InputNotice = {\n        id: string\n        text?: string\n        markdown?: string\n        icon?: string\n        dismiss?: () => void\n    }\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\n    }\n\n    const activeNotice = computed<InputNotice | null>(() => {\n        // Order = priority. The alert takes precedence over the notice.\n        if (props.attachmentNotice) {\n            return {\n                id: 'limit',\n                icon: 'ri:information-line',\n                text: props.attachmentNotice,\n                dismiss: () => emit('dismiss-attachment-notice'),\n            }\n        }\n        if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n            return {\n                id: 'dismissable',\n                markdown: props.dismissableNotice,\n                dismiss: closeDismissableNotice,\n            }\n        }\n        return null\n    })\n\n    // --- Submit ---\n\n    /**\n     * Send turns disabled and then gives way to stop, stop gives way to send:\n     * a keyboard user who pressed one would be left on the page body. Hand\n     * the focus to the textarea, but only after a keyboard press: a tap has no\n     * focus to keep, and focusing would bring the phone keyboard back up over\n     * the answer.\n     */\n    const keepKeyboardFocus = () => {\n        if (formEl.value?.querySelector('button:focus-visible')) {\n            textareaEl.value?.focus()\n        }\n    }\n\n    const stopGeneration = () => {\n        keepKeyboardFocus()\n        emit('stop-generation')\n    }\n\n    const handleSubmit = () => {\n        if (!isSubmitEnabled.value) {\n            return\n        }\n        keepKeyboardFocus()\n        flushSync()\n        emit('submit')\n        localValue.value = ''\n        modelValue.value = ''\n        nextTick(() => {\n            if (textareaEl.value) {\n                textareaEl.value.value = ''\n                autosize.update(textareaEl.value)\n            }\n        })\n    }\n\n    /**\n     * Enter sends, Shift+Enter goes to a new line. The Enter that confirms an\n     * IME composition (Japanese, Chinese, Korean) belongs to the composition:\n     * Safari reports it with `isComposing` already false, hence the 229.\n     */\n    const onTextareaEnter = (event: KeyboardEvent) => {\n        if (event.shiftKey || event.isComposing || event.keyCode === 229) {\n            return\n        }\n        event.preventDefault()\n        handleSubmit()\n    }\n\n    // --- Lifecycle ---\n\n    onMounted(() => {\n        if (textareaEl.value) {\n            autosize(textareaEl.value)\n        }\n    })\n\n    onBeforeUnmount(() => {\n        cancelSync()\n        if (textareaEl.value) {\n            autosize.destroy(textareaEl.value)\n        }\n        for (const att of pendingAttachments.value) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-input\">\n        <div\n            v-if=\"activeNotice\"\n            :key=\"activeNotice.id\"\n            class=\"pk-chatbot-input__notice\"\n            role=\"status\">\n            <VvIcon\n                v-if=\"activeNotice.icon\"\n                :name=\"activeNotice.icon\"\n                class=\"pk-chatbot-input__notice-icon\" />\n            <PkStreamingMarkdown\n                v-if=\"activeNotice.markdown\"\n                :markdown=\"activeNotice.markdown\"\n                class=\"wysiwyg pk-chatbot-input__notice-text\" />\n            <span v-else class=\"pk-chatbot-input__notice-text\">\n                {{ activeNotice.text }}\n            </span>\n            <VvButton\n                v-if=\"activeNotice.dismiss\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"activeNotice.dismiss()\" />\n        </div>\n        <form\n            ref=\"formEl\"\n            class=\"pk-chatbot-input__form\"\n            @submit.prevent=\"handleSubmit\">\n            <div\n                v-if=\"isOverDropZone && isDragDropEnabled\"\n                class=\"pk-chatbot-input__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-input__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n            <div\n                v-if=\"pendingAttachments.length\"\n                class=\"pk-chatbot-input__attachments\">\n                <PkChatbotFilePreview\n                    v-for=\"att in pendingAttachments\"\n                    :key=\"att.id\"\n                    :media-type=\"att.file.type\"\n                    :url=\"att.localUrl\"\n                    :filename=\"att.file.name\"\n                    :size=\"att.file.size\"\n                    :loading=\"att.state === 'uploading'\"\n                    :error=\"att.state === 'error' ? att.error : undefined\"\n                    :removable=\"att.state !== 'uploading'\"\n                    compact\n                    @remove=\"removeAttachment(att.id)\" />\n            </div>\n            <div class=\"pk-chatbot-input__fieldset\">\n                <slot name=\"prepend\" />\n                <VvDropdown\n                    v-if=\"\n                        fileUpload &&\n                        fileUpload.enabled &&\n                        (showCameraOption || $slots['additional-actions'])\n                    \"\n                    v-bind=\"{\n                        placement: 'top-start',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                    }\">\n                    <template #default=\"{ init, toggle, aria }\">\n                        <!-- The only one still written by hand: the dropdown\n                         anchors itself to whatever `init` receives, and that\n                         has to be the element, not a component instance -->\n                        <button\n                            :ref=\"(e: any) => init(e)\"\n                            v-bind=\"aria\"\n                            class=\"pk-chat-button\"\n                            type=\"button\"\n                            :title=\"$t('action.attachFile')\"\n                            :disabled=\"isInputDisabled\"\n                            @click=\"toggle\">\n                            <VvIcon\n                                name=\"ri:add-line\"\n                                class=\"pk-chat-button__icon\" />\n                        </button>\n                    </template>\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"showCameraOption\"\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openCameraPicker\">\n                            <VvIcon\n                                name=\"ri:camera-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.takePhoto') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openFilePicker\">\n                            <VvIcon\n                                name=\"ri:attachment-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.attachFile') }}\n                        </VvDropdownAction>\n                        <slot name=\"additional-actions\" />\n                    </template>\n                </VvDropdown>\n                <PkChatButton\n                    v-else-if=\"fileUpload && fileUpload.enabled\"\n                    icon=\"ri:add-line\"\n                    :title=\"$t('action.attachFile')\"\n                    :disabled=\"isInputDisabled || attachmentLimitReached\"\n                    @click=\"openFilePicker\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled\"\n                    ref=\"fileInputEl\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    :accept=\"acceptMimeTypes\"\n                    @change=\"onFileChange\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n                    ref=\"cameraInputEl\"\n                    type=\"file\"\n                    capture=\"environment\"\n                    hidden\n                    :accept=\"acceptImageMimeTypes\"\n                    @change=\"onFileChange\" />\n                <div class=\"pk-chatbot-input__content\">\n                    <textarea\n                        ref=\"textareaEl\"\n                        :value=\"localValue\"\n                        class=\"pk-chatbot-input__textarea\"\n                        name=\"message\"\n                        rows=\"1\"\n                        enterkeyhint=\"send\"\n                        :aria-label=\"$t('label.message')\"\n                        :aria-describedby=\"\n                            maxMessageLength ? counterId : undefined\n                        \"\n                        :aria-invalid=\"isOverLimit || undefined\"\n                        :placeholder\n                        @input=\"onTextareaInput\"\n                        @keydown.enter=\"onTextareaEnter\"></textarea>\n                </div>\n                <div\n                    v-if=\"maxMessageLength\"\n                    :id=\"counterId\"\n                    class=\"pk-chatbot-input__counter\"\n                    :class=\"{ 'pk-chatbot-input__counter--over': isOverLimit }\">\n                    {{ $n(currentLength, 'integer') }}/<span\n                        class=\"opacity-60\"\n                        >{{ $n(maxMessageLength, 'integer') }}</span\n                    >\n                </div>\n                <PkChatButton\n                    v-if=\"voiceEnabled && !isStreaming\"\n                    icon=\"ri:mic-line\"\n                    :title=\"$t('action.talk')\"\n                    :disabled=\"isInputDisabled\"\n                    @click=\"emit('voice-start')\" />\n                <PkChatButton\n                    v-if=\"isStreaming\"\n                    icon=\"ri:stop-fill\"\n                    modifiers=\"primary\"\n                    :title=\"$t('action.stop')\"\n                    @click=\"stopGeneration\" />\n                <PkChatButton\n                    v-else\n                    type=\"submit\"\n                    modifiers=\"primary\"\n                    :icon=\"isSubmitted ? 'loading-loop' : 'ri:arrow-up-line'\"\n                    :title=\"$t('action.submit')\"\n                    :disabled=\"!isSubmitEnabled\" />\n            </div>\n        </form>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-input {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        margin-inline: var(--spacing-sm);\n        margin-bottom: var(--spacing-sm);\n\n        &__notice {\n            position: relative;\n            padding: var(--spacing-10) var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            gap: var(--spacing-sm);\n            background-color: var(--color-surface-1);\n            border-top-left-radius: var(--rounded-xl);\n            border-top-right-radius: var(--rounded-xl);\n            transition-property: var(--transition-property-all);\n            transition-duration: var(--duration-300);\n            transition-timing-function: var(--ease-in-out);\n            font-size: var(--text-12);\n            color: var(--color-word-4);\n\n            &::after {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                right: 0;\n                bottom: calc(-1 * var(--spacing-12));\n                height: var(--spacing-12);\n                background-color: var(--color-surface-1);\n                z-index: 1;\n            }\n\n            &-icon {\n                flex-shrink: 0;\n                width: var(--spacing-18);\n                height: var(--spacing-18);\n            }\n\n            &-text {\n                flex: 1;\n                min-width: 0;\n            }\n        }\n\n        &__form {\n            position: relative;\n            display: flex;\n            z-index: 1;\n            flex-direction: column;\n\n            // The composer is a field too: same border and focus ring as the\n            // form fields, on top of the shadow and the 12px radius that make\n            // it the container (12) of its 8px buttons\n            border-radius: var(--rounded-xl);\n            border: 1px solid var(--input-border-color);\n            background-color: var(--color-surface);\n            padding: var(--spacing-14);\n            box-shadow: var(--shadow-lg);\n            font-size: var(\n                --text-16\n            ); // prevent ios zoom on input focus by using a font size >= 16px\n            gap: var(--spacing-xs);\n            transition: var(--input-transition);\n\n            @include media-breakpoint-up('sm', $breakpoints) {\n                font-size: var(--text-14);\n                padding: var(--spacing-10);\n            }\n\n            &:has(:focus-within) {\n                border-color: var(--input-focus-color);\n                box-shadow: var(--shadow-lg), var(--input-focus-ring);\n            }\n        }\n\n        &__drop-overlay {\n            position: absolute;\n            inset: 0;\n            z-index: 10;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            border-radius: var(--rounded-xl);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            pointer-events: none;\n        }\n\n        &__fieldset {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-xs);\n            flex: 1;\n        }\n\n        &__content {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            gap: var(--spacing-4);\n            min-width: 0;\n            overflow: hidden;\n        }\n\n        &__textarea {\n            display: block;\n            border: none;\n            outline: none;\n            resize: none;\n            width: 100%;\n            max-height: 200px;\n            color: var(--color-word-1);\n            background-color: var(--color-surface);\n\n            &::placeholder {\n                color: var(--color-word-4);\n            }\n        }\n\n        &__attachments {\n            display: flex;\n            flex-wrap: wrap;\n            // Roomy gap so the uniform-height chips breathe in the row.\n            gap: var(--spacing-12);\n            padding-bottom: var(--spacing-xs);\n            border-bottom: 1px solid var(--color-surface-2);\n        }\n\n        &__counter {\n            background-color: var(--color-surface-1);\n            border: 1px solid var(--color-surface-3);\n            border-radius: var(--rounded-md);\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            line-height: 1;\n            padding-inline: var(--spacing-6);\n            padding-block: var(--spacing-4);\n            z-index: 1;\n            font-variant-numeric: tabular-nums;\n            font-family: var(--font-mono);\n            font-weight: var(--font-bold);\n\n            &--over {\n                color: var(--color-danger);\n                border-color: var(--color-danger-lighten-5);\n                font-weight: var(--font-bold);\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    // @ts-expect-error - no types for autosize\n    import autosize from 'autosize'\n    import {\n        computed,\n        nextTick,\n        onBeforeUnmount,\n        onMounted,\n        ref,\n        useId,\n        useTemplateRef,\n        watch,\n    } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import type { AgentFileUpload } from 'models'\n    import type { PendingAttachment } from 'composables'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n    import PkChatButton from './PkChatButton.vue'\n\n    // --- Models & Props ---\n\n    const modelValue = defineModel<string | undefined>({ default: undefined })\n    const pendingAttachments = defineModel<PendingAttachment[]>(\n        'pendingAttachments',\n        { default: () => [] },\n    )\n\n    const emit = defineEmits<{\n        submit: []\n        'stop-generation': []\n        'file-select': [file: File]\n        'dismiss-attachment-notice': []\n        'voice-start': []\n    }>()\n\n    const props = defineProps<{\n        placeholder?: string\n        dismissableNotice?: string\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        maxMessageLength?: number\n        fileUpload?: AgentFileUpload\n        enableDragDrop?: boolean\n        attachmentLimitReached?: boolean\n        attachmentNotice?: string\n        /** Show the talk button: the agent has voice enabled. */\n        voiceEnabled?: boolean\n    }>()\n\n    // --- Template refs ---\n\n    const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n    const fileInputEl = useTemplateRef<HTMLInputElement>('fileInputEl')\n    const cameraInputEl = useTemplateRef<HTMLInputElement>('cameraInputEl')\n    const formEl = useTemplateRef<HTMLFormElement>('formEl')\n\n    // --- Input buffering (decouples typing from reactive model propagation) ---\n\n    const localValue = ref(modelValue.value ?? '')\n    let syncTimer: ReturnType<typeof setTimeout> | null = null\n\n    const cancelSync = () => {\n        if (syncTimer !== null) {\n            clearTimeout(syncTimer)\n            syncTimer = null\n        }\n    }\n\n    const flushSync = () => {\n        cancelSync()\n        modelValue.value = localValue.value\n    }\n\n    const scheduleSync = () => {\n        cancelSync()\n        syncTimer = setTimeout(() => {\n            modelValue.value = localValue.value\n            syncTimer = null\n        }, 300)\n    }\n\n    const onTextareaInput = () => {\n        localValue.value = textareaEl.value?.value ?? ''\n        scheduleSync()\n    }\n\n    watch(modelValue, (v) => {\n        if (v !== localValue.value) {\n            localValue.value = v ?? ''\n            nextTick(() => {\n                if (textareaEl.value) {\n                    autosize.update(textareaEl.value)\n                }\n            })\n        }\n    })\n\n    // --- Status computeds ---\n\n    const isStreaming = computed(() => props.status === 'streaming')\n    const isSubmitted = computed(() => props.status === 'submitted')\n    const isInputDisabled = computed(\n        () => isStreaming.value || isSubmitted.value,\n    )\n\n    // --- Validation ---\n\n    const counterId = useId()\n    const currentLength = computed(() => localValue.value.length)\n\n    const isOverLimit = computed(\n        () =>\n            props.maxMessageLength !== undefined &&\n            currentLength.value > props.maxMessageLength,\n    )\n\n    const isUploadingAnyFile = computed(() =>\n        pendingAttachments.value.some((a) => a.state === 'uploading'),\n    )\n\n    const isSubmitEnabled = computed(() => {\n        if (\n            isInputDisabled.value ||\n            isUploadingAnyFile.value ||\n            isOverLimit.value\n        ) {\n            return false\n        }\n        return localValue.value.trim().length > 0\n    })\n\n    // --- File upload ---\n\n    const hasCaptureSupport = 'capture' in document.createElement('input')\n\n    const acceptMimeTypes = computed(\n        () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n    )\n\n    const acceptImageMimeTypes = computed(() =>\n        (props.fileUpload?.allowedMimeTypes ?? [])\n            .filter((m) => m.startsWith('image/'))\n            .join(','),\n    )\n\n    const showCameraOption = computed(\n        () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n    )\n\n    const openFilePicker = () => {\n        fileInputEl.value?.click()\n    }\n\n    const openCameraPicker = () => {\n        cameraInputEl.value?.click()\n    }\n\n    // The store owns the attachment limits and drops any overflow; the input\n    // just forwards every picked/dropped file.\n    const emitFiles = (files: File[]) => {\n        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        emitFiles(Array.from(input.files ?? []))\n        input.value = ''\n    }\n\n    // --- Attachments ---\n\n    const removeAttachment = (id: string) => {\n        const att = pendingAttachments.value.find((a) => a.id === id)\n        if (att) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n        pendingAttachments.value = pendingAttachments.value.filter(\n            (a) => a.id !== id,\n        )\n    }\n\n    // --- Drag & drop ---\n\n    const isDragDropEnabled = computed(\n        () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n    )\n\n    const handleDrop = (files: File[] | null) => {\n        if (!isDragDropEnabled.value || !files) {\n            return\n        }\n        emitFiles(files)\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Notice queue (single slot above the input, highest priority wins) ---\n\n    type InputNotice = {\n        id: string\n        text?: string\n        markdown?: string\n        icon?: string\n        dismiss?: () => void\n    }\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\n    }\n\n    const activeNotice = computed<InputNotice | null>(() => {\n        // Order = priority. The alert takes precedence over the notice.\n        if (props.attachmentNotice) {\n            return {\n                id: 'limit',\n                icon: 'ri:information-line',\n                text: props.attachmentNotice,\n                dismiss: () => emit('dismiss-attachment-notice'),\n            }\n        }\n        if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n            return {\n                id: 'dismissable',\n                markdown: props.dismissableNotice,\n                dismiss: closeDismissableNotice,\n            }\n        }\n        return null\n    })\n\n    // --- Submit ---\n\n    /**\n     * Send turns disabled and then gives way to stop, stop gives way to send:\n     * a keyboard user who pressed one would be left on the page body. Hand\n     * the focus to the textarea, but only after a keyboard press: a tap has no\n     * focus to keep, and focusing would bring the phone keyboard back up over\n     * the answer.\n     */\n    const keepKeyboardFocus = () => {\n        if (formEl.value?.querySelector('button:focus-visible')) {\n            textareaEl.value?.focus()\n        }\n    }\n\n    const stopGeneration = () => {\n        keepKeyboardFocus()\n        emit('stop-generation')\n    }\n\n    const handleSubmit = () => {\n        if (!isSubmitEnabled.value) {\n            return\n        }\n        keepKeyboardFocus()\n        flushSync()\n        emit('submit')\n        localValue.value = ''\n        modelValue.value = ''\n        nextTick(() => {\n            if (textareaEl.value) {\n                textareaEl.value.value = ''\n                autosize.update(textareaEl.value)\n            }\n        })\n    }\n\n    /**\n     * Enter sends, Shift+Enter goes to a new line. The Enter that confirms an\n     * IME composition (Japanese, Chinese, Korean) belongs to the composition:\n     * Safari reports it with `isComposing` already false, hence the 229.\n     */\n    const onTextareaEnter = (event: KeyboardEvent) => {\n        if (event.shiftKey || event.isComposing || event.keyCode === 229) {\n            return\n        }\n        event.preventDefault()\n        handleSubmit()\n    }\n\n    // --- Lifecycle ---\n\n    onMounted(() => {\n        if (textareaEl.value) {\n            autosize(textareaEl.value)\n        }\n    })\n\n    onBeforeUnmount(() => {\n        cancelSync()\n        if (textareaEl.value) {\n            autosize.destroy(textareaEl.value)\n        }\n        for (const att of pendingAttachments.value) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-input\">\n        <div\n            v-if=\"activeNotice\"\n            :key=\"activeNotice.id\"\n            class=\"pk-chatbot-input__notice\"\n            role=\"status\">\n            <VvIcon\n                v-if=\"activeNotice.icon\"\n                :name=\"activeNotice.icon\"\n                class=\"pk-chatbot-input__notice-icon\" />\n            <PkStreamingMarkdown\n                v-if=\"activeNotice.markdown\"\n                :markdown=\"activeNotice.markdown\"\n                class=\"wysiwyg pk-chatbot-input__notice-text\" />\n            <span v-else class=\"pk-chatbot-input__notice-text\">\n                {{ activeNotice.text }}\n            </span>\n            <VvButton\n                v-if=\"activeNotice.dismiss\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"activeNotice.dismiss()\" />\n        </div>\n        <form\n            ref=\"formEl\"\n            class=\"pk-chatbot-input__form\"\n            @submit.prevent=\"handleSubmit\">\n            <div\n                v-if=\"isOverDropZone && isDragDropEnabled\"\n                class=\"pk-chatbot-input__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-input__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n            <div\n                v-if=\"pendingAttachments.length\"\n                class=\"pk-chatbot-input__attachments\">\n                <PkChatbotFilePreview\n                    v-for=\"att in pendingAttachments\"\n                    :key=\"att.id\"\n                    :media-type=\"att.file.type\"\n                    :url=\"att.localUrl\"\n                    :filename=\"att.file.name\"\n                    :size=\"att.file.size\"\n                    :loading=\"att.state === 'uploading'\"\n                    :error=\"att.state === 'error' ? att.error : undefined\"\n                    :removable=\"att.state !== 'uploading'\"\n                    compact\n                    @remove=\"removeAttachment(att.id)\" />\n            </div>\n            <div class=\"pk-chatbot-input__fieldset\">\n                <slot name=\"prepend\" />\n                <VvDropdown\n                    v-if=\"\n                        fileUpload &&\n                        fileUpload.enabled &&\n                        (showCameraOption || $slots['additional-actions'])\n                    \"\n                    v-bind=\"{\n                        placement: 'top-start',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                    }\">\n                    <template #default=\"{ init, toggle, aria }\">\n                        <!-- The only one still written by hand: the dropdown\n                         anchors itself to whatever `init` receives, and that\n                         has to be the element, not a component instance -->\n                        <button\n                            :ref=\"(e: any) => init(e)\"\n                            v-bind=\"aria\"\n                            class=\"pk-chat-button\"\n                            type=\"button\"\n                            :title=\"$t('action.attachFile')\"\n                            :disabled=\"isInputDisabled\"\n                            @click=\"toggle\">\n                            <VvIcon\n                                name=\"ri:add-line\"\n                                class=\"pk-chat-button__icon\" />\n                        </button>\n                    </template>\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"showCameraOption\"\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openCameraPicker\">\n                            <VvIcon\n                                name=\"ri:camera-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.takePhoto') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openFilePicker\">\n                            <VvIcon\n                                name=\"ri:attachment-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.attachFile') }}\n                        </VvDropdownAction>\n                        <slot name=\"additional-actions\" />\n                    </template>\n                </VvDropdown>\n                <PkChatButton\n                    v-else-if=\"fileUpload && fileUpload.enabled\"\n                    icon=\"ri:add-line\"\n                    :title=\"$t('action.attachFile')\"\n                    :disabled=\"isInputDisabled || attachmentLimitReached\"\n                    @click=\"openFilePicker\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled\"\n                    ref=\"fileInputEl\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    :accept=\"acceptMimeTypes\"\n                    @change=\"onFileChange\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n                    ref=\"cameraInputEl\"\n                    type=\"file\"\n                    capture=\"environment\"\n                    hidden\n                    :accept=\"acceptImageMimeTypes\"\n                    @change=\"onFileChange\" />\n                <div class=\"pk-chatbot-input__content\">\n                    <textarea\n                        ref=\"textareaEl\"\n                        :value=\"localValue\"\n                        class=\"pk-chatbot-input__textarea\"\n                        name=\"message\"\n                        rows=\"1\"\n                        enterkeyhint=\"send\"\n                        :aria-label=\"$t('label.message')\"\n                        :aria-describedby=\"\n                            maxMessageLength ? counterId : undefined\n                        \"\n                        :aria-invalid=\"isOverLimit || undefined\"\n                        :placeholder\n                        @input=\"onTextareaInput\"\n                        @keydown.enter=\"onTextareaEnter\"></textarea>\n                </div>\n                <div\n                    v-if=\"maxMessageLength\"\n                    :id=\"counterId\"\n                    class=\"pk-chatbot-input__counter\"\n                    :class=\"{ 'pk-chatbot-input__counter--over': isOverLimit }\">\n                    {{ $n(currentLength, 'integer') }}/<span\n                        class=\"opacity-60\"\n                        >{{ $n(maxMessageLength, 'integer') }}</span\n                    >\n                </div>\n                <PkChatButton\n                    v-if=\"voiceEnabled && !isStreaming\"\n                    icon=\"ri:mic-line\"\n                    :title=\"$t('action.talk')\"\n                    :disabled=\"isInputDisabled\"\n                    @click=\"emit('voice-start')\" />\n                <PkChatButton\n                    v-if=\"isStreaming\"\n                    icon=\"ri:stop-fill\"\n                    modifiers=\"primary\"\n                    :title=\"$t('action.stop')\"\n                    @click=\"stopGeneration\" />\n                <PkChatButton\n                    v-else\n                    type=\"submit\"\n                    modifiers=\"primary\"\n                    :icon=\"isSubmitted ? 'loading-loop' : 'ri:arrow-up-line'\"\n                    :title=\"$t('action.submit')\"\n                    :disabled=\"!isSubmitEnabled\" />\n            </div>\n        </form>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-input {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        margin-inline: var(--spacing-sm);\n        margin-bottom: var(--spacing-sm);\n\n        &__notice {\n            position: relative;\n            padding: var(--spacing-10) var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            gap: var(--spacing-sm);\n            background-color: var(--color-surface-1);\n            border-top-left-radius: var(--rounded-xl);\n            border-top-right-radius: var(--rounded-xl);\n            transition-property: var(--transition-property-all);\n            transition-duration: var(--duration-300);\n            transition-timing-function: var(--ease-in-out);\n            font-size: var(--text-12);\n            color: var(--color-word-4);\n\n            &::after {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                right: 0;\n                bottom: calc(-1 * var(--spacing-12));\n                height: var(--spacing-12);\n                background-color: var(--color-surface-1);\n                z-index: 1;\n            }\n\n            &-icon {\n                flex-shrink: 0;\n                width: var(--spacing-18);\n                height: var(--spacing-18);\n            }\n\n            &-text {\n                flex: 1;\n                min-width: 0;\n            }\n        }\n\n        &__form {\n            position: relative;\n            display: flex;\n            z-index: 1;\n            flex-direction: column;\n\n            // The composer is a field too: same border and focus ring as the\n            // form fields, on top of the shadow and the 12px radius that make\n            // it the container (12) of its 8px buttons\n            border-radius: var(--rounded-xl);\n            border: 1px solid var(--input-border-color);\n            background-color: var(--color-surface);\n            padding: var(--spacing-14);\n            box-shadow: var(--shadow-lg);\n            font-size: var(\n                --text-16\n            ); // prevent ios zoom on input focus by using a font size >= 16px\n            gap: var(--spacing-xs);\n            transition: var(--input-transition);\n\n            @include media-breakpoint-up('sm', $breakpoints) {\n                font-size: var(--text-14);\n                padding: var(--spacing-10);\n            }\n\n            &:has(:focus-within) {\n                border-color: var(--input-focus-color);\n                box-shadow: var(--shadow-lg), var(--input-focus-ring);\n            }\n        }\n\n        &__drop-overlay {\n            position: absolute;\n            inset: 0;\n            z-index: 10;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            border-radius: var(--rounded-xl);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            pointer-events: none;\n        }\n\n        &__fieldset {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-xs);\n            flex: 1;\n        }\n\n        &__content {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            gap: var(--spacing-4);\n            min-width: 0;\n            overflow: hidden;\n        }\n\n        &__textarea {\n            display: block;\n            border: none;\n            outline: none;\n            resize: none;\n            width: 100%;\n            max-height: 200px;\n            color: var(--color-word-1);\n            background-color: var(--color-surface);\n\n            &::placeholder {\n                color: var(--color-word-4);\n            }\n        }\n\n        &__attachments {\n            display: flex;\n            flex-wrap: wrap;\n            // Roomy gap so the uniform-height chips breathe in the row.\n            gap: var(--spacing-12);\n            padding-bottom: var(--spacing-xs);\n            border-bottom: 1px solid var(--color-surface-2);\n        }\n\n        &__counter {\n            background-color: var(--color-surface-1);\n            border: 1px solid var(--color-surface-3);\n            border-radius: var(--rounded-md);\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            line-height: 1;\n            padding-inline: var(--spacing-6);\n            padding-block: var(--spacing-4);\n            z-index: 1;\n            font-variant-numeric: tabular-nums;\n            font-family: var(--font-mono);\n            font-weight: var(--font-bold);\n\n            &--over {\n                color: var(--color-danger);\n                border-color: var(--color-danger-lighten-5);\n                font-weight: var(--font-bold);\n            }\n        }\n    }\n</style>\n"],"x_google_ignoreList":[0],"mappings":"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"}