@smooai/chat-widget 0.3.0 → 0.5.0

package/src/element.ts

@@ -16,7 +16,7 @@
  */
 import type { ChatWidgetConfig, ChatWidgetMode, ChatWidgetTheme } from './config.js';
 import { needsUserInfo, resolveConfig } from './config.js';
-import { type ChatMessage, type Citation, type ConnectionStatus, ConversationController } from './conversation.js';
+import { type ChatMessage, type Citation, type ConnectionStatus, ConversationController, type Interrupt } from './conversation.js';
 import { SMOOTH_LOGO_SVG } from './logo.js';
 import { buildStyles } from './styles.js';
 
@@ -39,6 +39,10 @@ const ICON = {
     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>`,
+    /** 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>`,
 } as const;
 
 /**
@@ -78,6 +82,9 @@ export class SmoothAgentChatElement extends HTMLElement {
     private hasSent = false;
     /** Starter prompts shown as chips in the empty state. */
     private examplePrompts: string[] = [];
+    /** Current mid-turn interrupt (OTP / tool-confirmation), or null. */
+    private interrupt: Interrupt | null = null;
+    private interruptEl: HTMLElement | null = null;
 
     // Cached DOM refs (populated in render()).
     private panelEl: HTMLElement | null = null;
@@ -187,6 +194,10 @@ export class SmoothAgentChatElement extends HTMLElement {
                     this.renderStatus();
                     this.renderComposerState();
                 },
+                onInterrupt: (interrupt) => {
+                    this.interrupt = interrupt;
+                    this.renderInterrupt();
+                },
             });
             if (resolved.startOpen) this.open = true;
         }
@@ -243,6 +254,7 @@ export class SmoothAgentChatElement 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>
@@ -274,6 +286,7 @@ export class SmoothAgentChatElement 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());
@@ -300,6 +313,103 @@ export class SmoothAgentChatElement 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.
+     */
+    private renderInterrupt(): void {
+        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; // static, trusted
+        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. */

package/src/index.ts

@@ -27,6 +27,10 @@ export {
     mountFullPageChat,
 } from './element.js';
 export type { ChatWidgetConfig, ChatWidgetMode, ChatWidgetTheme } from './config.js';
+// The deferred loader (also shipped as the `./loader` IIFE for `<script>` embeds):
+// installs the idle/intent/fallback scheduler that lazily injects the widget
+// module so it never competes with the host page's LCP/TBT.
+export { initChatWidgetLoader } from './loader-core.js';
 export {
     ConversationController,
     type ChatMessage,

package/src/loader-core.ts

@@ -0,0 +1,161 @@
+/**
+ * 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 = 'smooth-agent-chat';
+/** Default module filename, resolved as a sibling of the loader script. */
+const DEFAULT_MODULE = 'chat-widget.global.js';
+
+type MountFn = (config: Record<string, unknown>, target?: HTMLElement) => unknown;
+
+interface LoaderWindow extends Window {
+    SmoothAgentChat?: { mount: MountFn };
+    SmoothAgentChatConfig?: Record<string, unknown> & { src?: string };
+}
+
+/**
+ * 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: LoaderWindow, script: HTMLScriptElement | null): string {
+    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: LoaderWindow, script: HTMLScriptElement | null): Record<string, unknown> | undefined {
+    if (win.SmoothAgentChatConfig) {
+        const { src: _src, ...config } = win.SmoothAgentChatConfig;
+        // Only `src` (no real fields) ⇒ no programmatic mount; a markup element
+        // upgrades itself once the module registers it.
+        return Object.keys(config).length > 0 ? config : undefined;
+    }
+    if (!script) return undefined;
+    const endpoint = script.getAttribute('data-endpoint');
+    const agentId = script.getAttribute('data-agent-id');
+    if (!endpoint && !agentId) return undefined;
+    const config: Record<string, unknown> = {};
+    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.
+ */
+export function initChatWidgetLoader(): void {
+    const win = window as LoaderWindow;
+    const script = (document.currentScript as HTMLScriptElement | null) ?? null;
+    const moduleSrc = resolveModuleSrc(win, script);
+
+    let loaded = false;
+    let idleId: number | undefined;
+    let fallbackId: number | undefined;
+
+    function mountWhenReady(): void {
+        const config = resolveMountConfig(win, script);
+        if (!config) return; // markup element upgrades itself; nothing to mount
+        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).then(apply, apply);
+        } else {
+            apply();
+        }
+    }
+
+    function teardown(): void {
+        if (idleId !== undefined) {
+            // The id is either an idle handle or (fallback path) a timeout id;
+            // both cancels are no-ops on the wrong kind, so calling both is safe.
+            window.cancelIdleCallback?.(idleId);
+            window.clearTimeout(idleId);
+        }
+        if (fallbackId !== undefined) window.clearTimeout(fallbackId);
+        window.removeEventListener('pointerdown', load);
+        window.removeEventListener('keydown', load);
+        window.removeEventListener('scroll', load);
+    }
+
+    function load(): void {
+        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(): void {
+        if (window.requestIdleCallback) {
+            idleId = window.requestIdleCallback(() => load(), { timeout: 5000 });
+        } else {
+            idleId = window.setTimeout(load, 2500) as unknown as number;
+        }
+        fallbackId = window.setTimeout(load, 8000) as unknown as number;
+    }
+
+    // User intent loads immediately (they're about to want the widget).
+    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 });
+    }
+}

package/src/loader.ts

@@ -0,0 +1,17 @@
+/**
+ * Standalone IIFE entry for the **deferred loader** — built to
+ * `dist/chat-widget-loader.global.js`.
+ *
+ * This is the recommended embed: include it eagerly (it's tiny) and it lazily
+ * injects the real `chat-widget.global.js` module only once the host page is
+ * past its critical render (idle / user intent / 8s fallback), so the widget
+ * never competes with the host's LCP/TBT. See {@link initChatWidgetLoader}.
+ *
+ * ```html
+ * <script>window.SmoothAgentChatConfig = { endpoint: 'wss://…/ws', agentId: '…' };</script>
+ * <script src="https://cdn/…/chat-widget-loader.global.js" async></script>
+ * ```
+ */
+import { initChatWidgetLoader } from './loader-core.js';
+
+initChatWidgetLoader();

package/src/styles.ts

@@ -508,6 +508,63 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
     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) {