Update templates/menu.html

templates/menu.html

@@ -39,6 +39,7 @@
             transition: opacity 0.3s ease-in-out;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
+      
         .menu-card.visible {
             opacity: 1;
         }
@@ -1071,6 +1072,322 @@
                 font-size: 0.9rem;
             }
         }
+         .chat-container {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Segoe UI', Arial, sans-serif;
+            background-color: #f4f7fa;
+            overflow-x: hidden;
+            line-height: 1.5;
+        }
+        .chat-container {
+            width: 100%;
+            max-width: 800px;
+            height: 100vh;
+            margin: 0 auto;
+            background-color: #ffffff;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .chat-header {
+            background-color: #0078d4;
+            color: #ffffff;
+            padding: 12px;
+            text-align: center;
+            font-size: 18px;
+            font-weight: 600;
+            flex-shrink: 0;
+        }
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 15px;
+            scroll-behavior: smooth;
+        }
+        .bot-message, .user-message {
+            padding: 10px 15px;
+            margin: 8px 0;
+            border-radius: 12px;
+            max-width: 80%;
+            font-size: 14px;
+            line-height: 1.4;
+        }
+        .bot-message {
+            background-color: #e8f0fe;
+            color: #333;
+        }
+        .user-message {
+            background-color: #0078d4;
+            color: #ffffff;
+            margin-left: auto;
+        }
+        .chat-input {
+            display: flex;
+            padding: 10px;
+            border-top: 1px solid #e0e0e0;
+            background-color: #f9f9f9;
+            flex-shrink: 0;
+        }
+        .chat-input input {
+            flex: 1;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            font-size: 14px;
+            outline: none;
+        }
+        .chat-input button {
+            padding: 10px 20px;
+            margin-left: 10px;
+            background-color: #0078d4;
+            color: #ffffff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.2s;
+        }
+        .chat-input button:hover {
+            background-color: #005ea2;
+        }
+        .ingredients-list, .menu-items-list, .customization-ingredients-list {
+            display: flex;
+            flex-wrap: nowrap;
+            overflow-x: auto;
+            padding: 10px;
+            margin: 10px 0;
+            background-color: #f5f7fa;
+            border-radius: 10px;
+            gap: 15px;
+            scroll-behavior: smooth;
+        }
+        .ingredient-item, .menu-item {
+            flex: 0 0 200px;
+            background-color: #ffffff;
+            border: 1px solid #e0e0e0;
+            border-radius: 10px;
+            padding: 10px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            transition: transform 0.2s;
+            text-align: center;
+        }
+        .ingredient-item:hover, .menu-item:hover {
+            transform: translateY(-2px);
+        }
+        .ingredient-item img, .menu-item img {
+            width: 100%;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 8px;
+            margin-bottom: 8px;
+        }
+        .ingredient-item div, .menu-item div {
+            font-size: 14px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 5px;
+        }
+        .ingredient-item button, .menu-item button {
+            padding: 8px;
+            background-color: #28a745;
+            color: #ffffff;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 12px;
+            width: 100%;
+        }
+        .ingredient-item button:hover, .menu-item button:hover {
+            background-color: #218838;
+        }
+        .selected-ingredients, .selected-customization-ingredients {
+            background-color: #f1f8ff;
+            padding: 15px;
+            border: 1px solid #b3d7ff;
+            border-radius: 10px;
+            margin: 10px 0;
+            font-size: 14px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .selected-ingredients div, .selected-customization-ingredients div {
+            background-color: #d6e9ff;
+            padding: 5px 10px;
+            border-radius: 6px;
+            font-size: 13px;
+        }
+        .customization-input {
+            margin: 10px 0;
+        }
+        .customization-input textarea, .selected-customization-ingredients textarea {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #b3d7ff;
+            border-radius: 6px;
+            font-size: 14px;
+            outline: none;
+            margin-bottom: 10px;
+        }
+        .customization-input button, .submit-button, .submit-customization-button, .submit-cart-button {
+            padding: 10px 20px;
+            background-color: #0078d4;
+            color: #ffffff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.2s;
+        }
+        .customization-input button:hover, .submit-button:hover, .submit-customization-button:hover, .submit-cart-button:hover {
+            background-color: #005ea2;
+        }
+        .option-button {
+            padding: 10px 20px;
+            color: #ffffff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            margin: 5px;
+            transition: background-color 0.2s;
+        }
+        .option-button.green {
+            background-color: #28a745;
+        }
+        .option-button.green:hover {
+            background-color: #218838;
+        }
+        .option-button.red {
+            background-color: #dc3545;
+        }
+        .option-button.red:hover {
+            background-color: #c82333;
+        }
+        .cart-items {
+            background-color: #f1f8ff;
+            padding: 15px;
+            border: 1px solid #b3d7ff;
+            border-radius: 10px;
+            margin: 10px 0;
+            font-size: 14px;
+        }
+        .cart-item {
+            display: flex;
+            align-items: center;
+            background-color: #d6e9ff;
+            padding: 5px 10px;
+            border-radius: 6px;
+            font-size: 13px;
+            margin: 5px 0;
+        }
+        .cart-item img {
+            width: 30px;
+            height: 30px;
+            object-fit: cover;
+            border-radius: 6px;
+            margin-right: 8px;
+        }
+        .cart-item .remove-button {
+            padding: 5px 10px;
+            margin-left: 8px;
+            background-color: #dc3545;
+            color: #ffffff;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 12px;
+        }
+        .cart-item .remove-button:hover {
+            background-color: #c82333;
+        }
+        /* Responsive Design */
+        @media (max-width: 480px) {
+            .chat-container {
+                border-radius: 0;
+                box-shadow: none;
+            }
+            .chat-header {
+                font-size: 16px;
+                padding: 10px;
+            }
+            .chat-messages {
+                padding: 10px;
+            }
+            .bot-message, .user-message {
+                font-size: 13px;
+                padding: 8px 12px;
+                margin: 5px 0;
+            }
+            .chat-input input {
+                font-size: 13px;
+                padding: 8px;
+            }
+            .chat-input button {
+                font-size: 13px;
+                padding: 8px 15px;
+            }
+            .ingredients-list, .menu-items-list, .customization-ingredients-list {
+                flex-direction: column;
+                gap: 10px;
+                padding: 8px;
+            }
+            .ingredient-item, .menu-item {
+                flex: 0 0 auto;
+                width: 100%;
+                max-width: 250px;
+            }
+            .ingredient-item img, .menu-item img {
+                height: 100px;
+            }
+            .ingredient-item div, .menu-item div {
+                font-size: 13px;
+            }
+            .ingredient-item button, .menu-item button {
+                font-size: 11px;
+                padding: 6px;
+            }
+            .option-button {
+                font-size: 13px;
+                padding: 8px 15px;
+            }
+            .selected-ingredients, .selected-customization-ingredients, .cart-items {
+                padding: 10px;
+                gap: 8px;
+            }
+            .cart-item {
+                font-size: 12px;
+                padding: 4px 8px;
+            }
+            .cart-item img {
+                width: 25px;
+                height: 25px;
+            }
+        }
+        @media (min-width: 481px) and (max-width: 768px) {
+            .chat-container {
+                max-width: 600px;
+            }
+            .chat-header {
+                font-size: 17px;
+                padding: 11px;
+            }
+            .chat-messages {
+                padding: 12px;
+            }
+            .ingredient-item, .menu-item {
+                flex: 0 0 180px;
+            }
+            .ingredient-item img, .menu-item img {
+                height: 110px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -1118,19 +1435,16 @@
     <div class="container mt-4">
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
-                <h3>Create Your Custom Dish</h3>
-                <form method="POST" action="/customdish/generate_custom_dish">
-                    <div class="mb-3">
-                        <label for="custom-dish-name" class="form-label">Dish Name</label>
-                        <input type="text" class="form-control" id="custom-dish-name" name="name" required>
-                    </div>
-                    <div class="mb-3 position-relative">
-                        <label for="custom-dish-description" class="form-label">Dish Description</label>
-                        <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
-                        <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
-                    </div>
-                    <button type="submit" class="btn btn-primary">Submit Custom Dish</button>
-                </form>
+                  <div class="chat-container">
+                      <div class="chat-header">🍳 Chef Bot</div>
+                      <div class="chat-messages" id="chatMessages">
+                          <!-- Initial message will be set by JavaScript based on session -->
+                      </div>
+                      <div class="chat-input">
+                          <input type="text" id="userInput" placeholder="Type your name or message...">
+                          <button onclick="sendMessage()">Send</button>
+                      </div>
+                  </div>
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
@@ -1848,6 +2162,584 @@
                 quantityInput.value = quantity;
             });
         });
+        let currentStep = 'greeting';  // other possible values: 'food_type', 'select_ingredients', 'menu_display', 'customization', 'post_cart'
+    let conversation = [];
+    let selectedIngredients = [];
+    let selectedMenuItem = null;
+    let cart = [];
+    // Get the user name passed from Flask (via Jinja)
+    const userName = "{{ user_name }}";  // Jinja syntax to inject user_name from Flask session
+    window.onload = function() {
+        if (userName) {
+            // If user_name exists, greet the user directly and proceed to food preference
+            conversation.push({ role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` });
+            displayConversation();  // Display the current conversation
+            displayOptions([
+                { text: 'Vegetarian', class: 'green' },
+                { text: 'Non-Vegetarian', class: 'red' }
+            ]);
+        } else {
+            // Ask for the name if it's not found
+            conversation.push({ role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" });
+            displayConversation();  // Display the conversation
+        }
+    };
+    // Function to add messages to the chat
+    function addMessage(role, message) {
+        const chatMessages = document.getElementById('chatMessages');
+        if (!chatMessages) {
+            console.error('Chat messages container not found!');
+            return;
+        }
+        const messageDiv = document.createElement('div');
+        messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
+        messageDiv.textContent = message;
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+    // Function to display all conversation messages
+    function displayConversation() {
+        const chatMessages = document.getElementById('chatMessages');
+        chatMessages.innerHTML = '';  // Clear previous messages
+        conversation.forEach(msg => {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = msg.role === 'bot' ? 'bot-message' : 'user-message';
+            messageDiv.textContent = msg.message;
+            chatMessages.appendChild(messageDiv);
+        });
+        chatMessages.scrollTop = chatMessages.scrollHeight;  // Scroll to bottom
+    }
+    // Function to handle user input
+    function sendMessage() {
+        const userInput = document.getElementById('userInput').value.trim();
+        if (userInput) {
+            addMessage('user', userInput);
+            conversation.push({ role: 'user', message: userInput });
+            document.getElementById('userInput').value = '';  // Clear input field
+            setTimeout(() => handleResponse(userInput), 500);
+        } else {
+            console.warn('Empty message!');
+        }
+    }
+        function handleResponse(userInput) {
+            const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
+            let botResponse = '';
+            let options = [];
+            // If user has already selected food type, proceed without repeating the question
+            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 = '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('non-vegetarian') && currentStep === 'food_type') {
+                // Handle non-vegetarian selection
+                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') && currentStep === 'food_type') {
+                // Handle vegetarian selection
+                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('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';
+                return;
+            }
+            addMessage('bot', botResponse);
+            if (options.length > 0) {
+                displayOptions(options);
+            }
+            displayCart();
+        }
+        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' },
+                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 to customize:');
+                        displayCustomizationIngredients(ingredients);
+                    }
+                })
+                .catch(error => {
+                    addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
+                });
+        }
+        function displayCustomizationIngredients(ingredients) {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) {
+                console.error('Chat messages container not found for customization ingredients!');
+                return;
+            }
+            let ingredientsList = document.querySelector('.customization-ingredients-list');
+            if (!ingredientsList) {
+                ingredientsList = document.createElement('div');
+                ingredientsList.className = 'customization-ingredients-list';
+                chatMessages.appendChild(ingredientsList);
+            } else {
+                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({ name: ingredient.name, image_url: ingredient.image_url });
+                        displaySelectedCustomizationIngredients();
+                    }
+                };
+                item.appendChild(img);
+                item.appendChild(name);
+                item.appendChild(button);
+                ingredientsList.appendChild(item);
+            });
+            displaySelectedCustomizationIngredients();
+        }
+        function displaySelectedCustomizationIngredients() {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) {
+                console.error('Chat messages container not found for selected customization ingredients!');
+                return;
+            }
+            let selectedArea = document.querySelector('.selected-customization-ingredients');
+            if (!selectedArea) {
+                selectedArea = document.createElement('div');
+                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;
+                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);
+                    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 });
+                        currentStep = 'post_cart';
+                        addMessage('bot', 'Customization submitted successfully! Item added to cart.');
+        
+                        // Redirect to the cart page
+                        window.location.href = '/cart/cart';  // This will redirect the user to the cart page
+                    } 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' },
+                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(params) {
+            fetch('/get_menu_items', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(params)
+            })
+                .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 = 'ingredients-list';
+                chatMessages.appendChild(ingredientsList);
+            } else {
+                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');
+            if (!chatMessages) {
+                console.error('Chat messages container not found for menu items!');
+                return;
+            }
+            let menuItemsList = document.querySelector('.menu-items-list');
+            if (!menuItemsList) {
+                menuItemsList = document.createElement('div');
+                menuItemsList.className = 'menu-items-list';
+                chatMessages.appendChild(menuItemsList);
+            } else {
+                menuItemsList.innerHTML = '';
+            }
+            menuItems.forEach(item => {
+                const menuItem = document.createElement('div');
+                menuItem.className = 'menu-item';
+                const img = document.createElement('img');
+                img.src = item.image_url || 'https://via.placeholder.com/120';
+                img.alt = item.name;
+                const name = document.createElement('div');
+                name.textContent = item.name;
+                const button = document.createElement('button');
+                button.textContent = 'Add to Cart';
+                button.onclick = () => {
+                    selectedMenuItem = item;
+                    addMessage('bot', `World-class selection! Would you like to customize your dish further?`);
+                    const options = [
+                        { text: 'Yes', class: 'green' },
+                        { text: 'No', class: 'red' }
+                    ];
+                    displayOptions(options);
+                };
+                menuItem.appendChild(img);
+                menuItem.appendChild(name);
+                menuItem.appendChild(button);
+                menuItemsList.appendChild(menuItem);
+            });
+        }
+        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() {
+            if (selectedIngredients.length === 0) {
+                addMessage('bot', 'No ingredients selected. Please choose some ingredients.');
+                return;
+            }
+            const ingredientNames = selectedIngredients.map(ingredient => ingredient.name.toLowerCase()).join(' ');
+            fetchMenuItems({ ingredient_names: ingredientNames });
+        }
+        function addToCart(item) {
+            cart.push(item);
+            console.log('Cart:', cart);
+            displayCart();
+        }
+        function displayCart() {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) {
+                console.error('Chat messages container not found for cart!');
+                return;
+            }
+            let cartArea = document.querySelector('.cart-items');
+            if (!cartArea) {
+                cartArea = document.createElement('div');
+                cartArea.className = 'cart-items';
+                chatMessages.appendChild(cartArea);
+            } else {
+                cartArea.innerHTML = '';
+            }
+            if (cart.length > 0) {
+                const label = document.createElement('div');
+                label.textContent = 'Cart:';
+                cartArea.appendChild(label);
+                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;
+                    const name = document.createElement('div');
+                    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';
+                    removeButton.onclick = () => {
+                        cart.splice(index, 1);
+                        displayCart();
+                    };
+                    itemDiv.appendChild(img);
+                    itemDiv.appendChild(name);
+                    itemDiv.appendChild(removeButton);
+                    cartArea.appendChild(itemDiv);
+                });
+                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);
+                }
+            }
+        }
+        function submitCart() {
+            if (cart.length === 0) {
+                addMessage('bot', 'Your cart is empty!');
+                return;
+            }
+            fetch('/submit_customization_ingredients', {
+                method: 'POST',
+                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}`);
+                });
+        }
+        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 });
+                    setTimeout(() => handleResponse(opt.text), 500);
+                };
+                chatMessages.appendChild(button);
+            });
+            chatMessages.appendChild(document.createElement('br'));
+            const backButton = document.createElement('button');
+            backButton.textContent = 'Go Back';
+            backButton.className = 'option-button';
+            backButton.onclick = () => {
+                conversation.pop();
+                selectedIngredients = [];
+                selectedMenuItem = null;
+                setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
+            };
+            chatMessages.appendChild(backButton);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        document.getElementById('userInput').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        console.log('Script loaded successfully');
     </script>
 </body>
 </html>