Update templates/index.html

templates/index.html

@@ -275,32 +275,6 @@
             background-color: #c82333;
         }
 
-        .cart-item .ingredient-info-input {
-            padding: 8px;
-            border: 1px solid #b3d7ff;
-            border-radius: 6px;
-            font-size: 13px;
-            width: 150px;
-            outline: none;
-            margin: 5px;
-        }
-
-        .submit-cart {
-            margin: 10px 0;
-        }
-
-        .submit-cart input {
-            padding: 8px;
-            border: 1px solid #b3d7ff;
-            border-radius: 6px;
-            font-size: 14px;
-            margin-right: 10px;
-        }
-
-        .quantity-input {
-            width: 60px;
-        }
-
         /* Responsive Design */
         @media (max-width: 480px) {
             .chat-container {
@@ -377,31 +351,6 @@
                 width: 25px;
                 height: 25px;
             }
-
-            .cart-item .ingredient-info-input {
-                width: 120px;
-                font-size: 12px;
-            }
-
-            .submit-cart input {
-                width: 120px;
-                font-size: 13px;
-                padding: 6px;
-            }
-
-            .quantity-input {
-                width: 50px;
-            }
-
-            .submit-button {
-                font-size: 13px;
-                padding: 8px 15px;
-            }
-
-            .cart-item .remove-button {
-                font-size: 11px;
-                padding: 4px 8px;
-            }
         }
 
         @media (min-width: 481px) and (max-width: 768px) {
@@ -444,8 +393,6 @@
         let conversation = [
             { role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" }
         ];
-        let userName = '';
-        let selectedPreference = '';
         let selectedIngredients = [];
         let selectedMenuItem = null;
         let cart = [];
@@ -477,30 +424,38 @@
                 userInput.value = '';
                 setTimeout(() => handleResponse(message), 500);
             } else {
-                addMessage('bot', 'Please type something! 😄');
                 console.warn('Empty message!');
             }
-            updateCartDisplay();
         }
 
         function handleResponse(userInput) {
-            const lastMessage = userInput.toLowerCase();
+            const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
             let botResponse = '';
             let options = [];
 
-            if (!userName) { // Name input
-                userName = userInput;
-                botResponse = `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
+            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?`;
                 options = [
                     { text: 'Vegetarian', class: 'green' },
                     { text: 'Non-Vegetarian', class: 'red' }
                 ];
-            } else if (!selectedPreference && (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian'))) {
-                selectedPreference = lastMessage.includes('vegetarian') ? 'vegetarian' : 'non-vegetarian';
-                conversation.push({ role: 'user', message: selectedPreference.charAt(0).toUpperCase() + selectedPreference.slice(1) });
-                console.log(`Food preference selected: ${selectedPreference}`);
-                botResponse = `Great choice! 🍽️ Here are some ingredients:`;
-                fetchIngredients();
+            } else if (lastMessage.includes('non-vegetarian')) {
+                conversation.push({ role: 'user', message: 'Non-Vegetarian' });
+                console.log("Food preference selected: Non-Vegetarian");
+                botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
+                fetchIngredients('non-vegetarian');
+                return;
+            } else if (lastMessage.includes('vegetarian')) {
+                conversation.push({ role: 'user', message: 'Vegetarian' });
+                console.log("Food preference selected: Vegetarian");
+                botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
+                fetchIngredients('vegetarian');
+                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:`;
+                fetchIngredients(lastMessage.toLowerCase());
                 return;
             } else if (lastMessage.includes('yes') && selectedMenuItem) {
                 botResponse = 'Awesome! Let’s customize your dish. Here are some ingredients you can add:';
@@ -514,121 +469,49 @@
                     { text: 'No', class: 'red' }
                 ];
                 selectedMenuItem = null;
-                selectedIngredients = [];
-            } else {
-                botResponse = `Searching for "${userInput}"...`;
-                fetchMenuItems(selectedPreference, userInput);
-                return;
             }
 
             addMessage('bot', botResponse);
             if (options.length > 0) {
                 displayOptions(options);
             }
-            updateCartDisplay();
-        }
-
-        function fetchIngredients() {
-            fetch('/get_ingredients', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ dietary_preference: 'both' })
-            })
-                .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 => {
-                    addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
-                });
         }
 
         function fetchCustomizationIngredients(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 customization ingredients: ${data.error}`);
-                    } else {
-                        const ingredients = data.ingredients || [];
-                        addMessage('bot', 'Select ingredients to customize your dish:');
-                        displayCustomizationIngredients(ingredients);
-                        displaySelectedIngredientsForCustomization();
-                        displayCustomizationInput();
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
-                });
-        }
-
-        function fetchMenuItems(dietaryPreference, searchTerm = '') {
-            const payload = { dietary_preference: dietaryPreference };
-            if (searchTerm) payload.search_term = searchTerm;
-            fetch('/get_menu_items', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
-                    } else if (data.menu_items.length > 0) {
-                        addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
-                        displayMenuItems(data.menu_items);
-                    } else {
-                        addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
-                });
-        }
-
-        function fetchRelatedMenuItems(ingredientName) {
-            fetch('/get_related_menu_items', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ ingredient_name: ingredientName, dietary_preference: selectedPreference })
+            .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();
+                }
             })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Error: ${data.error}. Try another ingredient!`);
-                    } else if (data.menu_items.length > 0) {
-                        addMessage('bot', `--- Found ${data.menu_items.length} dish${data.menu_items.length > 1 ? 'es' : ''} with "${ingredientName}" ---`);
-                        displayMenuItems(data.menu_items);
-                    } else {
-                        addMessage('bot', `No dishes found with "${ingredientName}". Try another!`);
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
-                });
+            .catch(error => {
+                addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
+            });
         }
 
-        function displayIngredientsList(ingredients) {
+        function displayCustomizationIngredients(ingredients) {
             const chatMessages = document.getElementById('chatMessages');
             if (!chatMessages) {
-                console.error('Chat messages container not found for ingredients!');
+                console.error('Chat messages container not found for customization ingredients!');
                 return;
             }
 
-            let ingredientsList = document.querySelector('.ingredients-list');
+            let ingredientsList = document.querySelector('.customization-ingredients-list');
             if (!ingredientsList) {
                 ingredientsList = document.createElement('div');
-                ingredientsList.className = 'ingredients-list';
+                ingredientsList.className = 'customization-ingredients-list';
                 chatMessages.appendChild(ingredientsList);
             } else {
                 ingredientsList.innerHTML = '';
@@ -643,10 +526,12 @@
                 const name = document.createElement('div');
                 name.textContent = ingredient.name;
                 const button = document.createElement('button');
-                button.textContent = 'Select';
+                button.textContent = 'Add';
                 button.onclick = () => {
-                    addMessage('bot', `Finding dishes with "${ingredient.name}"...`);
-                    fetchRelatedMenuItems(ingredient.name);
+                    if (!selectedIngredients.some(item => item.name === ingredient.name)) {
+                        selectedIngredients.push(ingredient);
+                        displaySelectedIngredientsForCustomization();
+                    }
                 };
                 item.appendChild(img);
                 item.appendChild(name);
@@ -655,17 +540,101 @@
             });
         }
 
-        function displayCustomizationIngredients(ingredients) {
+        function displaySelectedIngredientsForCustomization() {
             const chatMessages = document.getElementById('chatMessages');
             if (!chatMessages) {
-                console.error('Chat messages container not found for customization ingredients!');
+                console.error('Chat messages container not found for selected ingredients!');
                 return;
             }
 
-            let ingredientsList = document.querySelector('.customization-ingredients-list');
+            let selectedArea = document.querySelector('.selected-ingredients');
+            if (!selectedArea) {
+                selectedArea = document.createElement('div');
+                selectedArea.className = 'selected-ingredients';
+                chatMessages.appendChild(selectedArea);
+            } else {
+                selectedArea.innerHTML = '';
+            }
+
+            selectedIngredients.forEach(ingredient => {
+                const div = document.createElement('div');
+                div.textContent = ingredient.name;
+                const removeButton = document.createElement('button');
+                removeButton.textContent = 'X';
+                removeButton.style.marginLeft = '5px';
+                removeButton.style.padding = '2px 5px';
+                removeButton.style.backgroundColor = '#dc3545';
+                removeButton.style.color = '#ffffff';
+                removeButton.style.border = 'none';
+                removeButton.style.borderRadius = '4px';
+                removeButton.style.cursor = 'pointer';
+                removeButton.onclick = () => {
+                    selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
+                    displaySelectedIngredientsForCustomization();
+                };
+                div.appendChild(removeButton);
+                selectedArea.appendChild(div);
+            });
+        }
+
+        function fetchIngredients(foodPreference) {
+            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);
+                    displaySelectedIngredients();
+                }
+            })
+            .catch(error => {
+                addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
+            });
+        }
+
+        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 selection:');
+                    displayMenuItems(menuItems);
+                }
+            })
+            .catch(error => {
+                addMessage('bot', `Error: Unable to connect to the menu 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.querySelector('.ingredients-list');
             if (!ingredientsList) {
                 ingredientsList = document.createElement('div');
-                ingredientsList.className = 'customization-ingredients-list';
+                ingredientsList.className = 'ingredients-list';
                 chatMessages.appendChild(ingredientsList);
             } else {
                 ingredientsList.innerHTML = '';
@@ -684,7 +653,7 @@
                 button.onclick = () => {
                     if (!selectedIngredients.some(item => item.name === ingredient.name)) {
                         selectedIngredients.push(ingredient);
-                        displaySelectedIngredientsForCustomization();
+                        displaySelectedIngredients();
                     }
                 };
                 item.appendChild(img);
@@ -694,29 +663,6 @@
             });
         }
 
-        function displaySelectedIngredientsForCustomization() {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for selected ingredients!');
-                return;
-            }
-
-            let selectedArea = document.querySelector('.selected-ingredients');
-            if (!selectedArea) {
-                selectedArea = document.createElement('div');
-                selectedArea.className = 'selected-ingredients';
-                chatMessages.appendChild(selectedArea);
-            } else {
-                selectedArea.innerHTML = '';
-            }
-
-            selectedIngredients.forEach(ingredient => {
-                const div = document.createElement('div');
-                div.textContent = ingredient.name;
-                selectedArea.appendChild(div);
-            });
-        }
-
         function displayMenuItems(menuItems) {
             const chatMessages = document.getElementById('chatMessages');
             if (!chatMessages) {
@@ -759,6 +705,76 @@
             });
         }
 
+        function displaySelectedIngredients() {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) {
+                console.error('Chat messages container not found for selected ingredients!');
+                return;
+            }
+
+            let selectedArea = document.querySelector('.selected-ingredients');
+            if (!selectedArea) {
+                selectedArea = document.createElement('div');
+                selectedArea.className = 'selected-ingredients';
+                chatMessages.appendChild(selectedArea);
+            } else {
+                selectedArea.innerHTML = '';
+            }
+
+            selectedIngredients.forEach(ingredient => {
+                const div = document.createElement('div');
+                div.textContent = ingredient.name;
+                const removeButton = document.createElement('button');
+                removeButton.textContent = 'X';
+                removeButton.style.marginLeft = '5px';
+                removeButton.style.padding = '2px 5px';
+                removeButton.style.backgroundColor = '#dc3545';
+                removeButton.style.color = '#ffffff';
+                removeButton.style.border = 'none';
+                removeButton.style.borderRadius = '4px';
+                removeButton.style.cursor = 'pointer';
+                removeButton.onclick = () => {
+                    selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
+                    displaySelectedIngredients();
+                };
+                div.appendChild(removeButton);
+                selectedArea.appendChild(div);
+            });
+
+            if (selectedIngredients.length > 0) {
+                let submitButton = document.querySelector('.submit-button');
+                if (!submitButton) {
+                    submitButton = document.createElement('button');
+                    submitButton.className = 'submit-button';
+                    submitButton.textContent = 'Submit Ingredients';
+                    submitButton.onclick = submitIngredients;
+                    chatMessages.appendChild(submitButton);
+                }
+            }
+        }
+
+        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) {
@@ -776,6 +792,10 @@
                 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 = [
@@ -785,7 +805,6 @@
                     displayOptions(options);
                     selectedMenuItem = null;
                     selectedIngredients = [];
-                    updateCartDisplay();
                 };
                 customizationArea.appendChild(textarea);
                 customizationArea.appendChild(submitButton);
@@ -794,24 +813,17 @@
         }
 
         function addToCart(item) {
-            const cartItem = {
-                name: item.name,
-                image_url: item.image_url || '',
-                category: item.veg_nonveg || 'Not specified',
-                description: item.description || 'No description available',
-                instructions: item.instructions || '',
-                ingredients: item.ingredients || [],
-                quantity: 1,
-                ingredientsInfo: ''
-            };
-            cart.push(cartItem);
+            cart.push(item);
             console.log('Cart:', cart);
-            updateCartDisplay();
+            displayCart();
         }
 
-        function updateCartDisplay() {
+        function displayCart() {
             const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) return;
+            if (!chatMessages) {
+                console.error('Chat messages container not found for cart!');
+                return;
+            }
 
             let cartArea = document.querySelector('.cart-items');
             if (!cartArea) {
@@ -830,116 +842,61 @@
                 cart.forEach((item, index) => {
                     const itemDiv = document.createElement('div');
                     itemDiv.className = 'cart-item';
-
                     const img = document.createElement('img');
                     img.src = item.image_url || 'https://via.placeholder.com/30';
                     img.alt = item.name;
-                    itemDiv.appendChild(img);
-
-                    const contentDiv = document.createElement('div');
-                    const itemText = item.instructions
-                        ? `${item.name} (${item.instructions})`
-                        : item.name;
-                    contentDiv.textContent = `${itemText} (Qty: ${item.quantity})`;
-                    if (item.ingredients.length > 0) {
-                        contentDiv.textContent += ` with ${item.ingredients.map(i => i.name).join(', ')}`;
-                    }
-                    itemDiv.appendChild(contentDiv);
-
-                    const infoInput = document.createElement('input');
-                    infoInput.type = 'text';
-                    infoInput.placeholder = 'Add ingredient details...';
-                    infoInput.className = 'ingredient-info-input';
-                    infoInput.value = item.ingredientsInfo || '';
-                    infoInput.addEventListener('input', (e) => {
-                        cart[index].ingredientsInfo = e.target.value;
-                    });
-                    itemDiv.appendChild(infoInput);
-
+                    const name = document.createElement('div');
+                    name.textContent = item.name + (item.instructions ? ` (${item.instructions})` : '');
                     const removeButton = document.createElement('button');
-                    removeButton.textContent = 'X';
                     removeButton.className = 'remove-button';
+                    removeButton.textContent = 'X';
                     removeButton.onclick = () => {
                         cart.splice(index, 1);
-                        addMessage('bot', `Removed "${item.name}" from cart.`);
-                        updateCartDisplay();
+                        displayCart();
                     };
+                    itemDiv.appendChild(img);
+                    itemDiv.appendChild(name);
                     itemDiv.appendChild(removeButton);
-
                     cartArea.appendChild(itemDiv);
                 });
 
-                let submitArea = document.querySelector('.submit-cart');
-                if (!submitArea) {
-                    submitArea = document.createElement('div');
-                    submitArea.className = 'submit-cart';
-                    const orderNameInput = document.createElement('input');
-                    orderNameInput.type = 'text';
-                    orderNameInput.placeholder = 'Order Name';
-                    orderNameInput.className = 'order-name-input';
-                    const quantityInput = document.createElement('input');
-                    quantityInput.type = 'number';
-                    quantityInput.min = '1';
-                    quantityInput.value = '1';
-                    quantityInput.className = 'quantity-input';
-                    const submitButton = document.createElement('button');
-                    submitButton.textContent = 'Submit Cart';
-                    submitButton.className = 'submit-button';
-                    submitButton.onclick = () => {
-                        submitCart(orderNameInput.value, quantityInput.value);
-                    };
-                    submitArea.appendChild(orderNameInput);
-                    submitArea.appendChild(quantityInput);
-                    submitArea.appendChild(submitButton);
-                    chatMessages.appendChild(submitArea);
+                let submitCartButton = document.querySelector('.submit-cart-button');
+                if (!submitCartButton) {
+                    submitCartButton = document.createElement('button');
+                    submitCartButton.className = 'submit-cart-button';
+                    submitCartButton.textContent = 'Submit Cart';
+                    submitCartButton.onclick = submitCart;
+                    cartArea.appendChild(submitCartButton);
                 }
             }
-
-            chatMessages.scrollTop = chatMessages.scrollHeight;
         }
 
-        function submitCart(customOrderName, quantity) {
+        function submitCart() {
             if (cart.length === 0) {
-                addMessage('bot', 'No items in cart! Add some dishes! 😊');
+                addMessage('bot', 'Your cart is empty!');
                 return;
             }
 
-            if (confirm(`Submit ${cart.length} items (Qty: ${quantity}) as-        const itemsToSubmit = cart.map(item => ({
-                name: item.name,
-                category: item.category,
-                description: item.description,
-                image_url: item.image_url,
-                quantity: parseInt(quantity) || 1,
-                instructions: item.instructions,
-                ingredients: item.ingredients,
-                ingredientsInfo: item.ingredientsInfo
-            }));
-
             fetch('/submit_ingredients', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    items: itemsToSubmit,
-                    custom_order_name: customOrderName,
-                    ingredients_info: ''
-                })
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ items: cart })
             })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Submission failed: ${data.error}. Try again?`);
-                    } else {
-                        addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`);
-                        cart = [];
-                        selectedIngredients = [];
-                        selectedMenuItem = null;
-                        updateCartDisplay();
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Submission error: ${error.message}. Retrying...`);
-                    setTimeout(() => submitCart(customOrderName, quantity), 2000);
-                });
+            .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) {
@@ -955,6 +912,8 @@
                 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);
@@ -967,10 +926,11 @@
                 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) {