react-native-srschat 0.1.18 → 0.1.20

package/lib/typescript/contexts/AppContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/AppContext.js"],"names":[],"mappings":"AAKA,4CAA0C;AAEnC;;;;;;sBAoQN;kBA3Q6E,OAAO"}
+{"version":3,"file":"AppContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/AppContext.js"],"names":[],"mappings":"AAKA,4CAA0C;AAEnC;;;;;;sBAyQN;kBAhR6E,OAAO"}

package/lib/typescript/layout/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/layout/layout.js"],"names":[],"mappings":"AAWO,4CAuGN;kBAlH8D,OAAO"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/layout/layout.js"],"names":[],"mappings":"AAWO,4CA0GN;kBArH8D,OAAO"}

package/lib/typescript/layout/window.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/layout/window.js"],"names":[],"mappings":"AAcO;;sBAoHN;kBAlI8D,OAAO"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/layout/window.js"],"names":[],"mappings":"AAeO;;sBA2IN;kBA1J8D,OAAO"}

package/lib/typescript/utils/audioRecorder.d.ts

@@ -0,0 +1,7 @@
+export function initVoice(onResult: any): Promise<boolean>;
+export function startRecording(): Promise<boolean>;
+export function stopRecording(): Promise<void>;
+export function cancelRecording(): Promise<void>;
+export function requestAudioPermission(): Promise<boolean>;
+export function cleanup(): void;
+//# sourceMappingURL=audioRecorder.d.ts.map

package/lib/typescript/utils/audioRecorder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioRecorder.d.ts","sourceRoot":"","sources":["../../../src/utils/audioRecorder.js"],"names":[],"mappings":"AAaA,2DA4FC;AAuED,mDAmBC;AAED,+CAoCC;AAED,iDASC;AAED,2DAQC;AAuDD,gCASC"}

package/lib/typescript/utils/textToSpeech.d.ts

@@ -0,0 +1,2 @@
+export function TextToSpeech(inputText: any): Promise<void>;
+//# sourceMappingURL=textToSpeech.d.ts.map

package/lib/typescript/utils/textToSpeech.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textToSpeech.d.ts","sourceRoot":"","sources":["../../../src/utils/textToSpeech.js"],"names":[],"mappings":"AAMO,4DA+BN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-srschat",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "private": false,
   "description": "A modern, sophisticated chat interface for React Native",
   "main": "lib/commonjs/index",
@@ -46,7 +46,7 @@
     "eslint-plugin-react-native": "^4.0.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "react": "18.2.0",
-    "react-native": "0.73.6",
+    "react-native": "^0.73.6",
     "react-native-builder-bob": "^0.20.0",
     "typescript": "^5.0.0"
   },
@@ -61,12 +61,17 @@
   "dependencies": {
     "@babel/runtime": "^7.20.0",
     "@react-native-async-storage/async-storage": "^2.1.1",
+    "@react-native-community/audio-toolkit": "^2.0.3",
+    "@react-native-community/voice": "^1.1.9",
     "@react-native-picker/picker": "^2.11.0",
     "axios": "^1.7.9",
+    "react-native-audio-recorder-player": "^3.6.12",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-markdown-display": "^7.0.2",
+    "react-native-permissions": "^5.2.6",
     "react-native-uuid": "^2.0.3",
-    "react-native-vector-icons": "^10.2.0"
+    "react-native-vector-icons": "^10.2.0",
+    "react-native-video": "^6.10.2"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/components/email.js

@@ -6,18 +6,18 @@ import { AppContext } from "../contexts/AppContext";
 import { Header } from "./header";
 
 export const EmailForm = ({ panHandlers }) => {
-  const { BASE_URL, setShowModal, messages, formatChatHistory, conversationStartTime } = useContext(AppContext);
+  const { data, BASE_URL, setShowModal, messages, formatChatHistory, conversationStartTime } = useContext(AppContext);
   const [subject, setSubject] = useState("");
   const [message, setMessage] = useState("");
   const [userEmail, setUserEmail] = useState("");
-  const [branchEmail, setBranchEmail] = useState("");
+  const [branchEmail, setBranchEmail] = useState(data.branch_email || "");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
   const [isComposing, setIsComposing] = useState(false);
 
   const handleComposeEmail = async () => {
-    setIsComposing(true);
+    setIsComposing(true); 
     setError("");
 
     try {
@@ -26,7 +26,7 @@ export const EmailForm = ({ panHandlers }) => {
         chat_history: chatHistory,
         conversation_start_time: conversationStartTime,
         customer_name: '',
-        branch_email: "",
+        branch_email: branchEmail,
       };
 
       const response = await axios.post(`https://${BASE_URL}/compose-email`, payload);
@@ -55,13 +55,13 @@ export const EmailForm = ({ panHandlers }) => {
     try {
       const chatHistory = formatChatHistory();
       await axios.post(`https://${BASE_URL}/send-email`, {
-        user_email: 'cristin@instalily.ai',
+        user_email: userEmail,
         subject,
         message,
         chat_history: chatHistory,
         conversation_start_time: conversationStartTime,
         customer_name: '',
-        branch_email: "",
+        branch_email: branchEmail,
       });
 
       setSuccess(true);
@@ -78,7 +78,7 @@ export const EmailForm = ({ panHandlers }) => {
 
     return (
       <View style={styles.container}>
-        <View {...panHandlers}>
+        <View>
             <Header />
         </View>
         <View style={styles.topBar}>

package/src/components/header.js

@@ -18,33 +18,33 @@ export const Header = () => {
     <View style={styles.header}>
       {/* Logo on the left */}
       <View style={styles.section}>
-        <Image source={require('../assets/heritage.png')} style={styles.logo} />
+        <Image source={require('../assets/heritage.png')} style={[styles.logo, { tintColor: "white" }]}  />
       </View>
 
       {/* Title in the center */}
-      <View style={[styles.section, styles.titleContainer]}>
+      {/* <View style={[styles.section, styles.titleContainer]}>
         <View style={styles.titleWrapper}>
           <Text style={styles.title}>
             Poseidon
           </Text>
           <Text style={styles.betaText}><Ionicons name="sparkles-outline" size={10} color="#007AFF" />beta</Text>
         </View>
-      </View>
+      </View> */}
 
       {/* Close button on the right */}
       <View style={styles.iconsSection}>
         {showModal !== "Form" && showModal !== "Email" &&
           <>
           <TouchableOpacity onPress={() => setShowModal("Email")}>
-            <Ionicons name="mail" size={24} color="gray" />
+            <Ionicons name="mail" size={24} color="white" />
           </TouchableOpacity>
           <TouchableOpacity onPress={() => handleClearState()}>
-            <Ionicons name="trash" size={24} color="gray" />
+            <Ionicons name="trash" size={24} color="white" />
           </TouchableOpacity>
           </>
         }
         <TouchableOpacity onPress={() => handleClick()}>
-          <Ionicons name="chevron-down" size={24} color="gray" />
+          <Ionicons name="chevron-down" size={24} color="white" />
         </TouchableOpacity>
       </View>
     </View>
@@ -55,14 +55,16 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#f6f6f6',
+    backgroundColor: '#186494',
     padding: 16,
+    paddingTop: 60,
     borderBottomWidth: 1,
     borderBottomColor: '#ddd',
+    justifyContent: 'space-between'
   },
   section: {
     flex: 1,
-    alignItems: 'center',
+    alignItems: 'flex-start'
   },
   iconsSection: {
     flex: 1,
@@ -71,13 +73,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'flex-end',
     marginRight: 10,
-    gap: 4,
+    gap: 8,
   },
   logo: {
     width: 110,
     height: 40,
     marginLeft: 10,
-    resizeMode: 'contain',
+    resizeMode: 'contain'
   },
   titleContainer: {
     flex: 2, // Slightly larger space for the title

package/src/components/input.js

@@ -12,9 +12,10 @@ 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 ChatInput = ({ onProductCardClick, onAddToCartClick }) => {
-  const { handleSend, input, setInput, showModal } = useContext(AppContext);
+  const { handleSend, input, setInput, showModal, data } = useContext(AppContext);
 
   return (
     <>
@@ -29,9 +30,9 @@ export const ChatInput = ({ onProductCardClick, onAddToCartClick }) => {
             placeholderTextColor="#999"
             multiline
         />
-        {/* <TouchableOpacity style={styles.inputButton}>
-            <Ionicons name="mic-outline" size={24} color="#8E8E93" />
-        </TouchableOpacity> */}
+        {data.openai_key && 
+          <VoiceButton/>
+        }
         <TouchableOpacity style={styles.sendButton} onPress={() => handleSend(input)} >
             <Ionicons name="paper-plane-outline" size={24} color='#8E8E93' />
         </TouchableOpacity>

package/src/components/productCard.js

@@ -1,6 +1,7 @@
 import React, { useState, useContext } from "react";
 import { View, Text, Image, TouchableOpacity, TextInput, StyleSheet, Platform } from "react-native";
 import { AppContext } from "../contexts/AppContext";
+import Ionicons from 'react-native-vector-icons/Ionicons';
 
 export const ProductCard = ({ prod }) => {
   const { onProductCardClick, onAddToCartClick } = useContext(AppContext);
@@ -188,6 +189,8 @@ const styles = StyleSheet.create({
     fontWeight: "medium",
     color: "#161616",
     marginBottom: 5,
+    textDecorationLine: "underline",
+    textDecorationColor: "#367CB6"
   },
   details: {
     fontSize: 13,

package/src/components/progressCircle.js

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useContext } from "react";
+import { View, Animated, StyleSheet, Pressable, Text } from "react-native";
+import { AppContext } from "../contexts/AppContext";
+
+export const ProgressCircle = () => {
+    const { stopGenerating } = useContext(AppContext);
+    const spinValue = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        const spinAnimation = Animated.loop(
+            Animated.timing(spinValue, {
+                toValue: 1,
+                duration: 1400, 
+                useNativeDriver: true,
+            })
+        );
+        spinAnimation.start();
+
+        return () => spinAnimation.stop(); // Cleanup on unmount
+    }, [spinValue]);
+
+    const spin = spinValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ["0deg", "360deg"],
+    });
+
+    return (
+        <>
+        <Text style={styles.textBeta}>Beta version. Poseidon is learning!</Text>
+        <View style={styles.container}>
+            <Pressable style={styles.circleContainer} onPress={stopGenerating}>
+                <Animated.View style={[styles.circle, { transform: [{ rotate: spin }] }]} />
+                <View style={styles.stopSquare} />
+            </Pressable>
+        </View>
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingHorizontal: 6,
+        paddingVertical: 6,
+        backgroundColor: "#f6f6f6",
+        borderTopWidth: 1,
+        borderTopColor: "rgba(0, 0, 0, 0.1)",
+        paddingBottom: 35,
+        paddingTop: 15
+    },
+    circleContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: 50,
+        height: 50,
+        marginRight: 20,
+        position: "relative",
+    },
+    circle: {
+        borderWidth: 4,
+        borderColor: "#dddbd9",
+        borderTopColor: "#666666",
+        borderRadius: 50,
+        width: 40,
+        height: 40,
+    },
+    stopSquare: {
+        width: 13,
+        height: 13,
+        backgroundColor: "#666666",
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: [{ translateX: -6.5 }, { translateY: -6.5 }],
+    },
+    textBeta: {
+        textAlign: 'center', 
+        fontSize: 11,
+        color: '#808080',
+        fontWeight: '400',
+        marginTop: 5,
+        marginBottom: 2
+      },
+});

package/src/components/voice.js

@@ -0,0 +1,111 @@
+// VoiceButton.js
+
+import React, { useState, useContext, useEffect } from 'react';
+import { TouchableOpacity, ActivityIndicator, StyleSheet, Alert } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+import { 
+  startRecording, 
+  stopRecording, 
+  cancelRecording,
+  requestAudioPermission, 
+  cleanup, 
+  initVoice 
+} from '../utils/audioRecorder';
+import { AppContext } from '../contexts/AppContext';
+
+export const VoiceButton = () => {
+  const { handleVoiceSend } = useContext(AppContext);
+  const [isListening, setIsListening] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  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);
+        }
+      });
+
+      if (!initialized) {
+        Alert.alert(
+          'Error',
+          'Speech recognition is not available on this device'
+        );
+      }
+    };
+
+    setupVoice();
+
+    return () => {
+      cleanup();
+    };
+  }, []);
+
+  const toggleRecording = async () => {
+    try {
+      if (!isListening) {
+        const hasPermission = await requestAudioPermission();
+        if (!hasPermission) {
+          Alert.alert('Permission Denied', 'Microphone permission is required for voice recognition');
+          return;
+        }
+
+        setLoading(true);
+        const started = await startRecording();
+        if (started) {
+          setIsListening(true);
+        } else {
+          Alert.alert('Error', 'Failed to start voice recognition');
+        }
+      } else {
+        setLoading(true);
+        setIsListening(false);
+        await stopRecording();
+      }
+    } catch (error) {
+      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}
+    >
+      {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

@@ -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 } = useContext(AppContext);
+
+  const { data, handleSend, input, setInput, showModal, theme } = useContext(AppContext);
 
   return (
         <View style={styles.inputContainer}>
@@ -26,9 +28,11 @@ export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
             placeholderTextColor="#999"
             multiline
         />
-        {/* <TouchableOpacity style={styles.inputButton}>
-            <Ionicons name="mic-outline" size={24} color="#8E8E93" />
-        </TouchableOpacity> */}
+        {data.openai_key && 
+
+          <VoiceButton/>
+
+        }
         <TouchableOpacity
             style={styles.sendButton}
             onPress={() => handleSend(input)}

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/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/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>
@@ -133,22 +136,15 @@ 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: {
     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" }]}