Commit b8842fd5 authored by Malith Anjana's avatar Malith Anjana

add chatbot

parent b31ccf5f
......@@ -6,6 +6,7 @@ import { NavigationContainer } from '@react-navigation/native';
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';
const Stack = createNativeStackNavigator();
// create a component
......@@ -16,7 +17,7 @@ const App = () => {
retrieveData();
});
//Onboardin check
//Onboarding check
const retrieveData = async () => {
try {
const value = await AsyncStorage.getItem('hasOnboarded');
......@@ -31,17 +32,22 @@ const App = () => {
<NavigationContainer>
<Stack.Navigator>
{<Stack.Screen
<Stack.Screen
name="Onboard"
component={Onboard}
initialParams
options={{headerShown:false}}
/>}
/>
<Stack.Screen
name="Home"
component={Home}
options={{ title: 'Welcome' }}
/>
<Stack.Screen
name="Chatbot"
component={Chatbot}
options={{headerShown:false}}
/>
</Stack.Navigator>
</NavigationContainer>
......
......@@ -83,6 +83,7 @@ project.ext.react = [
]
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
/**
* Set this to true to create two separate APKs instead of one:
......@@ -263,7 +264,7 @@ android {
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation project(':react-native-vector-icons')
//noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+" // From node_modules
......
......@@ -3,6 +3,10 @@ apply from: file("../node_modules/@react-native-community/cli-platform-android/n
include ':app'
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')
if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
include(":ReactAndroid")
project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
......
import axios from "axios";
const RASA_BASE = "http://192.168.124.34:5005/webhooks/rest/webhook"
export async function sendToRasa (body){
return axios({
url:RASA_BASE,
method: "POST",
data: {message:body}
})
}
\ No newline at end of file
import { useNavigation } from "@react-navigation/core";
import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome5";
export const ChatHeader = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<TouchableOpacity style={styles.backButton}>
<Icon name="angle-left" size={30}/>
</TouchableOpacity>
<View style={styles.profileOptions}>
<TouchableOpacity style={styles.profile}>
<Image style={styles.image} source={{ uri: "data:image/png;base64,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" }} />
<View style={styles.usernameAndOnlineStatus}>
<Text style={styles.username}>"test"</Text>
<Text style={styles.onlineStatus}>"Text</Text>
</View>
</TouchableOpacity>
<View style={styles.options}>
<TouchableOpacity
style={{ paddingHorizontal: 5 }}
>
<Icon
name="phone"
size={30}
color={"white"}
/>
</TouchableOpacity>
<TouchableOpacity style={{ paddingHorizontal: 20 }}>
<Icon
name="ellipsis-v"
size={30}
color={"white"}
/>
</TouchableOpacity>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: "row",
backgroundColor: "blue",
paddingTop: 10,
paddingBottom: 10,
},
backButton: {
alignSelf: "center",
paddingHorizontal: 10,
},
profileOptions: {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 10,
},
profile: {
flexDirection: "row",
alignItems: "center",
borderColor: "#fff",
flex: 4,
},
image: {
height: 65,
width: 65,
borderRadius: 32.5,
},
usernameAndOnlineStatus: {
flexDirection: "column",
justifyContent: "center",
paddingHorizontal: 10,
},
username: {
color: "white",
fontSize: 18,
fontWeight: "bold",
},
onlineStatus: {
color: "white",
fontSize: 16,
},
options: {
flex: 1,
flexDirection: "row",
justifyContent: "flex-end",
alignItems: "center",
},
});
module.exports = {
dependencies: {
'react-native-vector-icons': {
platforms: {
ios: null,
},
},
},
};
\ No newline at end of file
import axios from 'axios';
import React, { useCallback, useEffect, useState } from 'react'
import { Text, View } from 'react-native'
import { GiftedChat } from 'react-native-gifted-chat';
import { sendToRasa } from '../api';
import { ChatHeader } from '../components/chatbot/ChatHeader'
export const Chatbot = () => {
const [messages, setMessages] = useState([]);
useEffect(() => {
// setMessages([
// {
// _id: 1,
// text: 'Hello how is going',
// createdAt: new Date(),
// sendTo:2,
// sentBy:1,
// user: {
// _id: 1,
// name: 'React Native',
// avatar: 'https://placeimg.com/140/140/any',
// },
// },
// {
// _id: 2,
// text: 'Hello developer',
// createdAt: new Date(),
// user: {
// _id: 2,
// name: 'React Native',
// avatar: 'https://placeimg.com/140/140/any',
// },
// },
// {
// _id: 3,
// text: 'Hello bot',
// createdAt: new Date(),
// user: {
// _id: 1,
// name: 'React Native',
// avatar: 'https://placeimg.com/140/140/any',
// },
// },
// {
// _id: 4,
// text: 'Hello user',
// createdAt: new Date(),
// user: {
// _id: 2,
// name: 'React Native',
// avatar: 'https://placeimg.com/140/140/any',
// },
// },
// ])
}, [])
const onSend = useCallback(async(msg = []) => {
console.log(msg[0].text);
setMessages(previousMessages => (GiftedChat.append(previousMessages, msg)));
try{
const res = await sendToRasa(msg[0].text);
let reply = [];
res.data.map((d)=>{
console.log(d.text);
const rp = {
text: d.text,
createdAt: new Date(),
user: {
_id: 1,
name: 'React Native',
avatar: 'https://placeimg.com/140/140/any',
},
}
reply.push(rp)
}
)
setMessages(prev=> prev.concat(reply));
}
catch(err){
console.log(err)
}
}, [])
return (
<View style={{flex:1}}>
<ChatHeader/>
<GiftedChat
messages={messages.reverse()}
onSend={msg => onSend(msg)}
user={{
_id: "132reweewa52332525252twe",
}}
/>
</View>
)
}
//import liraries
import { useNavigation } from '@react-navigation/core';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { View, Text, StyleSheet, Button } from 'react-native';
// create a component
export const Home = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<Text style={{fontSize:20}}>Home</Text>
<Button title="Chatbot" onPress={()=> navigation.navigate('Chatbot')}/>
</View>
);
};
......
......@@ -3,22 +3,24 @@ import { Image, View, StyleSheet, TouchableOpacity, Text, Button } from 'react-n
import Onboarding from 'react-native-onboarding-swiper';
import { useNavigation } from '@react-navigation/core';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { COLOR } from '../themes';
const Square = ({ isLight, selected }) => {
let backgroundColor;
if (isLight) {
backgroundColor = selected ? '#2196F3' : 'rgba(0, 0, 0, 0.3)';
backgroundColor = selected ? COLOR.primary : 'rgba(0, 0, 0, 0.3)';
} else {
backgroundColor = selected ? '#2196F3' : 'rgba(255, 255, 255, 0.5)';
backgroundColor = selected ? COLOR.primary : 'rgba(255, 255, 255, 0.5)';
}
return (
<View
style={{
width: 6,
width: 30,
height: 6,
borderRadius:6,
marginHorizontal: 3,
padding:0,
marginHorizontal:0,
Radius:6,
backgroundColor,
}}
/>
......@@ -28,13 +30,13 @@ const Square = ({ isLight, selected }) => {
const Done = ({ isLight, ...props }) => {
const navigation = useNavigation();
return ( <TouchableOpacity {...props} onPress={async ()=>{
await AsyncStorage.setItem('hasOnboarded',true
);
// await AsyncStorage.setItem('hasOnboarded',true
// );
navigation.navigate('Home')
}
}>
<View style={{
backgroundColor: '#2196F3',
backgroundColor: COLOR.primary,
alignItems: 'center',
justifyContent: 'center',
paddingVertical:"3%",
......@@ -43,7 +45,7 @@ const Done = ({ isLight, ...props }) => {
borderRadius: 20
}}
>
<Text style={{ color: 'white',fontSize:16 }}>Get Start</Text>
<Text style={{ color: COLOR.white,fontSize:16 }}>Get Start</Text>
</View>
</TouchableOpacity>
);
......@@ -58,7 +60,7 @@ const Skip = ({ ...props}) =>{
navigation.navigate('Home')
}}>
<View style={{
backgroundColor: '#ffff',
backgroundColor: COLOR.white,
alignItems: 'center',
justifyContent: 'center',
paddingVertical:"3%",
......@@ -67,7 +69,7 @@ const Skip = ({ ...props}) =>{
borderRadius: 20
}}
>
<Text style={{ color: '#2196F3',fontSize:16, fontWeight:"bold"}}>Skip</Text>
<Text style={{ color: COLOR.primary,fontSize:16, fontWeight:"bold"}}>Skip</Text>
</View>
</TouchableOpacity>
)};
......@@ -76,7 +78,7 @@ const Skip = ({ ...props}) =>{
const Next = ({ isLight, ...props }) => (
<TouchableOpacity {...props}>
<View style={{
backgroundColor: '#2196F3',
backgroundColor: COLOR.primary,
alignItems: 'center',
justifyContent: 'center',
paddingVertical:"3%",
......@@ -85,7 +87,7 @@ const Next = ({ isLight, ...props }) => (
borderRadius: 20
}}
>
<Text style={{ color: 'white',fontSize:16 }}>Next</Text>
<Text style={{ color: COLOR.white,fontSize:16 }}>Next</Text>
</View>
</TouchableOpacity>
);
......@@ -96,25 +98,25 @@ export const Onboard = () => (
NextButtonComponent={Next}
SkipButtonComponent={Skip}
DoneButtonComponent={Done}
bottomBarColor={"#fff"}
bottomBarColor={COLOR.white}
subTitleStyles={{fontSize:14,marginTop:-60,paddingHorizontal:10}}
titleStyles={{fontWeight:"bold", fontSize:24, marginTop:-120}} // set default color for the title
pages={[
{
backgroundColor: '#fff',
backgroundColor: COLOR.backgroundOnBoard,
image: <Image style={styles.image} source={require('../assets/images/onboard1.jpg')} />,
title: "Buy & Selling",
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
},
{
backgroundColor: '#fff',
backgroundColor: COLOR.backgroundOnBoard,
image: <Image style={styles.image} source={require('../assets/images/onboard2.jpg')} />,
title: 'From Anywhere ',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
},
{
backgroundColor: '#fff',
backgroundColor: COLOR.backgroundOnBoard,
image: <Image style={[styles.image]} source={require('../assets/images/onboard3.jpg')} />,
title: 'Real State',
subtitle: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
......@@ -130,6 +132,6 @@ const styles = StyleSheet.create({
margin:0
},
button:{
backgroundColor:"#ffff",
backgroundColor:COLOR.white,
}
})
\ No newline at end of file
export const COLOR = {
primary: '#14db98',
onPrimary: '#fff',
surface: '#fff',
onSurface: '#000',
backgroundOnBoard: 'white',
white:"white"
};
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment