voice conversation buld

App.js

@@ -7,8 +7,11 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {Home} from './src/screens/Home';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Chatbot } from './src/screens/Chatbot';
+import { VoiceConversation } from './src/screens/VoiceConversation';
+
 
 const Stack = createNativeStackNavigator();
+
 // create a component
 const App = () => {
   const [onBoardState, setonBoardState] = useState();
@@ -48,6 +51,11 @@ const App = () => {
           component={Chatbot}
           options={{headerShown:false}}
         />
+        <Stack.Screen
+          name="VoiceConversation"
+          component={VoiceConversation}
+          options={{headerShown:false}}
+        />
       </Stack.Navigator>
     </NavigationContainer>
       

android/app/build.gradle

@@ -135,6 +135,13 @@ android {
 
     compileSdkVersion rootProject.ext.compileSdkVersion
 
+    packagingOptions {
+        pickFirst 'lib/x86/libc++_shared.so'
+        pickFirst 'lib/x86_64/libc++_shared.so'
+        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+        pickFirst 'lib/arm64-v8a/libc++_shared.so'
+    }
+
     defaultConfig {
         applicationId "com.better_you"
         minSdkVersion rootProject.ext.minSdkVersion
@@ -266,6 +273,7 @@ dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation project(':react-native-vector-icons')
     //noinspection GradleDynamicVersion
+    implementation project(':@react-native-voice_voice')
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

android/app/src/main/java/com/better_you/MainApplication.java

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.wenkesj.voice.VoicePackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -27,7 +28,7 @@ public class MainApplication extends Application implements ReactApplication {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
           // Packages that cannot be autolinked yet can be added manually here, for example:
-          // packages.add(new MyReactNativePackage());
+          //packages.add(new VoicePackage());
           return packages;
         }
 

android/settings.gradle

 rootProject.name = 'better_you'
+include ':@react-native-voice_voice'
+project(':@react-native-voice_voice').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-voice/voice/android')
+include ':@react-native-voice_voice'
+project(':@react-native-voice_voice').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-voice/voice/android')
+include ':@react-native-voice_voice'
+project(':@react-native-voice_voice').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-voice/voice/android')
+include ':@react-native-community_voice'
+project(':@react-native-community_voice').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/voice/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/react-native-gradle-plugin')
@@ -7,6 +15,9 @@ includeBuild('../node_modules/react-native-gradle-plugin')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 
+include ':@react-native-voice_voice', ':app'
+project(':@react-native-voice_voice').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-voice/voice/android')
+
 if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
     include(":ReactAndroid")
     project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')

ios/Podfile

@@ -19,6 +19,8 @@ target 'better_you' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
+  pod 'react-native-voice', :path => '../node_modules/@react-native-community/voice'
+
   target 'better_youTests' do
     inherit! :complete
     # Pods for testing

package.json

@@ -10,7 +10,9 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@alan-ai/alan-sdk-react-native": "^1.15.0",
     "@react-native-async-storage/async-storage": "^1.17.3",
+    "@react-native-voice/voice": "^3.2.4",
     "@react-navigation/core": "^6.2.1",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
@@ -23,7 +25,8 @@
     "react-native-safe-area-context": "^4.2.4",
     "react-native-screens": "^3.13.1",
     "react-native-uuid": "^2.0.1",
-    "react-native-vector-icons": "^9.2.0"
+    "react-native-vector-icons": "^9.2.0",
+    "unix-timestamp": "^1.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",

src/api.js

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

src/assets/utils/UnixConverter.js

+
+const timestamp = require('unix-timestamp');
+
+export function unixConvertion(val){
+    return timestamp.toDate(val)
+}
\ No newline at end of file

src/components/chatbot/ChatHeader.js

@@ -20,7 +20,7 @@ export const ChatHeader = () => {
 					</View>
 				</TouchableOpacity>
 				<View style={styles.options}>
-					<TouchableOpacity
+					{/* <TouchableOpacity
 						style={{ paddingHorizontal: 5 }}
 					>
 						<Icon
@@ -28,7 +28,7 @@ export const ChatHeader = () => {
 							size={30}
 							color={COLOR.white}
 						/>
-					</TouchableOpacity>
+					</TouchableOpacity> */}
 					<TouchableOpacity style={{ paddingHorizontal: 20 }}>
 						<Icon
 							name="ellipsis-v"

src/screens/Chatbot.js

@@ -2,12 +2,14 @@ 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 { sendToRasa } from '../api';
+import { getChats, 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';
 
 export const Chatbot = () => {
   const [messages, setMessages] = useState([]);
@@ -22,23 +24,64 @@ export const Chatbot = () => {
     name: 'USER',
   };
 
+  const BOT_MSG = [{
+    _id: uuid.v4(),
+    text: `Hi! I am the FAQ bot 🤖 from TEST.\n\nHow may I help you with today?`,
+    createdAt: new Date(),
+    user: BOT_USER
+  }]
+
   useEffect(() => {
-    setMessages([
-      {
-        _id: 1,
-        text: `Hi! I am the FAQ bot 🤖 from TEST.\n\nHow may I help you with today?`,
-        createdAt: new Date(),
-        user: BOT_USER
-      },
-      
-    ])
+    getChatForUser();
   }, [])
 
+const getChatForUser=async() => {
+    try{
+      const res = await getChats(USER._id)
+      const filter1 = res.data[0].events
+
+      //Filter the User and Bot messaages
+      const chats = filter1.filter((n)=>{
+        return (n.event == "user" || n.event=="bot") && n
+      }) 
+      console.log(chats)
+      let conv = [];
+      chats.map((c)=>{
+        if(c.event=="bot"){
+          const chat = {
+           ...c,
+           _id:uuid.v4(),
+           createdAt:new Date(unixConvertion(c.timestamp)),
+           user: BOT_USER
+           }
+           conv.push(chat)
+        }
+        else{
+          const chat = {
+            ...c,
+            _id:uuid.v4(),
+            createdAt:new Date(unixConvertion(c.timestamp)),
+            user:USER
+          }
+          conv.push(chat)
+        }
+      }
+      )
+      console.log(conv)
+      setMessages(conv.concat(BOT_MSG));
+    }
+    catch(err){
+      console.log(err)
+    }
+  }
+
+
   const onSend = useCallback(async(msg = []) => {
     console.log(msg[0].text);
     setMessages(previousMessages => (GiftedChat.append(previousMessages, msg)));
     try{
-      const res = await sendToRasa(msg[0].text);
+      const req = {message:msg[0].text, sender: USER._id}
+      const res = await sendToRasa(req);
       let reply = [];
       res.data.map((d)=>{
         console.log(d.text);
@@ -104,12 +147,12 @@ export const Chatbot = () => {
   return (
     <View style={{flex:1}}>
     <ChatHeader/>
+    <AlanView projectid={'900e11c36e836f117bff78fe3fac34872e956eca572e1d8b807a3e2338fdd0dc/stage'}/>
     <GiftedChat
       messages={messages.reverse()}
       onSend={msg => onSend(msg)}
       user={USER}
       alwaysShowSend={true}
-      loadEarlier={true}
       renderAvatarOnTop={true}
       renderBubble={renderBubble}
       renderSend={renderSend}

src/screens/Home.js

@@ -9,8 +9,9 @@ export const Home = () => {
     const navigation = useNavigation();
     return (
         <View style={styles.container}>
-            <Text style={{fontSize:20, fontFamily:FONT.Regular}}>Hoame</Text>
+            <Text style={{fontSize:20, fontFamily:FONT.Regular}}>Home</Text>
             <Button title="Chatbot" onPress={()=> navigation.navigate('Chatbot')}/>
+            <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';
+export function VoiceConversation() {
+  const [result, setResult] = useState('')
+
+  useEffect(() => {
+    Voice.onSpeechStart = onSpeechStartHandler;
+    Voice.onSpeechEnd = onSpeechEndHandler;
+    Voice.onSpeechResults = onSpeechResultsHandler;
+
+    return()=>{
+      Voice.destroy().then(Voice.removeAllListeners);
+    }
+  }, [])  
+
+  const onSpeechStartHandler = (e) =>{
+    console,log("e>>>>", e)
+  }
+
+  const onSpeechEndHandler = (e)=>{
+    console,log("start handler", e)
+  }
+
+  const onSpeechResultsHandler = (e)=>{
+    console,log("Result handler", e)
+  } 
+
+  const startRecording = async() =>{
+    try{
+      await Voice.start('en-Us');
+      console.log("hit")
+    }
+    catch(err){
+      console.log('error raised', err)
+    }
+  }
+
+  const stopRecording = async() =>{
+    try{
+      await Voice.stop();
+    }
+    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}/>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container:{
+    flex:1,
+    justifyContent:'center',
+    alignSelf:'center'
+  }
+})