@smooai/chat-widget 0.10.1 → 0.11.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.
@@ -228,6 +231,7 @@ Declarative attributes mirror the programmatic [`ChatWidgetConfig`](./src/config
 | `greeting`      | `greeting`       | Shown before the first message.                    |
 | `mode`          | `mode`           | `popover` (default) or `fullpage`.                 |
 | `start-open`    | `startOpen`      | Open the panel immediately (no launcher click).    |
+| `hide-branding` | `hideBranding`   | Hide the "powered by smooth-operator" tag + footer link. Default shown. |
 | —               | `theme`          | Brand colors (see [Theming](#theming)).            |
 | —               | `userName` / `userEmail` | Optional participant identity.             |
 

package/dist/chat-widget.global.js

@@ -11772,7 +11772,9 @@ var SmoothAgentChat = (function(exports) {
 			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,
+			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,
@@ -12893,6 +12895,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 : "";
@@ -13243,6 +13258,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) {
@@ -13707,7 +13724,8 @@ ${mode === "fullpage" ? `
 }
 .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; }
+.powered { margin-left: auto; font-size: 10.5px; letter-spacing: .02em; opacity: .6; color: inherit; text-decoration: none; }
+.powered:hover { opacity: .85; text-decoration: underline; }
 .header-sep { height: 1px; margin: 0 16px; background: linear-gradient(90deg, transparent, var(--sac-border), transparent); }
 
 /* Full-page header: taller, logo-led, no close. */
@@ -13979,6 +13997,8 @@ ${mode === "fullpage" ? `
     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); }
+.footer a { color: inherit; text-decoration: none; }
+.footer a:hover { text-decoration: underline; }
 
 /* ─────────────────── Pre-chat identity form ───────────────────────── */
 .prechat { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 22px 20px; }
@@ -14070,6 +14090,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 {
@@ -14232,6 +14256,8 @@ ${mode === "fullpage" ? `
 			return null;
 		}
 	}
+	/** Public smooth-operator repo — the "powered by" header tag + footer link here. */
+	const SMOOTH_OPERATOR_URL = "https://github.com/SmooAI/smooth-operator";
 	const OBSERVED = [
 		"endpoint",
 		"agent-id",
@@ -14240,7 +14266,8 @@ ${mode === "fullpage" ? `
 		"placeholder",
 		"greeting",
 		"start-open",
-		"mode"
+		"mode",
+		"hide-branding"
 	];
 	/**
 	* Inline SVG icons (static, trusted strings — never interpolated with user data).
@@ -14278,6 +14305,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);
@@ -14291,6 +14319,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", "");
@@ -14357,7 +14386,9 @@ ${mode === "fullpage" ? `
 				greeting: this.overrides.greeting ?? this.getAttribute("greeting") ?? void 0,
 				connectionErrorMessage: this.overrides.connectionErrorMessage,
 				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,
@@ -14389,10 +14420,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;
@@ -14410,7 +14443,7 @@ ${mode === "fullpage" ? `
                         <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>
+                    ${resolved.hideBranding ? "" : `<a class="powered" href="${SMOOTH_OPERATOR_URL}" target="_blank" rel="noopener noreferrer">powered by smooth-operator</a>`}
                 </div>` : `<div class="header">
                     <div class="avatar">${monogram}</div>
                     <div class="meta">
@@ -14420,6 +14453,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;
@@ -14444,16 +14478,18 @@ ${mode === "fullpage" ? `
                     <button type="submit" class="pc-submit">Start chat</button>
                 </form>
             </div>`;
-			const restoreLink = this.allowChatRestore ? ` · <button type="button" class="restore-link">Restore my chats</button>` : "";
+			const footerInner = [resolved.hideBranding ? "" : `<a href="${SMOOTH_OPERATOR_URL}" target="_blank" rel="noopener noreferrer">powered by <b>smooth&#8209;operator</b></a>`, this.allowChatRestore ? `<button type="button" class="restore-link">Restore my chats</button>` : ""].filter(Boolean).join(" · ");
+			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">
                         <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>${restoreLink}</div>
+                    ${footerHtml}
                 </div>`;
 			const container = document.createElement("div");
 			container.className = "wrap";
@@ -14477,6 +14513,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());
@@ -14931,6 +14968,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() {