Update templates/chef-bot.html

templates/chef-bot.html

@@ -101,7 +101,7 @@
             background-color: #005ea2;
         }
 
-        .items-grid {
+        .ingredients-list, .menu-items-list, .customization-ingredients-list {
             display: flex;
             flex-wrap: nowrap;
             overflow-x: auto;
@@ -113,7 +113,7 @@
             scroll-behavior: smooth;
         }
 
-        .item-card {
+        .ingredient-item, .menu-item {
             flex: 0 0 200px;
             background-color: #ffffff;
             border: 1px solid #e0e0e0;
@@ -121,13 +121,14 @@
             padding: 10px;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
             transition: transform 0.2s;
+            text-align: center;
         }
 
-        .item-card:hover {
+        .ingredient-item:hover, .menu-item:hover {
             transform: translateY(-2px);
         }
 
-        .item-image {
+        .ingredient-item img, .menu-item img {
             width: 100%;
             height: 120px;
             object-fit: cover;
@@ -135,36 +136,14 @@
             margin-bottom: 8px;
         }
 
-        .item-name {
+        .ingredient-item div, .menu-item div {
             font-size: 14px;
             font-weight: 600;
             color: #333;
             margin-bottom: 5px;
         }
 
-        .item-field {
-            font-size: 12px;
-            color: #555;
-            margin: 3px 0;
-        }
-
-        .item-field strong {
-            color: #0078d4;
-        }
-
-        .item-description {
-            font-size: 12px;
-            color: #666;
-            margin: 5px 0;
-        }
-
-        .button-container {
-            display: flex;
-            gap: 8px;
-            margin-top: 8px;
-        }
-
-        .add-button {
+        .ingredient-item button, .menu-item button {
             padding: 8px;
             background-color: #28a745;
             color: #ffffff;
@@ -172,20 +151,61 @@
             border-radius: 6px;
             cursor: pointer;
             font-size: 12px;
-            flex: 1;
+            width: 100%;
         }
 
-        .add-button:hover {
+        .ingredient-item button:hover, .menu-item button:hover {
             background-color: #218838;
         }
 
-        .options-container {
+        .selected-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 {
+            background-color: #d6e9ff;
+            padding: 5px 10px;
+            border-radius: 6px;
+            font-size: 13px;
+        }
+
+        .customization-input {
             margin: 10px 0;
         }
 
+        .customization-input 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 {
+            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 {
+            background-color: #005ea2;
+        }
+
         .option-button {
             padding: 10px 20px;
             color: #ffffff;
@@ -193,6 +213,7 @@
             border-radius: 8px;
             cursor: pointer;
             font-size: 14px;
+            margin: 5px;
             transition: background-color 0.2s;
         }
 
@@ -212,27 +233,16 @@
             background-color: #c82333;
         }
 
-        .selection-box {
+        .cart-items {
             background-color: #f1f8ff;
             padding: 15px;
             border: 1px solid #b3d7ff;
             border-radius: 10px;
             margin: 10px 0;
             font-size: 14px;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            gap: 10px;
         }
 
-        .selection-box span {
-            background-color: #d6e9ff;
-            padding: 5px 10px;
-            border-radius: 6px;
-            font-size: 13px;
-        }
-
-        .selected-item {
+        .cart-item {
             display: flex;
             align-items: center;
             background-color: #d6e9ff;
@@ -240,11 +250,9 @@
             border-radius: 6px;
             font-size: 13px;
             margin: 5px 0;
-            width: 100%;
-            flex-wrap: wrap;
         }
 
-        .selected-item-image {
+        .cart-item img {
             width: 30px;
             height: 30px;
             object-fit: cover;
@@ -252,47 +260,7 @@
             margin-right: 8px;
         }
 
-        .ingredient-info-input {
-            padding: 8px;
-            border: 1px solid #b3d7ff;
-            border-radius: 6px;
-            font-size: 13px;
-            width: 150px;
-            outline: none;
-            margin: 5px;
-        }
-
-        .ingredient-button {
-            padding: 8px 12px;
-            background-color: #6c757d;
-            color: #ffffff;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 13px;
-            margin: 5px;
-        }
-
-        .ingredient-button:hover {
-            background-color: #5a6268;
-        }
-
-        .submit-button {
-            padding: 10px 20px;
-            background-color: #0078d4;
-            color: #ffffff;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: background-color 0.2s;
-        }
-
-        .submit-button:hover {
-            background-color: #005ea2;
-        }
-
-        .remove-button {
+        .cart-item .remove-button {
             padding: 5px 10px;
             margin-left: 8px;
             background-color: #dc3545;
@@ -303,35 +271,34 @@
             font-size: 12px;
         }
 
-        .remove-button:hover {
+        .cart-item .remove-button:hover {
             background-color: #c82333;
         }
 
-        .name-input, .ingredients-info-input {
+        .cart-item .ingredient-info-input {
             padding: 8px;
             border: 1px solid #b3d7ff;
             border-radius: 6px;
-            font-size: 14px;
+            font-size: 13px;
             width: 150px;
             outline: none;
+            margin: 5px;
         }
 
-        .quantity-input {
-            padding: 8px;
-            border: 1px solid #b3d7ff;
-            border-radius: 6px;
-            font-size: 14px;
-            width: 60px;
-            outline: none;
+        .submit-cart {
+            margin: 10px 0;
         }
 
-        .order-name-input {
+        .submit-cart input {
             padding: 8px;
             border: 1px solid #b3d7ff;
             border-radius: 6px;
             font-size: 14px;
-            width: 150px;
-            outline: none;
+            margin-right: 10px;
+        }
+
+        .quantity-input {
+            width: 60px;
         }
 
         /* Responsive Design */
@@ -366,31 +333,27 @@
                 padding: 8px 15px;
             }
 
-            .items-grid {
+            .ingredients-list, .menu-items-list, .customization-ingredients-list {
                 flex-direction: column;
                 gap: 10px;
                 padding: 8px;
             }
 
-            .item-card {
+            .ingredient-item, .menu-item {
                 flex: 0 0 auto;
                 width: 100%;
                 max-width: 250px;
             }
 
-            .item-image {
+            .ingredient-item img, .menu-item img {
                 height: 100px;
             }
 
-            .item-name {
+            .ingredient-item div, .menu-item div {
                 font-size: 13px;
             }
 
-            .item-field, .item-description {
-                font-size: 11px;
-            }
-
-            .add-button {
+            .ingredient-item button, .menu-item button {
                 font-size: 11px;
                 padding: 6px;
             }
@@ -400,22 +363,27 @@
                 padding: 8px 15px;
             }
 
-            .selection-box {
+            .selected-ingredients, .cart-items {
                 padding: 10px;
                 gap: 8px;
             }
 
-            .selected-item {
+            .cart-item {
                 font-size: 12px;
                 padding: 4px 8px;
             }
 
-            .selected-item-image {
+            .cart-item img {
                 width: 25px;
                 height: 25px;
             }
 
-            .name-input, .order-name-input, .ingredients-info-input {
+            .cart-item .ingredient-info-input {
+                width: 120px;
+                font-size: 12px;
+            }
+
+            .submit-cart input {
                 width: 120px;
                 font-size: 13px;
                 padding: 6px;
@@ -423,8 +391,6 @@
 
             .quantity-input {
                 width: 50px;
-                font-size: 13px;
-                padding: 6px;
             }
 
             .submit-button {
@@ -432,15 +398,10 @@
                 padding: 8px 15px;
             }
 
-            .remove-button {
+            .cart-item .remove-button {
                 font-size: 11px;
                 padding: 4px 8px;
             }
-
-            .ingredient-info-input, .ingredient-button {
-                width: 120px;
-                font-size: 12px;
-            }
         }
 
         @media (min-width: 481px) and (max-width: 768px) {
@@ -457,11 +418,11 @@
                 padding: 12px;
             }
 
-            .item-card {
+            .ingredient-item, .menu-item {
                 flex: 0 0 180px;
             }
 
-            .item-image {
+            .ingredient-item img, .menu-item img {
                 height: 110px;
             }
         }
@@ -471,24 +432,23 @@
     <div class="chat-container">
         <div class="chat-header">🍳 Chef Bot</div>
         <div class="chat-messages" id="chatMessages">
-            <div class="bot-message">Hello! What's your name?</div>
+            <div class="bot-message">Hi there! I'm Chef Bot! May I know your name?</div>
         </div>
         <div class="chat-input">
-            <input type="text" id="userInput" placeholder="Type your name or dish...">
+            <input type="text" id="userInput" placeholder="Type your name or message...">
             <button onclick="sendMessage()">Send</button>
         </div>
     </div>
 
     <script>
         let conversation = [
-            { role: 'bot', message: "Hello! What's your name?" }
+            { 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 = [];
-        let selectionBoxVisible = false;
-        let nameInputVisible = false;
-        let ingredients = [];
 
         function addMessage(role, message) {
             const chatMessages = document.getElementById('chatMessages');
@@ -514,222 +474,106 @@
             if (message) {
                 addMessage('user', message);
                 conversation.push({ role: 'user', message: message });
-                handleResponse(message);
+                userInput.value = '';
+                setTimeout(() => handleResponse(message), 500);
             } else {
                 addMessage('bot', 'Please type something! 😄');
+                console.warn('Empty message!');
             }
-            userInput.value = '';
-            updateSelectionBox();
+            updateCartDisplay();
         }
 
         function handleResponse(userInput) {
-            if (!userName) {
+            const lastMessage = userInput.toLowerCase();
+            let botResponse = '';
+            let options = [];
+
+            if (!userName) { // Name input
                 userName = userInput;
-                addMessage('bot', `Nice to meet you, ${userName}! Choose your preference: Veg or Non-Veg.`);
-                selectionBoxVisible = true;
-                updateSelectionBox();
-            } else if (!selectedPreference && (userInput.toLowerCase() === 'vegetarian' || userInput.toLowerCase() === 'non-vegetarian')) {
-                selectedPreference = userInput.toLowerCase();
-                addMessage('bot', `Fetching ${selectedPreference} dishes...`);
-                fetchMenuItems(selectedPreference);
-                nameInputVisible = true;
-                updateSelectionBox();
-            } else if (nameInputVisible) {
-                addMessage('bot', `Searching for "${userInput}"...`);
-                fetchMenuItems(selectedPreference, userInput);
+                botResponse = `Nice to meet you, ${userName}! 😊 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();
+                return;
+            } else if (lastMessage.includes('yes') && selectedMenuItem) {
+                botResponse = 'Awesome! Let’s customize your dish. Here are some ingredients you can add:';
+                fetchCustomizationIngredients('both');
+                return;
+            } else if (lastMessage.includes('no') && selectedMenuItem) {
+                addToCart(selectedMenuItem);
+                botResponse = 'Item added to cart! Would you like to order more?';
+                options = [
+                    { text: 'Yes', class: 'green' },
+                    { text: 'No', class: 'red' }
+                ];
+                selectedMenuItem = null;
+                selectedIngredients = [];
             } else {
-                addMessage('bot', 'Please select Veg or Non-Veg first!');
+                botResponse = `Searching for "${userInput}"...`;
+                fetchMenuItems(selectedPreference, userInput);
+                return;
             }
-        }
 
-        function updateSelectionBox() {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) return;
+            addMessage('bot', botResponse);
+            if (options.length > 0) {
+                displayOptions(options);
+            }
+            updateCartDisplay();
+        }
 
-            const existingBox = document.querySelector('.selection-box');
-            if (existingBox) existingBox.remove();
-
-            // Selection Box
-            if (selectionBoxVisible && !userName) {
-                const selectionBox = document.createElement('div');
-                selectionBox.className = 'selection-box';
-
-                const nameInput = document.createElement('input');
-                nameInput.type = 'text';
-                nameInput.placeholder = 'Enter your name...';
-                nameInput.className = 'name-input';
-                nameInput.addEventListener('keypress', (e) => {
-                    if (e.key === 'Enter' && nameInput.value.trim()) {
-                        const name = nameInput.value.trim();
-                        addMessage('user', name);
-                        conversation.push({ role: 'user', message: name });
-                        handleResponse(name);
-                        nameInput.value = '';
+        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}`);
                 });
-                selectionBox.appendChild(nameInput);
-
-                chatMessages.appendChild(selectionBox);
-            } else if (selectionBoxVisible && userName && !selectedPreference) {
-                const selectionBox = document.createElement('div');
-                selectionBox.className = 'selection-box';
-
-                const vegButton = document.createElement('button');
-                vegButton.textContent = 'Veg';
-                vegButton.className = 'option-button green';
-                vegButton.onclick = () => {
-                    addMessage('user', 'Vegetarian');
-                    conversation.push({ role: 'user', message: 'Vegetarian' });
-                    handleResponse('vegetarian');
-                };
-                selectionBox.appendChild(vegButton);
-
-                const nonVegButton = document.createElement('button');
-                nonVegButton.textContent = 'Non-Veg';
-                nonVegButton.className = 'option-button red';
-                nonVegButton.onclick = () => {
-                    addMessage('user', 'Non-Vegetarian');
-                    conversation.push({ role: 'user', message: 'Non-Vegetarian' });
-                    handleResponse('non-vegetarian');
-                };
-                selectionBox.appendChild(nonVegButton);
-
-                chatMessages.appendChild(selectionBox);
-            } else if (nameInputVisible && selectedPreference) {
-                const selectionBox = document.createElement('div');
-                selectionBox.className = 'selection-box';
-
-                const nameInput = document.createElement('input');
-                nameInput.type = 'text';
-                nameInput.placeholder = 'Enter dish name...';
-                nameInput.className = 'name-input';
-                nameInput.addEventListener('keypress', (e) => {
-                    if (e.key === 'Enter' && nameInput.value.trim()) {
-                        const itemName = nameInput.value.trim();
-                        addMessage('user', itemName);
-                        conversation.push({ role: 'user', message: itemName });
-                        handleResponse(itemName);
-                        nameInput.value = '';
+        }
+
+        function fetchCustomizationIngredients(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 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}`);
                 });
-                selectionBox.appendChild(nameInput);
-
-                // Cart Items
-                if (cart.length > 0) {
-                    const itemsLabel = document.createElement('span');
-                    itemsLabel.textContent = 'Selected Items:';
-                    selectionBox.appendChild(itemsLabel);
-
-                    cart.forEach((item, index) => {
-                        const itemContainer = document.createElement('div');
-                        itemContainer.className = 'selected-item';
-
-                        const img = document.createElement('img');
-                        img.src = item.image_url || 'https://via.placeholder.com/30';
-                        img.alt = item.name;
-                        img.className = 'selected-item-image';
-                        itemContainer.appendChild(img);
-
-                        const contentDiv = document.createElement('div');
-                        contentDiv.className = 'selected-item-content';
-
-                        const itemSpan = document.createElement('span');
-                        itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
-                        contentDiv.appendChild(itemSpan);
-
-                        // Ingredient Buttons
-                        const ingredientButtonsDiv = document.createElement('div');
-                        ingredientButtonsDiv.style.display = 'flex';
-                        ingredientButtonsDiv.style.flexWrap = 'wrap';
-                        ingredientButtonsDiv.style.gap = '5px';
-                        ingredients.forEach(ingredient => {
-                            const ingredientButton = document.createElement('button');
-                            ingredientButton.textContent = ingredient.name;
-                            ingredientButton.className = 'ingredient-button';
-                            ingredientButton.onclick = () => {
-                                addMessage('bot', `Finding dishes with "${ingredient.name}"...`);
-                                fetchRelatedMenuItems(ingredient.name);
-                            };
-                            ingredientButtonsDiv.appendChild(ingredientButton);
-                        });
-                        contentDiv.appendChild(ingredientButtonsDiv);
-
-                        // Ingredientsinfo Input
-                        const ingredientInfoInput = document.createElement('input');
-                        ingredientInfoInput.type = 'text';
-                        ingredientInfoInput.placeholder = 'Add ingredient details...';
-                        ingredientInfoInput.className = 'ingredient-info-input';
-                        ingredientInfoInput.value = item.ingredientsInfo || '';
-                        ingredientInfoInput.addEventListener('input', (e) => {
-                            cart[index].ingredientsInfo = e.target.value;
-                        });
-                        contentDiv.appendChild(ingredientInfoInput);
-
-                        itemContainer.appendChild(contentDiv);
-
-                        const removeButton = document.createElement('button');
-                        removeButton.textContent = 'X';
-                        removeButton.className = 'remove-button';
-                        removeButton.onclick = () => {
-                            cart.splice(index, 1);
-                            addMessage('bot', `Removed "${item.name}".`);
-                            updateSelectionBox();
-                        };
-                        itemContainer.appendChild(removeButton);
-
-                        selectionBox.appendChild(itemContainer);
-                    });
-
-                    // Submit Order
-                    const submitLabel = document.createElement('span');
-                    submitLabel.textContent = 'Submit Order:';
-                    selectionBox.appendChild(submitLabel);
-
-                    const quantityInput = document.createElement('input');
-                    quantityInput.type = 'number';
-                    quantityInput.min = '1';
-                    quantityInput.value = '1';
-                    quantityInput.placeholder = 'Qty';
-                    quantityInput.className = 'quantity-input';
-                    selectionBox.appendChild(quantityInput);
-
-                    const orderNameInput = document.createElement('input');
-                    orderNameInput.type = 'text';
-                    orderNameInput.placeholder = 'Order Name';
-                    orderNameInput.className = 'order-name-input';
-                    selectionBox.appendChild(orderNameInput);
-
-                    const ingredientsInfoInput = document.createElement('input');
-                    ingredientsInfoInput.type = 'text';
-                    ingredientsInfoInput.placeholder = 'Order Ingredients Info...';
-                    ingredientsInfoInput.className = 'ingredients-info-input';
-                    ingredientsInfoInput.id = 'orderIngredientsInfo';
-                    selectionBox.appendChild(ingredientsInfoInput);
-
-                    const submitButton = document.createElement('button');
-                    submitButton.textContent = 'Submit';
-                    submitButton.className = 'submit-button';
-                    submitButton.onclick = () => promptAndSubmit(
-                        quantityInput.value,
-                        orderNameInput.value,
-                        ingredientsInfoInput.value
-                    );
-                    selectionBox.appendChild(submitButton);
-                }
-
-                chatMessages.appendChild(selectionBox);
-            }
-
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-            console.log('Updated selection box:', cart.map(item => ({
-                name: item.name,
-                ingredientsInfo: item.ingredientsInfo
-            })));
         }
 
-        function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
-            const payload = { source: 'Menu_Item__c' };
-            if (dietaryPreference) payload.dietary_preference = dietaryPreference;
+        function fetchMenuItems(dietaryPreference, searchTerm = '') {
+            const payload = { dietary_preference: dietaryPreference };
             if (searchTerm) payload.search_term = searchTerm;
             fetch('/get_menu_items', {
                 method: 'POST',
@@ -739,37 +583,17 @@
                 .then(response => response.json())
                 .then(data => {
                     if (data.error) {
-                        addMessage('bot', `Error: ${data.error}. Try again!`);
+                        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"!`);
                     }
-                    console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
                 })
                 .catch(error => {
-                    addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
-                    setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
+                    addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
                 });
-
-            // Fetch ingredients
-            if (!ingredients.length) {
-                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) {
-                            ingredients = data.ingredients;
-                            console.log('Fetched Sector_Detail__c ingredients:', ingredients);
-                            updateSelectionBox();
-                        }
-                    })
-                    .catch(error => console.error('Error fetching ingredients:', error));
-            }
         }
 
         function fetchRelatedMenuItems(ingredientName) {
@@ -788,114 +612,307 @@
                     } else {
                         addMessage('bot', `No dishes found with "${ingredientName}". Try another!`);
                     }
-                    console.log(`Fetched related items for ${ingredientName}:`, data.menu_items);
                 })
                 .catch(error => {
-                    addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
-                    setTimeout(() => fetchRelatedMenuItems(ingredientName), 2000);
+                    addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
                 });
         }
 
-        function displayMenuItems(items) {
+        function displayIngredientsList(ingredients) {
             const chatMessages = document.getElementById('chatMessages');
             if (!chatMessages) {
-                console.error('Chat messages container not found!');
-                addMessage('bot', 'Display issue. Try again?');
+                console.error('Chat messages container not found for ingredients!');
                 return;
             }
 
-            const itemsGrid = document.createElement('div');
-            itemsGrid.className = 'items-grid';
-
-            items.forEach(item => {
-                const itemDiv = document.createElement('div');
-                itemDiv.className = 'item-card';
+            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 = item.image_url || 'https://via.placeholder.com/60';
-                img.alt = item.name;
-                img.className = 'item-image';
-                itemDiv.appendChild(img);
-
-                const contentDiv = document.createElement('div');
-                contentDiv.className = 'item-content';
+                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 = 'Select';
+                button.onclick = () => {
+                    addMessage('bot', `Finding dishes with "${ingredient.name}"...`);
+                    fetchRelatedMenuItems(ingredient.name);
+                };
+                item.appendChild(img);
+                item.appendChild(name);
+                item.appendChild(button);
+                ingredientsList.appendChild(item);
+            });
+        }
 
-                const nameDiv = document.createElement('div');
-                nameDiv.textContent = item.name;
-                nameDiv.className = 'item-name';
-                contentDiv.appendChild(nameDiv);
+        function displayCustomizationIngredients(ingredients) {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) {
+                console.error('Chat messages container not found for customization ingredients!');
+                return;
+            }
 
-                const fields = [
-                    { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
-                    { label: 'Veg/Non-Veg', value: item.veg_nonveg || item.category },
-                    { label: 'Description', value: item.description },
-                ];
-                fields.forEach(field => {
-                    if (field.value) {
-                        const p = document.createElement('p');
-                        p.className = 'item-field';
-                        p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
-                        contentDiv.appendChild(p);
-                    }
-                });
+            let ingredientsList = document.querySelector('.customization-ingredients-list');
+            if (!ingredientsList) {
+                ingredientsList = document.createElement('div');
+                ingredientsList.className = 'customization-ingredients-list';
+                chatMessages.appendChild(ingredientsList);
+            } else {
+                ingredientsList.innerHTML = '';
+            }
 
-                itemDiv.appendChild(contentDiv);
-
-                const buttonContainer = document.createElement('div');
-                buttonContainer.className = 'button-container';
-
-                const addButton = document.createElement('button');
-                addButton.textContent = 'Add';
-                addButton.className = 'add-button';
-                addButton.onclick = () => {
-                    const cartItem = {
-                        name: item.name,
-                        image_url: item.image_url || '',
-                        category: item.category || item.veg_nonveg || 'Not specified',
-                        description: item.description || 'No description available',
-                        source: item.source,
-                        quantity: 1,
-                        ingredientsInfo: ''
-                    };
-                    if (cart.some(existing => existing.name === cartItem.name && !existing.ingredientsInfo)) {
-                        addMessage('bot', `"${cartItem.name}" already in cart!`);
-                    } else {
-                        cart.push(cartItem);
-                        addMessage('bot', `Added "${cartItem.name}" to cart!`);
-                        updateSelectionBox();
+            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);
+                        displaySelectedIngredientsForCustomization();
                     }
                 };
-                buttonContainer.appendChild(addButton);
+                item.appendChild(img);
+                item.appendChild(name);
+                item.appendChild(button);
+                ingredientsList.appendChild(item);
+            });
+        }
 
-                itemDiv.appendChild(buttonContainer);
-                itemsGrid.appendChild(itemDiv);
+        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);
             });
+        }
 
-            chatMessages.appendChild(itemsGrid);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
+        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 promptAndSubmit(quantity, orderName, ingredientsInfo) {
-            if (confirm(`Submit ${cart.length} items (Qty: ${quantity}) as "${orderName || 'Order'}"?`)) {
-                submitToSalesforce(orderName, quantity, ingredientsInfo);
+        function displayCustomizationInput() {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) {
+                console.error('Chat messages container not found for customization input!');
+                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();
+                    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 = [];
+                    updateCartDisplay();
+                };
+                customizationArea.appendChild(textarea);
+                customizationArea.appendChild(submitButton);
+                chatMessages.appendChild(customizationArea);
+            }
+        }
+
+        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);
+            console.log('Cart:', cart);
+            updateCartDisplay();
+        }
+
+        function updateCartDisplay() {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) return;
+
+            let cartArea = document.querySelector('.cart-items');
+            if (!cartArea) {
+                cartArea = document.createElement('div');
+                cartArea.className = 'cart-items';
+                chatMessages.appendChild(cartArea);
             } else {
-                addMessage('bot', 'Cancelled. Add more items?');
+                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;
+                    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 removeButton = document.createElement('button');
+                    removeButton.textContent = 'X';
+                    removeButton.className = 'remove-button';
+                    removeButton.onclick = () => {
+                        cart.splice(index, 1);
+                        addMessage('bot', `Removed "${item.name}" from cart.`);
+                        updateCartDisplay();
+                    };
+                    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);
+                }
             }
+
+            chatMessages.scrollTop = chatMessages.scrollHeight;
         }
 
-        function submitToSalesforce(customOrderName, quantity, ingredientsInfo) {
+        function submitCart(customOrderName, quantity) {
             if (cart.length === 0) {
                 addMessage('bot', 'No items in cart! Add some dishes! 😊');
                 return;
             }
 
-            const itemsToSubmit = cart.map(item => ({
+            if (confirm(`Submit ${cart.length} items (Qty: ${quantity}) as-        const itemsToSubmit = cart.map(item => ({
                 name: item.name,
-                category: item.category || 'Not specified',
-                description: item.description || 'No description available',
-                image_url: item.image_url || '',
+                category: item.category,
+                description: item.description,
+                image_url: item.image_url,
                 quantity: parseInt(quantity) || 1,
-                ingredientsInfo: item.ingredientsInfo || ''
+                instructions: item.instructions,
+                ingredients: item.ingredients,
+                ingredientsInfo: item.ingredientsInfo
             }));
 
             fetch('/submit_ingredients', {
@@ -904,7 +921,7 @@
                 body: JSON.stringify({
                     items: itemsToSubmit,
                     custom_order_name: customOrderName,
-                    ingredients_info: ingredientsInfo
+                    ingredients_info: ''
                 })
             })
                 .then(response => response.json())
@@ -914,22 +931,55 @@
                     } else {
                         addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`);
                         cart = [];
-                        updateSelectionBox();
+                        selectedIngredients = [];
+                        selectedMenuItem = null;
+                        updateCartDisplay();
                     }
                 })
                 .catch(error => {
                     addMessage('bot', `Submission error: ${error.message}. Retrying...`);
-                    setTimeout(() => submitToSalesforce(customOrderName, quantity, ingredientsInfo), 2000);
+                    setTimeout(() => submitCart(customOrderName, quantity), 2000);
                 });
         }
 
-        document.getElementById('userInput').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') sendMessage();
+        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();
+            }
         });
 
-        // Initial setup
-        updateSelectionBox();
-        console.log('Chef Bot script loaded!');
+        console.log('Script loaded successfully');
     </script>
 </body>
 </html>