@smooai/chat-widget 0.3.0 → 0.5.0

package/dist/index.d.ts

@@ -113,6 +113,9 @@ declare class SmoothAgentChatElement extends HTMLElement {
   private hasSent;
   /** Starter prompts shown as chips in the empty state. */
   private examplePrompts;
+  /** Current mid-turn interrupt (OTP / tool-confirmation), or null. */
+  private interrupt;
+  private interruptEl;
   private panelEl;
   private launcherEl;
   private messagesEl;
@@ -135,6 +138,12 @@ declare class SmoothAgentChatElement extends HTMLElement {
   closeChat(): void;
   private readConfig;
   private render;
+  /**
+   * Render (or clear) the mid-turn interrupt overlay above the composer:
+   * an OTP code prompt or a tool-write confirmation. Server-supplied text is
+   * set via `textContent` (never innerHTML); only static icons use innerHTML.
+   */
+  private renderInterrupt;
   /** Collect identity from the pre-chat form, then drop into the chat view. */
   private handlePrechatSubmit;
   /** Send a starter prompt (from a chip click). */
@@ -181,6 +190,45 @@ declare function mountChatWidget(config: ChatWidgetConfig, target?: HTMLElement)
  */
 declare function mountFullPageChat(config: Omit<ChatWidgetConfig, 'mode'>, target?: HTMLElement): SmoothAgentChatElement;
 //#endregion
+//#region src/loader-core.d.ts
+/**
+ * Tiny, dependency-free deferred loader for `@smooai/chat-widget`.
+ *
+ * The recommended embed: a host includes this *small* script eagerly, and it
+ * defers injecting the real (heavier) `chat-widget.global.js` module until the
+ * page is past its critical render — so the widget never competes with the host
+ * page's LCP/TBT. It triggers the real load on the **first** of:
+ *
+ *   - `window` `load` → `requestIdleCallback` (idle time), or
+ *   - user intent (`pointerdown` / `keydown` / `scroll`), or
+ *   - an 8s fallback.
+ *
+ * After the module loads (which registers `<smooth-agent-chat>` and exposes
+ * `window.SmoothAgentChat`), it mounts the widget with the host's config.
+ *
+ * Deliberately imports nothing from the widget itself — this file must stay a
+ * few hundred bytes so including it eagerly is free.
+ *
+ * ## Config
+ * Set a global before/with the loader (any `ChatWidgetConfig`, plus an optional
+ * `src` pointing at the module bundle):
+ *
+ * ```html
+ * <script>window.SmoothAgentChatConfig = { endpoint: 'wss://…/ws', agentId: '…' };</script>
+ * <script src="https://cdn/…/chat-widget-loader.global.js" async></script>
+ * ```
+ *
+ * Or, for the simplest installs, `data-*` attributes on the loader's own tag
+ * (`data-endpoint`, `data-agent-id`, `data-primary`, `data-mode`, `data-src`).
+ * If no config is found, the module is still loaded (registering the element) so
+ * a `<smooth-agent-chat …>` placed directly in markup upgrades itself.
+ */
+/**
+ * Install the deferred loader. Idempotent per call; the IIFE entry
+ * (`loader.ts`) invokes it once on script execution.
+ */
+declare function initChatWidgetLoader(): void;
+//#endregion
 //#region src/conversation.d.ts
 type Role = 'user' | 'assistant';
 interface ChatMessage {
@@ -274,5 +322,5 @@ declare class ConversationController {
   disconnect(): void;
 }
 //#endregion
-export { type ChatMessage, type ChatWidgetConfig, type ChatWidgetMode, type ChatWidgetTheme, type Citation, type ConnectionStatus, ConversationController, type ConversationEvents, ELEMENT_TAG, type Role, SmoothAgentChatElement, defineChatWidget, mountChatWidget, mountFullPageChat };
+export { type ChatMessage, type ChatWidgetConfig, type ChatWidgetMode, type ChatWidgetTheme, type Citation, type ConnectionStatus, ConversationController, type ConversationEvents, ELEMENT_TAG, type Role, SmoothAgentChatElement, defineChatWidget, initChatWidgetLoader, mountChatWidget, mountFullPageChat };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/config.ts","../src/element.ts","../src/conversation.ts"],"mappings":"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"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/config.ts","../src/element.ts","../src/loader-core.ts","../src/conversation.ts"],"mappings":"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"}

package/dist/index.js

@@ -820,6 +820,63 @@ function buildStyles(theme, mode = "popover") {
     transform: translateY(-1px);
 }
 
+/* ─────────────── OTP / tool-confirmation interrupt ────────────────── */
+.interrupt { padding: 0 14px; }
+.int-card {
+    border: 1px solid color-mix(in srgb, var(--sac-primary) 35%, var(--sac-border));
+    background: color-mix(in srgb, var(--sac-primary) 8%, var(--sac-surface-2));
+    border-radius: 14px;
+    padding: 12px 13px;
+    animation: sac-msg-in .3s var(--sac-ease) both;
+}
+.int-head { display: flex; align-items: center; gap: 8px; }
+.int-ico { display: flex; color: var(--sac-primary); }
+.int-ico svg { width: 17px; height: 17px; }
+.int-title { font-size: 13.5px; font-weight: 650; }
+.int-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--sac-text) 80%, transparent); }
+.int-sent { margin-top: 6px; font-size: 11.5px; color: color-mix(in srgb, var(--sac-text) 60%, transparent); }
+.int-row { display: flex; gap: 8px; margin-top: 10px; }
+.int-input {
+    flex: 1;
+    min-width: 0;
+    border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
+    background: var(--sac-bg);
+    color: var(--sac-text);
+    border-radius: 10px;
+    padding: 9px 11px;
+    font-family: inherit;
+    font-size: 14px;
+    letter-spacing: .14em;
+    outline: none;
+    transition: border-color .2s ease, box-shadow .2s ease;
+}
+.int-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);
+}
+.int-btn {
+    border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
+    background: var(--sac-surface-2);
+    color: var(--sac-text);
+    border-radius: 10px;
+    padding: 9px 14px;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform .2s var(--sac-ease), background .2s ease, border-color .2s ease;
+}
+.int-btn:hover { transform: translateY(-1px); }
+.int-btn.primary {
+    border: none;
+    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);
+}
+.int-row .int-btn { flex: 1; }
+.int-row .int-input + .int-btn { flex: 0 0 auto; }
+.int-error { margin-top: 8px; font-size: 12px; color: #f87171; }
+
 .hidden { display: none !important; }
 
 @media (prefers-reduced-motion: reduce) {
@@ -854,7 +911,11 @@ const ICON = {
 	/** 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>`
+	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>`,
+	/** OTP interrupt — a padlock. */
+	lock: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="10.5" width="14" height="9.5" rx="2.2" stroke="currentColor" stroke-width="1.7"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" stroke="currentColor" stroke-width="1.7"/></svg>`,
+	/** Tool-confirmation interrupt — a shield. */
+	shield: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3 5 6v5c0 4.4 3 7.2 7 8.5 4-1.3 7-4.1 7-8.5V6l-7-3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m9 11.5 2 2 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>`
 };
 /**
 * Return `url` only if it is a valid absolute `http(s)` URL, else `null`.
@@ -891,6 +952,9 @@ var SmoothAgentChatElement = class extends HTMLElement {
 	hasSent = false;
 	/** Starter prompts shown as chips in the empty state. */
 	examplePrompts = [];
+	/** Current mid-turn interrupt (OTP / tool-confirmation), or null. */
+	interrupt = null;
+	interruptEl = null;
 	panelEl = null;
 	launcherEl = null;
 	messagesEl = null;
@@ -983,6 +1047,10 @@ var SmoothAgentChatElement = class extends HTMLElement {
 					this.status = status;
 					this.renderStatus();
 					this.renderComposerState();
+				},
+				onInterrupt: (interrupt) => {
+					this.interrupt = interrupt;
+					this.renderInterrupt();
 				}
 			});
 			if (resolved.startOpen) this.open = true;
@@ -1025,6 +1093,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
             </div>`;
 		const chatHtml = `
                 <div class="messages"></div>
+                <div class="interrupt hidden"></div>
                 <div class="composer-wrap">
                     <div class="composer">
                         <textarea rows="1" placeholder="${escapeHtml(resolved.placeholder)}"></textarea>
@@ -1051,6 +1120,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		this.dotEl = container.querySelector(".dot");
 		this.inputEl = container.querySelector("textarea");
 		this.sendBtn = container.querySelector(".send");
+		this.interruptEl = container.querySelector(".interrupt");
 		this.launcherEl?.addEventListener("click", () => this.openChat());
 		container.querySelector(".close")?.addEventListener("click", () => this.closeChat());
 		this.sendBtn?.addEventListener("click", () => this.submit());
@@ -1071,6 +1141,97 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		if (!gating) this.renderMessages(resolved.greeting);
 		this.renderStatus();
 		this.renderComposerState();
+		this.renderInterrupt();
+	}
+	/**
+	* Render (or clear) the mid-turn interrupt overlay above the composer:
+	* an OTP code prompt or a tool-write confirmation. Server-supplied text is
+	* set via `textContent` (never innerHTML); only static icons use innerHTML.
+	*/
+	renderInterrupt() {
+		const el = this.interruptEl;
+		if (!el) return;
+		el.replaceChildren();
+		const it = this.interrupt;
+		if (!it) {
+			el.classList.add("hidden");
+			return;
+		}
+		el.classList.remove("hidden");
+		const card = document.createElement("div");
+		card.className = "int-card";
+		const head = document.createElement("div");
+		head.className = "int-head";
+		const ico = document.createElement("span");
+		ico.className = "int-ico";
+		ico.innerHTML = it.kind === "otp" ? ICON.lock : ICON.shield;
+		const title = document.createElement("span");
+		title.className = "int-title";
+		title.textContent = it.kind === "otp" ? "Verification required" : "Confirm this action";
+		head.append(ico, title);
+		card.appendChild(head);
+		if (it.actionDescription) {
+			const desc = document.createElement("div");
+			desc.className = "int-desc";
+			desc.textContent = it.actionDescription;
+			card.appendChild(desc);
+		}
+		if (it.kind === "otp") {
+			if (it.sent?.maskedDestination) {
+				const sent = document.createElement("div");
+				sent.className = "int-sent";
+				sent.textContent = `Code sent to ${it.sent.maskedDestination}${it.sent.channel ? ` via ${it.sent.channel}` : ""}.`;
+				card.appendChild(sent);
+			}
+			const row = document.createElement("div");
+			row.className = "int-row";
+			const input = document.createElement("input");
+			input.className = "int-input";
+			input.type = "text";
+			input.inputMode = "numeric";
+			input.autocomplete = "one-time-code";
+			input.placeholder = "Enter code";
+			const submit = () => {
+				const code = input.value.trim();
+				if (code) this.controller?.verifyOtp(code);
+			};
+			input.addEventListener("keydown", (ev) => {
+				if (ev.key === "Enter") {
+					ev.preventDefault();
+					submit();
+				}
+			});
+			const verify = document.createElement("button");
+			verify.className = "int-btn primary";
+			verify.type = "button";
+			verify.textContent = "Verify";
+			verify.addEventListener("click", submit);
+			row.append(input, verify);
+			card.appendChild(row);
+			if (it.error) {
+				const err = document.createElement("div");
+				err.className = "int-error";
+				err.textContent = it.attemptsRemaining != null ? `${it.error} (${it.attemptsRemaining} left)` : it.error;
+				card.appendChild(err);
+			}
+			queueMicrotask(() => input.focus());
+		} else {
+			const row = document.createElement("div");
+			row.className = "int-row";
+			const decline = document.createElement("button");
+			decline.className = "int-btn";
+			decline.type = "button";
+			decline.textContent = "Decline";
+			decline.addEventListener("click", () => this.controller?.confirmTool(false));
+			const approve = document.createElement("button");
+			approve.className = "int-btn primary";
+			approve.type = "button";
+			approve.textContent = "Approve";
+			approve.addEventListener("click", () => this.controller?.confirmTool(true));
+			row.append(decline, approve);
+			card.appendChild(row);
+		}
+		el.appendChild(card);
 	}
 	/** Collect identity from the pre-chat form, then drop into the chat view. */
 	handlePrechatSubmit(form) {
@@ -1291,6 +1452,142 @@ function mountFullPageChat(config, target = document.body) {
 	}, target);
 }
 //#endregion
-export { ConversationController, ELEMENT_TAG, SmoothAgentChatElement, defineChatWidget, mountChatWidget, mountFullPageChat };
+//#region src/loader-core.ts
+/**
+* Tiny, dependency-free deferred loader for `@smooai/chat-widget`.
+*
+* The recommended embed: a host includes this *small* script eagerly, and it
+* defers injecting the real (heavier) `chat-widget.global.js` module until the
+* page is past its critical render — so the widget never competes with the host
+* page's LCP/TBT. It triggers the real load on the **first** of:
+*
+*   - `window` `load` → `requestIdleCallback` (idle time), or
+*   - user intent (`pointerdown` / `keydown` / `scroll`), or
+*   - an 8s fallback.
+*
+* After the module loads (which registers `<smooth-agent-chat>` and exposes
+* `window.SmoothAgentChat`), it mounts the widget with the host's config.
+*
+* Deliberately imports nothing from the widget itself — this file must stay a
+* few hundred bytes so including it eagerly is free.
+*
+* ## Config
+* Set a global before/with the loader (any `ChatWidgetConfig`, plus an optional
+* `src` pointing at the module bundle):
+*
+* ```html
+* <script>window.SmoothAgentChatConfig = { endpoint: 'wss://…/ws', agentId: '…' };<\/script>
+* <script src="https://cdn/…/chat-widget-loader.global.js" async><\/script>
+* ```
+*
+* Or, for the simplest installs, `data-*` attributes on the loader's own tag
+* (`data-endpoint`, `data-agent-id`, `data-primary`, `data-mode`, `data-src`).
+* If no config is found, the module is still loaded (registering the element) so
+* a `<smooth-agent-chat …>` placed directly in markup upgrades itself.
+*/
+/** Must match `ELEMENT_TAG` in `element.ts`; inlined to avoid importing it. */
+const ELEMENT_TAG$1 = "smooth-agent-chat";
+/** Default module filename, resolved as a sibling of the loader script. */
+const DEFAULT_MODULE = "chat-widget.global.js";
+/**
+* Resolve the module URL: explicit `src` (config or `data-src`) wins, else a
+* sibling of the loader script, else the bare default filename.
+*/
+function resolveModuleSrc(win, script) {
+	const fromConfig = win.SmoothAgentChatConfig?.src;
+	if (fromConfig) return fromConfig;
+	const fromAttr = script?.getAttribute("data-src");
+	if (fromAttr) return fromAttr;
+	const selfSrc = script?.src;
+	if (selfSrc) return selfSrc.replace(/[^/]*$/, DEFAULT_MODULE);
+	return DEFAULT_MODULE;
+}
+/**
+* The widget mount config: the `SmoothAgentChatConfig` global (minus the
+* loader-only `src`), or `data-*` attributes. `undefined` ⇒ no programmatic
+* mount (a markup element will upgrade itself once the module registers it).
+*/
+function resolveMountConfig(win, script) {
+	if (win.SmoothAgentChatConfig) {
+		const { src: _src, ...config } = win.SmoothAgentChatConfig;
+		return Object.keys(config).length > 0 ? config : void 0;
+	}
+	if (!script) return void 0;
+	const endpoint = script.getAttribute("data-endpoint");
+	const agentId = script.getAttribute("data-agent-id");
+	if (!endpoint && !agentId) return void 0;
+	const config = {};
+	if (endpoint) config.endpoint = endpoint;
+	if (agentId) config.agentId = agentId;
+	const primary = script.getAttribute("data-primary");
+	if (primary) config.theme = { primary };
+	const mode = script.getAttribute("data-mode");
+	if (mode) config.mode = mode;
+	return config;
+}
+/**
+* Install the deferred loader. Idempotent per call; the IIFE entry
+* (`loader.ts`) invokes it once on script execution.
+*/
+function initChatWidgetLoader() {
+	const win = window;
+	const script = document.currentScript ?? null;
+	const moduleSrc = resolveModuleSrc(win, script);
+	let loaded = false;
+	let idleId;
+	let fallbackId;
+	function mountWhenReady() {
+		const config = resolveMountConfig(win, script);
+		if (!config) return;
+		const apply = () => {
+			try {
+				win.SmoothAgentChat?.mount(config);
+			} catch (error) {
+				console.error("[chat-widget loader] mount failed", error);
+			}
+		};
+		if (win.SmoothAgentChat) apply();
+		else if (window.customElements?.whenDefined) window.customElements.whenDefined(ELEMENT_TAG$1).then(apply, apply);
+		else apply();
+	}
+	function teardown() {
+		if (idleId !== void 0) {
+			window.cancelIdleCallback?.(idleId);
+			window.clearTimeout(idleId);
+		}
+		if (fallbackId !== void 0) window.clearTimeout(fallbackId);
+		window.removeEventListener("pointerdown", load);
+		window.removeEventListener("keydown", load);
+		window.removeEventListener("scroll", load);
+	}
+	function load() {
+		if (loaded) return;
+		loaded = true;
+		teardown();
+		const tag = document.createElement("script");
+		tag.src = moduleSrc;
+		tag.onload = mountWhenReady;
+		tag.onerror = () => console.error("[chat-widget loader] failed to load", moduleSrc);
+		document.head.appendChild(tag);
+	}
+	function schedule() {
+		if (window.requestIdleCallback) idleId = window.requestIdleCallback(() => load(), { timeout: 5e3 });
+		else idleId = window.setTimeout(load, 2500);
+		fallbackId = window.setTimeout(load, 8e3);
+	}
+	window.addEventListener("pointerdown", load, {
+		once: true,
+		passive: true
+	});
+	window.addEventListener("keydown", load, { once: true });
+	window.addEventListener("scroll", load, {
+		once: true,
+		passive: true
+	});
+	if (document.readyState === "complete") schedule();
+	else window.addEventListener("load", schedule, { once: true });
+}
+//#endregion
+export { ConversationController, ELEMENT_TAG, SmoothAgentChatElement, defineChatWidget, initChatWidgetLoader, mountChatWidget, mountFullPageChat };
 
 //# sourceMappingURL=index.js.map