@smooai/chat-widget 0.10.2 → 0.12.0

package/README.md

@@ -186,6 +186,9 @@ mountChatWidget({
 ```
 
 - **`examplePrompts`** render as clickable chips in the empty state (max 5).
+- **`showSuggestedReplies`** (default `true`) shows mid-conversation suggested-reply
+  chips under the latest assistant message when the agent returns follow-up
+  suggestions; tapping one sends it. Set `false` to hide them.
 - **`requireName` / `requireEmail` / `requirePhone`** show a styled pre-chat form;
   the collected name/email are attached to the conversation session (phone rides
   session metadata). Set **`allowAnonymous: true`** to skip the form.

package/dist/chat-widget.global.js

@@ -11774,6 +11774,7 @@ var SmoothAgentChat = (function(exports) {
 			startOpen: config.startOpen ?? false,
 			hideBranding: config.hideBranding ?? false,
 			examplePrompts: (config.examplePrompts ?? []).filter((p) => p.trim().length > 0).slice(0, 5),
+			showSuggestedReplies: config.showSuggestedReplies ?? true,
 			requireName: config.requireName ?? false,
 			requireEmail: config.requireEmail ?? false,
 			requirePhone: config.requirePhone ?? false,
@@ -11841,7 +11842,7 @@ var SmoothAgentChat = (function(exports) {
 		}) : e[r] = t, e;
 	}
 	//#endregion
-	//#region node_modules/.pnpm/@smooai+smooth-operator@1.8.0/node_modules/@smooai/smooth-operator/dist/transport.js
+	//#region node_modules/.pnpm/@smooai+smooth-operator@1.21.1/node_modules/@smooai/smooth-operator/dist/transport.js
 	/**
 	* Transport abstraction for the client.
 	*
@@ -11966,7 +11967,7 @@ var SmoothAgentChat = (function(exports) {
 		}
 	};
 	//#endregion
-	//#region node_modules/.pnpm/@smooai+smooth-operator@1.8.0/node_modules/@smooai/smooth-operator/dist/types.js
+	//#region node_modules/.pnpm/@smooai+smooth-operator@1.21.1/node_modules/@smooai/smooth-operator/dist/types.js
 	/** Every server→client `type` discriminator value. */
 	const EVENT_TYPES = [
 		"immediate_response",
@@ -11979,6 +11980,8 @@ var SmoothAgentChat = (function(exports) {
 		"otp_sent",
 		"otp_verified",
 		"otp_invalid",
+		"interaction_required",
+		"interaction_invalid",
 		"error",
 		"pong"
 	];
@@ -11987,7 +11990,7 @@ var SmoothAgentChat = (function(exports) {
 		return typeof frame === "object" && frame !== null && "type" in frame && typeof frame.type === "string" && EVENT_TYPES.includes(frame.type);
 	}
 	//#endregion
-	//#region node_modules/.pnpm/@smooai+smooth-operator@1.8.0/node_modules/@smooai/smooth-operator/dist/client.js
+	//#region node_modules/.pnpm/@smooai+smooth-operator@1.21.1/node_modules/@smooai/smooth-operator/dist/client.js
 	/**
 	* SmoothAgentClient — a minimal, idiomatic, transport-agnostic client for the
 	* smooth-operator WebSocket protocol.
@@ -12272,6 +12275,20 @@ var SmoothAgentChat = (function(exports) {
 				...req
 			}));
 		}
+		/**
+		* Submit (or decline) a Rich Interaction, resuming the turn parked by an
+		* `interaction_required` event. This ONE verb serves every interaction kind
+		* (identity intake, future date pickers, choice chips, …) — adding a kind
+		* needs no new client method. Server-side validation may reply with an
+		* `interaction_invalid` event (the turn stays parked — resubmit); a valid
+		* submit resumes the stream back into the original {@link MessageTurn}.
+		*/
+		submitInteraction(req) {
+			this.transport.send(JSON.stringify({
+				action: "submit_interaction",
+				...req
+			}));
+		}
 		/** Send an action that expects a single correlated response event. */
 		request(action) {
 			const requestId = action.requestId ?? this.generateRequestId();
@@ -12854,6 +12871,13 @@ var SmoothAgentChat = (function(exports) {
 			return null;
 		}
 	}
+	/**
+	* The Rich-Interaction render capabilities this widget declares at session
+	* create (`supports`). Must stay aligned with the card registry in
+	* `element.ts` (`INTERACTION_CARDS`) — registering a card IS declaring its
+	* capability; a test asserts the two match.
+	*/
+	const SUPPORTED_INTERACTION_CAPABILITIES = ["identity_form"];
 	/** Pull the final assistant text out of an `eventual_response` data payload. */
 	function extractFinalText(response) {
 		if (!response || typeof response !== "object") return null;
@@ -12894,6 +12918,19 @@ var SmoothAgentChat = (function(exports) {
 		}
 		return out;
 	}
+	/**
+	* Pull the suggested follow-up replies out of a terminal `eventual_response`'s
+	* `response` object (`response.suggestedNextActions`). Optional + back-compatible
+	* like citations — read defensively (tolerating absence, non-array shapes, and
+	* non-string / blank entries) and capped at 4 so a chatty agent can't overflow
+	* the composer chip row.
+	*/
+	function extractSuggestions(response) {
+		if (!response || typeof response !== "object") return [];
+		const raw = response.suggestedNextActions;
+		if (!Array.isArray(raw)) return [];
+		return raw.filter((s) => typeof s === "string" && s.trim().length > 0).slice(0, 4);
+	}
 	/** Convert a server message row into a finalized {@link ChatMessage}. */
 	function wireMessageToChat(m, idx) {
 		const text = typeof m.content?.text === "string" ? m.content.text : "";
@@ -12918,6 +12955,7 @@ var SmoothAgentChat = (function(exports) {
 			_defineProperty(this, "seq", 0);
 			_defineProperty(this, "activeRequestId", null);
 			_defineProperty(this, "interrupt", null);
+			_defineProperty(this, "pendingInteractionValues", null);
 			_defineProperty(this, "identityRestore", { phase: "idle" });
 			_defineProperty(this, "resumeAttempted", false);
 			_defineProperty(this, "httpBase", void 0);
@@ -12996,6 +13034,40 @@ var SmoothAgentChat = (function(exports) {
 			});
 			this.setInterrupt(null);
 		}
+		/**
+		* Submit a Rich Interaction card to resume the parked turn. The server
+		* routes to the kind's validator: invalid values come back as an
+		* `interaction_invalid` event (the card re-renders with per-field errors —
+		* the turn stays parked); a valid submit is acked and the turn resumes.
+		* No-op if not awaiting an interaction.
+		*/
+		submitInteraction(values) {
+			if (!this.client || !this.sessionId || !this.activeRequestId || this.interrupt?.kind !== "interaction") return;
+			this.pendingInteractionValues = {
+				kind: this.interrupt.interactionKind,
+				values
+			};
+			this.client.submitInteraction({
+				sessionId: this.sessionId,
+				requestId: this.activeRequestId,
+				interactionId: this.interrupt.interactionId,
+				kind: this.interrupt.interactionKind,
+				values
+			});
+		}
+		/** Decline the pending Rich Interaction; the agent continues without it. */
+		declineInteraction() {
+			if (!this.client || !this.sessionId || !this.activeRequestId || this.interrupt?.kind !== "interaction") return;
+			this.client.submitInteraction({
+				sessionId: this.sessionId,
+				requestId: this.activeRequestId,
+				interactionId: this.interrupt.interactionId,
+				kind: this.interrupt.interactionKind,
+				declined: true
+			});
+			this.pendingInteractionValues = null;
+			this.setInterrupt(null);
+		}
 		nextId(prefix) {
 			this.seq += 1;
 			return `${prefix}-${this.seq}-${Date.now().toString(36)}`;
@@ -13160,6 +13232,7 @@ var SmoothAgentChat = (function(exports) {
 				userName: state.identity.name,
 				userEmail: state.identity.email,
 				browserFingerprint: this.fingerprint(),
+				supports: [...SUPPORTED_INTERACTION_CAPABILITIES],
 				...metadata ? { metadata } : {}
 			});
 			this.sessionId = session.sessionId;
@@ -13244,6 +13317,8 @@ var SmoothAgentChat = (function(exports) {
 				if (!assistant.text) assistant.text = "(no response)";
 				const citations = extractCitations(inner);
 				if (citations.length > 0) assistant.citations = citations;
+				const suggestions = extractSuggestions(inner?.response);
+				if (suggestions.length > 0) assistant.suggestions = suggestions;
 				assistant.streaming = false;
 				this.emitMessages();
 			} catch (err) {
@@ -13300,6 +13375,55 @@ var SmoothAgentChat = (function(exports) {
 						actionDescription: str(inner.actionDescription)
 					});
 					break;
+				case "interaction_required": {
+					const interactionId = str(inner.interactionId);
+					const kind = str(inner.kind);
+					const spec = inner.spec && typeof inner.spec === "object" ? inner.spec : {};
+					if (!interactionId || !kind) break;
+					this.pendingInteractionValues = null;
+					this.setInterrupt({
+						kind: "interaction",
+						interactionId,
+						interactionKind: kind,
+						spec,
+						reason: str(inner.reason)
+					});
+					break;
+				}
+				case "interaction_invalid":
+					if (this.interrupt?.kind === "interaction" && this.interrupt.interactionId === str(inner.interactionId)) {
+						const errors = [];
+						if (Array.isArray(inner.errors)) for (const e of inner.errors) {
+							if (!e || typeof e !== "object") continue;
+							const o = e;
+							const field = str(o.field);
+							if (field) errors.push({
+								field,
+								message: str(o.message) ?? "Invalid value"
+							});
+						}
+						this.pendingInteractionValues = null;
+						this.setInterrupt({
+							...this.interrupt,
+							errors
+						});
+					}
+					break;
+				case "immediate_response":
+					if (this.interrupt?.kind === "interaction") {
+						const pending = this.pendingInteractionValues;
+						if (pending && pending.kind === "identity_intake") {
+							const v = pending.values;
+							this.store.getState().mergeIdentity({
+								name: v.name,
+								email: v.email,
+								phone: v.phone
+							});
+						}
+						this.pendingInteractionValues = null;
+						this.setInterrupt(null);
+					}
+					break;
 				default: break;
 			}
 		}
@@ -14074,6 +14198,10 @@ ${mode === "fullpage" ? `
     transform: translateY(-1px);
 }
 
+/* ───────────── Mid-conversation suggested-reply chips ─────────────── */
+.reply-suggestions { padding: 0 14px 4px; }
+.reply-suggestions:empty { display: none; }
+
 /* ─────────────── OTP / tool-confirmation interrupt ────────────────── */
 .interrupt { padding: 0 14px; }
 .int-card {
@@ -14108,6 +14236,9 @@ ${mode === "fullpage" ? `
     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-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.int-form .pc-field input { width: 100%; box-sizing: border-box; }
+.int-form .int-error { margin-top: 2px; }
 .int-btn {
     border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
     background: var(--sac-surface-2);
@@ -14127,8 +14258,14 @@ ${mode === "fullpage" ? `
     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-row .int-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.int-form .pc-field input { width: 100%; box-sizing: border-box; }
+.int-form .int-error { margin-top: 2px; }
+.int-btn { flex: 1; }
+.int-row .int-input + .int-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.int-form .pc-field input { width: 100%; box-sizing: border-box; }
+.int-form .int-error { margin-top: 2px; }
+.int-btn { flex: 0 0 auto; }
 .int-error { margin-top: 8px; font-size: 12px; color: #f87171; }
 .int-card { position: relative; }
 .int-close {
@@ -14266,9 +14403,139 @@ ${mode === "fullpage" ? `
 		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>`,
+		/** Identity-intake interrupt — a person. */
+		user: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="8.2" r="3.4" stroke="currentColor" stroke-width="1.7"/><path d="M5.5 19.5c.8-3.1 3.4-4.8 6.5-4.8s5.7 1.7 6.5 4.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></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>`
 	};
+	/**
+	* The identity_intake card: the fields the agent requested (pre-chat form field
+	* pattern — same classes, same phone formatting), per-field server errors, a
+	* submit and a decline affordance. Server-supplied text (reason, labels, error
+	* messages) is set via `textContent` — never innerHTML.
+	*/
+	function buildIdentityIntakeCard(it, ctx) {
+		const form = document.createElement("form");
+		form.className = "int-form";
+		form.noValidate = true;
+		if (it.reason) {
+			const desc = document.createElement("div");
+			desc.className = "int-desc";
+			desc.textContent = it.reason;
+			form.appendChild(desc);
+		}
+		const DEFAULTS = {
+			name: {
+				label: "Name",
+				type: "text",
+				autocomplete: "name"
+			},
+			email: {
+				label: "Email",
+				type: "email",
+				autocomplete: "email"
+			},
+			phone: {
+				label: "Phone",
+				type: "tel",
+				autocomplete: "tel"
+			}
+		};
+		const rawFields = Array.isArray(it.spec.fields) ? it.spec.fields : [];
+		const fields = [];
+		for (const f of rawFields) {
+			if (!f || typeof f !== "object") continue;
+			const o = f;
+			const key = typeof o.key === "string" ? o.key : "";
+			if (key !== "name" && key !== "email" && key !== "phone") continue;
+			fields.push({
+				key,
+				required: o.required === true,
+				label: typeof o.label === "string" ? o.label : void 0
+			});
+		}
+		if (fields.length === 0) fields.push({
+			key: "email",
+			required: true
+		});
+		for (const f of fields) {
+			const d = DEFAULTS[f.key];
+			const label = document.createElement("label");
+			label.className = "pc-field";
+			const caption = document.createElement("span");
+			caption.textContent = f.label ?? d.label;
+			const input = document.createElement("input");
+			input.name = f.key;
+			input.type = d.type;
+			input.setAttribute("autocomplete", d.autocomplete);
+			input.required = f.required;
+			const prefill = ctx.prefill[f.key];
+			if (prefill) input.value = prefill;
+			label.append(caption, input);
+			if (f.key === "phone") {
+				const hint = document.createElement("span");
+				hint.className = "pc-hint";
+				hint.setAttribute("aria-live", "polite");
+				label.appendChild(hint);
+			}
+			const serverError = it.errors?.find((e) => e.field === f.key);
+			if (serverError) {
+				label.classList.add("invalid");
+				const err = document.createElement("span");
+				err.className = "int-error";
+				err.textContent = serverError.message;
+				label.appendChild(err);
+			}
+			form.appendChild(label);
+		}
+		const row = document.createElement("div");
+		row.className = "int-row";
+		const decline = document.createElement("button");
+		decline.className = "int-btn";
+		decline.type = "button";
+		decline.textContent = "No thanks";
+		decline.addEventListener("click", () => ctx.decline());
+		const share = document.createElement("button");
+		share.className = "int-btn primary";
+		share.type = "submit";
+		share.textContent = "Share details";
+		row.append(decline, share);
+		form.appendChild(row);
+		form.addEventListener("submit", (ev) => {
+			ev.preventDefault();
+			if (!form.reportValidity()) return;
+			const data = new FormData(form);
+			const val = (k) => data.get(k)?.trim() || void 0;
+			const rawPhone = val("phone");
+			const phoneInput = form.querySelector("input[name=\"phone\"]");
+			if (rawPhone && phoneInput && !isValidPhoneNumber(rawPhone, PHONE_DEFAULT_REGION)) {
+				const field = phoneInput.closest(".pc-field");
+				field?.classList.add("invalid");
+				const hint = field?.querySelector(".pc-hint");
+				if (hint) hint.textContent = "Enter a valid phone number";
+				if (phoneInput.hasAttribute("required")) {
+					phoneInput.focus();
+					return;
+				}
+			}
+			const phone = rawPhone ? phoneToE164(rawPhone) ?? rawPhone : void 0;
+			ctx.submit({
+				name: val("name"),
+				email: val("email"),
+				phone
+			});
+		});
+		ctx.wirePhoneField(form);
+		queueMicrotask(() => form.querySelector("input")?.focus());
+		return form;
+	}
+	/** Kind → card. See the registry doc above. */
+	const INTERACTION_CARDS = { identity_intake: {
+		capability: "identity_form",
+		title: "Share your details",
+		icon: ICON.user,
+		build: buildIdentityIntakeCard
+	} };
 	var SmoothAgentChatElement = class extends HTMLElement {
 		static get observedAttributes() {
 			return OBSERVED;
@@ -14285,6 +14552,7 @@ ${mode === "fullpage" ? `
 			_defineProperty(this, "userInfoSatisfied", false);
 			_defineProperty(this, "hasSent", false);
 			_defineProperty(this, "examplePrompts", []);
+			_defineProperty(this, "showSuggestedReplies", true);
 			_defineProperty(this, "greeting", "");
 			_defineProperty(this, "interrupt", null);
 			_defineProperty(this, "interruptEl", null);
@@ -14298,6 +14566,7 @@ ${mode === "fullpage" ? `
 			_defineProperty(this, "dotEl", null);
 			_defineProperty(this, "inputEl", null);
 			_defineProperty(this, "sendBtn", null);
+			_defineProperty(this, "suggestionsEl", null);
 			_defineProperty(this, "streamBubbleEl", null);
 			_defineProperty(this, "streamMsgId", null);
 			_defineProperty(this, "streamTarget", "");
@@ -14366,6 +14635,7 @@ ${mode === "fullpage" ? `
 				startOpen: this.overrides.startOpen ?? this.hasAttribute("start-open"),
 				hideBranding: this.overrides.hideBranding ?? this.hasAttribute("hide-branding"),
 				examplePrompts: this.overrides.examplePrompts,
+				showSuggestedReplies: this.overrides.showSuggestedReplies,
 				requireName: this.overrides.requireName,
 				requireEmail: this.overrides.requireEmail,
 				requirePhone: this.overrides.requirePhone,
@@ -14397,10 +14667,12 @@ ${mode === "fullpage" ? `
 					onInterrupt: (interrupt) => {
 						this.interrupt = interrupt;
 						this.renderInterrupt();
+						this.renderSuggestions();
 					},
 					onIdentityRestore: (state) => {
 						this.identityRestore = state;
 						this.renderInterrupt();
+						this.renderSuggestions();
 					}
 				});
 				if (resolved.startOpen) this.open = true;
@@ -14428,6 +14700,7 @@ ${mode === "fullpage" ? `
                     <button class="close" aria-label="Close chat">${ICON.close}</button>
                 </div>`;
 			this.examplePrompts = resolved.examplePrompts;
+			this.showSuggestedReplies = resolved.showSuggestedReplies;
 			this.greeting = resolved.greeting;
 			const gating = needsUserInfo(resolved) && !this.userInfoSatisfied;
 			this.gating = gating;
@@ -14456,6 +14729,7 @@ ${mode === "fullpage" ? `
 			const footerHtml = footerInner ? `<div class="footer">${footerInner}</div>` : "";
 			const chatHtml = `
                 <div class="messages"></div>
+                <div class="reply-suggestions"></div>
                 <div class="interrupt hidden"></div>
                 <div class="composer-wrap">
                     <div class="composer">
@@ -14486,6 +14760,7 @@ ${mode === "fullpage" ? `
 			this.inputEl = container.querySelector("textarea");
 			this.sendBtn = container.querySelector(".send");
 			this.interruptEl = container.querySelector(".interrupt");
+			this.suggestionsEl = container.querySelector(".reply-suggestions");
 			this.launcherEl?.addEventListener("click", () => this.openChat());
 			container.querySelector(".close")?.addEventListener("click", () => this.closeChat());
 			this.sendBtn?.addEventListener("click", () => this.submit());
@@ -14543,19 +14818,31 @@ ${mode === "fullpage" ? `
 			head.className = "int-head";
 			const ico = document.createElement("span");
 			ico.className = "int-ico";
-			ico.innerHTML = it.kind === "otp" ? ICON.lock : ICON.shield;
+			const card_meta = it.kind === "interaction" ? INTERACTION_CARDS[it.interactionKind] : void 0;
+			if (it.kind === "interaction" && !card_meta) {
+				this.controller?.declineInteraction();
+				el.classList.add("hidden");
+				return;
+			}
+			ico.innerHTML = it.kind === "otp" ? ICON.lock : it.kind === "interaction" ? card_meta?.icon ?? ICON.user : ICON.shield;
 			const title = document.createElement("span");
 			title.className = "int-title";
-			title.textContent = it.kind === "otp" ? "Verification required" : "Confirm this action";
+			title.textContent = it.kind === "otp" ? "Verification required" : it.kind === "interaction" ? card_meta?.title ?? "One more thing" : "Confirm this action";
 			head.append(ico, title);
 			card.appendChild(head);
-			if (it.actionDescription) {
+			if (it.kind !== "interaction" && it.actionDescription) {
 				const desc = document.createElement("div");
 				desc.className = "int-desc";
 				desc.textContent = it.actionDescription;
 				card.appendChild(desc);
 			}
-			if (it.kind === "otp") {
+			if (it.kind === "interaction") card.appendChild(card_meta.build(it, {
+				submit: (values) => this.controller?.submitInteraction(values),
+				decline: () => this.controller?.declineInteraction(),
+				prefill: this.controller?.getStore().getState().identity ?? {},
+				wirePhoneField: (form) => this.wirePhoneField(form)
+			}));
+			else if (it.kind === "otp") {
 				if (it.sent?.maskedDestination) {
 					const sent = document.createElement("div");
 					sent.className = "int-sent";
@@ -14940,6 +15227,36 @@ ${mode === "fullpage" ? `
 				if (msg.role === "assistant" && !msg.streaming && msg.citations && msg.citations.length > 0) this.messagesEl.appendChild(this.renderSources(msg.citations));
 			}
 			this.scrollToBottom(true);
+			this.renderSuggestions();
+		}
+		/**
+		* Render (or clear) the mid-conversation suggested-reply chips under the
+		* composer. Shown ONLY when: the feature is enabled, no interrupt / restore
+		* overlay is active (those reuse the slot above the composer), and the LATEST
+		* message is a finalized assistant turn that carried suggestions. A new turn
+		* (agent or the visitor typing) appends messages, so the latest is no longer
+		* that assistant message and the chips clear on the next render. Chips reuse
+		* the empty-state `.prompts`/`.chip` styling and send via the same path.
+		*/
+		renderSuggestions() {
+			const el = this.suggestionsEl;
+			if (!el) return;
+			el.replaceChildren();
+			if (!this.showSuggestedReplies) return;
+			if (this.interrupt || this.identityRestore.phase !== "idle") return;
+			const last = this.messages[this.messages.length - 1];
+			if (!last || last.role !== "assistant" || last.streaming || !last.suggestions || last.suggestions.length === 0) return;
+			const chips = document.createElement("div");
+			chips.className = "prompts";
+			for (const suggestion of last.suggestions) {
+				const chip = document.createElement("button");
+				chip.type = "button";
+				chip.className = "chip";
+				chip.textContent = suggestion;
+				chip.addEventListener("click", () => this.submitPrompt(suggestion));
+				chips.appendChild(chip);
+			}
+			el.appendChild(chips);
 		}
 		/** True when the host/user prefers reduced motion (snap, no typewriter). */
 		prefersReducedMotion() {