@smooai/chat-widget 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smooai/chat-widget",
-  "version": "0.13.0",
+  "version": "0.14.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

@@ -6,6 +6,19 @@
  * {@link mountChatWidget} / `element.configure(...)`).
  */
 import { safeHttpUrl } from './markdown.js';
+import { DEFAULT_VOICE_URL } from './voice-session.js';
+
+/**
+ * Browser voice input/output (SMOODEV-2534). OFF by default — when disabled the
+ * widget renders zero voice UI. When enabled, a mic toggle appears in the
+ * composer and speech flows over the browser-voice WebSocket.
+ */
+export interface ChatWidgetVoiceConfig {
+    /** Turn the voice feature on. Default `false`. */
+    enabled?: boolean;
+    /** Browser-voice WS endpoint. Defaults to the hosted SmooAI voice service. */
+    url?: string;
+}
 
 export interface ChatWidgetTheme {
     /** Foreground text color for the widget chrome. */
@@ -151,6 +164,8 @@ export interface ChatWidgetConfig {
      * surfaces where seeing what the agent did mid-turn is valuable.
      */
     showToolActivity?: boolean;
+    /** Browser voice input/output. OFF by default (zero UI when off). */
+    voice?: ChatWidgetVoiceConfig;
     /** Theme overrides. */
     theme?: ChatWidgetTheme;
 }
@@ -158,8 +173,9 @@ export interface ChatWidgetConfig {
 /** The fully-resolved theme (canonical keys only — aliases are folded in). */
 export type ResolvedTheme = Required<Omit<ChatWidgetTheme, 'chatBubbleInbound' | 'chatBubbleInboundText' | 'chatBubbleOutbound' | 'chatBubbleOutboundText'>>;
 
-export type ResolvedConfig = Required<Omit<ChatWidgetConfig, 'theme' | 'userName' | 'userEmail' | 'userPhone' | 'authContext' | 'logoUrl'>> & {
+export type ResolvedConfig = Required<Omit<ChatWidgetConfig, 'theme' | 'userName' | 'userEmail' | 'userPhone' | 'authContext' | 'logoUrl' | 'voice'>> & {
     theme: ResolvedTheme;
+    voice: { enabled: boolean; url: string };
     userName?: string;
     userEmail?: string;
     userPhone?: string;
@@ -205,6 +221,7 @@ export function resolveConfig(config: ChatWidgetConfig): ResolvedConfig {
         allowChatRestore: config.allowChatRestore ?? true,
         allowAnonymous: config.allowAnonymous ?? false,
         showToolActivity: config.showToolActivity ?? false,
+        voice: { enabled: config.voice?.enabled ?? false, url: config.voice?.url ?? DEFAULT_VOICE_URL },
         theme: {
             text: theme.text ?? '#f8fafc',
             background: theme.background ?? '#040d30',

package/src/conversation.ts

@@ -328,6 +328,8 @@ export class ConversationController {
     private readonly store: StoreApi<WidgetStore>;
     private client: SmoothAgentClient | null = null;
     private sessionId: string | null = null;
+    /** Conversation id of the live session (create or resume) — lets voice join the same thread. */
+    private conversationId: string | null = null;
     private readonly messages: ChatMessage[] = [];
     private status: ConnectionStatus = 'idle';
     private seq = 0;
@@ -384,6 +386,23 @@ export class ConversationController {
         return this.status;
     }
 
+    /** Conversation id of the live session, or null before connect (voice passes this as `conversation_id`). */
+    get currentConversationId(): string | null {
+        return this.conversationId;
+    }
+
+    /**
+     * Append an already-finalized message to the transcript and emit — the voice
+     * path reuses this so `transcript_final` (user) and `reply_text` (assistant)
+     * turns land in the same message list / render pipeline as typed chat.
+     */
+    appendLocalMessage(role: Role, text: string): void {
+        const trimmed = text.trim();
+        if (!trimmed) return;
+        this.messages.push({ id: this.nextId(role === 'user' ? 'u' : 'a'), role, text: trimmed, streaming: false });
+        this.emitMessages();
+    }
+
     /** The persisted store, exposed so the view can read identity for the pre-chat gate. */
     getStore(): StoreApi<WidgetStore> {
         return this.store;
@@ -690,6 +709,7 @@ export class ConversationController {
             ...(metadata ? { metadata } : {}),
         });
         this.sessionId = session.sessionId;
+        this.conversationId = session.conversationId ?? null;
         this.store.getState().setSessionId(session.sessionId);
     }
 
@@ -699,7 +719,7 @@ export class ConversationController {
      */
     private async tryResume(sessionId: string): Promise<boolean> {
         if (!this.client) return false;
-        let snap: { status?: 'active' | 'idle' | 'ended' };
+        let snap: { status?: 'active' | 'idle' | 'ended'; conversationId?: string };
         try {
             snap = await this.client.getSession({ sessionId });
         } catch {
@@ -708,6 +728,7 @@ export class ConversationController {
         if (snap.status === 'ended') return false;
 
         this.sessionId = sessionId;
+        this.conversationId = snap.conversationId ?? null;
         await this.hydrateHistory(sessionId);
         return true;
     }
@@ -1052,6 +1073,7 @@ export class ConversationController {
         this.client?.disconnect('widget closed');
         this.client = null;
         this.sessionId = null;
+        this.conversationId = null;
         this.activeRequestId = null;
         // A full teardown ends the controller lifecycle: a subsequent connect() is a
         // genuine re-open and may resume again, so re-arm the resume probe.

package/src/element.ts

@@ -30,6 +30,7 @@ import {
 import { SMOOTH_ICON_SVG } from './logo.js';
 import { cleanCitationSnippet, escapeHtml, renderMarkdown, safeHttpUrl } from './markdown.js';
 import { buildStyles } from './styles.js';
+import { VoiceSession } from './voice-session.js';
 
 export const ELEMENT_TAG = 'smooth-agent-chat';
 
@@ -86,6 +87,8 @@ const ICON = {
     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>`,
     /** Tool-activity chip — a wrench. */
     tool: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7 6.3a3.5 3.5 0 0 0-4.6 4.3l-5 5a1.6 1.6 0 0 0 2.3 2.3l5-5a3.5 3.5 0 0 0 4.3-4.6l-2 2-1.7-.3-.3-1.7 2-2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+    /** Voice toggle — a microphone. */
+    mic: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="3.5" width="6" height="11" rx="3" stroke="currentColor" stroke-width="1.7"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v2.5M9 20.5h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`,
 } as const;
 
 /**
@@ -277,6 +280,10 @@ export class SmoothAgentChatElement extends HTMLElement {
     private allowChatRestore = true;
     /** True while the pre-chat identity gate is showing (blocks premature connect). */
     private gating = false;
+    /** Voice config (SMOODEV-2534) — enabled=false renders zero voice UI. */
+    private voiceCfg: { enabled: boolean; url: string } = { enabled: false, url: '' };
+    /** Live voice session, or null when voice is off. */
+    private voiceSession: VoiceSession | null = null;
 
     // Cached DOM refs (populated in render()).
     private panelEl: HTMLElement | null = null;
@@ -286,6 +293,7 @@ export class SmoothAgentChatElement extends HTMLElement {
     private dotEl: HTMLElement | null = null;
     private inputEl: HTMLTextAreaElement | null = null;
     private sendBtn: HTMLButtonElement | null = null;
+    private micBtn: HTMLButtonElement | null = null;
     private suggestionsEl: HTMLElement | null = null;
 
     // ── Smooth streaming reveal ──
@@ -321,6 +329,7 @@ export class SmoothAgentChatElement extends HTMLElement {
     disconnectedCallback(): void {
         this.mounted = false;
         this.resetReveal();
+        this.stopVoice();
         this.controller?.disconnect();
         this.controller = null;
     }
@@ -392,6 +401,7 @@ export class SmoothAgentChatElement extends HTMLElement {
             allowChatRestore: this.overrides.allowChatRestore,
             allowAnonymous: this.overrides.allowAnonymous,
             showToolActivity: this.overrides.showToolActivity ?? this.hasAttribute('show-tool-activity'),
+            voice: this.overrides.voice,
             theme,
         };
     }
@@ -527,6 +537,11 @@ export class SmoothAgentChatElement extends HTMLElement {
         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>` : '';
+        // Voice (SMOODEV-2534): mic toggle in the composer, only when enabled.
+        this.voiceCfg = resolved.voice;
+        const micHtml = resolved.voice.enabled
+            ? `<button class="mic" type="button" aria-label="Start voice" aria-pressed="false" title="Talk to ${escapeHtml(resolved.agentName)}">${ICON.mic}</button>`
+            : '';
         const chatHtml = `
                 <div class="messages"></div>
                 <div class="reply-suggestions"></div>
@@ -534,6 +549,7 @@ export class SmoothAgentChatElement extends HTMLElement {
                 <div class="composer-wrap">
                     <div class="composer">
                         <textarea rows="1" placeholder="${escapeHtml(resolved.placeholder)}"></textarea>
+                        ${micHtml}
                         <button class="send" type="button" aria-label="Send message">${ICON.send}</button>
                     </div>
                     ${footerHtml}
@@ -555,8 +571,10 @@ export class SmoothAgentChatElement extends HTMLElement {
         if (logoSvg) logoSvg.setAttribute('class', 'logo');
 
         // A full DOM rebuild invalidates any cached streaming-bubble ref; cancel
-        // the in-flight reveal loop so renderMessages can re-bind cleanly.
+        // the in-flight reveal loop so renderMessages can re-bind cleanly. A live
+        // voice session is bound to the old composer's mic button — end it too.
         this.resetReveal();
+        this.stopVoice();
         this.root.replaceChildren(style, container);
 
         this.launcherEl = container.querySelector('.launcher');
@@ -566,12 +584,14 @@ export class SmoothAgentChatElement extends HTMLElement {
         this.dotEl = container.querySelector('.dot');
         this.inputEl = container.querySelector('textarea');
         this.sendBtn = container.querySelector('.send');
+        this.micBtn = container.querySelector('.mic');
         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());
+        this.micBtn?.addEventListener('click', () => this.toggleVoice());
         this.inputEl?.addEventListener('input', () => this.autosize());
         this.inputEl?.addEventListener('keydown', (ev) => {
             if (ev.key === 'Enter' && !ev.shiftKey) {
@@ -1525,6 +1545,99 @@ export class SmoothAgentChatElement extends HTMLElement {
         if (this.inputEl) this.inputEl.disabled = busy;
     }
 
+    // ───────────────────────── Voice (SMOODEV-2534) ─────────────────────────────
+
+    /**
+     * Mic button: start a voice session, or — when one is live — end it. Hitting
+     * the button while the agent's TTS is playing barges in first (interrupt +
+     * playback flush) so the audio dies instantly, then the session ends.
+     */
+    private toggleVoice(): void {
+        if (this.voiceSession) {
+            if (this.voiceSession.isSpeaking) this.voiceSession.interrupt();
+            this.stopVoice();
+            return;
+        }
+        void this.startVoice();
+    }
+
+    private async startVoice(): Promise<void> {
+        if (!this.controller || this.voiceSession || !this.voiceCfg.enabled) return;
+        const config = this.readConfig();
+        if (!config) return;
+        // Best-effort: join the text thread when one exists. If the text session
+        // hasn't connected yet, voice starts a fresh thread (the frozen protocol
+        // never returns the voice-created conversation id, so it can't be adopted
+        // for later text turns — tracked as a follow-up on the server protocol).
+        const conversationId = this.controller.currentConversationId ?? undefined;
+        const controller = this.controller;
+        const session = new VoiceSession(
+            { url: this.voiceCfg.url, agentId: config.agentId, conversationId },
+            {
+                onTranscriptPartial: (text) => {
+                    // Live partial transcript in the input area while listening.
+                    if (this.inputEl) {
+                        this.inputEl.value = text;
+                        this.autosize();
+                    }
+                },
+                onTranscriptFinal: (text) => {
+                    if (this.inputEl) {
+                        this.inputEl.value = '';
+                        this.autosize();
+                    }
+                    // Finalized speech lands as a normal user message.
+                    controller.appendLocalMessage('user', text);
+                },
+                onReplyText: (text) => {
+                    // Agent replies render through the normal chat message path.
+                    controller.appendLocalMessage('assistant', text);
+                },
+                onSpeaking: (speaking) => {
+                    this.micBtn?.classList.toggle('speaking', speaking);
+                },
+                onError: () => this.stopVoice(),
+                onEnded: () => {
+                    // Server-side end (handoff / close) — reset the UI. stopVoice()
+                    // is idempotent, so a local stop lands here harmlessly too.
+                    this.voiceSession = null;
+                    this.syncVoiceUi(false);
+                },
+            },
+        );
+        this.voiceSession = session;
+        this.syncVoiceUi(true);
+        try {
+            await session.start();
+        } catch {
+            // Mic permission denied / audio unavailable — back to text.
+            this.voiceSession = null;
+            this.syncVoiceUi(false);
+        }
+    }
+
+    /** End any live voice session and reset the composer UI. Idempotent. */
+    private stopVoice(): void {
+        const session = this.voiceSession;
+        this.voiceSession = null;
+        session?.stop();
+        this.syncVoiceUi(false);
+    }
+
+    /** Toggle the mic button's listening state + clear the partial transcript. */
+    private syncVoiceUi(active: boolean): void {
+        this.micBtn?.classList.toggle('active', active);
+        this.micBtn?.setAttribute('aria-pressed', String(active));
+        this.micBtn?.setAttribute('aria-label', active ? 'Stop voice' : 'Start voice');
+        if (!active) {
+            this.micBtn?.classList.remove('speaking');
+            if (this.inputEl && this.inputEl.value) {
+                this.inputEl.value = '';
+                this.autosize();
+            }
+        }
+    }
+
     private submit(): void {
         if (!this.inputEl || !this.controller) return;
         const text = this.inputEl.value;

package/src/index.ts

@@ -26,7 +26,25 @@ export {
     mountChatWidget,
     mountFullPageChat,
 } from './element.js';
-export type { ChatWidgetConfig, ChatWidgetMode, ChatWidgetTheme } from './config.js';
+export type { ChatWidgetConfig, ChatWidgetMode, ChatWidgetTheme, ChatWidgetVoiceConfig } from './config.js';
+// Browser voice input/output (SMOODEV-2534) — mic capture + TTS playback over
+// the browser-voice WS. Gated by `voice.enabled` (OFF by default).
+export {
+    DEFAULT_VOICE_URL,
+    downsampleTo16k,
+    PcmPlayer,
+    rmsLevel,
+    VOICE_SAMPLE_RATE,
+    VoiceSession,
+    type PlayerAudioContext,
+    type StartCapture,
+    type VoicePlayer,
+    type VoiceSessionEvents,
+    type VoiceSessionOptions,
+    type VoiceSessionSeams,
+    type VoiceSessionState,
+    type VoiceWebSocket,
+} from './voice-session.js';
 // The deferred loader (also shipped as the `./loader` IIFE for `<script>` embeds):
 // installs the idle/intent/fallback scheduler that lazily injects the widget
 // module so it never competes with the host page's LCP/TBT.

package/src/styles.ts

@@ -546,6 +546,47 @@ ${
 .send:hover { transform: translateY(-1px) scale(1.05); }
 .send:active { transform: scale(.94); }
 .send:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
+
+/* Voice mic toggle (SMOODEV-2534) — ghost twin of .send; lights up while live. */
+.mic {
+    width: 38px; height: 38px;
+    flex: none;
+    border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
+    border-radius: 13px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: color-mix(in srgb, var(--sac-text) 65%, transparent);
+    transition: transform .2s var(--sac-ease), color .2s ease, background .25s ease, box-shadow .25s ease;
+}
+.mic svg { width: 18px; height: 18px; }
+.mic:hover { color: var(--sac-text); transform: translateY(-1px) scale(1.05); }
+.mic:active { transform: scale(.94); }
+.mic.active {
+    border-color: transparent;
+    background: linear-gradient(150deg, var(--sac-primary), var(--sac-primary-2));
+    color: var(--sac-primary-text);
+    animation: sac-mic-pulse 1.6s ease-out infinite;
+}
+/* Listening → soft expanding ring off the button (mirrors the presence pulse). */
+@keyframes sac-mic-pulse {
+    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sac-primary) 45%, transparent); }
+    70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--sac-primary) 0%, transparent); }
+    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sac-primary) 0%, transparent); }
+}
+/* Agent TTS playing → faster secondary-accent shimmer so "speaking" reads distinctly. */
+.mic.active.speaking {
+    animation: sac-mic-speaking 0.9s ease-in-out infinite;
+}
+@keyframes sac-mic-speaking {
+    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sac-secondary) 35%, transparent); }
+    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sac-secondary) 12%, transparent); }
+}
+@media (prefers-reduced-motion: reduce) {
+    .mic.active, .mic.active.speaking { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sac-primary) 40%, transparent); }
+}
 .footer {
     text-align: center;
     margin-top: 9px;