chat-bot-code

package.json

@@ -27,6 +27,7 @@
     "react-native-circular-progress": "^1.4.0",
     "react-native-circular-progress-indicator": "^4.4.2",
     "react-native-gesture-handler": "^2.16.2",
+    "react-native-gifted-chat": "^2.4.0",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-progress-circle-gradient": "^1.2.1",
     "react-native-safe-area-context": "^4.10.1",
@@ -41,7 +42,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "react-native-image-picker": "^7.1.1",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@react-native/babel-preset": "0.73.21",
@@ -54,6 +54,7 @@
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
+    "react-native-image-picker": "^7.1.1",
     "react-test-renderer": "18.2.0",
     "typescript": "5.0.4"
   },

src/components/HeaderWithBackNav.js

+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

@@ -40,7 +40,7 @@ export default {
   SKIN_VIDEO4: 'Skin_Video4',
   SKIN_VIDEO5: 'Skin_Video5',
 
-  SKIN_INFO:'skin_info',
+  SKIN_INFO: 'skin_info',
 
   //GAMES
   GAME_HOME: 'Game_Home',
@@ -84,5 +84,9 @@ export default {
   Game02ProgressLevel05: 'Game02ProgressLevel05',
   Game02ProgressLevel06: 'Game02ProgressLevel06',
   MentalWellBeingTypes: 'MentalWellBeingTypes',
+
+  CHAT_HOME: 'chat_home',
+  CHAT_SCREEN: 'chat_screen',
+
 };
 

src/navigations/BottomTabNavigator.js

 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 Settings from '../screens/home/Settings';
 import WelcomeExercise from '../screens/home/exercise/WelcomeExercise';
 // import  { Home, Wallet, Settings, WelcomeExercise}  from '../screens';
 import ExerciseNavigator from './ExerciseNavigator'
 import SkinNavigator from './SkinNavigator';
-import {COLORS, ROUTES} from '../constants';
+import { COLORS, ROUTES } from '../constants';
 import Icon from 'react-native-vector-icons/Ionicons';
-import {StyleSheet} from 'react-native';
+import { StyleSheet } from 'react-native';
 import CustomTabBarButton from '../components/CustomTabBarButton';
 import CustomTabBar from '../components/CustomTabBar';
 import Logo from '../assets/icons/fitness1.svg';
 import Logo1 from '../assets/icons/fitness2.svg';
 import GameNavigator from './GameNavigator';
 import AuthNavigator from './AuthNavigator';
+import ChatBotNavigation from './ChatBotNavigator';
+
 const Tab = createBottomTabNavigator();
 
 function BottomTabNavigator() {
@@ -22,14 +24,14 @@ function BottomTabNavigator() {
     // <KeyboardAvoidingView>
     <Tab.Navigator
       tabBar={props => <CustomTabBar {...props} />}
-      screenOptions={({route}) => ({
+      screenOptions={({ route }) => ({
         tabBarHideOnKeyboard: true,
         headerShown: false,
         tabBarStyle: styles.tabBarStyle,
         tabBarInactiveTintColor: COLORS.dark,
         tabBarActiveTintColor: COLORS.primary,
         tabBarShowLabel: false,
-        tabBarIcon: ({color, size, focused}) => {
+        tabBarIcon: ({ color, size, focused }) => {
           if (route.name === ROUTES.HOME_TAB) {
             return focused ? (
               <Icon name="home-sharp" size={22} color={color} />
@@ -50,15 +52,15 @@ function BottomTabNavigator() {
             );
           } else if (route.name === ROUTES.GAME_HOME) {
             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 ? (
-              <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} />
             );
           }
         },
@@ -99,8 +101,8 @@ function BottomTabNavigator() {
           headerBackTitleVisible: false,
           tabBarButton: props => <CustomTabBarButton {...props} />,
         }}
-        name={ROUTES.LOGIN}
-        component={AuthNavigator}
+        name={ROUTES.CHAT_HOME}
+        component={ChatBotNavigation}
       />
     </Tab.Navigator>
     // </KeyboardAvoidingView>

src/navigations/ChatBotNavigator.js

+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

-chat
\ No newline at end of file

src/screens/home/chat/ChatScreen.js

+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

+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

+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

+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