react-native-srschat 0.1.18 → 0.1.20

package/src/layout/window.js

@@ -11,10 +11,11 @@ import { useWebSocketMessage } from '../hooks/stream';
 import { ProductCard } from '../components/productCard'
 import Markdown from 'react-native-markdown-display';
 import { Feedback } from '../components/feedback';
+import { ProgressCircle } from '../components/progressCircle';
 
 export const ChatWindow = ({ panHandlers }) => {
   const { handleSend, messages, input, setInput, ghostMessage, handleButtonClick,
-    onProductCardClick, onAddToCartClick, uiConfig
+    onProductCardClick, onAddToCartClick, uiConfig, ghostCard, typingIndicator
    } = useContext(AppContext);
 
   const scrollViewRef = useRef(null);
@@ -47,7 +48,7 @@ export const ChatWindow = ({ panHandlers }) => {
 
   return (
     <View style={styles.container}>
-      <View {...panHandlers}>
+      <View>
         <Header />
       </View>
 
@@ -72,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}/>
@@ -80,6 +81,15 @@ export const ChatWindow = ({ panHandlers }) => {
                 </View>
             )}
 
+            {msg.type == "middle" && (
+              <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 }}}> 
+                {typeof msg.text === 'string' ? msg.text : String(msg.text || '')}
+                </Markdown>
+              </View>
+            )}
+
             {msg.products && msg.products.length > 0 &&
               msg.products.map((prod, index) => (
                 <View key={index} style={styles.productCardWrapper}>
@@ -87,8 +97,6 @@ export const ChatWindow = ({ panHandlers }) => {
                 </View>
             ))}
             
-            {/* "https://player.vimeo.com/video/857307005?h=441fb14207&badge=0&autopause=0&player_id=0&app_id=58479"
- */}
             {msg.resource && msg.resource.length > 0 && msg.resource_type == "video" &&
               <TouchableOpacity style={styles.resourceButton} onPress={() => openLink(msg.resource)}>
                 <Text style={styles.resourceText}>Watch Video</Text>
@@ -96,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>
@@ -110,6 +119,18 @@ export const ChatWindow = ({ panHandlers }) => {
                 <Animated.View style={[styles.ghostBar, styles.ghostBarMedium, { opacity: fadeAnim }]} />
               </View>
             )}
+
+            {ghostCard && i === messages.length - 1 && (
+              <View style={styles.ghostCardContainer}>
+                <View style={styles.ghostSquare} />
+                <View style={styles.ghostBarsContainer}>
+                  <Animated.View style={[styles.ghostBar, styles.ghostBarShort, { opacity: fadeAnim }]} />
+                  <Animated.View style={[styles.ghostBar, styles.ghostBarLong, { opacity: fadeAnim }]} />
+                  <Animated.View style={[styles.ghostBar, styles.ghostBarMedium, { opacity: fadeAnim }]} />
+                </View>
+              </View>
+            )}
+
           </View>
         ))}
       </KeyboardAwareScrollView>
@@ -124,7 +145,10 @@ export const ChatWindow = ({ panHandlers }) => {
             onAddToCartClick={onAddToCartClick} 
           />
         }
-        <ChatInput/>
+        {!typingIndicator ? 
+          <ChatInput/> :
+          <ProgressCircle />
+        }
       </KeyboardAvoidingView>
     </View>
   );
@@ -199,6 +223,26 @@ const styles = StyleSheet.create({
   ghostBarLong: {
     width: "100%",
   },
+  ghostCardContainer: {
+    flexDirection: "row", // Arrange elements in a row
+    alignItems: "center", // Vertically align items
+    width: "100%",
+    backgroundColor: "#FFFFFF",
+    borderRadius: 10,
+    borderTopLeftRadius: 0,
+    padding: 14,
+    marginVertical: 5,
+  },
+  ghostSquare: {
+    width: "25%", // Takes up 25% of the container
+    aspectRatio: 1, // Makes it a square
+    backgroundColor: "#ebebeb", // Adjust color if needed
+    borderRadius: 8,
+  },
+  ghostBarsContainer: {
+    width: "75%", // Takes up 75% of the container
+    paddingLeft: 10, // Adds some spacing from the square
+  },
   resourceButton: {
     flexDirection: 'row', 
     alignItems: 'center', 
@@ -214,6 +258,20 @@ const styles = StyleSheet.create({
       fontSize: 16,
       marginRight: 8, 
   },
+  middleMessageBubble:{
+    padding: 6,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 5,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  middleMessage:{
+    color: '#161616', 
+    alignSelf: 'flex-start',
+    backgroundColor: '#e0f4fc', //'#e0f4fc',
+    width: '100%',
+  }
 });
 
 {/* <Testing          

package/src/utils/audioRecorder.js

@@ -0,0 +1,320 @@
+// audioRecorder.js
+
+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 isCurrentlyRecording = false;
+let finalResult = '';
+const SILENCE_DURATION = 1500; // 1.5 seconds of silence before stopping
+
+// Initialize Voice handlers
+export async function initVoice(onResult) {
+  try {
+    resultCallback = onResult;
+    finalResult = '';
+
+    // 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;
+    }
+
+    // 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();
+      }
+    };
+
+    Voice.onSpeechEnd = async (e) => {
+      console.log('onSpeechEnd: ', e);
+      
+      if (silenceTimer) {
+        clearTimeout(silenceTimer);
+        silenceTimer = null;
+      }
+
+      // 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);
+      };
+    }
+
+    return true;
+  } catch (error) {
+    console.error('Error initializing Voice:', error);
+    return false;
+  }
+}
+
+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();
+  }
+}
+
+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() {
+  if (Platform.OS === 'android') {
+    return await requestAndroidPermission();
+  } else if (Platform.OS === 'ios') {
+    return await requestIOSPermission();
+  }
+
+  return false;
+}
+
+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 for voice recognition.',
+
+        buttonPositive: 'OK',
+        buttonNegative: 'Cancel',
+      }
+    );
+
+    return granted === PermissionsAndroid.RESULTS.GRANTED;
+  } catch (error) {
+    console.error('Error requesting Android permission:', error);
+
+    return false;
+  }
+}
+
+
+async function requestIOSPermission() {
+  try {
+    // 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 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));
+  });
+}
+

package/src/utils/textToSpeech.js

@@ -0,0 +1,38 @@
+// textToSpeech.js
+import React,{ useState, useContext} from 'react';
+import axios from 'axios';
+import Sound from 'react-native-sound';
+import { AppContext } from '../contexts/AppContext';
+
+export const TextToSpeech = async (inputText) => {
+  const { data } = useContext(AppContext)
+  try {
+    const response = await axios.post(
+      'https://api.openai.com/v1/audio/speech',
+      {
+        model: 'tts-1',
+        voice: 'alloy',
+        input: inputText,
+      },
+      {
+        headers: {
+          Authorization: `Bearer ${data.openai_key}`,
+          'Content-Type': 'application/json',
+        },
+        responseType: 'arraybuffer',
+      }
+    );
+
+    const audioFile = `data:audio/mp3;base64,${Buffer.from(response.data).toString('base64')}`;
+
+    const sound = new Sound(audioFile, null, (error) => {
+      if (error) {
+        console.error('Error playing sound:', error);
+      } else {
+        sound.play();
+      }
+    });
+  } catch (error) {
+    console.error('Error generating TTS:', error);
+  }
+};