@nonoun/native-chat 0.3.0 → 0.5.1

package/dist/{chat-input-structured-element-Cpar3CeA.js → chat-input-structured-element-uXGIe-HI.js}

@@ -1,4 +1,4 @@
-import { NativeElement as e, createDisabledEffect as t, signal as n } from "@nonoun/native-ui";
+import { NativeElement as e, VirtualScrollController as t, createDisabledEffect as n, signal as r } from "@nonoun/native-ui";
 /**
 * Chat message input with textarea, submit button, and Enter-to-send behavior.
 * @attr {boolean} disabled - Disables interaction
@@ -10,11 +10,11 @@ import { NativeElement as e, createDisabledEffect as t, signal as n } from "@non
 * @fires native:composer-focus - Fired when the composer textarea gains focus
 * @fires native:composer-blur - Fired when the composer textarea loses focus
 */
-var r = class extends e {
+var i = class extends e {
 	static observedAttributes = ["disabled", "busy"];
 	#e;
-	#t = n(!1);
-	#n = n(!1);
+	#t = r(!1);
+	#n = r(!1);
 	#r = null;
 	#i = null;
 	constructor() {
@@ -60,7 +60,7 @@ var r = class extends e {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(t(this, this.#t, this.#e)), this.deferChildren(() => {
+		super.setup(), this.addEffect(n(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,14 +131,21 @@ var r = class extends e {
 			})) && !this.hasAttribute("no-auto-clear") && (this.value = "", this.#i?.setAttribute("disabled", ""));
 		}
 	}
-}, i = class extends e {
-	static observedAttributes = ["show-stop", "show-restart"];
-	#e = n(!1);
-	#t = n(!1);
-	#n = null;
-	#r = null;
+}, a = class extends e {
+	static observedAttributes = [
+		"show-stop",
+		"show-restart",
+		"auto-focus-policy",
+		"open"
+	];
+	#e = r(!1);
+	#t = r(!1);
+	#n = r("open-request");
+	#r = r(!1);
 	#i = null;
 	#a = null;
+	#o = null;
+	#s = null;
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
@@ -148,6 +155,14 @@ var r = class extends e {
 				case "show-restart":
 					this.#t.value = n !== null;
 					break;
+				case "auto-focus-policy":
+					this.#n.value = n ?? "open-request";
+					break;
+				case "open": {
+					let e = this.#r.value;
+					this.#r.value = n !== null, !e && n !== null ? this.#f(void 0, !1) : e && n === null && this.#p(void 0);
+					break;
+				}
 			}
 			super.attributeChangedCallback(e, t, n);
 		}
@@ -164,8 +179,30 @@ var r = class extends e {
 	set showRestart(e) {
 		this.#t.value = e, this.toggleAttribute("show-restart", e);
 	}
+	get autoFocusPolicy() {
+		return this.#n.value;
+	}
+	set autoFocusPolicy(e) {
+		this.#n.value = e, this.setAttribute("auto-focus-policy", e);
+	}
+	/** 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.#f(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.#p(e);
+	}
+	/** Focus the composer input. */
+	focusComposer(e, t = "api") {
+		this.#l(e ?? {}, t, 0);
+	}
 	setup() {
-		super.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");
@@ -173,11 +210,11 @@ var r = class extends e {
 		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.#a = r;
+		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.#s = 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.#n = o;
+		o.setAttribute("dividers", ""), this.#i = o;
 		let s = document.createElement("n-chat-input");
 		s.setAttribute("variant", "plain");
 		let c = document.createElement("n-textarea");
@@ -189,52 +226,138 @@ var r = class extends e {
 		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.classList.add("submit-btn"), 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 e = this.#e.value;
-			if (e && !this.#r) {
+			if (e && !this.#a) {
 				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.#s), this.#r = e, this.#a?.prepend(e);
-			} else !e && this.#r && (this.#r.removeEventListener("native:press", this.#s), this.#r.remove(), this.#r = 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.#h), this.#a = e, this.#s?.prepend(e);
+			} else !e && this.#a && (this.#a.removeEventListener("native:press", this.#h), this.#a.remove(), this.#a = null);
 		}), this.addEffect(() => {
 			let e = this.#t.value;
-			if (e && !this.#i) {
+			if (e && !this.#o) {
 				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.#c), this.#i = e;
-				let t = this.#r?.nextSibling ?? this.#a?.firstChild ?? null;
-				this.#a?.insertBefore(e, t);
-			} else !e && this.#i && (this.#i.removeEventListener("native:press", this.#c), this.#i.remove(), this.#i = 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.#g), this.#o = e;
+				let t = this.#a?.nextSibling ?? this.#s?.firstChild ?? null;
+				this.#s?.insertBefore(e, t);
+			} else !e && this.#o && (this.#o.removeEventListener("native:press", this.#g), this.#o.remove(), this.#o = null);
 		}), this.deferChildren(() => {
-			this.#o();
+			this.#c();
+		}), this.#n.value === "ready" && queueMicrotask(() => {
+			this.isConnected && this.focusComposer({ cursor: "end" }, "policy");
 		});
 	}
 	teardown() {
-		this.#r && this.#r.removeEventListener("native:press", this.#s), this.#i && this.#i.removeEventListener("native:press", this.#c), this.#n = null, this.#r = null, this.#i = null, this.#a = null, this.innerHTML = "", super.teardown();
+		this.#a && this.#a.removeEventListener("native:press", this.#h), this.#o && this.#o.removeEventListener("native:press", this.#g), this.#i = null, this.#a = null, this.#o = null, this.#s = null, this.innerHTML = "", super.teardown();
 	}
-	#o() {
+	#c() {
 		let e = this.querySelector(":scope > [slot=\"header-trailing\"]");
-		e && this.#a && this.#a.appendChild(e);
+		e && this.#s && this.#s.appendChild(e);
 		let t = this.querySelector(":scope > [slot=\"footer-leading\"]");
-		if (t && this.#n) {
-			let e = this.#n.querySelector(":scope > n-chat-input");
-			this.#n.insertBefore(t, e);
+		if (t && this.#i) {
+			let e = this.#i.querySelector(":scope > n-chat-input");
+			this.#i.insertBefore(t, e);
+		}
+	}
+	#l(e, t, n) {
+		let r = this.#u();
+		if (!r) {
+			if (n < 2) {
+				queueMicrotask(() => this.#l(e, t, n + 1));
+				return;
+			}
+			this.#m("composer-unavailable", 3);
+			return;
+		}
+		if (r.disabled) {
+			if (n < 2) {
+				queueMicrotask(() => this.#l(e, t, n + 1));
+				return;
+			}
+			this.#m("disabled", 3);
+			return;
 		}
+		let i = r.querySelector("n-textarea"), a = i ?? r;
+		try {
+			a.focus();
+		} catch {
+			if (n < 2) {
+				queueMicrotask(() => this.#l(e, t, n + 1));
+				return;
+			}
+			this.#m("blocked", 3);
+			return;
+		}
+		e.cursor && e.cursor !== "preserve" && i && this.#d(i, e.cursor), this.dispatchEvent(new CustomEvent("native:composer-focused", {
+			bubbles: !0,
+			composed: !0,
+			detail: { by: t }
+		}));
 	}
-	#s = () => {
+	#u() {
+		return this.querySelector("n-chat-input");
+	}
+	#d(e, t) {
+		let n = e.ownerDocument.getSelection?.();
+		if (!n) return;
+		let r = e.firstChild ?? e, i = t === "end" ? r.textContent?.length ?? 0 : 0;
+		try {
+			let e = document.createRange();
+			e.setStart(r, i), e.collapse(!0), n.removeAllRanges(), n.addRange(e);
+		} catch {}
+	}
+	#f(e, t) {
+		this.dispatchEvent(new CustomEvent("native:chat-opened", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				source: e,
+				focusComposer: t
+			}
+		}));
+	}
+	#p(e) {
+		this.dispatchEvent(new CustomEvent("native:chat-closed", {
+			bubbles: !0,
+			composed: !0,
+			detail: { reason: e }
+		}));
+	}
+	#m(e, t) {
+		this.dispatchEvent(new CustomEvent("native:composer-focus-failed", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				reason: e,
+				attempts: t
+			}
+		}));
+	}
+	#h = () => {
 		this.dispatchEvent(new CustomEvent("native:chat-stop", {
 			bubbles: !0,
 			composed: !0
 		}));
 	};
-	#c = () => {
+	#g = () => {
 		this.dispatchEvent(new CustomEvent("native:chat-restart", {
 			bubbles: !0,
 			composed: !0
 		}));
 	};
-}, a = 40, o = class extends e {
-	static observedAttributes = ["auto-scroll", "scrollable"];
+}, o = 40, s = class extends e {
+	static observedAttributes = [
+		"auto-scroll",
+		"scrollable",
+		"virtual",
+		"virtual-item-height",
+		"virtual-overscan"
+	];
 	#e;
-	#t = n(!0);
-	#n = n(!0);
+	#t = r(!0);
+	#n = r(!0);
 	#r = null;
+	#i = null;
+	#a = null;
+	#o = r([]);
+	#s = null;
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -248,20 +371,87 @@ var r = class extends e {
 			behavior: e ? "smooth" : "instant"
 		}), this.#n.value = !0;
 	}
+	/** Data items for virtual rendering. */
+	get items() {
+		return this.#o.value;
+	}
+	set items(e) {
+		this.#o.value = e, this.#i && this.#i.updateCount(e.length);
+	}
+	/** Callback that creates an HTMLElement from a data item. */
+	get itemRenderer() {
+		return this.#s;
+	}
+	set itemRenderer(e) {
+		this.#s = e;
+	}
 	attributeChangedCallback(e, t, n) {
-		t !== n && (e === "auto-scroll" && (this.#t.value = n !== null), super.attributeChangedCallback(e, t, n));
+		if (t !== n) {
+			switch (e) {
+				case "auto-scroll":
+					this.#t.value = n !== null;
+					break;
+				case "virtual":
+					n === null ? this.#l() : this.#c();
+					break;
+				case "virtual-item-height":
+					this.#i && n && (this.#i.itemHeight = Number(n) || 80);
+					break;
+				case "virtual-overscan":
+					this.#i && n && (this.#i.overscan = Number(n) || 5);
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
 	}
 	setup() {
-		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.#i, { passive: !0 }), this.#r = new MutationObserver(this.#a), this.#r.observe(this, {
+		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.#o);
+		}), this.addEventListener("native:message-action", this.#m), this.hasAttribute("virtual") && this.#c();
 	}
 	teardown() {
-		this.removeEventListener("scroll", this.#i), this.removeEventListener("native:message-action", this.#o), this.#r?.disconnect(), this.#r = null, super.teardown();
+		this.removeEventListener("scroll", this.#f), this.removeEventListener("native:message-action", this.#m), 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, {
+			itemHeight: e,
+			overscan: n
+		}), 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);
+	}
+	#l() {
+		if (this.#i && (this.removeEventListener("native:virtual-change", this.#u), this.#i.destroy(), this.#i = null, this.#a)) {
+			for (; this.#a.firstChild;) this.insertBefore(this.#a.firstChild, this.#a);
+			this.#a.remove(), this.#a = null;
+		}
+	}
+	#u = (e) => {
+		let { start: t, end: n, totalCount: r } = e.detail;
+		this.dispatchEvent(new CustomEvent("native:range-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				start: t,
+				end: n,
+				total: r
+			}
+		})), this.#s && this.#a && this.#d(t, n);
+	};
+	#d(e, t) {
+		if (!this.#a || !this.#s) return;
+		let n = this.#o.value, r = Array.from(this.#a.children);
+		for (let e of r) !e.classList.contains("n-virtual-spacer-top") && !e.classList.contains("n-virtual-spacer-bottom") && e.remove();
+		let i = this.#a.querySelector(".n-virtual-spacer-bottom");
+		for (let r = e; r < t && r < n.length; r++) {
+			let e = this.#s(n[r], r);
+			i ? this.#a.insertBefore(e, i) : this.#a.appendChild(e);
+		}
 	}
-	#i = () => {
-		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - a;
+	#f = () => {
+		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - o;
 		this.#n.value = t, t !== e && this.dispatchEvent(new CustomEvent("native:feed-scroll", {
 			bubbles: !0,
 			composed: !0,
@@ -271,7 +461,7 @@ var r = class extends e {
 			}
 		}));
 	};
-	#a = () => {
+	#p = () => {
 		this.#t.value && this.#n.value && requestAnimationFrame(() => {
 			this.scrollTo({
 				top: this.scrollHeight,
@@ -279,16 +469,16 @@ var r = class extends e {
 			});
 		});
 	};
-	#o = (e) => {};
-}, s = class extends e {
+	#m = (e) => {};
+}, c = class extends e {
 	static observedAttributes = [
 		"src",
 		"name",
 		"icon"
 	];
-	#e = n("");
-	#t = n("");
-	#n = n("");
+	#e = r("");
+	#t = r("");
+	#n = r("");
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
@@ -320,7 +510,7 @@ var r = class extends e {
 			}
 			if (n) {
 				let e = document.createElement("span");
-				e.className = "n-chat-avatar-initials", e.textContent = c(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
+				e.className = "n-chat-avatar-initials", e.textContent = l(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
 				return;
 			}
 			let r = document.createElement("n-icon");
@@ -331,10 +521,44 @@ var r = class extends e {
 		this.textContent = "", super.teardown();
 	}
 };
-function c(e) {
+function l(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 u = {
+	copy: {
+		label: "Copy",
+		icon: "copy"
+	},
+	retry: {
+		label: "Retry",
+		icon: "arrow-clockwise"
+	},
+	edit: {
+		label: "Edit",
+		icon: "pencil-simple"
+	},
+	"feedback-up": {
+		label: "Helpful",
+		icon: "thumbs-up"
+	},
+	"feedback-down": {
+		label: "Not helpful",
+		icon: "thumbs-down"
+	},
+	continue: {
+		label: "Continue",
+		icon: "arrow-right"
+	}
+}, d = {
+	assistant: [
+		"copy",
+		"retry",
+		"feedback-up",
+		"feedback-down"
+	],
+	user: ["edit", "retry"]
+};
 /**
 * Individual chat message bubble.
 *
@@ -344,20 +568,30 @@ function c(e) {
 * @attr {string} role - `user` | `assistant` | `system`
 * @attr {string} message-id - Unique message identifier
 * @attr {string} timestamp - Epoch milliseconds
-* @attr {string} status - `sending` | `sent` | `error` | `streaming`
+* @attr {string} status - `sending` | `sent` | `error` | `streaming` | `partial`
+* @attr {string} actions - Comma-separated action list, or `"none"` to suppress
+* @attr {string} actions-style - `"label"` (default) | `"icon"` | `"icon-label"`
+* @attr {string} actions-position - `"inside"` (default) | `"below"` — toolbar placement
 * @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 l = class extends e {
+var f = class extends e {
 	static observedAttributes = [
 		"role",
 		"message-id",
 		"timestamp",
-		"status"
+		"status",
+		"actions",
+		"actions-style",
+		"actions-position"
 	];
 	#e;
-	#t = n("assistant");
-	#n = n("sent");
-	#r = null;
+	#t = r("assistant");
+	#n = r("sent");
+	#r = r(null);
+	#i = r("label");
+	#a = r("inside");
+	#o = null;
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -379,6 +613,24 @@ var l = class extends e {
 	set status(e) {
 		this.#n.value = e, this.setAttribute("status", e);
 	}
+	get actions() {
+		return this.#r.value;
+	}
+	set actions(e) {
+		this.#r.value = e, e === null ? this.removeAttribute("actions") : this.setAttribute("actions", e);
+	}
+	get actionsStyle() {
+		return this.#i.value;
+	}
+	set actionsStyle(e) {
+		this.#i.value = e, this.setAttribute("actions-style", e);
+	}
+	get actionsPosition() {
+		return this.#a.value;
+	}
+	set actionsPosition(e) {
+		this.#a.value = e, this.setAttribute("actions-position", e);
+	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
@@ -388,39 +640,69 @@ var l = class extends e {
 				case "status":
 					this.#n.value = n ?? "sent";
 					break;
+				case "actions":
+					this.#r.value = n;
+					break;
+				case "actions-style":
+					this.#i.value = n ?? "label";
+					break;
+				case "actions-position":
+					this.#a.value = n ?? "inside";
+					break;
 			}
 			super.attributeChangedCallback(e, t, n);
 		}
 	}
 	setup() {
 		super.setup(), this.addEffect(() => {
-			let e = this.#t.value;
-			this.#i(e);
-		}), this.#e.role = "article", this.addEventListener("native:press", this.#a);
+			let e = this.#t.value, t = this.#r.value, n = this.#i.value, r = this.#a.value, i = this.#n.value;
+			this.#s(e, t, n, r, i);
+		}), this.#e.role = "article", this.addEventListener("native:press", this.#c);
 	}
 	teardown() {
-		this.removeEventListener("native:press", this.#a), this.#r = null, super.teardown();
-	}
-	#i(e) {
-		this.#r &&= (this.#r.remove(), null);
-		let t = document.createElement("n-toolbar");
-		t.className = "n-chat-message-actions", t.setAttribute("padding", "none"), t.setAttribute("aria-label", "Message actions"), e === "assistant" ? (t.appendChild(u("copy", "Copy")), t.appendChild(u("retry", "Retry")), t.appendChild(u("feedback-up", "Helpful")), t.appendChild(u("feedback-down", "Not helpful"))) : e === "user" && (t.appendChild(u("edit", "Edit")), t.appendChild(u("retry", "Resend"))), t.children.length > 0 && (this.appendChild(t), this.#r = t);
+		this.removeEventListener("native:press", this.#c), this.#o = null, super.teardown();
+	}
+	#s(e, t, n, r, i) {
+		if (this.#o &&= (this.#o.remove(), null), t === "none" || this.querySelector("[slot=\"actions\"]")) return;
+		let a;
+		if (a = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : d[e] ?? [], i === "partial" && !a.includes("continue") && (a = [...a, "continue"]), a.length === 0) return;
+		let o = document.createElement("n-toolbar");
+		o.className = "n-chat-message-actions", o.setAttribute("padding", "none"), o.setAttribute("aria-label", "Message actions"), n !== "label" && o.setAttribute("data-style", n);
+		for (let e of a) {
+			let t = u[e];
+			t && o.appendChild(p(e, t, n));
+		}
+		o.children.length !== 0 && (r === "below" ? this.after(o) : this.appendChild(o), this.#o = o);
 	}
-	#a = (e) => {
+	#c = (e) => {
 		let t = e.target, n = t?.getAttribute("data-action");
-		n && this.#r?.contains(t) && (e.stopPropagation(), this.dispatchEvent(new CustomEvent("native:message-action", {
-			bubbles: !0,
-			composed: !0,
-			detail: {
-				action: n,
-				messageId: this.messageId
+		if (n && this.#o?.contains(t)) {
+			if (e.stopPropagation(), n === "continue") {
+				this.dispatchEvent(new CustomEvent("native:continue-request", {
+					bubbles: !0,
+					composed: !0,
+					detail: { messageId: this.messageId }
+				}));
+				return;
 			}
-		})));
+			this.dispatchEvent(new CustomEvent("native:message-action", {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					action: n,
+					messageId: this.messageId
+				}
+			}));
+		}
 	};
 };
-function u(e, t) {
-	let n = document.createElement("n-button");
-	return n.setAttribute("variant", "ghost"), n.setAttribute("size", "sm"), n.setAttribute("inline", ""), n.setAttribute("data-action", e), n.setAttribute("aria-label", t), n.textContent = t, n;
+function p(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");
+		e.setAttribute("name", t.icon), e.setAttribute("slot", "leading"), r.appendChild(e);
+	}
+	return (n === "label" || n === "icon-label") && r.appendChild(document.createTextNode(t.label)), r;
 }
 /**
 * Message group — cluster of messages from the same sender.
@@ -439,9 +721,14 @@ function u(e, t) {
 *
 * @attr {string} role - `user` | `assistant` | `system`
 * @attr {string} sender - Display name of the sender
+* @attr {string} avatar-align - `"top"` (default) | `"center"` | `"bottom"` — avatar vertical alignment
 */
-var d = class extends e {
-	static observedAttributes = ["role", "sender"];
+var m = class extends e {
+	static observedAttributes = [
+		"role",
+		"sender",
+		"avatar-align"
+	];
 	#e;
 	constructor() {
 		super(), this.#e = this.attachInternals();
@@ -457,10 +744,10 @@ var d = class extends e {
 	teardown() {
 		super.teardown();
 	}
-}, f = class extends e {
+}, h = class extends e {
 	static observedAttributes = ["format"];
-	#e = n("markdown");
-	#t = n("");
+	#e = r("markdown");
+	#t = r("");
 	#n = null;
 	get content() {
 		return this.#t.value;
@@ -481,14 +768,14 @@ var d = 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 = g(e));
+				this.#n && (t === "plain" ? this.#n.textContent = e : this.#n.innerHTML = y(e));
 			});
 		});
 	}
 	teardown() {
 		this.#n = null, super.teardown();
 	}
-}, p = new Set([
+}, g = new Set([
 	"p",
 	"br",
 	"strong",
@@ -508,14 +795,14 @@ var d = class extends e {
 	"blockquote",
 	"hr"
 ]);
-function m(e) {
+function _(e) {
 	return e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
 }
-function h(e) {
-	let t = m(e);
+function v(e) {
+	let t = _(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 g(e) {
+function y(e) {
 	if (!e) return "";
 	let t = e.split("\n"), n = [], r = 0;
 	for (; r < t.length;) {
@@ -524,14 +811,14 @@ function g(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="${m(i)}"` : "";
-			n.push(`<pre${o}><code>${m(a.join("\n"))}</code></pre>`);
+			let o = i ? ` data-lang="${_(i)}"` : "";
+			n.push(`<pre${o}><code>${_(a.join("\n"))}</code></pre>`);
 			continue;
 		}
 		let i = e.match(/^(#{1,6})\s+(.+)/);
 		if (i) {
 			let e = i[1].length;
-			n.push(`<h${e}>${h(i[2])}</h${e}>`), r += 1;
+			n.push(`<h${e}>${v(i[2])}</h${e}>`), r += 1;
 			continue;
 		}
 		if (/^---+$/.test(e.trim()) || /^\*\*\*+$/.test(e.trim())) {
@@ -541,19 +828,19 @@ function g(e) {
 		if (e.startsWith("> ")) {
 			let e = [];
 			for (; r < t.length && t[r].startsWith("> ");) e.push(t[r].slice(2)), r += 1;
-			n.push(`<blockquote>${g(e.join("\n"))}</blockquote>`);
+			n.push(`<blockquote>${y(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>${h(e)}</li>`).join("") + "</ul>");
+			n.push("<ul>" + e.map((e) => `<li>${v(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>${h(e)}</li>`).join("") + "</ol>");
+			n.push("<ol>" + e.map((e) => `<li>${v(e)}</li>`).join("") + "</ol>");
 			continue;
 		}
 		if (!e.trim()) {
@@ -562,15 +849,15 @@ function g(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>${h(a.join("\n"))}</p>`);
+		a.length > 0 && n.push(`<p>${v(a.join("\n"))}</p>`);
 	}
 	return n.join("");
 }
 /** Sanitize rendered HTML — strip any tags not in allowlist. */
-function _(e) {
+function b(e) {
 	return e.replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g, (e, t) => {
 		let n = t.toLowerCase();
-		return p.has(n) ? e : "";
+		return g.has(n) ? e : "";
 	});
 }
 /**
@@ -591,7 +878,7 @@ function _(e) {
 * @attr {boolean} expandable - Allow click to expand trace content
 * @fires native:activity-toggle - Fired when trace is expanded/collapsed
 */
-var v = class extends e {
+var x = class extends e {
 	static observedAttributes = [
 		"type",
 		"label",
@@ -599,11 +886,11 @@ var v = class extends e {
 		"expandable"
 	];
 	#e;
-	#t = n("typing");
-	#n = n("");
-	#r = n(!1);
-	#i = n(!1);
-	#a = n(!1);
+	#t = r("typing");
+	#n = r("");
+	#r = r(!1);
+	#i = r(!1);
+	#a = r(!1);
 	#o = 0;
 	#s = 0;
 	#c = null;
@@ -649,7 +936,7 @@ var v = 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 || y(this.#t.value);
+			let e = this.#n.value || S(this.#t.value);
 			this.#c.textContent = e;
 		}), this.addEffect(() => {
 			this.#u && (this.#u.hidden = !this.#r.value);
@@ -679,7 +966,7 @@ var v = class extends e {
 	#h = () => {
 		if (!this.#r.value || !this.#l) return;
 		let e = performance.now() - this.#o;
-		this.#l.textContent = b(e), this.#s = requestAnimationFrame(this.#h);
+		this.#l.textContent = C(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", {
@@ -689,14 +976,14 @@ var v = class extends e {
 		})));
 	};
 };
-function y(e) {
+function S(e) {
 	switch (e) {
 		case "thinking": return "Thinking…";
 		case "tool-use": return "Using tools…";
 		default: return "Host is typing…";
 	}
 }
-function b(e) {
+function C(e) {
 	let t = Math.floor(e / 1e3);
 	if (t < 60) return `${t}s`;
 	let n = Math.floor(t / 60), r = t % 60;
@@ -716,11 +1003,11 @@ function b(e) {
 * @attr {boolean} disabled - Disables all chips
 * @fires native:seed-select - Fired when a chip is clicked
 */
-var x = class extends e {
+var w = class extends e {
 	static observedAttributes = ["options", "disabled"];
 	#e;
-	#t = n([]);
-	#n = n(!1);
+	#t = r([]);
+	#n = r(!1);
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -754,7 +1041,7 @@ var x = class extends e {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(t(this, this.#n, this.#e)), this.addEffect(() => {
+		super.setup(), this.addEffect(n(this, this.#n, this.#e)), this.addEffect(() => {
 			let e = this.#t.value;
 			this.textContent = "";
 			for (let t of e) {
@@ -785,7 +1072,7 @@ var x = class extends e {
 			}
 		}));
 	};
-}, S = new Set([
+}, T = new Set([
 	"script",
 	"style",
 	"link",
@@ -802,12 +1089,12 @@ var x = class extends e {
 	"frame",
 	"frameset",
 	"noscript"
-]), C = class extends e {
+]), E = class extends e {
 	static observedAttributes = ["schema-type", "mode"];
 	#e;
-	#t = n("a2ui");
-	#n = n("inline");
-	#r = n(null);
+	#t = r("a2ui");
+	#n = r("inline");
+	#r = r(null);
 	#i = null;
 	constructor() {
 		super(), this.#e = this.attachInternals();
@@ -847,7 +1134,7 @@ var x = 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 = w(e);
+			let n = D(e);
 			if (n.length > 0) {
 				this.#a(n), this.dispatchEvent(new CustomEvent("native:genui-error", {
 					bubbles: !0,
@@ -858,7 +1145,7 @@ var x = class extends e {
 			}
 			if (t === "lightbox") this.#o(e);
 			else {
-				let t = T(e);
+				let t = O(e);
 				t && this.#i.appendChild(t);
 			}
 			this.#e.states.add("rendered");
@@ -882,7 +1169,7 @@ var x = 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 = T(e);
+		let t = document.createElement("n-dialog"), n = O(e);
 		n && t.appendChild(n), this.appendChild(t), requestAnimationFrame(() => {
 			let e = t.querySelector("dialog");
 			e && e.showModal();
@@ -902,20 +1189,20 @@ var x = class extends e {
 		}));
 	};
 };
-function w(e, t = 0) {
+function D(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 (S.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...w(r, t + 1));
+	if (T.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...D(r, t + 1));
 	return n;
 }
-function T(e) {
-	if (S.has(e.tag.toLowerCase())) return null;
+function O(e) {
+	if (T.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 = T(n);
+		let e = O(n);
 		e && t.appendChild(e);
 	}
 	return t;
@@ -940,7 +1227,7 @@ function T(e) {
 * @fires native:structured-submit - Fired on submit with selections
 * @fires native:structured-cancel - Fired when dismissed without selecting
 */
-var E = class extends e {
+var k = class extends e {
 	static observedAttributes = [
 		"question",
 		"type",
@@ -949,12 +1236,12 @@ var E = class extends e {
 		"disabled"
 	];
 	#e;
-	#t = n("");
-	#n = n("single");
-	#r = n([]);
-	#i = n(!1);
-	#a = n(!1);
-	#o = n(/* @__PURE__ */ new Set());
+	#t = r("");
+	#n = r("single");
+	#r = r([]);
+	#i = r(!1);
+	#a = r(!1);
+	#o = r(/* @__PURE__ */ new Set());
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -1007,7 +1294,7 @@ var E = class extends e {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(t(this, this.#a, this.#e)), this.addEffect(() => {
+		super.setup(), this.addEffect(n(this, this.#a, this.#e)), this.addEffect(() => {
 			this.#s();
 		}), this.addEventListener("native:press", this.#c);
 	}
@@ -1066,4 +1353,4 @@ var E = class extends e {
 		}));
 	};
 };
-export { f as a, _ as c, s as d, o as f, v as i, d as l, r as m, C as n, h as o, i as p, x as r, g as s, E as t, l as u };
+export { h as a, b as c, f as d, d as f, i as g, a as h, x as i, m as l, s as m, E as n, v as o, c as p, w as r, y as s, k as t, u };