Merge branch 'suggestions_chatbot' into 'master'

chatbot sugesstions

See merge request !17

App.js

@@ -21,6 +21,7 @@ import BmiCalculator from "./screens/BmiCalculator";
 import BmiRecords from "./screens/BmiRecords";
 import BloodReportCapture from "./screens/BloodReportCapture";
 import Plan from "./screens/Plan";
+import SuggestionComponent from "./screens/SuggestionComponent";
 
 const Stack = createStackNavigator()
 const Tab = createBottomTabNavigator();
@@ -52,7 +53,7 @@ export default function App() {
 
        <Stack.Screen name="Signup" component={Signup} />
        <Stack.Screen name="Signin" component={Signin} />
-
+       <Stack.Screen name="SuggestionComponent" component={SuggestionComponent} />
       </Stack.Navigator>
 
       </NavigationContainer>

screens/ChatbotScreen.js

 import React, { useState, useRef, useEffect } from 'react';
-import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet, Image } from 'react-native';
+import { View, Text, TextInput, TouchableOpacity, ScrollView, FlatList, StyleSheet, Image } from 'react-native';
 import ChatbotAPI from '../Chatbot/python/ChatbotAPI';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
@@ -10,6 +10,25 @@ const ChatbotScreen = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState([]);
   const flatListRef = useRef(null);
+  const [suggestions, setSuggestions] = useState([]);
+  const [dataset, setDataset] = useState({ intents: [] });
+  const [suggestionContainerHeight, setSuggestionContainerHeight] = useState(40); // Default small height
+  const maxSuggestionContainerHeight = 200; // Maximum height when expanded
+
+
+  useEffect(() => {
+    // Read the local JSON file
+    const readLocalJsonFile = () => {
+      try {
+        const data = require('../Chatbot/python/q_and_a.json'); // Replace with your file name
+        setDataset(data); // Set your dataset
+      } catch (error) {
+        console.error('Error reading local JSON file:', error);
+      }
+    };
+
+    readLocalJsonFile();
+  }, []); // Make sure this runs once when the component is mounted
 
   const handleEditClick = (message) => {
     setEditingMessage(message);
@@ -63,6 +82,11 @@ const ChatbotScreen = () => {
     setEditingMessage(null);
   };
 
+  const onSuggestionPress = (question) => {
+    setInputText(question);
+    setSuggestions([]); // Hide suggestions when a suggestion is selected
+  };
+
   const filterMessages = (query) => {
     if (query.trim() === '') {
       setSearchResults([]);
@@ -74,6 +98,28 @@ const ChatbotScreen = () => {
     }
   };
 
+  const filterSuggestions = (input) => {
+    if (input) {
+      const filteredQuestions = [];
+
+      for (const intent of dataset.intents) {
+        for (const pattern of intent.patterns) {
+          if (pattern.toLowerCase().includes(input.toLowerCase())) {
+            filteredQuestions.push(pattern);
+          }
+        }
+      }
+      setSuggestions(filteredQuestions);
+
+      // Set the height of the suggestion container based on the number of suggestions
+      const newHeight = Math.min(filteredQuestions.length * 40, maxSuggestionContainerHeight);
+      setSuggestionContainerHeight(newHeight);
+    } else {
+      setSuggestions([]);
+      setSuggestionContainerHeight(40); // Reset to the default small height
+    }
+  };
+
 
   const renderItem = ({ item, index }) => (
     <View style={styles.messageContainer}>
@@ -149,17 +195,68 @@ const ChatbotScreen = () => {
         keyExtractor={(item, index) => `${item.text}-${index}`}
         inverted
       />
+
+      {/* <Autocomplete
+        data={suggestions}
+        defaultValue={inputText}
+        onChangeText={(text) => {
+          setInputText(text);
+          filterSuggestions(text);
+        }}
+        renderItem={({ item }) => (
+          <TouchableOpacity onPress={() => onSuggestionPress(item)}>
+            <Text style={styles.suggestionItem}>{item}</Text>
+          </TouchableOpacity>
+        )}
+        inputContainerStyle={styles.inputContainer}
+      /> */}
+      {/* <View style={styles.inputContainer}>
+  <TextInput
+    style={styles.input}
+    value={inputText}
+    onChangeText={(text) => {
+      setInputText(text);
+      filterSuggestions(text);
+    }}
+    placeholder="Ask from Me..."
+  />
+  <TouchableOpacity style={styles.sendButton} onPress={handleUserInput}>
+    <Icon name="send" size={24} color="white" />
+  </TouchableOpacity>
+</View> */}
+
+
+
       <View style={styles.inputContainer}>
         <TextInput
           style={styles.input}
           value={inputText}
-          onChangeText={setInputText}
+          onChangeText={(text) => {
+            setInputText(text);
+            filterSuggestions(text); // Filter and update suggestions as the user types
+          }}
           placeholder="Ask from Me..."
         />
         <TouchableOpacity style={styles.sendButton} onPress={handleUserInput}>
           <Icon name="send" size={24} color="white" />
         </TouchableOpacity>
+
+
       </View>
+
+      <ScrollView style={{ ...styles.suggestionContainer, height: suggestionContainerHeight }}>
+        {suggestions.map((suggestion, index) => (
+          <TouchableOpacity
+            key={index}
+            style={styles.suggestionItem}
+            onPress={() => onSuggestionPress(suggestion)}
+          >
+            <Text>{suggestion}</Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+
+
     </View>
   );
 };
@@ -283,6 +380,18 @@ const styles = StyleSheet.create({
   searchButton: {
     padding: 5, // Adjust padding to your preference
   },
+  suggestionContainer: {
+    maxHeight: 80, // Adjust the height as needed
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: 'gray',
+    borderRadius: 20,
+  },
+  suggestionItem: {
+    padding: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: 'gray',
+  },
 });
 
 export default ChatbotScreen;

screens/SuggestionComponent.js

+import React from 'react';
+import { View, Text, TouchableOpacity, FlatList } from 'react-native';
+
+const SuggestionComponent = ({ suggestions, onSuggestionPress }) => {
+  return (
+    <View>
+      <FlatList
+        data={suggestions}
+        keyExtractor={(item) => item}
+        renderItem={({ item }) => (
+          <TouchableOpacity onPress={() => onSuggestionPress(item)}>
+            <Text>{item}</Text>
+          </TouchableOpacity>
+        )}
+      />
+    </View>
+  );
+};
+
+export default SuggestionComponent;