@smooai/chat-widget 0.3.0

package/dist/index.js

@@ -0,0 +1,1296 @@
+import { ProtocolError, SmoothAgentClient } from "@smooai/smooth-operator";
+//#region src/config.ts
+/** Resolve a partial config against the built-in defaults. */
+function resolveConfig(config) {
+	const theme = config.theme ?? {};
+	const primary = theme.primary ?? "#00a6a6";
+	const primaryText = theme.primaryText ?? "#f8fafc";
+	const assistantBubble = theme.chatBubbleInbound ?? theme.assistantBubble ?? "#06134b";
+	const assistantBubbleText = theme.chatBubbleInboundText ?? theme.assistantBubbleText ?? "#f8fafc";
+	const userBubble = theme.chatBubbleOutbound ?? theme.userBubble ?? primary;
+	const userBubbleText = theme.chatBubbleOutboundText ?? theme.userBubbleText ?? primaryText;
+	return {
+		endpoint: config.endpoint,
+		mode: config.mode ?? "popover",
+		agentId: config.agentId,
+		agentName: config.agentName ?? "Assistant",
+		userName: config.userName,
+		userEmail: config.userEmail,
+		userPhone: config.userPhone,
+		placeholder: config.placeholder ?? "Type a message…",
+		greeting: config.greeting ?? "Hi! How can I help you today?",
+		connectionErrorMessage: config.connectionErrorMessage ?? "We couldn't reach the chat. Please try again in a moment.",
+		startOpen: config.startOpen ?? false,
+		examplePrompts: (config.examplePrompts ?? []).filter((p) => p.trim().length > 0).slice(0, 5),
+		requireName: config.requireName ?? false,
+		requireEmail: config.requireEmail ?? false,
+		requirePhone: config.requirePhone ?? false,
+		allowAnonymous: config.allowAnonymous ?? false,
+		theme: {
+			text: theme.text ?? "#f8fafc",
+			background: theme.background ?? "#040d30",
+			primary,
+			primaryText,
+			secondary: theme.secondary ?? "#ff6b6c",
+			assistantBubble,
+			assistantBubbleText,
+			userBubble,
+			userBubbleText,
+			border: theme.border ?? "rgba(255, 255, 255, 0.1)"
+		}
+	};
+}
+/**
+* Whether the pre-chat identity form should gate the conversation: at least one
+* field is required and anonymous chat is not allowed.
+*/
+function needsUserInfo(resolved) {
+	return !resolved.allowAnonymous && (resolved.requireName || resolved.requireEmail || resolved.requirePhone);
+}
+//#endregion
+//#region src/conversation.ts
+/**
+* ConversationController — the bridge between the widget UI and the
+* `@smooai/smooth-operator` protocol client.
+*
+* This is the piece that was rewired: the original smooai widget spoke to
+* `@smooai/realtime`; here every protocol action goes through {@link SmoothAgentClient}.
+* The wire shapes are identical (the protocol was lifted from `@smooai/realtime`),
+* so the swap is purely at the client-library boundary.
+*
+* Flow:
+*   1. `connect()`        → opens the WebSocket transport and `create_conversation_session`.
+*   2. `send(text)`       → `send_message`, streaming `stream_token` deltas into the
+*                           in-progress assistant message, then the terminal
+*                           `eventual_response`.
+*
+* The controller is UI-agnostic: it emits typed events and the view renders them.
+*/
+/** Pull the final assistant text out of an `eventual_response` data payload. */
+function extractFinalText(response) {
+	if (!response || typeof response !== "object") return null;
+	const r = response;
+	if (Array.isArray(r.responseParts)) return r.responseParts.filter((p) => typeof p === "string").join("\n\n");
+	return null;
+}
+/**
+* Pull the grounding {@link Citation}s out of a terminal `eventual_response`.
+*
+* The protocol client types these (`eventual_response.data.data.citations`),
+* but they're optional and back-compatible — absent when the turn used no
+* knowledge sources. We read them defensively (tolerating their total absence,
+* non-array shapes, and missing fields) so a server that doesn't emit them, or
+* an older client, can't break rendering. Each citation always carries
+* `id`/`title`/`snippet`/`score`; `url` is present only for web-sourced docs.
+*/
+function extractCitations(inner) {
+	if (!inner || typeof inner !== "object") return [];
+	const raw = inner.citations;
+	if (!Array.isArray(raw)) return [];
+	const out = [];
+	for (const c of raw) {
+		if (!c || typeof c !== "object") continue;
+		const obj = c;
+		const id = typeof obj.id === "string" ? obj.id : "";
+		const title = typeof obj.title === "string" ? obj.title : id || "Source";
+		const snippet = typeof obj.snippet === "string" ? obj.snippet : "";
+		const url = typeof obj.url === "string" && obj.url ? obj.url : void 0;
+		const score = typeof obj.score === "number" ? obj.score : 0;
+		out.push({
+			id,
+			title,
+			snippet,
+			score,
+			url
+		});
+	}
+	return out;
+}
+var ConversationController = class {
+	config;
+	events;
+	client = null;
+	sessionId = null;
+	messages = [];
+	status = "idle";
+	seq = 0;
+	/** Visitor identity, seeded from config and updated by the pre-chat form. */
+	identity;
+	/** requestId of the in-flight turn — used to resume OTP / tool confirmations. */
+	activeRequestId = null;
+	interrupt = null;
+	constructor(config, events) {
+		this.config = config;
+		this.events = events;
+		this.identity = {
+			name: config.userName,
+			email: config.userEmail,
+			phone: config.userPhone
+		};
+	}
+	get connectionStatus() {
+		return this.status;
+	}
+	/** Merge in visitor identity (from the pre-chat form). Applied on next connect. */
+	setUserInfo(info) {
+		this.identity = {
+			...this.identity,
+			...info
+		};
+	}
+	setInterrupt(interrupt) {
+		this.interrupt = interrupt;
+		this.events.onInterrupt?.(interrupt);
+	}
+	/** Submit an OTP code to resume the paused turn. No-op if not awaiting OTP. */
+	verifyOtp(code) {
+		if (!this.client || !this.sessionId || !this.activeRequestId || this.interrupt?.kind !== "otp") return;
+		this.client.verifyOtp({
+			sessionId: this.sessionId,
+			requestId: this.activeRequestId,
+			code
+		});
+	}
+	/** Approve or reject a pending tool write to resume the paused turn. */
+	confirmTool(approved) {
+		if (!this.client || !this.sessionId || !this.activeRequestId || this.interrupt?.kind !== "confirm") return;
+		this.client.confirmToolAction({
+			sessionId: this.sessionId,
+			requestId: this.activeRequestId,
+			approved
+		});
+		this.setInterrupt(null);
+	}
+	nextId(prefix) {
+		this.seq += 1;
+		return `${prefix}-${this.seq}-${Date.now().toString(36)}`;
+	}
+	setStatus(status, detail) {
+		this.status = status;
+		this.events.onStatus(status, detail);
+	}
+	emitMessages() {
+		this.events.onMessages(this.messages.map((m) => ({ ...m })));
+	}
+	/** Open the transport and create a conversation session. Idempotent. */
+	async connect() {
+		if (this.status === "connecting" || this.status === "ready") return;
+		this.setStatus("connecting");
+		try {
+			this.client = new SmoothAgentClient({ url: this.config.endpoint });
+			await this.client.connect();
+			const session = await this.client.createConversationSession({
+				agentId: this.config.agentId,
+				userName: this.identity.name,
+				userEmail: this.identity.email,
+				...this.identity.phone ? { metadata: { userPhone: this.identity.phone } } : {}
+			});
+			this.sessionId = session.sessionId;
+			this.setStatus("ready");
+		} catch (err) {
+			this.setStatus("error", err instanceof Error ? err.message : String(err));
+			throw err;
+		}
+	}
+	/**
+	* Submit a user message. Appends the user bubble immediately, then streams the
+	* assistant reply token-by-token, finalizing on `eventual_response`.
+	*/
+	async send(text) {
+		const trimmed = text.trim();
+		if (!trimmed) return;
+		if (!this.client || !this.sessionId || this.status !== "ready") await this.connect();
+		if (!this.client || !this.sessionId) throw new Error("Conversation is not connected");
+		this.messages.push({
+			id: this.nextId("u"),
+			role: "user",
+			text: trimmed,
+			streaming: false
+		});
+		const assistant = {
+			id: this.nextId("a"),
+			role: "assistant",
+			text: "",
+			streaming: true
+		};
+		this.messages.push(assistant);
+		this.emitMessages();
+		try {
+			const turn = this.client.sendMessage({
+				sessionId: this.sessionId,
+				message: trimmed,
+				stream: true
+			});
+			this.activeRequestId = turn.requestId;
+			for await (const event of turn) if (event.type === "stream_token") {
+				const token = event.token ?? event.data?.token ?? "";
+				if (token) {
+					assistant.text += token;
+					this.emitMessages();
+				}
+			} else this.handleTurnEvent(event);
+			const inner = (await turn).data?.data;
+			const finalText = extractFinalText(inner?.response);
+			if (finalText && finalText.length > assistant.text.length) assistant.text = finalText;
+			if (!assistant.text) assistant.text = "(no response)";
+			const citations = extractCitations(inner);
+			if (citations.length > 0) assistant.citations = citations;
+			assistant.streaming = false;
+			this.emitMessages();
+		} catch (err) {
+			assistant.streaming = false;
+			const message = err instanceof ProtocolError ? `Error: ${err.message}` : this.config.connectionErrorMessage ?? "We couldn't reach the chat.";
+			assistant.text = assistant.text ? `${assistant.text}\n\n${message}` : message;
+			this.emitMessages();
+			this.setStatus("error", err instanceof Error ? err.message : String(err));
+		} finally {
+			this.activeRequestId = null;
+			this.setInterrupt(null);
+		}
+	}
+	/** Map a non-token turn event (OTP / tool-confirmation lifecycle) to interrupt state. */
+	handleTurnEvent(event) {
+		const inner = event.data?.data ?? {};
+		const str = (v) => typeof v === "string" ? v : void 0;
+		const num = (v) => typeof v === "number" ? v : void 0;
+		switch (event.type) {
+			case "otp_verification_required": {
+				const channels = Array.isArray(inner.availableChannels) ? inner.availableChannels.filter((c) => c === "email" || c === "sms") : ["email"];
+				this.setInterrupt({
+					kind: "otp",
+					toolId: str(inner.toolId),
+					actionDescription: str(inner.actionDescription),
+					availableChannels: channels.length > 0 ? channels : ["email"]
+				});
+				break;
+			}
+			case "otp_sent":
+				if (this.interrupt?.kind === "otp") this.setInterrupt({
+					...this.interrupt,
+					sent: {
+						channel: str(inner.channel),
+						maskedDestination: str(inner.maskedDestination)
+					},
+					error: void 0
+				});
+				break;
+			case "otp_verified":
+				if (this.interrupt?.kind === "otp") this.setInterrupt(null);
+				break;
+			case "otp_invalid":
+				if (this.interrupt?.kind === "otp") this.setInterrupt({
+					...this.interrupt,
+					error: str(inner.message) ?? "That code was incorrect.",
+					attemptsRemaining: num(inner.attemptsRemaining)
+				});
+				break;
+			case "write_confirmation_required":
+				this.setInterrupt({
+					kind: "confirm",
+					toolId: str(inner.toolId),
+					actionDescription: str(inner.actionDescription)
+				});
+				break;
+			default: break;
+		}
+	}
+	/** Tear down the underlying client. */
+	disconnect() {
+		this.client?.disconnect("widget closed");
+		this.client = null;
+		this.sessionId = null;
+		this.activeRequestId = null;
+		this.setInterrupt(null);
+		this.setStatus("closed");
+	}
+};
+//#endregion
+//#region src/logo.ts
+/**
+* The Smooth logo, inlined as an SVG string so the full-page header can render
+* it without a separate network fetch (the IIFE bundle is self-contained).
+*
+* GENERATED from `assets/smooth-logo.svg` — do not edit by hand. Regenerate with:
+*   node -e ...  (see the commit that added this file)
+*/
+const SMOOTH_LOGO_SVG = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 550 135\">\n  <defs>\n    <style>\n      .cls-1 {\n        fill: url(#linear-gradient-3);\n      }\n\n      .cls-2 {\n        fill: url(#linear-gradient-2);\n      }\n\n      .cls-3 {\n        fill: url(#linear-gradient);\n        fill-rule: evenodd;\n      }\n    </style>\n    <linearGradient id=\"linear-gradient\" x1=\"115.59\" y1=\"112.81\" x2=\"25.08\" y2=\"22.3\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\".3\" stop-color=\"#f49f0a\"/>\n      <stop offset=\".79\" stop-color=\"#fb7a4d\"/>\n      <stop offset=\"1\" stop-color=\"#ff6b6c\"/>\n    </linearGradient>\n    <linearGradient id=\"linear-gradient-2\" x1=\"360.91\" y1=\"152.01\" x2=\"202.32\" y2=\"-6.59\" xlink:href=\"#linear-gradient\"/>\n    <linearGradient id=\"linear-gradient-3\" x1=\"443.91\" y1=\"30.15\" x2=\"531.36\" y2=\"117.59\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\".43\" stop-color=\"#00a6a6\"/>\n      <stop offset=\"1\" stop-color=\"#1238dd\"/>\n    </linearGradient>\n  </defs>\n  <path class=\"cls-3\" d=\"M48.28,14.96c-12.39,5.21-22.54,14.64-28.65,26.61-6.12,11.97-7.8,25.72-4.77,38.81,3.04,13.09,10.6,24.69,21.36,32.75,10.76,8.06,24.02,12.05,37.44,11.28,13.42-.77,26.13-6.26,35.9-15.5,9.76-9.24,15.95-21.63,17.46-34.99,1.51-13.36-1.74-26.82-9.19-38.01-1.07-1.61-.64-3.78.97-4.85,1.61-1.07,3.78-.64,4.85.97,8.36,12.56,12.02,27.68,10.32,42.67-1.7,15-8.64,28.91-19.61,39.28-10.96,10.37-25.24,16.54-40.31,17.4-15.07.87-29.96-3.62-42.04-12.66-12.08-9.05-20.58-22.07-23.99-36.77-3.41-14.7-1.51-30.14,5.35-43.58,6.87-13.44,18.26-24.02,32.17-29.87,13.91-5.85,29.44-6.6,43.85-2.11,1.85.57,2.88,2.54,2.3,4.38-.57,1.85-2.54,2.88-4.38,2.3-12.83-4-26.67-3.33-39.06,1.88ZM111.39,19.75c0,2.07-1.68,3.75-3.75,3.75s-3.75-1.68-3.75-3.75,1.68-3.75,3.75-3.75,3.75,1.68,3.75,3.75ZM64.64,59.93c0,1.91,2.39,2.56,7.69,3.88,3.89.97,6.6,2.18,8.15,3.63,1.53,1.45,2.29,3.53,2.29,6.25,0,3.57-1.03,6.26-3.11,8.08-2.07,1.82-5.09,2.73-9.09,2.73h-9.6c-1.97,0-3.57-1.6-3.59-3.57-.01-1.99,1.6-3.61,3.59-3.61h9.41c3.15-.12,4.79-.95,4.91-2.47,0-1.3-1.03-2.21-3.07-2.73-6.91-1.72-11.11-3.44-12.6-5.15-1.48-1.71-2.23-3.77-2.23-6.19,0-6.59,3.2-9.85,9.59-9.8h10.77c1.99,0,3.6,1.61,3.6,3.59s-1.61,3.59-3.6,3.59h-9.69c-1.83,0-3.43.06-3.43,1.77Z\"/>\n  <path class=\"cls-2\" d=\"M205.52,48.44h-8.86c-.44-3.75-2.23-6.65-5.38-8.72-3.16-2.07-7.03-3.1-11.6-3.1h0c-3.35,0-6.27.54-8.78,1.62-2.49,1.09-4.44,2.59-5.84,4.48-1.39,1.89-2.08,4.05-2.08,6.46h0c0,2.01.49,3.75,1.46,5.2.97,1.44,2.22,2.63,3.74,3.58,1.53.95,3.13,1.72,4.8,2.32,1.68.6,3.22,1.09,4.62,1.46h0l7.68,2.06c1.97.52,4.17,1.23,6.6,2.14,2.43.92,4.75,2.16,6.98,3.72,2.23,1.56,4.07,3.56,5.52,6,1.45,2.44,2.18,5.43,2.18,8.98h0c0,4.08-1.07,7.77-3.2,11.08-2.12,3.29-5.22,5.91-9.3,7.86-4.08,1.95-9.02,2.92-14.82,2.92h0c-5.43,0-10.11-.87-14.06-2.62-3.95-1.75-7.05-4.19-9.3-7.32-2.25-3.12-3.53-6.75-3.84-10.88h9.46c.25,2.85,1.22,5.21,2.9,7.06,1.69,1.87,3.83,3.25,6.42,4.14,2.6.89,5.41,1.34,8.42,1.34h0c3.49,0,6.63-.57,9.4-1.72,2.79-1.13,4.99-2.73,6.62-4.8,1.63-2.05,2.44-4.46,2.44-7.22h0c0-2.51-.7-4.55-2.1-6.12-1.41-1.57-3.26-2.85-5.54-3.84-2.29-.99-4.77-1.85-7.44-2.58h0l-9.3-2.66c-5.91-1.71-10.59-4.13-14.04-7.28-3.44-3.16-5.16-7.29-5.16-12.38h0c0-4.23,1.15-7.93,3.46-11.1,2.29-3.16,5.39-5.62,9.3-7.38,3.91-1.76,8.27-2.64,13.08-2.64h0c4.88,0,9.21.87,13,2.6,3.8,1.73,6.81,4.11,9.04,7.12,2.23,3,3.4,6.41,3.52,10.22h0ZM229.16,105.18h-8.72v-56.74h8.42v8.86h.74c1.19-3.03,3.1-5.38,5.74-7.06,2.63-1.69,5.79-2.54,9.48-2.54h0c3.75,0,6.87.85,9.36,2.54,2.51,1.68,4.46,4.03,5.86,7.06h.58c1.45-2.92,3.63-5.25,6.54-7,2.91-1.73,6.39-2.6,10.46-2.6h0c5.07,0,9.21,1.58,12.44,4.74,3.23,3.17,4.84,8.09,4.84,14.76h0v37.98h-8.72v-37.98c0-4.19-1.14-7.18-3.42-8.98-2.29-1.79-4.99-2.68-8.1-2.68h0c-3.99,0-7.07,1.2-9.26,3.6-2.2,2.4-3.3,5.43-3.3,9.1h0v36.94h-8.86v-38.86c0-3.23-1.05-5.83-3.14-7.82-2.09-1.97-4.79-2.96-8.08-2.96h0c-2.27,0-4.38.6-6.34,1.8-1.96,1.21-3.53,2.88-4.72,5-1.2,2.13-1.8,4.59-1.8,7.38h0v35.46ZM333.9,106.36h0c-5.12,0-9.61-1.22-13.46-3.66-3.85-2.44-6.86-5.85-9.02-10.24-2.15-4.37-3.22-9.49-3.22-15.36h0c0-5.91,1.07-11.07,3.22-15.48,2.16-4.4,5.17-7.82,9.02-10.26,3.85-2.44,8.34-3.66,13.46-3.66h0c5.12,0,9.61,1.22,13.46,3.66,3.85,2.44,6.86,5.86,9.02,10.26,2.15,4.41,3.22,9.57,3.22,15.48h0c0,5.87-1.07,10.99-3.22,15.36-2.16,4.39-5.17,7.8-9.02,10.24-3.85,2.44-8.34,3.66-13.46,3.66ZM333.9,98.52h0c3.89,0,7.09-.99,9.6-2.98,2.52-2,4.38-4.63,5.58-7.88,1.21-3.25,1.82-6.77,1.82-10.56h0c0-3.79-.61-7.32-1.82-10.6-1.2-3.27-3.06-5.91-5.58-7.94-2.51-2.01-5.71-3.02-9.6-3.02h0c-3.89,0-7.09,1.01-9.6,3.02-2.51,2.03-4.37,4.67-5.58,7.94-1.2,3.28-1.8,6.81-1.8,10.6h0c0,3.79.6,7.31,1.8,10.56,1.21,3.25,3.07,5.88,5.58,7.88,2.51,1.99,5.71,2.98,9.6,2.98ZM395.94,106.36h0c-5.12,0-9.61-1.22-13.46-3.66-3.85-2.44-6.85-5.85-9-10.24-2.16-4.37-3.24-9.49-3.24-15.36h0c0-5.91,1.08-11.07,3.24-15.48,2.15-4.4,5.15-7.82,9-10.26,3.85-2.44,8.34-3.66,13.46-3.66h0c5.12,0,9.61,1.22,13.46,3.66,3.85,2.44,6.86,5.86,9.02,10.26,2.16,4.41,3.24,9.57,3.24,15.48h0c0,5.87-1.08,10.99-3.24,15.36-2.16,4.39-5.17,7.8-9.02,10.24-3.85,2.44-8.34,3.66-13.46,3.66ZM395.94,98.52h0c3.89,0,7.09-.99,9.6-2.98,2.52-2,4.38-4.63,5.58-7.88,1.21-3.25,1.82-6.77,1.82-10.56h0c0-3.79-.61-7.32-1.82-10.6-1.2-3.27-3.06-5.91-5.58-7.94-2.51-2.01-5.71-3.02-9.6-3.02h0c-3.88,0-7.08,1.01-9.6,3.02-2.51,2.03-4.37,4.67-5.58,7.94-1.2,3.28-1.8,6.81-1.8,10.6h0c0,3.79.6,7.31,1.8,10.56,1.21,3.25,3.07,5.88,5.58,7.88,2.52,1.99,5.72,2.98,9.6,2.98Z\"/>\n  <path class=\"cls-1\" d=\"M467.88,48.02v13.28h-35.79v-13.28h35.79ZM439.68,34.38h17.89v53.42c0,1.5.36,2.62,1.08,3.36.72.74,1.88,1.1,3.49,1.1.62,0,1.48-.07,2.59-.21,1.11-.14,1.91-.27,2.38-.41l2.31,13.02c-2.02.58-3.97.97-5.84,1.18-1.88.21-3.66.31-5.33.31-6.08,0-10.7-1.43-13.84-4.28-3.15-2.85-4.72-7.01-4.72-12.48v-55.01ZM506.59,72.63v32.71h-17.89V28.95h17.53v33.53h-1.13c1.4-4.55,3.6-8.21,6.59-11,2.99-2.79,7.01-4.18,12.07-4.18,4,0,7.48.89,10.46,2.67,2.97,1.78,5.28,4.29,6.92,7.54,1.64,3.25,2.46,7.02,2.46,11.33v36.5h-17.89v-33.02c0-3.21-.82-5.73-2.46-7.56-1.64-1.83-3.93-2.74-6.87-2.74-1.92,0-3.62.42-5.1,1.26-1.49.84-2.64,2.04-3.46,3.61-.82,1.57-1.23,3.49-1.23,5.74Z\"/>\n</svg>";
+//#endregion
+//#region src/styles.ts
+/**
+* Render the widget's scoped stylesheet — the "Aurora Glass" design system.
+*
+* Every brand value is injected as a CSS custom property on `:host` so a host
+* page can override colors per-instance and the rules below stay static. Two
+* extra tokens are *derived in CSS* from the brand vars so they adapt to any
+* theme (light or dark) without the caller supplying them:
+*
+*   --sac-primary-2  a darker shade of `primary`, used as the second stop of the
+*                    launcher / send / user-bubble gradients (depth without a
+*                    second brand input).
+*   --sac-surface-2  a faint wash derived from `text`, used for inset chrome
+*                    (composer field, close button, source cards). On a dark
+*                    panel it reads as a light overlay; on a light panel, dark.
+*
+* Deliberately framework-light: no Tailwind, no runtime CSS-in-JS — just a string
+* the web component drops into its shadow root. Modern color features
+* (`color-mix`) are used intentionally; the widget targets evergreen browsers.
+*
+* `mode` switches host positioning + panel sizing between the floating popover
+* (default) and the full-page layout (fills its container/viewport).
+*/
+function buildStyles(theme, mode = "popover") {
+	return `
+:host {
+    --sac-text: ${theme.text};
+    --sac-bg: ${theme.background};
+    --sac-primary: ${theme.primary};
+    --sac-primary-text: ${theme.primaryText};
+    --sac-assistant-bubble: ${theme.assistantBubble};
+    --sac-assistant-bubble-text: ${theme.assistantBubbleText};
+    --sac-user-bubble: ${theme.userBubble};
+    --sac-user-bubble-text: ${theme.userBubbleText};
+    --sac-border: ${theme.border};
+
+    /* Derived tokens — adapt to any brand color without a second input. */
+    --sac-primary-2: color-mix(in srgb, var(--sac-primary) 78%, #000 22%);
+    --sac-surface-2: color-mix(in srgb, var(--sac-text) 5%, transparent);
+    --sac-radius: 22px;
+    --sac-ease: cubic-bezier(.16, 1, .3, 1);
+
+    ${mode === "fullpage" ? `/* Full-page: fill the host's box (sized by its container, else the viewport). */
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;` : `/* Popover: float in the bottom-right corner. */
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 2147483000;`}
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+* { box-sizing: border-box; }
+
+/* ───────────────────────────── Launcher ───────────────────────────── */
+.launcher {
+    position: relative;
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    background: radial-gradient(120% 120% at 30% 20%,
+        color-mix(in srgb, var(--sac-primary) 78%, #fff 22%) 0%,
+        var(--sac-primary) 42%,
+        var(--sac-primary-2) 130%);
+    color: var(--sac-primary-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, .25) inset,
+        0 10px 24px -6px color-mix(in srgb, var(--sac-primary) 55%, transparent),
+        0 18px 50px -12px rgba(0, 0, 0, .6);
+    transition: transform .45s var(--sac-ease), box-shadow .45s var(--sac-ease), opacity .3s ease;
+    isolation: isolate;
+}
+/* Breathing presence ring. */
+.launcher::before {
+    content: '';
+    position: absolute;
+    inset: -6px;
+    border-radius: 50%;
+    z-index: -1;
+    background: radial-gradient(closest-side, color-mix(in srgb, var(--sac-primary) 45%, transparent), transparent 75%);
+    animation: sac-breathe 3.4s ease-in-out infinite;
+}
+@keyframes sac-breathe { 0%, 100% { transform: scale(1); opacity: .55 } 50% { transform: scale(1.28); opacity: 0 } }
+.launcher:hover {
+    transform: translateY(-3px) scale(1.06);
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, .3) inset,
+        0 16px 30px -6px color-mix(in srgb, var(--sac-primary) 60%, transparent),
+        0 26px 60px -14px rgba(0, 0, 0, .7);
+}
+.launcher:active { transform: translateY(-1px) scale(.98); }
+.launcher .ico { width: 27px; height: 27px; display: block; transition: transform .4s var(--sac-ease); }
+.launcher:hover .ico { transform: rotate(-6deg) scale(1.04); }
+.launcher.hidden { opacity: 0; transform: scale(.4) translateY(10px); pointer-events: none; }
+
+/* ─────────────────────────────── Panel ────────────────────────────── */
+.panel {
+    width: 390px;
+    max-width: calc(100vw - 40px);
+    height: 600px;
+    max-height: calc(100vh - 56px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: var(--sac-radius);
+    background: linear-gradient(180deg, color-mix(in srgb, var(--sac-bg) 92%, #fff 8%) 0%, var(--sac-bg) 22%);
+    color: var(--sac-text);
+    border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
+    box-shadow:
+        0 0 0 1px rgba(255, 255, 255, .03) inset,
+        0 40px 80px -24px rgba(0, 0, 0, .65),
+        0 16px 40px -20px rgba(0, 0, 0, .5);
+    transform-origin: bottom right;
+    animation: sac-panel-in .5s var(--sac-ease) both;
+    position: relative;
+}
+@keyframes sac-panel-in { from { opacity: 0; transform: translateY(16px) scale(.92) } to { opacity: 1; transform: none } }
+.panel.hidden { display: none; }
+/* Ambient brand glow bleeding from the top of the panel. */
+.panel::before {
+    content: '';
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 140px;
+    pointer-events: none;
+    background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--sac-primary) 22%, transparent), transparent 70%);
+}
+/* Full-page: the panel becomes the whole surface. */
+.panel.fullpage {
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    max-width: none;
+    max-height: none;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    animation: none;
+}
+
+/* ─────────────────────────────── Header ───────────────────────────── */
+.header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 16px 14px;
+}
+.avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 13px;
+    flex: none;
+    background: linear-gradient(140deg, var(--sac-primary), var(--sac-primary-2));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sac-primary-text);
+    box-shadow:
+        0 6px 16px -6px color-mix(in srgb, var(--sac-primary) 60%, transparent),
+        0 1px 0 rgba(255, 255, 255, .25) inset;
+}
+.avatar svg { width: 22px; height: 22px; }
+.avatar .logo-wrap { display: flex; }
+.avatar .logo { height: 22px; width: auto; display: block; }
+.meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
+.title { font-weight: 650; font-size: 15.5px; letter-spacing: -.01em; line-height: 1.1; }
+.status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: color-mix(in srgb, var(--sac-text) 62%, transparent);
+}
+.dot {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    flex: none;
+    background: #34d399;
+    color: #34d399;
+    box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
+    animation: sac-pulse 2.4s ease-out infinite;
+}
+.dot.connecting { background: #fbbf24; color: #fbbf24; animation: sac-pulse 1.1s ease-out infinite; }
+.dot.error { background: #f87171; color: #f87171; animation: none; }
+.dot.off { background: #94a3b8; color: #94a3b8; animation: none; }
+@keyframes sac-pulse {
+    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent) }
+    70% { box-shadow: 0 0 0 6px transparent }
+    100% { box-shadow: 0 0 0 0 transparent }
+}
+.close {
+    margin-left: auto;
+    width: 32px; height: 32px;
+    border-radius: 10px;
+    border: none;
+    cursor: pointer;
+    background: var(--sac-surface-2);
+    color: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background .2s ease, transform .2s ease;
+}
+.close:hover { background: color-mix(in srgb, var(--sac-text) 12%, transparent); transform: translateY(1px); }
+.close svg { width: 16px; height: 16px; opacity: .8; }
+.powered { margin-left: auto; font-size: 10.5px; letter-spacing: .02em; opacity: .6; }
+.header-sep { height: 1px; margin: 0 16px; background: linear-gradient(90deg, transparent, var(--sac-border), transparent); }
+
+/* Full-page header: taller, logo-led, no close. */
+.panel.fullpage .header { padding: 18px 22px; }
+.panel.fullpage .avatar { width: 44px; height: 44px; }
+.panel.fullpage .avatar .logo { height: 26px; }
+
+/* ────────────────────────────── Messages ──────────────────────────── */
+.messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 18px 16px 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    scroll-behavior: smooth;
+}
+.messages::-webkit-scrollbar { width: 8px; }
+.messages::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--sac-text) 14%, transparent);
+    border-radius: 99px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+.messages::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--sac-text) 24%, transparent);
+    background-clip: padding-box;
+}
+
+.row {
+    display: flex;
+    gap: 9px;
+    max-width: 88%;
+    animation: sac-msg-in .42s var(--sac-ease) both;
+}
+@keyframes sac-msg-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
+.row.user { align-self: flex-end; flex-direction: row-reverse; }
+.row.assistant { align-self: flex-start; }
+.mini {
+    width: 26px; height: 26px;
+    border-radius: 9px;
+    flex: none;
+    align-self: flex-end;
+    background: linear-gradient(140deg, var(--sac-primary), var(--sac-primary-2));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sac-primary-text);
+}
+.mini svg { width: 15px; height: 15px; }
+
+.bubble {
+    padding: 11px 14px;
+    border-radius: 16px;
+    font-size: 14px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+    position: relative;
+}
+.bubble.assistant {
+    background: linear-gradient(180deg, color-mix(in srgb, var(--sac-assistant-bubble) 86%, #fff 5%), var(--sac-assistant-bubble));
+    color: var(--sac-assistant-bubble-text);
+    border: 1px solid color-mix(in srgb, var(--sac-text) 8%, transparent);
+    border-bottom-left-radius: 5px;
+    box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .4);
+}
+.bubble.user {
+    background: linear-gradient(165deg,
+        color-mix(in srgb, var(--sac-user-bubble) 88%, #fff 12%),
+        var(--sac-user-bubble) 60%,
+        color-mix(in srgb, var(--sac-user-bubble) 80%, var(--sac-primary-2) 20%));
+    color: var(--sac-user-bubble-text);
+    border-bottom-right-radius: 5px;
+    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--sac-primary) 50%, transparent);
+}
+.bubble.greeting {
+    background: transparent;
+    border: 1px dashed color-mix(in srgb, var(--sac-text) 14%, transparent);
+    color: color-mix(in srgb, var(--sac-text) 80%, transparent);
+    box-shadow: none;
+}
+
+/* Typing indicator (assistant bubble with no text yet). */
+.bubble.typing { display: flex; gap: 4px; padding: 14px 15px; }
+.bubble.typing i {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--sac-assistant-bubble-text) 55%, transparent);
+    animation: sac-typing 1.3s ease-in-out infinite;
+}
+.bubble.typing i:nth-child(2) { animation-delay: .18s; }
+.bubble.typing i:nth-child(3) { animation-delay: .36s; }
+@keyframes sac-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4 } 30% { transform: translateY(-5px); opacity: 1 } }
+
+.cursor::after {
+    content: '';
+    display: inline-block;
+    width: 2px; height: 1.05em;
+    margin-left: 2px;
+    vertical-align: -2px;
+    border-radius: 2px;
+    background: currentColor;
+    animation: sac-blink 1s steps(2, start) infinite;
+}
+@keyframes sac-blink { to { opacity: 0 } }
+
+/* Full-page: center the conversation in a readable column. */
+.panel.fullpage .messages { padding: 26px 20px; }
+.panel.fullpage .row { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; }
+.panel.fullpage .row.user { max-width: 80%; margin-right: 0; }
+
+/* ───────────────── Sources (grounding citations) ──────────────────── */
+.sources {
+    align-self: flex-start;
+    max-width: 88%;
+    margin: -4px 0 0 35px;
+}
+.panel.fullpage .sources { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; }
+.sources summary {
+    cursor: pointer;
+    list-style: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 12px;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--sac-text) 70%, transparent);
+    padding: 5px 0;
+    user-select: none;
+}
+.sources summary::-webkit-details-marker { display: none; }
+.sources .chev { transition: transform .2s var(--sac-ease); flex: none; }
+.sources details[open] .chev { transform: rotate(90deg); }
+.sources .count {
+    background: color-mix(in srgb, var(--sac-primary) 18%, transparent);
+    color: color-mix(in srgb, var(--sac-primary) 92%, #fff);
+    font-size: 10.5px;
+    font-weight: 700;
+    padding: 1px 7px;
+    border-radius: 99px;
+}
+.sources ol { list-style: none; margin: 6px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
+.sources li {
+    background: var(--sac-surface-2);
+    border: 1px solid color-mix(in srgb, var(--sac-border) 70%, transparent);
+    border-left: 2px solid var(--sac-primary);
+    border-radius: 9px;
+    padding: 8px 10px;
+}
+.sources .src-title {
+    color: color-mix(in srgb, var(--sac-primary) 92%, #fff);
+    font-weight: 600;
+    font-size: 12.5px;
+    text-decoration: none;
+    word-break: break-word;
+}
+.sources a.src-title:hover { text-decoration: underline; }
+.sources span.src-title { color: var(--sac-text); opacity: .95; }
+.sources .src-snippet {
+    display: block;
+    margin-top: 3px;
+    font-size: 11.5px;
+    line-height: 1.45;
+    color: color-mix(in srgb, var(--sac-text) 55%, transparent);
+    white-space: normal;
+}
+
+/* ────────────────────────────── Composer ──────────────────────────── */
+.composer-wrap { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
+.composer {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+    padding: 7px 7px 7px 14px;
+    border-radius: 18px;
+    background: var(--sac-surface-2);
+    border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
+    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
+}
+.composer:focus-within {
+    border-color: color-mix(in srgb, var(--sac-primary) 60%, transparent);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sac-primary) 14%, transparent);
+}
+.composer textarea {
+    flex: 1;
+    resize: none;
+    border: none;
+    background: transparent;
+    color: var(--sac-text);
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.45;
+    max-height: 120px;
+    padding: 6px 0;
+    outline: none;
+}
+.composer textarea::placeholder { color: color-mix(in srgb, var(--sac-text) 42%, transparent); }
+.send {
+    width: 38px; height: 38px;
+    flex: none;
+    border: none;
+    border-radius: 13px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(150deg, var(--sac-primary), var(--sac-primary-2));
+    color: var(--sac-primary-text);
+    box-shadow:
+        0 6px 14px -6px color-mix(in srgb, var(--sac-primary) 65%, transparent),
+        0 1px 0 rgba(255, 255, 255, .25) inset;
+    transition: transform .2s var(--sac-ease), box-shadow .2s var(--sac-ease), opacity .2s ease;
+}
+.send svg { width: 18px; height: 18px; }
+.send:hover { transform: translateY(-1px) scale(1.05); }
+.send:active { transform: scale(.94); }
+.send:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
+.footer {
+    text-align: center;
+    margin-top: 9px;
+    font-size: 10.5px;
+    letter-spacing: .04em;
+    color: color-mix(in srgb, var(--sac-text) 38%, transparent);
+}
+.footer b { font-weight: 600; color: color-mix(in srgb, var(--sac-text) 55%, transparent); }
+
+/* ─────────────────── Pre-chat identity form ───────────────────────── */
+.prechat { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 22px 20px; }
+.pc-head { text-align: center; }
+.pc-title { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
+.pc-sub { margin-top: 4px; font-size: 13px; color: color-mix(in srgb, var(--sac-text) 60%, transparent); }
+.pc-form { display: flex; flex-direction: column; gap: 12px; }
+.pc-field { display: flex; flex-direction: column; gap: 5px; }
+.pc-field span { font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--sac-text) 70%, transparent); }
+.pc-field input {
+    border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
+    background: var(--sac-surface-2);
+    color: var(--sac-text);
+    border-radius: 12px;
+    padding: 11px 13px;
+    font-family: inherit;
+    font-size: 14px;
+    outline: none;
+    transition: border-color .2s ease, box-shadow .2s ease;
+}
+.pc-field input::placeholder { color: color-mix(in srgb, var(--sac-text) 42%, transparent); }
+.pc-field input:focus {
+    border-color: color-mix(in srgb, var(--sac-primary) 60%, transparent);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sac-primary) 14%, transparent);
+}
+.pc-submit {
+    margin-top: 4px;
+    border: none;
+    border-radius: 13px;
+    padding: 12px;
+    cursor: pointer;
+    background: linear-gradient(150deg, var(--sac-primary), var(--sac-primary-2));
+    color: var(--sac-primary-text);
+    font-weight: 650;
+    font-size: 14px;
+    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--sac-primary) 65%, transparent), 0 1px 0 rgba(255, 255, 255, .25) inset;
+    transition: transform .2s var(--sac-ease);
+}
+.pc-submit:hover { transform: translateY(-1px); }
+.pc-submit:active { transform: scale(.98); }
+
+/* ─────────────────── Starter-prompt chips ─────────────────────────── */
+.prompts { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 2px 35px; }
+.panel.fullpage .prompts { margin-left: auto; margin-right: auto; max-width: 760px; width: 100%; }
+.chip {
+    border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
+    background: var(--sac-surface-2);
+    color: var(--sac-text);
+    border-radius: 999px;
+    padding: 8px 13px;
+    font-family: inherit;
+    font-size: 12.5px;
+    cursor: pointer;
+    text-align: left;
+    transition: border-color .2s ease, background .2s ease, transform .2s ease;
+}
+.chip:hover {
+    border-color: color-mix(in srgb, var(--sac-primary) 50%, transparent);
+    background: color-mix(in srgb, var(--sac-primary) 10%, var(--sac-surface-2));
+    transform: translateY(-1px);
+}
+
+.hidden { display: none !important; }
+
+@media (prefers-reduced-motion: reduce) {
+    .launcher::before, .dot, .bubble.typing i { animation: none !important; }
+    .panel, .row, .launcher, .send, .close { animation: none !important; transition: none !important; }
+}
+`;
+}
+//#endregion
+//#region src/element.ts
+const ELEMENT_TAG = "smooth-agent-chat";
+const OBSERVED = [
+	"endpoint",
+	"agent-id",
+	"agent-name",
+	"placeholder",
+	"greeting",
+	"start-open",
+	"mode"
+];
+/**
+* Inline SVG icons (static, trusted strings — never interpolated with user data).
+* Kept here so the IIFE bundle is self-contained: no icon-font or network fetch.
+*/
+const ICON = {
+	/** Launcher — a speech bubble carrying a spark (chat + AI). */
+	spark: `<svg class="ico" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3.5c-4.7 0-8.5 3.2-8.5 7.2 0 2.2 1.2 4.2 3 5.5v3.3l3.2-1.7c.7.1 1.5.2 2.3.2 4.7 0 8.5-3.2 8.5-7.3S16.7 3.5 12 3.5Z" fill="currentColor" opacity=".22"/><path d="M13.4 7.2 9 12.6h2.6l-1 4.2 4.4-5.4h-2.6l1-4.2Z" fill="currentColor"/></svg>`,
+	/** Small assistant avatar used beside each assistant message. */
+	bot: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4.5" y="7.5" width="15" height="11" rx="3.5" stroke="currentColor" stroke-width="1.6"/><path d="M12 4.5v3M8.5 12.2h.01M15.5 12.2h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M9.5 15.4c.7.6 1.5.9 2.5.9s1.8-.3 2.5-.9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`,
+	/** Close (collapse panel) — a downward chevron. */
+	close: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m7 10 5 5 5-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+	/** Send — an upward arrow. */
+	send: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19V6M12 6l-5.5 5.5M12 6l5.5 5.5" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+	/** Sources disclosure caret. */
+	chev: `<svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+};
+/**
+* Return `url` only if it is a valid absolute `http(s)` URL, else `null`.
+*
+* SECURITY: citation URLs originate from indexed content (web / GitHub
+* connectors), which can be attacker-influenceable. Assigning an arbitrary
+* string to `<a>.href` allows `javascript:`/`data:`/`vbscript:` URLs that
+* execute on click — a stored-XSS vector. Only http(s) links are rendered as
+* anchors; anything else falls back to plain text.
+*/
+function safeHttpUrl(url) {
+	if (!url) return null;
+	try {
+		const parsed = new URL(url);
+		return parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed.href : null;
+	} catch {
+		return null;
+	}
+}
+var SmoothAgentChatElement = class extends HTMLElement {
+	static get observedAttributes() {
+		return OBSERVED;
+	}
+	root;
+	controller = null;
+	overrides = {};
+	open = false;
+	messages = [];
+	status = "idle";
+	mounted = false;
+	/** True once the visitor has cleared the pre-chat identity gate (or it's not needed). */
+	userInfoSatisfied = false;
+	/** True after the visitor has sent their first message (hides starter chips). */
+	hasSent = false;
+	/** Starter prompts shown as chips in the empty state. */
+	examplePrompts = [];
+	panelEl = null;
+	launcherEl = null;
+	messagesEl = null;
+	statusEl = null;
+	dotEl = null;
+	inputEl = null;
+	sendBtn = null;
+	constructor() {
+		super();
+		this.root = this.attachShadow({ mode: "open" });
+	}
+	connectedCallback() {
+		this.mounted = true;
+		this.render();
+	}
+	disconnectedCallback() {
+		this.mounted = false;
+		this.controller?.disconnect();
+		this.controller = null;
+	}
+	attributeChangedCallback() {
+		if (this.mounted) this.render();
+	}
+	/**
+	* Programmatically merge config overrides (endpoint, agentId, theme, …). Values
+	* set here take precedence over HTML attributes. Re-renders the widget.
+	*/
+	configure(config) {
+		this.overrides = {
+			...this.overrides,
+			...config
+		};
+		if (config.theme) this.overrides.theme = {
+			...this.overrides.theme ?? {},
+			...config.theme
+		};
+		if (this.mounted) this.render();
+	}
+	/** Open the chat panel. */
+	openChat() {
+		this.open = true;
+		this.syncOpenState();
+		this.controller?.connect().catch(() => {});
+	}
+	/** Collapse the chat panel back to the launcher. */
+	closeChat() {
+		this.open = false;
+		this.syncOpenState();
+	}
+	readConfig() {
+		const endpoint = this.overrides.endpoint ?? this.getAttribute("endpoint") ?? "";
+		const agentId = this.overrides.agentId ?? this.getAttribute("agent-id") ?? "";
+		if (!endpoint || !agentId) return null;
+		const theme = this.overrides.theme;
+		const modeAttr = this.getAttribute("mode");
+		return {
+			endpoint,
+			mode: this.overrides.mode ?? (modeAttr === "fullpage" ? "fullpage" : modeAttr === "popover" ? "popover" : void 0) ?? "popover",
+			agentId,
+			agentName: this.overrides.agentName ?? this.getAttribute("agent-name") ?? void 0,
+			userName: this.overrides.userName,
+			userEmail: this.overrides.userEmail,
+			userPhone: this.overrides.userPhone,
+			placeholder: this.overrides.placeholder ?? this.getAttribute("placeholder") ?? void 0,
+			greeting: this.overrides.greeting ?? this.getAttribute("greeting") ?? void 0,
+			connectionErrorMessage: this.overrides.connectionErrorMessage,
+			startOpen: this.overrides.startOpen ?? this.hasAttribute("start-open"),
+			examplePrompts: this.overrides.examplePrompts,
+			requireName: this.overrides.requireName,
+			requireEmail: this.overrides.requireEmail,
+			requirePhone: this.overrides.requirePhone,
+			allowAnonymous: this.overrides.allowAnonymous,
+			theme
+		};
+	}
+	render() {
+		const config = this.readConfig();
+		if (!config) {
+			this.root.innerHTML = "";
+			return;
+		}
+		const resolved = resolveConfig(config);
+		if (!this.controller) {
+			this.controller = new ConversationController(config, {
+				onMessages: (messages) => {
+					this.messages = messages;
+					this.renderMessages(resolved.greeting);
+				},
+				onStatus: (status) => {
+					this.status = status;
+					this.renderStatus();
+					this.renderComposerState();
+				}
+			});
+			if (resolved.startOpen) this.open = true;
+		}
+		const fullpage = resolved.mode === "fullpage";
+		if (fullpage) this.open = true;
+		const style = document.createElement("style");
+		style.textContent = buildStyles(resolved.theme, resolved.mode);
+		const monogram = escapeHtml((resolved.agentName.trim().charAt(0) || "A").toUpperCase());
+		const header = fullpage ? `<div class="header">
+                    <div class="avatar"><span class="logo-wrap">${SMOOTH_LOGO_SVG}</span></div>
+                    <div class="meta">
+                        <span class="title">${escapeHtml(resolved.agentName)}</span>
+                        <span class="status"><span class="dot off"></span><span class="status-text"></span></span>
+                    </div>
+                    <span class="powered">powered by smooth-operator</span>
+                </div>` : `<div class="header">
+                    <div class="avatar">${monogram}</div>
+                    <div class="meta">
+                        <span class="title">${escapeHtml(resolved.agentName)}</span>
+                        <span class="status"><span class="dot off"></span><span class="status-text"></span></span>
+                    </div>
+                    <button class="close" aria-label="Close chat">${ICON.close}</button>
+                </div>`;
+		this.examplePrompts = resolved.examplePrompts;
+		const gating = needsUserInfo(resolved) && !this.userInfoSatisfied;
+		const field = (name, type, label, autocomplete) => `<label class="pc-field"><span>${escapeHtml(label)}</span><input name="${name}" type="${type}" autocomplete="${autocomplete}" required /></label>`;
+		const prechatHtml = `
+            <div class="prechat">
+                <div class="pc-head">
+                    <div class="pc-title">Before we chat</div>
+                    <div class="pc-sub">A couple details so ${escapeHtml(resolved.agentName)} can help.</div>
+                </div>
+                <form class="pc-form" novalidate>
+                    ${resolved.requireName ? field("name", "text", "Name", "name") : ""}
+                    ${resolved.requireEmail ? field("email", "email", "Email", "email") : ""}
+                    ${resolved.requirePhone ? field("phone", "tel", "Phone", "tel") : ""}
+                    <button type="submit" class="pc-submit">Start chat</button>
+                </form>
+            </div>`;
+		const chatHtml = `
+                <div class="messages"></div>
+                <div class="composer-wrap">
+                    <div class="composer">
+                        <textarea rows="1" placeholder="${escapeHtml(resolved.placeholder)}"></textarea>
+                        <button class="send" type="button" aria-label="Send message">${ICON.send}</button>
+                    </div>
+                    <div class="footer">powered by <b>smooth&#8209;operator</b></div>
+                </div>`;
+		const container = document.createElement("div");
+		container.innerHTML = `
+            ${fullpage ? "" : `<button class="launcher" part="launcher" aria-label="Open chat">${ICON.spark}</button>`}
+            <div class="panel${fullpage ? " fullpage" : " hidden"}" part="panel" role="${fullpage ? "region" : "dialog"}" aria-label="${escapeHtml(resolved.agentName)} chat">
+                ${header}
+                <div class="header-sep"></div>
+                ${gating ? prechatHtml : chatHtml}
+            </div>
+        `;
+		const logoSvg = container.querySelector(".logo-wrap svg");
+		if (logoSvg) logoSvg.setAttribute("class", "logo");
+		this.root.replaceChildren(style, container);
+		this.launcherEl = container.querySelector(".launcher");
+		this.panelEl = container.querySelector(".panel");
+		this.messagesEl = container.querySelector(".messages");
+		this.statusEl = container.querySelector(".status-text");
+		this.dotEl = container.querySelector(".dot");
+		this.inputEl = container.querySelector("textarea");
+		this.sendBtn = container.querySelector(".send");
+		this.launcherEl?.addEventListener("click", () => this.openChat());
+		container.querySelector(".close")?.addEventListener("click", () => this.closeChat());
+		this.sendBtn?.addEventListener("click", () => this.submit());
+		this.inputEl?.addEventListener("input", () => this.autosize());
+		this.inputEl?.addEventListener("keydown", (ev) => {
+			if (ev.key === "Enter" && !ev.shiftKey) {
+				ev.preventDefault();
+				this.submit();
+			}
+		});
+		const pcForm = container.querySelector(".pc-form");
+		pcForm?.addEventListener("submit", (ev) => {
+			ev.preventDefault();
+			this.handlePrechatSubmit(pcForm);
+		});
+		if (fullpage && !gating) this.controller?.connect().catch(() => {});
+		this.syncOpenState();
+		if (!gating) this.renderMessages(resolved.greeting);
+		this.renderStatus();
+		this.renderComposerState();
+	}
+	/** Collect identity from the pre-chat form, then drop into the chat view. */
+	handlePrechatSubmit(form) {
+		if (!form.reportValidity()) return;
+		const data = new FormData(form);
+		const val = (k) => data.get(k)?.trim() || void 0;
+		this.controller?.setUserInfo({
+			name: val("name"),
+			email: val("email"),
+			phone: val("phone")
+		});
+		this.userInfoSatisfied = true;
+		this.render();
+		this.controller?.connect().catch(() => {});
+	}
+	/** Send a starter prompt (from a chip click). */
+	submitPrompt(text) {
+		if (!this.inputEl) return;
+		this.inputEl.value = text;
+		this.submit();
+	}
+	syncOpenState() {
+		if (this.panelEl?.classList.contains("fullpage")) {
+			this.inputEl?.focus();
+			return;
+		}
+		this.panelEl?.classList.toggle("hidden", !this.open);
+		this.launcherEl?.classList.toggle("hidden", this.open);
+		if (this.open) this.inputEl?.focus();
+	}
+	/** Grow the textarea with its content, up to the CSS max-height. */
+	autosize() {
+		const ta = this.inputEl;
+		if (!ta) return;
+		ta.style.height = "auto";
+		ta.style.height = `${ta.scrollHeight}px`;
+	}
+	renderMessages(greeting) {
+		if (!this.messagesEl) return;
+		this.messagesEl.replaceChildren();
+		if (this.messages.length === 0 && greeting) this.messagesEl.appendChild(this.buildRow("assistant", this.greetingBubble(greeting)));
+		if (!this.hasSent && this.messages.length === 0 && this.examplePrompts.length > 0) {
+			const chips = document.createElement("div");
+			chips.className = "prompts";
+			for (const prompt of this.examplePrompts) {
+				const chip = document.createElement("button");
+				chip.type = "button";
+				chip.className = "chip";
+				chip.textContent = prompt;
+				chip.addEventListener("click", () => this.submitPrompt(prompt));
+				chips.appendChild(chip);
+			}
+			this.messagesEl.appendChild(chips);
+		}
+		for (const msg of this.messages) {
+			const bubble = document.createElement("div");
+			bubble.className = `bubble ${msg.role}`;
+			if (msg.role === "assistant" && msg.streaming && !msg.text) {
+				bubble.classList.add("typing");
+				bubble.append(this.typingDot(), this.typingDot(), this.typingDot());
+			} else if (msg.streaming) {
+				bubble.classList.add("cursor");
+				bubble.textContent = msg.text;
+			} else bubble.textContent = msg.text;
+			this.messagesEl.appendChild(this.buildRow(msg.role, bubble));
+			if (msg.role === "assistant" && !msg.streaming && msg.citations && msg.citations.length > 0) this.messagesEl.appendChild(this.renderSources(msg.citations));
+		}
+		this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
+	}
+	/** Wrap a bubble in a `.row`, prefixing assistant rows with a mini avatar. */
+	buildRow(role, bubble) {
+		const row = document.createElement("div");
+		row.className = `row ${role}`;
+		if (role === "assistant") {
+			const mini = document.createElement("div");
+			mini.className = "mini";
+			mini.innerHTML = ICON.bot;
+			row.appendChild(mini);
+		}
+		row.appendChild(bubble);
+		return row;
+	}
+	greetingBubble(greeting) {
+		const b = document.createElement("div");
+		b.className = "bubble assistant greeting";
+		b.textContent = greeting;
+		return b;
+	}
+	typingDot() {
+		return document.createElement("i");
+	}
+	/**
+	* Build the collapsible "Sources (N)" block for an assistant message's
+	* citations. Title/snippet are set via `textContent` (never innerHTML) so
+	* citation text can't inject markup; only the static chevron + numeric count
+	* use innerHTML.
+	*/
+	renderSources(citations) {
+		const wrap = document.createElement("div");
+		wrap.className = "sources";
+		wrap.setAttribute("part", "sources");
+		const details = document.createElement("details");
+		details.open = true;
+		const summary = document.createElement("summary");
+		const chev = document.createElement("span");
+		chev.className = "chev";
+		chev.innerHTML = ICON.chev;
+		const label = document.createElement("span");
+		label.textContent = "Sources";
+		const count = document.createElement("span");
+		count.className = "count";
+		count.textContent = String(citations.length);
+		summary.append(chev, label, count);
+		details.appendChild(summary);
+		const list = document.createElement("ol");
+		for (const c of citations) {
+			const li = document.createElement("li");
+			let titleEl;
+			const safeUrl = safeHttpUrl(c.url);
+			if (safeUrl) {
+				const a = document.createElement("a");
+				a.className = "src-title";
+				a.href = safeUrl;
+				a.target = "_blank";
+				a.rel = "noopener noreferrer";
+				titleEl = a;
+			} else {
+				titleEl = document.createElement("span");
+				titleEl.className = "src-title";
+			}
+			titleEl.textContent = c.title || c.id || "Source";
+			li.appendChild(titleEl);
+			if (c.snippet) {
+				const snip = document.createElement("span");
+				snip.className = "src-snippet";
+				snip.textContent = c.snippet;
+				li.appendChild(snip);
+			}
+			list.appendChild(li);
+		}
+		details.appendChild(list);
+		wrap.appendChild(details);
+		return wrap;
+	}
+	renderStatus() {
+		const label = {
+			idle: "",
+			connecting: "Connecting…",
+			ready: "Online",
+			error: "Connection issue",
+			closed: "Disconnected"
+		};
+		if (this.statusEl) this.statusEl.textContent = label[this.status];
+		if (this.dotEl) {
+			const mod = this.status === "ready" ? "" : this.status === "connecting" ? " connecting" : this.status === "error" ? " error" : " off";
+			this.dotEl.className = `dot${mod}`;
+		}
+	}
+	renderComposerState() {
+		const busy = this.status === "connecting";
+		if (this.sendBtn) this.sendBtn.disabled = busy;
+		if (this.inputEl) this.inputEl.disabled = busy;
+	}
+	submit() {
+		if (!this.inputEl || !this.controller) return;
+		const text = this.inputEl.value;
+		if (!text.trim()) return;
+		this.inputEl.value = "";
+		this.hasSent = true;
+		this.autosize();
+		this.controller.send(text);
+	}
+};
+function escapeHtml(value) {
+	return value.replace(/[&<>"']/g, (c) => {
+		switch (c) {
+			case "&": return "&amp;";
+			case "<": return "&lt;";
+			case ">": return "&gt;";
+			case "\"": return "&quot;";
+			default: return "&#39;";
+		}
+	});
+}
+/** Register the custom element once. Safe to call multiple times. */
+function defineChatWidget() {
+	if (typeof customElements !== "undefined" && !customElements.get("smooth-agent-chat")) customElements.define(ELEMENT_TAG, SmoothAgentChatElement);
+}
+/**
+* Programmatically create, configure, and append a widget to the page.
+* Returns the element so the host can drive `openChat()` / `closeChat()`.
+*/
+function mountChatWidget(config, target = document.body) {
+	defineChatWidget();
+	const el = document.createElement(ELEMENT_TAG);
+	el.configure(config);
+	target.appendChild(el);
+	return el;
+}
+/**
+* Ergonomic helper for the full-page layout: mounts a `<smooth-agent-chat>` in
+* `mode: "fullpage"` (no launcher — the chat fills its container/viewport with a
+* Smooth-branded header, a scrollable message list, and an input bar) and
+* returns the element.
+*
+* `target` defaults to `document.body`; pass a sized container to embed the
+* full-page chat inside a layout region (e.g. a `/chat` route shell or an
+* iframe). The `mode` is forced to `"fullpage"` regardless of the passed config.
+*
+* ```ts
+* mountFullPageChat({ endpoint: 'wss://…/ws', agentId: '…', agentName: 'Support' });
+* ```
+*/
+function mountFullPageChat(config, target = document.body) {
+	return mountChatWidget({
+		...config,
+		mode: "fullpage"
+	}, target);
+}
+//#endregion
+export { ConversationController, ELEMENT_TAG, SmoothAgentChatElement, defineChatWidget, mountChatWidget, mountFullPageChat };
+
+//# sourceMappingURL=index.js.map