Update templates/index.html

templates/index.html

@@ -430,121 +430,157 @@
             }
             displayCart();
         }
-
         function handleResponse(userInput) {
-    const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
-    let botResponse = '';
-    let options = [];
-    
-    // Check for previous states and handle accordingly
-    if (conversation.length === 2) { // After name input
-        currentStep = 'food_type';
-        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' }
-        ];
-    } else if (lastMessage.includes('non-vegetarian')) {
-        console.log('User selected non-vegetarian option.');
-        currentStep = 'select_ingredients';
-        botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
-        fetchIngredients('non-vegetarian');
-        return;
-    } else if (lastMessage.includes('vegetarian')) {
-        console.log('User selected vegetarian option.');
-        currentStep = 'select_ingredients';
-        botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
-        fetchIngredients('vegetarian');
-        return;
-    } else if (lastMessage.includes('chicken') || lastMessage.includes('beef') || lastMessage.includes('lamb')) {
-        currentStep = 'select_ingredients';
-        botResponse = `Great! Here are some ${lastMessage} ingredients available:`;
-        fetchIngredients(lastMessage.toLowerCase());
-        return;
-    } else if (lastMessage.includes('yes') && selectedMenuItem) {
-        botResponse = 'Here are some ingredients to customize your dish:';
-        handleYesResponse();
-        return;
-    } else if (lastMessage.includes('no') && selectedMenuItem) {
-        // Submit the dish without customization
-        submitCustomizationIngredients();
-        return;
-    } else if (lastMessage.includes('yes') && currentStep === 'post_cart') {
-        // After user says 'yes', ask again for food preference (veg or non-veg)
-        botResponse = `Let's get started again! What type of food would you prefer this time?`;
-        options = [
-            { text: 'Vegetarian', class: 'green' },
-            { text: 'Non-Vegetarian', class: 'red' }
-        ];
-        currentStep = 'food_type';
-        addMessage('bot', botResponse);
-        displayOptions(options);
-        return;
-    } else if (lastMessage.includes('no') && currentStep === 'post_cart') {
-        addMessage('bot', 'Awesome! 🧾 Here’s your final cart:');
-        displayCart();  // Optional: show final cart again
-        addMessage('bot', 'Thank you for your order! 👨‍🍳🍲');
-        currentStep = 'end'; // Step after cart
-        return;
-    } else if (currentStep === 'customization') {
-        currentStep = 'menu_display'; // Reverting to menu display after customization
-        console.log('Step changed to menu_display.');
-        fetchMenuItems({ ingredient_names: ingredientNames });
-        return;
-    }
-
-    addMessage('bot', botResponse);
-    if (options.length > 0) {
-        displayOptions(options);
-    }
-    displayCart();
-}
-
-       function resetToPreviousStep() {
-    console.log('Resetting to previous step. Current step:', currentStep);
-    
-    // Clear selected ingredients and selected menu item, but not the cart
-    selectedIngredients = [];
-    selectedMenuItem = null;
-    cart = [];
-    
-    // Based on the currentStep, go back to the previous step
-    if (currentStep === 'food_type') {
-        currentStep = 'greeting';
-        conversation.push({ role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" });
-        console.log('Step changed to greeting. Conversation updated.');
-    } else if (currentStep === 'select_ingredients') {
-        currentStep = 'food_type';
-        conversation.push({ role: 'bot', message: 'What type of food would you prefer?' });
-        console.log('Step changed to food_type. Conversation updated.');
-    } else if (currentStep === 'customization') {
-        currentStep = 'menu_display';
-        console.log('Step changed to menu_display.');
-        // If needed, fetch the menu items again
-        //fetchMenuItems({ ingredient_names: ingredientNames });
-    } else if (currentStep === 'post_cart') {
-        currentStep = 'food_type';
-        conversation.push({ role: 'bot', message: 'What type of food would you prefer?' });
-        console.log('Step changed to food_type after post_cart. Conversation updated.');
-    } else {
-        console.error('Unexpected currentStep value:', currentStep);
-    }
-
-    // After going back to 'select_ingredients', trigger the fetchIngredients again
-    if (currentStep === 'select_ingredients') {
-        const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
-        if (lastMessage.includes('vegetarian')) {
-            console.log('Fetching vegetarian ingredients again after back.');
-            fetchIngredients('vegetarian');
-        } else if (lastMessage.includes('non-vegetarian')) {
-            console.log('Fetching non-vegetarian ingredients again after back.');
-            fetchIngredients('non-vegetarian');
+            const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
+            let botResponse = '';
+            let options = [];
+        
+            // Reset the ingredients list before displaying the new ingredients
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) {
+                console.error('Chat messages container not found!');
+                return;
+            }
+        
+            // Clear any previous ingredient lists
+            let ingredientList = document.querySelector('.ingredients-list');
+            if (ingredientList) {
+                ingredientList.innerHTML = '';
+            }
+        
+            // Handle food type and display ingredients accordingly
+            if (conversation.length === 2) { // After name input
+                currentStep = 'food_type';
+                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' }
+                ];
+            } else if (lastMessage.includes('non-vegetarian')) {
+                currentStep = 'select_ingredients';
+                botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
+                fetchIngredients('non-vegetarian');
+                return;
+            } else if (lastMessage.includes('vegetarian')) {
+                currentStep = 'select_ingredients';
+                botResponse = 'Great choice! 🍽️ Please select a vegetarian option:';
+                fetchIngredients('vegetarian');
+                return;
+            } 
+        
+            // Continue with other conditions and send response
+            addMessage('bot', botResponse);
+            if (options.length > 0) {
+                displayOptions(options);
+            }
+            displayCart();
+        }
+        
+        function fetchIngredients(foodPreference) {
+            console.log('Fetching ingredients for preference:', foodPreference);  // Log the request to ensure it's being called
+            fetch('/get_ingredients', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ dietary_preference: foodPreference })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
+                } else {
+                    const ingredients = data.ingredients || [];
+                    addMessage('bot', 'Please select ingredients:');
+                    displayIngredientsList(ingredients);
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching ingredients:', error);  // Log any errors in the fetch call
+                addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
+            });
+        }
+        
+        function displayIngredientsList(ingredients) {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) {
+                console.error('Chat messages container not found for ingredients!');
+                return;
+            }
+        
+            let ingredientsList = document.createElement('div');
+            ingredientsList.className = 'ingredients-list';
+            chatMessages.appendChild(ingredientsList);
+        
+            ingredients.forEach(ingredient => {
+                const item = document.createElement('div');
+                item.className = 'ingredient-item';
+                const img = document.createElement('img');
+                img.src = ingredient.image_url || 'https://via.placeholder.com/120';
+                img.alt = ingredient.name;
+                const name = document.createElement('div');
+                name.textContent = ingredient.name;
+                const button = document.createElement('button');
+                button.textContent = 'Add';
+                button.onclick = () => {
+                    if (!selectedIngredients.some(item => item.name === ingredient.name)) {
+                        selectedIngredients.push(ingredient);
+                        displaySelectedIngredients();
+                    }
+                };
+                item.appendChild(img);
+                item.appendChild(name);
+                item.appendChild(button);
+                ingredientsList.appendChild(item);
+            });
+        
+            displaySelectedIngredients();
         }
-    }
 
-    // Ensure the bot message is updated according to the previous step
-    setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
-}
+
+        function resetToPreviousStep() {
+            console.log('Resetting to previous step. Current step:', currentStep);
+            
+            // Clear selected ingredients and selected menu item, but not the cart
+            selectedIngredients = [];
+            selectedMenuItem = null;
+            cart = [];
+            
+            // Based on the currentStep, go back to the previous step
+            if (currentStep === 'food_type') {
+                currentStep = 'greeting';
+                conversation.push({ role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" });
+                console.log('Step changed to greeting. Conversation updated.');
+            } else if (currentStep === 'select_ingredients') {
+                currentStep = 'food_type';
+                conversation.push({ role: 'bot', message: 'What type of food would you prefer?' });
+                console.log('Step changed to food_type. Conversation updated.');
+            } else if (currentStep === 'customization') {
+                currentStep = 'menu_display';
+                console.log('Step changed to menu_display.');
+                // If needed, fetch the menu items again
+                //fetchMenuItems({ ingredient_names: ingredientNames });
+            } else if (currentStep === 'post_cart') {
+                currentStep = 'food_type';
+                conversation.push({ role: 'bot', message: 'What type of food would you prefer?' });
+                console.log('Step changed to food_type after post_cart. Conversation updated.');
+            } else {
+                console.error('Unexpected currentStep value:', currentStep);
+            }
+        
+            // After going back to 'select_ingredients', trigger the fetchIngredients again
+            if (currentStep === 'select_ingredients') {
+                const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
+                if (lastMessage.includes('vegetarian')) {
+                    console.log('Fetching vegetarian ingredients again after back.');
+                    fetchIngredients('vegetarian');
+                } else if (lastMessage.includes('non-vegetarian')) {
+                    console.log('Fetching non-vegetarian ingredients again after back.');
+                    fetchIngredients('non-vegetarian');
+                }
+            }
+        
+            // Ensure the bot message is updated according to the previous step
+            setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
+        }
 
 
         function handleYesResponse() {
@@ -783,47 +819,7 @@
                 });
         }
 
-        function displayIngredientsList(ingredients) {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for ingredients!');
-                return;
-            }
-        
-            // Clear previous ingredients list if it exists
-            let ingredientsList = document.querySelector('.ingredients-list');
-            if (!ingredientsList) {
-                ingredientsList = document.createElement('div');
-                ingredientsList.className = 'ingredients-list';
-                chatMessages.appendChild(ingredientsList);
-            } else {
-                // Clear existing items
-                ingredientsList.innerHTML = '';
-            }
-        
-            ingredients.forEach(ingredient => {
-                const item = document.createElement('div');
-                item.className = 'ingredient-item';
-                const img = document.createElement('img');
-                img.src = ingredient.image_url || 'https://via.placeholder.com/120';
-                img.alt = ingredient.name;
-                const name = document.createElement('div');
-                name.textContent = ingredient.name;
-                const button = document.createElement('button');
-                button.textContent = 'Add';
-                button.onclick = () => {
-                    if (!selectedIngredients.some(item => item.name === ingredient.name)) {
-                        selectedIngredients.push(ingredient);
-                        displaySelectedIngredients();
-                    }
-                };
-                item.appendChild(img);
-                item.appendChild(name);
-                item.appendChild(button);
-                ingredientsList.appendChild(item);
-            });
-        }
-
+       
         
         function displayMenuItems(menuItems) {
             const chatMessages = document.getElementById('chatMessages');