react-native-srschat 0.1.18 → 0.1.19

package/src/components/voice.js

@@ -0,0 +1,84 @@
+// VoiceButton.js
+import React, { useState, useContext } from 'react';
+import { TouchableOpacity, ActivityIndicator, View, StyleSheet } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import axios from 'axios';
+
+import { startRecording, stopRecording, requestAudioPermission } from '../utils/audioRecorder';
+import { AppContext } from '../contexts/AppContext';
+
+export const VoiceButton = () => {
+  const { data, 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();
+    }
+  };
+
+  const handleStopRecording = async () => {
+    setLoading(true);
+    const audioPath = await stopRecording();
+    const transcription = await transcribeAudio(audioPath);
+    setLoading(false);
+    setIsListening(false);
+    handleVoiceSend(audioPath, transcription);
+  };
+
+  const transcribeAudio = async (audioPath) => {
+    try {
+      const formData = new FormData();
+      formData.append('file', {
+        uri: audioPath,
+        type: 'audio/wav',
+        name: 'audio.wav',
+      });
+      formData.append('model', 'whisper-1');
+
+      const response = await axios.post(
+        'https://api.openai.com/v1/audio/transcriptions',
+        formData,
+        {
+          headers: {
+            Authorization: `Bearer ${data.openai_key}`,
+            'Content-Type': 'multipart/form-data',
+          },
+        }
+      );
+      return response.data.text;
+    } catch (error) {
+      console.error('Error transcribing audio:', error);
+      return '';
+    }
+  };
+
+  return (
+    <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" />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+

package/src/components/welcomeInput.js

@@ -14,7 +14,7 @@ import { AppContext } from '../contexts/AppContext';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
 export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
-  const { handleSend, input, setInput, showModal, theme } = useContext(AppContext);
+  const { handleSend, input, setInput, showModal, theme, data } = useContext(AppContext);
 
   return (
         <View style={styles.inputContainer}>
@@ -26,9 +26,11 @@ export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
             placeholderTextColor="#999"
             multiline
         />
-        {/* <TouchableOpacity style={styles.inputButton}>
+        {data.openai_key && 
+        <TouchableOpacity style={styles.inputButton}>
             <Ionicons name="mic-outline" size={24} color="#8E8E93" />
-        </TouchableOpacity> */}
+        </TouchableOpacity>
+        }
         <TouchableOpacity
             style={styles.sendButton}
             onPress={() => handleSend(input)}

package/src/hooks/stream.js

@@ -80,7 +80,7 @@ export function useWebSocketMessage() {
                     console.log(response)
                 }
                 switch (response.type) {
-                    /* case 'middle_message':
+                    case 'middle_message':
                         const middleMessage = {
                             type: "middle",
                             text: response.message,
@@ -88,7 +88,7 @@ export function useWebSocketMessage() {
                             product_cards: "False",
                           }
                         setMessages([...messages, middleMessage])
-                        break; */
+                        break;
                     case 'message':
                         if (response.product_cards == "False" || response.product_cards == false ) {
                             setGhostMessage(false);

package/src/layout/layout.js

@@ -133,12 +133,12 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    top: 140,
+    top: 0,
     pointerEvents: 'box-none',
-    borderTopWidth: 1,
+    /* borderTopWidth: 1,
     borderTopColor: '#DDD',
     borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    borderTopRightRadius: 16, */
     overflow: 'hidden',
   },
   outsideTouchable: {

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);
@@ -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 }}}> 
+                {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>
@@ -110,6 +118,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 +144,10 @@ export const ChatWindow = ({ panHandlers }) => {
             onAddToCartClick={onAddToCartClick} 
           />
         }
-        <ChatInput/>
+        {!typingIndicator ? 
+          <ChatInput/> :
+          <ProgressCircle />
+        }
       </KeyboardAvoidingView>
     </View>
   );
@@ -199,6 +222,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 +257,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,99 @@
+// 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();
+
+let silenceTimer = null;
+let rmsValues = [];
+const SILENCE_RMS_THRESHOLD = 0.02; 
+const SILENCE_LENGTH_MS = 2000; 
+  
+export async function startRecording(handleStopRecording) {
+
+  audioRecorderPlayer = new AudioRecorderPlayer();
+
+  rmsValues = [];
+  audioRecorderPlayer.startRecorder();
+
+  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);
+
+    // Detect silence
+    if (rms > SILENCE_RMS_THRESHOLD) {
+      if (silenceTimer) {
+        clearTimeout(silenceTimer);
+        silenceTimer = null;
+      }
+    } else if (!silenceTimer) {
+      silenceTimer = setTimeout(() => {
+        handleStopRecording();
+      }, SILENCE_LENGTH_MS);
+    }
+  });
+  console.log('Recording started...');
+}
+
+export async function stopRecording() {
+  if (!audioRecorderPlayer) {
+    console.error('AudioRecorderPlayer instance is null');
+    return null;
+  }
+  if (silenceTimer) {
+    clearTimeout(silenceTimer);
+  }
+  const result = await audioRecorderPlayer.stopRecorder();
+  console.log('Recording stopped:', result);
+  return result; 
+}
+
+export async function requestAudioPermission() {
+  if (Platform.OS === 'android') {
+    return await requestAndroidPermission();
+  } else if (Platform.OS === 'ios') {
+    return await requestIOSPermission();
+  }
+}
+
+// ✅ Android: Request Microphone Permission
+async function requestAndroidPermission() {
+  try {
+    const granted = await PermissionsAndroid.request(
+      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+      {
+        title: 'Microphone Permission',
+        message: 'This app needs access to your microphone to record audio.',
+        buttonPositive: 'OK',
+        buttonNegative: 'Cancel',
+      }
+    );
+
+    return granted === PermissionsAndroid.RESULTS.GRANTED;
+  } catch (error) {
+    console.error('Error requesting microphone 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');
+      return false;
+    }
+  } catch (error) {
+    console.error('Error requesting microphone permission on iOS:', error);
+    return false;
+  }
+}

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);
+  }
+};