Update templates/index.html

templates/index.html

@@ -158,7 +158,7 @@
             background-color: #218838;
         }
 
-        .selected-ingredients {
+        .selected-ingredients, .selected-customization-ingredients {
             background-color: #f1f8ff;
             padding: 15px;
             border: 1px solid #b3d7ff;
@@ -170,7 +170,7 @@
             gap: 10px;
         }
 
-        .selected-ingredients div {
+        .selected-ingredients div, .selected-customization-ingredients div {
             background-color: #d6e9ff;
             padding: 5px 10px;
             border-radius: 6px;
@@ -181,7 +181,7 @@
             margin: 10px 0;
         }
 
-        .customization-input textarea {
+        .customization-input textarea, .selected-customization-ingredients textarea {
             width: 100%;
             padding: 8px;
             border: 1px solid #b3d7ff;
@@ -191,7 +191,7 @@
             margin-bottom: 10px;
         }
 
-        .customization-input button, .submit-button {
+        .customization-input button, .submit-button, .submit-customization-button, .submit-cart-button {
             padding: 10px 20px;
             background-color: #0078d4;
             color: #ffffff;
@@ -202,7 +202,7 @@
             transition: background-color 0.2s;
         }
 
-        .customization-input button:hover, .submit-button:hover {
+        .customization-input button:hover, .submit-button:hover, .submit-customization-button:hover, .submit-cart-button:hover {
             background-color: #005ea2;
         }
 
@@ -337,7 +337,7 @@
                 padding: 8px 15px;
             }
 
-            .selected-ingredients, .cart-items {
+            .selected-ingredients, .selected-customization-ingredients, .cart-items {
                 padding: 10px;
                 gap: 8px;
             }
@@ -426,6 +426,7 @@
             } else {
                 console.warn('Empty message!');
             }
+            displayCart();
         }
 
         function handleResponse(userInput) {
@@ -458,8 +459,8 @@
                 fetchIngredients(lastMessage.toLowerCase());
                 return;
             } else if (lastMessage.includes('yes') && selectedMenuItem) {
-                botResponse = 'Awesome! Let’s customize your dish. Here are some ingredients you can add:';
-                fetchCustomizationIngredients('both');
+                botResponse = 'Here are some ingredients to customize your dish:';
+                handleYesResponse();
                 return;
             } else if (lastMessage.includes('no') && selectedMenuItem) {
                 addToCart(selectedMenuItem);
@@ -469,36 +470,60 @@
                     { text: 'No', class: 'red' }
                 ];
                 selectedMenuItem = null;
+                selectedIngredients = [];
             }
 
             addMessage('bot', botResponse);
             if (options.length > 0) {
                 displayOptions(options);
             }
+            displayCart();
         }
 
-        function fetchCustomizationIngredients(foodPreference) {
-            fetch('/get_ingredients', {
+        function handleYesResponse() {
+            if (!selectedMenuItem) {
+                addMessage('bot', 'No dish selected. Please choose a dish first.');
+                return;
+            }
+            const botResponse = `Here is your selected dish: ${selectedMenuItem.name}`;
+            addMessage('bot', botResponse);
+
+            // Display selected menu item
+            const chatMessages = document.getElementById('chatMessages');
+            const menuItemDiv = document.createElement('div');
+            menuItemDiv.className = 'menu-item';
+            const img = document.createElement('img');
+            img.src = selectedMenuItem.image_url || 'https://via.placeholder.com/120';
+            img.alt = selectedMenuItem.name;
+            const name = document.createElement('div');
+            name.textContent = selectedMenuItem.name;
+            menuItemDiv.appendChild(img);
+            menuItemDiv.appendChild(name);
+            chatMessages.appendChild(menuItemDiv);
+
+            // Fetch ingredients for customization
+            fetchIngredientsForCustomization('both');
+        }
+
+        function fetchIngredientsForCustomization(foodPreference) {
+            fetch('/get_ingredients', { // Reuse existing endpoint
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                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 customization ingredients: ${data.error}`);
-                } else {
-                    const ingredients = data.ingredients || [];
-                    addMessage('bot', 'Select ingredients to customize your dish:');
-                    displayCustomizationIngredients(ingredients);
-                    displaySelectedIngredientsForCustomization();
-                }
-            })
-            .catch(error => {
-                addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
-            });
+                .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 to customize:');
+                        displayCustomizationIngredients(ingredients);
+                    }
+                })
+                .catch(error => {
+                    addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
+                });
         }
 
         function displayCustomizationIngredients(ingredients) {
@@ -529,8 +554,8 @@
                 button.textContent = 'Add';
                 button.onclick = () => {
                     if (!selectedIngredients.some(item => item.name === ingredient.name)) {
-                        selectedIngredients.push(ingredient);
-                        displaySelectedIngredientsForCustomization();
+                        selectedIngredients.push({ name: ingredient.name, image_url: ingredient.image_url });
+                        displaySelectedCustomizationIngredients();
                     }
                 };
                 item.appendChild(img);
@@ -538,24 +563,34 @@
                 item.appendChild(button);
                 ingredientsList.appendChild(item);
             });
+
+            displaySelectedCustomizationIngredients();
         }
 
-        function displaySelectedIngredientsForCustomization() {
+        function displaySelectedCustomizationIngredients() {
             const chatMessages = document.getElementById('chatMessages');
             if (!chatMessages) {
-                console.error('Chat messages container not found for selected ingredients!');
+                console.error('Chat messages container not found for selected customization ingredients!');
                 return;
             }
 
-            let selectedArea = document.querySelector('.selected-ingredients');
+            let selectedArea = document.querySelector('.selected-customization-ingredients');
             if (!selectedArea) {
                 selectedArea = document.createElement('div');
-                selectedArea.className = 'selected-ingredients';
+                selectedArea.className = 'selected-customization-ingredients';
                 chatMessages.appendChild(selectedArea);
             } else {
                 selectedArea.innerHTML = '';
             }
 
+            const selectedIngredientsText = selectedIngredients.length > 0
+                ? `${selectedMenuItem.name} with ${selectedIngredients.map(ingredient => ingredient.name).join(', ')}`
+                : selectedMenuItem.name;
+
+            const ingredientsDiv = document.createElement('div');
+            ingredientsDiv.textContent = selectedIngredientsText;
+            selectedArea.appendChild(ingredientsDiv);
+
             selectedIngredients.forEach(ingredient => {
                 const div = document.createElement('div');
                 div.textContent = ingredient.name;
@@ -570,58 +605,106 @@
                 removeButton.style.cursor = 'pointer';
                 removeButton.onclick = () => {
                     selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
-                    displaySelectedIngredientsForCustomization();
+                    displaySelectedCustomizationIngredients();
                 };
                 div.appendChild(removeButton);
                 selectedArea.appendChild(div);
             });
+
+            if (!document.querySelector('.submit-customization-button')) {
+                const textarea = document.createElement('textarea');
+                textarea.placeholder = 'Enter any special instructions...';
+                selectedArea.appendChild(textarea);
+
+                const submitButton = document.createElement('button');
+                submitButton.className = 'submit-customization-button';
+                submitButton.textContent = 'Submit Customization';
+                submitButton.onclick = submitCustomizationIngredients;
+                selectedArea.appendChild(submitButton);
+            }
+        }
+
+        function submitCustomizationIngredients() {
+            if (!selectedMenuItem) {
+                addMessage('bot', 'No dish selected. Please choose a dish first.');
+                return;
+            }
+
+            const textarea = document.querySelector('.selected-customization-ingredients textarea');
+            const instructions = textarea ? textarea.value.trim() : '';
+
+            fetch('/submit_customization_ingredients', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    menu_item: selectedMenuItem,
+                    ingredients: selectedIngredients,
+                    instructions: instructions
+                })
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        addToCart({ ...selectedMenuItem, instructions, ingredients: selectedIngredients });
+                        addMessage('bot', 'Customization submitted successfully! Item added to cart. Would you like to order more?');
+                        const options = [
+                            { text: 'Yes', class: 'green' },
+                            { text: 'No', class: 'red' }
+                        ];
+                        displayOptions(options);
+                        selectedMenuItem = null;
+                        selectedIngredients = [];
+                        displayCart();
+                    } else {
+                        addMessage('bot', `Error: ${data.error}`);
+                    }
+                })
+                .catch(error => {
+                    addMessage('bot', `Error submitting customization: ${error.message}`);
+                });
         }
 
         function fetchIngredients(foodPreference) {
             fetch('/get_ingredients', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                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);
-                    displaySelectedIngredients();
-                }
-            })
-            .catch(error => {
-                addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
-            });
+                .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);
+                        displaySelectedIngredients();
+                    }
+                })
+                .catch(error => {
+                    addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
+                });
         }
 
-        function fetchMenuItems(ingredientNames) {
+        function fetchMenuItems(params) {
             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 selection:');
-                    displayMenuItems(menuItems);
-                }
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(params)
             })
-            .catch(error => {
-                addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
-            });
+                .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 selection:');
+                        displayMenuItems(menuItems);
+                    }
+                })
+                .catch(error => {
+                    addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
+                });
         }
 
         function displayIngredientsList(ingredients) {
@@ -754,62 +837,13 @@
         }
 
         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) {
-                    const ingredientNames = selectedIngredients.map(ingredient => ingredient.name.toLowerCase()).join(' ');
-                    fetchMenuItems(ingredientNames);
-                } else {
-                    addMessage('bot', 'There was an issue submitting your ingredients. Please try again.');
-                }
-            })
-            .catch(error => {
-                addMessage('bot', `Error: ${error.message}`);
-            });
-        }
-
-        function displayCustomizationInput() {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for customization input!');
+            if (selectedIngredients.length === 0) {
+                addMessage('bot', 'No ingredients selected. Please choose some ingredients.');
                 return;
             }
 
-            let customizationArea = document.querySelector('.customization-input');
-            if (!customizationArea) {
-                customizationArea = document.createElement('div');
-                customizationArea.className = 'customization-input';
-                const textarea = document.createElement('textarea');
-                textarea.placeholder = 'Enter any special instructions...';
-                const submitButton = document.createElement('button');
-                submitButton.textContent = 'Submit Instructions';
-                submitButton.onclick = () => {
-                    const instructions = textarea.value.trim();
-                    if (instructions) {
-                        addMessage('user', instructions);
-                        conversation.push({ role: 'user', message: instructions });
-                    }
-                    addToCart({ ...selectedMenuItem, instructions, ingredients: selectedIngredients });
-                    addMessage('bot', 'Item added to cart! Would you like to order more?');
-                    const options = [
-                        { text: 'Yes', class: 'green' },
-                        { text: 'No', class: 'red' }
-                    ];
-                    displayOptions(options);
-                    selectedMenuItem = null;
-                    selectedIngredients = [];
-                };
-                customizationArea.appendChild(textarea);
-                customizationArea.appendChild(submitButton);
-                chatMessages.appendChild(customizationArea);
-            }
+            const ingredientNames = selectedIngredients.map(ingredient => ingredient.name.toLowerCase()).join(' ');
+            fetchMenuItems({ ingredient_names: ingredientNames });
         }
 
         function addToCart(item) {
@@ -846,7 +880,12 @@
                     img.src = item.image_url || 'https://via.placeholder.com/30';
                     img.alt = item.name;
                     const name = document.createElement('div');
-                    name.textContent = item.name + (item.instructions ? ` (${item.instructions})` : '');
+                    const text = item.instructions
+                        ? `${item.name} (${item.instructions})`
+                        : item.name;
+                    name.textContent = item.ingredients.length > 0
+                        ? `${text} with ${item.ingredients.map(i => i.name).join(', ')}`
+                        : text;
                     const removeButton = document.createElement('button');
                     removeButton.className = 'remove-button';
                     removeButton.textContent = 'X';
@@ -877,26 +916,24 @@
                 return;
             }
 
-            fetch('/submit_ingredients', {
+            fetch('/submit_customization_ingredients', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ items: cart })
             })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    addMessage('bot', 'Cart submitted successfully!');
-                    cart = [];
-                    displayCart();
-                } else {
-                    addMessage('bot', `Error submitting cart: ${data.error}`);
-                }
-            })
-            .catch(error => {
-                addMessage('bot', `Error submitting cart: ${error.message}`);
-            });
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        addMessage('bot', 'Cart submitted successfully!');
+                        cart = [];
+                        displayCart();
+                    } else {
+                        addMessage('bot', `Error submitting cart: ${data.error}`);
+                    }
+                })
+                .catch(error => {
+                    addMessage('bot', `Error submitting cart: ${error.message}`);
+                });
         }
 
         function displayOptions(options) {
@@ -912,8 +949,6 @@
                 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);
@@ -926,11 +961,10 @@
                 conversation.pop();
                 selectedIngredients = [];
                 selectedMenuItem = null;
-                chatMessages.innerHTML = '';
-                conversation.forEach(msg => addMessage(msg.role, msg.message));
                 setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
             };
             chatMessages.appendChild(backButton);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
         }
 
         document.getElementById('userInput').addEventListener('keypress', function(e) {