Update static/script.js

static/script.js

@@ -42,7 +42,7 @@ function handleResponse(userInput) {
     let options = [];
 
     if (conversation.length === 2) { // After name input
-        botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
+        botResponse = Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?;
         options = [
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' }
@@ -63,8 +63,8 @@ function handleResponse(userInput) {
         return;
     } else if (lastMessage.includes('chicken') || lastMessage.includes('beef') || lastMessage.includes('lamb')) {
         conversation.push({ role: 'user', message: lastMessage });
-        console.log(`Non-veg option selected: ${lastMessage}`);
-        botResponse = `Great! Here are some ${lastMessage} ingredients available:`;
+        console.log(Non-veg option selected: ${lastMessage});
+        botResponse = Great! Here are some ${lastMessage} ingredients available:;
         fetchIngredients(lastMessage.toLowerCase());
         return;
     } else if (lastMessage.includes('yes') && selectedMenuItem) {
@@ -87,96 +87,30 @@ function handleResponse(userInput) {
     }
 }
 
-let selectedIngredient = '';  // Store the selected ingredient
-
-// Function to handle ingredient selection (example)
-function selectIngredient(ingredient) {
-    selectedIngredient = ingredient;  // Store the selected ingredient
-    console.log(`Selected ingredient: ${selectedIngredient}`);
-    // Fetch menu items related to the selected ingredient
-    fetchMenuItems(selectedIngredient);
-}
-
-function submitIngredients() {
-    fetch('/submit_ingredients', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ ingredients: selectedIngredients })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            addMessage('bot', 'Great choice! Now, let\'s see some menu items you can select.');
-
-            // Fetch the menu items dynamically based on the selected ingredient
-            fetchMenuItems(selectedIngredient);  // Use dynamically passed selectedIngredient
-
-        } else {
-            addMessage('bot', 'There was an issue submitting your ingredients. Please try again.');
-        }
-    })
-    .catch(error => {
-        addMessage('bot', `Error: ${error.message}`);
-    });
-}
-
-function fetchMenuItems(ingredient) {
-    fetch('/get_menu_items', {
+function fetchIngredients(foodPreference) {
+    fetch('/get_ingredients', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ ingredient: ingredient })
+        body: JSON.stringify({ dietary_preference: foodPreference })
     })
     .then(response => response.json())
     .then(data => {
         if (data.error) {
-            addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
+            addMessage('bot', Sorry, there was an error fetching ingredients: ${data.error});
         } else {
-            const menuItems = data.menu_items || [];
-            if (menuItems.length > 0) {
-                let menuItemNames = menuItems.map(item => item.name).join(", ");
-                addMessage('bot', `Here are some items with ${ingredient}: ${menuItemNames}. Please select one:`);
-
-                // Create buttons for each menu item to select
-                const options = menuItems.map(item => ({
-                    text: item.name,
-                    class: 'blue',
-                }));
-                displayOptions(options);
-            } else {
-                addMessage('bot', `Sorry, no items found with ${ingredient}.`);
-            }
+            const ingredients = data.ingredients || [];
+            addMessage('bot', 'Please select ingredients:');
+            displayIngredientsList(ingredients);
+            displaySelectedIngredients();
         }
     })
     .catch(error => {
-        addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
+        addMessage('bot', Error: Unable to connect to the ingredient database. ${error.message});
     });
 }
 
-function displayOptions(options) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found for options!');
-        return;
-    }
-    
-    options.forEach(opt => {
-        const button = document.createElement('button');
-        button.textContent = opt.text;
-        button.className = `option-button ${opt.class}`;
-        button.onclick = () => {
-            addMessage('user', opt.text);
-            conversation.push({ role: 'user', message: opt.text });
-            chatMessages.innerHTML = '';
-            conversation.forEach(msg => addMessage(msg.role, msg.message));
-            setTimeout(() => handleResponse(opt.text), 500);
-        };
-        chatMessages.appendChild(button);
-    });
-}
 
 
 function displayIngredientsList(ingredients) {
@@ -252,7 +186,7 @@ function displayMenuItems(menuItems) {
         button.textContent = 'Add to Cart';
         button.onclick = () => {
             selectedMenuItem = item;
-            addMessage('bot', `World-class selection! Would you like to customize your dish further?`);
+            addMessage('bot', World-class selection! Would you like to customize your dish further?);
             const options = [
                 { text: 'Yes', class: 'green' },
                 { text: 'No', class: 'red' }
@@ -311,8 +245,11 @@ function submitIngredients() {
     .then(response => response.json())
     .then(data => {
         if (data.success) {
-            addMessage('bot', 'Great choice! Would you like to add any special instructions for your dish?');
-            displayCustomizationInput();
+            // Extract the ingredient names from the selectedIngredients array
+            const ingredientNames = selectedIngredients.map(ingredient => ingredient.name.toLowerCase()).join(' ');
+
+            // Fetch menu items based on ingredient names
+            fetchMenuItems(ingredientNames);
         } else {
             addMessage('bot', 'There was an issue submitting your ingredients. Please try again.');
         }
@@ -322,6 +259,30 @@ function submitIngredients() {
     });
 }
 
+function fetchMenuItems(ingredientNames) {
+    fetch('/get_menu_items', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ ingredient_names: ingredientNames })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
+        } else {
+            const menuItems = data.menu_items || [];
+            addMessage('bot', 'Here are some dishes based on your selected ingredients:');
+            displayMenuItems(menuItems);
+        }
+    })
+    .catch(error => {
+        addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
+    });
+}
+
+
 function displayCustomizationInput() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
@@ -373,7 +334,7 @@ function displayOptions(options) {
     options.forEach(opt => {
         const button = document.createElement('button');
         button.textContent = opt.text;
-        button.className = `option-button ${opt.class}`;
+        button.className = option-button ${opt.class};
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });