Update static/script.js

static/script.js

@@ -1,71 +1,72 @@
-// Example restaurant data for menu suggestions
-const menu = {
-    vegan: ['Vegan Burger', 'Tofu Stir Fry', 'Veggie Pizza'],
-    vegetarian: ['Cheese Pizza', 'Pasta Alfredo', 'Caprese Salad'],
-    non_vegetarian: ['Chicken Curry', 'Grilled Salmon', 'Steak'],
-    spicy: ['Spicy Tacos', 'Chili Chicken', 'Spicy Wings'],
+const dishes = {
+    "rice": ["Biryani", "Fried Rice", "Pulao"],
+    "milk": ["Kheer", "Milkshake", "Payasam"],
+    "chicken": ["Chicken Curry", "Grilled Chicken", "Chicken Salad"],
+    "paneer": ["Paneer Butter Masala", "Paneer Tikka", "Palak Paneer"],
+    "potatoes": ["Aloo Gobi", "Aloo Tikki", "Mashed Potatoes"],
 };
 
-document.getElementById("chat-form").addEventListener("submit", function(e) {
-    e.preventDefault();
+function sendMessage() {
+    const userInput = document.getElementById('user-input').value.toLowerCase();
+    if (userInput.trim() === "") return;
+    
+    displayMessage(userInput, 'user');
 
-    const userInput = document.getElementById("user-input").value;
-    document.getElementById("user-input").value = '';  // Clear input box
-    addMessage(userInput, 'user-message');
+    const ingredients = userInput.split(' ').map(ingredient => ingredient.trim());
+    const suggestedDishes = getDishSuggestions(ingredients);
 
-    // Get bot response based on user input
-    getBotResponse(userInput);
-});
+    setTimeout(() => {
+        displayBotMessage(suggestedDishes);
+    }, 1000);
 
-function addMessage(message, className) {
-    const messageDiv = document.createElement('div');
-    messageDiv.classList.add('message', className);
-    messageDiv.innerText = message;
-    document.getElementById("chat-box").appendChild(messageDiv);
-    scrollToBottom();
+    document.getElementById('user-input').value = '';
 }
 
-function scrollToBottom() {
-    const chatBox = document.getElementById("chat-box");
-    chatBox.scrollTop = chatBox.scrollHeight;
+function displayMessage(message, sender) {
+    const messageElement = document.createElement('div');
+    messageElement.classList.add('message', sender === 'bot' ? 'bot-message' : 'user-message');
+    messageElement.textContent = message;
+    document.getElementById('chatbox-body').appendChild(messageElement);
+    document.getElementById('chatbox-body').scrollTop = document.getElementById('chatbox-body').scrollHeight;
 }
 
-function getBotResponse(userInput) {
-    const botResponse = getChatbotReply(userInput);
-    addMessage(botResponse, 'bot-response');
-    suggestMenu(userInput);
-}
-
-function getChatbotReply(userInput) {
-    // Simulating a basic conversation
-    if (userInput.toLowerCase().includes('hello') || userInput.toLowerCase().includes('hi')) {
-        return "Hello! How can I help you today?";
-    } else if (userInput.toLowerCase().includes('menu')) {
-        return "Sure! What type of food are you looking for? Vegan, Vegetarian, Non-Vegetarian, or Spicy?";
+function displayBotMessage(dishes) {
+    let botMessage = 'Here are some dishes I suggest based on the ingredients you provided:\n\n';
+    if (dishes.length === 0) {
+        botMessage += 'Sorry, I couldn\'t find any dishes for the given ingredients.';
     } else {
-        return "Sorry, I didn't quite catch that. Can you rephrase?";
+        dishes.forEach(dish => {
+            botMessage += `- ${dish}\n`;
+        });
     }
+
+    displayMessage(botMessage, 'bot');
+    displayFoodItems(dishes);
 }
 
-function suggestMenu(userInput) {
-    let userPreference = '';
+function getDishSuggestions(ingredients) {
+    let suggestedDishes = [];
+    ingredients.forEach(ingredient => {
+        if (dishes[ingredient]) {
+            suggestedDishes = [...suggestedDishes, ...dishes[ingredient]];
+        }
+    });
+    return [...new Set(suggestedDishes)]; // Remove duplicates
+}
 
-    if (userInput.toLowerCase().includes('vegan')) {
-        userPreference = 'vegan';
-    } else if (userInput.toLowerCase().includes('vegetarian')) {
-        userPreference = 'vegetarian';
-    } else if (userInput.toLowerCase().includes('non-vegetarian')) {
-        userPreference = 'non_vegetarian';
-    } else if (userInput.toLowerCase().includes('spicy')) {
-        userPreference = 'spicy';
-    }
+function displayFoodItems(dishes) {
+    const foodItemsContainer = document.getElementById('food-items');
+    foodItemsContainer.innerHTML = ''; // Clear previous items
+    foodItemsContainer.style.display = dishes.length > 0 ? 'block' : 'none';
 
-    const suggestedItems = menu[userPreference] || [];
+    dishes.forEach(dish => {
+        const dishElement = document.createElement('div');
+        dishElement.textContent = dish;
+        dishElement.onclick = () => showFoodDescription(dish);
+        foodItemsContainer.appendChild(dishElement);
+    });
+}
 
-    const menuDiv = document.getElementById('menu');
-    if (suggestedItems.length > 0) {
-        menuDiv.innerHTML = `<strong>Recommended Dishes:</strong><br>${suggestedItems.join(', ')}`;
-    } else {
-        menuDiv.innerHTML = "Sorry, I couldn't find any suggestions for that. Please specify your preference.";
-    }
+function showFoodDescription(dish) {
+    alert(`You selected: ${dish}\nHere is a brief description of ${dish}: ...`);
 }