@nonoun/native-chat 0.1.3 → 0.3.0

package/dist/chat-input-structured-element-Cpar3CeA.js

@@ -0,0 +1,1069 @@
+import { NativeElement as e, createDisabledEffect as t, signal as n } from "@nonoun/native-ui";
+/**
+* Chat message input with textarea, submit button, and Enter-to-send behavior.
+* @attr {boolean} disabled - Disables interaction
+* @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
+* @fires native:send - Fired on submit with `{ value }` detail
+* @fires native:composer-submit-blocked - Fired when submit is attempted while busy
+* @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 {
+	static observedAttributes = ["disabled", "busy"];
+	#e;
+	#t = n(!1);
+	#n = n(!1);
+	#r = null;
+	#i = null;
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get value() {
+		return this.#r?.value ?? "";
+	}
+	set value(e) {
+		this.#r && (this.#r.value = e);
+	}
+	get disabled() {
+		return this.#t.value;
+	}
+	set disabled(e) {
+		this.#t.value = e, this.toggleAttribute("disabled", e);
+	}
+	get busy() {
+		return this.#n.value;
+	}
+	set busy(e) {
+		this.#n.value = e, this.toggleAttribute("busy", e);
+	}
+	/** Focus the composer textarea. */
+	focusComposer() {
+		this.querySelector("n-textarea")?.focus();
+	}
+	/** Blur the composer textarea. */
+	blurComposer() {
+		this.querySelector("n-textarea")?.blur();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "disabled":
+					this.#t.value = n !== null;
+					break;
+				case "busy":
+					this.#n.value = n !== null;
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	setup() {
+		super.setup(), this.addEffect(t(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());
+			}), this.addEffect(() => {
+				let e = this.#n.value;
+				this.#i && (this.#t.value || (e ? this.#i.setAttribute("disabled", "") : this.#s()));
+			});
+		}), this.addEventListener("native:input", this.#c), this.addEventListener("native:press", this.#l), this.addEventListener("keydown", this.#f), this.addEventListener("focusin", this.#u), this.addEventListener("focusout", this.#d);
+	}
+	teardown() {
+		this.removeEventListener("native:input", this.#c), this.removeEventListener("native:press", this.#l), this.removeEventListener("keydown", this.#f), this.removeEventListener("focusin", this.#u), this.removeEventListener("focusout", this.#d), this.#r = null, this.#i = null, super.teardown();
+	}
+	#a() {
+		this.#r = this.querySelector(":scope > n-textarea"), this.#i = this.querySelector("[data-submit]") ?? this.#o();
+	}
+	#o() {
+		let e = this.querySelector(":scope > n-chat-input-actions");
+		if (!e) return null;
+		let t = e.querySelectorAll("n-button[variant=\"primary\"]");
+		return t.length ? t[t.length - 1] : null;
+	}
+	#s() {
+		!this.#i || this.#t.value || (!this.value.trim() || this.#n.value ? this.#i.setAttribute("disabled", "") : this.#i.removeAttribute("disabled"));
+	}
+	#c = (e) => {
+		this.#t.value || this.#s();
+	};
+	#l = (e) => {
+		this.#t.value || e.target === this.#i && this.#p();
+	};
+	#u = (e) => {
+		let t = e.target;
+		!this.#r?.contains(t) && t !== this.#r || this.dispatchEvent(new CustomEvent("native:composer-focus", {
+			bubbles: !0,
+			composed: !0
+		}));
+	};
+	#d = (e) => {
+		let t = e.target;
+		!this.#r?.contains(t) && t !== this.#r || this.dispatchEvent(new CustomEvent("native:composer-blur", {
+			bubbles: !0,
+			composed: !0
+		}));
+	};
+	#f = (e) => {
+		if (this.#t.value || this.hasAttribute("no-enter-submit")) return;
+		let t = e;
+		if (t.isComposing) return;
+		let n = t.target;
+		!this.#r?.contains(n) && n !== this.#r || t.key === "Enter" && !t.shiftKey && !t.ctrlKey && !t.metaKey && (t.preventDefault(), this.value.trim() && this.#p());
+	};
+	#p() {
+		let e = this.value.trim();
+		if (e) {
+			if (this.#n.value) {
+				this.dispatchEvent(new CustomEvent("native:composer-submit-blocked", {
+					bubbles: !0,
+					composed: !0,
+					detail: { value: e }
+				}));
+				return;
+			}
+			this.dispatchEvent(new CustomEvent("native:send", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: { value: 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;
+	#i = null;
+	#a = null;
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "show-stop":
+					this.#e.value = n !== null;
+					break;
+				case "show-restart":
+					this.#t.value = n !== null;
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	get showStop() {
+		return this.#e.value;
+	}
+	set showStop(e) {
+		this.#e.value = e, this.toggleAttribute("show-stop", e);
+	}
+	get showRestart() {
+		return this.#t.value;
+	}
+	set showRestart(e) {
+		this.#t.value = e, this.toggleAttribute("show-restart", e);
+	}
+	setup() {
+		super.setup();
+		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.#a = 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;
+		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.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) {
+				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);
+		}), this.addEffect(() => {
+			let e = this.#t.value;
+			if (e && !this.#i) {
+				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);
+		}), this.deferChildren(() => {
+			this.#o();
+		});
+	}
+	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();
+	}
+	#o() {
+		let e = this.querySelector(":scope > [slot=\"header-trailing\"]");
+		e && this.#a && this.#a.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);
+		}
+	}
+	#s = () => {
+		this.dispatchEvent(new CustomEvent("native:chat-stop", {
+			bubbles: !0,
+			composed: !0
+		}));
+	};
+	#c = () => {
+		this.dispatchEvent(new CustomEvent("native:chat-restart", {
+			bubbles: !0,
+			composed: !0
+		}));
+	};
+}, a = 40, o = class extends e {
+	static observedAttributes = ["auto-scroll", "scrollable"];
+	#e;
+	#t = n(!0);
+	#n = n(!0);
+	#r = null;
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get isPinned() {
+		return this.#n.value;
+	}
+	/** Scroll to the bottom of the feed. */
+	scrollToBottom(e = !0) {
+		this.scrollTo({
+			top: this.scrollHeight,
+			behavior: e ? "smooth" : "instant"
+		}), this.#n.value = !0;
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && (e === "auto-scroll" && (this.#t.value = n !== null), 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, {
+			childList: !0,
+			subtree: !0
+		}), this.addEventListener("native:message-action", this.#o);
+	}
+	teardown() {
+		this.removeEventListener("scroll", this.#i), this.removeEventListener("native:message-action", this.#o), this.#r?.disconnect(), this.#r = null, super.teardown();
+	}
+	#i = () => {
+		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - a;
+		this.#n.value = t, t !== e && this.dispatchEvent(new CustomEvent("native:feed-scroll", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				isPinned: t,
+				scrollTop: this.scrollTop
+			}
+		}));
+	};
+	#a = () => {
+		this.#t.value && this.#n.value && requestAnimationFrame(() => {
+			this.scrollTo({
+				top: this.scrollHeight,
+				behavior: "smooth"
+			});
+		});
+	};
+	#o = (e) => {};
+}, s = class extends e {
+	static observedAttributes = [
+		"src",
+		"name",
+		"icon"
+	];
+	#e = n("");
+	#t = n("");
+	#n = n("");
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "src":
+					this.#e.value = n ?? "";
+					break;
+				case "name":
+					this.#t.value = n ?? "";
+					break;
+				case "icon":
+					this.#n.value = n ?? "";
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	setup() {
+		super.setup(), this.addEffect(() => {
+			let e = this.#e.value, t = this.#n.value, n = this.#t.value;
+			if (this.textContent = "", e) {
+				let t = document.createElement("img");
+				t.src = e, t.alt = n || "", t.loading = "lazy", t.draggable = !1, this.appendChild(t);
+				return;
+			}
+			if (t) {
+				let e = document.createElement("n-icon");
+				e.setAttribute("name", t), this.appendChild(e);
+				return;
+			}
+			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);
+				return;
+			}
+			let r = document.createElement("n-icon");
+			r.setAttribute("name", "user"), this.appendChild(r);
+		});
+	}
+	teardown() {
+		this.textContent = "", super.teardown();
+	}
+};
+function c(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();
+}
+/**
+* Individual chat message bubble.
+*
+* Accepts slotted content: `n-chat-message-text`, `n-chat-message-genui`,
+* `n-chat-message-seed`, or any custom content.
+*
+* @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`
+* @fires native:message-action - Fired when an action button is clicked
+*/
+var l = class extends e {
+	static observedAttributes = [
+		"role",
+		"message-id",
+		"timestamp",
+		"status"
+	];
+	#e;
+	#t = n("assistant");
+	#n = n("sent");
+	#r = null;
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get role() {
+		return this.#t.value;
+	}
+	set role(e) {
+		this.#t.value = e, this.setAttribute("role", e);
+	}
+	get messageId() {
+		return this.getAttribute("message-id") ?? "";
+	}
+	get timestamp() {
+		return Number(this.getAttribute("timestamp")) || 0;
+	}
+	get status() {
+		return this.#n.value;
+	}
+	set status(e) {
+		this.#n.value = e, this.setAttribute("status", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "role":
+					this.#t.value = n ?? "assistant";
+					break;
+				case "status":
+					this.#n.value = n ?? "sent";
+					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);
+	}
+	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);
+	}
+	#a = (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
+			}
+		})));
+	};
+};
+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;
+}
+/**
+* Message group — cluster of messages from the same sender.
+*
+* Provides alignment (user = right, assistant/system = left) and
+* groups an avatar + message column.
+*
+* ```html
+* <n-chat-messages role="user" sender="Kim">
+*   <n-chat-avatar name="Kim"></n-chat-avatar>
+*   <n-chat-message role="user" message-id="1">
+*     <n-chat-message-text>Hello!</n-chat-message-text>
+*   </n-chat-message>
+* </n-chat-messages>
+* ```
+*
+* @attr {string} role - `user` | `assistant` | `system`
+* @attr {string} sender - Display name of the sender
+*/
+var d = class extends e {
+	static observedAttributes = ["role", "sender"];
+	#e;
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && super.attributeChangedCallback(e, t, n);
+	}
+	setup() {
+		super.setup(), this.#e.role = "group";
+		let e = this.getAttribute("sender");
+		e && (this.#e.ariaLabel = `Messages from ${e}`);
+	}
+	teardown() {
+		super.teardown();
+	}
+}, f = class extends e {
+	static observedAttributes = ["format"];
+	#e = n("markdown");
+	#t = n("");
+	#n = null;
+	get content() {
+		return this.#t.value;
+	}
+	set content(e) {
+		this.#t.value = e;
+	}
+	get format() {
+		return this.#e.value;
+	}
+	set format(e) {
+		this.#e.value = e, this.setAttribute("format", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && (e === "format" && (this.#e.value = n === "plain" ? "plain" : "markdown"), super.attributeChangedCallback(e, t, n));
+	}
+	setup() {
+		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));
+			});
+		});
+	}
+	teardown() {
+		this.#n = null, super.teardown();
+	}
+}, p = new Set([
+	"p",
+	"br",
+	"strong",
+	"em",
+	"code",
+	"pre",
+	"a",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"ul",
+	"ol",
+	"li",
+	"blockquote",
+	"hr"
+]);
+function m(e) {
+	return e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
+}
+function h(e) {
+	let t = m(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) {
+	if (!e) return "";
+	let t = e.split("\n"), n = [], r = 0;
+	for (; r < t.length;) {
+		let e = t[r];
+		if (e.startsWith("```")) {
+			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>`);
+			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;
+			continue;
+		}
+		if (/^---+$/.test(e.trim()) || /^\*\*\*+$/.test(e.trim())) {
+			n.push("<hr>"), r += 1;
+			continue;
+		}
+		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>`);
+			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>");
+			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>");
+			continue;
+		}
+		if (!e.trim()) {
+			r += 1;
+			continue;
+		}
+		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>`);
+	}
+	return n.join("");
+}
+/** Sanitize rendered HTML — strip any tags not in allowlist. */
+function _(e) {
+	return e.replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g, (e, t) => {
+		let n = t.toLowerCase();
+		return p.has(n) ? e : "";
+	});
+}
+/**
+* Streaming activity indicator — typing, thinking, or tool-use status.
+*
+* When `active`, shows an animated indicator with elapsed time.
+* When `expandable`, clicking toggles visibility of slotted trace content.
+*
+* ```html
+* <n-chat-message-activity type="thinking" active>
+*   <pre>Reasoning trace here...</pre>
+* </n-chat-message-activity>
+* ```
+*
+* @attr {string} type - `typing` | `thinking` | `tool-use`
+* @attr {string} label - Custom label text (overrides default per-type label)
+* @attr {boolean} active - Currently streaming / in progress
+* @attr {boolean} expandable - Allow click to expand trace content
+* @fires native:activity-toggle - Fired when trace is expanded/collapsed
+*/
+var v = class extends e {
+	static observedAttributes = [
+		"type",
+		"label",
+		"active",
+		"expandable"
+	];
+	#e;
+	#t = n("typing");
+	#n = n("");
+	#r = n(!1);
+	#i = n(!1);
+	#a = n(!1);
+	#o = 0;
+	#s = 0;
+	#c = null;
+	#l = null;
+	#u = null;
+	#d = null;
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get active() {
+		return this.#r.value;
+	}
+	set active(e) {
+		this.#r.value = e, this.toggleAttribute("active", e);
+	}
+	get expanded() {
+		return this.#a.value;
+	}
+	set expanded(e) {
+		this.#a.value = e, this.toggleAttribute("expanded", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "type":
+					this.#t.value = n ?? "typing";
+					break;
+				case "label":
+					this.#n.value = n ?? "";
+					break;
+				case "active":
+					this.#r.value = n !== null;
+					break;
+				case "expandable":
+					this.#i.value = n !== null;
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	setup() {
+		super.setup(), this.#f(), this.addEffect(() => {
+			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);
+			this.#c.textContent = e;
+		}), this.addEffect(() => {
+			this.#u && (this.#u.hidden = !this.#r.value);
+		}), this.addEffect(() => {
+			if (!this.#d) return;
+			let e = this.#a.value && this.#i.value;
+			this.#d.hidden = !e, this.#e.states[e ? "add" : "delete"]("expanded");
+		}), this.addEventListener("click", this.#g);
+	}
+	teardown() {
+		this.#m(), this.removeEventListener("click", this.#g), this.#c = null, this.#l = null, this.#u = null, this.#d = null, super.teardown();
+	}
+	#f() {
+		let e = document.createDocumentFragment();
+		for (; this.firstChild;) e.appendChild(this.firstChild);
+		let t = document.createElement("div");
+		t.className = "n-chat-activity-row", this.#l = document.createElement("span"), this.#l.className = "n-chat-activity-time", this.#l.textContent = "0s";
+		let n = document.createElement("span");
+		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();
+	}
+	#m() {
+		this.#s &&= (cancelAnimationFrame(this.#s), 0);
+	}
+	#h = () => {
+		if (!this.#r.value || !this.#l) return;
+		let e = performance.now() - this.#o;
+		this.#l.textContent = b(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", {
+			bubbles: !0,
+			composed: !0,
+			detail: { expanded: this.#a.value }
+		})));
+	};
+};
+function y(e) {
+	switch (e) {
+		case "thinking": return "Thinking…";
+		case "tool-use": return "Using tools…";
+		default: return "Host is typing…";
+	}
+}
+function b(e) {
+	let t = Math.floor(e / 1e3);
+	if (t < 60) return `${t}s`;
+	let n = Math.floor(t / 60), r = t % 60;
+	return `${n}m:${String(r).padStart(2, "0")}s`;
+}
+/**
+* Suggestion chips — pre-seeded quick responses.
+*
+* Options can be provided as JSON attribute or via the `options` property.
+*
+* ```html
+* <n-chat-message-seed options='[{"value":"yes","label":"Yes"},{"value":"no","label":"No"}]'>
+* </n-chat-message-seed>
+* ```
+*
+* @attr {string} options - JSON array of `{ value, label, icon? }`
+* @attr {boolean} disabled - Disables all chips
+* @fires native:seed-select - Fired when a chip is clicked
+*/
+var x = class extends e {
+	static observedAttributes = ["options", "disabled"];
+	#e;
+	#t = n([]);
+	#n = n(!1);
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get options() {
+		return this.#t.value;
+	}
+	set options(e) {
+		this.#t.value = e, this.setAttribute("options", JSON.stringify(e));
+	}
+	get disabled() {
+		return this.#n.value;
+	}
+	set disabled(e) {
+		this.#n.value = e, this.toggleAttribute("disabled", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "options":
+					try {
+						this.#t.value = n ? JSON.parse(n) : [];
+					} catch {
+						this.#t.value = [];
+					}
+					break;
+				case "disabled":
+					this.#n.value = n !== null;
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	setup() {
+		super.setup(), this.addEffect(t(this, this.#n, this.#e)), this.addEffect(() => {
+			let e = this.#t.value;
+			this.textContent = "";
+			for (let t of e) {
+				let e = document.createElement("n-button");
+				if (e.setAttribute("variant", "outline"), e.setAttribute("size", "sm"), e.setAttribute("inline", ""), e.setAttribute("data-value", t.value), t.icon) {
+					let n = document.createElement("n-icon");
+					n.setAttribute("name", t.icon), n.setAttribute("slot", "leading"), e.appendChild(n);
+				}
+				let n = document.createElement("span");
+				n.setAttribute("slot", "label"), n.textContent = t.label, e.appendChild(n), this.appendChild(e);
+			}
+		}), this.addEventListener("native:press", this.#r);
+	}
+	teardown() {
+		this.removeEventListener("native:press", this.#r), super.teardown();
+	}
+	#r = (e) => {
+		if (this.#n.value) return;
+		let t = e.target?.getAttribute("data-value");
+		if (!t) return;
+		let n = this.#t.value.find((e) => e.value === t);
+		n && this.dispatchEvent(new CustomEvent("native:seed-select", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				value: n.value,
+				label: n.label
+			}
+		}));
+	};
+}, S = new Set([
+	"script",
+	"style",
+	"link",
+	"iframe",
+	"embed",
+	"object",
+	"form",
+	"input",
+	"textarea",
+	"select",
+	"meta",
+	"base",
+	"applet",
+	"frame",
+	"frameset",
+	"noscript"
+]), C = class extends e {
+	static observedAttributes = ["schema-type", "mode"];
+	#e;
+	#t = n("a2ui");
+	#n = n("inline");
+	#r = n(null);
+	#i = null;
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get schema() {
+		return this.#r.value;
+	}
+	set schema(e) {
+		this.#r.value = e;
+	}
+	get schemaType() {
+		return this.#t.value;
+	}
+	set schemaType(e) {
+		this.#t.value = e, this.setAttribute("schema-type", e);
+	}
+	get mode() {
+		return this.#n.value;
+	}
+	set mode(e) {
+		this.#n.value = e, this.setAttribute("mode", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "schema-type":
+					this.#t.value = n ?? "a2ui";
+					break;
+				case "mode":
+					this.#n.value = n === "lightbox" ? "lightbox" : "inline";
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	setup() {
+		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);
+			if (n.length > 0) {
+				this.#a(n), this.dispatchEvent(new CustomEvent("native:genui-error", {
+					bubbles: !0,
+					composed: !0,
+					detail: { errors: n }
+				}));
+				return;
+			}
+			if (t === "lightbox") this.#o(e);
+			else {
+				let t = T(e);
+				t && this.#i.appendChild(t);
+			}
+			this.#e.states.add("rendered");
+		}), this.addEventListener("native:press", this.#c);
+	}
+	teardown() {
+		this.removeEventListener("native:press", this.#c), this.#i = null, super.teardown();
+	}
+	#a(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) {
+		if (!this.#i) return;
+		let t = document.createElement("n-card");
+		t.className = "n-chat-genui-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);
+	}
+	#s(e) {
+		let t = document.createElement("n-dialog"), n = T(e);
+		n && t.appendChild(n), this.appendChild(t), requestAnimationFrame(() => {
+			let e = t.querySelector("dialog");
+			e && e.showModal();
+		}), t.addEventListener("close", () => {
+			t.remove();
+		});
+	}
+	#c = (e) => {
+		this.#i?.contains(e.target) && this.dispatchEvent(new CustomEvent("native:genui-action", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				schemaType: this.#t.value,
+				action: "press",
+				data: e.detail
+			}
+		}));
+	};
+};
+function w(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));
+	return n;
+}
+function T(e) {
+	if (S.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);
+		e && t.appendChild(e);
+	}
+	return t;
+}
+/**
+* Structured multi-choice input — appears before submission for
+* guided input (like modern Claude chat's multiple-choice UI).
+*
+* ```html
+* <n-chat-input-structured
+*   question="What would you like to do?"
+*   type="single"
+*   options='[{"value":"a","label":"Option A"},{"value":"b","label":"Option B"}]'>
+* </n-chat-input-structured>
+* ```
+*
+* @attr {string} question - Prompt text
+* @attr {string} type - `single` (default) | `multi`
+* @attr {string} options - JSON array of `{ value, label, description?, icon? }`
+* @attr {boolean} required - At least one selection required before submit
+* @attr {boolean} disabled - Disables interaction
+* @fires native:structured-submit - Fired on submit with selections
+* @fires native:structured-cancel - Fired when dismissed without selecting
+*/
+var E = class extends e {
+	static observedAttributes = [
+		"question",
+		"type",
+		"options",
+		"required",
+		"disabled"
+	];
+	#e;
+	#t = n("");
+	#n = n("single");
+	#r = n([]);
+	#i = n(!1);
+	#a = n(!1);
+	#o = n(/* @__PURE__ */ new Set());
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get question() {
+		return this.#t.value;
+	}
+	set question(e) {
+		this.#t.value = e, this.setAttribute("question", e);
+	}
+	get options() {
+		return this.#r.value;
+	}
+	set options(e) {
+		this.#r.value = e, this.setAttribute("options", JSON.stringify(e));
+	}
+	get selections() {
+		let e = this.#o.value;
+		return this.#r.value.filter((t) => e.has(t.value));
+	}
+	get disabled() {
+		return this.#a.value;
+	}
+	set disabled(e) {
+		this.#a.value = e, this.toggleAttribute("disabled", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "question":
+					this.#t.value = n ?? "";
+					break;
+				case "type":
+					this.#n.value = n === "multi" ? "multi" : "single";
+					break;
+				case "options":
+					try {
+						this.#r.value = n ? JSON.parse(n) : [];
+					} catch {
+						this.#r.value = [];
+					}
+					break;
+				case "required":
+					this.#i.value = n !== null;
+					break;
+				case "disabled":
+					this.#a.value = n !== null;
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	setup() {
+		super.setup(), this.addEffect(t(this, this.#a, this.#e)), this.addEffect(() => {
+			this.#s();
+		}), 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 t = document.createElement("div");
+			t.className = "n-chat-structured-question", t.textContent = e, this.appendChild(t);
+		}
+		let i = document.createElement("div");
+		i.className = "n-chat-structured-options", 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) {
+				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);
+		}
+		this.appendChild(i);
+		let a = document.createElement("div");
+		a.className = "n-chat-structured-actions";
+		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);
+	}
+	#c = (e) => {
+		if (this.#a.value) return;
+		let t = e.target, n = t?.getAttribute("data-value");
+		if (n) {
+			let e = new Set(this.#o.value);
+			this.#n.value === "single" ? (e.clear(), e.add(n)) : e.has(n) ? e.delete(n) : e.add(n), this.#o.value = e;
+			return;
+		}
+		let r = t?.getAttribute("data-action");
+		if (r === "submit") {
+			this.dispatchEvent(new CustomEvent("native:structured-submit", {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					question: this.#t.value,
+					selections: this.selections
+				}
+			}));
+			return;
+		}
+		r === "cancel" && this.dispatchEvent(new CustomEvent("native:structured-cancel", {
+			bubbles: !0,
+			composed: !0,
+			detail: {}
+		}));
+	};
+};
+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 };