besser-agentic-framework-ui 0.1.0

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

@@ -0,0 +1,1645 @@
+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";
+//#region src/types/payload.ts
+var d = {
+	USER_MESSAGE: "user_message",
+	USER_VOICE: "user_voice",
+	USER_FILE: "user_file",
+	USER_SET_VARIABLE: "user_set_variable",
+	RESET: "reset",
+	AGENT_REPLY_STR: "agent_reply_str",
+	AGENT_REPLY_MARKDOWN: "agent_reply_markdown",
+	AGENT_REPLY_HTML: "agent_reply_html",
+	AGENT_REPLY_FILE: "agent_reply_file",
+	AGENT_REPLY_IMAGE: "agent_reply_image",
+	AGENT_REPLY_DF: "agent_reply_dataframe",
+	AGENT_REPLY_PLOTLY: "agent_reply_plotly",
+	AGENT_REPLY_OPTIONS: "agent_reply_options",
+	AGENT_REPLY_LOCATION: "agent_reply_location",
+	AGENT_REPLY_RAG: "agent_reply_rag",
+	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",
+	FETCH_USER_MESSAGES: "fetch_user_messages"
+}, f = {
+	REASONING_STARTED: "reasoning_started",
+	REASONING_FINISHED: "reasoning_finished",
+	LLM_TEXT: "llm_text",
+	LLM_TOOL_CALLS: "llm_tool_calls",
+	TOOL_RESULT: "tool_result",
+	TASK_ADDED: "task_added",
+	TASK_COMPLETED: "task_completed",
+	TASK_SKIPPED: "task_skipped",
+	PUSHBACK: "pushback",
+	MAX_STEPS: "max_steps"
+}, p = {
+	PENDING: "pending",
+	IN_PROGRESS: "in_progress",
+	COMPLETED: "completed",
+	SKIPPED: "skipped"
+}, m = "reasoning_trace";
+function h(e) {
+	return e.kind === f.REASONING_STARTED;
+}
+function g(e) {
+	return e.kind === f.REASONING_FINISHED;
+}
+function _(e) {
+	return e.steps.filter((e) => !h(e) && !g(e));
+}
+function v(e) {
+	return _(e).length === 0;
+}
+//#endregion
+//#region src/utils/contentDetect.ts
+var y = [
+	/^#{1,6}\s+\S/m,
+	/^\s*[-*+]\s+\S/m,
+	/^\s*\d+\.\s+\S/m,
+	/\*\*[^*\n]+\*\*/,
+	/(^|[^_])__[^_\n]+__([^_]|$)/,
+	/```[\s\S]*?```/,
+	/`[^`\n]+`/,
+	/\[[^\]]+\]\([^)\s]+\)/,
+	/^>\s+\S/m,
+	/^\|[^\n]+\|\s*$/m,
+	/^---+\s*$/m
+];
+function b(e) {
+	return !e || e.length < 2 ? !1 : y.some((t) => t.test(e));
+}
+var x = RegExp("^\\s*(" + [
+	"function\\s",
+	"def\\s",
+	"class\\s",
+	"interface\\s",
+	"enum\\s",
+	"import\\s",
+	"from\\s+\\S+\\s+import\\s",
+	"package\\s",
+	"const\\s",
+	"let\\s",
+	"var\\s",
+	"public\\s",
+	"private\\s",
+	"protected\\s",
+	"static\\s",
+	"async\\s+function\\s",
+	"async\\s+def\\s",
+	"#include\\b",
+	"<\\?php\\b",
+	"<!DOCTYPE\\s"
+].join("|") + ")", "m");
+function S(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);
+}
+function C(e) {
+	return b(e) ? "markdown" : S(e) ? "code" : "plain";
+}
+//#endregion
+//#region src/components/GUIRenderer.tsx
+function w(e) {
+	return e.replace(/_([a-z])/g, (e, t) => t.toUpperCase());
+}
+var T = new Set(["unit_size", "icon_size"]), E = new Set([
+	"color_palette",
+	"primary_color",
+	"line_color",
+	"grid_color",
+	"axis_color",
+	"bar_color",
+	"label_color",
+	"fill_color"
+]), D = {
+	background_color: "background",
+	text_color: "color"
+}, O = new Set(["layout_type"]), k = new Set(["p_type", "alignment"]);
+function A(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.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);
+	}
+	return t;
+}
+function j(e, t) {
+	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";
+	}
+	return n;
+}
+function M(e) {
+	let t = [], n = e.custom_attributes?.series;
+	if (typeof n == "string") try {
+		t = JSON.parse(n);
+	} catch {}
+	let r = e.show_legend !== !1, i = {
+		paper_bgcolor: "transparent",
+		plot_bgcolor: "#f8f9fa",
+		font: {
+			family: "inherit",
+			size: 12
+		},
+		margin: {
+			t: e.title ? 40 : 20,
+			r: 10,
+			b: 40,
+			l: 50
+		},
+		showlegend: r,
+		legend: {
+			orientation: "h",
+			y: -.25,
+			font: { size: 11 }
+		}
+	};
+	switch (e.title && (i.title = {
+		text: e.title,
+		font: { size: 14 },
+		x: .5
+	}), e.type) {
+		case "LineChart": return {
+			traces: t.map((t) => ({
+				type: "scatter",
+				mode: "lines+markers",
+				name: t.name,
+				x: (t.data ?? []).map((e) => e.name ?? e.subject),
+				y: (t.data ?? []).map((e) => e.value),
+				line: {
+					color: t.color,
+					width: e.line_width ?? 2,
+					shape: e.curve_type === "monotone" ? "spline" : "linear"
+				},
+				marker: {
+					color: t.color,
+					size: e.dot_size ?? 5
+				}
+			})),
+			layout: i
+		};
+		case "BarChart": {
+			let n = e.orientation === "horizontal";
+			return {
+				traces: t.map((e) => ({
+					type: "bar",
+					name: e.name,
+					...n ? {
+						x: (e.data ?? []).map((e) => e.value),
+						y: (e.data ?? []).map((e) => e.name ?? e.subject),
+						orientation: "h"
+					} : {
+						x: (e.data ?? []).map((e) => e.name ?? e.subject),
+						y: (e.data ?? []).map((e) => e.value)
+					},
+					marker: { color: e.color }
+				})),
+				layout: {
+					...i,
+					barmode: e.stacked ? "stack" : "group"
+				}
+			};
+		}
+		case "PieChart": {
+			let n = t[0];
+			return {
+				traces: n ? [{
+					type: "pie",
+					name: n.name,
+					labels: (n.data ?? []).map((e) => e.name ?? e.subject),
+					values: (n.data ?? []).map((e) => e.value),
+					marker: { colors: t.map((e) => e.color).filter(Boolean) }
+				}] : [],
+				layout: {
+					...i,
+					margin: {
+						t: e.title ? 40 : 20,
+						r: 0,
+						b: 0,
+						l: 0
+					}
+				}
+			};
+		}
+		case "RadarChart": return {
+			traces: t.map((e) => ({
+				type: "scatterpolar",
+				fill: "toself",
+				name: e.name,
+				r: (e.data ?? []).map((e) => e.value),
+				theta: (e.data ?? []).map((e) => e.subject ?? e.name),
+				line: { color: e.color },
+				fillcolor: e.color ? e.color + "33" : void 0
+			})),
+			layout: {
+				...i,
+				polar: {
+					radialaxis: { visible: e.show_radius_axis !== !1 },
+					gridshape: e.grid_type === "polygon" ? "linear" : "circular"
+				},
+				margin: {
+					t: e.title ? 40 : 20,
+					r: 30,
+					b: 30,
+					l: 30
+				}
+			}
+		};
+		case "RadialBarChart": return {
+			traces: t.map((e) => ({
+				type: "barpolar",
+				name: e.name,
+				r: (e.data ?? []).map((e) => e.value),
+				theta: (e.data ?? []).map((e) => e.name ?? e.subject),
+				marker: { color: e.color }
+			})),
+			layout: {
+				...i,
+				margin: {
+					t: e.title ? 40 : 20,
+					r: 30,
+					b: 30,
+					l: 30
+				}
+			}
+		};
+		default: return {
+			traces: [],
+			layout: i
+		};
+	}
+}
+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, {
+				responsive: !0,
+				displayModeBar: !1
+			});
+		}), () => {
+			r = !1, import("plotly.js-dist-min").then((e) => {
+				t && e.purge(t);
+			});
+		};
+	}, [e.name, e.type]);
+	let r = A(e.styling);
+	return /* @__PURE__ */ l("div", {
+		id: e.component_id ?? void 0,
+		className: (e.css_classes ?? []).join(" ") || void 0,
+		style: {
+			minHeight: "300px",
+			...r
+		},
+		ref: n
+	});
+}
+function P(e, t, n) {
+	let r = A(e.styling), i = e.component_id ?? void 0, a = (e.css_classes ?? []).join(" ") || void 0;
+	switch (e.type) {
+		case "Text": {
+			let t = new Set([
+				"h1",
+				"h2",
+				"h3",
+				"h4",
+				"h5",
+				"h6",
+				"p",
+				"span",
+				"div",
+				"label",
+				"li",
+				"td",
+				"th"
+			]);
+			return /* @__PURE__ */ l(e.tag_name && t.has(e.tag_name) ? e.tag_name : "p", {
+				id: i,
+				className: a,
+				style: r,
+				children: e.content
+			}, e.name);
+		}
+		case "Link": return /* @__PURE__ */ l("a", {
+			id: i,
+			className: a,
+			style: r,
+			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,
+					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,
+			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
+			}))
+		}, e.name);
+		case "Form": return /* @__PURE__ */ l("form", {
+			id: i,
+			className: a,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "8px",
+				...r
+			},
+			onSubmit: (n) => {
+				n.preventDefault();
+				let r = Object.fromEntries(new FormData(n.currentTarget));
+				t?.(JSON.stringify({
+					elementId: i ?? e.name,
+					action: "onSubmit",
+					value: r
+				}));
+			},
+			children: (e.inputFields ?? []).map((e) => P(e, t, n))
+		}, 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", {
+				style: {
+					listStyle: "none",
+					padding: 0,
+					margin: 0
+				},
+				children: (e.menuItems ?? []).map((r, i) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l("a", {
+					href: r.url ?? "#",
+					target: r.target,
+					rel: r.target === "_blank" ? "noopener noreferrer" : void 0,
+					style: { textDecoration: "none" },
+					onClick: (i) => {
+						r.url && n?.(r.url) ? i.preventDefault() : t?.(JSON.stringify({
+							elementId: e.component_id ?? e.name,
+							action: "onClick",
+							value: r.url
+						}));
+					},
+					children: r.label
+				}) }, i))
+			})
+		}, e.name);
+		case "DataList": return /* @__PURE__ */ l("ul", {
+			id: i,
+			className: a,
+			style: {
+				padding: 0,
+				...r
+			},
+			children: (e.list_sources ?? []).map((e, t) => /* @__PURE__ */ u("li", {
+				style: {
+					padding: "4px 0",
+					color: "#94a3b8",
+					fontStyle: "italic"
+				},
+				children: [
+					"(data item ",
+					t + 1,
+					")"
+				]
+			}, t))
+		}, e.name);
+		case "EmbeddedContent": {
+			let t = e.source ?? e.extra_props?.src ?? "";
+			return t ? /* @__PURE__ */ l("iframe", {
+				id: i,
+				className: a,
+				style: {
+					width: "100%",
+					height: "300px",
+					border: "none",
+					...r
+				},
+				src: t,
+				title: e.name,
+				loading: "lazy",
+				sandbox: "allow-scripts allow-same-origin"
+			}, e.name) : /* @__PURE__ */ l("div", {
+				id: i,
+				className: a,
+				style: r,
+				children: "[Embedded Content]"
+			}, e.name);
+		}
+		case "ViewContainer": {
+			let o = { ...r };
+			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);
+			}
+			let s = new Set([
+				"div",
+				"section",
+				"article",
+				"header",
+				"footer",
+				"main",
+				"nav",
+				"aside",
+				"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))
+			}, 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,
+			style: {
+				overflowX: "auto",
+				...r
+			},
+			children: [e.title && /* @__PURE__ */ l("div", {
+				style: {
+					fontWeight: 600,
+					marginBottom: 8,
+					fontSize: "0.95em"
+				},
+				children: e.title
+			}), /* @__PURE__ */ u("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", {
+					style: {
+						padding: "6px 10px",
+						borderBottom: "2px solid #e2e8f0",
+						textAlign: "left",
+						fontWeight: 600
+					},
+					children: e.label
+				}, t)) }) }), /* @__PURE__ */ l("tbody", { children: /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
+					colSpan: (e.columns ?? []).length || 1,
+					style: {
+						padding: "8px 10px",
+						color: "#94a3b8",
+						fontStyle: "italic"
+					},
+					children: "(data rows)"
+				}) }) })]
+			})]
+		}, e.name);
+		case "MetricCard": return /* @__PURE__ */ u("div", {
+			id: i,
+			className: ["gui-metric-card", a].filter(Boolean).join(" "),
+			style: r,
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "gui-metric-card__title",
+					children: e.metric_title ?? e.name
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "gui-metric-card__value",
+					style: { color: e.value_color ?? "#2c3e50" },
+					children: "—"
+				}),
+				/* @__PURE__ */ l("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"] })]
+		}, e.name);
+		default: return null;
+	}
+}
+function F({ content: i, onInteract: o }) {
+	let s = "gui-s" + n().replace(/[^a-zA-Z0-9]/g, ""), c = r(() => {
+		try {
+			let e = typeof i == "string" ? i : JSON.stringify(i);
+			return JSON.parse(e);
+		} 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;
+		if (e === "/" || e === "") {
+			let e = d.findIndex((e) => e.is_main_page);
+			return p(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;
+		let e = document.createElement("style");
+		return e.setAttribute("data-gui-scope", s), e.textContent = h, document.head.appendChild(e), () => {
+			document.head.removeChild(e);
+		};
+	}, [h, s]), !c) return /* @__PURE__ */ l("p", {
+		className: "msg-text--muted",
+		children: "[Invalid UI definition]"
+	});
+	let g = d[f];
+	if (!g) return /* @__PURE__ */ l("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", {
+				className: "gui-renderer__tabs",
+				role: "tablist",
+				children: d.map((e, t) => /* @__PURE__ */ u("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", {
+						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))
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ReasoningTrace.tsx
+var I = new Set([
+	f.TASK_ADDED,
+	f.TASK_COMPLETED,
+	f.TASK_SKIPPED
+]), L = new Set([
+	"add_tasks",
+	"complete_task",
+	"skip_task"
+]);
+function R(e) {
+	if (e.kind !== f.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));
+}
+function z({ trace: e }) {
+	let [n, r] = a(e.inProgress);
+	t(() => {
+		e.inProgress || r(!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", {
+		className: `reasoning-trace${e.inProgress ? " reasoning-trace--live" : ""}`,
+		children: [/* @__PURE__ */ u("button", {
+			type: "button",
+			className: `reasoning-trace__summary${i ? " reasoning-trace__summary--open" : ""}`,
+			onClick: () => !e.inProgress && r((e) => !e),
+			disabled: e.inProgress,
+			"aria-expanded": i,
+			children: [
+				/* @__PURE__ */ l("span", {
+					className: "reasoning-trace__icon",
+					"aria-hidden": !0,
+					children: e.inProgress ? "🧠" : "✨"
+				}),
+				/* @__PURE__ */ l("span", {
+					className: "reasoning-trace__label",
+					children: e.inProgress ? `Reasoning… (${s} step${s === 1 ? "" : "s"})` : `Reasoned across ${s} step${s === 1 ? "" : "s"}`
+				}),
+				!e.inProgress && /* @__PURE__ */ l("span", {
+					className: "reasoning-trace__chevron",
+					"aria-hidden": !0,
+					children: "▶"
+				})
+			]
+		}), /* @__PURE__ */ l("div", {
+			className: `reasoning-trace__body-wrapper${i ? " reasoning-trace__body-wrapper--open" : ""}`,
+			children: /* @__PURE__ */ u("div", {
+				className: "reasoning-trace__body-inner",
+				children: [/* @__PURE__ */ l(ne, { steps: o }), e.tasks.length > 0 && /* @__PURE__ */ l(ee, { tasks: e.tasks })]
+			})
+		})]
+	});
+}
+var B = {
+	[p.PENDING]: "pending",
+	[p.IN_PROGRESS]: "in progress",
+	[p.COMPLETED]: "completed",
+	[p.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", {
+		className: "task-panel",
+		children: [/* @__PURE__ */ u("div", {
+			className: "task-panel__header",
+			children: [/* @__PURE__ */ l("span", {
+				className: "task-panel__title",
+				children: "Tasks"
+			}), /* @__PURE__ */ u("span", {
+				className: "task-panel__counts",
+				children: [
+					n > 0 && /* @__PURE__ */ u("span", {
+						className: "task-panel__count task-panel__count--completed",
+						children: [n, " ✓"]
+					}),
+					r > 0 && /* @__PURE__ */ u("span", {
+						className: "task-panel__count task-panel__count--skipped",
+						children: [r, " ⊘"]
+					}),
+					i > 0 && /* @__PURE__ */ u("span", {
+						className: "task-panel__count task-panel__count--pending",
+						children: [i, " pending"]
+					})
+				]
+			})]
+		}), /* @__PURE__ */ l("ul", {
+			className: "task-panel__list",
+			children: e.map((e) => /* @__PURE__ */ u("li", {
+				className: `task-panel__item task-panel__item--${e.status}`,
+				children: [/* @__PURE__ */ l("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", {
+					className: "task-panel__text",
+					children: [
+						/* @__PURE__ */ u("span", {
+							className: "task-panel__id",
+							children: ["#", e.id]
+						}),
+						/* @__PURE__ */ l("span", {
+							className: "task-panel__description",
+							children: e.description
+						}),
+						e.result && /* @__PURE__ */ u("span", {
+							className: "task-panel__result",
+							title: e.result,
+							children: ["→ ", e.result]
+						})
+					]
+				})]
+			}, e.id))
+		})]
+	});
+}
+function te(e) {
+	let t = [], n = 0;
+	for (; n < e.length;) if (e[n].kind === f.TOOL_RESULT) {
+		let r = n;
+		for (; r < e.length && e[r].kind === f.TOOL_RESULT;) r++;
+		let i = e.slice(n, r);
+		if (i.length > 2) t.push({
+			type: "tool_result_group",
+			steps: i
+		});
+		else for (let e of i) t.push({
+			type: "single",
+			step: e
+		});
+		n = r;
+	} else t.push({
+		type: "single",
+		step: e[n]
+	}), n++;
+	return t;
+}
+function ne({ steps: e }) {
+	let t = [];
+	for (let n of e) {
+		let e = t[t.length - 1];
+		e && e.step === n.step ? e.events.push(n) : t.push({
+			step: n.step,
+			events: [n]
+		});
+	}
+	return t.length === 0 ? null : /* @__PURE__ */ l("div", {
+		className: "reasoning-trace__steps",
+		children: t.map((e, t) => /* @__PURE__ */ u("div", {
+			className: "reasoning-trace__step-group",
+			children: [/* @__PURE__ */ u("div", {
+				className: "reasoning-trace__step-header",
+				title: `actual reasoning iteration #${e.step}`,
+				children: ["STEP ", t]
+			}), /* @__PURE__ */ l("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))
+			})]
+		}, 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]: "⏱️"
+};
+function H({ steps: e }) {
+	let [t, n] = a(!1);
+	return /* @__PURE__ */ u("li", {
+		className: "reasoning-trace__step",
+		children: [/* @__PURE__ */ u("button", {
+			type: "button",
+			className: "reasoning-trace__step-line",
+			onClick: () => n((e) => !e),
+			title: "Click to expand tool results",
+			children: [
+				/* @__PURE__ */ l("span", {
+					className: "reasoning-trace__step-icon",
+					"aria-hidden": !0,
+					children: "📥"
+				}),
+				/* @__PURE__ */ u("span", {
+					className: "reasoning-trace__step-summary",
+					children: [
+						"Completed ",
+						e.length,
+						" tool calls"
+					]
+				}),
+				/* @__PURE__ */ l("span", {
+					className: "reasoning-trace__step-chevron",
+					"aria-hidden": !0,
+					style: {
+						fontSize: "0.65rem",
+						transition: "transform 0.2s ease",
+						transform: t ? "rotate(90deg)" : "none"
+					},
+					children: "▶"
+				})
+			]
+		}), t && /* @__PURE__ */ l("ol", {
+			className: "reasoning-trace__step-list reasoning-trace__step-list--nested",
+			children: e.map((e, t) => /* @__PURE__ */ l(U, { 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", {
+		className: "reasoning-trace__step",
+		children: [/* @__PURE__ */ u("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", {
+				className: "reasoning-trace__step-icon",
+				"aria-hidden": !0,
+				children: r
+			}), /* @__PURE__ */ l("span", {
+				className: "reasoning-trace__step-summary",
+				children: e.summary
+			})]
+		}), i && t && /* @__PURE__ */ l("pre", {
+			className: "reasoning-trace__step-details",
+			children: JSON.stringify(e.details, null, 2)
+		})]
+	});
+}
+//#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", {
+			className: "message message--agent message--reasoning",
+			children: [s && /* @__PURE__ */ l("span", {
+				className: "message__timestamp",
+				children: s
+			}), /* @__PURE__ */ l("div", {
+				className: "message__body",
+				children: /* @__PURE__ */ l(z, { trace: e })
+			})]
+		});
+	}
+	if (a) {
+		if (r === d.USER_VOICE) {
+			let e = typeof i == "string" ? i : i.data;
+			return /* @__PURE__ */ u("div", {
+				className: "message message--user",
+				children: [s && /* @__PURE__ */ l("span", {
+					className: "message__timestamp message__timestamp--user",
+					children: s
+				}), /* @__PURE__ */ l("div", {
+					className: "message__body",
+					children: /* @__PURE__ */ l("div", {
+						className: "message__bubble message__bubble--user message__bubble--media",
+						children: /* @__PURE__ */ l(Q, { data: e })
+					})
+				})]
+			});
+		}
+		return r === d.USER_FILE ? /* @__PURE__ */ u("div", {
+			className: "message message--user",
+			children: [s && /* @__PURE__ */ l("span", {
+				className: "message__timestamp message__timestamp--user",
+				children: s
+			}), /* @__PURE__ */ l("div", {
+				className: "message__body",
+				children: /* @__PURE__ */ l("div", {
+					className: "message__bubble message__bubble--user message__bubble--media",
+					children: /* @__PURE__ */ l(K, { content: i })
+				})
+			})]
+		}) : /* @__PURE__ */ u("div", {
+			className: "message message--user",
+			children: [s && /* @__PURE__ */ l("span", {
+				className: "message__timestamp message__timestamp--user",
+				children: s
+			}), /* @__PURE__ */ l("div", {
+				className: "message__body",
+				children: /* @__PURE__ */ l("div", {
+					className: "message__bubble message__bubble--user",
+					children: typeof i == "string" ? i : JSON.stringify(i)
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ u("div", {
+		className: "message message--agent",
+		children: [s && /* @__PURE__ */ l("span", {
+			className: "message__timestamp",
+			children: s
+		}), /* @__PURE__ */ l("div", {
+			className: "message__body",
+			children: /* @__PURE__ */ l("div", {
+				className: "message__bubble message__bubble--agent",
+				children: G(r, i, t, n)
+			})
+		})]
+	});
+}
+function G(e, t, n, r) {
+	switch (e) {
+		case d.AGENT_REPLY_STR: {
+			let e = String(t), n = C(e);
+			return n === "markdown" ? /* @__PURE__ */ l("div", {
+				className: "msg-markdown",
+				children: /* @__PURE__ */ l(o, {
+					remarkPlugins: [s],
+					children: e
+				})
+			}) : n === "code" ? /* @__PURE__ */ l("pre", {
+				className: "msg-code",
+				children: /* @__PURE__ */ l("code", { children: e })
+			}) : /* @__PURE__ */ l("p", {
+				className: "msg-text",
+				children: e
+			});
+		}
+		case d.AGENT_REPLY_MARKDOWN: return /* @__PURE__ */ l("div", {
+			className: "msg-markdown",
+			children: /* @__PURE__ */ l(o, {
+				remarkPlugins: [s],
+				children: String(t)
+			})
+		});
+		case d.AGENT_REPLY_HTML: return /* @__PURE__ */ l("div", {
+			className: "msg-html",
+			dangerouslySetInnerHTML: { __html: c.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",
+					"target",
+					"rel",
+					"class"
+				],
+				FORBID_TAGS: [
+					"head",
+					"style",
+					"script",
+					"title",
+					"meta",
+					"link",
+					"noscript"
+				],
+				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, {
+			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, {
+			content: t,
+			onInteract: r
+		});
+		default: return /* @__PURE__ */ u("p", {
+			className: "msg-text msg-text--muted",
+			children: [
+				"[Unsupported message type: ",
+				e,
+				"]"
+			]
+		});
+	}
+}
+function K({ content: e }) {
+	let t = e, n = t.data ?? t.base64 ?? "";
+	function r() {
+		try {
+			let e = atob(n), r = new Uint8Array(e.length);
+			for (let t = 0; t < e.length; t++) r[t] = e.charCodeAt(t);
+			let i = new Blob([r], { type: t.type ?? "application/octet-stream" }), a = URL.createObjectURL(i), o = document.createElement("a");
+			o.href = a, o.download = t.name ?? "download", o.click(), URL.revokeObjectURL(a);
+		} catch {
+			console.error("Failed to decode file data");
+		}
+	}
+	return /* @__PURE__ */ u("button", {
+		className: "msg-file-btn",
+		onClick: r,
+		children: ["📄 ", t.name ?? "Download file"]
+	});
+}
+function q({ 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", {
+		className: "msg-image",
+		children: /* @__PURE__ */ l("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", {
+		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]));
+	else if (typeof e == "object" && e) {
+		let t = e;
+		if (Array.isArray(t.data) && Array.isArray(t.columns)) o = t.columns, s = 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;
+				let n = t;
+				s = Object.keys(n[o[0]]).map((e) => o.map((t) => n[t][e]));
+			}
+		}
+	}
+	if (o.length === 0) return /* @__PURE__ */ l("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 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", {
+		className: "msg-table-wrapper",
+		children: /* @__PURE__ */ u("table", {
+			className: "msg-table",
+			children: [/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: o.map((e, n) => /* @__PURE__ */ u("th", {
+				className: `msg-table__th${t === n ? " msg-table__th--sorted" : ""}`,
+				onClick: () => c(n),
+				children: [e, /* @__PURE__ */ l("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)) })]
+		})
+	});
+}
+function Y({ content: e }) {
+	let n = i(null);
+	return t(() => {
+		let t = n.current;
+		if (!t) return;
+		let r = !0, i = e;
+		return import("plotly.js-dist-min").then((e) => {
+			!r || !t || e.newPlot(t, i.data ?? [], {
+				margin: {
+					t: 24,
+					r: 10,
+					b: 40,
+					l: 50
+				},
+				...i.layout ?? {}
+			}, {
+				responsive: !0,
+				displayModeBar: !0,
+				scrollZoom: !0
+			});
+		}), () => {
+			r = !1, import("plotly.js-dist-min").then((e) => {
+				t && e.purge(t);
+			});
+		};
+	}, [e]), /* @__PURE__ */ l("div", {
+		ref: n,
+		className: "msg-plotly"
+	});
+}
+function X({ 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", {
+		className: "msg-options",
+		children: n.map((e, n) => /* @__PURE__ */ l("button", {
+			className: "msg-option-btn",
+			onClick: () => t?.(e),
+			children: e
+		}, n))
+	});
+}
+function Z({ 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", {
+		className: "msg-location",
+		children: [/* @__PURE__ */ l("iframe", {
+			src: a,
+			className: "msg-location__map",
+			title: "Location map",
+			loading: "lazy",
+			referrerPolicy: "no-referrer"
+		}), /* @__PURE__ */ u("a", {
+			className: "msg-location__link",
+			href: o,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: [
+				"📍 ",
+				t.toFixed(5),
+				", ",
+				n.toFixed(5),
+				" — Open in OpenStreetMap"
+			]
+		})]
+	});
+}
+function re({ content: e }) {
+	let [t, n] = a(!1), r = e, i = r.docs ?? r.documents ?? [];
+	return /* @__PURE__ */ u("div", {
+		className: "msg-rag",
+		children: [/* @__PURE__ */ l("p", {
+			className: "msg-rag__answer",
+			children: r.answer
+		}), i.length > 0 && /* @__PURE__ */ u("div", {
+			className: "msg-rag__details",
+			children: [/* @__PURE__ */ u("button", {
+				type: "button",
+				className: `msg-rag__summary${t ? " msg-rag__summary--open" : ""}`,
+				onClick: () => n((e) => !e),
+				children: [/* @__PURE__ */ l("span", {
+					className: "msg-rag__summary-arrow",
+					children: "▶"
+				}), "Details"]
+			}), /* @__PURE__ */ l("div", {
+				className: `msg-rag__body-wrapper${t ? " msg-rag__body-wrapper--open" : ""}`,
+				children: /* @__PURE__ */ l("div", {
+					className: "msg-rag__body-inner",
+					children: /* @__PURE__ */ u("div", {
+						className: "msg-rag__details-body",
+						children: [
+							/* @__PURE__ */ l("div", {
+								className: "msg-rag__rag-answer-label",
+								children: "RAG Answer"
+							}),
+							r.llm_name && /* @__PURE__ */ u("div", {
+								className: "msg-rag__llm-row",
+								children: [/* @__PURE__ */ l("span", {
+									className: "msg-rag__llm-label",
+									children: "Model"
+								}), /* @__PURE__ */ l("code", {
+									className: "msg-rag__llm-badge",
+									children: r.llm_name
+								})]
+							}),
+							/* @__PURE__ */ u("div", {
+								className: "msg-rag__context-label",
+								children: [
+									"Context (",
+									i.length,
+									" Documents)"
+								]
+							}),
+							/* @__PURE__ */ l("div", {
+								className: "msg-rag__docs",
+								children: i.map((e, t) => {
+									let n = e.metadata?.source, r = e.metadata?.page;
+									return /* @__PURE__ */ u("div", {
+										className: "msg-rag__doc-card",
+										children: [
+											/* @__PURE__ */ u("div", {
+												className: "msg-rag__doc-header",
+												children: [
+													"Document ",
+													t + 1,
+													"/",
+													i.length
+												]
+											}),
+											n && /* @__PURE__ */ u("div", {
+												className: "msg-rag__doc-row",
+												children: [/* @__PURE__ */ l("span", {
+													className: "msg-rag__doc-key",
+													children: "Source"
+												}), /* @__PURE__ */ l("span", {
+													className: "msg-rag__doc-value",
+													children: n
+												})]
+											}),
+											r != null && /* @__PURE__ */ u("div", {
+												className: "msg-rag__doc-row",
+												children: [/* @__PURE__ */ l("span", {
+													className: "msg-rag__doc-key",
+													children: "Page"
+												}), /* @__PURE__ */ l("span", {
+													className: "msg-rag__doc-value",
+													children: String(r)
+												})]
+											}),
+											/* @__PURE__ */ u("div", {
+												className: "msg-rag__doc-row msg-rag__doc-row--content",
+												children: [/* @__PURE__ */ l("span", {
+													className: "msg-rag__doc-key",
+													children: "Content"
+												}), /* @__PURE__ */ l("span", {
+													className: "msg-rag__doc-value msg-rag__doc-content",
+													children: e.content
+												})]
+											})
+										]
+									}, t);
+								})
+							})
+						]
+					})
+				})
+			})]
+		})]
+	});
+}
+function Q({ data: e, mimeType: n = "audio/wav" }) {
+	let [r, i] = a(null);
+	return t(() => {
+		let t = 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);
+		} catch {
+			i(null);
+		}
+		return () => {
+			t && URL.revokeObjectURL(t);
+		};
+	}, [e, n]), r ? /* @__PURE__ */ l("audio", {
+		controls: !0,
+		src: r,
+		className: "msg-audio__player"
+	}) : /* @__PURE__ */ l("span", {
+		className: "msg-text--muted",
+		children: "Audio unavailable"
+	});
+}
+function ie({ content: e }) {
+	let t = typeof e == "string" ? { data: e } : e;
+	return /* @__PURE__ */ u("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}` : ""
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/ChatArea.tsx
+function $() {
+	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(() => {
+		if (!h) return;
+		function e(e) {
+			S.current && !S.current.contains(e.target) && g(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [h]);
+	function T() {
+		let e = b.current;
+		e && (e.style.height = "auto", e.style.height = Math.min(e.scrollHeight, 160) + "px");
+	}
+	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) => {
+				e.data.size > 0 && w.current.push(e.data);
+			}, n.onstop = () => {
+				let n = 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, {
+						id: crypto.randomUUID(),
+						action: d.USER_VOICE,
+						message: e,
+						isUser: !0,
+						timestamp: $()
+					}]), s(d.USER_VOICE, e);
+				}, i.readAsDataURL(n), v(!1);
+			}, n.start(), C.current = n, v(!0);
+		} catch {
+			console.error("Microphone access denied or unavailable");
+		}
+	}
+	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, {
+				id: crypto.randomUUID(),
+				action: d.USER_FILE,
+				message: {
+					name: e.name,
+					type: e.mimeType,
+					base64: e.base64
+				},
+				isUser: !0,
+				timestamp: $()
+			}]), s(d.USER_FILE, JSON.stringify({
+				name: e.name,
+				type: e.mimeType,
+				base64: e.base64
+			}));
+			m([]), e && (r((t) => [...t, {
+				id: crypto.randomUUID(),
+				action: d.USER_MESSAGE,
+				message: e,
+				isUser: !0,
+				timestamp: $()
+			}]), s(d.USER_MESSAGE, e), f(""), b.current && (b.current.style.height = "auto"));
+		}
+	}, [
+		c,
+		p,
+		o,
+		s,
+		r
+	]);
+	function k(e) {
+		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), O());
+	}
+	function A(e) {
+		r((t) => [...t, {
+			id: crypto.randomUUID(),
+			action: d.USER_MESSAGE,
+			message: e,
+			isUser: !0,
+			timestamp: $()
+		}]), s(d.USER_MESSAGE, e);
+	}
+	function j(e) {
+		s(d.USER_UPDATE_UI, e);
+	}
+	function M(e) {
+		let t = Array.from(e.target.files ?? []);
+		t.length !== 0 && (t.forEach((e) => {
+			let t = new FileReader();
+			t.onload = () => {
+				let n = t.result.split(",")[1] ?? "";
+				m((t) => [...t, {
+					id: crypto.randomUUID(),
+					name: e.name,
+					base64: n,
+					mimeType: e.type
+				}]);
+			}, t.readAsDataURL(e);
+		}), e.target.value = "", g(!1));
+	}
+	function N(e) {
+		m((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", {
+		className: "chat-area",
+		children: [/* @__PURE__ */ u("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", {
+			className: "chat-area__input-row",
+			children: [
+				/* @__PURE__ */ l("input", {
+					ref: x,
+					type: "file",
+					multiple: !0,
+					style: { display: "none" },
+					onChange: M
+				}),
+				/* @__PURE__ */ u("div", {
+					className: "chat-area__composer",
+					children: [p.length > 0 && /* @__PURE__ */ l("div", {
+						className: "chat-area__attachments",
+						children: p.map((e) => /* @__PURE__ */ u("div", {
+							className: "attachment-chip",
+							children: [
+								/* @__PURE__ */ l("span", {
+									className: "attachment-chip__icon",
+									children: "📄"
+								}),
+								/* @__PURE__ */ l("span", {
+									className: "attachment-chip__name",
+									children: e.name
+								}),
+								/* @__PURE__ */ l("button", {
+									className: "attachment-chip__remove",
+									onClick: () => N(e.id),
+									title: "Remove file",
+									children: "✕"
+								})
+							]
+						}, e.id))
+					}), /* @__PURE__ */ l("div", {
+						className: "chat-area__input-line",
+						children: /* @__PURE__ */ l("textarea", {
+							ref: b,
+							className: "chat-area__textarea",
+							value: c,
+							rows: 1,
+							placeholder: P,
+							disabled: o !== "connected",
+							onChange: (e) => {
+								f(e.target.value), T();
+							},
+							onKeyDown: k
+						})
+					})]
+				}),
+				/* @__PURE__ */ u("div", {
+					className: "attach-menu-anchor",
+					ref: S,
+					children: [/* @__PURE__ */ l("button", {
+						className: "btn chat-area__icon-btn",
+						title: "Attach",
+						disabled: o !== "connected",
+						onClick: () => g((e) => !e),
+						children: "+"
+					}), h && /* @__PURE__ */ l("div", {
+						className: "attach-menu",
+						children: /* @__PURE__ */ l("button", {
+							className: "attach-menu__item",
+							onClick: () => x.current?.click(),
+							children: "Add Files"
+						})
+					})]
+				}),
+				/* @__PURE__ */ l("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",
+					onClick: D,
+					children: _ ? /* @__PURE__ */ l("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 14 14",
+						fill: "currentColor",
+						children: /* @__PURE__ */ l("rect", {
+							x: "1",
+							y: "1",
+							width: "12",
+							height: "12",
+							rx: "2"
+						})
+					}) : /* @__PURE__ */ u("svg", {
+						width: "16",
+						height: "16",
+						viewBox: "0 0 16 16",
+						fill: "currentColor",
+						children: [
+							/* @__PURE__ */ l("rect", {
+								x: "5",
+								y: "1",
+								width: "6",
+								height: "9",
+								rx: "3"
+							}),
+							/* @__PURE__ */ l("path", {
+								d: "M3 7a5 5 0 0 0 10 0",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								fill: "none",
+								strokeLinecap: "round"
+							}),
+							/* @__PURE__ */ l("line", {
+								x1: "8",
+								y1: "12",
+								x2: "8",
+								y2: "15",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								strokeLinecap: "round"
+							}),
+							/* @__PURE__ */ l("line", {
+								x1: "5.5",
+								y1: "15",
+								x2: "10.5",
+								y2: "15",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								strokeLinecap: "round"
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ l("button", {
+					className: "btn btn--primary chat-area__send-btn",
+					onClick: O,
+					disabled: !F,
+					title: "Send",
+					children: "→"
+				})
+			]
+		})]
+	});
+}
+//#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");
+			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) => {
+			try {
+				let t = JSON.parse(e.data);
+				if (typeof t.message == "string") try {
+					t.message = JSON.parse(t.message);
+				} catch {
+					try {
+						t.message = JSON.parse(t.message.replace(/'/g, "\""));
+					} catch {}
+				}
+				t.history ? l.current.onHistoryMessage?.(t) : l.current.onMessage(t);
+			} catch {
+				console.error("Failed to parse WS message:", e.data);
+			}
+		}, () => {
+			e.close(), c.current = null;
+		};
+	}, [n]), {
+		status: o,
+		send: e((e, t) => {
+			c.current?.readyState === WebSocket.OPEN && c.current.send(JSON.stringify({
+				action: e,
+				message: t
+			}));
+		}, []),
+		disconnect: e(() => {
+			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 };