@nonoun/native-chat 0.5.17 → 0.5.21

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

@@ -1,8 +1,9 @@
-import { o as e, r as t, t as n, u as r } from "./adapter-mock-0s0RPkdx.js";
+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
@@ -12,7 +13,11 @@ import { NativeElement as i, VirtualScrollController as a, createDisabledEffect
 * @fires native:composer-blur - Fired when the composer textarea loses focus
 */
 var l = class extends i {
-	static observedAttributes = ["disabled", "busy"];
+	static observedAttributes = [
+		"disabled",
+		"busy",
+		"value"
+	];
 	#e;
 	#t = s(!1);
 	#n = s(!1);
@@ -56,13 +61,18 @@ var l = class extends i {
 				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(o(this, this.#t, this.#e)), this.deferChildren(() => {
-			this.#a(), this.addEffect(() => {
+			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(() => {
@@ -133,15 +143,18 @@ var l = class extends i {
 		}
 	}
 }, u = class extends i {
+	static MAX_CONTEXT_MESSAGES = 50;
 	static observedAttributes = [
 		"show-stop",
 		"show-restart",
 		"auto-focus-policy",
 		"open",
 		"model",
+		"models",
 		"gateway",
 		"gateway-url",
-		"gateway-config"
+		"gateway-config",
+		"gateway-urls"
 	];
 	#e = s(!1);
 	#t = s(!1);
@@ -152,10 +165,10 @@ var l = class extends i {
 	#o = s(null);
 	#s = s(null);
 	#c = s(null);
-	#l = s(!1);
-	#u = null;
-	#d = [];
-	#f = null;
+	#l = s(null);
+	#u = s(!1);
+	#d = null;
+	#f = [];
 	#p = null;
 	#m = null;
 	#h = null;
@@ -185,6 +198,12 @@ var l = class extends i {
 				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;
@@ -198,6 +217,13 @@ var l = class extends i {
 						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);
 		}
@@ -225,7 +251,7 @@ var l = class extends i {
 		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() {
@@ -255,9 +281,16 @@ var l = class extends i {
 	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.#l.value;
+		return this.#u.value;
 	}
 	/** Open the panel. Optionally focus the composer. */
 	open(e) {
@@ -284,7 +317,7 @@ var l = class extends i {
 		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.style.display = "inline-flex", s.style.alignItems = "center", s.style.gap = "calc(var(--n-space) * 2)", i.appendChild(s), this.#v = s;
+		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");
@@ -294,75 +327,94 @@ var l = class extends i {
 		let m = document.createElement("n-chat-input-actions");
 		this.#y = m;
 		let h = document.createElement("n-button");
-		h.setAttribute("variant", "ghost"), h.setAttribute("inline", ""), h.innerHTML = "<n-icon name=\"plus\"></n-icon>", m.appendChild(h);
-		let g = document.createElement("n-button");
-		g.setAttribute("variant", "ghost"), g.setAttribute("inline", ""), g.innerHTML = "<n-icon name=\"microphone\"></n-icon>", m.appendChild(g);
+		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", "primary"), _.setAttribute("intent", "accent"), _.setAttribute("radius", "round"), _.setAttribute("inline", ""), _.setAttribute("disabled", ""), _.dataset.submit = "", _.dataset.role = "submit", _.innerHTML = "<n-icon name=\"arrow-up\"></n-icon>", m.appendChild(_), f.appendChild(m), d.appendChild(f), this.append(i, c, d), this.addEffect(() => {
+		_.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.#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.#k), this.#g = e, this.#v?.prepend(e);
+				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.#_) {
 				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.#A), this.#_ = e;
-				let t = this.#g?.nextSibling ?? this.#v?.firstChild ?? null;
-				this.#v?.insertBefore(e, t);
+				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.#b) {
 				let e = document.createElement("n-select");
-				e.setAttribute("aria-label", "Select model"), e.setAttribute("data-role", "model-picker"), e.addEventListener("native:change", this.#j);
+				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", ""), t.innerHTML = "<n-icon name=\"dots-three-outline-fill\"></n-icon>";
-				let n = document.createElement("n-listbox");
-				n.setAttribute("popover", "manual"), e.append(t, n), this.#b = e, this.#x = n;
-				let r = this.#y?.querySelector("[data-submit]");
-				r ? this.#y?.insertBefore(e, r) : this.#y?.appendChild(e);
-			} else e.length === 0 && this.#b && this.#z();
+				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.#b, r = this.#x;
 			if (!n || !r || e.length === 0) return;
 			let i = t ?? e[0]?.value ?? null;
 			if (i !== null) {
 				r.innerHTML = "";
-				for (let [t, n] of this.#R(e)) {
+				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 = `${r ? "✓ " : ""}${t.label ?? t.value}`, e.appendChild(n);
+						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;
 			}
+		}), 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.#u = null;
+				this.#d = null;
 				return;
 			}
 			let s = {
-				clientId: this.#p ?? r(),
+				clientId: e(),
 				baseUrl: a,
 				gatewayConfig: o ?? {}
-			};
-			i === "openai" ? this.#u = e(s) : i === "claude" ? this.#u = t(s) : i === "mock" ? this.#u = n(s) : this.#u = null;
+			}, 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(() => {
-			this.#o.value && (this.#e.value = this.#l.value);
-		}), this.addEventListener("native:send", this.#M), this.addEventListener("native:chat-stop", this.#I), this.addEventListener("native:chat-restart", this.#L), this.deferChildren(() => {
+			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.#f?.abort(), this.removeEventListener("native:send", this.#M), this.removeEventListener("native:chat-stop", this.#I), this.removeEventListener("native:chat-restart", this.#L), this.#g && this.#g.removeEventListener("native:press", this.#k), this.#_ && this.#_.removeEventListener("native:press", this.#A), this.#z(), this.#u = null, this.#d = [], this.#f = 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();
+		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();
 	}
 	#S() {
 		let e = this.querySelector(":scope > [slot=\"header-trailing\"]");
@@ -459,89 +511,134 @@ var l = class extends i {
 			composed: !0
 		}));
 	};
-	#j = (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;
-		t !== n && (this.#a.value = t, this.setAttribute("model", t), 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: {
 				value: t,
 				previousValue: n
 			}
-		})));
+		}));
 	};
-	#M = (e) => {
-		if (!this.#u) return;
+	#N = (e) => {
+		if (!this.#d) return;
 		let t = e.detail?.value;
-		t?.trim() && this.#N(t);
+		t?.trim() && (e.stopImmediatePropagation(), this.#P(t));
 	};
-	async #N(e) {
-		let t = this.#u;
-		if (!t || this.#l.value) return;
-		this.#f?.abort();
-		let n = new AbortController();
-		this.#f = n;
+	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: e,
+			message: t,
 			datetime: Date.now()
 		};
-		this.#d.push(i), this.#P(i);
-		let a = `msg-${Date.now()}-a`, o = this.#F(a), s = o?.querySelector("n-chat-message-text");
-		this.#l.value = !0;
+		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 t.sendMessageStream({
-				id: this.#p ?? r(),
-				messages: this.#d,
-				query: e,
+			let i = await n.sendMessageStream({
+				id: e(),
+				messages: this.#f,
+				query: t,
 				model: this.#a.value ?? void 0,
-				signal: n.signal,
+				signal: r.signal,
 				onChunk: (e) => {
-					s && (s.content = e.fullMessage), e.done && o?.setAttribute("status", e.partial ? "partial" : "sent");
+					s?.getAttribute("status") === "typing" && s.setAttribute("status", "streaming"), c && (c.content = e.fullMessage), e.done && s?.setAttribute("status", e.partial ? "partial" : "sent");
 				}
 			});
-			this.#d.push({
+			this.#f.push({
 				role: "assistant",
 				message: i.message,
 				datetime: i.datetime ?? Date.now(),
 				partial: i.partial
 			});
 		} catch (e) {
-			if (e.name === "AbortError") return;
-			o?.setAttribute("status", "error"), s && (s.content = `Error: ${e.message}`);
+			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.#l.value = !1, this.#f = null;
+			this.#u.value = !1, this.#p = null;
+			let e = this.#w();
+			e && (e.busy = !1);
 		}
 	}
-	#P(e) {
-		let t = this.#h;
-		if (!t) return;
-		let n = document.createElement("n-chat-messages");
-		n.setAttribute("role", e.role), n.setAttribute("sender", e.role === "user" ? "You" : "Assistant");
-		let r = document.createElement("n-chat-message");
-		r.setAttribute("role", e.role), r.setAttribute("message-id", `msg-${Date.now()}`), r.setAttribute("status", "sent");
-		let i = document.createElement("n-chat-message-text");
-		i.content = e.message, r.appendChild(i), n.appendChild(r), t.appendChild(n);
-	}
-	#F(e) {
+	#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("role", "assistant"), n.setAttribute("sender", "Assistant");
+		n.setAttribute("data-role", "assistant"), n.setAttribute("sender", "Assistant");
 		let r = document.createElement("n-chat-message");
-		r.setAttribute("role", "assistant"), r.setAttribute("message-id", e), r.setAttribute("status", "streaming");
+		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;
 	}
-	#I = () => {
-		this.#u && (this.#f?.abort(), this.#l.value = !1);
-	};
 	#L = () => {
-		this.#u && (this.#f?.abort(), this.#l.value = !1, this.#d = [], this.#h && (this.#h.innerHTML = ""));
+		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 = "");
 	};
-	#R(e) {
+	#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";
@@ -561,8 +658,8 @@ var l = class extends i {
 			return (n === -1 ? 999 : n) - (i === -1 ? 999 : i);
 		});
 	}
-	#z() {
-		this.#b &&= (this.#b.removeEventListener("native:change", this.#j), this.#b.remove(), null), this.#x = null;
+	#B() {
+		this.#b &&= (this.#b.removeEventListener("native:change", this.#M), this.#b.remove(), null), this.#x = null;
 	}
 }, d = 40, f = class extends i {
 	static observedAttributes = [
@@ -630,10 +727,10 @@ var l = class extends i {
 		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;
@@ -691,7 +788,6 @@ var l = class extends i {
 			});
 		});
 	};
-	#m = (e) => {};
 }, p = class extends i {
 	static observedAttributes = [
 		"src",
@@ -799,7 +895,7 @@ const h = {
 */
 var _ = class extends i {
 	static observedAttributes = [
-		"role",
+		"data-role",
 		"message-id",
 		"timestamp",
 		"status",
@@ -824,7 +920,7 @@ var _ = class extends i {
 		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") ?? "";
@@ -859,7 +955,7 @@ var _ = class extends i {
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
-				case "role":
+				case "data-role":
 					this.#t.value = n ?? "assistant";
 					break;
 				case "status":
@@ -993,7 +1089,7 @@ function v(e, t, n) {
 */
 var y = class extends i {
 	static observedAttributes = [
-		"role",
+		"data-role",
 		"sender",
 		"avatar-align"
 	];
@@ -1010,7 +1106,7 @@ var y = class extends i {
 	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 });
 	}
@@ -1039,6 +1135,7 @@ var y = class extends i {
 	#e = s("markdown");
 	#t = s("");
 	#n = null;
+	#r = 0;
 	get content() {
 		return this.#t.value;
 	}
@@ -1058,12 +1155,14 @@ var y = class extends i {
 		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 = w(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();
 	}
 }, x = new Set([
 	"p",
@@ -1248,7 +1347,7 @@ var E = class extends i {
 		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);
@@ -1389,6 +1488,7 @@ var k = class extends i {
 	#n = s("inline");
 	#r = s(null);
 	#i = null;
+	#a = null;
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -1429,48 +1529,57 @@ var k = class extends i {
 			if (!this.#i || (this.#i.textContent = "", !e)) return;
 			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 = 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) {
+	#c(e) {
+		this.#l();
 		let t = document.createElement("n-dialog"), n = N(e);
-		n && t.appendChild(n), this.appendChild(t), requestAnimationFrame(() => {
+		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,
@@ -1588,36 +1697,45 @@ var P = class extends i {
 	}
 	setup() {
 		super.setup(), this.addEffect(o(this, this.#a, this.#e)), this.addEffect(() => {
-			this.#s();
+			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("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;