Update templates/chef-bot.html

templates/chef-bot.html

@@ -225,7 +225,7 @@
         .option-button.gray { background-color: #616161; }
         .option-button:active { opacity: 0.9; }
 
-        .selection-box {
+        .selection-box, .submission-box {
             background-color: #e1f5fe;
             padding: 8px;
             border: 1px solid #0288d1;
@@ -238,7 +238,7 @@
             gap: 5px;
         }
 
-        .selection-box span {
+        .selection-box span, .submission-box span {
             background-color: #bbdefb;
             padding: 3px 8px;
             border-radius: 5px;
@@ -262,7 +262,7 @@
             margin-right: 5px;
         }
 
-        .submit-button {
+        .submit-button, .both-button {
             padding: 6px 10px;
             background-color: #0288d1;
             color: white;
@@ -273,7 +273,7 @@
             min-width: 60px;
         }
 
-        .submit-button:active {
+        .submit-button:active, .both-button:active {
             background-color: #0277bd;
         }
 
@@ -292,7 +292,7 @@
             background-color: #b71c1c;
         }
 
-        .manual-input {
+        .manual-input, .ingredient-input {
             padding: 4px;
             border: 1px solid #0288d1;
             border-radius: 5px;
@@ -300,15 +300,6 @@
             width: 100px;
         }
 
-        .ingredient-input {
-            padding: 4px;
-            border: 1px solid #0288d1;
-            border-radius: 5px;
-            font-size: 12px;
-            width: 100px;
-            margin-left: 5px;
-        }
-
         .quantity-input {
             padding: 4px;
             border: 1px solid #0288d1;
@@ -326,173 +317,50 @@
         }
 
         @media (max-width: 480px) {
-            .chat-header {
-                font-size: 14px;
-                padding: 6px;
-            }
-            .chat-messages {
-                padding: 3px;
-            }
-            .bot-message, .user-message {
-                font-size: 11px;
-                padding: 6px;
-                margin: 3px 0;
-            }
-            .chat-input input {
-                font-size: 11px;
-                min-height: 30px;
-                padding: 5px;
-            }
-            .chat-input button {
-                font-size: 11px;
-                min-height: 30px;
-                padding: 5px 8px;
-                min-width: 50px;
-            }
-            .items-grid {
-                flex-direction: column;
-                overflow-x: hidden;
-                gap: 6px;
-                padding: 6px;
-            }
-            .item-card {
-                width: 100%;
-                flex: 0 0 auto;
-                max-width: 120px;
-            }
-            .item-image {
-                height: 80px;
-            }
-            .item-name {
-                font-size: 10px;
-            }
-            .item-field, .item-description {
-                font-size: 9px;
-            }
-            .show-button, .add-button {
-                font-size: 9px;
-                padding: 3px;
-                min-width: 35px;
-            }
-            .options-container {
-                gap: 3px;
-            }
-            .option-button {
-                font-size: 11px;
-                padding: 5px 8px;
-                min-width: 50px;
-            }
-            .selection-box {
-                padding: 6px;
-                gap: 3px;
-            }
-            .selection-box span {
-                font-size: 11px;
-                padding: 2px 6px;
-            }
-            .selected-item {
-                font-size: 10px;
-                padding: 2px 6px;
-            }
-            .selected-item-image {
-                width: 20px;
-                height: 20px;
-            }
-            .submit-button {
-                font-size: 11px;
-                padding: 5px 8px;
-                min-width: 50px;
-            }
-            .remove-button {
-                font-size: 9px;
-                padding: 2px 5px;
-            }
-            .manual-input, .order-name-input, .ingredient-input {
-                width: 80px;
-                font-size: 11px;
-                padding: 3px;
-            }
-            .quantity-input {
-                width: 40px;
-                font-size: 11px;
-                padding: 3px;
-            }
+            .chat-header { font-size: 14px; padding: 6px; }
+            .chat-messages { padding: 3px; }
+            .bot-message, .user-message { font-size: 11px; padding: 6px; margin: 3px 0; }
+            .chat-input input { font-size: 11px; min-height: 30px; padding: 5px; }
+            .chat-input button { font-size: 11px; min-height: 30px; padding: 5px 8px; min-width: 50px; }
+            .items-grid { flex-direction: column; overflow-x: hidden; gap: 6px; padding: 6px; }
+            .item-card { width: 100%; flex: 0 0 auto; max-width: 120px; }
+            .item-image { height: 80px; }
+            .item-name { font-size: 10px; }
+            .item-field, .item-description { font-size: 9px; }
+            .show-button, .add-button { font-size: 9px; padding: 3px; min-width: 35px; }
+            .options-container { gap: 3px; }
+            .option-button { font-size: 11px; padding: 5px 8px; min-width: 50px; }
+            .selection-box, .submission-box { padding: 6px; gap: 3px; }
+            .selection-box span, .submission-box span { font-size: 11px; padding: 2px 6px; }
+            .selected-item { font-size: 10px; padding: 2px 6px; }
+            .selected-item-image { width: 20px; height: 20px; }
+            .submit-button, .both-button { font-size: 11px; padding: 5px 8px; min-width: 50px; }
+            .remove-button { font-size: 9px; padding: 2px 5px; }
+            .manual-input, .order-name-input, .ingredient-input { width: 80px; font-size: 11px; padding: 3px; }
+            .quantity-input { width: 40px; font-size: 11px; padding: 3px; }
         }
 
         @media (min-width: 481px) and (max-width: 768px) {
-            .chat-header {
-                font-size: 15px;
-            }
-            .chat-messages {
-                padding: 4px;
-            }
-            .bot-message, .user-message {
-                font-size: 12px;
-                padding: 7px;
-            }
-            .chat-input input {
-                font-size: 12px;
-                min-height: 35px;
-            }
-            .chat-input button {
-                font-size: 12px;
-                min-height: 35px;
-                padding: 6px 10px;
-            }
-            .items-grid {
-                gap: 8px;
-            }
-            .item-card {
-                flex: 0 0 140px;
-            }
-            .item-image {
-                height: 90px;
-            }
-            .item-name {
-                font-size: 11px;
-            }
-            .item-field, .item-description {
-                font-size: 10px;
-            }
-            .show-button, .add-button {
-                font-size: 10px;
-                padding: 4px;
-                min-width: 40px;
-            }
-            .option-button {
-                font-size: 12px;
-                padding: 6px 10px;
-            }
-            .selection-box {
-                padding: 8px;
-                gap: 5px;
-            }
-            .selection-box span {
-                font-size: 12px;
-            }
-            .selected-item {
-                font-size: 11px;
-            }
-            .selected-item-image {
-                width: 25px;
-                height: 25px;
-            }
-            .submit-button {
-                font-size: 12px;
-                padding: 6px 10px;
-            }
-            .remove-button {
-                font-size: 10px;
-                padding: 3px 6px;
-            }
-            .manual-input, .order-name-input, .ingredient-input {
-                width: 100px;
-                font-size: 12px;
-            }
-            .quantity-input {
-                width: 50px;
-                font-size: 12px;
-            }
+            .chat-header { font-size: 15px; }
+            .chat-messages { padding: 4px; }
+            .bot-message, .user-message { font-size: 12px; padding: 7px; }
+            .chat-input input { font-size: 12px; min-height: 35px; }
+            .chat-input button { font-size: 12px; min-height: 35px; padding: 6px 10px; }
+            .items-grid { gap: 8px; }
+            .item-card { flex: 0 0 140px; }
+            .item-image { height: 90px; }
+            .item-name { font-size: 11px; }
+            .item-field, .item-description { font-size: 10px; }
+            .show-button, .add-button { font-size: 10px; padding: 4px; min-width: 40px; }
+            .option-button { font-size: 12px; padding: 6px 10px; }
+            .selection-box, .submission-box { padding: 8px; gap: 5px; }
+            .selection-box span, .submission-box span { font-size: 12px; }
+            .selected-item { font-size: 11px; }
+            .selected-item-image { width: 25px; height: 25px; }
+            .submit-button, .both-button { font-size: 12px; padding: 6px 10px; }
+            .remove-button { font-size: 10px; padding: 3px 6px; }
+            .manual-input, .order-name-input, .ingredient-input { width: 100px; font-size: 12px; }
+            .quantity-input { width: 50px; font-size: 12px; }
         }
     </style>
 </head>
@@ -513,8 +381,8 @@
             { role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' }
         ];
         let selectedItems = [];
+        let submittedItems = [];
         let selectionBoxVisible = false;
-        let currentDietaryPreference = '';
 
         function addMessage(role, message) {
             const chatMessages = document.getElementById('chatMessages');
@@ -547,6 +415,7 @@
             }
             userInput.value = '';
             updateSelectionBox();
+            updateSubmissionBox();
         }
 
         function handleResponse(userInput) {
@@ -554,7 +423,7 @@
             let botResponse = '';
 
             if (conversation.length === 2) {
-                botResponse = `Hi ${userInput}! 🍳 Please choose a dietary preference: Vegetarian, Non-Vegetarian, or Both.`;
+                botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
                 displayOptions([
                     { text: 'Vegetarian', class: 'green' },
                     { text: 'Non-Vegetarian', class: 'red' },
@@ -562,14 +431,13 @@
                 ]);
                 addMessage('bot', botResponse);
             } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
-                currentDietaryPreference = lowerInput;
-                botResponse = `Fetching ${lowerInput} dishes...`;
+                botResponse = `Fetching ${lowerInput} items from Sector_Detail__c...`;
                 addMessage('bot', botResponse);
                 fetchMenuItems(lowerInput);
             } else {
-                botResponse = `Looking for "${userInput}"...`;
+                botResponse = `Looking for "${userInput}" in Menu_Item__c...`;
                 addMessage('bot', botResponse);
-                fetchMenuItems(currentDietaryPreference, userInput);
+                fetchMenuItems(null, userInput);
             }
         }
 
@@ -585,151 +453,7 @@
             const selectionBox = document.createElement('div');
             selectionBox.className = 'selection-box';
 
-            const vegButton = document.createElement('button');
-            vegButton.textContent = 'Veg';
-            vegButton.className = 'dietary-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 = 'dietary-button red';
-            nonVegButton.onclick = () => {
-                addMessage('user', 'Non-Vegetarian');
-                conversation.push({ role: 'user', message: 'Non-Vegetarian' });
-                handleResponse('non-vegetarian');
-            };
-            selectionBox.appendChild(nonVegButton);
-
-            const bothButton = document.createElement('button');
-            bothButton.textContent = 'Both';
-            bothButton.className = 'dietary-button gray';
-            bothButton.onclick = () => {
-                addMessage('user', 'Both');
-                conversation.push({ role: 'user', message: 'Both' });
-                handleResponse('both');
-            };
-            selectionBox.appendChild(bothButton);
-
-            const label = document.createElement('span');
-            label.textContent = 'Selected:';
-            selectionBox.appendChild(label);
-
-            selectedItems.forEach((item, index) => {
-                const itemContainer = document.createElement('div');
-                itemContainer.className = 'selected-item';
-                itemContainer.dataset.hidden = item.source === 'Sector_Detail__c' ? 'true' : 'false';
-
-                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 itemName = item.additionalIngredients && item.additionalIngredients.length > 0
-                    ? `${item.name} with ${item.additionalIngredients.join(', ')}`
-                    : item.name;
-                const itemSpan = document.createElement('span');
-                itemSpan.textContent = `${itemName} (Qty: ${item.quantity || 1})`;
-                contentDiv.appendChild(itemSpan);
-
-                if (item.source === 'Sector_Detail__c') {
-                    const showButton = document.createElement('button');
-                    showButton.textContent = 'Show';
-                    showButton.className = 'show-button';
-                    showButton.onclick = () => toggleDescription(itemContainer, item.description, itemName);
-                    contentDiv.appendChild(showButton);
-                }
-
-                const ingredientInput = document.createElement('input');
-                ingredientInput.type = 'text';
-                ingredientInput.placeholder = 'Add ingredient...';
-                ingredientInput.className = 'ingredient-input';
-                ingredientInput.addEventListener('keypress', (e) => {
-                    if (e.key === 'Enter' && ingredientInput.value.trim()) {
-                        const ingredientName = ingredientInput.value.trim();
-                        fetchSectorItemDetails(ingredientName, index);
-                        ingredientInput.value = '';
-                    }
-                });
-                contentDiv.appendChild(ingredientInput);
-
-                itemContainer.appendChild(contentDiv);
-
-                const removeButton = document.createElement('button');
-                removeButton.textContent = 'X';
-                removeButton.className = 'remove-button';
-                removeButton.onclick = () => {
-                    selectedItems.splice(index, 1);
-                    addMessage('bot', `Removed "${itemName}".`);
-                    updateSelectionBox();
-                };
-                itemContainer.appendChild(removeButton);
-
-                selectionBox.appendChild(itemContainer);
-
-                if (item.additionalIngredients && item.additionalIngredients.length > 0) {
-                    const originalContainer = document.createElement('div');
-                    originalContainer.className = 'selected-item';
-                    originalContainer.dataset.hidden = item.source === 'Sector_Detail__c' ? 'true' : 'false';
-
-                    const originalImg = document.createElement('img');
-                    originalImg.src = item.image_url || 'https://via.placeholder.com/30';
-                    originalImg.alt = item.name;
-                    originalImg.className = 'selected-item-image';
-                    originalContainer.appendChild(originalImg);
-
-                    const originalContentDiv = document.createElement('div');
-                    originalContentDiv.className = 'selected-item-content';
-
-                    const originalSpan = document.createElement('span');
-                    originalSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
-                    originalContentDiv.appendChild(originalSpan);
-
-                    if (item.source === 'Sector_Detail__c') {
-                        const originalShowButton = document.createElement('button');
-                        originalShowButton.textContent = 'Show';
-                        originalShowButton.className = 'show-button';
-                        originalShowButton.onclick = () => toggleDescription(originalContainer, item.description, item.name);
-                        originalContentDiv.appendChild(originalShowButton);
-                    }
-
-                    const originalIngredientInput = document.createElement('input');
-                    originalIngredientInput.type = 'text';
-                    originalIngredientInput.placeholder = 'Add ingredient...';
-                    originalIngredientInput.className = 'ingredient-input';
-                    originalIngredientInput.addEventListener('keypress', (e) => {
-                        if (e.key === 'Enter' && originalIngredientInput.value.trim()) {
-                            const ingredientName = originalIngredientInput.value.trim();
-                            fetchSectorItemDetails(ingredientName, index);
-                            originalIngredientInput.value = '';
-                        }
-                    });
-                    originalContentDiv.appendChild(originalIngredientInput);
-
-                    originalContainer.appendChild(originalContentDiv);
-
-                    const originalRemoveButton = document.createElement('button');
-                    originalRemoveButton.textContent = 'X';
-                    originalRemoveButton.className = 'remove-button';
-                    originalRemoveButton.onclick = () => {
-                        selectedItems.splice(index, 1);
-                        addMessage('bot', `Removed "${item.name}".`);
-                        updateSelectionBox();
-                    };
-                    originalContainer.appendChild(originalRemoveButton);
-
-                    selectionBox.appendChild(originalContainer);
-                }
-            });
-
+            // First Box: Input for adding items
             const textInput = document.createElement('input');
             textInput.type = 'text';
             textInput.placeholder = 'Add item...';
@@ -739,13 +463,78 @@
                     const itemName = textInput.value.trim();
                     addMessage('user', itemName);
                     conversation.push({ role: 'user', message: itemName });
-                    fetchSectorItemDetails(itemName);
+                    handleResponse(itemName);
                     textInput.value = '';
                 }
             });
             selectionBox.appendChild(textInput);
 
+            // Second Box: Selected items and customization
             if (selectedItems.length > 0) {
+                const label = document.createElement('span');
+                label.textContent = 'Selected:';
+                selectionBox.appendChild(label);
+
+                selectedItems.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 itemName = item.additionalIngredients && item.additionalIngredients.length > 0
+                        ? `${item.name} with ${item.additionalIngredients.join(', ')}`
+                        : item.name;
+                    const itemSpan = document.createElement('span');
+                    itemSpan.textContent = `${itemName} (Qty: ${item.quantity || 1})`;
+                    contentDiv.appendChild(itemSpan);
+
+                    const ingredientInput = document.createElement('input');
+                    ingredientInput.type = 'text';
+                    ingredientInput.placeholder = 'Add ingredient...';
+                    ingredientInput.className = 'ingredient-input';
+                    ingredientInput.addEventListener('keypress', (e) => {
+                        if (e.key === 'Enter' && ingredientInput.value.trim()) {
+                            const ingredientName = ingredientInput.value.trim();
+                            fetchSectorItemDetails(ingredientName, index);
+                            ingredientInput.value = '';
+                        }
+                    });
+                    contentDiv.appendChild(ingredientInput);
+
+                    itemContainer.appendChild(contentDiv);
+
+                    const removeButton = document.createElement('button');
+                    removeButton.textContent = 'X';
+                    removeButton.className = 'remove-button';
+                    removeButton.onclick = () => {
+                        selectedItems.splice(index, 1);
+                        addMessage('bot', `Removed "${itemName}".`);
+                        updateSelectionBox();
+                    };
+                    itemContainer.appendChild(removeButton);
+
+                    selectionBox.appendChild(itemContainer);
+                });
+
+                const bothButton = document.createElement('button');
+                bothButton.textContent = 'Both';
+                bothButton.className = 'both-button';
+                bothButton.onclick = () => fetchBothItems();
+                selectionBox.appendChild(bothButton);
+
+                const submitButton = document.createElement('button');
+                submitButton.textContent = 'Submit';
+                submitButton.className = 'submit-button';
+                submitButton.onclick = () => promptAndSubmit();
+                selectionBox.appendChild(submitButton);
+
                 const quantityInput = document.createElement('input');
                 quantityInput.type = 'number';
                 quantityInput.min = '1';
@@ -754,12 +543,6 @@
                 quantityInput.className = 'quantity-input';
                 selectionBox.appendChild(quantityInput);
 
-                const submitButton = document.createElement('button');
-                submitButton.textContent = 'Submit';
-                submitButton.className = 'submit-button';
-                submitButton.onclick = () => promptAndSubmit(quantityInput.value);
-                selectionBox.appendChild(submitButton);
-
                 const orderNameInput = document.createElement('input');
                 orderNameInput.type = 'text';
                 orderNameInput.placeholder = 'Order Name';
@@ -772,11 +555,61 @@
             console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, additionalIngredients: item.additionalIngredients })));
         }
 
+        function updateSubmissionBox() {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) return;
+
+            const existingBox = document.querySelector('.submission-box');
+            if (existingBox) existingBox.remove();
+
+            if (submittedItems.length === 0) return;
+
+            const submissionBox = document.createElement('div');
+            submissionBox.className = 'submission-box';
+
+            const label = document.createElement('span');
+            label.textContent = 'Submitted Items:';
+            submissionBox.appendChild(label);
+
+            submittedItems.forEach(item => {
+                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 itemName = item.additionalIngredients && item.additionalIngredients.length > 0
+                    ? `${item.name} with ${item.additionalIngredients.join(', ')}`
+                    : item.name;
+                const itemSpan = document.createElement('span');
+                itemSpan.textContent = `${itemName} (Qty: ${item.quantity || 1})`;
+                contentDiv.appendChild(itemSpan);
+
+                const descElement = document.createElement('p');
+                descElement.className = 'item-description';
+                descElement.textContent = item.description || 'No description available';
+                contentDiv.appendChild(descElement);
+
+                itemContainer.appendChild(contentDiv);
+                submissionBox.appendChild(itemContainer);
+            });
+
+            chatMessages.appendChild(submissionBox);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            console.log('Updated submission box:', submittedItems.map(item => ({ name: item.name, additionalIngredients: item.additionalIngredients })));
+        }
+
         function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
             const payload = {};
             if (dietaryPreference) payload.dietary_preference = dietaryPreference;
             if (searchTerm) payload.search_term = searchTerm;
-            fetch('/get_menu_items', {
+            fetch(dietaryPreference ? '/get_menu_items' : '/search_menu_items', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload)
@@ -799,6 +632,30 @@
                 });
         }
 
+        function fetchBothItems() {
+            fetch('/get_both_items', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({})
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.error) {
+                        addMessage('bot', `Error: ${data.error}. Try again!`);
+                    } else if (data.menu_items.length > 0) {
+                        addMessage('bot', `--- Found ${data.menu_items.length} 'Both' items from Sector_Detail__c ---`);
+                        displayItemsList(data.menu_items);
+                    } else {
+                        addMessage('bot', `No 'Both' items found in Sector_Detail__c.`);
+                    }
+                    console.log('Fetched Both items:', data.menu_items);
+                })
+                .catch(error => {
+                    addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
+                    setTimeout(fetchBothItems, 2000);
+                });
+        }
+
         function fetchSectorItemDetails(itemName, itemIndex = null) {
             fetch('/get_sector_item_details', {
                 method: 'POST',
@@ -811,15 +668,6 @@
                         addMessage('bot', `No "${itemName}" found in Sector_Detail__c. Try another!`);
                     } else {
                         const details = data.item_details;
-                        // Validate dietary preference
-                        if (currentDietaryPreference === 'vegetarian' && details.category !== 'Veg') {
-                            addMessage('bot', `"${details.name}" is not vegetarian. Please choose a vegetarian item.`);
-                            return;
-                        }
-                        if (currentDietaryPreference === 'non-vegetarian' && details.category !== 'Non-Veg') {
-                            addMessage('bot', `"${details.name}" is not non-vegetarian. Please choose a non-vegetarian item.`);
-                            return;
-                        }
                         if (itemIndex !== null) {
                             if (!selectedItems[itemIndex].additionalIngredients) {
                                 selectedItems[itemIndex].additionalIngredients = [];
@@ -848,22 +696,6 @@
                 });
         }
 
-        function toggleDescription(itemContainer, description, itemName) {
-            let descElement = itemContainer.querySelector('.item-description');
-            if (!descElement) {
-                descElement = document.createElement('p');
-                descElement.className = 'item-description';
-                descElement.textContent = description;
-                itemContainer.querySelector('.selected-item-content').appendChild(descElement);
-                itemContainer.dataset.hidden = 'false';
-                console.log(`Showed description for ${itemName}`);
-            } else {
-                descElement.remove();
-                itemContainer.dataset.hidden = 'true';
-                console.log(`Hid description for ${itemName}`);
-            }
-        }
-
         function displayItemsList(items) {
             const chatMessages = document.getElementById('chatMessages');
             if (!chatMessages) {
@@ -872,25 +704,10 @@
                 return;
             }
 
-            // Filter items based on dietary preference
-            const filteredItems = items.filter(item => {
-                if (currentDietaryPreference === 'vegetarian') {
-                    return item.veg_nonveg === 'Vegetarian' || item.category === 'Veg';
-                } else if (currentDietaryPreference === 'non-vegetarian') {
-                    return item.veg_nonveg === 'Non-Vegetarian' || item.category === 'Non-Veg';
-                }
-                return true;
-            });
-
-            if (filteredItems.length === 0) {
-                addMessage('bot', `No ${currentDietaryPreference} items found. Try another search!`);
-                return;
-            }
-
             const itemsGrid = document.createElement('div');
             itemsGrid.className = 'items-grid';
 
-            filteredItems.forEach(item => {
+            items.forEach(item => {
                 const itemDiv = document.createElement('div');
                 itemDiv.className = 'item-card';
 
@@ -993,18 +810,20 @@
                 optionsDiv.appendChild(button);
             });
 
-            const backButton = document.createElement('button');
-            backButton.textContent = 'Back';
-            backButton.className = 'option-button';
-            backButton.onclick = () => resetConversation();
-            optionsDiv.appendChild(backButton);
-
             chatMessages.appendChild(optionsDiv);
         }
 
-        function promptAndSubmit(quantity) {
+        function promptAndSubmit() {
             const orderNameInput = document.querySelector('.order-name-input');
+            const quantityInput = document.querySelector('.quantity-input');
             const customOrderName = orderNameInput ? orderNameInput.value.trim() : '';
+            const quantity = quantityInput ? parseInt(quantityInput.value) || 1 : 1;
+
+            if (selectedItems.length === 0) {
+                addMessage('bot', 'No items selected! Add some dishes! 😊');
+                return;
+            }
+
             if (confirm(`Submit ${selectedItems.length} items (Qty: ${quantity})?`)) {
                 submitToSalesforce(customOrderName, quantity);
             } else {
@@ -1013,11 +832,6 @@
         }
 
         function submitToSalesforce(customOrderName, quantity) {
-            if (selectedItems.length === 0) {
-                addMessage('bot', 'No items selected! Add some dishes! 😊');
-                return;
-            }
-
             const itemsToSubmit = selectedItems.map(item => ({
                 name: item.additionalIngredients && item.additionalIngredients.length > 0
                     ? `${item.name} with ${item.additionalIngredients.join(', ')}`
@@ -1025,7 +839,7 @@
                 category: item.category || 'Not specified',
                 description: item.description || 'No description available',
                 image_url: item.image_url || '',
-                quantity: parseInt(quantity) || 1,
+                quantity: quantity,
                 additionalIngredients: item.additionalIngredients || []
             }));
 
@@ -1040,8 +854,10 @@
                         addMessage('bot', `Submission failed: ${data.error}. Try again?`);
                     } else {
                         addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`);
+                        submittedItems = [...itemsToSubmit];
                         selectedItems = [];
                         updateSelectionBox();
+                        updateSubmissionBox();
                     }
                 })
                 .catch(error => {
@@ -1050,27 +866,6 @@
                 });
         }
 
-        function resetConversation() {
-            const userName = conversation.length > 1 ? conversation[1].message : 'Friend';
-            conversation = [
-                { role: 'bot', message: `Hello! I’m Chef Bot, your culinary assistant! What’s your name?` },
-                { role: 'user', message: userName },
-                { role: 'bot', message: `Hi ${userName}! 🍳 Please choose a dietary preference: Vegetarian, Non-Vegetarian, or Both.` }
-            ];
-            selectedItems = [];
-            currentDietaryPreference = '';
-            selectionBoxVisible = true;
-            const chatMessages = document.getElementById('chatMessages');
-            chatMessages.innerHTML = '';
-            conversation.forEach(msg => addMessage(msg.role, msg.message));
-            displayOptions([
-                { text: 'Vegetarian', class: 'green' },
-                { text: 'Non-Vegetarian', class: 'red' },
-                { text: 'Both', class: 'gray' }
-            ]);
-            updateSelectionBox();
-        }
-
         document.getElementById('userInput').addEventListener('keypress', (e) => {
             if (e.key === 'Enter') sendMessage();
         });