reactbridge-sdk 0.1.11 → 0.1.13

package/README.md

@@ -82,6 +82,8 @@ Wraps your application and provides configuration.
 | `apiKey` | `string` | Yes | Your ReactBridge API key |
 | `config` | `object` | No | Additional configuration (baseURL, timeout, headers) |
 | `theme` | `Theme` | No | Custom theme object |
+| `sttProvider` | `STTProvider` | No | Custom speech-to-text provider |
+| `ttsProvider` | `TTSProvider` | No | Custom text-to-speech provider |
 
 **Example:**
 
@@ -114,6 +116,10 @@ Full-featured chat interface component.
 | `theme` | `Partial<Theme>` | No | Theme overrides |
 | `renderMessage` | `function` | No | Custom message renderer |
 | `onError` | `function` | No | Error handler |
+| `onSpeechStart` | `function` | No | Called when voice input starts |
+| `onSpeechEnd` | `function` | No | Called when voice input ends |
+| `onTranscript` | `function` | No | Called with transcribed text |
+| `onAgentResponse` | `function` | No | Called with agent response text |
 
 ### `<ReactBridgeSearch />`
 
@@ -130,6 +136,10 @@ Compact search bar component.
 | `maxResults` | `number` | No | Maximum results to show (default: 5) |
 | `theme` | `Partial<Theme>` | No | Theme overrides |
 | `onError` | `function` | No | Error handler |
+| `onSpeechStart` | `function` | No | Called when voice input starts |
+| `onSpeechEnd` | `function` | No | Called when voice input ends |
+| `onTranscript` | `function` | No | Called with transcribed text |
+| `onAgentResponse` | `function` | No | Called with agent response text |
 
 ### `useReactBridge(options)`
 
@@ -177,6 +187,72 @@ function CustomChat() {
 }
 ```
 
+## Voice Input/Output
+
+The SDK supports voice input (Speech-to-Text) and voice output (Text-to-Speech) for a fully conversational experience.
+
+### Default Providers
+
+By default, the SDK uses browser Web Speech APIs:
+- **STT**: `WebSpeechSTTProvider` (SpeechRecognition)
+- **TTS**: `WebSpeechTTSProvider` (speechSynthesis)
+
+### Custom Providers
+
+You can swap providers for advanced implementations:
+
+```tsx
+import { ReactBridgeProvider, WebSpeechSTTProvider, WebSpeechTTSProvider } from 'reactbridge-sdk';
+
+// Custom STT Provider
+class MySTTProvider {
+  startRecognition() { /* ... */ }
+  stopRecognition() { /* ... */ }
+  onResult(callback: (text: string) => void) { /* ... */ }
+}
+
+// Custom TTS Provider
+class MyTTSProvider {
+  speak(text: string) { /* ... */ }
+}
+
+<ReactBridgeProvider
+  apiKey="your-key"
+  sttProvider={new MySTTProvider()}
+  ttsProvider={new MyTTSProvider()}
+>
+  <App />
+</ReactBridgeProvider>
+```
+
+### Voice Events
+
+```tsx
+const { startVoiceInput, stopVoiceInput, isListening } = useReactBridge({
+  onIntentDetected: handleAction,
+  currentContext: context,
+  onSpeechStart: () => console.log('Voice input started'),
+  onSpeechEnd: () => console.log('Voice input ended'),
+  onTranscript: (text) => console.log('Transcribed:', text),
+  onAgentResponse: (response) => console.log('Agent responded:', response),
+});
+```
+
+### Chatbox with Voice
+
+The `ReactBridgeChatbox` includes a microphone button next to the text input:
+
+```tsx
+<ReactBridgeChatbox
+  onIntentDetected={handleAction}
+  currentContext={context}
+/>
+```
+
+- Click the mic button to start/stop voice recording
+- Transcribed text is automatically sent to the API
+- Agent responses are spoken aloud
+
 ## Theming
 
 ### Built-in Themes

package/dist/components/ReactBridgeChatbox.d.ts

@@ -9,6 +9,10 @@ export interface ReactBridgeChatboxProps {
     theme?: Partial<Theme>;
     renderMessage?: (message: ChatMessage) => React.ReactNode;
     onError?: (error: Error) => void;
+    onSpeechStart?: () => void;
+    onSpeechEnd?: () => void;
+    onTranscript?: (text: string) => void;
+    onAgentResponse?: (response: string) => void;
     renderMode?: "standard" | "basic";
     defaultOpen?: boolean;
     boxLocation?: "bottom-right" | "bottom-left";
@@ -20,7 +24,7 @@ export interface ReactBridgeChatboxProps {
     toggleButtonClass?: string;
     toggleButtonTitle?: string;
 }
-export declare function ReactBridgeChatbox({ onIntentDetected, currentContext, placeholder, height, width, theme: themeOverride, renderMessage, onError, renderMode, // Default to 'basic' (original behavior)
+export declare function ReactBridgeChatbox({ onIntentDetected, currentContext, placeholder, height, width, theme: themeOverride, renderMessage, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, renderMode, // Default to 'basic' (original behavior)
 defaultOpen, boxLocation, titleText, titleIcon, titleTextColor, // Will use theme.colors.text or default white based on headerBgColor
 headerBgColor, // Will use theme.colors.primary if not set
 toggleIcon, // <<< NOW USES THE PURE SVG CONSTANT

package/dist/components/ReactBridgeChatbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactBridgeChatbox.d.ts","sourceRoot":"","sources":["../../src/components/ReactBridgeChatbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,cAAc,EACf,MAAM,UAAU,CAAC;AAqBlB,MAAM,WAAW,uBAAuB;IAEtC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGjC,UAAU,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAG7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,gBAAgB,EAChB,cAAc,EACd,WAAoC,EACpC,MAAgB,EAChB,KAAc,EACd,KAAK,EAAE,aAAa,EACpB,aAAa,EACb,OAAO,EAGP,UAAoB,EAAE,yCAAyC;AAC/D,WAAmB,EACnB,WAA4B,EAC5B,SAA0B,EAC1B,SAAgB,EAChB,cAAc,EAAE,qEAAqE;AACrF,aAAa,EAAE,2CAA2C;AAE1D,UAA6B,EAAE,qCAAqC;AACpE,iBAA4C,EAC5C,iBAAyC,GAC1C,EAAE,uBAAuB,qBAyTzB"}
+{"version":3,"file":"ReactBridgeChatbox.d.ts","sourceRoot":"","sources":["../../src/components/ReactBridgeChatbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,cAAc,EACf,MAAM,UAAU,CAAC;AAkClB,MAAM,WAAW,uBAAuB;IAEtC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,UAAU,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAG7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,gBAAgB,EAChB,cAAc,EACd,WAAoC,EACpC,MAAgB,EAChB,KAAc,EACd,KAAK,EAAE,aAAa,EACpB,aAAa,EACb,OAAO,EAGP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,eAAe,EAGf,UAAoB,EAAE,yCAAyC;AAC/D,WAAmB,EACnB,WAA4B,EAC5B,SAA0B,EAC1B,SAAgB,EAChB,cAAc,EAAE,qEAAqE;AACrF,aAAa,EAAE,2CAA2C;AAE1D,UAA6B,EAAE,qCAAqC;AACpE,iBAA4C,EAC5C,iBAAyC,GAC1C,EAAE,uBAAuB,qBA0WzB"}

package/dist/components/ReactBridgeSearch.d.ts

@@ -8,6 +8,10 @@ export interface ReactBridgeSearchProps {
     maxResults?: number;
     theme?: Partial<Theme>;
     onError?: (error: Error) => void;
+    onSpeechStart?: () => void;
+    onSpeechEnd?: () => void;
+    onTranscript?: (text: string) => void;
+    onAgentResponse?: (response: string) => void;
 }
-export declare function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder, width, maxResults, theme: themeOverride, onError, }: ReactBridgeSearchProps): React.JSX.Element;
+export declare function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder, width, maxResults, theme: themeOverride, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, }: ReactBridgeSearchProps): React.JSX.Element;
 //# sourceMappingURL=ReactBridgeSearch.d.ts.map

package/dist/components/ReactBridgeSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactBridgeSearch.d.ts","sourceRoot":"","sources":["../../src/components/ReactBridgeSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAkB,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAExF,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,gBAAgB,EAChB,cAAc,EACd,WAAyB,EACzB,KAAc,EACd,UAAc,EACd,KAAK,EAAE,aAAa,EACpB,OAAO,GACR,EAAE,sBAAsB,qBA+IxB"}
+{"version":3,"file":"ReactBridgeSearch.d.ts","sourceRoot":"","sources":["../../src/components/ReactBridgeSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAkB,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAexF,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,iBAAiB,CAAC,EAChC,gBAAgB,EAChB,cAAc,EACd,WAAyB,EACzB,KAAc,EACd,UAAc,EACd,KAAK,EAAE,aAAa,EACpB,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,eAAe,GAChB,EAAE,sBAAsB,qBA6KxB"}

package/dist/hooks/useReactBridge.d.ts

@@ -1,3 +1,3 @@
 import type { UseReactBridgeOptions, UseReactBridgeReturn } from '../types';
-export declare function useReactBridge({ onIntentDetected, currentContext, onError, }: UseReactBridgeOptions): UseReactBridgeReturn;
+export declare function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, }: UseReactBridgeOptions): UseReactBridgeReturn;
 //# sourceMappingURL=useReactBridge.d.ts.map

package/dist/hooks/useReactBridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReactBridge.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactBridge.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,qBAAqB,EACrB,oBAAoB,EAIrB,MAAM,UAAU,CAAC;AAElB,wBAAgB,cAAc,CAAC,EAC7B,gBAAgB,EAChB,cAAc,EACd,OAAO,GACR,EAAE,qBAAqB,GAAG,oBAAoB,CAyJ9C"}
+{"version":3,"file":"useReactBridge.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactBridge.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,qBAAqB,EACrB,oBAAoB,EAIrB,MAAM,UAAU,CAAC;AAElB,wBAAgB,cAAc,CAAC,EAC7B,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,eAAe,GAChB,EAAE,qBAAqB,GAAG,oBAAoB,CA8M9C"}

package/dist/index.d.ts

@@ -5,7 +5,8 @@ export { ReactBridgeChatbox } from './components/ReactBridgeChatbox';
 export type { ReactBridgeChatboxProps } from './components/ReactBridgeChatbox';
 export { ReactBridgeSearch } from './components/ReactBridgeSearch';
 export type { ReactBridgeSearchProps } from './components/ReactBridgeSearch';
-export type { ReactBridgeConfig, ChatMessage, ToolCall, ToolResult, InterfaceState, CurrentContext, ViewingItem, OnIntentDetected, UseReactBridgeOptions, UseReactBridgeReturn, Theme, ThemeColors, ThemeSpacing, ThemeFontSizes, ThemeMode, } from './types';
+export type { ReactBridgeConfig, ChatMessage, ToolCall, ToolResult, InterfaceState, CurrentContext, ViewingItem, OnIntentDetected, UseReactBridgeOptions, UseReactBridgeReturn, Theme, ThemeColors, ThemeSpacing, ThemeFontSizes, ThemeMode, STTProvider, TTSProvider, } from './types';
 export { lightTheme, darkTheme, getTheme, createCustomTheme } from './themes';
 export { ReactBridgeAPI } from './utils/api';
+export { WebSpeechSTTProvider, WebSpeechTTSProvider } from './utils/voice';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5F,YAAY,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAG/E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,YAAY,EACV,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG9E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5F,YAAY,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAG/E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,YAAY,EACV,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG9E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useRef, useEffect, useCallback } from 'react';
+import React, { createContext, useState, useContext, useRef, useEffect, useCallback } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -124,8 +124,73 @@ const lightTheme = {
     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
 };
 
+// Default STT Provider using Web Speech API
+class WebSpeechSTTProvider {
+    constructor() {
+        if (typeof window !== 'undefined') {
+            const SpeechRecognitionCtor = window.SpeechRecognition || window.webkitSpeechRecognition;
+            if (SpeechRecognitionCtor) {
+                this.recognition = new SpeechRecognitionCtor();
+                if (!this.recognition) {
+                    throw new Error('Failed to initialize SpeechRecognition');
+                }
+                this.recognition.continuous = false;
+                this.recognition.interimResults = false;
+                this.recognition.lang = 'en-US';
+                this.recognition.onresult = (event) => {
+                    var _a;
+                    const transcript = event.results[0][0].transcript;
+                    (_a = this.onResultCallback) === null || _a === void 0 ? void 0 : _a.call(this, transcript);
+                };
+                this.recognition.onerror = (event) => {
+                    var _a;
+                    (_a = this.onErrorCallback) === null || _a === void 0 ? void 0 : _a.call(this, new Error(`Speech recognition error: ${event.error}`));
+                };
+            }
+            else {
+                console.warn('SpeechRecognition API not supported in this browser.');
+            }
+        }
+    }
+    startRecognition() {
+        if (this.recognition) {
+            this.recognition.start();
+        }
+        else {
+            throw new Error('Speech recognition not supported');
+        }
+    }
+    stopRecognition() {
+        var _a;
+        (_a = this.recognition) === null || _a === void 0 ? void 0 : _a.stop();
+    }
+    onResult(callback) {
+        this.onResultCallback = callback;
+    }
+    onError(callback) {
+        this.onErrorCallback = callback;
+    }
+}
+// Default TTS Provider using Web Speech API
+class WebSpeechTTSProvider {
+    speak(text) {
+        if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
+            const utterance = new SpeechSynthesisUtterance(text);
+            window.speechSynthesis.speak(utterance);
+        }
+        else {
+            console.warn('Text-to-speech not supported');
+        }
+    }
+    stop() {
+        if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
+            window.speechSynthesis.cancel();
+        }
+    }
+}
+
 const ReactBridgeContext = createContext(null);
-function ReactBridgeProvider({ apiKey, config = {}, theme = lightTheme, children, }) {
+function ReactBridgeProvider({ apiKey, config = {}, theme = lightTheme, sttProvider: initialSTTProvider, ttsProvider: initialTTSProvider, children, }) {
     const fullConfig = {
         apiKey,
         baseURL: config.baseURL,
@@ -138,10 +203,16 @@ function ReactBridgeProvider({ apiKey, config = {}, theme = lightTheme, children
         fullConfig.baseURL,
         fullConfig.timeout,
     ]);
+    const [sttProvider, setSTTProvider] = useState(initialSTTProvider || new WebSpeechSTTProvider());
+    const [ttsProvider, setTTSProvider] = useState(initialTTSProvider || new WebSpeechTTSProvider());
     const value = {
         api,
         config: fullConfig,
         theme,
+        sttProvider,
+        ttsProvider,
+        setSTTProvider,
+        setTTSProvider,
     };
     return (React.createElement(ReactBridgeContext.Provider, { value: value }, children));
 }
@@ -187,12 +258,13 @@ function getContextSummary(context) {
     return parts.join('\n');
 }
 
-function useReactBridge({ onIntentDetected, currentContext, onError, }) {
-    const { api } = useReactBridgeContext();
+function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, }) {
+    const { api, sttProvider, ttsProvider } = useReactBridgeContext();
     const [messages, setMessages] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [sessionId, setSessionId] = useState(null);
+    const [isListening, setIsListening] = useState(false);
     const previousContextRef = useRef(null);
     const lastRequestRef = useRef(null);
     // Inject context changes as system messages
@@ -252,6 +324,11 @@ function useReactBridge({ onIntentDetected, currentContext, onError, }) {
                 toolCall: response.toolCall,
             };
             setMessages(prev => [...prev, assistantMessage]);
+            // Trigger TTS and callback
+            ttsProvider.speak(response.message);
+            if (onAgentResponse) {
+                onAgentResponse(response.message);
+            }
             // Step 2: If there's a tool call, execute it
             if (response.toolCall && onIntentDetected) {
                 try {
@@ -267,6 +344,11 @@ function useReactBridge({ onIntentDetected, currentContext, onError, }) {
                             timestamp: new Date(),
                         };
                         setMessages(prev => [...prev, finalMessage]);
+                        // Trigger TTS for final response
+                        ttsProvider.speak(resultResponse.message);
+                        if (onAgentResponse) {
+                            onAgentResponse(resultResponse.message);
+                        }
                     }
                 }
                 catch (toolError) {
@@ -309,12 +391,50 @@ function useReactBridge({ onIntentDetected, currentContext, onError, }) {
         setSessionId(null);
         setError(null);
     }, []);
+    const startVoiceInput = useCallback(() => {
+        setIsListening(true);
+        if (onSpeechStart) {
+            onSpeechStart();
+        }
+        sttProvider.onResult((text) => {
+            if (onTranscript) {
+                onTranscript(text);
+            }
+            sendChatQuery(text);
+            setIsListening(false);
+            if (onSpeechEnd) {
+                onSpeechEnd();
+            }
+        });
+        if (sttProvider.onError) {
+            sttProvider.onError((error) => {
+                setIsListening(false);
+                if (onError) {
+                    onError(error);
+                }
+                if (onSpeechEnd) {
+                    onSpeechEnd();
+                }
+            });
+        }
+        sttProvider.startRecognition();
+    }, [sttProvider, sendChatQuery, onSpeechStart, onSpeechEnd, onTranscript, onError]);
+    const stopVoiceInput = useCallback(() => {
+        setIsListening(false);
+        sttProvider.stopRecognition();
+        if (onSpeechEnd) {
+            onSpeechEnd();
+        }
+    }, [sttProvider, onSpeechEnd]);
     return {
         messages,
         isLoading,
         sendChatQuery,
         clearMessages,
         error,
+        isListening,
+        startVoiceInput,
+        stopVoiceInput,
     };
 }
 
@@ -323,9 +443,14 @@ const MESSAGE_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org
     , height: "1em", fill: "currentColor" },
     React.createElement("path", { d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" })));
 // --- END: Dependency-Free SVG Message Icon ---
+// Microphone Icon SVG
+const MIC_ICON_SVG$1 = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" })));
 // Default styling constants for the widget wrapper
 const defaultToggleButtonClass = "fixed bottom-6 right-6 z-40 w-14 h-14 rounded-full shadow-lg text-white bg-blue-600 hover:bg-blue-700 transition-all flex justify-center items-center cursor-pointer text-2xl";
 function ReactBridgeChatbox({ onIntentDetected, currentContext, placeholder = "Type your message...", height = "500px", width = "100%", theme: themeOverride, renderMessage, onError, 
+// Voice Event Props
+onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, 
 // NEW Widget Props
 renderMode = "basic", // Default to 'basic' (original behavior)
 defaultOpen = false, boxLocation = "bottom-right", titleText = "AI Assistant", titleIcon = null, titleTextColor, // Will use theme.colors.text or default white based on headerBgColor
@@ -334,10 +459,14 @@ toggleIcon = MESSAGE_ICON_SVG, // <<< NOW USES THE PURE SVG CONSTANT
 toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat assistant", }) {
     const { theme: contextTheme } = useReactBridgeContext();
     const theme = Object.assign(Object.assign({}, contextTheme), themeOverride);
-    const { messages, isLoading, sendChatQuery } = useReactBridge({
+    const { messages, isLoading, sendChatQuery, isListening, startVoiceInput, stopVoiceInput } = useReactBridge({
         onIntentDetected,
         currentContext,
         onError,
+        onSpeechStart,
+        onSpeechEnd,
+        onTranscript,
+        onAgentResponse,
     });
     const [inputValue, setInputValue] = useState("");
     // New: Manage widget open/closed state
@@ -408,7 +537,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                     borderTop: `1px solid ${theme.colors.border}`,
                     backgroundColor: theme.colors.surface,
                 } },
-                React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm } },
+                React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm, alignItems: "center" } },
                     React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: isLoading, style: {
                             flex: 1,
                             padding: theme.spacing.sm,
@@ -419,6 +548,20 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                             color: theme.colors.text,
                             outline: "none",
                         } }),
+                    React.createElement("button", { type: "button", onClick: isListening ? stopVoiceInput : startVoiceInput, disabled: isLoading, title: isListening ? "Stop recording" : "Start voice input", style: {
+                            padding: theme.spacing.sm,
+                            backgroundColor: isListening ? theme.colors.error : theme.colors.secondary,
+                            color: "#ffffff",
+                            border: "none",
+                            borderRadius: theme.borderRadius,
+                            cursor: isLoading ? "not-allowed" : "pointer",
+                            opacity: isLoading ? 0.5 : 1,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "40px",
+                            height: "40px",
+                        } }, MIC_ICON_SVG$1),
                     React.createElement("button", { type: "submit", disabled: isLoading || !inputValue.trim(), style: {
                             padding: `${theme.spacing.sm} ${theme.spacing.md}`,
                             fontSize: theme.fontSizes.md,
@@ -441,9 +584,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
         : { bottom: "24px", left: "24px" };
     if (!isOpen) {
         // Render the toggle button when closed
-        return (React.createElement("button", { className: toggleButtonClass, onClick: () => setIsOpen(true), title: toggleButtonTitle, style: Object.assign(Object.assign({ 
+        return (React.createElement("button", { className: toggleButtonClass, onClick: () => setIsOpen(true), title: toggleButtonTitle, style: Object.assign(Object.assign(Object.assign({ 
                 // Apply widget-specific fixed positioning
-                position: "fixed", zIndex: 40 }, togglePositionClass), (toggleButtonClass === defaultToggleButtonClass && {
+                position: "fixed", zIndex: 40 }, togglePositionClass), { backgroundColor: finalHeaderBgColor }), (toggleButtonClass === defaultToggleButtonClass && {
                 width: '56px', height: '56px', borderRadius: '50%', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
             })) }, toggleIcon));
     }
@@ -487,7 +630,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                 borderTop: `1px solid ${theme.colors.border}`,
                 backgroundColor: theme.colors.surface,
             } },
-            React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm } },
+            React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm, alignItems: "center" } },
                 React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: isLoading, style: {
                         flex: 1,
                         padding: theme.spacing.sm,
@@ -498,6 +641,20 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                         color: theme.colors.text,
                         outline: "none",
                     } }),
+                React.createElement("button", { type: "button", onClick: isListening ? stopVoiceInput : startVoiceInput, disabled: isLoading, title: isListening ? "Stop recording" : "Start voice input", style: {
+                        padding: theme.spacing.sm,
+                        backgroundColor: isListening ? theme.colors.error : theme.colors.secondary,
+                        color: "#ffffff",
+                        border: "none",
+                        borderRadius: theme.borderRadius,
+                        cursor: isLoading ? "not-allowed" : "pointer",
+                        opacity: isLoading ? 0.5 : 1,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "40px",
+                        height: "40px",
+                    } }, MIC_ICON_SVG$1),
                 React.createElement("button", { type: "submit", disabled: isLoading || !inputValue.trim(), style: {
                         padding: `${theme.spacing.sm} ${theme.spacing.md}`,
                         fontSize: theme.fontSizes.md,
@@ -510,13 +667,20 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                     } }, isLoading ? "Sending..." : "Send")))));
 }
 
-function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Search...', width = '100%', maxResults = 5, theme: themeOverride, onError, }) {
+// Microphone Icon SVG
+const MIC_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" })));
+function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Search...', width = '100%', maxResults = 5, theme: themeOverride, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, }) {
     const { theme: contextTheme } = useReactBridgeContext();
     const theme = Object.assign(Object.assign({}, contextTheme), themeOverride);
-    const { messages, isLoading, sendChatQuery } = useReactBridge({
+    const { messages, isLoading, sendChatQuery, isListening, startVoiceInput, stopVoiceInput } = useReactBridge({
         onIntentDetected,
         currentContext,
         onError,
+        onSpeechStart,
+        onSpeechEnd,
+        onTranscript,
+        onAgentResponse,
     });
     const [inputValue, setInputValue] = useState('');
     const [isOpen, setIsOpen] = useState(false);
@@ -558,7 +722,7 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                 React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => displayMessages.length > 0 && setIsOpen(true), placeholder: placeholder, disabled: isLoading, style: {
                         width: '100%',
                         padding: theme.spacing.md,
-                        paddingRight: '100px',
+                        paddingRight: '140px', // Increased to make room for both mic and search buttons
                         fontSize: theme.fontSizes.md,
                         border: `1px solid ${theme.colors.border}`,
                         borderRadius: theme.borderRadius,
@@ -567,6 +731,24 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                         outline: 'none',
                         boxSizing: 'border-box',
                     } }),
+                React.createElement("button", { type: "button", onClick: isListening ? stopVoiceInput : startVoiceInput, disabled: isLoading, title: isListening ? "Stop recording" : "Start voice input", style: {
+                        position: 'absolute',
+                        right: '70px', // Position before the search button
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        padding: theme.spacing.sm,
+                        backgroundColor: isListening ? theme.colors.error : theme.colors.secondary,
+                        color: "#ffffff",
+                        border: "none",
+                        borderRadius: theme.borderRadius,
+                        cursor: isLoading ? "not-allowed" : "pointer",
+                        opacity: isLoading ? 0.5 : 1,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "32px",
+                        height: "32px",
+                    } }, MIC_ICON_SVG),
                 React.createElement("button", { type: "submit", disabled: isLoading || !inputValue.trim(), style: {
                         position: 'absolute',
                         right: theme.spacing.sm,
@@ -648,5 +830,5 @@ function createCustomTheme(baseTheme, overrides) {
     return Object.assign(Object.assign(Object.assign({}, baseTheme), overrides), { colors: Object.assign(Object.assign({}, baseTheme.colors), (overrides.colors || {})), spacing: Object.assign(Object.assign({}, baseTheme.spacing), (overrides.spacing || {})), fontSizes: Object.assign(Object.assign({}, baseTheme.fontSizes), (overrides.fontSizes || {})) });
 }
 
-export { ReactBridgeAPI, ReactBridgeChatbox, ReactBridgeProvider, ReactBridgeSearch, createCustomTheme, darkTheme, getTheme, lightTheme, useReactBridge, useReactBridgeContext };
+export { ReactBridgeAPI, ReactBridgeChatbox, ReactBridgeProvider, ReactBridgeSearch, WebSpeechSTTProvider, WebSpeechTTSProvider, createCustomTheme, darkTheme, getTheme, lightTheme, useReactBridge, useReactBridgeContext };
 //# sourceMappingURL=index.esm.js.map