@nonoun/native-chat 0.5.16 → 0.5.21

package/dist/{chat-input-structured-element-C_5MDbpb.js → chat-input-structured-element-Xm4nCA2K.js}

@@ -1,7 +1,9 @@
-import { NativeElement as e, VirtualScrollController as t, createDisabledEffect as n, signal as r, uid as i } from "@nonoun/native-ui";
+import { f as e, o as t, r as n, t as r } from "./adapter-mock-DQ_CxuNu.js";
+import { NativeElement as i, VirtualScrollController as a, createDisabledEffect as o, signal as s, uid as c } from "@nonoun/native-ui";
 /**
 * Chat message input with textarea, submit button, and Enter-to-send behavior.
 * @attr {boolean} disabled - Disables interaction
+* @attr {string} value - Initial textarea value
 * @attr {boolean} busy - Disables submit but keeps textarea enabled
 * @attr {boolean} no-enter-submit - Disables Enter key submission
 * @attr {boolean} no-auto-clear - Prevents clearing the textarea after send
@@ -10,11 +12,15 @@ import { NativeElement as e, VirtualScrollController as t, createDisabledEffect
 * @fires native:composer-focus - Fired when the composer textarea gains focus
 * @fires native:composer-blur - Fired when the composer textarea loses focus
 */
-var a = class extends e {
-	static observedAttributes = ["disabled", "busy"];
+var l = class extends i {
+	static observedAttributes = [
+		"disabled",
+		"busy",
+		"value"
+	];
 	#e;
-	#t = r(!1);
-	#n = r(!1);
+	#t = s(!1);
+	#n = s(!1);
 	#r = null;
 	#i = null;
 	constructor() {
@@ -55,13 +61,18 @@ var a = class extends e {
 				case "busy":
 					this.#n.value = n !== null;
 					break;
+				case "value":
+					this.#r && (this.#r.value = n ?? "");
+					break;
 			}
 			super.attributeChangedCallback(e, t, n);
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(n(this, this.#t, this.#e)), this.deferChildren(() => {
-			this.#a(), this.addEffect(() => {
+		super.setup(), this.addEffect(o(this, this.#t, this.#e)), this.deferChildren(() => {
+			this.#a();
+			let e = this.getAttribute("value");
+			e && this.#r && (this.#r.value = e), this.addEffect(() => {
 				let e = this.#t.value;
 				this.#r && this.#r.toggleAttribute("disabled", e), this.#i && (e ? this.#i.setAttribute("disabled", "") : this.#s());
 			}), this.addEffect(() => {
@@ -131,27 +142,42 @@ var a = class extends e {
 			})) && !this.hasAttribute("no-auto-clear") && (this.value = "", this.#i?.setAttribute("disabled", ""));
 		}
 	}
-}, o = class extends e {
+}, u = class extends i {
+	static MAX_CONTEXT_MESSAGES = 50;
 	static observedAttributes = [
 		"show-stop",
 		"show-restart",
 		"auto-focus-policy",
 		"open",
-		"model"
+		"model",
+		"models",
+		"gateway",
+		"gateway-url",
+		"gateway-config",
+		"gateway-urls"
 	];
-	#e = r(!1);
-	#t = r(!1);
-	#n = r("open-request");
-	#r = r(!1);
-	#i = r([]);
-	#a = r(null);
-	#o = null;
-	#s = null;
-	#c = null;
-	#l = null;
-	#u = null;
+	#e = s(!1);
+	#t = s(!1);
+	#n = s("open-request");
+	#r = s(!1);
+	#i = s([]);
+	#a = s(null);
+	#o = s(null);
+	#s = s(null);
+	#c = s(null);
+	#l = s(null);
+	#u = s(!1);
 	#d = null;
-	#f = r(!1);
+	#f = [];
+	#p = null;
+	#m = null;
+	#h = null;
+	#g = null;
+	#_ = null;
+	#v = null;
+	#y = null;
+	#b = null;
+	#x = null;
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
@@ -166,12 +192,38 @@ var a = class extends e {
 					break;
 				case "open": {
 					let e = this.#r.value;
-					this.#r.value = n !== null, !e && n !== null ? this.#_(void 0, !1) : e && n === null && this.#v(void 0);
+					this.#r.value = n !== null, !e && n !== null ? this.#E(void 0, !1) : e && n === null && this.#D(void 0);
 					break;
 				}
 				case "model":
 					this.#a.value = n;
 					break;
+				case "models":
+					n ? this.#i.value = n.split(",").map((e) => e.trim()).filter(Boolean).map((e) => ({
+						value: e,
+						label: e
+					})) : this.#i.value = [];
+					break;
+				case "gateway":
+					this.#o.value = n;
+					break;
+				case "gateway-url":
+					this.#s.value = n;
+					break;
+				case "gateway-config":
+					try {
+						this.#c.value = n ? JSON.parse(n) : null;
+					} catch {
+						this.#c.value = null;
+					}
+					break;
+				case "gateway-urls":
+					try {
+						this.#l.value = n ? JSON.parse(n) : null;
+					} catch {
+						this.#l.value = null;
+					}
+					break;
 			}
 			super.attributeChangedCallback(e, t, n);
 		}
@@ -199,7 +251,7 @@ var a = class extends e {
 		return this.#i.value;
 	}
 	set models(e) {
-		this.#i.value = e, e.length > 0 && this.#a.value === null && (this.#a.value = e[0].value, this.setAttribute("model", e[0].value));
+		this.#i.value = e, e.length > 0 ? this.setAttribute("models", e.map((e) => e.value).join(",")) : this.removeAttribute("models"), e.length > 0 && this.#a.value === null && (this.#a.value = e[0].value, this.setAttribute("model", e[0].value));
 	}
 	/** Currently selected model value. */
 	get model() {
@@ -208,120 +260,187 @@ var a = class extends e {
 	set model(e) {
 		this.#a.value = e, e === null ? this.removeAttribute("model") : this.setAttribute("model", e);
 	}
+	/** Gateway adapter type: 'openai' or 'claude'. When set, panel handles send/stream automatically. */
+	get gateway() {
+		return this.#o.value;
+	}
+	set gateway(e) {
+		this.#o.value = e, e ? this.setAttribute("gateway", e) : this.removeAttribute("gateway");
+	}
+	/** Base URL for the gateway API. */
+	get gatewayUrl() {
+		return this.#s.value;
+	}
+	set gatewayUrl(e) {
+		this.#s.value = e, e ? this.setAttribute("gateway-url", e) : this.removeAttribute("gateway-url");
+	}
+	/** Configuration for the gateway adapter (model, apiKey, system, etc.). */
+	get gatewayConfig() {
+		return this.#c.value;
+	}
+	set gatewayConfig(e) {
+		this.#c.value = e, e ? this.setAttribute("gateway-config", JSON.stringify(e)) : this.removeAttribute("gateway-config");
+	}
+	/** Map of provider prefixes to gateway URLs. Enables auto-switching gateway based on model prefix. */
+	get gatewayUrls() {
+		return this.#l.value;
+	}
+	set gatewayUrls(e) {
+		this.#l.value = e, e ? this.setAttribute("gateway-urls", JSON.stringify(e)) : this.removeAttribute("gateway-urls");
+	}
+	/** Whether the panel is currently streaming a response. Read-only. */
+	get streaming() {
+		return this.#u.value;
+	}
 	/** Open the panel. Optionally focus the composer. */
 	open(e) {
 		let t = this.#r.value;
 		this.#r.value = !0, this.toggleAttribute("open", !0);
 		let n = this.#n.value, r = e?.focusComposer ?? !1, i = n !== "never" && (n === "open-request" ? r : !1);
-		t || this.#_(e?.reason, i), i && this.focusComposer({ cursor: "end" }, "api");
+		t || this.#E(e?.reason, i), i && this.focusComposer({ cursor: "end" }, "api");
 	}
 	/** Close the panel. */
 	close(e) {
 		let t = this.#r.value;
-		this.#r.value = !1, this.removeAttribute("open"), t && this.#v(e);
+		this.#r.value = !1, this.removeAttribute("open"), t && this.#D(e);
 	}
 	/** Focus the composer input. */
 	focusComposer(e, t = "api") {
-		this.#m(e ?? {}, t, 0);
+		this.#C(e ?? {}, t, 0);
 	}
 	setup() {
 		super.setup(), this.hasAttribute("open") && (this.#r.value = !0);
-		let e = document.createElement("n-header");
-		e.setAttribute("dividers", "");
-		let t = document.createElement("n-icon");
-		t.setAttribute("name", "chat-dots"), t.setAttribute("slot", "leading"), e.appendChild(t);
-		let n = document.createElement("span");
-		n.setAttribute("slot", "label"), n.textContent = "Assistant", e.appendChild(n);
-		let r = document.createElement("span");
-		r.setAttribute("slot", "trailing"), r.style.display = "inline-flex", r.style.alignItems = "center", r.style.gap = "calc(var(--n-space) * 2)", e.appendChild(r), this.#l = r;
-		let i = document.createElement("n-body"), a = document.createElement("n-chat-content");
-		i.appendChild(a);
-		let o = document.createElement("n-footer");
-		o.setAttribute("dividers", ""), this.#o = o;
-		let s = document.createElement("n-chat-input");
-		s.setAttribute("variant", "plain");
-		let c = document.createElement("n-textarea");
-		c.setAttribute("placeholder", "Ask anything"), c.setAttribute("autogrow", ""), c.setAttribute("rows", "3"), s.appendChild(c);
-		let l = document.createElement("n-chat-input-actions"), u = document.createElement("n-button");
-		u.setAttribute("variant", "ghost"), u.setAttribute("inline", ""), u.innerHTML = "<n-icon name=\"plus\"></n-icon>", l.appendChild(u);
-		let d = document.createElement("n-button");
-		d.setAttribute("variant", "ghost"), d.setAttribute("inline", ""), d.innerHTML = "<n-icon name=\"microphone\"></n-icon>", l.appendChild(d);
-		let f = document.createElement("n-button");
-		f.setAttribute("variant", "primary"), f.setAttribute("intent", "accent"), f.setAttribute("radius", "round"), f.setAttribute("inline", ""), f.setAttribute("disabled", ""), f.dataset.role = "submit", f.innerHTML = "<n-icon name=\"arrow-up\"></n-icon>", l.appendChild(f), s.appendChild(l), o.appendChild(s), this.append(e, i, o), this.addEffect(() => {
+		let i = document.createElement("n-header");
+		i.setAttribute("dividers", "");
+		let a = document.createElement("n-icon");
+		a.setAttribute("name", "chat-dots"), a.setAttribute("slot", "leading"), i.appendChild(a);
+		let o = document.createElement("span");
+		o.setAttribute("slot", "label"), o.textContent = "Assistant", i.appendChild(o);
+		let s = document.createElement("span");
+		s.setAttribute("slot", "trailing"), s.className = "n-chat-panel-header-trailing", i.appendChild(s), this.#v = s;
+		let c = document.createElement("n-body"), l = document.createElement("n-chat-content"), u = document.createElement("n-chat-feed");
+		u.setAttribute("auto-scroll", ""), l.appendChild(u), this.#h = u, c.appendChild(l);
+		let d = document.createElement("n-footer");
+		d.setAttribute("dividers", ""), this.#m = d;
+		let f = document.createElement("n-chat-input"), p = document.createElement("n-textarea");
+		p.setAttribute("placeholder", "Ask anything"), p.setAttribute("autogrow", ""), p.setAttribute("rows", "3"), f.appendChild(p);
+		let m = document.createElement("n-chat-input-actions");
+		this.#y = m;
+		let h = document.createElement("n-button");
+		h.setAttribute("variant", "ghost"), h.setAttribute("inline", "");
+		let g = document.createElement("n-icon");
+		g.setAttribute("name", "plus"), h.appendChild(g), m.appendChild(h);
+		let _ = document.createElement("n-button");
+		_.setAttribute("variant", "ghost"), _.setAttribute("inline", "");
+		let v = document.createElement("n-icon");
+		v.setAttribute("name", "microphone"), _.appendChild(v), m.appendChild(_);
+		let y = document.createElement("n-button");
+		y.setAttribute("variant", "primary"), y.setAttribute("intent", "accent"), y.setAttribute("radius", "round"), y.setAttribute("inline", ""), y.setAttribute("disabled", ""), y.dataset.submit = "", y.dataset.role = "submit";
+		let b = document.createElement("n-icon");
+		b.setAttribute("name", "arrow-up"), y.appendChild(b), m.appendChild(y), f.appendChild(m), d.appendChild(f), this.append(i, c, d), this.addEffect(() => {
 			let e = this.#e.value;
-			if (e && !this.#s) {
+			if (e && !this.#g) {
 				let e = document.createElement("n-button");
-				e.setAttribute("variant", "ghost"), e.setAttribute("inline", ""), e.setAttribute("aria-label", "Stop"), e.innerHTML = "<n-icon name=\"stop\"></n-icon>", e.addEventListener("native:press", this.#b), this.#s = e, this.#l?.prepend(e);
-			} else !e && this.#s && (this.#s.removeEventListener("native:press", this.#b), this.#s.remove(), this.#s = null);
+				e.setAttribute("variant", "ghost"), e.setAttribute("inline", ""), e.setAttribute("aria-label", "Stop");
+				let t = document.createElement("n-icon");
+				t.setAttribute("name", "stop"), e.appendChild(t), e.addEventListener("native:press", this.#k), this.#g = e, this.#v?.prepend(e);
+			} else !e && this.#g && (this.#g.removeEventListener("native:press", this.#k), this.#g.remove(), this.#g = null);
 		}), this.addEffect(() => {
 			let e = this.#t.value;
-			if (e && !this.#c) {
+			if (e && !this.#_) {
 				let e = document.createElement("n-button");
-				e.setAttribute("variant", "ghost"), e.setAttribute("inline", ""), e.setAttribute("aria-label", "Restart"), e.innerHTML = "<n-icon name=\"arrow-counter-clockwise\"></n-icon>", e.addEventListener("native:press", this.#x), this.#c = e;
-				let t = this.#s?.nextSibling ?? this.#l?.firstChild ?? null;
-				this.#l?.insertBefore(e, t);
-			} else !e && this.#c && (this.#c.removeEventListener("native:press", this.#x), this.#c.remove(), this.#c = null);
+				e.setAttribute("variant", "ghost"), e.setAttribute("inline", ""), e.setAttribute("aria-label", "Restart");
+				let t = document.createElement("n-icon");
+				t.setAttribute("name", "arrow-counter-clockwise"), e.appendChild(t), e.addEventListener("native:press", this.#A), this.#_ = e;
+				let n = this.#g?.nextSibling ?? this.#v?.firstChild ?? null;
+				this.#v?.insertBefore(e, n);
+			} else !e && this.#_ && (this.#_.removeEventListener("native:press", this.#A), this.#_.remove(), this.#_ = null);
 		}), this.addEffect(() => {
 			let e = this.#i.value;
-			if (e.length > 0 && !this.#u) {
-				let e = document.createElement("n-button");
-				e.setAttribute("variant", "ghost"), e.setAttribute("inline", ""), e.setAttribute("aria-label", "Select model"), e.setAttribute("data-role", "model-picker"), e.innerHTML = "<span data-role=\"model-label\"></span><n-icon name=\"caret-up-down\"></n-icon>", e.addEventListener("native:press", this.#S), this.#u = e;
-				let t = document.createElement("n-listbox");
-				t.setAttribute("popover", "auto"), t.setAttribute("data-role", "model-listbox"), t.addEventListener("native:change", this.#C), this.#d = t, this.#l?.prepend(e), this.#l?.appendChild(t);
-			} else e.length === 0 && this.#u && this.#w();
+			if (e.length > 0 && !this.#b) {
+				let e = document.createElement("n-select");
+				e.setAttribute("aria-label", "Select model"), e.setAttribute("data-role", "model-picker"), e.addEventListener("native:change", this.#M);
+				let t = document.createElement("n-button");
+				t.setAttribute("variant", "ghost"), t.setAttribute("inline", "");
+				let n = document.createElement("n-icon");
+				n.setAttribute("name", "dots-three-outline-fill"), t.appendChild(n);
+				let r = document.createElement("n-listbox");
+				r.setAttribute("popover", "manual"), e.append(t, r), this.#b = e, this.#x = r;
+				let i = this.#y?.querySelector("[data-submit]");
+				i ? this.#y?.insertBefore(e, i) : this.#y?.appendChild(e);
+			} else e.length === 0 && this.#b && this.#B();
 		}), this.addEffect(() => {
-			let e = this.#i.value, t = this.#a.value, n = this.#d, r = this.#u;
+			let e = this.#i.value, t = this.#a.value, n = this.#b, r = this.#x;
 			if (!n || !r || e.length === 0) return;
-			n.innerHTML = "";
-			for (let t of e) {
-				let e = document.createElement("n-option");
-				e.setAttribute("value", t.value), e.textContent = t.label ?? t.value, n.appendChild(e);
+			let i = t ?? e[0]?.value ?? null;
+			if (i !== null) {
+				r.innerHTML = "";
+				for (let [t, n] of this.#z(e)) {
+					let e = document.createElement("n-option-group"), a = document.createElement("n-option-group-header");
+					a.textContent = t, e.appendChild(a);
+					for (let t of n) {
+						let n = document.createElement("n-option"), r = t.value === i;
+						n.setAttribute("value", t.value), n.setAttribute("aria-selected", String(r)), n.textContent = t.label ?? t.value, e.appendChild(n);
+					}
+					r.appendChild(e);
+				}
+				t === null && (this.#a.value = i, this.setAttribute("model", i)), n.value = i;
 			}
-			t && (n.value = t);
-			let i = r.querySelector("[data-role=\"model-label\"]");
-			if (i) {
-				let n = e.find((e) => e.value === t);
-				i.textContent = n ? n.label ?? n.value : e[0].label ?? e[0].value;
+		}), this.addEffect(() => {
+			let e = this.#l.value, t = this.#a.value;
+			if (!e || !t) return;
+			let n = this.#o.value, r = this.#s.value;
+			if (n && r) return;
+			let i = this.#j(t);
+			i && (this.#o.value = i.gateway, this.setAttribute("gateway", i.gateway), this.#s.value = i.url, this.setAttribute("gateway-url", i.url));
+		}), this.addEffect(() => {
+			let i = this.#o.value, a = this.#s.value, o = this.#c.value;
+			if (!i || !a) {
+				this.#d = null;
+				return;
 			}
+			let s = {
+				clientId: e(),
+				baseUrl: a,
+				gatewayConfig: o ?? {}
+			}, c = null;
+			i === "openai" ? c = t(s) : i === "claude" ? c = n(s) : i === "mock" && (c = r(s)), this.#d = c, c && c.bootstrapSession().catch(() => {});
 		}), this.addEffect(() => {
-			let e = this.#f.value, t = this.#d;
-			if (t) try {
-				e ? t.showPopover() : t.hidePopover();
-			} catch {}
-		}), this.deferChildren(() => {
-			this.#p();
+			this.#o.value && (this.#e.value = this.#u.value);
+		}), this.addEventListener("native:send", this.#N), this.addEventListener("native:chat-stop", this.#L), this.addEventListener("native:chat-restart", this.#R), this.deferChildren(() => {
+			this.#S();
 		}), this.#n.value === "ready" && queueMicrotask(() => {
 			this.isConnected && this.focusComposer({ cursor: "end" }, "policy");
 		});
 	}
 	teardown() {
-		this.#s && this.#s.removeEventListener("native:press", this.#b), this.#c && this.#c.removeEventListener("native:press", this.#x), this.#w(), this.#o = null, this.#s = null, this.#c = null, this.#l = null, this.innerHTML = "", super.teardown();
+		this.#p?.abort(), this.removeEventListener("native:send", this.#N), this.removeEventListener("native:chat-stop", this.#L), this.removeEventListener("native:chat-restart", this.#R), this.#g && this.#g.removeEventListener("native:press", this.#k), this.#_ && this.#_.removeEventListener("native:press", this.#A), this.#B(), this.#d = null, this.#f = [], this.#p = null, this.#m = null, this.#h = null, this.#g = null, this.#_ = null, this.#v = null, this.#y = null, this.#x = null, this.innerHTML = "", super.teardown();
 	}
-	#p() {
+	#S() {
 		let e = this.querySelector(":scope > [slot=\"header-trailing\"]");
-		e && this.#l && this.#l.appendChild(e);
+		e && this.#v && this.#v.appendChild(e);
 		let t = this.querySelector(":scope > [slot=\"footer-leading\"]");
-		if (t && this.#o) {
-			let e = this.#o.querySelector(":scope > n-chat-input");
-			this.#o.insertBefore(t, e);
+		if (t && this.#m) {
+			let e = this.#m.querySelector(":scope > n-chat-input");
+			this.#m.insertBefore(t, e);
 		}
 	}
-	#m(e, t, n) {
-		let r = this.#h();
+	#C(e, t, n) {
+		let r = this.#w();
 		if (!r) {
 			if (n < 2) {
-				queueMicrotask(() => this.#m(e, t, n + 1));
+				queueMicrotask(() => this.#C(e, t, n + 1));
 				return;
 			}
-			this.#y("composer-unavailable", 3);
+			this.#O("composer-unavailable", 3);
 			return;
 		}
 		if (r.disabled) {
 			if (n < 2) {
-				queueMicrotask(() => this.#m(e, t, n + 1));
+				queueMicrotask(() => this.#C(e, t, n + 1));
 				return;
 			}
-			this.#y("disabled", 3);
+			this.#O("disabled", 3);
 			return;
 		}
 		let i = r.querySelector("n-textarea"), a = i ?? r;
@@ -329,22 +448,22 @@ var a = class extends e {
 			a.focus();
 		} catch {
 			if (n < 2) {
-				queueMicrotask(() => this.#m(e, t, n + 1));
+				queueMicrotask(() => this.#C(e, t, n + 1));
 				return;
 			}
-			this.#y("blocked", 3);
+			this.#O("blocked", 3);
 			return;
 		}
-		e.cursor && e.cursor !== "preserve" && i && this.#g(i, e.cursor), this.dispatchEvent(new CustomEvent("native:composer-focused", {
+		e.cursor && e.cursor !== "preserve" && i && this.#T(i, e.cursor), this.dispatchEvent(new CustomEvent("native:composer-focused", {
 			bubbles: !0,
 			composed: !0,
 			detail: { by: t }
 		}));
 	}
-	#h() {
+	#w() {
 		return this.querySelector("n-chat-input");
 	}
-	#g(e, t) {
+	#T(e, t) {
 		let n = e.ownerDocument.getSelection?.();
 		if (!n) return;
 		let r = e.firstChild ?? e, i = t === "end" ? r.textContent?.length ?? 0 : 0;
@@ -353,7 +472,7 @@ var a = class extends e {
 			e.setStart(r, i), e.collapse(!0), n.removeAllRanges(), n.addRange(e);
 		} catch {}
 	}
-	#_(e, t) {
+	#E(e, t) {
 		this.dispatchEvent(new CustomEvent("native:chat-opened", {
 			bubbles: !0,
 			composed: !0,
@@ -363,14 +482,14 @@ var a = class extends e {
 			}
 		}));
 	}
-	#v(e) {
+	#D(e) {
 		this.dispatchEvent(new CustomEvent("native:chat-closed", {
 			bubbles: !0,
 			composed: !0,
 			detail: { reason: e }
 		}));
 	}
-	#y(e, t) {
+	#O(e, t) {
 		this.dispatchEvent(new CustomEvent("native:composer-focus-failed", {
 			bubbles: !0,
 			composed: !0,
@@ -380,30 +499,51 @@ var a = class extends e {
 			}
 		}));
 	}
-	#b = () => {
+	#k = () => {
 		this.dispatchEvent(new CustomEvent("native:chat-stop", {
 			bubbles: !0,
 			composed: !0
 		}));
 	};
-	#x = () => {
+	#A = () => {
 		this.dispatchEvent(new CustomEvent("native:chat-restart", {
 			bubbles: !0,
 			composed: !0
 		}));
 	};
-	#S = () => {
-		this.#f.value = !this.#f.value;
-	};
-	#C = (e) => {
+	/** Resolve gateway + URL from model prefix using the gateway-urls map. */
+	#j(e) {
+		let t = this.#l.value;
+		if (!t) return null;
+		let n = e.toLowerCase();
+		if (n.startsWith("claude") || n.startsWith("anthropic")) {
+			let e = t.claude;
+			if (e) return {
+				gateway: "claude",
+				url: e
+			};
+		}
+		if (n.startsWith("gpt") || n.startsWith("chatgpt") || n.startsWith("openai")) {
+			let e = t.openai;
+			if (e) return {
+				gateway: "openai",
+				url: e
+			};
+		}
+		for (let e of Object.keys(t)) if (n.startsWith(e.toLowerCase())) return {
+			gateway: e,
+			url: t[e]
+		};
+		return null;
+	}
+	#M = (e) => {
 		let t = e.detail?.value ?? null;
 		if (t === null) return;
 		let n = this.#a.value;
-		if (t === n) {
-			this.#f.value = !1;
-			return;
-		}
-		this.#a.value = t, this.setAttribute("model", t), this.#f.value = !1, this.dispatchEvent(new CustomEvent("native:model-change", {
+		if (t === n) return;
+		this.#a.value = t, this.setAttribute("model", t);
+		let r = this.#j(t);
+		r && (this.#o.value = r.gateway, this.setAttribute("gateway", r.gateway), this.#s.value = r.url, this.setAttribute("gateway-url", r.url)), this.dispatchEvent(new CustomEvent("native:model-change", {
 			bubbles: !0,
 			composed: !0,
 			detail: {
@@ -412,10 +552,116 @@ var a = class extends e {
 			}
 		}));
 	};
-	#w() {
-		this.#u &&= (this.#u.removeEventListener("native:press", this.#S), this.#u.remove(), null), this.#d &&= (this.#d.removeEventListener("native:change", this.#C), this.#d.remove(), null), this.#f.value = !1;
+	#N = (e) => {
+		if (!this.#d) return;
+		let t = e.detail?.value;
+		t?.trim() && (e.stopImmediatePropagation(), this.#P(t));
+	};
+	async #P(t) {
+		let n = this.#d;
+		if (!n || this.#u.value) return;
+		this.#p?.abort();
+		let r = new AbortController();
+		this.#p = r;
+		let i = {
+			role: "user",
+			message: t,
+			datetime: Date.now()
+		};
+		this.#f.push(i);
+		let a = this.constructor.MAX_CONTEXT_MESSAGES;
+		this.#f.length > a && (this.#f = this.#f.slice(-a)), this.#F(i);
+		let o = `msg-${e()}`, s = this.#I(o), c = s?.querySelector("n-chat-message-text");
+		s?.setAttribute("status", "typing"), this.#u.value = !0;
+		let l = this.#w();
+		l && (l.busy = !0);
+		try {
+			let i = await n.sendMessageStream({
+				id: e(),
+				messages: this.#f,
+				query: t,
+				model: this.#a.value ?? void 0,
+				signal: r.signal,
+				onChunk: (e) => {
+					s?.getAttribute("status") === "typing" && s.setAttribute("status", "streaming"), c && (c.content = e.fullMessage), e.done && s?.setAttribute("status", e.partial ? "partial" : "sent");
+				}
+			});
+			this.#f.push({
+				role: "assistant",
+				message: i.message,
+				datetime: i.datetime ?? Date.now(),
+				partial: i.partial
+			});
+		} catch (e) {
+			if (e.name === "AbortError") {
+				s?.setAttribute("status", "partial");
+				return;
+			}
+			s?.setAttribute("status", "error");
+			let t = c ? c.content : "";
+			c && (t.trim() ? c.content = t + `\n\n---\n*Error: ${e.message}*` : c.content = `Error: ${e.message}`);
+		} finally {
+			this.#u.value = !1, this.#p = null;
+			let e = this.#w();
+			e && (e.busy = !1);
+		}
+	}
+	#F(t) {
+		let n = this.#h;
+		if (!n) return;
+		let r = document.createElement("n-chat-messages");
+		r.setAttribute("data-role", t.role), r.setAttribute("sender", t.role === "user" ? "You" : "Assistant");
+		let i = document.createElement("n-chat-message");
+		i.setAttribute("data-role", t.role), i.setAttribute("message-id", `msg-${e()}`), i.setAttribute("status", "sent");
+		let a = document.createElement("n-chat-message-text");
+		a.content = t.message, i.appendChild(a), r.appendChild(i), n.appendChild(r);
+	}
+	#I(e) {
+		let t = this.#h;
+		if (!t) return null;
+		let n = document.createElement("n-chat-messages");
+		n.setAttribute("data-role", "assistant"), n.setAttribute("sender", "Assistant");
+		let r = document.createElement("n-chat-message");
+		r.setAttribute("data-role", "assistant"), r.setAttribute("message-id", e), r.setAttribute("status", "streaming");
+		let i = document.createElement("n-chat-message-text");
+		return r.appendChild(i), n.appendChild(r), t.appendChild(n), r;
+	}
+	#L = () => {
+		if (!this.#d) return;
+		this.#p?.abort(), this.#u.value = !1;
+		let e = this.#w();
+		e && (e.busy = !1);
+	};
+	#R = () => {
+		if (!this.#d) return;
+		this.#p?.abort(), this.#u.value = !1;
+		let e = this.#w();
+		e && (e.busy = !1), this.#f = [], this.#h && (this.#h.innerHTML = "");
+	};
+	#z(e) {
+		let t = /* @__PURE__ */ new Map(), n = (e) => {
+			let t = `${e.label ?? ""} ${e.value}`.toLowerCase();
+			return t.includes("claude") ? "Claude" : t.includes("gpt") || t.includes("openai") ? "ChatGPT" : t.includes("gemini") ? "Gemini" : "Models";
+		};
+		for (let r of e) {
+			let e = n(r);
+			t.has(e) || t.set(e, []), t.get(e).push(r);
+		}
+		let r = [
+			"Claude",
+			"ChatGPT",
+			"Gemini",
+			"Models"
+		];
+		return Array.from(t.entries()).sort((e, t) => {
+			let n = r.indexOf(e[0]), i = r.indexOf(t[0]);
+			return (n === -1 ? 999 : n) - (i === -1 ? 999 : i);
+		});
+	}
+	#B() {
+		this.#b &&= (this.#b.removeEventListener("native:change", this.#M), this.#b.remove(), null), this.#x = null;
 	}
-}, s = 40, c = class extends e {
+}, d = 40, f = class extends i {
 	static observedAttributes = [
 		"auto-scroll",
 		"scrollable",
@@ -424,12 +670,12 @@ var a = class extends e {
 		"virtual-overscan"
 	];
 	#e;
-	#t = r(!0);
-	#n = r(!0);
+	#t = s(!0);
+	#n = s(!0);
 	#r = null;
 	#i = null;
 	#a = null;
-	#o = r([]);
+	#o = s([]);
 	#s = null;
 	constructor() {
 		super(), this.#e = this.attachInternals();
@@ -481,17 +727,17 @@ var a = class extends e {
 		super.setup(), this.#e.role = "log", this.setAttribute("aria-live", "polite"), this.setAttribute("aria-label", "Conversation"), this.hasAttribute("scrollable") || this.setAttribute("scrollable", ""), this.hasAttribute("auto-scroll") || (this.#t.value = !0), this.addEventListener("scroll", this.#f, { passive: !0 }), this.#r = new MutationObserver(this.#p), this.#r.observe(this, {
 			childList: !0,
 			subtree: !0
-		}), this.addEventListener("native:message-action", this.#m), this.hasAttribute("virtual") && this.#c();
+		}), this.hasAttribute("virtual") && this.#c();
 	}
 	teardown() {
-		this.removeEventListener("scroll", this.#f), this.removeEventListener("native:message-action", this.#m), this.#r?.disconnect(), this.#r = null, this.#l(), super.teardown();
+		this.removeEventListener("scroll", this.#f), this.#r?.disconnect(), this.#r = null, this.#l(), super.teardown();
 	}
 	#c() {
 		if (this.#i) return;
-		let e = Number(this.getAttribute("virtual-item-height")) || 80, n = Number(this.getAttribute("virtual-overscan")) || 5;
-		for (this.#i = new t(this, {
+		let e = Number(this.getAttribute("virtual-item-height")) || 80, t = Number(this.getAttribute("virtual-overscan")) || 5;
+		for (this.#i = new a(this, {
 			itemHeight: e,
-			overscan: n
+			overscan: t
 		}), this.#a = document.createElement("div"), this.#a.className = "n-chat-feed-virtual-container"; this.firstChild;) this.#a.appendChild(this.firstChild);
 		this.appendChild(this.#a), this.#i.enable(this, this.#a, this.#o.value.length), this.addEventListener("native:virtual-change", this.#u);
 	}
@@ -524,7 +770,7 @@ var a = class extends e {
 		}
 	}
 	#f = () => {
-		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - s;
+		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - d;
 		this.#n.value = t, t !== e && this.dispatchEvent(new CustomEvent("native:feed-scroll", {
 			bubbles: !0,
 			composed: !0,
@@ -542,16 +788,15 @@ var a = class extends e {
 			});
 		});
 	};
-	#m = (e) => {};
-}, l = class extends e {
+}, p = class extends i {
 	static observedAttributes = [
 		"src",
 		"name",
 		"icon"
 	];
-	#e = r("");
-	#t = r("");
-	#n = r("");
+	#e = s("");
+	#t = s("");
+	#n = s("");
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
@@ -583,7 +828,7 @@ var a = class extends e {
 			}
 			if (n) {
 				let e = document.createElement("span");
-				e.className = "n-chat-avatar-initials", e.textContent = u(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
+				e.className = "n-chat-avatar-initials", e.textContent = m(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
 				return;
 			}
 			let r = document.createElement("n-icon");
@@ -594,11 +839,11 @@ var a = class extends e {
 		this.textContent = "", super.teardown();
 	}
 };
-function u(e) {
+function m(e) {
 	let t = e.trim().split(/\s+/);
 	return t.length === 0 ? "" : t.length === 1 ? t[0][0].toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
 }
-const d = {
+const h = {
 	copy: {
 		label: "Copy",
 		icon: "copy"
@@ -623,7 +868,7 @@ const d = {
 		label: "Continue",
 		icon: "arrow-right"
 	}
-}, f = {
+}, g = {
 	assistant: [
 		"copy",
 		"retry",
@@ -648,9 +893,9 @@ const d = {
 * @fires native:message-action - Fired when an action button is clicked
 * @fires native:continue-request - Fired when continue is requested for a partial message
 */
-var p = class extends e {
+var _ = class extends i {
 	static observedAttributes = [
-		"role",
+		"data-role",
 		"message-id",
 		"timestamp",
 		"status",
@@ -659,11 +904,11 @@ var p = class extends e {
 		"actions-position"
 	];
 	#e;
-	#t = r("assistant");
-	#n = r("sent");
-	#r = r(null);
-	#i = r("icon");
-	#a = r("below");
+	#t = s("assistant");
+	#n = s("sent");
+	#r = s(null);
+	#i = s("icon");
+	#a = s("below");
 	#o = null;
 	#s = !1;
 	#c = 0;
@@ -675,7 +920,7 @@ var p = class extends e {
 		return this.#t.value;
 	}
 	set role(e) {
-		this.#t.value = e, this.setAttribute("role", e);
+		this.#t.value = e, this.setAttribute("data-role", e);
 	}
 	get messageId() {
 		return this.getAttribute("message-id") ?? "";
@@ -710,7 +955,7 @@ var p = class extends e {
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
-				case "role":
+				case "data-role":
 					this.#t.value = n ?? "assistant";
 					break;
 				case "status":
@@ -764,23 +1009,23 @@ var p = class extends e {
 			this.#o.removeEventListener("native:press", this.#m), this.#o.remove();
 		}
 	}
-	#p(e, t, n, r, a) {
+	#p(e, t, n, r, i) {
 		if (this.#o &&= (this.#f(), null), clearTimeout(this.#l), t === "none" || this.querySelector("[slot=\"actions\"]")) return;
-		let o;
-		if (o = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : f[e] ?? [], a === "partial" && !o.includes("continue") && (o = [...o, "continue"]), o.length === 0) return;
-		let s = document.createElement("n-toolbar");
-		s.dataset.role = "actions", s.setAttribute("padding", "tight"), s.setAttribute("aria-label", "Message actions"), n !== "label" && s.setAttribute("data-style", n);
-		for (let e of o) {
-			let t = d[e];
-			t && s.appendChild(m(e, t, n));
+		let a;
+		if (a = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : g[e] ?? [], i === "partial" && !a.includes("continue") && (a = [...a, "continue"]), a.length === 0) return;
+		let o = document.createElement("n-toolbar");
+		o.dataset.role = "actions", o.setAttribute("padding", "tight"), o.setAttribute("aria-label", "Message actions"), n !== "label" && o.setAttribute("data-style", n);
+		for (let e of a) {
+			let t = h[e];
+			t && o.appendChild(v(e, t, n));
 		}
-		if (s.children.length !== 0) {
-			if (s.addEventListener("native:press", this.#m), r === "below") {
-				s.setAttribute("popover", "manual");
-				let e = i("msg");
-				this.style.setProperty("anchor-name", `--${e}`), s.style.setProperty("position-anchor", `--${e}`), this.appendChild(s), this.#s = !0, s.addEventListener("pointerenter", this.#u), s.addEventListener("pointerleave", this.#d), s.addEventListener("focusin", this.#u), s.addEventListener("focusout", this.#d), a === "partial" && s.showPopover();
-			} else this.appendChild(s);
-			this.#o = s;
+		if (o.children.length !== 0) {
+			if (o.addEventListener("native:press", this.#m), r === "below") {
+				o.setAttribute("popover", "manual");
+				let e = c("msg");
+				this.style.setProperty("anchor-name", `--${e}`), o.style.setProperty("position-anchor", `--${e}`), this.appendChild(o), this.#s = !0, o.addEventListener("pointerenter", this.#u), o.addEventListener("pointerleave", this.#d), o.addEventListener("focusin", this.#u), o.addEventListener("focusout", this.#d), i === "partial" && o.showPopover();
+			} else this.appendChild(o);
+			this.#o = o;
 		}
 	}
 	#m = (e) => {
@@ -805,7 +1050,7 @@ var p = class extends e {
 		}
 	};
 };
-function m(e, t, n) {
+function v(e, t, n) {
 	let r = document.createElement("n-button");
 	if (r.setAttribute("variant", "ghost"), r.setAttribute("size", "sm"), r.setAttribute("inline", ""), r.setAttribute("data-action", e), r.setAttribute("aria-label", t.label), n === "icon" || n === "icon-label") {
 		let e = document.createElement("n-icon");
@@ -842,9 +1087,9 @@ function m(e, t, n) {
 * @attr {string} sender - Display name of the sender
 * @attr {string} avatar-align - `"top"` | `"center"` | `"bottom"` (default) — avatar vertical alignment
 */
-var h = class extends e {
+var y = class extends i {
 	static observedAttributes = [
-		"role",
+		"data-role",
 		"sender",
 		"avatar-align"
 	];
@@ -861,7 +1106,7 @@ var h = class extends e {
 	setup() {
 		super.setup(), this.#e.role = "group";
 		let e = this.getAttribute("sender");
-		e && (this.#e.ariaLabel = `Messages from ${e}`), this.#i(), this.#r = new MutationObserver((e) => {
+		e && this.setAttribute("aria-label", `Messages from ${e}`), this.#i(), this.#r = new MutationObserver((e) => {
 			for (let t of e) for (let e of t.addedNodes) e instanceof Element && e.localName !== "n-chat-avatar" && (e === this.#t || e === this.#n || (e.localName === "n-chat-message" ? this.#n?.appendChild(e) : this.#t?.appendChild(e)));
 		}), this.#r.observe(this, { childList: !0 });
 	}
@@ -885,11 +1130,12 @@ var h = class extends e {
 		for (let r of n) r instanceof Element && r.localName === "n-chat-avatar" || (r instanceof Element && r.localName === "n-chat-message" ? t.appendChild(r) : e.appendChild(r));
 		this.appendChild(e), this.appendChild(t), this.#t = e, this.#n = t;
 	}
-}, g = class extends e {
+}, b = class extends i {
 	static observedAttributes = ["format"];
-	#e = r("markdown");
-	#t = r("");
+	#e = s("markdown");
+	#t = s("");
 	#n = null;
+	#r = 0;
 	get content() {
 		return this.#t.value;
 	}
@@ -909,14 +1155,16 @@ var h = class extends e {
 		super.setup(), this.deferChildren(() => {
 			!this.#t.value && this.textContent?.trim() && (this.#t.value = this.textContent.trim()), this.#n = document.createElement("div"), this.#n.className = "n-chat-prose", this.textContent = "", this.appendChild(this.#n), this.addEffect(() => {
 				let e = this.#t.value, t = this.#e.value;
-				this.#n && (t === "plain" ? this.#n.textContent = e : this.#n.innerHTML = b(e));
+				this.#n && (t === "plain" ? this.#n.textContent = e : (cancelAnimationFrame(this.#r), this.#r = requestAnimationFrame(() => {
+					this.#n && (this.#n.innerHTML = T(w(e)));
+				})));
 			});
 		});
 	}
 	teardown() {
-		this.#n = null, super.teardown();
+		cancelAnimationFrame(this.#r), this.#n = null, super.teardown();
 	}
-}, _ = new Set([
+}, x = new Set([
 	"p",
 	"br",
 	"strong",
@@ -936,14 +1184,14 @@ var h = class extends e {
 	"blockquote",
 	"hr"
 ]);
-function v(e) {
+function S(e) {
 	return e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
 }
-function y(e) {
-	let t = v(e);
+function C(e) {
+	let t = S(e);
 	return t = t.replace(/`([^`]+)`/g, "<code>$1</code>"), t = t.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), t = t.replace(/__(.+?)__/g, "<strong>$1</strong>"), t = t.replace(/\*(.+?)\*/g, "<em>$1</em>"), t = t.replace(/(?<!\w)_(.+?)_(?!\w)/g, "<em>$1</em>"), t = t.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, "<a href=\"$2\" rel=\"noopener noreferrer\" target=\"_blank\">$1</a>"), t;
 }
-function b(e) {
+function w(e) {
 	if (!e) return "";
 	let t = e.split("\n"), n = [], r = 0;
 	for (; r < t.length;) {
@@ -952,14 +1200,14 @@ function b(e) {
 			let i = e.slice(3).trim(), a = [];
 			for (r += 1; r < t.length && !t[r].startsWith("```");) a.push(t[r]), r += 1;
 			r += 1;
-			let o = i ? ` data-lang="${v(i)}"` : "";
-			n.push(`<pre${o}><code>${v(a.join("\n"))}</code></pre>`);
+			let o = i ? ` data-lang="${S(i)}"` : "";
+			n.push(`<pre${o}><code>${S(a.join("\n"))}</code></pre>`);
 			continue;
 		}
 		let i = e.match(/^(#{1,6})\s+(.+)/);
 		if (i) {
 			let e = i[1].length;
-			n.push(`<h${e}>${y(i[2])}</h${e}>`), r += 1;
+			n.push(`<h${e}>${C(i[2])}</h${e}>`), r += 1;
 			continue;
 		}
 		if (/^---+$/.test(e.trim()) || /^\*\*\*+$/.test(e.trim())) {
@@ -969,19 +1217,19 @@ function b(e) {
 		if (e.startsWith("> ")) {
 			let e = [];
 			for (; r < t.length && t[r].startsWith("> ");) e.push(t[r].slice(2)), r += 1;
-			n.push(`<blockquote>${b(e.join("\n"))}</blockquote>`);
+			n.push(`<blockquote>${w(e.join("\n"))}</blockquote>`);
 			continue;
 		}
 		if (/^[-*+]\s/.test(e)) {
 			let e = [];
 			for (; r < t.length && /^[-*+]\s/.test(t[r]);) e.push(t[r].replace(/^[-*+]\s/, "")), r += 1;
-			n.push("<ul>" + e.map((e) => `<li>${y(e)}</li>`).join("") + "</ul>");
+			n.push("<ul>" + e.map((e) => `<li>${C(e)}</li>`).join("") + "</ul>");
 			continue;
 		}
 		if (/^\d+\.\s/.test(e)) {
 			let e = [];
 			for (; r < t.length && /^\d+\.\s/.test(t[r]);) e.push(t[r].replace(/^\d+\.\s/, "")), r += 1;
-			n.push("<ol>" + e.map((e) => `<li>${y(e)}</li>`).join("") + "</ol>");
+			n.push("<ol>" + e.map((e) => `<li>${C(e)}</li>`).join("") + "</ol>");
 			continue;
 		}
 		if (!e.trim()) {
@@ -990,15 +1238,15 @@ function b(e) {
 		}
 		let a = [];
 		for (; r < t.length && t[r].trim() && !t[r].startsWith("#") && !t[r].startsWith("```") && !t[r].startsWith("> ") && !/^[-*+]\s/.test(t[r]) && !/^\d+\.\s/.test(t[r]) && !/^---+$/.test(t[r].trim());) a.push(t[r]), r += 1;
-		a.length > 0 && n.push(`<p>${y(a.join("\n"))}</p>`);
+		a.length > 0 && n.push(`<p>${C(a.join("\n"))}</p>`);
 	}
 	return n.join("");
 }
 /** Sanitize rendered HTML — strip any tags not in allowlist. */
-function x(e) {
+function T(e) {
 	return e.replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g, (e, t) => {
 		let n = t.toLowerCase();
-		return _.has(n) ? e : "";
+		return x.has(n) ? e : "";
 	});
 }
 /**
@@ -1019,7 +1267,7 @@ function x(e) {
 * @attr {boolean} expandable - Allow click to expand trace content
 * @fires native:activity-toggle - Fired when trace is expanded/collapsed
 */
-var S = class extends e {
+var E = class extends i {
 	static observedAttributes = [
 		"type",
 		"label",
@@ -1027,11 +1275,11 @@ var S = class extends e {
 		"expandable"
 	];
 	#e;
-	#t = r("typing");
-	#n = r("");
-	#r = r(!1);
-	#i = r(!1);
-	#a = r(!1);
+	#t = s("typing");
+	#n = s("");
+	#r = s(!1);
+	#i = s(!1);
+	#a = s(!1);
 	#o = 0;
 	#s = 0;
 	#c = null;
@@ -1077,7 +1325,7 @@ var S = class extends e {
 			this.#r.value ? (this.#p(), this.#e.states.add("active")) : (this.#m(), this.#e.states.delete("active"));
 		}), this.addEffect(() => {
 			if (!this.#c) return;
-			let e = this.#n.value || C(this.#t.value);
+			let e = this.#n.value || D(this.#t.value);
 			this.#c.textContent = e;
 		}), this.addEffect(() => {
 			this.#u && (this.#u.hidden = !this.#r.value);
@@ -1099,7 +1347,7 @@ var S = class extends e {
 		n.className = "n-chat-activity-sep", n.textContent = "|", n.setAttribute("aria-hidden", "true"), this.#c = document.createElement("span"), this.#c.className = "n-chat-activity-label", this.#u = document.createElement("span"), this.#u.className = "n-chat-activity-dots", this.#u.setAttribute("aria-hidden", "true"), this.#u.innerHTML = "<i></i><i></i><i></i>", t.append(this.#l, n, this.#c, this.#u), this.#d = document.createElement("div"), this.#d.className = "n-chat-activity-content", this.#d.hidden = !0, this.#d.appendChild(e), this.append(t, this.#d);
 	}
 	#p() {
-		this.#o = performance.now(), this.#h();
+		this.#m(), this.#o = performance.now(), this.#h();
 	}
 	#m() {
 		this.#s &&= (cancelAnimationFrame(this.#s), 0);
@@ -1107,7 +1355,7 @@ var S = class extends e {
 	#h = () => {
 		if (!this.#r.value || !this.#l) return;
 		let e = performance.now() - this.#o;
-		this.#l.textContent = w(e), this.#s = requestAnimationFrame(this.#h);
+		this.#l.textContent = O(e), this.#s = requestAnimationFrame(this.#h);
 	};
 	#g = () => {
 		this.#i.value && (this.#a.value = !this.#a.value, this.toggleAttribute("expanded", this.#a.value), this.dispatchEvent(new CustomEvent("native:activity-toggle", {
@@ -1117,14 +1365,14 @@ var S = class extends e {
 		})));
 	};
 };
-function C(e) {
+function D(e) {
 	switch (e) {
 		case "thinking": return "Thinking…";
 		case "tool-use": return "Using tools…";
 		default: return "Host is typing…";
 	}
 }
-function w(e) {
+function O(e) {
 	let t = Math.floor(e / 1e3);
 	if (t < 60) return `${t}s`;
 	let n = Math.floor(t / 60), r = t % 60;
@@ -1144,11 +1392,11 @@ function w(e) {
 * @attr {boolean} disabled - Disables all chips
 * @fires native:seed-select - Fired when a chip is clicked
 */
-var T = class extends e {
+var k = class extends i {
 	static observedAttributes = ["options", "disabled"];
 	#e;
-	#t = r([]);
-	#n = r(!1);
+	#t = s([]);
+	#n = s(!1);
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -1182,11 +1430,11 @@ var T = class extends e {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(n(this, this.#n, this.#e)), this.addEffect(() => {
+		super.setup(), this.addEffect(o(this, this.#n, this.#e)), this.addEffect(() => {
 			let e = this.#t.value;
 			this.textContent = "";
 			let t = document.createElement("n-stack");
-			t.setAttribute("direction", "row"), t.setAttribute("wrap", ""), t.setAttribute("gap", "1");
+			t.setAttribute("direction", "row"), t.setAttribute("wrap", "");
 			for (let n of e) {
 				let e = document.createElement("n-button");
 				if (e.setAttribute("variant", "outline"), e.setAttribute("size", "sm"), e.setAttribute("inline", ""), e.setAttribute("data-value", n.value), n.icon) {
@@ -1216,7 +1464,7 @@ var T = class extends e {
 			}
 		}));
 	};
-}, E = new Set([
+}, A = new Set([
 	"script",
 	"style",
 	"link",
@@ -1233,13 +1481,14 @@ var T = class extends e {
 	"frame",
 	"frameset",
 	"noscript"
-]), D = class extends e {
+]), j = class extends i {
 	static observedAttributes = ["schema-type", "mode"];
 	#e;
-	#t = r("a2ui");
-	#n = r("inline");
-	#r = r(null);
+	#t = s("a2ui");
+	#n = s("inline");
+	#r = s(null);
 	#i = null;
+	#a = null;
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -1278,50 +1527,59 @@ var T = class extends e {
 		super.setup(), this.#i = document.createElement("div"), this.#i.className = "n-chat-genui-container", this.appendChild(this.#i), this.addEffect(() => {
 			let e = this.#r.value, t = this.#n.value;
 			if (!this.#i || (this.#i.textContent = "", !e)) return;
-			let n = O(e);
+			let n = M(e);
 			if (n.length > 0) {
-				this.#a(n), this.dispatchEvent(new CustomEvent("native:genui-error", {
+				this.#o(n), this.dispatchEvent(new CustomEvent("native:genui-error", {
 					bubbles: !0,
 					composed: !0,
 					detail: { errors: n }
 				}));
 				return;
 			}
-			if (t === "lightbox") this.#o(e);
+			if (t === "lightbox") this.#s(e);
 			else {
-				let t = k(e);
+				let t = N(e);
 				t && this.#i.appendChild(t);
 			}
 			this.#e.states.add("rendered");
-		}), this.addEventListener("native:press", this.#c);
+		}), this.addEventListener("native:press", this.#u);
 	}
 	teardown() {
-		this.removeEventListener("native:press", this.#c), this.#i = null, super.teardown();
+		this.removeEventListener("native:press", this.#u), this.#l(), this.#i = null, super.teardown();
 	}
-	#a(e) {
+	#o(e) {
 		if (!this.#i) return;
 		let t = document.createElement("div");
 		t.className = "n-chat-genui-error", t.textContent = `Schema validation failed: ${e.join(", ")}`, this.#i.appendChild(t);
 	}
-	#o(e) {
+	#s(e) {
 		if (!this.#i) return;
 		let t = document.createElement("n-card");
 		t.dataset.role = "preview";
 		let n = document.createElement("span");
 		n.textContent = `Interactive UI (${e.tag})`, t.appendChild(n);
 		let r = document.createElement("n-button");
-		r.setAttribute("variant", "outline"), r.setAttribute("size", "sm"), r.setAttribute("inline", ""), r.textContent = "Open", r.addEventListener("click", () => this.#s(e)), t.appendChild(r), this.#i.appendChild(t);
+		r.setAttribute("variant", "outline"), r.setAttribute("size", "sm"), r.setAttribute("inline", ""), r.textContent = "Open", r.addEventListener("click", () => this.#c(e)), t.appendChild(r), this.#i.appendChild(t);
 	}
-	#s(e) {
-		let t = document.createElement("n-dialog"), n = k(e);
-		n && t.appendChild(n), this.appendChild(t), requestAnimationFrame(() => {
+	#c(e) {
+		this.#l();
+		let t = document.createElement("n-dialog"), n = N(e);
+		n && t.appendChild(n), this.appendChild(t), this.#a = t, requestAnimationFrame(() => {
 			let e = t.querySelector("dialog");
 			e && e.showModal();
 		}), t.addEventListener("close", () => {
-			t.remove();
+			t.remove(), this.#a === t && (this.#a = null);
 		});
 	}
-	#c = (e) => {
+	#l() {
+		if (!this.#a) return;
+		let e = this.#a.querySelector("dialog");
+		if (e?.open) try {
+			e.close();
+		} catch {}
+		this.#a.remove(), this.#a = null;
+	}
+	#u = (e) => {
 		this.#i?.contains(e.target) && this.dispatchEvent(new CustomEvent("native:genui-action", {
 			bubbles: !0,
 			composed: !0,
@@ -1333,20 +1591,20 @@ var T = class extends e {
 		}));
 	};
 };
-function O(e, t = 0) {
+function M(e, t = 0) {
 	let n = [];
 	if (t > 20) return n.push("Maximum nesting depth (20) exceeded"), n;
 	if (!e.tag || typeof e.tag != "string") return n.push("Node missing required \"tag\" property"), n;
-	if (E.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...O(r, t + 1));
+	if (A.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...M(r, t + 1));
 	return n;
 }
-function k(e) {
-	if (E.has(e.tag.toLowerCase())) return null;
+function N(e) {
+	if (A.has(e.tag.toLowerCase())) return null;
 	let t = document.createElement(e.tag);
 	if (e.id && (t.id = e.id), e.slot && (t.slot = e.slot), e.attributes) for (let [n, r] of Object.entries(e.attributes)) t.setAttribute(n, r);
 	if (e.properties) for (let [n, r] of Object.entries(e.properties)) t[n] = r;
 	if (e.text && (t.textContent = e.text), e.children) for (let n of e.children) {
-		let e = k(n);
+		let e = N(n);
 		e && t.appendChild(e);
 	}
 	return t;
@@ -1371,7 +1629,7 @@ function k(e) {
 * @fires native:structured-submit - Fired on submit with selections
 * @fires native:structured-cancel - Fired when dismissed without selecting
 */
-var A = class extends e {
+var P = class extends i {
 	static observedAttributes = [
 		"question",
 		"type",
@@ -1380,12 +1638,12 @@ var A = class extends e {
 		"disabled"
 	];
 	#e;
-	#t = r("");
-	#n = r("single");
-	#r = r([]);
-	#i = r(!1);
-	#a = r(!1);
-	#o = r(/* @__PURE__ */ new Set());
+	#t = s("");
+	#n = s("single");
+	#r = s([]);
+	#i = s(!1);
+	#a = s(!1);
+	#o = s(/* @__PURE__ */ new Set());
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -1438,37 +1696,46 @@ var A = class extends e {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(n(this, this.#a, this.#e)), this.addEffect(() => {
-			this.#s();
+		super.setup(), this.addEffect(o(this, this.#a, this.#e)), this.addEffect(() => {
+			this.#t.value, this.#r.value, this.#n.value, this.#s();
+		}), this.addEffect(() => {
+			let e = this.#o.value, t = this.querySelectorAll("[data-value]");
+			for (let n of t) {
+				let t = n.getAttribute("data-value") ?? "", r = e.has(t);
+				n.setAttribute("variant", r ? "primary" : "outline"), n.setAttribute("aria-pressed", String(r));
+			}
+			let n = this.querySelector("[data-action=\"submit\"]");
+			n && this.#i.value && n.toggleAttribute("disabled", e.size === 0);
 		}), this.addEventListener("native:press", this.#c);
 	}
 	teardown() {
 		this.removeEventListener("native:press", this.#c), super.teardown();
 	}
 	#s() {
-		let e = this.#t.value, t = this.#r.value, n = this.#o.value, r = this.#n.value;
-		if (this.textContent = "", e) {
+		let e = this.#t.value, t = this.#r.value, n = this.#n.value;
+		if (this.textContent = "", t.length === 0) return;
+		if (e) {
 			let t = document.createElement("div");
 			t.className = "n-chat-structured-question", t.textContent = e, this.appendChild(t);
 		}
-		let i = document.createElement("n-stack");
-		i.setAttribute("direction", "row"), i.setAttribute("wrap", ""), i.setAttribute("gap", "1"), i.setAttribute("role", r === "multi" ? "group" : "radiogroup");
+		let r = document.createElement("n-stack");
+		r.setAttribute("direction", "row"), r.setAttribute("wrap", ""), r.setAttribute("role", n === "multi" ? "group" : "radiogroup");
 		for (let e of t) {
-			let t = document.createElement("n-button"), r = n.has(e.value);
-			if (t.setAttribute("variant", r ? "primary" : "outline"), t.setAttribute("data-value", e.value), t.setAttribute("aria-pressed", String(r)), e.icon) {
+			let t = document.createElement("n-button");
+			if (t.setAttribute("variant", "outline"), t.setAttribute("data-value", e.value), t.setAttribute("aria-pressed", "false"), e.icon) {
 				let n = document.createElement("n-icon");
 				n.setAttribute("name", e.icon), n.setAttribute("slot", "leading"), t.appendChild(n);
 			}
-			let a = document.createElement("span");
-			a.setAttribute("slot", "label"), a.textContent = e.label, t.appendChild(a), i.appendChild(t);
+			let n = document.createElement("span");
+			n.setAttribute("slot", "label"), n.textContent = e.label, t.appendChild(n), r.appendChild(t);
 		}
-		this.appendChild(i);
-		let a = document.createElement("div");
-		a.className = "n-chat-structured-actions";
+		this.appendChild(r);
+		let i = document.createElement("div");
+		i.className = "n-chat-structured-actions";
+		let a = document.createElement("n-button");
+		a.setAttribute("variant", "ghost"), a.setAttribute("size", "sm"), a.setAttribute("inline", ""), a.setAttribute("data-action", "cancel"), a.textContent = "Skip", i.appendChild(a);
 		let o = document.createElement("n-button");
-		o.setAttribute("variant", "ghost"), o.setAttribute("size", "sm"), o.setAttribute("inline", ""), o.setAttribute("data-action", "cancel"), o.textContent = "Skip", a.appendChild(o);
-		let s = document.createElement("n-button");
-		s.setAttribute("variant", "primary"), s.setAttribute("size", "sm"), s.setAttribute("inline", ""), s.setAttribute("data-action", "submit"), s.textContent = "Submit", this.#i.value && n.size === 0 && s.setAttribute("disabled", ""), a.appendChild(s), this.appendChild(a);
+		o.setAttribute("variant", "primary"), o.setAttribute("size", "sm"), o.setAttribute("inline", ""), o.setAttribute("data-action", "submit"), o.textContent = "Submit", this.#i.value && o.setAttribute("disabled", ""), i.appendChild(o), this.appendChild(i);
 	}
 	#c = (e) => {
 		if (this.#a.value) return;
@@ -1497,4 +1764,4 @@ var A = class extends e {
 		}));
 	};
 };
-export { g as a, x as c, p as d, f, a as g, o as h, S as i, h as l, c as m, D as n, y as o, l as p, T as r, b as s, A as t, d as u };
+export { b as a, T as c, _ as d, g as f, l as g, u as h, E as i, y as l, f as m, j as n, C as o, p, k as r, w as s, P as t, h as u };