finalize the chatbot

App.js

@@ -51,11 +51,11 @@ const App = () => {
           component={Chatbot}
           options={{headerShown:false}}
         />
-        <Stack.Screen
+        {/* <Stack.Screen
           name="VoiceConversation"
           component={VoiceConversation}
           options={{headerShown:false}}
-        />
+        /> */}
       </Stack.Navigator>
     </NavigationContainer>
       

src/api.js

 import axios from "axios";
 
-const RASA_BASE = "http://192.168.170.35:5005/webhooks/rest/webhook/"
-const SENTI_BASE = "http://127.0.0.1:8000/chats/"
+const RASA_BASE = "http://127.0.0.1:5005/webhooks/rest/webhook/"
+const SENTI_BASE = "http://127.0.0.1:8000/"
 
 export async function sendToRasa (body){
     return axios({
@@ -11,9 +11,17 @@ export async function sendToRasa (body){
     })
 }
 
+export async function predict (body){
+    return axios({
+        url:`${SENTI_BASE}/test`,
+        method: "POST",
+        data: body
+    })
+}
+
 export async function getChats (id){
     return axios({
-        url:SENTI_BASE + id,
+        url:`${SENTI_BASE}/chats/${id}`,
         method:"GET"
     })
 }
\ No newline at end of file

src/components/chatbot/ChatHeader.js

@@ -4,7 +4,7 @@ import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome5";
 import { COLOR } from '../../themes';
 
-export const ChatHeader = () => {
+export const ChatHeader = ({onPress}) => {
     const navigation = useNavigation();
 	return (
 		<View style={styles.container}>
@@ -29,9 +29,9 @@ export const ChatHeader = () => {
 							color={COLOR.white}
 						/>
 					</TouchableOpacity> */}
-					<TouchableOpacity style={{ paddingHorizontal: 20 }}>
+					<TouchableOpacity onPress={onPress} style={{ paddingHorizontal: 20 }}>
 						<Icon
-							name="ellipsis-v"
+							name="file-contract"
 							size={30}
 							color={COLOR.white}
 						/>

src/screens/Chatbot.js

 import axios from 'axios';
 import React, { useCallback, useEffect, useState } from 'react'
-import { Text, View } from 'react-native'
-import { Bubble, GiftedChat, Send } from 'react-native-gifted-chat';
-import { getChats, sendToRasa } from '../api';
+import { Text, View, Animated, StyleSheet, TouchableOpacity, Image, Modal} from 'react-native'
+import { Bubble, GiftedChat, InputToolbar, Send } from 'react-native-gifted-chat';
+import { getChats, predict, sendToRasa } from '../api';
 import { ChatHeader } from '../components/chatbot/ChatHeader'
 import uuid from 'react-native-uuid';
 import {IMAGE} from '../assets/images/chatbotImage'
 import { COLOR, FONT } from '../themes';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { unixConvertion } from '../assets/utils/UnixConverter';
-import { AlanView } from '@alan-ai/alan-sdk-react-native';
+import { useRef } from 'react';
 
 export const Chatbot = () => {
   const [messages, setMessages] = useState([]);
+  const [start, setStart] = useState(true);
+  const [end, setEnd] = useState(false);
+  const [predictResult, setPredictResault] = useState("");
+  const [visible, setVisible] = useState(false);
+
+  //Control the popup modal
+  const ModalPoup = ({visible, children}) => {
+  const [showModal, setShowModal] = useState(visible);
+  const scaleValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    toggleModal();
+  }, [visible]);
+
+  const toggleModal = () => {
+    if (visible) {
+      setShowModal(true);
+      Animated.spring(scaleValue, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      setTimeout(() => setShowModal(false), 200);
+      Animated.timing(scaleValue, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  };
+  return (
+    <Modal transparent visible={showModal}>
+      <View style={styles.modalBackGround}>
+        <Animated.View
+          style={[styles.modalContainer, {transform: [{scale: scaleValue}]}]}>
+          {children}
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+
 
   const BOT_USER = {
     _id: 2,
@@ -26,15 +70,17 @@ export const Chatbot = () => {
 
   const BOT_MSG = [{
     _id: uuid.v4(),
-    text: `Hi! I am the FAQ bot 🤖 from TEST.\n\nHow may I help you with today?`,
+    text: `Hi! I am the AI chatbot 🤖 \n\nHow may I help you with today?`,
     createdAt: new Date(),
     user: BOT_USER
   }]
 
   useEffect(() => {
     getChatForUser();
+    setStart(true);
   }, [])
 
+  //get chat for  specific user
 const getChatForUser=async() => {
     try{
       const res = await getChats(USER._id)
@@ -77,6 +123,7 @@ const getChatForUser=async() => {
 
 
   const onSend = useCallback(async(msg = []) => {
+
     console.log(msg[0].text);
     setMessages(previousMessages => (GiftedChat.append(previousMessages, msg)));
     try{
@@ -95,6 +142,12 @@ const getChatForUser=async() => {
       }
       )
       setMessages(prev=> prev.concat(reply));
+
+      //send for prediction
+      const prediction =  await predict({"start": start, "text":msg[0].text, "end":end});
+      console.log(prediction.data.overall);
+      setPredictResault(prediction.data.overall)
+      setStart(false); 
     }
     catch(err){
       console.log(err)
@@ -146,8 +199,38 @@ const getChatForUser=async() => {
 
   return (
     <View style={{flex:1}}>
-    <ChatHeader/>
-    <AlanView projectid={'900e11c36e836f117bff78fe3fac34872e956eca572e1d8b807a3e2338fdd0dc/stage'}/>
+    {/* Popup Modal */}
+     <ModalPoup visible={visible}>
+        <View style={{alignItems: 'center'}}>
+          <View style={styles.header}>
+            <TouchableOpacity onPress={() => setVisible(false)}>
+              <Image
+                source={require('../assets/images/close.png')}
+                style={{height: 30, width: 30}}
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View style={{alignItems: 'center'}}>
+          <Image
+            source={require('../assets/images/chatbot.png')}
+            style={{height: 150, width: 150, marginVertical: 10}}
+          />
+        </View>
+
+        <Text style={{marginVertical: 10, fontSize: 22, textAlign: 'center', color:COLOR.greyFont, fontFamily:FONT.SemiBold}}>
+          Completed
+        </Text>
+        <Text style={{fontSize: 15, textAlign: 'center', color:COLOR.greyFont, fontFamily:FONT.Regular}}>
+          Overall Emotion: {predictResult.overalEmotion}
+        </Text>
+        <Text style={{fontSize: 15, textAlign: 'center', color:COLOR.greyFont, fontFamily:FONT.Regular}}>
+          Overall Score: {predictResult.overalScore}
+        </Text>
+      </ModalPoup>
+
+    <ChatHeader onPress={() => setVisible(true)}/>
+
     <GiftedChat
       messages={messages.reverse()}
       onSend={msg => onSend(msg)}
@@ -157,7 +240,40 @@ const getChatForUser=async() => {
       renderBubble={renderBubble}
       renderSend={renderSend}
       scrollToBottom
+      textStyle={{color:'black'}}
+      renderInputToolbar={(props)=>{
+        return <InputToolbar {...props}
+        containerStyle={{borderTopWidth:1.5, borderTopColor:COLOR.primary}}
+        textInputStyle={{color:COLOR.greyFont}}/>
+        }}
     />
     </View>
   )
 }
+
+
+
+
+
+const styles = StyleSheet.create({
+  modalBackGround: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    width: '80%',
+    backgroundColor: 'white',
+    paddingHorizontal: 20,
+    paddingVertical: 30,
+    borderRadius: 20,
+    elevation: 20,
+  },
+  header: {
+    width: '100%',
+    height: 40,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+});
\ No newline at end of file

src/screens/Home.js

@@ -11,7 +11,7 @@ export const Home = () => {
         <View style={styles.container}>
             <Text style={{fontSize:20, fontFamily:FONT.Regular}}>Home</Text>
             <Button title="Chatbot" onPress={()=> navigation.navigate('Chatbot')}/>
-            <Button title="Alan" onPress={()=> navigation.navigate('VoiceConversation')}/>
+            {/* <Button title="Alan" onPress={()=> navigation.navigate('VoiceConversation')}/> */}
         </View>
     );
 };

src/screens/VoiceConversation.js

 import React, {useEffect, useState} from 'react';
-import {View, Text, ScrollView, TouchableHighlight, Image, StyleSheet, TextInput, TouchableOpacity} from 'react-native';
-import Voice from '@react-native-voice/voice';
-import MaterialCommunityIcons  from 'react-native-vector-icons/MaterialCommunityIcons'
-import { COLOR } from '../themes';
+import {
+  View,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  Text,
+  ToastAndroid,
+  ImageBackground,
+} from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import {COLOR, FONT} from '../themes';
+import Voice from '`@react-native-community/voice`';
+import {sendToRasa} from '../api/';
+import {IMAGE} from '../assets/images/chatbotImage';
+import Tts from 'react-native-tts';
+import Lottie from 'lottie-react-native';
+import {LogBox} from 'react-native';
+
 export function VoiceConversation() {
-  const [result, setResult] = useState('')
+  LogBox.ignoreLogs(['new NativeEventEmitter']); // Ignore log notification by message
+  LogBox.ignoreAllLogs(); //Ignore all log notifications
+  Tts.setDefaultRate(0.4);
 
-  useEffect(() => {
-    Voice.onSpeechStart = onSpeechStartHandler;
-    Voice.onSpeechEnd = onSpeechEndHandler;
-    Voice.onSpeechResults = onSpeechResultsHandler;
+  const [pitch, setPitch] = useState('');
+  const [error, setError] = useState('');
+  const [end, setEnd] = useState(true);
+  const [started, setStarted] = useState(false);
+  const [reply, setReply] = useState('Hey, How are you?');
+  const [results, setResults] = useState(['Hi']);
+  const [partialResults, setPartialResults] = useState([]);
 
-    return()=>{
-      Voice.destroy().then(Voice.removeAllListeners);
-    }
-  }, [])  
+  const BOT_USER = {
+    _id: 2,
+    name: 'FAQ Bot',
+    avatar: IMAGE.chatbot,
+  };
+  const USER = {
+    _id: 1,
+    name: 'USER',
+  };
 
-  const onSpeechStartHandler = (e) =>{
-    console,log("e>>>>", e)
-  }
+  const onSpeechStart = e => {
+    setStarted(true);
+  };
+  const onSpeechEnd = () => {
+    setStarted(false);
+    setEnd(true);
+    setStarted(false);
+  };
+  const onSpeechError = e => {
+    setError(JSON.stringify(e.error));
+  };
+  const onSpeechResults = e => {
+    console.log(e.value[0]);
+    setResults(e.value[0]);
+    getReply(e.value[0]);
+  };
+  const onSpeechPartialResults = e => {
+    setPartialResults(e.value);
+  };
+  const onSpeechVolumeChanged = e => {
+    setPitch(e.value);
+  };
 
-  const onSpeechEndHandler = (e)=>{
-    console,log("start handler", e)
-  }
+  useEffect(() => {
+    Voice.onSpeechStart = onSpeechStart;
+    Voice.onSpeechEnd = onSpeechEnd;
+    Voice.onSpeechError = onSpeechError;
+    Voice.onSpeechResults = onSpeechResults;
+    Voice.onSpeechPartialResults = onSpeechPartialResults;
+    Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
 
-  const onSpeechResultsHandler = (e)=>{
-    console,log("Result handler", e)
-  } 
+    return () => {
+      stopSpeechRecognizing();
+    };
+  }, []);
 
-  const startRecording = async() =>{
-    try{
-      await Voice.start('en-Us');
-      console.log("hit")
+  const getReply = async text => {
+    console.log('hit');
+    try {
+      const res = await sendToRasa({message: text, sender: USER._id});
+      console.log(res)
+      if(res.data.length>0){
+        setReply(res.data[0].text);    
+      Tts.getInitStatus().then(() => {
+        Tts.speak(res.data[0].text, {
+          androidParams: {
+            KEY_PARAM_PAN: -1,
+            KEY_PARAM_VOLUME: 0.5,
+            KEY_PARAM_STREAM: 'STREAM_MUSIC',
+          },
+        });
+      });
+    }else{
+      Tts.getInitStatus().then(() => {
+        Tts.speak("Cannot understand you", {
+          androidParams: {
+            KEY_PARAM_PAN: -1,
+            KEY_PARAM_VOLUME: 0.5,
+            KEY_PARAM_STREAM: 'STREAM_MUSIC',
+          },
+        });
+      });
     }
-    catch(err){
-      console.log('error raised', err)
+      Tts.addEventListener('tts-finish', (event) => startSpeechRecognizing());
+    } catch (err) {
+      ToastAndroid.show(err, ToastAndroid.LONG);
     }
+  };
+  const startSpeechRecognizing = async () => {
+    setPitch('');
+    setError('');
+    setStarted(true);
+    // setReply('');
+    setResults([]);
+    setPartialResults([]);
+    setEnd(false);
+    try {
+      await Voice.start('en-US', {
+        EXTRA_SPEECH_INPUT_MINIMUM_LENGTH_MILLIS: 10000,
+      });
+    } catch (e) {
+      console.error(e);
     }
-
-  const stopRecording = async() =>{
-    try{
+  };
+  const stopSpeechRecognizing = async () => {
+    try {
       await Voice.stop();
+      setStarted(false);
+    } catch (e) {
+      console.error(e);
     }
-    catch(err){
-      console.log('error raised', err)
-    }
-  }
+  };
   return (
     <View style={styles.container}>
-      <TextInput value={result} placeholder='your text here'>
-      </TextInput>
-      <TouchableOpacity onPress={startRecording}>
-        <MaterialCommunityIcons name='microphone' size={40} color={COLOR.primary}/>
-      </TouchableOpacity>
-      <TouchableOpacity onPress={stopRecording}>
-        <MaterialCommunityIcons name='stop' size={40} color={COLOR.primary}/>
+    <ImageBackground style={styles.image} 
+      resizeMode='cover' 
+      source={require('../assets/images/voice_background.jpg')}
+      imageStyle={{opacity:0.25}}
+      >
+      <View style={styles.hBox1}>
+      <Text style={{fontFamily:FONT.SemiBold, fontSize:30,padding:5, backgroundColor:'white', borderRadius:50}}>Start the Conversation</Text>
+      </View>
+      <View style={styles.hBox2}>
+        {/* {partialResults.map((result, index) => {
+          return (
+            <Text key={`partial-result-${index}`} style={styles.message}>
+              {results}
+            </Text>
+          );
+        })} */}
+        <Text style={[styles.message, {color: COLOR.primary, padding:5, backgroundColor:'white', borderRadius:50}]}>{reply}</Text>
+      </View>
+      <View style={styles.hBox3}>
+      <Text style={styles.message}>Hi</Text>
+        <TouchableOpacity onPress={startSpeechRecognizing}>
+          <View style={{position: 'relative', alignItems:'center', paddingBottom:10}}>
+          
+            {started ? (
+              <Lottie
+                style={styles.checkAnimation}
+                source={require('../assets/lottie/mic_animation.json')}
+                autoPlay
+                resizeMode="cover"
+                loop={true}
+                speed={1}
+              />
+            ) : (
+              <View style={{borderRadius:140, width:'100%', backgroundColor: COLOR.primary}}>
+              <MaterialCommunityIcons
+                name="microphone"
+                color={COLOR.white}
+                size={90}
+              />
+              </View>
+                
+            )}
+          </View>
         </TouchableOpacity>
       </View>
+      </ImageBackground>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  container:{
+  checkAnimation: {
+    width: '95%',
+    height: '95%',
+    marginLeft: 7,
+    marginTop: 10,
+  },
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor:'white',
+    flexDirection: 'column',
+  },
+  hBox1: {
+    flex: 2,
+    alignItems:'center',
+    // backgroundColor: 'red',
+  },
+  hBox2: {
+    flex: 3,
+    // backgroundColor: 'darkorange',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+  },
+  hBox3: {
+    flex: 2,
+    // backgroundColor: 'green',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  message: {
+    fontFamily: FONT.SemiBold,
+    fontSize: 30,
+    color: 'black',
+  },
+  image:{
     flex:1,
-    justifyContent:'center',
-    alignSelf:'center'
+    justifyContent:'center'
   }
-})
+});