reactbridge-sdk 0.1.12 → 0.1.14

package/dist/index.js

@@ -126,8 +126,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 = React.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,
@@ -140,10 +205,16 @@ function ReactBridgeProvider({ apiKey, config = {}, theme = lightTheme, children
         fullConfig.baseURL,
         fullConfig.timeout,
     ]);
+    const [sttProvider, setSTTProvider] = React.useState(initialSTTProvider || new WebSpeechSTTProvider());
+    const [ttsProvider, setTTSProvider] = React.useState(initialTTSProvider || new WebSpeechTTSProvider());
     const value = {
         api,
         config: fullConfig,
         theme,
+        sttProvider,
+        ttsProvider,
+        setSTTProvider,
+        setTTSProvider,
     };
     return (React.createElement(ReactBridgeContext.Provider, { value: value }, children));
 }
@@ -189,12 +260,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] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState(null);
     const [sessionId, setSessionId] = React.useState(null);
+    const [isListening, setIsListening] = React.useState(false);
     const previousContextRef = React.useRef(null);
     const lastRequestRef = React.useRef(null);
     // Inject context changes as system messages
@@ -254,6 +326,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 {
@@ -269,6 +346,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) {
@@ -311,12 +393,50 @@ function useReactBridge({ onIntentDetected, currentContext, onError, }) {
         setSessionId(null);
         setError(null);
     }, []);
+    const startVoiceInput = React.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 = React.useCallback(() => {
+        setIsListening(false);
+        sttProvider.stopRecognition();
+        if (onSpeechEnd) {
+            onSpeechEnd();
+        }
+    }, [sttProvider, onSpeechEnd]);
     return {
         messages,
         isLoading,
         sendChatQuery,
         clearMessages,
         error,
+        isListening,
+        startVoiceInput,
+        stopVoiceInput,
     };
 }
 
@@ -325,9 +445,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
@@ -336,10 +461,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] = React.useState("");
     // New: Manage widget open/closed state
@@ -410,7 +539,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,
@@ -421,6 +550,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,
@@ -489,7 +632,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,
@@ -500,11 +643,25 @@ 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.primary,
+                        color: theme.colors.background,
+                        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,
                         backgroundColor: theme.colors.primary,
-                        color: "#ffffff",
+                        color: theme.colors.background,
                         border: "none",
                         borderRadius: theme.borderRadius,
                         cursor: isLoading || !inputValue.trim() ? "not-allowed" : "pointer",
@@ -512,13 +669,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] = React.useState('');
     const [isOpen, setIsOpen] = React.useState(false);
@@ -560,7 +724,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,
@@ -569,6 +733,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.primary,
+                        color: theme.colors.background,
+                        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,
@@ -577,7 +759,7 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                         padding: `${theme.spacing.xs} ${theme.spacing.md}`,
                         fontSize: theme.fontSizes.sm,
                         backgroundColor: theme.colors.primary,
-                        color: '#ffffff',
+                        color: theme.colors.background,
                         border: 'none',
                         borderRadius: theme.borderRadius,
                         cursor: isLoading || !inputValue.trim() ? 'not-allowed' : 'pointer',
@@ -654,6 +836,8 @@ exports.ReactBridgeAPI = ReactBridgeAPI;
 exports.ReactBridgeChatbox = ReactBridgeChatbox;
 exports.ReactBridgeProvider = ReactBridgeProvider;
 exports.ReactBridgeSearch = ReactBridgeSearch;
+exports.WebSpeechSTTProvider = WebSpeechSTTProvider;
+exports.WebSpeechTTSProvider = WebSpeechTTSProvider;
 exports.createCustomTheme = createCustomTheme;
 exports.darkTheme = darkTheme;
 exports.getTheme = getTheme;