@smooai/chat-widget 0.10.1 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smooai/chat-widget",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "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,6 +95,12 @@ 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.
@@ -172,6 +178,7 @@ 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),
         requireName: config.requireName ?? false,
         requireEmail: config.requireEmail ?? false,

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).
@@ -204,6 +207,7 @@ 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,
             requireName: this.overrides.requireName,
             requireEmail: this.overrides.requireEmail,
@@ -282,7 +286,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>
@@ -329,7 +337,15 @@ 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="interrupt hidden"></div>
@@ -338,7 +354,7 @@ export class SmoothAgentChatElement extends HTMLElement {
                         <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');

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; }