react-native-srschat 0.1.19 → 0.1.21

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" }]} 
@@ -61,7 +61,9 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   parentContainer: {
-    flexGrow: 1
+    flexGrow: 1,
+    backgroundColor: '#004687',
+    paddingTop: 60
   },
   topContainer: {
     backgroundColor: '#004687',
@@ -111,6 +113,7 @@ const styles = StyleSheet.create({
   },
   bottomContainer: {
     paddingHorizontal: 25,
+    backgroundColor: "#f6f6f6",
     paddingTop: 30
   },
   welcomeBody: {

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>