@nonoun/native-chat 0.5.15 → 0.5.17

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

@@ -1,4 +1,5 @@
-import { NativeElement as e, VirtualScrollController as t, createDisabledEffect as n, signal as r, uid as i } from "@nonoun/native-ui";
+import { o as e, r as t, t as n, u as r } from "./adapter-mock-0s0RPkdx.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
@@ -10,11 +11,11 @@ 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 {
+var l = class extends i {
 	static observedAttributes = ["disabled", "busy"];
 	#e;
-	#t = r(!1);
-	#n = r(!1);
+	#t = s(!1);
+	#n = s(!1);
 	#r = null;
 	#i = null;
 	constructor() {
@@ -60,7 +61,7 @@ var a = class extends e {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(n(this, this.#t, this.#e)), this.deferChildren(() => {
+		super.setup(), this.addEffect(o(this, this.#t, this.#e)), this.deferChildren(() => {
 			this.#a(), this.addEffect(() => {
 				let e = this.#t.value;
 				this.#r && this.#r.toggleAttribute("disabled", e), this.#i && (e ? this.#i.setAttribute("disabled", "") : this.#s());
@@ -131,27 +132,39 @@ 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 observedAttributes = [
 		"show-stop",
 		"show-restart",
 		"auto-focus-policy",
 		"open",
-		"model"
+		"model",
+		"gateway",
+		"gateway-url",
+		"gateway-config"
 	];
-	#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;
+	#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(!1);
 	#u = null;
-	#d = null;
-	#f = r(!1);
+	#d = [];
+	#f = null;
+	#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 +179,25 @@ 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 "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;
 			}
 			super.attributeChangedCallback(e, t, n);
 		}
@@ -208,120 +234,161 @@ 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");
+	}
+	/** Whether the panel is currently streaming a response. Read-only. */
+	get streaming() {
+		return this.#l.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.style.display = "inline-flex", s.style.alignItems = "center", s.style.gap = "calc(var(--n-space) * 2)", 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", ""), 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);
+		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(() => {
 			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"), e.innerHTML = "<n-icon name=\"stop\"></n-icon>", 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"), 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);
+			} 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.#j);
+				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();
 		}), 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.#R(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);
+					}
+					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 i = this.#o.value, a = this.#s.value, o = this.#c.value;
+			if (!i || !a) {
+				this.#u = null;
+				return;
 			}
+			let s = {
+				clientId: this.#p ?? r(),
+				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;
 		}), 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.#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.#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.#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();
 	}
-	#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 +396,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 +420,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 +430,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,42 +447,124 @@ 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) => {
+	#j = (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", {
+		t !== n && (this.#a.value = t, this.setAttribute("model", t), this.dispatchEvent(new CustomEvent("native:model-change", {
 			bubbles: !0,
 			composed: !0,
 			detail: {
 				value: t,
 				previousValue: n
 			}
-		}));
+		})));
 	};
-	#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;
+	#M = (e) => {
+		if (!this.#u) return;
+		let t = e.detail?.value;
+		t?.trim() && this.#N(t);
+	};
+	async #N(e) {
+		let t = this.#u;
+		if (!t || this.#l.value) return;
+		this.#f?.abort();
+		let n = new AbortController();
+		this.#f = n;
+		let i = {
+			role: "user",
+			message: e,
+			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;
+		try {
+			let i = await t.sendMessageStream({
+				id: this.#p ?? r(),
+				messages: this.#d,
+				query: e,
+				model: this.#a.value ?? void 0,
+				signal: n.signal,
+				onChunk: (e) => {
+					s && (s.content = e.fullMessage), e.done && o?.setAttribute("status", e.partial ? "partial" : "sent");
+				}
+			});
+			this.#d.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}`);
+		} finally {
+			this.#l.value = !1, this.#f = null;
+		}
+	}
+	#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) {
+		let t = this.#h;
+		if (!t) return null;
+		let n = document.createElement("n-chat-messages");
+		n.setAttribute("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");
+		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 = ""));
+	};
+	#R(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);
+		});
+	}
+	#z() {
+		this.#b &&= (this.#b.removeEventListener("native:change", this.#j), 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 +573,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();
@@ -488,10 +637,10 @@ var a = class extends e {
 	}
 	#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 +673,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,
@@ -543,15 +692,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 +732,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 +743,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 +772,7 @@ const d = {
 		label: "Continue",
 		icon: "arrow-right"
 	}
-}, f = {
+}, g = {
 	assistant: [
 		"copy",
 		"retry",
@@ -648,7 +797,7 @@ 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",
 		"message-id",
@@ -659,11 +808,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;
@@ -764,23 +913,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 +954,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,7 +991,7 @@ 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",
 		"sender",
@@ -885,10 +1034,10 @@ 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;
 	get content() {
 		return this.#t.value;
@@ -909,14 +1058,14 @@ 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 : this.#n.innerHTML = w(e));
 			});
 		});
 	}
 	teardown() {
 		this.#n = null, super.teardown();
 	}
-}, _ = new Set([
+}, x = new Set([
 	"p",
 	"br",
 	"strong",
@@ -936,14 +1085,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 +1101,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 +1118,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 +1139,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 +1168,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 +1176,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 +1226,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);
@@ -1107,7 +1256,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 +1266,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 +1293,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 +1331,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 +1365,7 @@ var T = class extends e {
 			}
 		}));
 	};
-}, E = new Set([
+}, A = new Set([
 	"script",
 	"style",
 	"link",
@@ -1233,12 +1382,12 @@ 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;
 	constructor() {
 		super(), this.#e = this.attachInternals();
@@ -1278,7 +1427,7 @@ 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", {
 					bubbles: !0,
@@ -1289,7 +1438,7 @@ var T = class extends e {
 			}
 			if (t === "lightbox") this.#o(e);
 			else {
-				let t = k(e);
+				let t = N(e);
 				t && this.#i.appendChild(t);
 			}
 			this.#e.states.add("rendered");
@@ -1313,7 +1462,7 @@ var T = class extends e {
 		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);
 	}
 	#s(e) {
-		let t = document.createElement("n-dialog"), n = k(e);
+		let t = document.createElement("n-dialog"), n = N(e);
 		n && t.appendChild(n), this.appendChild(t), requestAnimationFrame(() => {
 			let e = t.querySelector("dialog");
 			e && e.showModal();
@@ -1333,20 +1482,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 +1520,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 +1529,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,7 +1587,7 @@ var A = class extends e {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(n(this, this.#a, this.#e)), this.addEffect(() => {
+		super.setup(), this.addEffect(o(this, this.#a, this.#e)), this.addEffect(() => {
 			this.#s();
 		}), this.addEventListener("native:press", this.#c);
 	}
@@ -1452,7 +1601,7 @@ var A = class extends e {
 			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");
+		i.setAttribute("direction", "row"), i.setAttribute("wrap", ""), i.setAttribute("role", r === "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) {
@@ -1497,4 +1646,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 };