@smooai/chat-widget 0.3.0 → 0.4.0

package/README.md

@@ -155,12 +155,15 @@ mountChatWidget({
   the collected name/email are attached to the conversation session (phone rides
   session metadata). Set **`allowAnonymous: true`** to skip the form.
 
-### OTP & tool confirmation (programmatic)
-
-The `ConversationController` surfaces mid-turn pauses via an `onInterrupt`
-callback — `otp_verification_required` and `write_confirmation_required` — and
-resumes them with `verifyOtp(code)` / `confirmTool(approved)`. (A built-in dialog
-UI for these is on the roadmap; the protocol plumbing ships today.)
+### OTP & tool confirmation (HITL)
+
+When a turn pauses for **OTP verification** or a **tool-write approval**, the
+widget shows an inline overlay above the composer — an OTP code prompt (with
+masked destination + retry state) or an Approve/Decline confirmation — and
+resumes the turn automatically. Under the hood the `ConversationController`
+surfaces `otp_verification_required` / `write_confirmation_required` via an
+`onInterrupt` callback and resumes with `verifyOtp(code)` / `confirmTool(approved)`,
+so you can also drive it programmatically.
 
 ## Full-page mode
 

package/dist/chat-widget.global.js

@@ -1305,6 +1305,63 @@ var SmoothAgentChat = (function(exports) {
     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) {
@@ -1339,7 +1396,11 @@ var SmoothAgentChat = (function(exports) {
 		/** 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`.
@@ -1376,6 +1437,9 @@ var SmoothAgentChat = (function(exports) {
 		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;
@@ -1468,6 +1532,10 @@ var SmoothAgentChat = (function(exports) {
 						this.status = status;
 						this.renderStatus();
 						this.renderComposerState();
+					},
+					onInterrupt: (interrupt) => {
+						this.interrupt = interrupt;
+						this.renderInterrupt();
 					}
 				});
 				if (resolved.startOpen) this.open = true;
@@ -1510,6 +1578,7 @@ var SmoothAgentChat = (function(exports) {
             </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>
@@ -1536,6 +1605,7 @@ var SmoothAgentChat = (function(exports) {
 			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());
@@ -1556,6 +1626,97 @@ var SmoothAgentChat = (function(exports) {
 			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) {