@smooai/chat-widget 0.10.0 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smooai/chat-widget",
-  "version": "0.10.0",
+  "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,10 +354,11 @@ 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');
+        container.className = 'wrap';
         container.innerHTML = `
             ${fullpage ? '' : `<button class="launcher" part="launcher" aria-label="Open chat">${ICON.spark}</button>`}
             <div class="panel${fullpage ? ' fullpage' : ' hidden'}" part="panel" role="${fullpage ? 'region' : 'dialog'}" aria-label="${escapeHtml(resolved.agentName)} chat">
@@ -407,6 +424,10 @@ export class SmoothAgentChatElement extends HTMLElement {
             })();
         });
 
+        // Full-page mode sizes to the host's box; fall back to the viewport only
+        // when the container gives the host no height.
+        if (fullpage) this.syncViewportFallback();
+
         // Full-page mode connects eagerly (there's no launcher click to trigger it) —
         // but only once any identity gate is cleared.
         if (fullpage && !gating) void this.controller?.connect().catch(() => {});
@@ -998,6 +1019,25 @@ export class SmoothAgentChatElement extends HTMLElement {
         }
     }
 
+    /**
+     * Full-page sizing probe: decide whether the host's container gives it a
+     * real box. With the `.wrap` flex chain hidden, `height: 100%` of a SIZED
+     * container still resolves (clientHeight > 0), while an auto-height parent
+     * (e.g. mounted straight into `<body>`) collapses to ~0. Only the latter
+     * gets `data-viewport-fallback`, whose CSS applies `min-height: 100dvh` —
+     * so an embed inside a fixed-height box never overflows it (the composer
+     * stays visible), and a bare full-page route still fills the viewport.
+     */
+    private syncViewportFallback(): void {
+        const wrap = this.shadowRoot?.querySelector<HTMLElement>('.wrap');
+        if (!wrap) return;
+        const prev = wrap.style.display;
+        wrap.style.display = 'none';
+        const heightless = this.clientHeight < 8;
+        wrap.style.display = prev;
+        this.toggleAttribute('data-viewport-fallback', heightless);
+    }
+
     /** Cancel any in-flight reveal loop and clear its state (called on full rebuild). */
     private resetReveal(): void {
         if (this.rafId && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(this.rafId);

package/src/styles.ts

@@ -44,11 +44,11 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
     ${
         mode === 'fullpage'
             ? `/* Full-page: fill the host's box (sized by its container, else the viewport). */
-    display: block;
+    display: flex;
+    flex-direction: column;
     position: relative;
     width: 100%;
-    height: 100%;
-    min-height: 100vh;`
+    height: 100%;`
             : `/* Popover: float in the bottom-right corner. */
     position: fixed;
     bottom: 24px;
@@ -58,7 +58,24 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
 }
-
+${
+    mode === 'fullpage'
+        ? `
+/* Viewport fallback — the element sets this attribute only when the host's
+   container gives it no resolved height (e.g. mounted straight into an
+   auto-height <body>). A sized container always wins, so an embed inside a
+   fixed-height box never overflows it (composer stays visible). */
+:host([data-viewport-fallback]) { min-height: 100dvh; }
+/* The render wrapper passes the host's box down to the panel via flex. */
+.wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+`
+        : ''
+}
 * { box-sizing: border-box; }
 
 /* ───────────────────────────── Launcher ───────────────────────────── */
@@ -140,11 +157,13 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
     pointer-events: none;
     background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--sac-primary) 22%, transparent), transparent 70%);
 }
-/* Full-page: the panel becomes the whole surface. */
+/* Full-page: the panel becomes the whole surface — it follows the host's box
+   (via the .wrap flex chain), never a hardcoded viewport unit. */
 .panel.fullpage {
     width: 100%;
-    height: 100%;
-    min-height: 100vh;
+    flex: 1;
+    height: auto;
+    min-height: 0;
     max-width: none;
     max-height: none;
     border: none;
@@ -220,7 +239,8 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
 }
 .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. */
@@ -492,6 +512,8 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
     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; }