show suggestions to users inputs

Chatbot/python/ChatbotAPI.js

 import axios from 'axios';
 import { Alert } from 'react-native';
 
-const API_URL = 'http://192.168.4.234:5001'; // Replace with your backend API URL
+const API_URL = 'http://192.168.1.6:5001'; // Replace with your backend API URL
 
 const getAnswer = async (question) => {
   try {

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';
-import SuggestionComponent from './SuggestionComponent';
 
 const ChatbotScreen = () => {
   const [inputText, setInputText] = useState('');
   const [messages, setMessages] = useState([]);
   const [editingMessage, setEditingMessage] = useState(null);
-const [searchQuery, setSearchQuery] = useState('');
+  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);
@@ -42,62 +59,6 @@ const [searchQuery, setSearchQuery] = useState('');
     setMessages((prevMessages) => [botMessage, ...prevMessages]);
   };
 
-  const handleSuggestionPress = (suggestion) => {
-    setInputText(suggestion);
-    setSuggestions([]); // Clear suggestions
-  };
-  
-  const get_suggested_questions = async (text) => {
-    try {
-      // Fetch the JSON dataset (adjust the path accordingly)
-      const response = await fetch('../Chatbot/python/q_and_a.json');
-      
-      if (!response.ok) {
-        throw new Error('Failed to fetch suggestions');
-      }
-  
-      const data = await response.json();
-  
-      // Use the 'text' input to filter the suggestions based on your dataset
-      const filteredSuggestions = data.filter((suggestion) =>
-        suggestion.toLowerCase().includes(text.toLowerCase())
-      );
-  
-      return filteredSuggestions;
-    } catch (error) {
-      console.error('Error fetching suggestions:', error);
-      return [];
-    }
-  };
-  
-
-
-  // const handleUserInput = async () => {
-  //   if (inputText.trim() === '') return;
-  
-  //   const userMessage = {
-  //     text: inputText,
-  //     user: true,
-  //     timestamp: new Date().toISOString(),
-  //   };
-  
-  //   setMessages((prevMessages) => [userMessage, ...prevMessages]);
-  
-  //   // Add your logic to get suggestions based on user input
-  //   const newSuggestions = get_suggested_questions(inputText);
-  //   setSuggestions(newSuggestions);
-  
-  //   const response = await ChatbotAPI.getAnswer(inputText);
-  //   const botMessage = {
-  //     text: response,
-  //     user: false,
-  //     timestamp: new Date().toISOString(),
-  //   };
-  
-  //   setMessages((prevMessages) => [botMessage, ...prevMessages]);
-  //   setInputText('');
-  //   setEditingMessage(null);
-  // };
   const handleUserInput = async () => {
     if (inputText.trim() === '') return;
 
@@ -109,31 +70,24 @@ const [searchQuery, setSearchQuery] = useState('');
 
     setMessages((prevMessages) => [userMessage, ...prevMessages]);
 
-    // Get suggestions based on user input
-    const newSuggestions = get_suggested_questions(inputText);
-    console.log("Suggestions:", newSuggestions); // Log the suggestions
-    setSuggestions(newSuggestions);
-
-    try {
-      const response = await ChatbotAPI.getAnswer(inputText);
-      console.log("Response from ChatbotAPI:", response); // Log the chatbot response
-      const botMessage = {
-        text: response,
-        user: false,
-        timestamp: new Date().toISOString(),
-      };
-
-      setMessages((prevMessages) => [botMessage, ...prevMessages]);
-    } catch (error) {
-      console.error("Error fetching response:", error);
-      // Handle the error (e.g., display an error message)
-    }
+    const response = await ChatbotAPI.getAnswer(inputText);
+    const botMessage = {
+      text: response,
+      user: false,
+      timestamp: new Date().toISOString(),
+    };
 
+    setMessages((prevMessages) => [botMessage, ...prevMessages]);
     setInputText('');
     setEditingMessage(null);
   };
-  
-const filterMessages = (query) => {
+
+  const onSuggestionPress = (question) => {
+    setInputText(question);
+    setSuggestions([]); // Hide suggestions when a suggestion is selected
+  };
+
+  const filterMessages = (query) => {
     if (query.trim() === '') {
       setSearchResults([]);
     } else {
@@ -144,6 +98,28 @@ const filterMessages = (query) => {
     }
   };
 
+  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}>
@@ -171,7 +147,7 @@ const filterMessages = (query) => {
       </View>
     </View>
   );
-  
+
 
   useEffect(() => {
     flatListRef.current.scrollToOffset({ animated: true, offset: 0 });
@@ -180,7 +156,7 @@ const filterMessages = (query) => {
   return (
     <View style={styles.container}>
       <View style={styles.header}>
-      <Image
+        <Image
           source={require('../assets/baby.png')} // Provide the path to your logo image
           style={styles.logo}
         />
@@ -219,18 +195,68 @@ const filterMessages = (query) => {
         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>
-      <SuggestionComponent suggestions={suggestions} onSuggestionPress={handleSuggestionPress} />
+
+      <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>
   );
 };
@@ -335,7 +361,7 @@ const styles = StyleSheet.create({
     fontSize: 20, // Adjust the font size for your topic
     fontWeight: 'bold', // Adjust the font weight for your topic
   },
-searchIcon: {
+  searchIcon: {
     marginRight: 10, // Adjust the margin to position the search icon
   },
   searchContainer: {
@@ -354,6 +380,18 @@ searchIcon: {
   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;