react-native-srschat 0.1.19 → 0.1.20

package/src/components/voice.js

@@ -1,75 +1,102 @@
 // VoiceButton.js
-import React, { useState, useContext } from 'react';
-import { TouchableOpacity, ActivityIndicator, View, StyleSheet } from 'react-native';
+
+import React, { useState, useContext, useEffect } from 'react';
+import { TouchableOpacity, ActivityIndicator, StyleSheet, Alert } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import axios from 'axios';
 
-import { startRecording, stopRecording, requestAudioPermission } from '../utils/audioRecorder';
+import { 
+  startRecording, 
+  stopRecording, 
+  cancelRecording,
+  requestAudioPermission, 
+  cleanup, 
+  initVoice 
+} from '../utils/audioRecorder';
 import { AppContext } from '../contexts/AppContext';
 
 export const VoiceButton = () => {
-  const { data, handleVoiceSend } = useContext(AppContext);
+  const { handleVoiceSend } = useContext(AppContext);
   const [isListening, setIsListening] = useState(false);
   const [loading, setLoading] = useState(false);
 
-  const toggleRecording = async () => {
-    const hasPermission = await requestAudioPermission();
-  
-    if (!hasPermission) {
-      console.error('Permission denied');
-      return;
-    }
-    
-    if (!isListening) {
-      startRecording(handleStopRecording);
-      setIsListening(true);
-    } else {
-      handleStopRecording();
-    }
-  };
+  useEffect(() => {
+    const setupVoice = async () => {
+      const initialized = await initVoice((result, error) => {
+        if (error) {
+          Alert.alert('Error', error);
+          setIsListening(false);
+          setLoading(false);
+          return;
+        }
+        if (result) {
+          handleVoiceSend(null, result);
+          setIsListening(false);
+          setLoading(false);
+        }
+      });
 
-  const handleStopRecording = async () => {
-    setLoading(true);
-    const audioPath = await stopRecording();
-    const transcription = await transcribeAudio(audioPath);
-    setLoading(false);
-    setIsListening(false);
-    handleVoiceSend(audioPath, transcription);
-  };
+      if (!initialized) {
+        Alert.alert(
+          'Error',
+          'Speech recognition is not available on this device'
+        );
+      }
+    };
+
+    setupVoice();
 
-  const transcribeAudio = async (audioPath) => {
+    return () => {
+      cleanup();
+    };
+  }, []);
+
+  const toggleRecording = async () => {
     try {
-      const formData = new FormData();
-      formData.append('file', {
-        uri: audioPath,
-        type: 'audio/wav',
-        name: 'audio.wav',
-      });
-      formData.append('model', 'whisper-1');
+      if (!isListening) {
+        const hasPermission = await requestAudioPermission();
+        if (!hasPermission) {
+          Alert.alert('Permission Denied', 'Microphone permission is required for voice recognition');
+          return;
+        }
 
-      const response = await axios.post(
-        'https://api.openai.com/v1/audio/transcriptions',
-        formData,
-        {
-          headers: {
-            Authorization: `Bearer ${data.openai_key}`,
-            'Content-Type': 'multipart/form-data',
-          },
+        setLoading(true);
+        const started = await startRecording();
+        if (started) {
+          setIsListening(true);
+        } else {
+          Alert.alert('Error', 'Failed to start voice recognition');
         }
-      );
-      return response.data.text;
+      } else {
+        setLoading(true);
+        setIsListening(false);
+        await stopRecording();
+      }
     } catch (error) {
-      console.error('Error transcribing audio:', error);
-      return '';
+      console.error('Error in toggleRecording:', error);
+      Alert.alert('Error', 'An error occurred while managing voice recognition');
+      setIsListening(false);
+      await cleanup();
+    } finally {
+      setLoading(false);
+
     }
   };
 
   return (
-    <TouchableOpacity style={styles.button} onPress={toggleRecording} disabled={loading}>
+    <TouchableOpacity 
+      style={styles.button} 
+      onPress={toggleRecording} 
+      disabled={loading}
+    >
       {loading ? (
         <ActivityIndicator size="small" color="#8E8E93" />
       ) : (
-        <Ionicons name={isListening ? 'stop-circle' : 'mic-outline'} size={24} color="#8E8E93" />
+        <Ionicons 
+          name={isListening ? 'stop-circle' : 'mic-outline'} 
+          size={24} 
+          color="#8E8E93" 
+        />
+
       )}
     </TouchableOpacity>
   );

package/src/components/welcomeInput.js

@@ -12,9 +12,11 @@ import {
 import { Header } from '../components/header';
 import { AppContext } from '../contexts/AppContext';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { VoiceButton } from './voice';
 
 export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
-  const { handleSend, input, setInput, showModal, theme, data } = useContext(AppContext);
+
+  const { data, handleSend, input, setInput, showModal, theme } = useContext(AppContext);
 
   return (
         <View style={styles.inputContainer}>
@@ -27,9 +29,9 @@ export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
             multiline
         />
         {data.openai_key && 
-        <TouchableOpacity style={styles.inputButton}>
-            <Ionicons name="mic-outline" size={24} color="#8E8E93" />
-        </TouchableOpacity>
+
+          <VoiceButton/>
+
         }
         <TouchableOpacity
             style={styles.sendButton}

package/src/contexts/AppContext.js

@@ -250,6 +250,11 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
       };
     });
   };
+  
+  function handleVoiceSend(audio, transcription) {
+    //setReadAloud(true)
+    handleSend(transcription)
+  }
 
   return (
     <AppContext.Provider
@@ -259,7 +264,7 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
         startStreaming, setStartStreaming, maintenance, setMaintenance, feedback, setFeedback, handleFeedback, feedbackOpen, setFeedbackOpen, 
         writeFeedback, setWriteFeedback, writeAnswer, setWriteAnswer, BASE_URL, lastMessageId, setLastMessageId, 
         onProductCardClick, onAddToCartClick, data, sessionId, setSessionId, handleWrittenFeedback, switchFeedbackOpen, confirmDisclaimer,
-        formatChatHistory, uiConfig
+        formatChatHistory, uiConfig, handleVoiceSend
       }}
     >
       {children}

package/src/layout/disclaimer.js

@@ -28,7 +28,7 @@ export const Disclaimer = ({ panHandlers }) => {
 
   return (
       <View style={styles.container}>
-        <View {...panHandlers}>
+        <View>
             <Header />
         </View>
         <ScrollView contentContainerStyle={styles.scrollContainer}>

package/src/layout/layout.js

@@ -22,7 +22,10 @@ export const Layout = () => {
         setShowModal("Icon");
       }
     };  
-  
+    
+    /* Currently removed this from the child components.
+    If activating drag to close, put {...panHandlers} in the view around the
+    header on each page (welcome, window, disclaimer) */
     const panResponder = PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
@@ -80,7 +83,7 @@ export const Layout = () => {
         )}
         {showModal === "ChatWindow" && (
           <>
-            <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
+            {/* <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} /> */}
             <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
               <ChatWindow panHandlers={panResponder.panHandlers} />
             </Animated.View>
@@ -88,7 +91,7 @@ export const Layout = () => {
         )}
         {showModal === "Welcome" && (
           <>
-          <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
+          {/* <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} /> */}
           <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
             <Welcome panHandlers={panResponder.panHandlers} />
           </Animated.View>
@@ -96,7 +99,7 @@ export const Layout = () => {
         )}
         {showModal === "Form" &&
           <>
-          <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
+          {/* <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} /> */}
           <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
             <Disclaimer panHandlers={panResponder.panHandlers} />
           </Animated.View>
@@ -104,7 +107,7 @@ export const Layout = () => {
         }
         {showModal === "Email" &&
           <>
-          <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
+          {/* <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} /> */}
           <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
             <EmailForm panHandlers={panResponder.panHandlers} />
           </Animated.View>
@@ -144,11 +147,4 @@ const styles = StyleSheet.create({
   outsideTouchable: {
     flex: 1, 
   },
-  dragHandle: {
-    height: 20,
-    width: '100%',
-    backgroundColor: '#DDD',
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-  }
 });

package/src/layout/welcome.js

@@ -24,7 +24,7 @@ export const Welcome = ({ panHandlers }) => {
         
         {/* Top section */}
         <View style={styles.topContainer}>
-          <View style={styles.topHeader} {...panHandlers}>
+          <View style={styles.topHeader}>
             <Image 
               source={require('../assets/heritage.png')} 
               style={[styles.logo, { tintColor: "white" }]} 

package/src/layout/window.js

@@ -48,7 +48,7 @@ export const ChatWindow = ({ panHandlers }) => {
 
   return (
     <View style={styles.container}>
-      <View {...panHandlers}>
+      <View>
         <Header />
       </View>
 
@@ -73,7 +73,7 @@ export const ChatWindow = ({ panHandlers }) => {
             {msg.type !== "middle" && (
                 <View style={[ styles.messageBubble, msg.type === "user" ? styles.userMessage : styles.aiMessage,]}>
                   <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22 }}}> 
-                    {msg.text}
+                    {typeof msg.text === 'string' ? msg.text : String(msg.text || '')}
                   </Markdown>
                   {(msg.type == 'ai' && i != 0 && msg.message_id ) && 
                     <Feedback message={msg} messageId={msg.message_id}/>
@@ -85,7 +85,7 @@ export const ChatWindow = ({ panHandlers }) => {
               <View style={[styles.middleMessageBubble, styles.middleMessage]}>
                 <Ionicons name="sparkles-outline" size={20} style={{marginRight: 10}}/>
                 <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22 }}}> 
-                {msg.text}
+                {typeof msg.text === 'string' ? msg.text : String(msg.text || '')}
                 </Markdown>
               </View>
             )}
@@ -104,7 +104,8 @@ export const ChatWindow = ({ panHandlers }) => {
               </TouchableOpacity>
             }
 
-            {msg.suggested_questions && Array.isArray(msg.questions) && msg.questions.map((question, index) => (
+            {msg.suggested_questions && Array.isArray(msg.suggested_questions) && msg.suggested_questions.length > 0 && 
+              msg.suggested_questions.map((question, index) => (
                 <TouchableOpacity key={index} style={styles.suggestedQuestionButton}
                   onPress={() => handleButtonClick(question)}>
                   <Text style={styles.suggestedQuestionText}>{question}</Text>

package/src/utils/audioRecorder.js

@@ -1,54 +1,247 @@
 // audioRecorder.js
-import AudioRecorderPlayer from 'react-native-audio-recorder-player';
-import { Platform, PermissionsAndroid } from 'react-native';
-import { NativeModules } from 'react-native';
 
-const audioRecorderPlayer = new AudioRecorderPlayer();
+import { Platform, PermissionsAndroid } from 'react-native';
+import Voice from '@react-native-community/voice';
+import { check, PERMISSIONS, request, RESULTS } from 'react-native-permissions';
 
+let resultCallback = null;
 let silenceTimer = null;
-let rmsValues = [];
-const SILENCE_RMS_THRESHOLD = 0.02; 
-const SILENCE_LENGTH_MS = 2000; 
-  
-export async function startRecording(handleStopRecording) {
+let isCurrentlyRecording = false;
+let finalResult = '';
+const SILENCE_DURATION = 1500; // 1.5 seconds of silence before stopping
 
-  audioRecorderPlayer = new AudioRecorderPlayer();
+// Initialize Voice handlers
+export async function initVoice(onResult) {
+  try {
+    resultCallback = onResult;
+    finalResult = '';
 
-  rmsValues = [];
-  audioRecorderPlayer.startRecorder();
+    // First check if speech recognition is available
+    const isAvailable = await Voice.isAvailable();
+    if (!isAvailable) {
+      console.error('Speech recognition is not available on this device');
+      return false;
+    }
 
-  audioRecorderPlayer.addRecordBackListener((e) => {
-    const rms = Math.sqrt(
-      e.currentMetering.reduce((sum, value) => sum + Math.pow(value / 100, 2), 0) / e.currentMetering.length
-    );
-    rmsValues.push(rms);
+    // Set up all event listeners
+    Voice.onSpeechStart = (e) => {
+      console.log('onSpeechStart: ', e);
+      isCurrentlyRecording = true;
+      finalResult = '';
+      
+      if (silenceTimer) {
+        clearTimeout(silenceTimer);
+        silenceTimer = null;
+      }
+    };
+
+    Voice.onSpeechRecognized = (e) => {
+      console.log('onSpeechRecognized: ', e);
+      if (e.isFinal) {
+        console.log('Speech recognition final');
+        handleFinalResult();
+      }
+    };
 
-    // Detect silence
-    if (rms > SILENCE_RMS_THRESHOLD) {
+    Voice.onSpeechEnd = async (e) => {
+      console.log('onSpeechEnd: ', e);
+      
       if (silenceTimer) {
         clearTimeout(silenceTimer);
         silenceTimer = null;
       }
-    } else if (!silenceTimer) {
-      silenceTimer = setTimeout(() => {
-        handleStopRecording();
-      }, SILENCE_LENGTH_MS);
+
+      // Only handle final result if we're still recording
+      if (isCurrentlyRecording) {
+        await handleFinalResult();
+      }
+    };
+
+    Voice.onSpeechError = async (e) => {
+      console.error('onSpeechError: ', e);
+      
+
+      if (silenceTimer) {
+        clearTimeout(silenceTimer);
+        silenceTimer = null;
+      }
+
+      
+      await cleanupVoiceSession();
+      resultCallback(null, e.error?.message || 'Speech recognition error');
+    };
+
+    Voice.onSpeechResults = (e) => {
+      console.log('onSpeechResults: ', e);
+      if (e.value && e.value.length > 0) {
+        finalResult = e.value[0];
+        handleSilenceDetection();
+      }
+    };
+
+    Voice.onSpeechPartialResults = (e) => {
+      console.log('onSpeechPartialResults: ', e);
+      
+      if (silenceTimer) {
+        clearTimeout(silenceTimer);
+      }
+      
+      if (e.value && e.value.length > 0) {
+        finalResult = e.value[0];
+        handleSilenceDetection();
+      }
+    };
+
+    if (Platform.OS === 'android') {
+      Voice.onSpeechVolumeChanged = (e) => {
+        console.log('onSpeechVolumeChanged: ', e);
+      };
     }
-  });
-  console.log('Recording started...');
+
+    return true;
+  } catch (error) {
+    console.error('Error initializing Voice:', error);
+    return false;
+  }
 }
 
-export async function stopRecording() {
-  if (!audioRecorderPlayer) {
-    console.error('AudioRecorderPlayer instance is null');
-    return null;
+const handleSilenceDetection = () => {
+  if (silenceTimer) {
+    clearTimeout(silenceTimer);
   }
+  
+  silenceTimer = setTimeout(async () => {
+    if (isCurrentlyRecording) {
+      await handleFinalResult();
+    }
+  }, SILENCE_DURATION);
+};
+
+const handleFinalResult = async () => {
+  if (!isCurrentlyRecording) return;
+  
+  if (finalResult) {
+    resultCallback(finalResult);
+  }
+  
+  // Stop recording first
+  await stopRecording();
+  
+  // Then clean up the session
+  await cleanupVoiceSession();
+};
+
+const cleanupVoiceSession = async () => {
+  isCurrentlyRecording = false;
+  
   if (silenceTimer) {
     clearTimeout(silenceTimer);
+    silenceTimer = null;
+  }
+
+  try {
+    // First try to stop if still recognizing
+    const isRecognizing = await Voice.isRecognizing();
+    if (isRecognizing) {
+      try {
+        await Voice.stop();
+        await new Promise(resolve => setTimeout(resolve, 100));
+      } catch (e) {
+        console.error('Error stopping in cleanup:', e);
+      }
+    }
+
+    // Then force destroy
+    await Voice.destroy();
+    await new Promise(resolve => setTimeout(resolve, 300));
+    
+    // Double check and force destroy again if needed
+    const stillRecognizing = await Voice.isRecognizing();
+    if (stillRecognizing) {
+      await Voice.destroy();
+      await new Promise(resolve => setTimeout(resolve, 300));
+    }
+  } catch (error) {
+    console.error('Error in cleanupVoiceSession:', error);
+    // Final attempt to destroy on error
+    try {
+      await Voice.destroy();
+    } catch (e) {
+      console.error('Final destroy attempt failed:', e);
+    }
+  }
+
+  finalResult = '';
+};
+
+export async function startRecording() {
+  try {
+    // Ensure cleanup of any existing session
+    await cleanupVoiceSession();
+    
+    const hasPermission = await requestAudioPermission();
+    if (!hasPermission) {
+      console.error('No permission to record audio');
+      return false;
+    }
+
+    await Voice.start('en-US');
+    isCurrentlyRecording = true;
+    return true;
+  } catch (error) {
+    console.error('Error starting voice recognition:', error);
+    await cleanupVoiceSession();
+    return false;
+  }
+}
+
+export async function stopRecording() {
+  try {
+    if (!isCurrentlyRecording) return;
+
+    // Set this first to prevent race conditions
+    isCurrentlyRecording = false;
+
+    if (silenceTimer) {
+      clearTimeout(silenceTimer);
+      silenceTimer = null;
+    }
+
+    // First try to stop
+    try {
+      await Voice.stop();
+      // Wait a bit for stop to complete
+      await new Promise(resolve => setTimeout(resolve, 100));
+    } catch (error) {
+      console.error('Error stopping Voice:', error);
+    }
+
+    // Then force destroy
+    try {
+      await Voice.destroy();
+      await new Promise(resolve => setTimeout(resolve, 300));
+    } catch (error) {
+      console.error('Error destroying Voice:', error);
+    }
+
+    // Final cleanup
+    await cleanupVoiceSession();
+  } catch (error) {
+    console.error('Error in stopRecording:', error);
+    // Force cleanup on error
+    await cleanupVoiceSession();
   }
-  const result = await audioRecorderPlayer.stopRecorder();
-  console.log('Recording stopped:', result);
-  return result; 
+}
+
+export async function cancelRecording() {
+  try {
+    await Voice.cancel();
+    await cleanupVoiceSession();
+  } catch (error) {
+    console.error('Error canceling voice recognition:', error);
+    await cleanupVoiceSession();
+  }
+
 }
 
 export async function requestAudioPermission() {
@@ -57,16 +250,26 @@ export async function requestAudioPermission() {
   } else if (Platform.OS === 'ios') {
     return await requestIOSPermission();
   }
+
+  return false;
 }
 
-// ✅ Android: Request Microphone Permission
 async function requestAndroidPermission() {
   try {
+    // Check available speech recognition services on Android
+    const services = await Voice.getSpeechRecognitionServices();
+    if (!services || services.length === 0) {
+      console.error('No speech recognition services available');
+      return false;
+    }
+
     const granted = await PermissionsAndroid.request(
       PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
       {
         title: 'Microphone Permission',
-        message: 'This app needs access to your microphone to record audio.',
+
+        message: 'This app needs access to your microphone for voice recognition.',
+
         buttonPositive: 'OK',
         buttonNegative: 'Cancel',
       }
@@ -74,26 +277,44 @@ async function requestAndroidPermission() {
 
     return granted === PermissionsAndroid.RESULTS.GRANTED;
   } catch (error) {
-    console.error('Error requesting microphone permission:', error);
+    console.error('Error requesting Android permission:', error);
+
     return false;
   }
 }
 
-// ✅ iOS: Request Microphone Permission
+
 async function requestIOSPermission() {
   try {
-    const { AVAudioSession } = NativeModules;
-    if (AVAudioSession) {
-      await AVAudioSession.requestRecordPermission((granted) => {
-        console.log('iOS Microphone Permission:', granted);
-        return granted;
-      });
-    } else {
-      console.warn('AVAudioSession not available');
+    // Request microphone permission
+    const micPermission = await request(PERMISSIONS.IOS.MICROPHONE);
+    if (micPermission !== RESULTS.GRANTED) {
+      console.log('Microphone permission denied');
+      return false;
+    }
+
+    // Request speech recognition permission
+    const speechPermission = await request(PERMISSIONS.IOS.SPEECH_RECOGNITION);
+    if (speechPermission !== RESULTS.GRANTED) {
+      console.log('Speech recognition permission denied');
       return false;
     }
+
+    return true;
   } catch (error) {
-    console.error('Error requesting microphone permission on iOS:', error);
+    console.error('Error requesting iOS permissions:', error);
     return false;
   }
 }
+
+export function cleanup() {
+  Voice.destroy().then(() => {
+    Voice.removeAllListeners();
+    cleanupVoiceSession();
+  }).catch(error => {
+    console.error('Error in cleanup:', error);
+    // Try one more time
+    Voice.destroy().catch(e => console.error('Final cleanup attempt failed:', e));
+  });
+}
+