npm - @8wave/ai-elements - Versions diffs - 0.75.0 → 0.78.0 - Mend

@8wave/ai-elements 0.75.0 → 0.78.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/dist-vue/_chunks/{PkChatbotInput-C5QSmt21.js → PkChatbotInput-BbGLBVim.js} RENAMED Viewed

@@ -1,29 +1,29 @@
-import { t as e } from "./PkStreamingMarkdown-BAhC3uGK.js";
-import { t } from "./PkChatbotFilePreview-DHzuGtz5.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeClass as ee, normalizeProps as te, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as ne, renderSlot as re, toDisplayString as v, unref as y, useModel as b, useTemplateRef as x, vModelText as ie, withCtx as S, withDirectives as ae, withKeys as oe, withModifiers as C } from "vue";
-import { VvButton as se, VvDropdown as ce, VvDropdownAction as le, VvIcon as ue } from "@volverjs/ui-vue/components";
-import { useDropZone as de } from "@vueuse/core";
+import { t as e } from "./PkStreamingMarkdown-BBTAwHd_.js";
+import { t } from "./PkChatbotFilePreview-hRNtv2OJ.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeClass as ee, normalizeProps as m, onBeforeUnmount as h, onMounted as g, openBlock as _, ref as v, renderList as te, renderSlot as y, toDisplayString as b, unref as ne, useModel as x, useTemplateRef as S, watch as re, withCtx as C, withKeys as ie, withModifiers as w } from "vue";
+import { VvButton as ae, VvDropdown as oe, VvDropdownAction as se, VvIcon as ce } from "@volverjs/ui-vue/components";
+import { useDropZone as le } from "@vueuse/core";
 //#region ../../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js
-var w = /* @__PURE__ */ new Map();
-function T(e) {
-	var t = w.get(e);
+var T = /* @__PURE__ */ new Map();
+function E(e) {
+	var t = T.get(e);
 	t && t.destroy();
 }
-function E(e) {
-	var t = w.get(e);
+function D(e) {
+	var t = T.get(e);
 	t && t.update();
 }
-var D = null;
-typeof window > "u" ? ((D = function(e) {
+var O = null;
+typeof window > "u" ? ((O = function(e) {
 	return e;
 }).destroy = function(e) {
 	return e;
-}, D.update = function(e) {
+}, O.update = function(e) {
 	return e;
-}) : ((D = function(e, t) {
+}) : ((O = 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" && !w.has(e)) {
+			if (e && e.nodeName && e.nodeName === "TEXTAREA" && !T.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" ? ((D = 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];
-					}), w.delete(e);
+					}), T.delete(e);
 				}.bind(e, {
 					height: e.style.height,
 					resize: e.style.resize,
@@ -41,7 +41,7 @@ typeof window > "u" ? ((D = 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", w.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", T.set(e, {
 					destroy: a,
 					update: s
 				}), s();
@@ -73,24 +73,28 @@ typeof window > "u" ? ((D = function(e) {
 		}(e);
 	}), e;
 }).destroy = function(e) {
-	return e && Array.prototype.forEach.call(e.length ? e : [e], T), e;
-}, D.update = function(e) {
 	return e && Array.prototype.forEach.call(e.length ? e : [e], E), e;
+}, O.update = function(e) {
+	return e && Array.prototype.forEach.call(e.length ? e : [e], D), e;
 });
-var O = D, fe = { class: "pk-chatbot-input" }, pe = {
+var k = O, ue = { class: "pk-chatbot-input" }, de = {
 	key: 0,
 	class: "pk-chatbot-input-dismissable-notice"
-}, me = {
+}, fe = {
 	key: 0,
 	class: "pk-chatbot-input__drop-overlay"
-}, he = {
+}, pe = {
 	key: 1,
 	class: "pk-chatbot-input__attachments"
-}, ge = { class: "pk-chatbot-input__fieldset" }, _e = [
+}, me = { class: "pk-chatbot-input__fieldset" }, he = [
 	"title",
 	"disabled",
 	"onClick"
-], k = ["title", "disabled"], A = ["accept"], j = ["accept"], M = { class: "pk-chatbot-input__content" }, N = ["placeholder", "onKeydown"], P = { class: "opacity-60" }, F = ["title"], I = ["title", "disabled"], L = /* @__PURE__ */ u({
+], ge = ["title", "disabled"], _e = ["accept"], ve = ["accept"], ye = { class: "pk-chatbot-input__content" }, A = [
+	"value",
+	"placeholder",
+	"onKeydown"
+], j = { class: "opacity-60" }, M = ["title"], N = ["title", "disabled"], P = /* @__PURE__ */ u({
 	__name: "PkChatbotInput",
 	props: /* @__PURE__ */ d({
 		placeholder: {},
@@ -111,64 +115,70 @@ var O = D, fe = { class: "pk-chatbot-input" }, pe = {
 		"file-select"
 	], ["update:modelValue", "update:pendingAttachments"]),
 	setup(u, { emit: d }) {
-		let w = b(u, "modelValue"), T = b(u, "pendingAttachments"), E = d, D = u, L = _(!0), ve = () => {
-			L.value = !1;
-		}, R = x("textareaEl"), z = x("fileInputEl"), B = x("cameraInputEl"), V = x("formEl"), ye = "capture" in document.createElement("input");
-		h(() => {
-			try {
-				R.value && O(R.value);
-			} catch {}
-		}), m(() => {
-			try {
-				R.value && O.destroy(R.value);
-			} catch {}
-			for (let e of T.value) URL.revokeObjectURL(e.localUrl);
-		});
-		let H = r(() => D.status === "streaming"), U = r(() => D.status === "submitted"), W = r(() => w.value?.length ?? 0), G = r(() => D.maxMessageLength !== void 0 && W.value > D.maxMessageLength), be = r(() => T.value.some((e) => e.state === "uploading")), xe = r(() => D.fileUpload?.allowedMimeTypes?.join(",") ?? ""), K = r(() => (D.fileUpload?.allowedMimeTypes ?? []).filter((e) => e.startsWith("image/")).join(",")), q = r(() => ye && K.value.length > 0), J = r(() => H.value || U.value || be.value || G.value ? !1 : (w.value?.trim().length ?? 0) > 0), Y = () => {
-			R.value && O.update(R.value);
-		}, X = () => {
-			J.value && (E("submit"), p(() => {
-				Y(), R.value?.blur();
-			}));
-		}, Z = () => {
-			z.value?.click();
+		let T = x(u, "modelValue"), E = x(u, "pendingAttachments"), D = d, O = u, P = S("textareaEl"), F = S("fileInputEl"), I = S("cameraInputEl"), L = S("formEl"), R = v(T.value ?? ""), z = null, B = () => {
+			z !== null && (clearTimeout(z), z = null);
+		}, be = () => {
+			B(), T.value = R.value;
+		}, xe = () => {
+			B(), z = setTimeout(() => {
+				T.value = R.value, z = null;
+			}, 300);
 		}, Se = () => {
-			B.value?.click();
-		}, Q = (e) => {
+			R.value = P.value?.value ?? "", xe();
+		};
+		re(T, (e) => {
+			e !== R.value && (R.value = e ?? "", p(() => {
+				P.value && k.update(P.value);
+			}));
+		});
+		let V = r(() => O.status === "streaming"), H = r(() => O.status === "submitted"), U = r(() => V.value || H.value), W = r(() => R.value.length), G = r(() => O.maxMessageLength !== void 0 && W.value > O.maxMessageLength), Ce = r(() => E.value.some((e) => e.state === "uploading")), K = r(() => U.value || Ce.value || G.value ? !1 : R.value.trim().length > 0), we = "capture" in document.createElement("input"), Te = r(() => O.fileUpload?.allowedMimeTypes?.join(",") ?? ""), q = r(() => (O.fileUpload?.allowedMimeTypes ?? []).filter((e) => e.startsWith("image/")).join(",")), J = r(() => we && q.value.length > 0), Y = () => {
+			F.value?.click();
+		}, Ee = () => {
+			I.value?.click();
+		}, X = (e) => {
 			let t = e.target, n = t.files?.[0];
-			n && E("file-select", n), t.value = "";
-		}, Ce = (e) => {
-			let t = T.value.find((t) => t.id === e);
-			t && URL.revokeObjectURL(t.localUrl), T.value = T.value.filter((t) => t.id !== e);
-		}, $ = r(() => (D.enableDragDrop ?? !0) && !!D.fileUpload?.enabled), { isOverDropZone: we } = de(V, {
-			dataTypes: r(() => D.fileUpload?.allowedMimeTypes ?? []),
+			n && D("file-select", n), t.value = "";
+		}, De = (e) => {
+			let t = E.value.find((t) => t.id === e);
+			t && URL.revokeObjectURL(t.localUrl), E.value = E.value.filter((t) => t.id !== e);
+		}, Z = r(() => (O.enableDragDrop ?? !0) && !!O.fileUpload?.enabled), { isOverDropZone: Oe } = le(L, {
+			dataTypes: r(() => O.fileUpload?.allowedMimeTypes ?? []),
 			onDrop: (e) => {
-				if (!(!$.value || !e)) for (let t of e) E("file-select", t);
+				if (!(!Z.value || !e)) for (let t of e) D("file-select", t);
 			}
-		});
-		return (r, d) => {
-			let m = se, h = ue, _ = le, b = ce;
-			return g(), o("div", fe, [u.dismissableNotice && L.value ? (g(), o("div", pe, [l(e, {
+		}), Q = v(!0), ke = () => {
+			Q.value = !1;
+		}, $ = () => {
+			K.value && (be(), D("submit"));
+		};
+		return g(() => {
+			P.value && k(P.value);
+		}), h(() => {
+			B(), P.value && k.destroy(P.value);
+			for (let e of E.value) URL.revokeObjectURL(e.localUrl);
+		}), (r, d) => {
+			let p = ae, h = ce, g = se, v = oe;
+			return _(), o("div", ue, [u.dismissableNotice && Q.value ? (_(), o("div", de, [l(e, {
 				markdown: u.dismissableNotice,
 				class: "wysiwyg"
-			}, null, 8, ["markdown"]), u.dismissableNotice ? (g(), i(m, {
+			}, null, 8, ["markdown"]), u.dismissableNotice ? (_(), i(p, {
 				key: 0,
 				title: r.$t("action.close"),
 				modifiers: "action-quiet",
 				icon: "ri:close-line",
 				class: "w-18 h-18",
-				onClick: ve
+				onClick: ke
 			}, null, 8, ["title"])) : a("", !0)])) : a("", !0), s("form", {
 				ref_key: "formEl",
-				ref: V,
+				ref: L,
 				class: "pk-chatbot-input__form",
-				onSubmit: C(X, ["prevent"])
+				onSubmit: w($, ["prevent"])
 			}, [
-				y(we) && $.value ? (g(), o("div", me, [l(h, {
+				ne(Oe) && Z.value ? (_(), o("div", fe, [l(h, {
 					name: "ri:upload-cloud-2-line",
 					class: "pk-chatbot-input__drop-overlay-icon"
-				}), s("span", null, v(r.$t("action.dropFile")), 1)])) : a("", !0),
-				T.value.length ? (g(), o("div", he, [(g(!0), o(n, null, ne(T.value, (e) => (g(), i(t, {
+				}), s("span", null, b(r.$t("action.dropFile")), 1)])) : a("", !0),
+				E.value.length ? (_(), o("div", pe, [(_(!0), o(n, null, te(E.value, (e) => (_(), i(t, {
 					key: e.id,
 					"media-type": e.file.type,
 					url: e.localUrl,
@@ -176,7 +186,7 @@ var O = D, fe = { class: "pk-chatbot-input" }, pe = {
 					loading: e.state === "uploading",
 					error: e.state === "error" ? e.error : void 0,
 					removable: e.state !== "uploading",
-					onRemove: (t) => Ce(e.id)
+					onRemove: (t) => De(e.id)
 				}, null, 8, [
 					"media-type",
 					"url",
@@ -186,120 +196,118 @@ var O = D, fe = { class: "pk-chatbot-input" }, pe = {
 					"removable",
 					"onRemove"
 				]))), 128))])) : a("", !0),
-				s("div", ge, [
-					u.fileUpload && u.fileUpload.enabled && (q.value || r.$slots["additional-actions"]) ? (g(), i(b, te(f({ key: 0 }, {
+				s("div", me, [
+					u.fileUpload && u.fileUpload.enabled && (J.value || r.$slots["additional-actions"]) ? (_(), i(v, m(f({ key: 0 }, {
 						placement: "top-start",
 						modifiers: "menu",
 						flip: !0,
 						offset: 3
 					})), {
-						default: S(({ init: e, toggle: t, aria: n }) => [s("button", f({ ref: (t) => e(t) }, n, {
+						default: C(({ init: e, toggle: t, aria: n }) => [s("button", f({ ref: (t) => e(t) }, n, {
 							class: "pk-chatbot-input__button",
 							type: "button",
 							title: r.$t("action.attachFile"),
-							disabled: H.value || U.value,
+							disabled: U.value,
 							onClick: t
 						}), [l(h, {
 							name: "ri:add-line",
 							class: "pk-chatbot-input__button-icon"
-						})], 16, _e)]),
-						items: S(() => [
-							q.value ? (g(), i(_, {
+						})], 16, he)]),
+						items: C(() => [
+							J.value ? (_(), i(g, {
 								key: 0,
-								disabled: H.value || U.value,
-								onClick: Se
+								disabled: U.value,
+								onClick: Ee
 							}, {
-								default: S(() => [l(h, {
+								default: C(() => [l(h, {
 									name: "ri:camera-line",
 									class: "pk-chatbot-input__dropdown-icon"
-								}), c(" " + v(r.$t("action.takePhoto")), 1)]),
+								}), c(" " + b(r.$t("action.takePhoto")), 1)]),
 								_: 1
 							}, 8, ["disabled"])) : a("", !0),
-							l(_, {
-								disabled: H.value || U.value,
-								onClick: Z
+							l(g, {
+								disabled: U.value,
+								onClick: Y
 							}, {
-								default: S(() => [l(h, {
+								default: C(() => [l(h, {
 									name: "ri:attachment-line",
 									class: "pk-chatbot-input__dropdown-icon"
-								}), c(" " + v(r.$t("action.attachFile")), 1)]),
+								}), c(" " + b(r.$t("action.attachFile")), 1)]),
 								_: 1
 							}, 8, ["disabled"]),
-							re(r.$slots, "additional-actions")
+							y(r.$slots, "additional-actions")
 						]),
 						_: 3
-					}, 16)) : u.fileUpload && u.fileUpload.enabled ? (g(), o("button", {
+					}, 16)) : u.fileUpload && u.fileUpload.enabled ? (_(), o("button", {
 						key: 1,
 						class: "pk-chatbot-input__button",
 						type: "button",
 						title: r.$t("action.attachFile"),
-						disabled: H.value || U.value,
-						onClick: Z
+						disabled: U.value,
+						onClick: Y
 					}, [l(h, {
 						name: "ri:add-line",
 						class: "pk-chatbot-input__button-icon"
-					})], 8, k)) : a("", !0),
-					u.fileUpload && u.fileUpload.enabled ? (g(), o("input", {
+					})], 8, ge)) : a("", !0),
+					u.fileUpload && u.fileUpload.enabled ? (_(), o("input", {
 						key: 2,
 						ref_key: "fileInputEl",
-						ref: z,
+						ref: F,
 						type: "file",
 						hidden: "",
-						accept: xe.value,
-						onChange: Q
-					}, null, 40, A)) : a("", !0),
-					u.fileUpload && u.fileUpload.enabled && q.value ? (g(), o("input", {
+						accept: Te.value,
+						onChange: X
+					}, null, 40, _e)) : a("", !0),
+					u.fileUpload && u.fileUpload.enabled && J.value ? (_(), o("input", {
 						key: 3,
 						ref_key: "cameraInputEl",
-						ref: B,
+						ref: I,
 						type: "file",
 						capture: "environment",
 						hidden: "",
-						accept: K.value,
-						onChange: Q
-					}, null, 40, j)) : a("", !0),
-					s("div", M, [ae(s("textarea", {
+						accept: q.value,
+						onChange: X
+					}, null, 40, ve)) : a("", !0),
+					s("div", ye, [s("textarea", {
 						ref_key: "textareaEl",
-						ref: R,
-						"onUpdate:modelValue": d[0] ||= (e) => w.value = e,
+						ref: P,
+						value: R.value,
 						class: "pk-chatbot-input__textarea",
 						name: "message",
 						rows: "1",
 						placeholder: u.placeholder,
-						onFocus: Y,
-						onBlur: Y,
-						onPaste: d[1] ||= (e) => p(Y),
-						onKeydown: oe(C(X, ["prevent"]), ["enter"])
-					}, null, 40, N), [[ie, w.value]])]),
-					u.maxMessageLength ? (g(), o("div", {
+						onInput: Se,
+						onKeydown: ie(w($, ["prevent"]), ["enter"])
+					}, null, 40, A)]),
+					u.maxMessageLength ? (_(), o("div", {
 						key: 4,
 						class: ee(["pk-chatbot-input__counter", { "pk-chatbot-input__counter--over": G.value }])
-					}, [c(v(r.$n(W.value, "integer")) + "/", 1), s("span", P, v(r.$n(u.maxMessageLength, "integer")), 1)], 2)) : a("", !0),
-					H.value ? (g(), o("button", {
+					}, [c(b(r.$n(W.value, "integer")) + "/", 1), s("span", j, b(r.$n(u.maxMessageLength, "integer")), 1)], 2)) : a("", !0),
+					V.value ? (_(), o("button", {
 						key: 5,
 						class: "pk-chatbot-input__button",
 						type: "button",
 						title: r.$t("action.stop"),
-						onClick: d[2] ||= (e) => E("stop-generation")
+						onClick: d[0] ||= (e) => D("stop-generation")
 					}, [l(h, {
 						name: "ri:stop-circle-line",
 						class: "pk-chatbot-input__button-icon"
-					})], 8, F)) : (g(), o("button", {
+					})], 8, M)) : (_(), o("button", {
 						key: 6,
 						class: "pk-chatbot-input__button",
 						type: "submit",
-						title: J.value ? r.$t("action.submit") : r.$t("label.disabled"),
-						disabled: !J.value
+						title: K.value ? r.$t("action.submit") : r.$t("label.disabled"),
+						disabled: !K.value
 					}, [l(h, {
-						name: U.value ? "line-md:loading-loop" : J.value ? "ri:send-ins-fill" : "ri:send-ins-line",
+						name: H.value ? "line-md:loading-loop" : K.value ? "ri:send-ins-fill" : "ri:send-ins-line",
 						class: "pk-chatbot-input__button-icon"
-					}, null, 8, ["name"])], 8, I))
+					}, null, 8, ["name"])], 8, N))
 				])
 			], 544)]);
 		};
 	}
 });
 //#endregion
-export { L as t };
+export { P as t };
-//# sourceMappingURL=PkChatbotInput-C5QSmt21.js.map
+//# sourceMappingURL=PkChatbotInput-BbGLBVim.js.map

package/dist-vue/_chunks/PkChatbotInput-BbGLBVim.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PkChatbotInput-BbGLBVim.js","names":["$t","$slots","$n"],"sources":["../../../../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js","../../../../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 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 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\n // --- Models & Props ---\n\n const modelValue = defineModel<string>()\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 }>()\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 }>()\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 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 const onFileChange = (event: Event) => {\n const input = event.target as HTMLInputElement\n const file = input.files?.[0]\n if (file) {\n emit('file-select', file)\n }\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 for (const file of files) {\n emit('file-select', file)\n }\n }\n\n const { isOverDropZone } = useDropZone(formEl, {\n dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n onDrop: handleDrop,\n })\n\n // --- Dismissable notice ---\n\n const isDismissableNoticeVisible = ref(true)\n const closeDismissableNotice = () => {\n isDismissableNoticeVisible.value = false\n }\n\n // --- Submit ---\n\n const handleSubmit = () => {\n if (!isSubmitEnabled.value) {\n return\n }\n flushSync()\n emit('submit')\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=\"dismissableNotice && isDismissableNoticeVisible\"\n class=\"pk-chatbot-input-dismissable-notice\">\n <PkStreamingMarkdown\n :markdown=\"dismissableNotice\"\n class=\"wysiwyg\" />\n <VvButton\n v-if=\"dismissableNotice\"\n :title=\"$t('action.close')\"\n modifiers=\"action-quiet\"\n icon=\"ri:close-line\"\n class=\"w-18 h-18\"\n @click=\"closeDismissableNotice\" />\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 :loading=\"att.state === 'uploading'\"\n :error=\"att.state === 'error' ? att.error : undefined\"\n :removable=\"att.state !== 'uploading'\"\n @remove=\"removeAttachment(att.id)\" />\n </div>\n <div class=\"pk-chatbot-input__fieldset\">\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 <button\n :ref=\"(e: any) => init(e)\"\n v-bind=\"aria\"\n class=\"pk-chatbot-input__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-chatbot-input__button-icon\" />\n </button>\n </template>\n <template #items>\n <VvDropdownAction\n v-if=\"showCameraOption\"\n :disabled=\"isInputDisabled\"\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=\"isInputDisabled\"\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 <button\n v-else-if=\"fileUpload && fileUpload.enabled\"\n class=\"pk-chatbot-input__button\"\n type=\"button\"\n :title=\"$t('action.attachFile')\"\n :disabled=\"isInputDisabled\"\n @click=\"openFilePicker\">\n <VvIcon\n name=\"ri:add-line\"\n class=\"pk-chatbot-input__button-icon\" />\n </button>\n <input\n v-if=\"fileUpload && fileUpload.enabled\"\n ref=\"fileInputEl\"\n type=\"file\"\n hidden\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 :placeholder\n @input=\"onTextareaInput\"\n @keydown.enter.prevent=\"handleSubmit\"></textarea>\n </div>\n <div\n v-if=\"maxMessageLength\"\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 <button\n v-if=\"isStreaming\"\n class=\"pk-chatbot-input__button\"\n type=\"button\"\n :title=\"$t('action.stop')\"\n @click=\"emit('stop-generation')\">\n <VvIcon\n name=\"ri:stop-circle-line\"\n class=\"pk-chatbot-input__button-icon\" />\n </button>\n <button\n v-else\n class=\"pk-chatbot-input__button\"\n type=\"submit\"\n :title=\"\n isSubmitEnabled\n ? $t('action.submit')\n : $t('label.disabled')\n \"\n :disabled=\"!isSubmitEnabled\">\n <VvIcon\n :name=\"\n isSubmitted\n ? 'line-md:loading-loop'\n : isSubmitEnabled\n ? 'ri:send-ins-fill'\n : 'ri:send-ins-line'\n \"\n class=\"pk-chatbot-input__button-icon\" />\n </button>\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 &-dismissable-notice {\n position: relative;\n padding: var(--spacing-sm);\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\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-14);\n color: var(--color-word-2);\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: var(--color-surface-1);\n z-index: 1;\n }\n }\n\n &__form {\n position: relative;\n display: flex;\n z-index: 1;\n flex-direction: column;\n border-radius: var(--rounded-xl);\n border: 1px solid var(--color-surface-3);\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: border-color var(--duration-200) var(--ease-in-out);\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(--color-word-5);\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 gap: var(--spacing-4);\n padding-bottom: var(--spacing-xs);\n border-bottom: 1px solid var(--color-surface-2);\n }\n\n &__button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n color: var(--color-word-1);\n padding: var(--spacing-4);\n flex-shrink: 0;\n transition: var(--transition-colors);\n border-radius: var(--rounded);\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n\n &:focus-visible {\n outline: 1px solid var(--color-surface-5);\n outline-offset: 0;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n &-icon {\n display: block;\n width: var(--spacing-20);\n height: var(--spacing-20);\n }\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 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\n // --- Models & Props ---\n\n const modelValue = defineModel<string>()\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 }>()\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 }>()\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 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 const onFileChange = (event: Event) => {\n const input = event.target as HTMLInputElement\n const file = input.files?.[0]\n if (file) {\n emit('file-select', file)\n }\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 for (const file of files) {\n emit('file-select', file)\n }\n }\n\n const { isOverDropZone } = useDropZone(formEl, {\n dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n onDrop: handleDrop,\n })\n\n // --- Dismissable notice ---\n\n const isDismissableNoticeVisible = ref(true)\n const closeDismissableNotice = () => {\n isDismissableNoticeVisible.value = false\n }\n\n // --- Submit ---\n\n const handleSubmit = () => {\n if (!isSubmitEnabled.value) {\n return\n }\n flushSync()\n emit('submit')\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=\"dismissableNotice && isDismissableNoticeVisible\"\n class=\"pk-chatbot-input-dismissable-notice\">\n <PkStreamingMarkdown\n :markdown=\"dismissableNotice\"\n class=\"wysiwyg\" />\n <VvButton\n v-if=\"dismissableNotice\"\n :title=\"$t('action.close')\"\n modifiers=\"action-quiet\"\n icon=\"ri:close-line\"\n class=\"w-18 h-18\"\n @click=\"closeDismissableNotice\" />\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 :loading=\"att.state === 'uploading'\"\n :error=\"att.state === 'error' ? att.error : undefined\"\n :removable=\"att.state !== 'uploading'\"\n @remove=\"removeAttachment(att.id)\" />\n </div>\n <div class=\"pk-chatbot-input__fieldset\">\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 <button\n :ref=\"(e: any) => init(e)\"\n v-bind=\"aria\"\n class=\"pk-chatbot-input__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-chatbot-input__button-icon\" />\n </button>\n </template>\n <template #items>\n <VvDropdownAction\n v-if=\"showCameraOption\"\n :disabled=\"isInputDisabled\"\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=\"isInputDisabled\"\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 <button\n v-else-if=\"fileUpload && fileUpload.enabled\"\n class=\"pk-chatbot-input__button\"\n type=\"button\"\n :title=\"$t('action.attachFile')\"\n :disabled=\"isInputDisabled\"\n @click=\"openFilePicker\">\n <VvIcon\n name=\"ri:add-line\"\n class=\"pk-chatbot-input__button-icon\" />\n </button>\n <input\n v-if=\"fileUpload && fileUpload.enabled\"\n ref=\"fileInputEl\"\n type=\"file\"\n hidden\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 :placeholder\n @input=\"onTextareaInput\"\n @keydown.enter.prevent=\"handleSubmit\"></textarea>\n </div>\n <div\n v-if=\"maxMessageLength\"\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 <button\n v-if=\"isStreaming\"\n class=\"pk-chatbot-input__button\"\n type=\"button\"\n :title=\"$t('action.stop')\"\n @click=\"emit('stop-generation')\">\n <VvIcon\n name=\"ri:stop-circle-line\"\n class=\"pk-chatbot-input__button-icon\" />\n </button>\n <button\n v-else\n class=\"pk-chatbot-input__button\"\n type=\"submit\"\n :title=\"\n isSubmitEnabled\n ? $t('action.submit')\n : $t('label.disabled')\n \"\n :disabled=\"!isSubmitEnabled\">\n <VvIcon\n :name=\"\n isSubmitted\n ? 'line-md:loading-loop'\n : isSubmitEnabled\n ? 'ri:send-ins-fill'\n : 'ri:send-ins-line'\n \"\n class=\"pk-chatbot-input__button-icon\" />\n </button>\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 &-dismissable-notice {\n position: relative;\n padding: var(--spacing-sm);\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\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-14);\n color: var(--color-word-2);\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: var(--color-surface-1);\n z-index: 1;\n }\n }\n\n &__form {\n position: relative;\n display: flex;\n z-index: 1;\n flex-direction: column;\n border-radius: var(--rounded-xl);\n border: 1px solid var(--color-surface-3);\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: border-color var(--duration-200) var(--ease-in-out);\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(--color-word-5);\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 gap: var(--spacing-4);\n padding-bottom: var(--spacing-xs);\n border-bottom: 1px solid var(--color-surface-2);\n }\n\n &__button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n color: var(--color-word-1);\n padding: var(--spacing-4);\n flex-shrink: 0;\n transition: var(--transition-colors);\n border-radius: var(--rounded);\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n\n &:focus-visible {\n outline: 1px solid var(--color-surface-5);\n outline-offset: 0;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n &-icon {\n display: block;\n width: var(--spacing-20);\n height: var(--spacing-20);\n }\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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"}