Skip to content

E
EmidWife-New
Commit f52b622b authored by devinmunasinghe's avatar devinmunasinghe
Browse files
Options

chat-bot-code

parent cc533bed
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 639 additions and 99 deletions
package-lock.json
View file @ f52b622b
This diff is collapsed.
src/components/HeaderWithBackNav.js 0 → 100644
View file @ f52b622b
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import { useNavigation, NavigationProp } from '@react-navigation/native';
const HeaderWithBackArrow = ({ title, screenName }) => {
const navigation = useNavigation();
return (
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.navigate(screenName)} style={styles.closeButton}>
<Icon name="pulse-sharp" size={22} color={black} />
</TouchableOpacity>
<Text style={styles.headerTitle}>{title}</Text>
</View>
);
};
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center', // Keeps the title centered
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#c4c4c4',
position: 'relative', // Allows absolute positioning for children
},
headerTitle: {
fontSize: 16,
color: 'black',
},
closeButton: {
position: 'absolute', // Positions the arrow independently of the flex layout
left: 0, // Aligns the arrow to the left
padding: 16, // Optional: increases the touchable area
},
});
export default HeaderWithBackArrow;
\ No newline at end of file
src/constants/routes.js
View file @ f52b622b
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
EXERCISE_NEW_VIEW: 'Exercise_NEW_View', EXERCISE_NEW_VIEW: 'Exercise_NEW_View',
EXERCISE_NEW_ACTION_VIEW: 'Exercise_NEW_ACTION_View', EXERCISE_NEW_ACTION_VIEW: 'Exercise_NEW_ACTION_View',
EXERCISE_NEW_PROGRESS: 'Exercise_NEW_PROGRESS', EXERCISE_NEW_PROGRESS: 'Exercise_NEW_PROGRESS',
//skin //skin
SKIN_WELCOME: 'Skin_Welcome', SKIN_WELCOME: 'Skin_Welcome',
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
SKIN_VIDEO4: 'Skin_Video4', SKIN_VIDEO4: 'Skin_Video4',
SKIN_VIDEO5: 'Skin_Video5', SKIN_VIDEO5: 'Skin_Video5',
SKIN_INFO:'skin_info', SKIN_INFO: 'skin_info',
//GAMES //GAMES
GAME_HOME: 'Game_Home', GAME_HOME: 'Game_Home',
...@@ -84,5 +84,9 @@ export default { ...@@ -84,5 +84,9 @@ export default {
Game02ProgressLevel05: 'Game02ProgressLevel05', Game02ProgressLevel05: 'Game02ProgressLevel05',
Game02ProgressLevel06: 'Game02ProgressLevel06', Game02ProgressLevel06: 'Game02ProgressLevel06',
MentalWellBeingTypes: 'MentalWellBeingTypes', MentalWellBeingTypes: 'MentalWellBeingTypes',
CHAT_HOME: 'chat_home',
CHAT_SCREEN: 'chat_screen',
}; };
src/navigations/BottomTabNavigator.js
View file @ f52b622b
import React from 'react'; import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../screens/home/Home'; import Home from '../screens/home/Home';
import Settings from '../screens/home/Settings'; import Settings from '../screens/home/Settings';
import WelcomeExercise from '../screens/home/exercise/WelcomeExercise'; import WelcomeExercise from '../screens/home/exercise/WelcomeExercise';
// import { Home, Wallet, Settings, WelcomeExercise} from '../screens'; // import { Home, Wallet, Settings, WelcomeExercise} from '../screens';
import ExerciseNavigator from './ExerciseNavigator' import ExerciseNavigator from './ExerciseNavigator'
import SkinNavigator from './SkinNavigator'; import SkinNavigator from './SkinNavigator';
import {COLORS, ROUTES} from '../constants'; import { COLORS, ROUTES } from '../constants';
import Icon from 'react-native-vector-icons/Ionicons'; import Icon from 'react-native-vector-icons/Ionicons';
import {StyleSheet} from 'react-native'; import { StyleSheet } from 'react-native';
import CustomTabBarButton from '../components/CustomTabBarButton'; import CustomTabBarButton from '../components/CustomTabBarButton';
import CustomTabBar from '../components/CustomTabBar'; import CustomTabBar from '../components/CustomTabBar';
import Logo from '../assets/icons/fitness1.svg'; import Logo from '../assets/icons/fitness1.svg';
import Logo1 from '../assets/icons/fitness2.svg'; import Logo1 from '../assets/icons/fitness2.svg';
import GameNavigator from './GameNavigator'; import GameNavigator from './GameNavigator';
import AuthNavigator from './AuthNavigator'; import AuthNavigator from './AuthNavigator';
import ChatBotNavigation from './ChatBotNavigator';
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
function BottomTabNavigator() { function BottomTabNavigator() {
...@@ -22,14 +24,14 @@ function BottomTabNavigator() { ...@@ -22,14 +24,14 @@ function BottomTabNavigator() {
// <KeyboardAvoidingView> // <KeyboardAvoidingView>
<Tab.Navigator <Tab.Navigator
tabBar={props => <CustomTabBar {...props} />} tabBar={props => <CustomTabBar {...props} />}
screenOptions={({route}) => ({ screenOptions={({ route }) => ({
tabBarHideOnKeyboard: true, tabBarHideOnKeyboard: true,
headerShown: false, headerShown: false,
tabBarStyle: styles.tabBarStyle, tabBarStyle: styles.tabBarStyle,
tabBarInactiveTintColor: COLORS.dark, tabBarInactiveTintColor: COLORS.dark,
tabBarActiveTintColor: COLORS.primary, tabBarActiveTintColor: COLORS.primary,
tabBarShowLabel: false, tabBarShowLabel: false,
tabBarIcon: ({color, size, focused}) => { tabBarIcon: ({ color, size, focused }) => {
if (route.name === ROUTES.HOME_TAB) { if (route.name === ROUTES.HOME_TAB) {
return focused ? ( return focused ? (
<Icon name="home-sharp" size={22} color={color} /> <Icon name="home-sharp" size={22} color={color} />
...@@ -50,15 +52,15 @@ function BottomTabNavigator() { ...@@ -50,15 +52,15 @@ function BottomTabNavigator() {
); );
} else if (route.name === ROUTES.GAME_HOME) { } else if (route.name === ROUTES.GAME_HOME) {
return focused ? ( return focused ? (
<Icon name="game-controller-sharp" size={22} color={color}/> <Icon name="game-controller-sharp" size={22} color={color} />
) : ( ) : (
<Icon name="game-controller-outline" size={22} color={color}/> <Icon name="game-controller-outline" size={22} color={color} />
); );
} else if (route.name === ROUTES.LOGIN) { } else if (route.name === ROUTES.CHAT_HOME) {
return focused ? ( return focused ? (
<Icon name="person-circle-sharp" size={22} color={color} /> <Icon name="chatbubble-ellipses-sharp" size={22} color={color} />
) : ( ) : (
<Icon name="person-circle-outline" size={22} color={color} /> <Icon name="chatbubble-ellipses-outline" size={22} color={color} />
); );
} }
}, },
...@@ -75,7 +77,7 @@ function BottomTabNavigator() { ...@@ -75,7 +77,7 @@ function BottomTabNavigator() {
component={SkinNavigator} component={SkinNavigator}
options={{ options={{
tabBarButton: props => <CustomTabBarButton {...props} />, tabBarButton: props => <CustomTabBarButton {...props} />,
}} }}
/> />
<Tab.Screen <Tab.Screen
name={ROUTES.GAME_HOME} name={ROUTES.GAME_HOME}
...@@ -99,8 +101,8 @@ function BottomTabNavigator() { ...@@ -99,8 +101,8 @@ function BottomTabNavigator() {
headerBackTitleVisible: false, headerBackTitleVisible: false,
tabBarButton: props => <CustomTabBarButton {...props} />, tabBarButton: props => <CustomTabBarButton {...props} />,
}} }}
name={ROUTES.LOGIN} name={ROUTES.CHAT_HOME}
component={AuthNavigator} component={ChatBotNavigation}
/> />
</Tab.Navigator> </Tab.Navigator>
// </KeyboardAvoidingView> // </KeyboardAvoidingView>
......
src/navigations/ChatBotNavigator.js 0 → 100644
View file @ f52b622b
import { View, Text } from 'react-native'
import React from 'react'
import HomeScreen from '../screens/home/chat/ChatbotHome';
import { createStackNavigator } from '@react-navigation/stack';
import ChatScreen from '../screens/home/chat/ChatScreen';
import { COLORS, ROUTES } from "../constants";
const Stack = createStackNavigator();
export default function ChatBotNavigation() {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name={ROUTES.CHAT_HOME} component={HomeScreen} />
<Stack.Screen name={ROUTES.CHAT_SCREEN} component={ChatScreen} />
</Stack.Navigator>
)
}
\ No newline at end of file
src/screens/chat/chatbot deleted 100644 → 0
View file @ cc533bed
chat
\ No newline at end of file
src/screens/home/chat/ChatScreen.js 0 → 100644
View file @ f52b622b
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import React, { useState, useEffect, useCallback } from 'react';
import { GiftedChat, Bubble } from 'react-native-gifted-chat';
import { useRoute, useNavigation } from '@react-navigation/native';
import { ChatbotService } from '../../../services/chat/bardaiapi';
import HeaderWithBackArrow from '../../../components/HeaderWithBackNav';
import Icon from 'react-native-vector-icons/Ionicons';
export default function ChatScreen() {
const param = useRoute().params;
const navigation = useNavigation(); // Added this to use navigation
const [messages, setMessages] = useState([]);
const [selectedChatFace, setSelectedChatFace] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setSelectedChatFace(param.selectedChatFaceData);
setMessages([
{
_id: 1,
text: 'Hello I am ' + param.selectedChatFaceData?.name + ', how can I help you?',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: param.selectedChatFaceData?.image,
},
},
]);
}, []);
const onSend = useCallback((messages = []) => {
setMessages(previousMessages => GiftedChat.append(previousMessages, messages));
setLoading(true);
if (messages[0].text) {
chatResponseapi(messages[0].text);
}
}, []);
const chatResponseapi = async (msg) => {
const data = {
userId: 1223,
message: msg
};
let response = await ChatbotService(data);
if (response.reply.success) {
const ChatApiResponse = {
_id: Math.random() * (9999999 - 1),
text: response.reply.message,
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: param.selectedChatFaceData?.image,
},
};
setMessages(previousMessages => GiftedChat.append(previousMessages, ChatApiResponse));
setLoading(false);
} else {
setLoading(false);
const ChatApiResponse = {
_id: Math.random() * (9999999 - 1),
text: 'Sorry! Something went wrong. Try again.',
createdAt: new Date(),
system: true,
user: {
_id: 2,
name: 'React Native',
avatar: param.selectedChatFaceData?.image,
},
};
setMessages(previousMessages => GiftedChat.append(previousMessages, ChatApiResponse));
}
};
const renderBubble = (props) => {
return (
<Bubble
{...props}
wrapperStyle={{
right: {
backgroundColor: 'red',
},
left: {
backgroundColor: 'green',
},
}}
/>
);
};
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.closeButton}>
<Icon name="arrow-back" size={22} color="black" />
</TouchableOpacity>
<Image source={{ uri: selectedChatFace.image }} style={styles.avatar} />
<Text style={styles.headerTitle}>{selectedChatFace.name}</Text>
</View>
<GiftedChat
messages={messages}
onSend={messages => onSend(messages)}
isTyping={loading}
user={{
_id: 1,
}}
minInputToolbarHeight={60} // Adjust if needed
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginBottom: 60, // Ensure this matches the height of your bottom navigation bar
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#000',
position: 'relative',
},
headerTitle: {
fontSize: 16,
color: 'black',
marginLeft: 16,
fontWeight: '500'
},
closeButton: {
position: 'absolute',
left: 16,
padding: 16,
},
avatar: {
width: 30,
height: 30,
borderRadius: 15,
},
});
\ No newline at end of file
src/screens/home/chat/ChatbotHome.js 0 → 100644
View file @ f52b622b
import { View, Text, SafeAreaView, Image, FlatList, TouchableOpacity, Dimensions } from 'react-native'
import React, { useEffect, useState } from 'react'
import ChatFaceData from '../../../services/chat/ChatFaceData'
import { ROUTES } from '../../../constants'
const ChatFaceDataArray = [
{
id: 1,
name: 'Noyi',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685678135/chat_1_c7eda483e3.png',
primary: '#FFC107',
secondary: ''
},
{
id: 2,
name: 'Pogu',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_21_2e18bb4a61.png',
primary: '#E53057',
secondary: ''
},
{
id: 3,
name: 'Nista',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_22_409561b953.png',
primary: '#3B96D2',
secondary: ''
},
{
id: 4,
name: 'Estor',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_18_893d24cebc.png',
primary: '#37474F',
secondary: ''
},
{
id: 5,
name: 'Pega',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_23_211d7370cb.png',
primary: '#2473FE',
secondary: ''
},
]
export default function HomeScreen(props) {
const { navigation } = props;
const [chatFaceData, setChatFaceData] = useState(ChatFaceDataArray)
const [selectedChatFaceData, setSelecetedChatFaceData] = useState({
id: 1,
name: 'Noyi',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685678135/chat_1_c7eda483e3.png',
primary: '#FFC107',
secondary: ''
})
useEffect(() => {
console.log(">>>", ChatFaceData[0])
if (ChatFaceData) {
// setChatFaceData(ChatFaceData)
// setSelecetedChatFaceData(ChatFaceData[0])
}
}, [ChatFaceData[0]])
const onChatFacePress = (id) => {
setSelecetedChatFaceData(ChatFaceData[id - 1])
}
return (
<View style={{ alignItems: 'center', paddingTop: 90 }}>
{/* <Text style={{ color: selectedChatFaceData?.primary, fontSize: 30 }}>Hello</Text> */}
{/* <Text style={{ color: selectedChatFaceData?.primary, fontSize: 30, fontWeight: 'bold', textAlign: 'center' }} >Welcome to e-midwife Chatbot</Text> */}
<Text style={{ marginTop: 30, fontSize: 25 }} >Hi I am </Text>
<Text style={{ color: selectedChatFaceData?.primary, fontSize: 30, fontWeight: 'bold' }} >{selectedChatFaceData ? selectedChatFaceData?.name : 'nu'}</Text>
<Image source={{ uri: selectedChatFaceData ? selectedChatFaceData.image : 'https://i.ibb.co/CV9bpCQ/chatbot-3d-render-icon-illustration-png.png' }} style={{ width: 150, height: 150, marginTop: 10 }} />
<Text style={{ marginTop: 30, fontSize: 25 }} >How can i help you ?</Text>
<View style={{ marginTop: 20, backgroundColor: '#F5F5F5', alignItems: 'center', height: 110, padding: 10, borderRadius: 10 }}>
<FlatList
data={chatFaceData}
horizontal={true}
renderItem={({ item }) => selectedChatFaceData.id != item.id && (
<TouchableOpacity style={{ margin: 15 }} onPress={() => onChatFacePress(item.id)}>
<Image source={{ uri: item.image }} style={{ width: 40, height: 40 }} />
</TouchableOpacity>
)}
/>
<Text style={{ marginTop: 5, fontSize: 17, color: '#B0B0B0' }}>Choose Your Fav ChatBuddy</Text>
</View>
{console.log(ROUTES.CHAT_SCREEN)}
<TouchableOpacity style={[{ backgroundColor: selectedChatFaceData.primary }
, {
marginTop: 40, padding: 17, width: Dimensions.get('screen').width * 0.6,
borderRadius: 100, alignItems: 'center'
}]}
onPress={() => navigation.navigate(ROUTES.CHAT_SCREEN, { selectedChatFaceData: selectedChatFaceData })}
>
<Text style={{ fontSize: 16, color: '#fff' }}>Let's Chat</Text>
</TouchableOpacity>
</View>
)
}
\ No newline at end of file
src/services/chat/ChatFaceData.js 0 → 100644
View file @ f52b622b
export default chatFaceData = [
{
id: 1,
name: 'Noyi',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685678135/chat_1_c7eda483e3.png',
primary: '#FFC107',
secondary: ''
},
{
id: 2,
name: 'Pogu',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_21_2e18bb4a61.png',
primary: '#E53057',
secondary: ''
},
{
id: 3,
name: 'Nista',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_22_409561b953.png',
primary: '#3B96D2',
secondary: ''
},
{
id: 4,
name: 'Estor',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_18_893d24cebc.png',
primary: '#37474F',
secondary: ''
},
{
id: 5,
name: 'Pega',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_23_211d7370cb.png',
primary: '#2473FE',
secondary: ''
},
]
\ No newline at end of file
src/services/chat/bardaiapi.js 0 → 100644
View file @ f52b622b
import axios from "axios";
const apiURL = 'http://10.0.2.2:3000/chat'
export const ChatbotService = async (payload) => {
try {
console.log("playload", payload)
let response = await axios.post(`${apiURL}/send`, payload)
return response.data;
} catch (error) {
throw new Error('Failed to retrive msg');
}
}
\ No newline at end of file
yarn.lock
View file @ f52b622b
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