@smooai/chat-widget 0.10.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smooai/chat-widget",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Embeddable AI chat as a framework-light web component — the Aurora Glass design, streaming replies, grounded sources, and per-brand theming. Speaks the smooth-operator WebSocket protocol.",
   "license": "MIT",
   "author": "SmooAI",

package/src/config.ts

@@ -95,11 +95,23 @@ export interface ChatWidgetConfig {
     connectionErrorMessage?: string;
     /** Start the panel open instead of collapsed to the launcher. */
     startOpen?: boolean;
+    /**
+     * Hide the "powered by smooth-operator" branding in the header tag and the
+     * composer footer. Defaults to `false` (branding shown). The `hide-branding`
+     * HTML attribute maps to this.
+     */
+    hideBranding?: boolean;
     /**
      * Suggested starter prompts shown as clickable chips before the first message.
      * Clicking one sends it. Capped at 5 for layout.
      */
     examplePrompts?: string[];
+    /**
+     * Show mid-conversation suggested-reply chips ("quick replies") under the
+     * latest assistant message when the agent returns follow-up suggestions.
+     * Clicking one sends it. Defaults to `true` (shown unless explicitly `false`).
+     */
+    showSuggestedReplies?: boolean;
     /** Require the visitor's name before chatting. */
     requireName?: boolean;
     /** Require the visitor's email before chatting. */
@@ -172,7 +184,9 @@ export function resolveConfig(config: ChatWidgetConfig): ResolvedConfig {
         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,

package/src/conversation.ts

@@ -75,6 +75,13 @@ export interface ChatMessage {
      * defensively off the terminal event — see {@link extractCitations}.
      */
     citations?: Citation[];
+    /**
+     * Suggested follow-up replies ("quick replies") the agent offered on the
+     * terminal `eventual_response`. Set ONLY on the finalized assistant message —
+     * never mid-stream. Read defensively (see {@link extractSuggestions}); capped
+     * at 4 for layout. Absent when the turn offered none.
+     */
+    suggestions?: string[];
 }
 
 export type ConnectionStatus = 'idle' | 'connecting' | 'ready' | 'error' | 'closed';
@@ -183,6 +190,20 @@ function extractCitations(inner: unknown): Citation[] {
     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: unknown): string[] {
+    if (!response || typeof response !== 'object') return [];
+    const raw = (response as { suggestedNextActions?: unknown }).suggestedNextActions;
+    if (!Array.isArray(raw)) return [];
+    return raw.filter((s): s is string => typeof s === 'string' && s.trim().length > 0).slice(0, 4);
+}
+
 /** A `get_conversation_messages` row, narrowed defensively off the wire. */
 interface WireMessage {
     id?: string;
@@ -623,6 +644,11 @@ export class ConversationController {
             if (citations.length > 0) {
                 assistant.citations = citations;
             }
+            // Suggested follow-up replies from the terminal event, when present.
+            const suggestions = extractSuggestions(inner?.response);
+            if (suggestions.length > 0) {
+                assistant.suggestions = suggestions;
+            }
             assistant.streaming = false;
             this.emitMessages();
         } catch (err) {

package/src/element.ts

@@ -49,7 +49,10 @@ function phoneToE164(value: string): string | null {
     }
 }
 
-const OBSERVED = ['endpoint', 'agent-id', 'agent-name', 'logo-url', 'placeholder', 'greeting', 'start-open', 'mode'] as const;
+/** 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', 'agent-name', 'logo-url', 'placeholder', 'greeting', 'start-open', 'mode', 'hide-branding'] as const;
 
 /**
  * Inline SVG icons (static, trusted strings — never interpolated with user data).
@@ -94,6 +97,8 @@ export class SmoothAgentChatElement extends HTMLElement {
     private hasSent = false;
     /** Starter prompts shown as chips in the empty state. */
     private examplePrompts: string[] = [];
+    /** Whether mid-conversation suggested-reply chips are shown (config). */
+    private showSuggestedReplies = true;
     /** Resolved greeting text, cached so async (rAF) renders can reuse it. */
     private greeting = '';
     /** Current mid-turn interrupt (OTP / tool-confirmation), or null. */
@@ -114,6 +119,7 @@ export class SmoothAgentChatElement extends HTMLElement {
     private dotEl: HTMLElement | null = null;
     private inputEl: HTMLTextAreaElement | null = null;
     private sendBtn: HTMLButtonElement | null = null;
+    private suggestionsEl: HTMLElement | null = null;
 
     // ── Smooth streaming reveal ──
     // Tokens arrive in variable-size bursts at uneven rates, so revealing text in
@@ -204,7 +210,9 @@ export class SmoothAgentChatElement extends HTMLElement {
             greeting: this.overrides.greeting ?? this.getAttribute('greeting') ?? undefined,
             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,
@@ -243,10 +251,14 @@ export class SmoothAgentChatElement extends HTMLElement {
                 onInterrupt: (interrupt) => {
                     this.interrupt = interrupt;
                     this.renderInterrupt();
+                    // Suggestion chips are hidden while an interrupt overlay is up.
+                    this.renderSuggestions();
                 },
                 onIdentityRestore: (state) => {
                     this.identityRestore = state;
                     this.renderInterrupt();
+                    // The restore overlay reuses the interrupt slot — hide chips too.
+                    this.renderSuggestions();
                 },
             });
             if (resolved.startOpen) this.open = true;
@@ -282,7 +294,11 @@ export class SmoothAgentChatElement extends HTMLElement {
                         <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>
@@ -295,6 +311,7 @@ export class SmoothAgentChatElement extends HTMLElement {
 
         // Remember starter prompts + greeting for the empty-state chips / async renders.
         this.examplePrompts = resolved.examplePrompts;
+        this.showSuggestedReplies = resolved.showSuggestedReplies;
         this.greeting = resolved.greeting;
 
         // Gate the conversation behind a pre-chat identity form when required.
@@ -329,16 +346,25 @@ export class SmoothAgentChatElement extends HTMLElement {
                     <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>` : '';
+        // Footer: optional "powered by" branding (hidden by hide-branding) and an
+        // optional "Restore my chats" affordance. The " · " separator only appears
+        // when both are present, and the footer is omitted entirely when neither is.
+        const brandingHtml = resolved.hideBranding
+            ? ''
+            : `<a href="${SMOOTH_OPERATOR_URL}" target="_blank" rel="noopener noreferrer">powered by <b>smooth&#8209;operator</b></a>`;
+        const restoreBtn = this.allowChatRestore ? `<button type="button" class="restore-link">Restore my chats</button>` : '';
+        const footerInner = [brandingHtml, restoreBtn].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');
@@ -369,6 +395,7 @@ export class SmoothAgentChatElement extends HTMLElement {
         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());
@@ -920,6 +947,39 @@ export class SmoothAgentChatElement extends HTMLElement {
             }
         }
         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.
+     */
+    private renderSuggestions(): void {
+        const el = this.suggestionsEl;
+        if (!el) return;
+        el.replaceChildren();
+        if (!this.showSuggestedReplies) return;
+        // Hidden while an OTP / tool-confirmation / restore overlay is active.
+        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);
     }
 
     // ─────────────────────── Smooth streaming reveal ───────────────────────────

package/src/styles.ts

@@ -239,7 +239,8 @@ ${
 }
 .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. */
@@ -511,6 +512,8 @@ ${
     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; }
@@ -602,6 +605,10 @@ ${
     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 {