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, .submission-box {
+        .selection-box {
             background-color: #e1f5fe;
             padding: 8px;
             border: 1px solid #0288d1;
@@ -238,7 +238,7 @@
             gap: 5px;
         }
 
-        .selection-box span, .submission-box span {
+        .selection-box span {
             background-color: #bbdefb;
             padding: 3px 8px;
             border-radius: 5px;
@@ -262,7 +262,7 @@
             margin-right: 5px;
         }
 
-        .submit-button, .both-button {
+        .submit-button {
             padding: 6px 10px;
             background-color: #0288d1;
             color: white;
@@ -273,7 +273,7 @@
             min-width: 60px;
         }
 
-        .submit-button:active, .both-button:active {
+        .submit-button:active {
             background-color: #0277bd;
         }
 
@@ -292,7 +292,7 @@
             background-color: #b71c1c;
         }
 
-        .manual-input, .ingredient-input {
+        .manual-input, .custom-input, .submit-input {
             padding: 4px;
             border: 1px solid #0288d1;
             border-radius: 5px;
@@ -316,51 +316,101 @@
             width: 100px;
         }
 
+        .sector-buttons {
+            display: flex;
+            gap: 5px;
+            margin: 5px 0;
+        }
+
         @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, .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, .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; }
+            .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;
+            }
+            .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, .custom-input, .submit-input, .order-name-input {
+                width: 80px;
+                font-size: 11px;
+                padding: 3px;
+            }
+            .quantity-input {
+                width: 40px;
+                font-size: 11px;
+                padding: 3px;
+            }
         }
     </style>
 </head>
@@ -368,20 +418,19 @@
     <div class="chat-container">
         <div class="chat-header">🍳 Chef Bot</div>
         <div class="chat-messages" id="chatMessages">
-            <div class="bot-message">Hello! I’m Chef Bot, your culinary assistant! What’s your name?</div>
+            <div class="bot-message">Hello! I’m Chef Bot! Choose a preference or type a dish below!</div>
         </div>
         <div class="chat-input">
-            <input type="text" id="userInput" placeholder="Type here (e.g., paneer, chicken)...">
+            <input type="text" id="userInput" placeholder="Type dish or preference...">
             <button onclick="sendMessage()">Send</button>
         </div>
     </div>
 
     <script>
         let conversation = [
-            { role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' }
+            { role: 'bot', message: 'Hello! I’m Chef Bot! Choose a preference or type a dish below!' }
         ];
         let selectedItems = [];
-        let submittedItems = [];
         let selectionBoxVisible = false;
 
         function addMessage(role, message) {
@@ -415,27 +464,18 @@
             }
             userInput.value = '';
             updateSelectionBox();
-            updateSubmissionBox();
         }
 
         function handleResponse(userInput) {
             const lowerInput = userInput.toLowerCase();
             let botResponse = '';
 
-            if (conversation.length === 2) {
-                botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
-                displayOptions([
-                    { text: 'Vegetarian', class: 'green' },
-                    { text: 'Non-Vegetarian', class: 'red' },
-                    { text: 'Both', class: 'gray' }
-                ]);
-                addMessage('bot', botResponse);
-            } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
-                botResponse = `Fetching ${lowerInput} items from Sector_Detail__c...`;
+            if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian') {
+                botResponse = `Fetching ${lowerInput} dishes...`;
                 addMessage('bot', botResponse);
                 fetchMenuItems(lowerInput);
             } else {
-                botResponse = `Looking for "${userInput}" in Menu_Item__c...`;
+                botResponse = `Looking for "${userInput}"...`;
                 addMessage('bot', botResponse);
                 fetchMenuItems(null, userInput);
             }
@@ -448,32 +488,63 @@
             const existingBox = document.querySelector('.selection-box');
             if (existingBox) existingBox.remove();
 
-            if (!selectionBoxVisible && selectedItems.length === 0) return;
-
-            const selectionBox = document.createElement('div');
-            selectionBox.className = 'selection-box';
-
-            // First Box: Input for adding items
-            const textInput = document.createElement('input');
-            textInput.type = 'text';
-            textInput.placeholder = 'Add item...';
-            textInput.className = 'manual-input';
-            textInput.addEventListener('keypress', (e) => {
-                if (e.key === 'Enter' && textInput.value.trim()) {
-                    const itemName = textInput.value.trim();
-                    addMessage('user', itemName);
-                    conversation.push({ role: 'user', message: itemName });
-                    handleResponse(itemName);
-                    textInput.value = '';
-                }
-            });
-            selectionBox.appendChild(textInput);
+            const existingCustomBox = document.querySelector('.custom-box');
+            if (existingCustomBox) existingCustomBox.remove();
+
+            const existingSubmitBox = document.querySelector('.submit-box');
+            if (existingSubmitBox) existingSubmitBox.remove();
+
+            // First Selection Box (Name Input)
+            if (selectionBoxVisible) {
+                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);
+
+                const nameInput = document.createElement('input');
+                nameInput.type = 'text';
+                nameInput.placeholder = 'Enter dish name...';
+                nameInput.className = 'manual-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 = '';
+                    }
+                });
+                selectionBox.appendChild(nameInput);
 
-            // Second Box: Selected items and customization
+                chatMessages.appendChild(selectionBox);
+            }
+
+            // Second Custom Box (Menu Items and Custom Requests)
             if (selectedItems.length > 0) {
+                const customBox = document.createElement('div');
+                customBox.className = 'selection-box custom-box';
+
                 const label = document.createElement('span');
-                label.textContent = 'Selected:';
-                selectionBox.appendChild(label);
+                label.textContent = 'Selected Items:';
+                customBox.appendChild(label);
 
                 selectedItems.forEach((item, index) => {
                     const itemContainer = document.createElement('div');
@@ -495,18 +566,18 @@
                     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();
+                    const customInput = document.createElement('input');
+                    customInput.type = 'text';
+                    customInput.placeholder = 'Add ingredient...';
+                    customInput.className = 'custom-input';
+                    customInput.addEventListener('keypress', (e) => {
+                        if (e.key === 'Enter' && customInput.value.trim()) {
+                            const ingredientName = customInput.value.trim();
                             fetchSectorItemDetails(ingredientName, index);
-                            ingredientInput.value = '';
+                            customInput.value = '';
                         }
                     });
-                    contentDiv.appendChild(ingredientInput);
+                    contentDiv.appendChild(customInput);
 
                     itemContainer.appendChild(contentDiv);
 
@@ -520,20 +591,69 @@
                     };
                     itemContainer.appendChild(removeButton);
 
-                    selectionBox.appendChild(itemContainer);
+                    customBox.appendChild(itemContainer);
+
+                    // Display original item if customized
+                    if (item.additionalIngredients && item.additionalIngredients.length > 0) {
+                        const originalContainer = document.createElement('div');
+                        originalContainer.className = 'selected-item';
+
+                        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);
+
+                        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);
+
+                        customBox.appendChild(originalContainer);
+                    }
                 });
 
-                const bothButton = document.createElement('button');
-                bothButton.textContent = 'Both';
-                bothButton.className = 'both-button';
-                bothButton.onclick = () => fetchBothItems();
-                selectionBox.appendChild(bothButton);
+                chatMessages.appendChild(customBox);
 
-                const submitButton = document.createElement('button');
-                submitButton.textContent = 'Submit';
-                submitButton.className = 'submit-button';
-                submitButton.onclick = () => promptAndSubmit();
-                selectionBox.appendChild(submitButton);
+                // Sector_Detail__c Buttons
+                const sectorButtons = document.createElement('div');
+                sectorButtons.className = 'sector-buttons';
+
+                const vegItemsButton = document.createElement('button');
+                vegItemsButton.textContent = 'Veg Items';
+                vegItemsButton.className = 'option-button green';
+                vegItemsButton.onclick = () => fetchSectorItems('vegetarian');
+                sectorButtons.appendChild(vegItemsButton);
+
+                const nonVegItemsButton = document.createElement('button');
+                nonVegItemsButton.textContent = 'Non-Veg Items';
+                nonVegItemsButton.className = 'option-button red';
+                nonVegItemsButton.onclick = () => fetchSectorItems('non-vegetarian');
+                sectorButtons.appendChild(nonVegItemsButton);
+
+                chatMessages.appendChild(sectorButtons);
+
+                // Third Submit Box
+                const submitBox = document.createElement('div');
+                submitBox.className = 'selection-box submit-box';
+
+                const submitLabel = document.createElement('span');
+                submitLabel.textContent = 'Submit Order:';
+                submitBox.appendChild(submitLabel);
 
                 const quantityInput = document.createElement('input');
                 quantityInput.type = 'number';
@@ -541,75 +661,32 @@
                 quantityInput.value = '1';
                 quantityInput.placeholder = 'Qty';
                 quantityInput.className = 'quantity-input';
-                selectionBox.appendChild(quantityInput);
+                submitBox.appendChild(quantityInput);
 
                 const orderNameInput = document.createElement('input');
                 orderNameInput.type = 'text';
                 orderNameInput.placeholder = 'Order Name';
                 orderNameInput.className = 'order-name-input';
-                selectionBox.appendChild(orderNameInput);
-            }
-
-            chatMessages.appendChild(selectionBox);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-            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);
+                submitBox.appendChild(orderNameInput);
 
-                const contentDiv = document.createElement('div');
-                contentDiv.className = 'selected-item-content';
+                const submitButton = document.createElement('button');
+                submitButton.textContent = 'Submit';
+                submitButton.className = 'submit-button';
+                submitButton.onclick = () => promptAndSubmit(quantityInput.value, orderNameInput.value);
+                submitBox.appendChild(submitButton);
 
-                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(submitBox);
+            }
 
-            chatMessages.appendChild(submissionBox);
             chatMessages.scrollTop = chatMessages.scrollHeight;
-            console.log('Updated submission box:', submittedItems.map(item => ({ name: item.name, additionalIngredients: item.additionalIngredients })));
+            console.log('Updated selection boxes:', selectedItems.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(dietaryPreference ? '/get_menu_items' : '/search_menu_items', {
+            fetch('/get_menu_items', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload)
@@ -632,27 +709,29 @@
                 });
         }
 
-        function fetchBothItems() {
-            fetch('/get_both_items', {
+        function fetchSectorItems(dietaryPreference) {
+            fetch('/get_menu_items', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({})
+                body: JSON.stringify({ dietary_preference })
             })
                 .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.`);
+                        const sectorItems = data.menu_items.filter(item => item.source === 'Sector_Detail__c');
+                        if (sectorItems.length > 0) {
+                            addMessage('bot', `--- Found ${sectorItems.length} ${dietaryPreference} items from Sector_Detail__c ---`);
+                            displayItemsList(sectorItems);
+                        } else {
+                            addMessage('bot', `No ${dietaryPreference} 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);
+                    setTimeout(() => fetchSectorItems(dietaryPreference), 2000);
                 });
         }
 
@@ -669,6 +748,7 @@
                     } else {
                         const details = data.item_details;
                         if (itemIndex !== null) {
+                            // Adding as an additional ingredient
                             if (!selectedItems[itemIndex].additionalIngredients) {
                                 selectedItems[itemIndex].additionalIngredients = [];
                             }
@@ -680,6 +760,7 @@
                                 addMessage('bot', `"${details.name}" already added to "${selectedItems[itemIndex].name}"!`);
                             }
                         } else {
+                            // Adding as a new item
                             if (selectedItems.some(item => item.name === details.name && !item.additionalIngredients)) {
                                 addMessage('bot', `"${details.name}" already selected!`);
                             } else {
@@ -727,13 +808,8 @@
 
                 const fields = [
                     { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
-                    { label: 'Veg/Non-Veg', value: item.veg_nonveg },
-                    { label: 'Spice', value: item.spice_levels },
-                    { label: 'Category', value: item.category },
-                    { label: 'Ingredients', value: item.ingredients },
-                    { label: 'Nutrition', value: item.nutritional_info },
-                    { label: 'Sector', value: item.sector },
-                    { label: 'Dynamic', value: item.dynamic_dish ? 'Yes' : 'No' }
+                    { label: 'Veg/Non-Veg', value: item.veg_nonveg || item.category },
+                    { label: 'Description', value: item.description },
                 ];
                 fields.forEach(field => {
                     if (field.value) {
@@ -756,17 +832,10 @@
                     const selectedItem = {
                         name: item.name,
                         image_url: item.image_url || '',
-                        category: item.category || 'Not specified',
+                        category: item.category || item.veg_nonveg || 'Not specified',
                         description: item.description || 'No description available',
                         source: item.source,
                         quantity: 1,
-                        ingredients: item.ingredients,
-                        nutritional_info: item.nutritional_info,
-                        price: item.price,
-                        sector: item.sector,
-                        spice_levels: item.spice_levels,
-                        veg_nonveg: item.veg_nonveg,
-                        dynamic_dish: item.dynamic_dish,
                         additionalIngredients: []
                     };
                     if (selectedItems.some(existing => existing.name === selectedItem.name && !existing.additionalIngredients)) {
@@ -787,51 +856,20 @@
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
 
-        function displayOptions(options) {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found!');
-                return;
+        function promptAndSubmit(quantity, orderName) {
+            if (confirm(`Submit ${selectedItems.length} items (Qty: ${quantity}) as "${orderName || 'Order'}"?`)) {
+                submitToSalesforce(orderName, quantity);
+            } else {
+                addMessage('bot', 'Cancelled. Add more items?');
             }
-            const optionsDiv = document.createElement('div');
-            optionsDiv.className = 'options-container';
-
-            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 });
-                    selectionBoxVisible = true;
-                    handleResponse(opt.text);
-                    updateSelectionBox();
-                };
-                optionsDiv.appendChild(button);
-            });
-
-            chatMessages.appendChild(optionsDiv);
         }
 
-        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;
-
+        function submitToSalesforce(customOrderName, quantity) {
             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 {
-                addMessage('bot', 'Cancelled. Add more items?');
-            }
-        }
-
-        function submitToSalesforce(customOrderName, quantity) {
             const itemsToSubmit = selectedItems.map(item => ({
                 name: item.additionalIngredients && item.additionalIngredients.length > 0
                     ? `${item.name} with ${item.additionalIngredients.join(', ')}`
@@ -839,7 +877,7 @@
                 category: item.category || 'Not specified',
                 description: item.description || 'No description available',
                 image_url: item.image_url || '',
-                quantity: quantity,
+                quantity: parseInt(quantity) || 1,
                 additionalIngredients: item.additionalIngredients || []
             }));
 
@@ -854,10 +892,8 @@
                         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 => {
@@ -870,6 +906,8 @@
             if (e.key === 'Enter') sendMessage();
         });
 
+        // Initial display of Veg/Non-Veg buttons
+        updateSelectionBox();
         console.log('Chef Bot script loaded!');
     </script>
 </body>