besser-agentic-framework-ui 0.1.0 → 0.2.1

package/dist/besser-agentic-framework-ui.js

@@ -1,10 +1,10 @@
-import { useCallback as e, useEffect as t, useId as n, useMemo as r, useRef as i, useState as a } from "react";
-import o from "react-markdown";
-import s from "remark-gfm";
-import c from "dompurify";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+import c from "react-markdown";
+import l from "remark-gfm";
+import u from "dompurify";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/types/payload.ts
-var d = {
+var m = {
 	USER_MESSAGE: "user_message",
 	USER_VOICE: "user_voice",
 	USER_FILE: "user_file",
@@ -23,10 +23,11 @@ var d = {
 	AGENT_REPLY_REASONING_STEP: "agent_reply_reasoning_step",
 	AGENT_REPLY_TASK_LIST_UPDATE: "agent_reply_task_list_update",
 	AGENT_REPLY_AUDIO: "agent_reply_audio",
-	AGENT_REPLY_UI: "agent_reply_ui",
-	USER_UPDATE_UI: "user_update_ui",
+	AGENT_REPLY_GUI: "agent_reply_gui",
+	AGENT_REPLY_GUI_UPDATE: "agent_reply_gui_update",
+	USER_GUI_EVENT: "user_gui_event",
 	FETCH_USER_MESSAGES: "fetch_user_messages"
-}, f = {
+}, h = {
 	REASONING_STARTED: "reasoning_started",
 	REASONING_FINISHED: "reasoning_finished",
 	LLM_TEXT: "llm_text",
@@ -37,27 +38,27 @@ var d = {
 	TASK_SKIPPED: "task_skipped",
 	PUSHBACK: "pushback",
 	MAX_STEPS: "max_steps"
-}, p = {
+}, g = {
 	PENDING: "pending",
 	IN_PROGRESS: "in_progress",
 	COMPLETED: "completed",
 	SKIPPED: "skipped"
-}, m = "reasoning_trace";
-function h(e) {
-	return e.kind === f.REASONING_STARTED;
+}, _ = "reasoning_trace";
+function v(e) {
+	return e.kind === h.REASONING_STARTED;
 }
-function g(e) {
-	return e.kind === f.REASONING_FINISHED;
+function y(e) {
+	return e.kind === h.REASONING_FINISHED;
 }
-function _(e) {
-	return e.steps.filter((e) => !h(e) && !g(e));
+function b(e) {
+	return e.steps.filter((e) => !v(e) && !y(e));
 }
-function v(e) {
-	return _(e).length === 0;
+function x(e) {
+	return b(e).length === 0;
 }
 //#endregion
 //#region src/utils/contentDetect.ts
-var y = [
+var S = [
 	/^#{1,6}\s+\S/m,
 	/^\s*[-*+]\s+\S/m,
 	/^\s*\d+\.\s+\S/m,
@@ -70,10 +71,10 @@ var y = [
 	/^\|[^\n]+\|\s*$/m,
 	/^---+\s*$/m
 ];
-function b(e) {
-	return !e || e.length < 2 ? !1 : y.some((t) => t.test(e));
+function C(e) {
+	return !e || e.length < 2 ? !1 : S.some((t) => t.test(e));
 }
-var x = RegExp("^\\s*(" + [
+var w = RegExp("^\\s*(" + [
 	"function\\s",
 	"def\\s",
 	"class\\s",
@@ -95,20 +96,24 @@ var x = RegExp("^\\s*(" + [
 	"<\\?php\\b",
 	"<!DOCTYPE\\s"
 ].join("|") + ")", "m");
-function S(e) {
+function T(e) {
 	if (!e || e.length < 8) return !1;
 	let t = e.split("\n");
-	return t.length < 2 ? !1 : !!(x.test(e) || (e.match(/[{}();=]/g) ?? []).length / e.length > .05 && t.length >= 3);
+	return t.length < 2 ? !1 : !!(w.test(e) || (e.match(/[{}();=]/g) ?? []).length / e.length > .05 && t.length >= 3);
 }
-function C(e) {
-	return b(e) ? "markdown" : S(e) ? "code" : "plain";
+function E(e) {
+	return C(e) ? "markdown" : T(e) ? "code" : "plain";
 }
 //#endregion
 //#region src/components/GUIRenderer.tsx
-function w(e) {
+var D = e(null);
+function O(e) {
 	return e.replace(/_([a-z])/g, (e, t) => t.toUpperCase());
 }
-var T = new Set(["unit_size", "icon_size"]), E = new Set([
+function k(e) {
+	return e.replace(/\s*!important\s*$/, "");
+}
+var A = new Set(["unit_size", "icon_size"]), j = new Set([
 	"color_palette",
 	"primary_color",
 	"line_color",
@@ -117,36 +122,59 @@ var T = new Set(["unit_size", "icon_size"]), E = new Set([
 	"bar_color",
 	"label_color",
 	"fill_color"
-]), D = {
+]), M = {
 	background_color: "background",
 	text_color: "color"
-}, O = new Set(["layout_type"]), k = new Set(["p_type", "alignment"]);
-function A(e) {
+}, N = new Set(["layout_type", "alignment"]), P = new Set(["p_type"]);
+function F(e) {
 	if (!e) return {};
 	let t = {};
-	if (e.size) for (let [n, r] of Object.entries(e.size)) !r || T.has(n) || (t[w(n)] = r);
-	if (e.position) for (let [n, r] of Object.entries(e.position)) !r || k.has(n) || (n === "display" ? r === "table" || r === "table-row" ? (t.display = "flex", t.flexWrap = "wrap", t.alignItems = "stretch") : r === "table-cell" ? (t.display = "flex", t.flex = "1", t.flexDirection = "column", t.height = "auto") : t.display = r : t[w(n)] = r);
-	if (e.color) for (let [n, r] of Object.entries(e.color)) !r || E.has(n) || (t[D[n] ?? w(n)] = r);
+	if (e.size) for (let [n, r] of Object.entries(e.size)) !r || A.has(n) || (t[O(n)] = typeof r == "string" ? k(r) : r);
+	if (e.position) for (let [n, r] of Object.entries(e.position)) !r || P.has(n) || (n === "alignment" ? t.textAlign = typeof r == "string" ? k(r) : r : n === "display" ? r === "table" || r === "table-row" ? (t.display = "flex", t.flexWrap = "wrap", t.alignItems = "stretch") : r === "table-cell" ? (t.display = "flex", t.flex = "1", t.flexDirection = "column", t.height = "auto") : t.display = typeof r == "string" ? k(r) : r : t[O(n)] = typeof r == "string" ? k(r) : r);
+	if (e.color) for (let [n, r] of Object.entries(e.color)) !r || j.has(n) || (t[M[n] ?? O(n)] = typeof r == "string" ? k(r) : r);
 	if (e.layout) {
 		let n = e.layout.layout_type;
 		n === "flex" ? t.display = "flex" : n === "grid" && (t.display = "grid");
-		for (let [n, r] of Object.entries(e.layout)) !r || O.has(n) || (t[w(n)] = r);
+		for (let [n, r] of Object.entries(e.layout)) !r || N.has(n) || (t[O(n)] = typeof r == "string" ? k(r) : r);
 	}
 	return t;
 }
-function j(e, t) {
+function ee(e) {
+	let t = e.trim().toLowerCase();
+	if (t.includes("gradient")) return !1;
+	if (t === "transparent" || t === "none" || t === "initial" || t === "" || t === "white" || t === "#fff" || t === "#ffffff") return !0;
+	let n = t.match(/^#([0-9a-f]{6})$/);
+	if (n) {
+		let e = parseInt(n[1], 16), t = e >> 16 & 255, r = e >> 8 & 255, i = e & 255;
+		return (t + r + i) / 3 > 200;
+	}
+	let r = t.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/);
+	if (r) {
+		let e = parseInt(r[1] + r[1], 16), t = parseInt(r[2] + r[2], 16), n = parseInt(r[3] + r[3], 16);
+		return (e + t + n) / 3 > 200;
+	}
+	return !1;
+}
+function I(e) {
+	let t = {
+		fontFamily: "inherit",
+		...e
+	}, n = typeof t.background == "string" ? t.background : typeof t.backgroundColor == "string" ? t.backgroundColor : null;
+	return (n === null || ee(n)) && (delete t.background, delete t.backgroundColor, delete t.color), t;
+}
+function te(e, t, n = !1) {
 	if (!Array.isArray(e)) return "";
-	let n = "";
-	for (let r of e) {
-		if (!r.selectors?.length || !r.style) continue;
-		let e = { ...r.style }, i = e.display;
-		i === "table" || i === "table-row" ? (e.display = "flex", e["flex-wrap"] = "wrap") : i === "table-cell" && (e.display = "flex", e["flex-direction"] = "column", e.flex = "1", delete e.height, delete e.width);
-		let a = Object.entries(e).map(([e, t]) => `  ${e}: ${t};`).join("\n"), o = (e) => `${e} {\n${a}\n}`, s = r.selectors.map((e) => `.${t} ${e}`).join(", ");
-		r.atRuleType === "media" && r.mediaText ? n += `@media ${r.mediaText} {\n${o(s)}\n}\n` : n += o(s) + "\n";
+	let r = "";
+	for (let i of e) {
+		if (!i.selectors?.length || !i.style) continue;
+		let e = { ...i.style }, a = e.display;
+		a === "table" || a === "table-row" ? (e.display = "flex", e["flex-wrap"] = "wrap") : a === "table-cell" && (e.display = "flex", e["flex-direction"] = "column", e.flex = "1", delete e.height, delete e.width), n && (delete e.background, delete e["background-color"], delete e.color);
+		let o = Object.entries(e).map(([e, t]) => `  ${e}: ${t};`).join("\n"), s = (e) => `${e} {\n${o}\n}`, c = i.selectors.map((e) => `.${t} ${e}`).join(", ");
+		i.atRuleType === "media" && i.mediaText ? r += `@media ${i.mediaText} {\n${s(c)}\n}\n` : r += s(c) + "\n";
 	}
-	return n;
+	return r;
 }
-function M(e) {
+function ne(e) {
 	let t = [], n = e.custom_attributes?.series;
 	if (typeof n == "string") try {
 		t = JSON.parse(n);
@@ -286,36 +314,981 @@ function M(e) {
 		};
 	}
 }
-function N({ el: e }) {
-	let n = i(null);
-	t(() => {
-		let t = n.current;
-		if (!t) return;
-		let r = !0, { traces: i, layout: a } = M(e);
-		return import("plotly.js-dist-min").then((e) => {
-			!r || !t || e.newPlot(t, i, a, {
+var L = null, R = null;
+function re() {
+	return L ? Promise.resolve(L) : (R ||= import("plotly.js-dist-min").then((e) => (L = e, e)), R);
+}
+function ie({ el: e }) {
+	let t = o(null);
+	r(() => {
+		let n = t.current;
+		if (!n) return;
+		let r = !0, { traces: i, layout: a } = ne(e);
+		return re().then((e) => {
+			!r || !n || e.newPlot(n, i, a, {
 				responsive: !0,
 				displayModeBar: !1
 			});
 		}), () => {
-			r = !1, import("plotly.js-dist-min").then((e) => {
-				t && e.purge(t);
+			r = !1, L && n ? L.purge(n) : R && R.then((e) => {
+				n && e.purge(n);
 			});
 		};
 	}, [e.name, e.type]);
-	let r = A(e.styling);
-	return /* @__PURE__ */ l("div", {
+	let n = F(e.styling);
+	return /* @__PURE__ */ f("div", {
 		id: e.component_id ?? void 0,
 		className: (e.css_classes ?? []).join(" ") || void 0,
 		style: {
 			minHeight: "300px",
+			...n
+		},
+		ref: t
+	});
+}
+var z = {
+	info: {
+		bg: "#eff6ff",
+		border: "#bfdbfe",
+		text: "#1e40af",
+		icon: "ℹ"
+	},
+	success: {
+		bg: "#f0fdf4",
+		border: "#bbf7d0",
+		text: "#166534",
+		icon: "✓"
+	},
+	warning: {
+		bg: "#fffbeb",
+		border: "#fde68a",
+		text: "#92400e",
+		icon: "⚠"
+	},
+	error: {
+		bg: "#fef2f2",
+		border: "#fecaca",
+		text: "#991b1b",
+		icon: "✕"
+	}
+};
+function ae({ el: e, id: t, className: n, style: r }) {
+	let [i, a] = s(!1);
+	if (i) return null;
+	let o = z[e.severity ?? "info"] ?? z.info;
+	return /* @__PURE__ */ p("div", {
+		id: t,
+		className: n,
+		role: "alert",
+		style: {
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "10px",
+			padding: "10px 14px",
+			borderRadius: "6px",
+			border: `1px solid ${o.border}`,
+			background: o.bg,
+			color: o.text,
+			fontSize: "0.88em",
 			...r
 		},
-		ref: n
+		children: [
+			/* @__PURE__ */ f("span", {
+				style: {
+					fontWeight: 700,
+					flexShrink: 0
+				},
+				children: o.icon
+			}),
+			/* @__PURE__ */ p("div", {
+				style: { flex: 1 },
+				children: [e.title && /* @__PURE__ */ f("div", {
+					style: {
+						fontWeight: 600,
+						marginBottom: 2
+					},
+					children: e.title
+				}), /* @__PURE__ */ f("div", { children: e.content })]
+			}),
+			e.dismissible && /* @__PURE__ */ f("button", {
+				onClick: () => a(!0),
+				style: {
+					background: "none",
+					border: "none",
+					cursor: "pointer",
+					color: o.text,
+					padding: 0,
+					lineHeight: 1
+				},
+				"aria-label": "Dismiss",
+				children: "×"
+			})
+		]
+	});
+}
+function oe({ el: e, id: t, onInteract: n }) {
+	let [r, i] = s(!!e.default_value);
+	return /* @__PURE__ */ f("div", {
+		style: { marginBottom: "4px" },
+		children: /* @__PURE__ */ p("label", {
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: "8px",
+				cursor: e.disabled ? "default" : "pointer",
+				userSelect: "none"
+			},
+			children: [e.label && /* @__PURE__ */ f("span", {
+				style: {
+					fontSize: "0.875em",
+					fontWeight: 500,
+					color: "#374151"
+				},
+				children: e.label
+			}), /* @__PURE__ */ p("span", {
+				style: {
+					position: "relative",
+					display: "inline-block",
+					width: "44px",
+					height: "24px",
+					flexShrink: 0
+				},
+				children: [
+					/* @__PURE__ */ f("input", {
+						type: "checkbox",
+						id: t,
+						name: e.name,
+						checked: r,
+						disabled: e.disabled,
+						style: {
+							opacity: 0,
+							width: 0,
+							height: 0,
+							position: "absolute"
+						},
+						onChange: (r) => {
+							i(r.target.checked), n?.(JSON.stringify({
+								elementId: t ?? e.name,
+								name: e.name,
+								fieldType: e.field_type,
+								label: e.label || void 0,
+								action: "onChange",
+								value: r.target.checked
+							}));
+						}
+					}),
+					/* @__PURE__ */ f("span", { style: {
+						position: "absolute",
+						inset: 0,
+						background: r ? "#2563eb" : "#cbd5e1",
+						borderRadius: "24px",
+						transition: "background 0.2s",
+						pointerEvents: "none"
+					} }),
+					/* @__PURE__ */ f("span", { style: {
+						position: "absolute",
+						top: "3px",
+						left: r ? "23px" : "3px",
+						width: "18px",
+						height: "18px",
+						borderRadius: "50%",
+						background: "#fff",
+						transition: "left 0.2s",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+						pointerEvents: "none"
+					} })
+				]
+			})]
+		})
+	});
+}
+function se({ el: e, id: t, onInteract: n }) {
+	let [r, i] = s(typeof e.default_value == "number" ? e.default_value : e.min_value ?? 0);
+	return /* @__PURE__ */ p("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "10px"
+		},
+		children: [/* @__PURE__ */ f("input", {
+			type: "range",
+			id: t,
+			name: e.name,
+			min: e.min_value ?? 0,
+			max: e.max_value ?? 100,
+			step: e.step ?? 1,
+			value: r,
+			disabled: e.disabled,
+			style: { flex: 1 },
+			onChange: (r) => {
+				let a = Number(r.target.value);
+				i(a), n?.(JSON.stringify({
+					elementId: t ?? e.name,
+					name: e.name,
+					fieldType: e.field_type,
+					label: e.label || void 0,
+					action: "onChange",
+					value: a
+				}));
+			}
+		}), /* @__PURE__ */ f("span", {
+			style: {
+				minWidth: "2.5em",
+				textAlign: "right",
+				fontSize: "0.875em",
+				color: "#374151"
+			},
+			children: r
+		})]
+	});
+}
+function ce({ el: e, id: t, className: n, onInteract: r }) {
+	let [i, a] = s(typeof e.default_value == "number" ? e.default_value : 0), [o, c] = s(0), l = e.max_value ?? 5;
+	return /* @__PURE__ */ p("div", {
+		id: t,
+		className: n,
+		style: {
+			display: "flex",
+			gap: "2px"
+		},
+		children: [/* @__PURE__ */ f("input", {
+			type: "hidden",
+			name: e.name,
+			"data-value-type": "number",
+			value: String(i)
+		}), Array.from({ length: l }, (e, t) => t + 1).map((n) => /* @__PURE__ */ f("button", {
+			type: "button",
+			"aria-label": `${n} star${n === 1 ? "" : "s"}`,
+			style: {
+				background: "none",
+				border: "none",
+				padding: "0 2px",
+				cursor: e.disabled ? "default" : "pointer",
+				fontSize: "1.5em",
+				color: n <= (o || i) ? "#f59e0b" : "#d1d5db",
+				transition: "color 0.1s"
+			},
+			disabled: e.disabled,
+			onClick: () => {
+				let o = n === i ? 0 : n;
+				a(o), r?.(JSON.stringify({
+					elementId: t ?? e.name,
+					name: e.name,
+					fieldType: e.field_type,
+					label: e.label || void 0,
+					action: "onChange",
+					value: o
+				}));
+			},
+			onMouseEnter: () => !e.disabled && c(n),
+			onMouseLeave: () => c(0),
+			children: "★"
+		}, n))]
+	});
+}
+function le({ el: e, id: t, className: n, onInteract: r }) {
+	let [i, a] = s([]), [o, c] = s(""), l = (n) => {
+		let o = n.trim();
+		if (o && !i.includes(o)) {
+			let n = [...i, o];
+			a(n), r?.(JSON.stringify({
+				elementId: t ?? e.name,
+				name: e.name,
+				fieldType: e.field_type,
+				label: e.label || void 0,
+				action: "onChange",
+				value: n
+			}));
+		}
+		c("");
+	}, u = (n) => {
+		let o = i.filter((e) => e !== n);
+		a(o), r?.(JSON.stringify({
+			elementId: t ?? e.name,
+			name: e.name,
+			fieldType: e.field_type,
+			label: e.label || void 0,
+			action: "onChange",
+			value: o
+		}));
+	};
+	return /* @__PURE__ */ p("div", {
+		id: t,
+		className: [n, "gui-tags-container"].filter(Boolean).join(" "),
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			gap: "4px",
+			padding: "4px 8px",
+			border: "1px solid #cbd5e1",
+			borderRadius: "4px",
+			minHeight: "38px"
+		},
+		children: [i.map((e) => /* @__PURE__ */ p("span", {
+			className: "gui-chip",
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: "4px",
+				padding: "2px 8px",
+				background: "#eff6ff",
+				color: "#1d4ed8",
+				borderRadius: "12px",
+				fontSize: "0.82em"
+			},
+			children: [e, /* @__PURE__ */ f("button", {
+				type: "button",
+				onClick: () => u(e),
+				style: {
+					background: "none",
+					border: "none",
+					cursor: "pointer",
+					color: "inherit",
+					padding: 0,
+					lineHeight: 1
+				},
+				children: "×"
+			})]
+		}, e)), /* @__PURE__ */ f("input", {
+			type: "text",
+			value: o,
+			placeholder: i.length === 0 ? e.placeholder ?? e.description ?? "Add tags…" : void 0,
+			disabled: e.disabled,
+			style: {
+				border: "none",
+				outline: "none",
+				fontFamily: "inherit",
+				fontSize: "inherit",
+				flex: "1 1 80px",
+				minWidth: "80px",
+				padding: "2px 0"
+			},
+			onChange: (e) => c(e.target.value),
+			onKeyDown: (e) => {
+				(e.key === "Enter" || e.key === ",") && (e.preventDefault(), l(o)), e.key === "Backspace" && !o && i.length && u(i[i.length - 1]);
+			},
+			onBlur: () => {
+				o && l(o);
+			}
+		})]
+	});
+}
+function ue({ el: e, id: t, className: n, onInteract: r }) {
+	let i = Math.max(2, Math.min(8, e.max_value ?? 6)), [a, c] = s(() => Array(i).fill("")), l = o(Array(i).fill(null)), u = (n, o) => {
+		let s = o.replace(/\D/g, "").slice(-1), u = [...a];
+		u[n] = s, c(u), r?.(JSON.stringify({
+			elementId: t ?? e.name,
+			name: e.name,
+			fieldType: e.field_type,
+			label: e.label || void 0,
+			action: "onChange",
+			value: u.join("")
+		})), s && n < i - 1 && l.current[n + 1]?.focus();
+	}, d = (e, t) => {
+		t.key === "Backspace" && !a[e] && e > 0 && l.current[e - 1]?.focus();
+	};
+	return /* @__PURE__ */ f("div", {
+		id: t,
+		className: n,
+		style: {
+			display: "flex",
+			gap: "8px"
+		},
+		children: a.map((t, n) => /* @__PURE__ */ f("input", {
+			ref: (e) => {
+				l.current[n] = e;
+			},
+			type: "text",
+			inputMode: "numeric",
+			maxLength: 1,
+			value: t,
+			disabled: e.disabled,
+			onChange: (e) => u(n, e.target.value),
+			onKeyDown: (e) => d(n, e),
+			style: {
+				width: "40px",
+				height: "44px",
+				textAlign: "center",
+				border: "1px solid #cbd5e1",
+				borderRadius: "6px",
+				fontSize: "1.25em",
+				fontFamily: "inherit"
+			}
+		}, n))
 	});
 }
-function P(e, t, n) {
-	let r = A(e.styling), i = e.component_id ?? void 0, a = (e.css_classes ?? []).join(" ") || void 0;
+function de({ el: e, id: t, className: n, onInteract: r }) {
+	let [i, a] = s(""), [o, c] = s(""), l = {
+		padding: "6px 10px",
+		border: "1px solid #cbd5e1",
+		borderRadius: "4px",
+		fontFamily: "inherit"
+	}, u = (n, i) => r?.(JSON.stringify({
+		elementId: t ?? e.name,
+		name: e.name,
+		fieldType: e.field_type,
+		label: e.label || void 0,
+		action: "onChange",
+		value: {
+			from: n,
+			to: i
+		}
+	}));
+	return /* @__PURE__ */ p("div", {
+		id: t,
+		className: n,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "8px",
+			flexWrap: "wrap"
+		},
+		children: [
+			/* @__PURE__ */ f("input", {
+				type: "date",
+				value: i,
+				max: o || void 0,
+				disabled: e.disabled,
+				style: l,
+				onChange: (e) => {
+					a(e.target.value), u(e.target.value, o);
+				}
+			}),
+			/* @__PURE__ */ f("span", {
+				style: {
+					color: "#94a3b8",
+					fontSize: "0.9em"
+				},
+				children: "to"
+			}),
+			/* @__PURE__ */ f("input", {
+				type: "date",
+				value: o,
+				min: i || void 0,
+				disabled: e.disabled,
+				style: l,
+				onChange: (e) => {
+					c(e.target.value), u(i, e.target.value);
+				}
+			})
+		]
+	});
+}
+function fe({ el: e, id: t, className: n, onInteract: r }) {
+	let i = e.options ?? [], [a, c] = s(() => typeof e.default_value == "string" && e.default_value ? e.default_value.split(",").map((e) => e.trim()).filter(Boolean) : []), l = o(null), u = (n) => {
+		let i = a.includes(n) ? a.filter((e) => e !== n) : [...a, n];
+		c(i), l.current && (l.current.value = JSON.stringify(i)), r?.(JSON.stringify({
+			elementId: t ?? e.name,
+			name: e.name,
+			fieldType: e.field_type,
+			label: e.label || void 0,
+			action: "onChange",
+			value: i
+		}));
+	};
+	return /* @__PURE__ */ p("div", {
+		id: t,
+		className: n,
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "6px"
+		},
+		children: [
+			/* @__PURE__ */ f("input", {
+				type: "hidden",
+				ref: l,
+				name: e.name,
+				"data-value-type": "json",
+				defaultValue: JSON.stringify(a)
+			}),
+			a.length > 0 && /* @__PURE__ */ f("div", {
+				style: {
+					display: "flex",
+					flexWrap: "wrap",
+					gap: "4px"
+				},
+				children: a.map((t) => /* @__PURE__ */ p("span", {
+					className: "gui-chip",
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						gap: "4px",
+						padding: "2px 8px",
+						background: "#eff6ff",
+						color: "#1d4ed8",
+						borderRadius: "12px",
+						fontSize: "0.82em"
+					},
+					children: [i.find((e) => e.value === t)?.label ?? t, /* @__PURE__ */ f("button", {
+						type: "button",
+						onClick: () => u(t),
+						disabled: e.disabled,
+						style: {
+							background: "none",
+							border: "none",
+							cursor: "pointer",
+							color: "inherit",
+							padding: 0,
+							lineHeight: 1
+						},
+						children: "×"
+					})]
+				}, t))
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "gui-ms-list",
+				style: {
+					border: "1px solid #cbd5e1",
+					borderRadius: "4px",
+					overflow: "hidden"
+				},
+				children: i.map((t, n) => {
+					let r = a.includes(t.value);
+					return /* @__PURE__ */ p("div", {
+						className: `gui-ms-item${r ? " gui-ms-item--selected" : ""}`,
+						onClick: () => !e.disabled && u(t.value),
+						style: {
+							padding: "6px 10px",
+							cursor: e.disabled ? "default" : "pointer",
+							background: r ? "#dbeafe" : n % 2 == 0 ? "#fff" : "#f8fafc",
+							color: r ? "#1d4ed8" : "#374151",
+							fontWeight: r ? 500 : 400,
+							borderBottom: n < i.length - 1 ? "1px solid #e2e8f0" : "none",
+							userSelect: "none",
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center"
+						},
+						children: [/* @__PURE__ */ f("span", { children: t.label }), r && /* @__PURE__ */ f("span", {
+							style: {
+								color: "#2563eb",
+								fontWeight: 700
+							},
+							children: "✓"
+						})]
+					}, n);
+				})
+			})
+		]
+	});
+}
+function B({ el: e, id: t, className: n, onInteract: r }) {
+	let i = e.options ?? [], [a, c] = s(() => Object.fromEntries(i.map((e) => [e.value, !1]))), l = o(null), u = e.disabled ?? !1, d = (n, i) => {
+		let o = {
+			...a,
+			[n]: i
+		};
+		c(o), l.current && (l.current.value = JSON.stringify(o)), r?.(JSON.stringify({
+			elementId: t ?? e.name,
+			name: e.name,
+			fieldType: e.field_type,
+			label: e.label || void 0,
+			action: "onChange",
+			value: o
+		}));
+	};
+	return /* @__PURE__ */ p("div", {
+		id: t,
+		className: n,
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "6px"
+		},
+		children: [/* @__PURE__ */ f("input", {
+			type: "hidden",
+			ref: l,
+			name: e.name,
+			"data-value-type": "json",
+			defaultValue: JSON.stringify(a)
+		}), i.map((e, t) => /* @__PURE__ */ p("label", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "6px",
+				cursor: u ? "default" : "pointer"
+			},
+			children: [/* @__PURE__ */ f("input", {
+				type: "checkbox",
+				checked: a[e.value] ?? !1,
+				disabled: u,
+				onChange: (t) => d(e.value, t.target.checked)
+			}), e.label]
+		}, t))]
+	});
+}
+var V = {
+	Text: "text",
+	Password: "password",
+	Email: "email",
+	Number: "number",
+	Date: "date",
+	Time: "time",
+	Color: "color",
+	File: "file",
+	Search: "search",
+	URL: "url",
+	Tel: "tel",
+	Hidden: "hidden",
+	Range: "range",
+	Checkbox: "checkbox"
+};
+function pe({ el: e, onInteract: t }) {
+	let n = e.custom_attributes ?? {}, r = e.label ?? n["data-label"] ?? void 0, i = e.placeholder ?? n["data-placeholder"] ?? e.description ?? e.name, a = e.required ?? n["data-required"] === "true", o = e.min_value ?? (n["data-min"] == null ? void 0 : Number(n["data-min"])), s = e.max_value ?? (n["data-max"] == null ? void 0 : Number(n["data-max"])), c = e.step ?? (n["data-step"] == null ? void 0 : Number(n["data-step"])), l = e.default_value;
+	l == null && n["data-default-checked"] != null && (l = String(n["data-default-checked"]).toLowerCase() === "true");
+	let u = e.options ?? [];
+	u.length === 0 && n["data-options"] && (u = String(n["data-options"]).split(",").map((e) => e.trim()).filter(Boolean).map((e) => ({
+		label: e,
+		value: e
+	})));
+	let m = {
+		...e,
+		label: r,
+		placeholder: i,
+		required: a,
+		min_value: o,
+		max_value: s,
+		step: c,
+		default_value: l,
+		options: u
+	}, h = F(e.styling), g = e.component_id ?? void 0, _ = (e.css_classes ?? []).join(" ") || void 0, v = e.field_type ?? "Text", y = i, b = e.disabled ?? !1, x = e.readonly ?? !1, S = {
+		padding: "6px 10px",
+		border: "1px solid #cbd5e1",
+		borderRadius: "4px",
+		fontFamily: "inherit",
+		width: "100%",
+		boxSizing: "border-box",
+		...h
+	}, C = (n) => t?.(JSON.stringify({
+		elementId: g ?? e.name,
+		name: e.name,
+		fieldType: v,
+		label: r || void 0,
+		action: "onChange",
+		value: n
+	})), w = (e) => r ? /* @__PURE__ */ p("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "4px"
+		},
+		children: [/* @__PURE__ */ p("label", {
+			htmlFor: g,
+			style: {
+				fontSize: "0.875em",
+				fontWeight: 500,
+				color: "#374151"
+			},
+			children: [r, a && /* @__PURE__ */ f("span", {
+				style: {
+					color: "#ef4444",
+					marginLeft: 2
+				},
+				children: "*"
+			})]
+		}), e]
+	}) : /* @__PURE__ */ f(d, { children: e });
+	switch (v) {
+		case "TextArea":
+		case "RichText": return w(/* @__PURE__ */ f("textarea", {
+			id: g,
+			name: e.name,
+			className: _,
+			style: {
+				...S,
+				minHeight: "80px",
+				resize: "vertical"
+			},
+			placeholder: y,
+			required: a,
+			disabled: b,
+			readOnly: x,
+			defaultValue: l,
+			onBlur: (e) => C(e.target.value)
+		}));
+		case "Dropdown": return w(/* @__PURE__ */ p("select", {
+			id: g,
+			name: e.name,
+			className: _,
+			style: S,
+			required: a,
+			disabled: b,
+			defaultValue: l,
+			onChange: (e) => C(e.target.value),
+			children: [/* @__PURE__ */ f("option", {
+				value: "",
+				children: "— Select —"
+			}), u.map((e, t) => /* @__PURE__ */ f("option", {
+				value: e.value,
+				children: e.label
+			}, t))]
+		}));
+		case "MultiSelect": return w(/* @__PURE__ */ f(fe, {
+			el: m,
+			id: g,
+			className: _,
+			onInteract: t
+		}));
+		case "RadioGroup": return w(/* @__PURE__ */ f("div", {
+			role: "radiogroup",
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "6px"
+			},
+			children: u.map((t, n) => /* @__PURE__ */ p("label", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "6px",
+					cursor: b ? "default" : "pointer"
+				},
+				children: [/* @__PURE__ */ f("input", {
+					type: "radio",
+					name: e.name,
+					value: t.value,
+					required: a,
+					disabled: b,
+					onChange: () => C(t.value)
+				}), t.label]
+			}, n))
+		}));
+		case "CheckboxGroup": return w(/* @__PURE__ */ f(B, {
+			el: m,
+			id: g,
+			className: _,
+			onInteract: t
+		}));
+		case "Toggle": return /* @__PURE__ */ f(oe, {
+			el: m,
+			id: g,
+			onInteract: t
+		});
+		case "Slider": return w(/* @__PURE__ */ f(se, {
+			el: m,
+			id: g,
+			onInteract: t
+		}));
+		case "Spinner": return w(/* @__PURE__ */ f("input", {
+			type: "number",
+			id: g,
+			name: e.name,
+			className: _,
+			style: S,
+			placeholder: y,
+			required: a,
+			disabled: b,
+			readOnly: x,
+			min: o,
+			max: s,
+			step: c ?? 1,
+			defaultValue: l,
+			onBlur: (e) => C(Number(e.target.value))
+		}));
+		case "Rating": return w(/* @__PURE__ */ f(ce, {
+			el: m,
+			id: g,
+			className: _,
+			onInteract: t
+		}));
+		case "Tags": return w(/* @__PURE__ */ f(le, {
+			el: m,
+			id: g,
+			className: _,
+			onInteract: t
+		}));
+		case "OTP": return w(/* @__PURE__ */ f(ue, {
+			el: m,
+			id: g,
+			className: _,
+			onInteract: t
+		}));
+		case "DateRange": return w(/* @__PURE__ */ f(de, {
+			el: m,
+			id: g,
+			className: _,
+			onInteract: t
+		}));
+		case "DateTime": return w(/* @__PURE__ */ f("input", {
+			type: "datetime-local",
+			id: g,
+			name: e.name,
+			className: _,
+			style: S,
+			required: a,
+			disabled: b,
+			readOnly: x,
+			defaultValue: l,
+			onBlur: (e) => C(e.target.value)
+		}));
+		case "Color": return w(/* @__PURE__ */ f("input", {
+			type: "color",
+			id: g,
+			name: e.name,
+			className: _,
+			style: {
+				width: "48px",
+				height: "36px",
+				padding: "2px",
+				border: "1px solid #cbd5e1",
+				borderRadius: "4px",
+				cursor: b ? "default" : "pointer"
+			},
+			disabled: b,
+			defaultValue: l || "#000000",
+			onChange: (e) => C(e.target.value)
+		}));
+		case "Checkbox": return /* @__PURE__ */ f("div", {
+			style: h,
+			children: /* @__PURE__ */ p("label", {
+				htmlFor: g,
+				style: {
+					display: "inline-flex",
+					alignItems: "center",
+					gap: "6px",
+					cursor: b ? "default" : "pointer",
+					userSelect: "none",
+					fontSize: "0.875em",
+					fontWeight: 500,
+					color: "#374151"
+				},
+				children: [/* @__PURE__ */ f("input", {
+					type: "checkbox",
+					id: g,
+					name: e.name,
+					className: _,
+					required: a,
+					disabled: b,
+					defaultChecked: !!l,
+					onChange: (e) => C(e.target.checked)
+				}), r && /* @__PURE__ */ p("span", { children: [r, a && /* @__PURE__ */ f("span", {
+					style: {
+						color: "#ef4444",
+						marginLeft: 2
+					},
+					children: "*"
+				})] })]
+			})
+		});
+		case "File": {
+			let t = n["data-accept"] || void 0, r = e.multiple === !0 || n["data-multiple"] === "true";
+			return w(/* @__PURE__ */ f("input", {
+				type: "file",
+				id: g,
+				name: e.name,
+				className: _,
+				style: S,
+				required: a,
+				disabled: b,
+				accept: t,
+				multiple: r,
+				onChange: (e) => {
+					let t = e.target.files;
+					if (!t || t.length === 0) {
+						C(null);
+						return;
+					}
+					let n = Array.from(t).map((e) => e.name);
+					C(r ? n : n[0]);
+				}
+			}));
+		}
+		case "ImageUpload": return w(/* @__PURE__ */ f("input", {
+			type: "file",
+			id: g,
+			name: e.name,
+			className: _,
+			style: S,
+			required: a,
+			disabled: b,
+			accept: "image/*",
+			onChange: (e) => C(e.target.files?.[0]?.name)
+		}));
+		default: return w(/* @__PURE__ */ f("input", {
+			type: V[v] ?? v.toLowerCase(),
+			id: g,
+			name: e.name,
+			className: _,
+			style: S,
+			placeholder: y,
+			required: a,
+			disabled: b,
+			readOnly: x,
+			min: o,
+			max: s,
+			step: c,
+			defaultValue: l,
+			onBlur: (e) => C(e.target.value)
+		}));
+	}
+}
+function me({ el: e, id: t, className: r, style: i }) {
+	let a = n(D);
+	return a ? /* @__PURE__ */ p("div", {
+		id: t,
+		className: ["gui-agent-widget", r].filter(Boolean).join(" "),
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			border: "1px solid #e2e8f0",
+			borderRadius: 8,
+			overflow: "hidden",
+			background: "#fff",
+			...i
+		},
+		children: [/* @__PURE__ */ p("div", {
+			style: {
+				padding: "10px 14px",
+				background: "#f8fafc",
+				borderBottom: "1px solid #e2e8f0",
+				fontWeight: 600,
+				fontSize: "0.9em",
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				flexShrink: 0
+			},
+			children: [
+				/* @__PURE__ */ f("span", {
+					style: { fontSize: "1.1em" },
+					children: "🤖"
+				}),
+				e.agent_title ?? e.agent_name ?? "Agent",
+				/* @__PURE__ */ f("span", { style: {
+					marginLeft: "auto",
+					width: 8,
+					height: 8,
+					borderRadius: "50%",
+					background: a.status === "connected" ? "#22c55e" : "#f59e0b",
+					flexShrink: 0
+				} })
+			]
+		}), /* @__PURE__ */ f($, {
+			messages: a.messages,
+			setMessages: a.setMessages,
+			status: a.status,
+			send: a.send
+		})]
+	}) : /* @__PURE__ */ f("div", {
+		id: t,
+		className: r,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: 24,
+			color: "#94a3b8",
+			border: "1px solid #e2e8f0",
+			borderRadius: 8,
+			...i
+		},
+		children: "Chat widget not connected"
+	});
+}
+function H(e, t, n, r = !1) {
+	let i = F(e.styling), a = e.component_id ?? void 0, o = (e.css_classes ?? []).join(" ") || void 0;
 	switch (e.type) {
 		case "Text": {
 			let t = new Set([
@@ -332,102 +1305,141 @@ function P(e, t, n) {
 				"li",
 				"td",
 				"th"
-			]);
-			return /* @__PURE__ */ l(e.tag_name && t.has(e.tag_name) ? e.tag_name : "p", {
-				id: i,
-				className: a,
-				style: r,
+			]), n = e.tag_name && t.has(e.tag_name) ? e.tag_name : "p";
+			return n === "p" && (i.display === "flex" || i.display === "grid") && (n = "div"), /* @__PURE__ */ f(n, {
+				id: a,
+				className: o,
+				style: r ? I(i) : i,
 				children: e.content
 			}, e.name);
 		}
-		case "Link": return /* @__PURE__ */ l("a", {
-			id: i,
-			className: a,
-			style: r,
+		case "Link": return /* @__PURE__ */ f("a", {
+			id: a,
+			className: o,
+			style: r ? I(i) : {
+				fontFamily: "inherit",
+				...i
+			},
 			href: e.url ?? "#",
 			target: e.target ?? "_self",
 			rel: e.rel ?? (e.target === "_blank" ? "noopener noreferrer" : void 0),
 			onClick: (r) => {
 				e.url && n?.(e.url) ? r.preventDefault() : t?.(JSON.stringify({
-					elementId: i ?? e.name,
+					elementId: a ?? e.name,
+					name: e.name,
+					label: e.label || void 0,
 					action: "onClick",
 					value: e.url
 				}));
 			},
 			children: e.label
 		}, e.name);
-		case "Button": return /* @__PURE__ */ l("button", {
-			id: i,
-			className: a,
-			style: r,
-			type: "button",
-			onClick: () => {
-				e.actionType === "navigate" && e.url && n?.(e.url) || t?.(JSON.stringify({
-					elementId: i ?? e.name,
-					action: "onClick"
-				}));
-			},
-			children: e.label
-		}, e.name);
-		case "Image": return /* @__PURE__ */ l("img", {
-			id: i,
-			className: a,
-			style: r,
+		case "Button": {
+			let r = e.buttonType?.toLowerCase() ?? "";
+			return /* @__PURE__ */ f("button", {
+				id: a,
+				className: [
+					"gui-form-btn",
+					r === "outlined button" ? "gui-form-btn--outlined" : r === "flat button" ? "gui-form-btn--flat" : r === "floating action button" ? "gui-form-btn--fab" : "gui-form-btn--submit",
+					o
+				].filter(Boolean).join(" "),
+				style: {
+					fontFamily: "inherit",
+					lineHeight: "inherit",
+					...i
+				},
+				type: "button",
+				onClick: () => {
+					e.actionType?.toLowerCase() === "navigate" && e.url && n?.(e.url) || t?.(JSON.stringify({
+						elementId: a ?? e.name,
+						name: e.name,
+						label: e.label || void 0,
+						actionType: e.actionType || void 0,
+						action: "onClick"
+					}));
+				},
+				children: e.label
+			}, e.name);
+		}
+		case "Image": return /* @__PURE__ */ f("img", {
+			id: a,
+			className: o,
+			style: i,
 			src: e.source ?? "",
 			alt: e.name,
 			onError: (e) => {
 				e.target.style.display = "none";
 			}
 		}, e.name);
-		case "InputField": return /* @__PURE__ */ l("input", {
-			id: i,
-			name: e.name,
-			className: a,
-			style: {
-				padding: "6px 10px",
-				border: "1px solid #cbd5e1",
-				borderRadius: "4px",
-				...r
-			},
-			type: (e.field_type ?? "text").toLowerCase(),
-			placeholder: e.description || e.name,
-			onBlur: (n) => t?.(JSON.stringify({
-				elementId: i ?? e.name,
-				action: "onChange",
-				value: n.target.value
-			}))
+		case "InputField": return /* @__PURE__ */ f(pe, {
+			el: e,
+			onInteract: t
 		}, e.name);
-		case "Form": return /* @__PURE__ */ l("form", {
-			id: i,
-			className: a,
+		case "Form": return /* @__PURE__ */ p("form", {
+			id: a,
+			className: o,
 			style: {
 				display: "flex",
 				flexDirection: "column",
 				gap: "8px",
-				...r
+				...r ? I(i) : i
 			},
 			onSubmit: (n) => {
 				n.preventDefault();
-				let r = Object.fromEntries(new FormData(n.currentTarget));
-				t?.(JSON.stringify({
-					elementId: i ?? e.name,
+				let r = n.currentTarget, i = {};
+				for (let [e, t] of new FormData(r).entries()) {
+					let n = r.querySelector(`[name="${e}"][data-value-type="json"]`), a = r.querySelector(`[name="${e}"][data-value-type="number"]`);
+					if (n && typeof t == "string") try {
+						i[e] = JSON.parse(t);
+					} catch {
+						i[e] = t;
+					}
+					else a && typeof t == "string" ? i[e] = Number(t) : i[e] = t;
+				}
+				r.querySelectorAll("input[type=\"checkbox\"]").forEach((e) => {
+					e.name && (i[e.name] = e.checked);
+				}), r.querySelectorAll("input[type=\"radio\"]").forEach((e) => {
+					e.name && !(e.name in i) && (i[e.name] = "");
+				}), t?.(JSON.stringify({
+					elementId: a ?? e.name,
+					name: e.name,
 					action: "onSubmit",
-					value: r
+					value: i
 				}));
 			},
-			children: (e.inputFields ?? []).map((e) => P(e, t, n))
+			children: [(e.inputFields ?? []).map((e) => H(e, t, n, r)), /* @__PURE__ */ p("div", {
+				style: {
+					display: "flex",
+					gap: "8px",
+					marginTop: "4px"
+				},
+				children: [/* @__PURE__ */ f("button", {
+					type: "submit",
+					className: "gui-form-btn gui-form-btn--submit",
+					children: e.submit_label ?? "Submit"
+				}), e.show_cancel && /* @__PURE__ */ f("button", {
+					type: "button",
+					className: "gui-form-btn gui-form-btn--cancel",
+					onClick: () => t?.(JSON.stringify({
+						elementId: a ?? e.name,
+						name: e.name,
+						action: "onCancel"
+					})),
+					children: e.cancel_label ?? "Cancel"
+				})]
+			})]
 		}, e.name);
-		case "Menu": return /* @__PURE__ */ l(e.tag_name && e.tag_name === "nav" ? "nav" : "div", {
-			id: i,
-			className: a,
-			style: r,
-			children: /* @__PURE__ */ l("ul", {
+		case "Menu": return /* @__PURE__ */ f(e.tag_name && e.tag_name === "nav" ? "nav" : "div", {
+			id: a,
+			className: o,
+			style: r ? I(i) : i,
+			children: /* @__PURE__ */ f("ul", {
 				style: {
 					listStyle: "none",
 					padding: 0,
 					margin: 0
 				},
-				children: (e.menuItems ?? []).map((r, i) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l("a", {
+				children: (e.menuItems ?? []).map((r, i) => /* @__PURE__ */ f("li", { children: /* @__PURE__ */ f("a", {
 					href: r.url ?? "#",
 					target: r.target,
 					rel: r.target === "_blank" ? "noopener noreferrer" : void 0,
@@ -435,6 +1447,8 @@ function P(e, t, n) {
 					onClick: (i) => {
 						r.url && n?.(r.url) ? i.preventDefault() : t?.(JSON.stringify({
 							elementId: e.component_id ?? e.name,
+							name: e.name,
+							label: r.label,
 							action: "onClick",
 							value: r.url
 						}));
@@ -443,14 +1457,14 @@ function P(e, t, n) {
 				}) }, i))
 			})
 		}, e.name);
-		case "DataList": return /* @__PURE__ */ l("ul", {
-			id: i,
-			className: a,
+		case "DataList": return /* @__PURE__ */ f("ul", {
+			id: a,
+			className: o,
 			style: {
 				padding: 0,
-				...r
+				...r ? I(i) : i
 			},
-			children: (e.list_sources ?? []).map((e, t) => /* @__PURE__ */ u("li", {
+			children: (e.list_sources ?? []).map((e, t) => /* @__PURE__ */ p("li", {
 				style: {
 					padding: "4px 0",
 					color: "#94a3b8",
@@ -463,36 +1477,42 @@ function P(e, t, n) {
 				]
 			}, t))
 		}, e.name);
+		case "Alert": return /* @__PURE__ */ f(ae, {
+			el: e,
+			id: a,
+			className: o,
+			style: i
+		}, e.name);
 		case "EmbeddedContent": {
 			let t = e.source ?? e.extra_props?.src ?? "";
-			return t ? /* @__PURE__ */ l("iframe", {
-				id: i,
-				className: a,
+			return t ? /* @__PURE__ */ f("iframe", {
+				id: a,
+				className: o,
 				style: {
 					width: "100%",
 					height: "300px",
 					border: "none",
-					...r
+					...i
 				},
 				src: t,
 				title: e.name,
 				loading: "lazy",
 				sandbox: "allow-scripts allow-same-origin"
-			}, e.name) : /* @__PURE__ */ l("div", {
-				id: i,
-				className: a,
-				style: r,
+			}, e.name) : /* @__PURE__ */ f("div", {
+				id: a,
+				className: o,
+				style: i,
 				children: "[Embedded Content]"
 			}, e.name);
 		}
 		case "ViewContainer": {
-			let o = { ...r };
+			let s = { ...i };
 			if (e.layout) {
 				let t = e.layout.layout_type;
-				t === "flex" ? o.display = "flex" : t === "grid" && (o.display = "grid");
-				for (let [t, n] of Object.entries(e.layout)) !n || t === "layout_type" || (o[w(t)] = n);
+				t === "flex" ? s.display = "flex" : t === "grid" && (s.display = "grid");
+				for (let [t, n] of Object.entries(e.layout)) !n || t === "layout_type" || t === "alignment" || (s[O(t)] = typeof n == "string" ? k(n) : n);
 			}
-			let s = new Set([
+			let c = r ? I(s) : s, l = new Set([
 				"div",
 				"section",
 				"article",
@@ -504,39 +1524,39 @@ function P(e, t, n) {
 				"ul",
 				"ol"
 			]);
-			return /* @__PURE__ */ l(e.tag_name && s.has(e.tag_name) ? e.tag_name : "div", {
-				id: i,
-				className: a,
-				style: o,
-				children: (e.view_elements ?? []).map((e) => P(e, t, n))
+			return /* @__PURE__ */ f(e.tag_name && l.has(e.tag_name) ? e.tag_name : "div", {
+				id: a,
+				className: o,
+				style: c,
+				children: (e.view_elements ?? []).map((e) => H(e, t, n, r))
 			}, e.name);
 		}
 		case "LineChart":
 		case "BarChart":
 		case "PieChart":
 		case "RadarChart":
-		case "RadialBarChart": return /* @__PURE__ */ l(N, { el: e }, e.name);
-		case "Table": return /* @__PURE__ */ u("div", {
-			id: i,
-			className: a,
+		case "RadialBarChart": return /* @__PURE__ */ f(ie, { el: e }, e.name);
+		case "Table": return /* @__PURE__ */ p("div", {
+			id: a,
+			className: o,
 			style: {
 				overflowX: "auto",
-				...r
+				...r ? I(i) : i
 			},
-			children: [e.title && /* @__PURE__ */ l("div", {
+			children: [e.title && /* @__PURE__ */ f("div", {
 				style: {
 					fontWeight: 600,
 					marginBottom: 8,
 					fontSize: "0.95em"
 				},
 				children: e.title
-			}), /* @__PURE__ */ u("table", {
+			}), /* @__PURE__ */ p("table", {
 				style: {
 					borderCollapse: "collapse",
 					width: "100%",
 					fontSize: "0.88em"
 				},
-				children: [e.show_header !== !1 && (e.columns ?? []).length > 0 && /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: (e.columns ?? []).map((e, t) => /* @__PURE__ */ l("th", {
+				children: [e.show_header !== !1 && (e.columns ?? []).length > 0 && /* @__PURE__ */ f("thead", { children: /* @__PURE__ */ f("tr", { children: (e.columns ?? []).map((e, t) => /* @__PURE__ */ f("th", {
 					style: {
 						padding: "6px 10px",
 						borderBottom: "2px solid #e2e8f0",
@@ -544,7 +1564,7 @@ function P(e, t, n) {
 						fontWeight: 600
 					},
 					children: e.label
-				}, t)) }) }), /* @__PURE__ */ l("tbody", { children: /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
+				}, t)) }) }), /* @__PURE__ */ f("tbody", { children: /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f("td", {
 					colSpan: (e.columns ?? []).length || 1,
 					style: {
 						padding: "8px 10px",
@@ -555,216 +1575,226 @@ function P(e, t, n) {
 				}) }) })]
 			})]
 		}, e.name);
-		case "MetricCard": return /* @__PURE__ */ u("div", {
-			id: i,
-			className: ["gui-metric-card", a].filter(Boolean).join(" "),
-			style: r,
+		case "MetricCard": return /* @__PURE__ */ p("div", {
+			id: a,
+			className: ["gui-metric-card", o].filter(Boolean).join(" "),
+			style: r ? I(i) : i,
 			children: [
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ f("div", {
 					className: "gui-metric-card__title",
 					children: e.metric_title ?? e.name
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ f("div", {
 					className: "gui-metric-card__value",
 					style: { color: e.value_color ?? "#2c3e50" },
 					children: "—"
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ f("div", {
 					className: "gui-metric-card__format",
 					children: e.format
 				})
 			]
 		}, e.name);
-		case "AgentComponent": return /* @__PURE__ */ u("div", {
-			id: i,
-			className: ["gui-agent-component", a].filter(Boolean).join(" "),
-			style: r,
-			children: [/* @__PURE__ */ l("span", { children: "🤖" }), /* @__PURE__ */ u("span", { children: [e.agent_title ?? e.agent_name ?? "Agent", " Widget"] })]
+		case "AgentComponent": return /* @__PURE__ */ f(me, {
+			el: e,
+			id: a,
+			className: o,
+			style: i
 		}, e.name);
 		default: return null;
 	}
 }
-function F({ content: i, onInteract: o }) {
-	let s = "gui-s" + n().replace(/[^a-zA-Z0-9]/g, ""), c = r(() => {
+function U({ content: e, onInteract: n, messageId: o, chatProps: c, chatMode: l = !1 }) {
+	let u = "gui-s" + i().replace(/[^a-zA-Z0-9]/g, ""), d = a(() => {
 		try {
-			let e = typeof i == "string" ? i : JSON.stringify(i);
-			return JSON.parse(e);
+			let t = typeof e == "string" ? e : JSON.stringify(e);
+			return JSON.parse(t);
 		} catch {
 			return null;
 		}
-	}, [i]), d = r(() => (c?.modules ?? []).flatMap((e) => e.screens), [c]), [f, p] = a(0), m = e((e) => {
-		let t = d.findIndex((t) => t.name === e);
-		if (t >= 0) return p(t), !0;
-		let n = d.findIndex((t) => t.route_path === e);
-		if (n >= 0) return p(n), !0;
+	}, [e]), m = a(() => (d?.modules ?? []).flatMap((e) => e.screens), [d]), h = t((e) => {
+		if (n) {
+			if (!o) {
+				n(e);
+				return;
+			}
+			try {
+				let t = JSON.parse(e);
+				n(JSON.stringify({
+					...t,
+					messageId: o
+				}));
+			} catch {
+				n(e);
+			}
+		}
+	}, [n, o]), [g, _] = s(0), v = t((e) => {
+		let t = m.findIndex((t) => t.name === e);
+		if (t >= 0) return _(t), !0;
+		let n = m.findIndex((t) => t.route_path === e);
+		if (n >= 0) return _(n), !0;
 		if (e === "/" || e === "") {
-			let e = d.findIndex((e) => e.is_main_page);
-			return p(e >= 0 ? e : 0), !0;
+			let e = m.findIndex((e) => e.is_main_page);
+			return _(e >= 0 ? e : 0), !0;
 		}
 		return !1;
-	}, [d]);
-	t(() => {
-		let e = d.findIndex((e) => e.is_main_page);
-		p(e >= 0 ? e : 0);
-	}, [d]);
-	let h = r(() => c?.style_entries ? j(c.style_entries, s) : "", [c, s]);
-	if (t(() => {
-		if (!h) return;
+	}, [m]);
+	r(() => {
+		let e = m.findIndex((e) => e.is_main_page);
+		_(e >= 0 ? e : 0);
+	}, [m]);
+	let y = a(() => d?.style_entries ? te(d.style_entries, u, l) : "", [
+		d,
+		u,
+		l
+	]);
+	if (r(() => {
+		if (!y) return;
 		let e = document.createElement("style");
-		return e.setAttribute("data-gui-scope", s), e.textContent = h, document.head.appendChild(e), () => {
+		return e.setAttribute("data-gui-scope", u), e.textContent = y, document.head.appendChild(e), () => {
 			document.head.removeChild(e);
 		};
-	}, [h, s]), !c) return /* @__PURE__ */ l("p", {
+	}, [y, u]), !d) return /* @__PURE__ */ f("p", {
 		className: "msg-text--muted",
 		children: "[Invalid UI definition]"
 	});
-	let g = d[f];
-	if (!g) return /* @__PURE__ */ l("p", {
+	let b = m[g];
+	if (!b) return /* @__PURE__ */ f("p", {
 		className: "msg-text--muted",
 		children: "[No screens defined]"
 	});
-	let _ = c.modules.length > 1, v = d.length > 1;
-	return /* @__PURE__ */ u("div", {
-		className: "gui-renderer",
-		children: [
-			/* @__PURE__ */ u("div", {
-				className: "gui-renderer__header",
-				children: [/* @__PURE__ */ l("span", {
-					className: "gui-renderer__title",
-					children: c.name
-				}), c.description && /* @__PURE__ */ l("span", {
-					className: "gui-renderer__description",
-					children: c.description
-				})]
-			}),
-			(_ || v) && /* @__PURE__ */ l("div", {
+	let x = d.modules.length > 1, S = m.length > 1;
+	return /* @__PURE__ */ f(D.Provider, {
+		value: c ?? null,
+		children: /* @__PURE__ */ p("div", {
+			className: `gui-renderer${l ? " gui-renderer--chat" : ""}`,
+			children: [(x || S) && /* @__PURE__ */ f("div", {
 				className: "gui-renderer__tabs",
 				role: "tablist",
-				children: d.map((e, t) => /* @__PURE__ */ u("button", {
+				children: m.map((e, t) => /* @__PURE__ */ p("button", {
 					role: "tab",
-					"aria-selected": t === f,
-					className: `gui-renderer__tab${t === f ? " gui-renderer__tab--active" : ""}`,
-					onClick: () => p(t),
-					children: [e.name, e.is_main_page && /* @__PURE__ */ l("span", {
+					"aria-selected": t === g,
+					className: `gui-renderer__tab${t === g ? " gui-renderer__tab--active" : ""}`,
+					onClick: () => _(t),
+					children: [e.name, e.is_main_page && /* @__PURE__ */ f("span", {
 						className: "gui-renderer__tab-badge",
 						children: "home"
 					})]
 				}, t))
-			}),
-			/* @__PURE__ */ l("div", {
-				className: `gui-renderer__screen ${s}`,
-				children: (g.view_elements ?? []).map((e) => P(e, o, m))
-			})
-		]
+			}), /* @__PURE__ */ f("div", {
+				className: `gui-renderer__screen ${u}`,
+				children: (b.view_elements ?? []).map((e) => H(e, h, v, l))
+			})]
+		})
 	});
 }
 //#endregion
 //#region src/components/ReasoningTrace.tsx
-var I = new Set([
-	f.TASK_ADDED,
-	f.TASK_COMPLETED,
-	f.TASK_SKIPPED
-]), L = new Set([
+var he = new Set([
+	h.TASK_ADDED,
+	h.TASK_COMPLETED,
+	h.TASK_SKIPPED
+]), ge = new Set([
 	"add_tasks",
 	"complete_task",
 	"skip_task"
 ]);
-function R(e) {
-	if (e.kind !== f.LLM_TOOL_CALLS) return !1;
+function _e(e) {
+	if (e.kind !== h.LLM_TOOL_CALLS) return !1;
 	let t = e.details?.tool_calls ?? [];
-	return t.length === 0 ? !1 : t.every((e) => e.name !== void 0 && L.has(e.name));
+	return t.length === 0 ? !1 : t.every((e) => e.name !== void 0 && ge.has(e.name));
 }
-function z({ trace: e }) {
-	let [n, r] = a(e.inProgress);
-	t(() => {
-		e.inProgress || r(!1);
+function W({ trace: e }) {
+	let [t, n] = s(e.inProgress);
+	r(() => {
+		e.inProgress || n(!1);
 	}, [e.inProgress]);
-	let i = e.inProgress || n, o = e.steps.filter((e) => !(e.kind === f.REASONING_STARTED || e.kind === f.REASONING_FINISHED || I.has(e.kind) || R(e))), s = new Set(o.map((e) => e.step)).size;
-	return /* @__PURE__ */ u("div", {
+	let i = e.inProgress || t, a = e.steps.filter((e) => !(e.kind === h.REASONING_STARTED || e.kind === h.REASONING_FINISHED || he.has(e.kind) || _e(e))), o = new Set(a.map((e) => e.step)).size;
+	return /* @__PURE__ */ p("div", {
 		className: `reasoning-trace${e.inProgress ? " reasoning-trace--live" : ""}`,
-		children: [/* @__PURE__ */ u("button", {
+		children: [/* @__PURE__ */ p("button", {
 			type: "button",
 			className: `reasoning-trace__summary${i ? " reasoning-trace__summary--open" : ""}`,
-			onClick: () => !e.inProgress && r((e) => !e),
+			onClick: () => !e.inProgress && n((e) => !e),
 			disabled: e.inProgress,
 			"aria-expanded": i,
 			children: [
-				/* @__PURE__ */ l("span", {
+				/* @__PURE__ */ f("span", {
 					className: "reasoning-trace__icon",
 					"aria-hidden": !0,
 					children: e.inProgress ? "🧠" : "✨"
 				}),
-				/* @__PURE__ */ l("span", {
+				/* @__PURE__ */ f("span", {
 					className: "reasoning-trace__label",
-					children: e.inProgress ? `Reasoning… (${s} step${s === 1 ? "" : "s"})` : `Reasoned across ${s} step${s === 1 ? "" : "s"}`
+					children: e.inProgress ? `Reasoning… (${o} step${o === 1 ? "" : "s"})` : `Reasoned across ${o} step${o === 1 ? "" : "s"}`
 				}),
-				!e.inProgress && /* @__PURE__ */ l("span", {
+				!e.inProgress && /* @__PURE__ */ f("span", {
 					className: "reasoning-trace__chevron",
 					"aria-hidden": !0,
 					children: "▶"
 				})
 			]
-		}), /* @__PURE__ */ l("div", {
+		}), /* @__PURE__ */ f("div", {
 			className: `reasoning-trace__body-wrapper${i ? " reasoning-trace__body-wrapper--open" : ""}`,
-			children: /* @__PURE__ */ u("div", {
+			children: /* @__PURE__ */ p("div", {
 				className: "reasoning-trace__body-inner",
-				children: [/* @__PURE__ */ l(ne, { steps: o }), e.tasks.length > 0 && /* @__PURE__ */ l(ee, { tasks: e.tasks })]
+				children: [/* @__PURE__ */ f(be, { steps: a }), e.tasks.length > 0 && /* @__PURE__ */ f(ve, { tasks: e.tasks })]
 			})
 		})]
 	});
 }
-var B = {
-	[p.PENDING]: "pending",
-	[p.IN_PROGRESS]: "in progress",
-	[p.COMPLETED]: "completed",
-	[p.SKIPPED]: "skipped"
+var G = {
+	[g.PENDING]: "pending",
+	[g.IN_PROGRESS]: "in progress",
+	[g.COMPLETED]: "completed",
+	[g.SKIPPED]: "skipped"
 };
-function ee({ tasks: e }) {
-	let t = e.reduce((e, t) => (e[t.status] = (e[t.status] ?? 0) + 1, e), {}), n = t[p.COMPLETED] ?? 0, r = t[p.SKIPPED] ?? 0, i = (t[p.PENDING] ?? 0) + (t[p.IN_PROGRESS] ?? 0);
-	return /* @__PURE__ */ u("div", {
+function ve({ tasks: e }) {
+	let t = e.reduce((e, t) => (e[t.status] = (e[t.status] ?? 0) + 1, e), {}), n = t[g.COMPLETED] ?? 0, r = t[g.SKIPPED] ?? 0, i = (t[g.PENDING] ?? 0) + (t[g.IN_PROGRESS] ?? 0);
+	return /* @__PURE__ */ p("div", {
 		className: "task-panel",
-		children: [/* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ p("div", {
 			className: "task-panel__header",
-			children: [/* @__PURE__ */ l("span", {
+			children: [/* @__PURE__ */ f("span", {
 				className: "task-panel__title",
 				children: "Tasks"
-			}), /* @__PURE__ */ u("span", {
+			}), /* @__PURE__ */ p("span", {
 				className: "task-panel__counts",
 				children: [
-					n > 0 && /* @__PURE__ */ u("span", {
+					n > 0 && /* @__PURE__ */ p("span", {
 						className: "task-panel__count task-panel__count--completed",
 						children: [n, " ✓"]
 					}),
-					r > 0 && /* @__PURE__ */ u("span", {
+					r > 0 && /* @__PURE__ */ p("span", {
 						className: "task-panel__count task-panel__count--skipped",
 						children: [r, " ⊘"]
 					}),
-					i > 0 && /* @__PURE__ */ u("span", {
+					i > 0 && /* @__PURE__ */ p("span", {
 						className: "task-panel__count task-panel__count--pending",
 						children: [i, " pending"]
 					})
 				]
 			})]
-		}), /* @__PURE__ */ l("ul", {
+		}), /* @__PURE__ */ f("ul", {
 			className: "task-panel__list",
-			children: e.map((e) => /* @__PURE__ */ u("li", {
+			children: e.map((e) => /* @__PURE__ */ p("li", {
 				className: `task-panel__item task-panel__item--${e.status}`,
-				children: [/* @__PURE__ */ l("span", {
+				children: [/* @__PURE__ */ f("span", {
 					className: `task-panel__box task-panel__box--${e.status}`,
-					title: B[e.status] ?? e.status,
-					"aria-label": B[e.status] ?? e.status
-				}), /* @__PURE__ */ u("span", {
+					title: G[e.status] ?? e.status,
+					"aria-label": G[e.status] ?? e.status
+				}), /* @__PURE__ */ p("span", {
 					className: "task-panel__text",
 					children: [
-						/* @__PURE__ */ u("span", {
+						/* @__PURE__ */ p("span", {
 							className: "task-panel__id",
 							children: ["#", e.id]
 						}),
-						/* @__PURE__ */ l("span", {
+						/* @__PURE__ */ f("span", {
 							className: "task-panel__description",
 							children: e.description
 						}),
-						e.result && /* @__PURE__ */ u("span", {
+						e.result && /* @__PURE__ */ p("span", {
 							className: "task-panel__result",
 							title: e.result,
 							children: ["→ ", e.result]
@@ -775,11 +1805,11 @@ function ee({ tasks: e }) {
 		})]
 	});
 }
-function te(e) {
+function ye(e) {
 	let t = [], n = 0;
-	for (; n < e.length;) if (e[n].kind === f.TOOL_RESULT) {
+	for (; n < e.length;) if (e[n].kind === h.TOOL_RESULT) {
 		let r = n;
-		for (; r < e.length && e[r].kind === f.TOOL_RESULT;) r++;
+		for (; r < e.length && e[r].kind === h.TOOL_RESULT;) r++;
 		let i = e.slice(n, r);
 		if (i.length > 2) t.push({
 			type: "tool_result_group",
@@ -796,7 +1826,7 @@ function te(e) {
 	}), n++;
 	return t;
 }
-function ne({ steps: e }) {
+function be({ steps: e }) {
 	let t = [];
 	for (let n of e) {
 		let e = t[t.length - 1];
@@ -805,47 +1835,47 @@ function ne({ steps: e }) {
 			events: [n]
 		});
 	}
-	return t.length === 0 ? null : /* @__PURE__ */ l("div", {
+	return t.length === 0 ? null : /* @__PURE__ */ f("div", {
 		className: "reasoning-trace__steps",
-		children: t.map((e, t) => /* @__PURE__ */ u("div", {
+		children: t.map((e, t) => /* @__PURE__ */ p("div", {
 			className: "reasoning-trace__step-group",
-			children: [/* @__PURE__ */ u("div", {
+			children: [/* @__PURE__ */ p("div", {
 				className: "reasoning-trace__step-header",
 				title: `actual reasoning iteration #${e.step}`,
 				children: ["STEP ", t]
-			}), /* @__PURE__ */ l("ol", {
+			}), /* @__PURE__ */ f("ol", {
 				className: "reasoning-trace__step-list",
-				children: te(e.events).map((e, t) => e.type === "tool_result_group" ? /* @__PURE__ */ l(H, { steps: e.steps }, t) : /* @__PURE__ */ l(U, { step: e.step }, t))
+				children: ye(e.events).map((e, t) => e.type === "tool_result_group" ? /* @__PURE__ */ f(Se, { steps: e.steps }, t) : /* @__PURE__ */ f(K, { step: e.step }, t))
 			})]
 		}, t))
 	});
 }
-var V = {
-	[f.LLM_TEXT]: "💬",
-	[f.LLM_TOOL_CALLS]: "🛠️",
-	[f.TOOL_RESULT]: "📥",
-	[f.TASK_ADDED]: "📝",
-	[f.TASK_COMPLETED]: "✅",
-	[f.TASK_SKIPPED]: "⏭️",
-	[f.PUSHBACK]: "↩️",
-	[f.MAX_STEPS]: "⏱️"
+var xe = {
+	[h.LLM_TEXT]: "💬",
+	[h.LLM_TOOL_CALLS]: "🛠️",
+	[h.TOOL_RESULT]: "📥",
+	[h.TASK_ADDED]: "📝",
+	[h.TASK_COMPLETED]: "✅",
+	[h.TASK_SKIPPED]: "⏭️",
+	[h.PUSHBACK]: "↩️",
+	[h.MAX_STEPS]: "⏱️"
 };
-function H({ steps: e }) {
-	let [t, n] = a(!1);
-	return /* @__PURE__ */ u("li", {
+function Se({ steps: e }) {
+	let [t, n] = s(!1);
+	return /* @__PURE__ */ p("li", {
 		className: "reasoning-trace__step",
-		children: [/* @__PURE__ */ u("button", {
+		children: [/* @__PURE__ */ p("button", {
 			type: "button",
 			className: "reasoning-trace__step-line",
 			onClick: () => n((e) => !e),
 			title: "Click to expand tool results",
 			children: [
-				/* @__PURE__ */ l("span", {
+				/* @__PURE__ */ f("span", {
 					className: "reasoning-trace__step-icon",
 					"aria-hidden": !0,
 					children: "📥"
 				}),
-				/* @__PURE__ */ u("span", {
+				/* @__PURE__ */ p("span", {
 					className: "reasoning-trace__step-summary",
 					children: [
 						"Completed ",
@@ -853,7 +1883,7 @@ function H({ steps: e }) {
 						" tool calls"
 					]
 				}),
-				/* @__PURE__ */ l("span", {
+				/* @__PURE__ */ f("span", {
 					className: "reasoning-trace__step-chevron",
 					"aria-hidden": !0,
 					style: {
@@ -864,31 +1894,31 @@ function H({ steps: e }) {
 					children: "▶"
 				})
 			]
-		}), t && /* @__PURE__ */ l("ol", {
+		}), t && /* @__PURE__ */ f("ol", {
 			className: "reasoning-trace__step-list reasoning-trace__step-list--nested",
-			children: e.map((e, t) => /* @__PURE__ */ l(U, { step: e }, t))
+			children: e.map((e, t) => /* @__PURE__ */ f(K, { step: e }, t))
 		})]
 	});
 }
-function U({ step: e }) {
-	let [t, n] = a(!1), r = V[e.kind] ?? "🔹", i = e.details && Object.keys(e.details).length > 0;
-	return /* @__PURE__ */ u("li", {
+function K({ step: e }) {
+	let [t, n] = s(!1), r = xe[e.kind] ?? "🔹", i = e.details && Object.keys(e.details).length > 0;
+	return /* @__PURE__ */ p("li", {
 		className: "reasoning-trace__step",
-		children: [/* @__PURE__ */ u("button", {
+		children: [/* @__PURE__ */ p("button", {
 			type: "button",
 			className: "reasoning-trace__step-line",
 			onClick: () => i && n((e) => !e),
 			disabled: !i,
 			title: i ? "Click to toggle details" : void 0,
-			children: [/* @__PURE__ */ l("span", {
+			children: [/* @__PURE__ */ f("span", {
 				className: "reasoning-trace__step-icon",
 				"aria-hidden": !0,
 				children: r
-			}), /* @__PURE__ */ l("span", {
+			}), /* @__PURE__ */ f("span", {
 				className: "reasoning-trace__step-summary",
 				children: e.summary
 			})]
-		}), i && t && /* @__PURE__ */ l("pre", {
+		}), i && t && /* @__PURE__ */ f("pre", {
 			className: "reasoning-trace__step-details",
 			children: JSON.stringify(e.details, null, 2)
 		})]
@@ -896,106 +1926,116 @@ function U({ step: e }) {
 }
 //#endregion
 //#region src/components/MessageBubble.tsx
-function W({ message: e, onOptionSelect: t, onUIInteract: n }) {
-	let { action: r, message: i, isUser: a, timestamp: o } = e, s = o ?? null;
-	if (!a && r === "reasoning_trace") {
-		let e = i;
-		return v(e) ? null : /* @__PURE__ */ u("div", {
+function q({ message: e, onOptionSelect: t, onUIInteract: n }) {
+	let { id: r, action: i, message: a, isUser: o, timestamp: s } = e, c = s ?? null;
+	if (!o && i === "reasoning_trace") {
+		let e = a;
+		return x(e) ? null : /* @__PURE__ */ p("div", {
 			className: "message message--agent message--reasoning",
-			children: [s && /* @__PURE__ */ l("span", {
+			children: [c && /* @__PURE__ */ f("span", {
 				className: "message__timestamp",
-				children: s
-			}), /* @__PURE__ */ l("div", {
+				children: c
+			}), /* @__PURE__ */ f("div", {
 				className: "message__body",
-				children: /* @__PURE__ */ l(z, { trace: e })
+				children: /* @__PURE__ */ f(W, { trace: e })
 			})]
 		});
 	}
-	if (a) {
-		if (r === d.USER_VOICE) {
-			let e = typeof i == "string" ? i : i.data;
-			return /* @__PURE__ */ u("div", {
+	if (o) {
+		if (i === m.USER_VOICE) {
+			let e = typeof a == "string" ? a : a.data;
+			return /* @__PURE__ */ p("div", {
 				className: "message message--user",
-				children: [s && /* @__PURE__ */ l("span", {
+				children: [c && /* @__PURE__ */ f("span", {
 					className: "message__timestamp message__timestamp--user",
-					children: s
-				}), /* @__PURE__ */ l("div", {
+					children: c
+				}), /* @__PURE__ */ f("div", {
 					className: "message__body",
-					children: /* @__PURE__ */ l("div", {
+					children: /* @__PURE__ */ f("div", {
 						className: "message__bubble message__bubble--user message__bubble--media",
-						children: /* @__PURE__ */ l(Q, { data: e })
+						children: /* @__PURE__ */ f(Z, { data: e })
 					})
 				})]
 			});
 		}
-		return r === d.USER_FILE ? /* @__PURE__ */ u("div", {
+		return i === m.USER_FILE ? /* @__PURE__ */ p("div", {
 			className: "message message--user",
-			children: [s && /* @__PURE__ */ l("span", {
+			children: [c && /* @__PURE__ */ f("span", {
 				className: "message__timestamp message__timestamp--user",
-				children: s
-			}), /* @__PURE__ */ l("div", {
+				children: c
+			}), /* @__PURE__ */ f("div", {
 				className: "message__body",
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ f("div", {
 					className: "message__bubble message__bubble--user message__bubble--media",
-					children: /* @__PURE__ */ l(K, { content: i })
+					children: /* @__PURE__ */ f(J, { content: a })
 				})
 			})]
-		}) : /* @__PURE__ */ u("div", {
+		}) : /* @__PURE__ */ p("div", {
 			className: "message message--user",
-			children: [s && /* @__PURE__ */ l("span", {
+			children: [c && /* @__PURE__ */ f("span", {
 				className: "message__timestamp message__timestamp--user",
-				children: s
-			}), /* @__PURE__ */ l("div", {
+				children: c
+			}), /* @__PURE__ */ f("div", {
 				className: "message__body",
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ f("div", {
 					className: "message__bubble message__bubble--user",
-					children: typeof i == "string" ? i : JSON.stringify(i)
+					children: typeof a == "string" ? a : JSON.stringify(a)
 				})
 			})]
 		});
 	}
-	return /* @__PURE__ */ u("div", {
+	let l, u;
+	if (i === m.AGENT_REPLY_GUI) try {
+		let e = typeof a == "string" ? JSON.parse(a) : a;
+		e?.width && (l = {
+			width: e.width,
+			maxWidth: e.width
+		}, u = { width: "100%" });
+	} catch {}
+	return /* @__PURE__ */ p("div", {
 		className: "message message--agent",
-		children: [s && /* @__PURE__ */ l("span", {
+		style: l,
+		children: [c && /* @__PURE__ */ f("span", {
 			className: "message__timestamp",
-			children: s
-		}), /* @__PURE__ */ l("div", {
+			children: c
+		}), /* @__PURE__ */ f("div", {
 			className: "message__body",
-			children: /* @__PURE__ */ l("div", {
+			style: u,
+			children: /* @__PURE__ */ f("div", {
 				className: "message__bubble message__bubble--agent",
-				children: G(r, i, t, n)
+				children: Ce(i, a, t, n, r)
 			})
 		})]
 	});
 }
-function G(e, t, n, r) {
+function Ce(e, t, n, r, i) {
 	switch (e) {
-		case d.AGENT_REPLY_STR: {
-			let e = String(t), n = C(e);
-			return n === "markdown" ? /* @__PURE__ */ l("div", {
+		case m.AGENT_REPLY_STR: {
+			let e = String(t), n = E(e);
+			return n === "markdown" ? /* @__PURE__ */ f("div", {
 				className: "msg-markdown",
-				children: /* @__PURE__ */ l(o, {
-					remarkPlugins: [s],
+				children: /* @__PURE__ */ f(c, {
+					remarkPlugins: [l],
 					children: e
 				})
-			}) : n === "code" ? /* @__PURE__ */ l("pre", {
+			}) : n === "code" ? /* @__PURE__ */ f("pre", {
 				className: "msg-code",
-				children: /* @__PURE__ */ l("code", { children: e })
-			}) : /* @__PURE__ */ l("p", {
+				children: /* @__PURE__ */ f("code", { children: e })
+			}) : /* @__PURE__ */ f("p", {
 				className: "msg-text",
 				children: e
 			});
 		}
-		case d.AGENT_REPLY_MARKDOWN: return /* @__PURE__ */ l("div", {
+		case m.AGENT_REPLY_MARKDOWN: return /* @__PURE__ */ f("div", {
 			className: "msg-markdown",
-			children: /* @__PURE__ */ l(o, {
-				remarkPlugins: [s],
+			children: /* @__PURE__ */ f(c, {
+				remarkPlugins: [l],
 				children: String(t)
 			})
 		});
-		case d.AGENT_REPLY_HTML: return /* @__PURE__ */ l("div", {
+		case m.AGENT_REPLY_HTML: return /* @__PURE__ */ f("div", {
 			className: "msg-html",
-			dangerouslySetInnerHTML: { __html: c.sanitize(String(t), {
+			dangerouslySetInnerHTML: { __html: u.sanitize(String(t), {
 				ALLOWED_TAGS: /* @__PURE__ */ "p.br.b.i.em.strong.a.ul.ol.li.code.pre.h1.h2.h3.h4.h5.h6.blockquote.table.thead.tbody.tr.th.td.div.span.hr".split("."),
 				ALLOWED_ATTR: [
 					"href",
@@ -1015,22 +2055,24 @@ function G(e, t, n, r) {
 				FORCE_BODY: !0
 			}) }
 		});
-		case d.AGENT_REPLY_FILE: return /* @__PURE__ */ l(K, { content: t });
-		case d.AGENT_REPLY_IMAGE: return /* @__PURE__ */ l(q, { content: t });
-		case d.AGENT_REPLY_DF: return /* @__PURE__ */ l(J, { content: t });
-		case d.AGENT_REPLY_PLOTLY: return /* @__PURE__ */ l(Y, { content: t });
-		case d.AGENT_REPLY_OPTIONS: return /* @__PURE__ */ l(X, {
+		case m.AGENT_REPLY_FILE: return /* @__PURE__ */ f(J, { content: t });
+		case m.AGENT_REPLY_IMAGE: return /* @__PURE__ */ f(we, { content: t });
+		case m.AGENT_REPLY_DF: return /* @__PURE__ */ f(Te, { content: t });
+		case m.AGENT_REPLY_PLOTLY: return /* @__PURE__ */ f(Ee, { content: t });
+		case m.AGENT_REPLY_OPTIONS: return /* @__PURE__ */ f(De, {
 			content: t,
 			onSelect: n
 		});
-		case d.AGENT_REPLY_LOCATION: return /* @__PURE__ */ l(Z, { content: t });
-		case d.AGENT_REPLY_RAG: return /* @__PURE__ */ l(re, { content: t });
-		case d.AGENT_REPLY_AUDIO: return /* @__PURE__ */ l(ie, { content: t });
-		case d.AGENT_REPLY_UI: return /* @__PURE__ */ l(F, {
+		case m.AGENT_REPLY_LOCATION: return /* @__PURE__ */ f(Oe, { content: t });
+		case m.AGENT_REPLY_RAG: return /* @__PURE__ */ f(ke, { content: t });
+		case m.AGENT_REPLY_AUDIO: return /* @__PURE__ */ f(Ae, { content: t });
+		case m.AGENT_REPLY_GUI: return /* @__PURE__ */ f(U, {
 			content: t,
-			onInteract: r
+			onInteract: r,
+			messageId: i,
+			chatMode: !0
 		});
-		default: return /* @__PURE__ */ u("p", {
+		default: return /* @__PURE__ */ p("p", {
 			className: "msg-text msg-text--muted",
 			children: [
 				"[Unsupported message type: ",
@@ -1040,7 +2082,7 @@ function G(e, t, n, r) {
 		});
 	}
 }
-function K({ content: e }) {
+function J({ content: e }) {
 	let t = e, n = t.data ?? t.base64 ?? "";
 	function r() {
 		try {
@@ -1052,82 +2094,82 @@ function K({ content: e }) {
 			console.error("Failed to decode file data");
 		}
 	}
-	return /* @__PURE__ */ u("button", {
+	return /* @__PURE__ */ p("button", {
 		className: "msg-file-btn",
 		onClick: r,
 		children: ["📄 ", t.name ?? "Download file"]
 	});
 }
-function q({ content: e }) {
+function we({ content: e }) {
 	let t, n;
 	if (typeof e == "string") t = e, n = "image/png";
 	else {
 		let r = e;
 		t = r.data ?? r.base64 ?? "", n = r.type ?? (r.format ? `image/${r.format.toLowerCase()}` : "image/png");
 	}
-	return t ? /* @__PURE__ */ l("div", {
+	return t ? /* @__PURE__ */ f("div", {
 		className: "msg-image",
-		children: /* @__PURE__ */ l("img", {
+		children: /* @__PURE__ */ f("img", {
 			src: `data:${n};base64,${t}`,
 			alt: typeof e == "object" && e ? e.name ?? "Image" : "Image",
 			onError: (e) => {
 				e.target.style.display = "none";
 			}
 		})
-	}) : /* @__PURE__ */ l("span", {
+	}) : /* @__PURE__ */ f("span", {
 		className: "msg-text--muted",
 		children: "Image unavailable"
 	});
 }
-function J({ content: e }) {
-	let [t, n] = a(null), [r, i] = a(!0), o = [], s = [];
-	if (Array.isArray(e) && e.length > 0) o = Object.keys(e[0]), s = e.map((e) => o.map((t) => e[t]));
+function Te({ content: e }) {
+	let [t, n] = s(null), [r, i] = s(!0), a = [], o = [];
+	if (Array.isArray(e) && e.length > 0) a = Object.keys(e[0]), o = e.map((e) => a.map((t) => e[t]));
 	else if (typeof e == "object" && e) {
 		let t = e;
-		if (Array.isArray(t.data) && Array.isArray(t.columns)) o = t.columns, s = t.data;
+		if (Array.isArray(t.data) && Array.isArray(t.columns)) a = t.columns, o = t.data;
 		else {
 			let e = Object.keys(t), n = t[e[0]];
 			if (e.length > 0 && typeof n == "object" && n && !Array.isArray(n)) {
-				o = e;
+				a = e;
 				let n = t;
-				s = Object.keys(n[o[0]]).map((e) => o.map((t) => n[t][e]));
+				o = Object.keys(n[a[0]]).map((e) => a.map((t) => n[t][e]));
 			}
 		}
 	}
-	if (o.length === 0) return /* @__PURE__ */ l("pre", {
+	if (a.length === 0) return /* @__PURE__ */ f("pre", {
 		className: "msg-code",
 		children: JSON.stringify(e, null, 2)
 	});
 	function c(e) {
 		t === e ? i((e) => !e) : (n(e), i(!0));
 	}
-	let d = t === null ? s : [...s].sort((e, n) => {
+	let l = t === null ? o : [...o].sort((e, n) => {
 		let i = e[t], a = n[t];
 		return i == null && a == null ? 0 : i == null ? r ? 1 : -1 : a == null ? r ? -1 : 1 : typeof i == "number" && typeof a == "number" ? r ? i - a : a - i : r ? String(i).localeCompare(String(a)) : String(a).localeCompare(String(i));
 	});
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ f("div", {
 		className: "msg-table-wrapper",
-		children: /* @__PURE__ */ u("table", {
+		children: /* @__PURE__ */ p("table", {
 			className: "msg-table",
-			children: [/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: o.map((e, n) => /* @__PURE__ */ u("th", {
+			children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ f("tr", { children: a.map((e, n) => /* @__PURE__ */ p("th", {
 				className: `msg-table__th${t === n ? " msg-table__th--sorted" : ""}`,
 				onClick: () => c(n),
-				children: [e, /* @__PURE__ */ l("span", {
+				children: [e, /* @__PURE__ */ f("span", {
 					className: "msg-table__sort-icon",
 					children: t === n ? r ? "↑" : "↓" : "↕"
 				})]
-			}, e)) }) }), /* @__PURE__ */ l("tbody", { children: d.map((e, t) => /* @__PURE__ */ l("tr", { children: e.map((e, t) => /* @__PURE__ */ l("td", { children: String(e ?? "") }, t)) }, t)) })]
+			}, e)) }) }), /* @__PURE__ */ f("tbody", { children: l.map((e, t) => /* @__PURE__ */ f("tr", { children: e.map((e, t) => /* @__PURE__ */ f("td", { children: String(e ?? "") }, t)) }, t)) })]
 		})
 	});
 }
-function Y({ content: e }) {
-	let n = i(null);
-	return t(() => {
-		let t = n.current;
-		if (!t) return;
+function Ee({ content: e }) {
+	let t = o(null);
+	return r(() => {
+		let n = t.current;
+		if (!n) return;
 		let r = !0, i = e;
 		return import("plotly.js-dist-min").then((e) => {
-			!r || !t || e.newPlot(t, i.data ?? [], {
+			!r || !n || e.newPlot(n, i.data ?? [], {
 				margin: {
 					t: 24,
 					r: 10,
@@ -1142,36 +2184,36 @@ function Y({ content: e }) {
 			});
 		}), () => {
 			r = !1, import("plotly.js-dist-min").then((e) => {
-				t && e.purge(t);
+				n && e.purge(n);
 			});
 		};
-	}, [e]), /* @__PURE__ */ l("div", {
-		ref: n,
+	}, [e]), /* @__PURE__ */ f("div", {
+		ref: t,
 		className: "msg-plotly"
 	});
 }
-function X({ content: e, onSelect: t }) {
+function De({ content: e, onSelect: t }) {
 	let n;
-	return n = Array.isArray(e) ? e.map(String) : typeof e == "object" && e ? Object.values(e).map(String) : [], /* @__PURE__ */ l("div", {
+	return n = Array.isArray(e) ? e.map(String) : typeof e == "object" && e ? Object.values(e).map(String) : [], /* @__PURE__ */ f("div", {
 		className: "msg-options",
-		children: n.map((e, n) => /* @__PURE__ */ l("button", {
+		children: n.map((e, n) => /* @__PURE__ */ f("button", {
 			className: "msg-option-btn",
 			onClick: () => t?.(e),
 			children: e
 		}, n))
 	});
 }
-function Z({ content: e }) {
+function Oe({ content: e }) {
 	let { latitude: t, longitude: n, zoom: r = 15 } = e, i = 360 / 2 ** (r + 1), a = `https://www.openstreetmap.org/export/embed.html?bbox=${`${n - i},${t - i},${n + i},${t + i}`}&layer=mapnik&marker=${t},${n}`, o = `https://www.openstreetmap.org/?mlat=${t}&mlon=${n}#map=${r}/${t}/${n}`;
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ p("div", {
 		className: "msg-location",
-		children: [/* @__PURE__ */ l("iframe", {
+		children: [/* @__PURE__ */ f("iframe", {
 			src: a,
 			className: "msg-location__map",
 			title: "Location map",
 			loading: "lazy",
 			referrerPolicy: "no-referrer"
-		}), /* @__PURE__ */ u("a", {
+		}), /* @__PURE__ */ p("a", {
 			className: "msg-location__link",
 			href: o,
 			target: "_blank",
@@ -1186,45 +2228,45 @@ function Z({ content: e }) {
 		})]
 	});
 }
-function re({ content: e }) {
-	let [t, n] = a(!1), r = e, i = r.docs ?? r.documents ?? [];
-	return /* @__PURE__ */ u("div", {
+function ke({ content: e }) {
+	let [t, n] = s(!1), r = e, i = r.docs ?? r.documents ?? [];
+	return /* @__PURE__ */ p("div", {
 		className: "msg-rag",
-		children: [/* @__PURE__ */ l("p", {
+		children: [/* @__PURE__ */ f("p", {
 			className: "msg-rag__answer",
 			children: r.answer
-		}), i.length > 0 && /* @__PURE__ */ u("div", {
+		}), i.length > 0 && /* @__PURE__ */ p("div", {
 			className: "msg-rag__details",
-			children: [/* @__PURE__ */ u("button", {
+			children: [/* @__PURE__ */ p("button", {
 				type: "button",
 				className: `msg-rag__summary${t ? " msg-rag__summary--open" : ""}`,
 				onClick: () => n((e) => !e),
-				children: [/* @__PURE__ */ l("span", {
+				children: [/* @__PURE__ */ f("span", {
 					className: "msg-rag__summary-arrow",
 					children: "▶"
 				}), "Details"]
-			}), /* @__PURE__ */ l("div", {
+			}), /* @__PURE__ */ f("div", {
 				className: `msg-rag__body-wrapper${t ? " msg-rag__body-wrapper--open" : ""}`,
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ f("div", {
 					className: "msg-rag__body-inner",
-					children: /* @__PURE__ */ u("div", {
+					children: /* @__PURE__ */ p("div", {
 						className: "msg-rag__details-body",
 						children: [
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ f("div", {
 								className: "msg-rag__rag-answer-label",
 								children: "RAG Answer"
 							}),
-							r.llm_name && /* @__PURE__ */ u("div", {
+							r.llm_name && /* @__PURE__ */ p("div", {
 								className: "msg-rag__llm-row",
-								children: [/* @__PURE__ */ l("span", {
+								children: [/* @__PURE__ */ f("span", {
 									className: "msg-rag__llm-label",
 									children: "Model"
-								}), /* @__PURE__ */ l("code", {
+								}), /* @__PURE__ */ f("code", {
 									className: "msg-rag__llm-badge",
 									children: r.llm_name
 								})]
 							}),
-							/* @__PURE__ */ u("div", {
+							/* @__PURE__ */ p("div", {
 								className: "msg-rag__context-label",
 								children: [
 									"Context (",
@@ -1232,14 +2274,14 @@ function re({ content: e }) {
 									" Documents)"
 								]
 							}),
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ f("div", {
 								className: "msg-rag__docs",
 								children: i.map((e, t) => {
 									let n = e.metadata?.source, r = e.metadata?.page;
-									return /* @__PURE__ */ u("div", {
+									return /* @__PURE__ */ p("div", {
 										className: "msg-rag__doc-card",
 										children: [
-											/* @__PURE__ */ u("div", {
+											/* @__PURE__ */ p("div", {
 												className: "msg-rag__doc-header",
 												children: [
 													"Document ",
@@ -1248,32 +2290,32 @@ function re({ content: e }) {
 													i.length
 												]
 											}),
-											n && /* @__PURE__ */ u("div", {
+											n && /* @__PURE__ */ p("div", {
 												className: "msg-rag__doc-row",
-												children: [/* @__PURE__ */ l("span", {
+												children: [/* @__PURE__ */ f("span", {
 													className: "msg-rag__doc-key",
 													children: "Source"
-												}), /* @__PURE__ */ l("span", {
+												}), /* @__PURE__ */ f("span", {
 													className: "msg-rag__doc-value",
 													children: n
 												})]
 											}),
-											r != null && /* @__PURE__ */ u("div", {
+											r != null && /* @__PURE__ */ p("div", {
 												className: "msg-rag__doc-row",
-												children: [/* @__PURE__ */ l("span", {
+												children: [/* @__PURE__ */ f("span", {
 													className: "msg-rag__doc-key",
 													children: "Page"
-												}), /* @__PURE__ */ l("span", {
+												}), /* @__PURE__ */ f("span", {
 													className: "msg-rag__doc-value",
 													children: String(r)
 												})]
 											}),
-											/* @__PURE__ */ u("div", {
+											/* @__PURE__ */ p("div", {
 												className: "msg-rag__doc-row msg-rag__doc-row--content",
-												children: [/* @__PURE__ */ l("span", {
+												children: [/* @__PURE__ */ f("span", {
 													className: "msg-rag__doc-key",
 													children: "Content"
-												}), /* @__PURE__ */ l("span", {
+												}), /* @__PURE__ */ f("span", {
 													className: "msg-rag__doc-value msg-rag__doc-content",
 													children: e.content
 												})]
@@ -1289,58 +2331,92 @@ function re({ content: e }) {
 		})]
 	});
 }
-function Q({ data: e, mimeType: n = "audio/wav" }) {
-	let [r, i] = a(null);
-	return t(() => {
-		let t = null;
+function Y(e, t, n) {
+	for (let r = 0; r < n.length; r++) e.setUint8(t + r, n.charCodeAt(r));
+	return t + n.length;
+}
+function X(e, t, n, r) {
+	let i = r.length > 1 ? r[0] : 1, a = r.length > 1 ? r[r.length - 1] : r[0], o, s, c;
+	if (n === "int16") o = e, s = 16, c = 1;
+	else {
+		let t;
+		if (n === "float32") t = new Float32Array(e);
+		else if (n === "float64") {
+			let n = new Float64Array(e);
+			t = new Float32Array(n.length);
+			for (let e = 0; e < n.length; e++) t[e] = n[e];
+		} else if (n === "int32") {
+			let n = new Int32Array(e);
+			t = new Float32Array(n.length);
+			for (let e = 0; e < n.length; e++) t[e] = n[e] / 2147483648;
+		} else t = new Float32Array(e);
+		if (i > 1) {
+			let e = new Float32Array(i * a);
+			for (let n = 0; n < a; n++) for (let r = 0; r < i; r++) e[n * i + r] = t[r * a + n];
+			o = e.buffer;
+		} else o = t.buffer;
+		s = 32, c = 3;
+	}
+	let l = o.byteLength, u = new ArrayBuffer(44 + l), d = new DataView(u), f = 0;
+	return f = Y(d, f, "RIFF"), d.setUint32(f, 36 + l, !0), f += 4, f = Y(d, f, "WAVE"), f = Y(d, f, "fmt "), d.setUint32(f, 16, !0), f += 4, d.setUint16(f, c, !0), f += 2, d.setUint16(f, i, !0), f += 2, d.setUint32(f, t, !0), f += 4, d.setUint32(f, t * i * s / 8, !0), f += 4, d.setUint16(f, i * s / 8, !0), f += 2, d.setUint16(f, s, !0), f += 2, f = Y(d, f, "data"), d.setUint32(f, l, !0), f += 4, new Uint8Array(u, f).set(new Uint8Array(o)), new Blob([u], { type: "audio/wav" });
+}
+function Z({ data: e, sampleRate: t, dtype: n, shape: i }) {
+	let [a, o] = s(null);
+	return r(() => {
+		let r = null;
 		try {
-			let r = atob(e), a = new Uint8Array(r.length);
-			for (let e = 0; e < r.length; e++) a[e] = r.charCodeAt(e);
-			let o = new Blob([a], { type: n });
-			t = URL.createObjectURL(o), i(t);
+			let a = atob(e), s = new Uint8Array(a.length);
+			for (let e = 0; e < a.length; e++) s[e] = a.charCodeAt(e);
+			let c;
+			c = t && n && i ? X(s.buffer, t, n, i) : new Blob([s], { type: "audio/wav" }), r = URL.createObjectURL(c), o(r);
 		} catch {
-			i(null);
+			o(null);
 		}
 		return () => {
-			t && URL.revokeObjectURL(t);
+			r && URL.revokeObjectURL(r);
 		};
-	}, [e, n]), r ? /* @__PURE__ */ l("audio", {
+	}, [
+		e,
+		t,
+		n,
+		JSON.stringify(i)
+	]), a ? /* @__PURE__ */ f("audio", {
 		controls: !0,
-		src: r,
+		src: a,
 		className: "msg-audio__player"
-	}) : /* @__PURE__ */ l("span", {
+	}) : /* @__PURE__ */ f("span", {
 		className: "msg-text--muted",
 		children: "Audio unavailable"
 	});
 }
-function ie({ content: e }) {
-	let t = typeof e == "string" ? { data: e } : e;
-	return /* @__PURE__ */ u("div", {
+function Ae({ content: e }) {
+	if (typeof e != "object" || !e) return /* @__PURE__ */ f("span", {
+		className: "msg-text--muted",
+		children: "Audio unavailable"
+	});
+	let t = e, n = t.metadata ?? {};
+	return /* @__PURE__ */ f("div", {
 		className: "msg-audio",
-		children: [/* @__PURE__ */ l(Q, {
-			data: t.data,
-			mimeType: t.type ?? "audio/wav"
-		}), t.sample_rate != null && /* @__PURE__ */ u("span", {
-			className: "msg-audio__meta",
-			children: [
-				t.sample_rate,
-				" Hz",
-				t.dtype ? ` · ${t.dtype}` : ""
-			]
-		})]
+		children: /* @__PURE__ */ f(Z, {
+			data: t.audio_data_base64,
+			sampleRate: n.sample_rate,
+			dtype: n.dtype,
+			shape: n.shape
+		})
 	});
 }
 //#endregion
 //#region src/components/ChatArea.tsx
-function $() {
+function Q() {
 	let e = /* @__PURE__ */ new Date(), t = (e) => String(e).padStart(2, "0");
 	return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())} ${t(e.getHours())}:${t(e.getMinutes())}:${t(e.getSeconds())}`;
 }
-function ae({ messages: n, setMessages: r, status: o, send: s }) {
-	let [c, f] = a(""), [p, m] = a([]), [h, g] = a(!1), [_, v] = a(!1), y = i(null), b = i(null), x = i(null), S = i(null), C = i(null), w = i([]);
-	t(() => {
-		y.current?.scrollIntoView({ behavior: "smooth" });
-	}, [n]), t(() => {
+function $({ messages: e, setMessages: n, status: i, send: a }) {
+	let [c, l] = s(""), [u, d] = s([]), [h, g] = s(!1), [_, v] = s(!1), y = o(null), b = o(null), x = o(null), S = o(null), C = o(null), w = o([]);
+	r(() => {
+		let e = y.current;
+		e && (e.scrollTop = e.scrollHeight);
+	}, [e]), r(() => {
 		if (!h) return;
 		function e(e) {
 			S.current && !S.current.contains(e.target) && g(!1);
@@ -1353,24 +2429,24 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
 	}
 	async function E() {
 		try {
-			let e = await navigator.mediaDevices.getUserMedia({ audio: !0 }), t = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/ogg", n = new MediaRecorder(e, { mimeType: t });
-			w.current = [], n.ondataavailable = (e) => {
+			let e = await navigator.mediaDevices.getUserMedia({ audio: !0 }), t = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/ogg", r = new MediaRecorder(e, { mimeType: t });
+			w.current = [], r.ondataavailable = (e) => {
 				e.data.size > 0 && w.current.push(e.data);
-			}, n.onstop = () => {
-				let n = new Blob(w.current, { type: t });
+			}, r.onstop = () => {
+				let r = new Blob(w.current, { type: t });
 				e.getTracks().forEach((e) => e.stop());
 				let i = new FileReader();
 				i.onload = () => {
 					let e = i.result.split(",")[1] ?? "";
-					r((t) => [...t, {
+					n((t) => [...t, {
 						id: crypto.randomUUID(),
-						action: d.USER_VOICE,
+						action: m.USER_VOICE,
 						message: e,
 						isUser: !0,
-						timestamp: $()
-					}]), s(d.USER_VOICE, e);
-				}, i.readAsDataURL(n), v(!1);
-			}, n.start(), C.current = n, v(!0);
+						timestamp: Q()
+					}]), a(m.USER_VOICE, e);
+				}, i.readAsDataURL(r), v(!1);
+			}, r.start(), C.current = r, v(!0);
 		} catch {
 			console.error("Microphone access denied or unavailable");
 		}
@@ -1378,53 +2454,53 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
 	function D() {
 		_ ? (C.current?.stop(), C.current = null) : E();
 	}
-	let O = e(() => {
-		let e = c.trim(), t = p.length > 0;
-		if (!(!e && !t || o !== "connected")) {
-			for (let e of p) r((t) => [...t, {
+	let O = t(() => {
+		let e = c.trim(), t = u.length > 0;
+		if (!(!e && !t || i !== "connected")) {
+			for (let e of u) n((t) => [...t, {
 				id: crypto.randomUUID(),
-				action: d.USER_FILE,
+				action: m.USER_FILE,
 				message: {
 					name: e.name,
 					type: e.mimeType,
 					base64: e.base64
 				},
 				isUser: !0,
-				timestamp: $()
-			}]), s(d.USER_FILE, JSON.stringify({
+				timestamp: Q()
+			}]), a(m.USER_FILE, JSON.stringify({
 				name: e.name,
 				type: e.mimeType,
 				base64: e.base64
 			}));
-			m([]), e && (r((t) => [...t, {
+			d([]), e && (n((t) => [...t, {
 				id: crypto.randomUUID(),
-				action: d.USER_MESSAGE,
+				action: m.USER_MESSAGE,
 				message: e,
 				isUser: !0,
-				timestamp: $()
-			}]), s(d.USER_MESSAGE, e), f(""), b.current && (b.current.style.height = "auto"));
+				timestamp: Q()
+			}]), a(m.USER_MESSAGE, e), l(""), b.current && (b.current.style.height = "auto"));
 		}
 	}, [
 		c,
-		p,
-		o,
-		s,
-		r
+		u,
+		i,
+		a,
+		n
 	]);
 	function k(e) {
 		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), O());
 	}
 	function A(e) {
-		r((t) => [...t, {
+		n((t) => [...t, {
 			id: crypto.randomUUID(),
-			action: d.USER_MESSAGE,
+			action: m.USER_MESSAGE,
 			message: e,
 			isUser: !0,
-			timestamp: $()
-		}]), s(d.USER_MESSAGE, e);
+			timestamp: Q()
+		}]), a(m.USER_MESSAGE, e);
 	}
 	function j(e) {
-		s(d.USER_UPDATE_UI, e);
+		a(m.USER_GUI_EVENT, e);
 	}
 	function M(e) {
 		let t = Array.from(e.target.files ?? []);
@@ -1432,7 +2508,7 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
 			let t = new FileReader();
 			t.onload = () => {
 				let n = t.result.split(",")[1] ?? "";
-				m((t) => [...t, {
+				d((t) => [...t, {
 					id: crypto.randomUUID(),
 					name: e.name,
 					base64: n,
@@ -1442,51 +2518,48 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
 		}), e.target.value = "", g(!1));
 	}
 	function N(e) {
-		m((t) => t.filter((t) => t.id !== e));
+		d((t) => t.filter((t) => t.id !== e));
 	}
-	let P = o === "connected" ? "Type a message… (Enter to send, Shift+Enter for new line)" : o === "connecting" ? "Connecting…" : "Not connected", F = o === "connected" && (c.trim().length > 0 || p.length > 0);
-	return /* @__PURE__ */ u("div", {
+	let P = i === "connected" ? "Type a message… (Enter to send, Shift+Enter for new line)" : i === "connecting" ? "Connecting…" : "Not connected", F = i === "connected" && (c.trim().length > 0 || u.length > 0);
+	return /* @__PURE__ */ p("div", {
 		className: "chat-area",
-		children: [/* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ p("div", {
 			className: "chat-area__messages",
-			children: [
-				n.length === 0 && /* @__PURE__ */ l("div", {
-					className: "chat-area__empty",
-					children: o === "connecting" ? "Connecting to agent…" : o === "connected" ? "Send a message to start the conversation" : o === "error" ? "Connection error — check the agent URL" : "Disconnected"
-				}),
-				n.map((e) => /* @__PURE__ */ l(W, {
-					message: e,
-					onOptionSelect: A,
-					onUIInteract: j
-				}, e.id)),
-				/* @__PURE__ */ l("div", { ref: y })
-			]
-		}), /* @__PURE__ */ u("div", {
+			ref: y,
+			children: [e.length === 0 && /* @__PURE__ */ f("div", {
+				className: "chat-area__empty",
+				children: i === "connecting" ? "Connecting to agent…" : i === "connected" ? "Send a message to start the conversation" : i === "error" ? "Connection error — check the agent URL" : "Disconnected"
+			}), e.map((e) => /* @__PURE__ */ f(q, {
+				message: e,
+				onOptionSelect: A,
+				onUIInteract: j
+			}, e.id))]
+		}), /* @__PURE__ */ p("div", {
 			className: "chat-area__input-row",
 			children: [
-				/* @__PURE__ */ l("input", {
+				/* @__PURE__ */ f("input", {
 					ref: x,
 					type: "file",
 					multiple: !0,
 					style: { display: "none" },
 					onChange: M
 				}),
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ p("div", {
 					className: "chat-area__composer",
-					children: [p.length > 0 && /* @__PURE__ */ l("div", {
+					children: [u.length > 0 && /* @__PURE__ */ f("div", {
 						className: "chat-area__attachments",
-						children: p.map((e) => /* @__PURE__ */ u("div", {
+						children: u.map((e) => /* @__PURE__ */ p("div", {
 							className: "attachment-chip",
 							children: [
-								/* @__PURE__ */ l("span", {
+								/* @__PURE__ */ f("span", {
 									className: "attachment-chip__icon",
 									children: "📄"
 								}),
-								/* @__PURE__ */ l("span", {
+								/* @__PURE__ */ f("span", {
 									className: "attachment-chip__name",
 									children: e.name
 								}),
-								/* @__PURE__ */ l("button", {
+								/* @__PURE__ */ f("button", {
 									className: "attachment-chip__remove",
 									onClick: () => N(e.id),
 									title: "Remove file",
@@ -1494,79 +2567,79 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
 								})
 							]
 						}, e.id))
-					}), /* @__PURE__ */ l("div", {
+					}), /* @__PURE__ */ f("div", {
 						className: "chat-area__input-line",
-						children: /* @__PURE__ */ l("textarea", {
+						children: /* @__PURE__ */ f("textarea", {
 							ref: b,
 							className: "chat-area__textarea",
 							value: c,
 							rows: 1,
 							placeholder: P,
-							disabled: o !== "connected",
+							disabled: i !== "connected",
 							onChange: (e) => {
-								f(e.target.value), T();
+								l(e.target.value), T();
 							},
 							onKeyDown: k
 						})
 					})]
 				}),
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ p("div", {
 					className: "attach-menu-anchor",
 					ref: S,
-					children: [/* @__PURE__ */ l("button", {
+					children: [/* @__PURE__ */ f("button", {
 						className: "btn chat-area__icon-btn",
 						title: "Attach",
-						disabled: o !== "connected",
+						disabled: i !== "connected",
 						onClick: () => g((e) => !e),
 						children: "+"
-					}), h && /* @__PURE__ */ l("div", {
+					}), h && /* @__PURE__ */ f("div", {
 						className: "attach-menu",
-						children: /* @__PURE__ */ l("button", {
+						children: /* @__PURE__ */ f("button", {
 							className: "attach-menu__item",
 							onClick: () => x.current?.click(),
 							children: "Add Files"
 						})
 					})]
 				}),
-				/* @__PURE__ */ l("button", {
+				/* @__PURE__ */ f("button", {
 					type: "button",
 					className: `btn chat-area__icon-btn chat-area__mic-btn${_ ? " chat-area__mic-btn--recording" : ""}`,
 					title: _ ? "Stop recording" : "Record voice message",
-					disabled: o !== "connected",
+					disabled: i !== "connected",
 					onClick: D,
-					children: _ ? /* @__PURE__ */ l("svg", {
+					children: _ ? /* @__PURE__ */ f("svg", {
 						width: "14",
 						height: "14",
 						viewBox: "0 0 14 14",
 						fill: "currentColor",
-						children: /* @__PURE__ */ l("rect", {
+						children: /* @__PURE__ */ f("rect", {
 							x: "1",
 							y: "1",
 							width: "12",
 							height: "12",
 							rx: "2"
 						})
-					}) : /* @__PURE__ */ u("svg", {
+					}) : /* @__PURE__ */ p("svg", {
 						width: "16",
 						height: "16",
 						viewBox: "0 0 16 16",
 						fill: "currentColor",
 						children: [
-							/* @__PURE__ */ l("rect", {
+							/* @__PURE__ */ f("rect", {
 								x: "5",
 								y: "1",
 								width: "6",
 								height: "9",
 								rx: "3"
 							}),
-							/* @__PURE__ */ l("path", {
+							/* @__PURE__ */ f("path", {
 								d: "M3 7a5 5 0 0 0 10 0",
 								stroke: "currentColor",
 								strokeWidth: "1.5",
 								fill: "none",
 								strokeLinecap: "round"
 							}),
-							/* @__PURE__ */ l("line", {
+							/* @__PURE__ */ f("line", {
 								x1: "8",
 								y1: "12",
 								x2: "8",
@@ -1575,7 +2648,7 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
 								strokeWidth: "1.5",
 								strokeLinecap: "round"
 							}),
-							/* @__PURE__ */ l("line", {
+							/* @__PURE__ */ f("line", {
 								x1: "5.5",
 								y1: "15",
 								x2: "10.5",
@@ -1587,7 +2660,7 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
 						]
 					})
 				}),
-				/* @__PURE__ */ l("button", {
+				/* @__PURE__ */ f("button", {
 					className: "btn btn--primary chat-area__send-btn",
 					onClick: O,
 					disabled: !F,
@@ -1600,18 +2673,18 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
 }
 //#endregion
 //#region src/hooks/useWebSocket.ts
-function oe(n, r) {
-	let [o, s] = a("disconnected"), c = i(null), l = i(r);
-	return l.current = r, t(() => {
-		if (!n) {
-			s("disconnected");
+function je(e, n) {
+	let [i, a] = s("disconnected"), c = o(null), l = o(n);
+	return l.current = n, r(() => {
+		if (!e) {
+			a("disconnected");
 			return;
 		}
-		s("connecting");
-		let e = new WebSocket(n);
-		return c.current = e, e.onopen = () => {
-			s("connected"), l.current.onOpen?.();
-		}, e.onclose = () => s("disconnected"), e.onerror = () => s("error"), e.onmessage = (e) => {
+		a("connecting");
+		let t = new WebSocket(e);
+		return c.current = t, t.onopen = () => {
+			a("connected"), l.current.onOpen?.();
+		}, t.onclose = () => a("disconnected"), t.onerror = () => a("error"), t.onmessage = (e) => {
 			try {
 				let t = JSON.parse(e.data);
 				if (typeof t.message == "string") try {
@@ -1626,20 +2699,20 @@ function oe(n, r) {
 				console.error("Failed to parse WS message:", e.data);
 			}
 		}, () => {
-			e.close(), c.current = null;
+			t.close(), c.current = null;
 		};
-	}, [n]), {
-		status: o,
-		send: e((e, t) => {
+	}, [e]), {
+		status: i,
+		send: t((e, t) => {
 			c.current?.readyState === WebSocket.OPEN && c.current.send(JSON.stringify({
 				action: e,
 				message: t
 			}));
 		}, []),
-		disconnect: e(() => {
+		disconnect: t(() => {
 			c.current?.close(), c.current = null;
 		}, [])
 	};
 }
 //#endregion
-export { ae as ChatArea, F as GUIRenderer, W as MessageBubble, d as PayloadAction, m as REASONING_TRACE_ACTION, f as ReasoningStepKind, z as ReasoningTrace, p as TaskStatus, C as detectContentKind, v as isEmptyTrace, g as isReasoningEnd, h as isReasoningStart, S as looksLikeCode, b as looksLikeMarkdown, oe as useWebSocket, _ as visibleSteps };
+export { $ as ChatArea, U as GUIRenderer, q as MessageBubble, m as PayloadAction, _ as REASONING_TRACE_ACTION, h as ReasoningStepKind, W as ReasoningTrace, g as TaskStatus, E as detectContentKind, x as isEmptyTrace, y as isReasoningEnd, v as isReasoningStart, T as looksLikeCode, C as looksLikeMarkdown, je as useWebSocket, b as visibleSteps };