Update templates/chef-bot.html

templates/chef-bot.html

@@ -164,8 +164,10 @@
             margin-top: 8px;
         }
 
-        .show-button, .add-button {
+        .add-button {
             padding: 8px;
+            background-color: #28a745;
+            color: #ffffff;
             border: none;
             border-radius: 6px;
             cursor: pointer;
@@ -173,20 +175,6 @@
             flex: 1;
         }
 
-        .show-button {
-            background-color: #0078d4;
-            color: #ffffff;
-        }
-
-        .show-button:hover {
-            background-color: #005ea2;
-        }
-
-        .add-button {
-            background-color: #28a745;
-            color: #ffffff;
-        }
-
         .add-button:hover {
             background-color: #218838;
         }
@@ -200,7 +188,6 @@
 
         .option-button {
             padding: 10px 20px;
-            background-color: #6c757d;
             color: #ffffff;
             border: none;
             border-radius: 8px;
@@ -225,7 +212,7 @@
             background-color: #c82333;
         }
 
-        .selection-box, .custom-box, .submit-box {
+        .selection-box {
             background-color: #f1f8ff;
             padding: 15px;
             border: 1px solid #b3d7ff;
@@ -238,7 +225,7 @@
             gap: 10px;
         }
 
-        .selection-box span, .custom-box span, .submit-box span {
+        .selection-box span {
             background-color: #d6e9ff;
             padding: 5px 10px;
             border-radius: 6px;
@@ -252,6 +239,8 @@
             padding: 5px 10px;
             border-radius: 6px;
             font-size: 13px;
+            margin: 5px 0;
+            width: 100%;
         }
 
         .selected-item-image {
@@ -262,6 +251,15 @@
             margin-right: 8px;
         }
 
+        .ingredient-select {
+            padding: 8px;
+            border: 1px solid #b3d7ff;
+            border-radius: 6px;
+            font-size: 13px;
+            width: 150px;
+            outline: none;
+        }
+
         .submit-button {
             padding: 10px 20px;
             background-color: #0078d4;
@@ -292,7 +290,7 @@
             background-color: #c82333;
         }
 
-        .manual-input, .custom-input, .submit-input {
+        .name-input {
             padding: 8px;
             border: 1px solid #b3d7ff;
             border-radius: 6px;
@@ -319,12 +317,6 @@
             outline: none;
         }
 
-        .sector-buttons {
-            display: flex;
-            gap: 10px;
-            margin: 10px 0;
-        }
-
         /* Responsive Design */
         @media (max-width: 480px) {
             .chat-container {
@@ -381,7 +373,7 @@
                 font-size: 11px;
             }
 
-            .show-button, .add-button {
+            .add-button {
                 font-size: 11px;
                 padding: 6px;
             }
@@ -391,7 +383,7 @@
                 padding: 8px 15px;
             }
 
-            .selection-box, .custom-box, .submit-box {
+            .selection-box {
                 padding: 10px;
                 gap: 8px;
             }
@@ -406,7 +398,7 @@
                 height: 25px;
             }
 
-            .manual-input, .custom-input, .submit-input, .order-name-input {
+            .name-input, .order-name-input {
                 width: 120px;
                 font-size: 13px;
                 padding: 6px;
@@ -427,6 +419,11 @@
                 font-size: 11px;
                 padding: 4px 8px;
             }
+
+            .ingredient-select {
+                width: 120px;
+                font-size: 12px;
+            }
         }
 
         @media (min-width: 481px) and (max-width: 768px) {
@@ -443,25 +440,6 @@
                 padding: 12px;
             }
 
-            .bot-message, .user-message {
-                font-size: 14px;
-                padding: 9px 14px;
-            }
-
-            .chat-input input {
-                font-size: 14px;
-                padding: 9px;
-            }
-
-            .chat-input button {
-                font-size: 14px;
-                padding: 9px 18px;
-            }
-
-            .items-grid {
-                gap: 12px;
-            }
-
             .item-card {
                 flex: 0 0 180px;
             }
@@ -469,67 +447,6 @@
             .item-image {
                 height: 110px;
             }
-
-            .item-name {
-                font-size: 14px;
-            }
-
-            .item-field, .item-description {
-                font-size: 12px;
-            }
-
-            .show-button, .add-button {
-                font-size: 12px;
-                padding: 7px;
-            }
-
-            .option-button {
-                font-size: 14px;
-                padding: 9px 18px;
-            }
-
-            .selection-box, .custom-box, .submit-box {
-                padding: 12px;
-                gap: 9px;
-            }
-
-            .selected-item {
-                font-size: 13px;
-                padding: 5px 9px;
-            }
-
-            .selected-item-image {
-                width: 28px;
-                height: 28px;
-            }
-
-            .manual-input, .custom-input, .submit-input, .order-name-input {
-                width: 140px;
-                font-size: 14px;
-                padding: 7px;
-            }
-
-            .quantity-input {
-                width: 55px;
-                font-size: 14px;
-                padding: 7px;
-            }
-
-            .submit-button {
-                font-size: 14px;
-                padding: 9px 18px;
-            }
-
-            .remove-button {
-                font-size: 12px;
-                padding: 5px 9px;
-            }
-        }
-
-        @media (min-width: 769px) {
-            .chat-container {
-                max-width: 800px;
-            }
         }
     </style>
 </head>
@@ -537,20 +454,24 @@
     <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! Choose a preference or type a dish below!</div>
+            <div class="bot-message">Hello! What's your name?</div>
         </div>
         <div class="chat-input">
-            <input type="text" id="userInput" placeholder="Type dish or preference...">
+            <input type="text" id="userInput" placeholder="Type your name or dish...">
             <button onclick="sendMessage()">Send</button>
         </div>
     </div>
 
     <script>
         let conversation = [
-            { role: 'bot', message: 'Hello! I’m Chef Bot! Choose a preference or type a dish below!' }
+            { role: 'bot', message: "Hello! What's your name?" }
         ];
+        let userName = '';
+        let selectedPreference = '';
         let selectedItems = [];
         let selectionBoxVisible = false;
+        let nameInputVisible = false;
+        let sectorIngredients = [];
 
         function addMessage(role, message) {
             const chatMessages = document.getElementById('chatMessages');
@@ -576,27 +497,31 @@
             if (message) {
                 addMessage('user', message);
                 conversation.push({ role: 'user', message: message });
-                selectionBoxVisible = true;
                 handleResponse(message);
             } else {
-                addMessage('bot', 'Please type a dish or preference! 😄');
+                addMessage('bot', 'Please type something! 😄');
             }
             userInput.value = '';
             updateSelectionBox();
         }
 
         function handleResponse(userInput) {
-            const lowerInput = userInput.toLowerCase();
-            let botResponse = '';
-
-            if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian') {
-                botResponse = `Fetching ${lowerInput} dishes...`;
-                addMessage('bot', botResponse);
-                fetchMenuItems(lowerInput);
+            if (!userName) {
+                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);
             } else {
-                botResponse = `Looking for "${userInput}"...`;
-                addMessage('bot', botResponse);
-                fetchMenuItems(null, userInput);
+                addMessage('bot', 'Please select Veg or Non-Veg first!');
             }
         }
 
@@ -607,14 +532,28 @@
             const existingBox = document.querySelector('.selection-box');
             if (existingBox) existingBox.remove();
 
-            const existingCustomBox = document.querySelector('.custom-box');
-            if (existingCustomBox) existingCustomBox.remove();
+            // Selection Box
+            if (selectionBoxVisible && !userName) {
+                const selectionBox = document.createElement('div');
+                selectionBox.className = 'selection-box';
 
-            const existingSubmitBox = document.querySelector('.submit-box');
-            if (existingSubmitBox) existingSubmitBox.remove();
+                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 = '';
+                    }
+                });
+                selectionBox.appendChild(nameInput);
 
-            // First Selection Box (Name Input)
-            if (selectionBoxVisible) {
+                chatMessages.appendChild(selectionBox);
+            } else if (selectionBoxVisible && userName && !selectedPreference) {
                 const selectionBox = document.createElement('div');
                 selectionBox.className = 'selection-box';
 
@@ -638,10 +577,15 @@
                 };
                 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 = 'manual-input';
+                nameInput.className = 'name-input';
                 nameInput.addEventListener('keypress', (e) => {
                     if (e.key === 'Enter' && nameInput.value.trim()) {
                         const itemName = nameInput.value.trim();
@@ -653,156 +597,104 @@
                 });
                 selectionBox.appendChild(nameInput);
 
-                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 Items:';
-                customBox.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 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);
-                            customInput.value = '';
-                        }
-                    });
-                    contentDiv.appendChild(customInput);
-
-                    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);
-
-                    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);
+                // Selected Items
+                if (selectedItems.length > 0) {
+                    const itemsLabel = document.createElement('span');
+                    itemsLabel.textContent = 'Selected Items:';
+                    selectionBox.appendChild(itemsLabel);
+
+                    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);
+
+                        // Ingredient Selector
+                        const ingredientSelect = document.createElement('select');
+                        ingredientSelect.className = 'ingredient-select';
+                        const defaultOption = document.createElement('option');
+                        defaultOption.value = '';
+                        defaultOption.textContent = 'Add ingredient...';
+                        ingredientSelect.appendChild(defaultOption);
+                        sectorIngredients.forEach(ingredient => {
+                            const option = document.createElement('option');
+                            option.value = ingredient.name;
+                            option.textContent = ingredient.name;
+                            ingredientSelect.appendChild(option);
+                        });
+                        ingredientSelect.addEventListener('change', (e) => {
+                            const ingredientName = e.target.value;
+                            if (ingredientName) {
+                                addIngredientToItem(ingredientName, index);
+                                e.target.value = '';
+                            }
+                        });
+                        contentDiv.appendChild(ingredientSelect);
 
-                        originalContainer.appendChild(originalContentDiv);
+                        itemContainer.appendChild(contentDiv);
 
-                        const originalRemoveButton = document.createElement('button');
-                        originalRemoveButton.textContent = 'X';
-                        originalRemoveButton.className = 'remove-button';
-                        originalRemoveButton.onclick = () => {
+                        const removeButton = document.createElement('button');
+                        removeButton.textContent = 'X';
+                        removeButton.className = 'remove-button';
+                        removeButton.onclick = () => {
                             selectedItems.splice(index, 1);
-                            addMessage('bot', `Removed "${item.name}".`);
+                            addMessage('bot', `Removed "${itemName}".`);
                             updateSelectionBox();
                         };
-                        originalContainer.appendChild(originalRemoveButton);
+                        itemContainer.appendChild(removeButton);
 
-                        customBox.appendChild(originalContainer);
-                    }
-                });
+                        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 submitButton = document.createElement('button');
+                    submitButton.textContent = 'Submit';
+                    submitButton.className = 'submit-button';
+                    submitButton.onclick = () => promptAndSubmit(quantityInput.value, orderNameInput.value);
+                    selectionBox.appendChild(submitButton);
+                }
 
-                chatMessages.appendChild(customBox);
-
-                // 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';
-                quantityInput.min = '1';
-                quantityInput.value = '1';
-                quantityInput.placeholder = 'Qty';
-                quantityInput.className = 'quantity-input';
-                submitBox.appendChild(quantityInput);
-
-                const orderNameInput = document.createElement('input');
-                orderNameInput.type = 'text';
-                orderNameInput.placeholder = 'Order Name';
-                orderNameInput.className = 'order-name-input';
-                submitBox.appendChild(orderNameInput);
-
-                const submitButton = document.createElement('button');
-                submitButton.textContent = 'Submit';
-                submitButton.className = 'submit-button';
-                submitButton.onclick = () => promptAndSubmit(quantityInput.value, orderNameInput.value);
-                submitBox.appendChild(submitButton);
-
-                chatMessages.appendChild(submitBox);
+                chatMessages.appendChild(selectionBox);
             }
 
             chatMessages.scrollTop = chatMessages.scrollHeight;
-            console.log('Updated selection boxes:', selectedItems.map(item => ({ name: item.name, additionalIngredients: item.additionalIngredients })));
+            console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, additionalIngredients: item.additionalIngredients })));
         }
 
         function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
-            const payload = {};
+            const payload = { source: 'Menu_Item__c' };
             if (dietaryPreference) payload.dietary_preference = dietaryPreference;
             if (searchTerm) payload.search_term = searchTerm;
             fetch('/get_menu_items', {
@@ -826,74 +718,37 @@
                     addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
                     setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
                 });
-        }
 
-        function fetchSectorItems(dietaryPreference) {
-            fetch('/get_menu_items', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ dietary_preference })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Error: ${data.error}. Try again!`);
-                    } else {
-                        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.`);
-                        }
-                    }
+            // Fetch Sector_Detail__c ingredients
+            if (!sectorIngredients.length) {
+                fetch('/get_sector_ingredients', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ dietary_preference: dietaryPreference })
                 })
-                .catch(error => {
-                    addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
-                    setTimeout(() => fetchSectorItems(dietaryPreference), 2000);
-                });
+                    .then(response => response.json())
+                    .then(data => {
+                        if (!data.error) {
+                            sectorIngredients = data.ingredients;
+                            console.log('Fetched Sector_Detail__c ingredients:', sectorIngredients);
+                        }
+                    })
+                    .catch(error => console.error('Error fetching Sector_Detail__c ingredients:', error));
+            }
         }
 
-        function fetchSectorItemDetails(itemName, itemIndex = null) {
-            fetch('/get_sector_item_details', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ item_name: itemName })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `No "${itemName}" found in Sector_Detail__c. Try another!`);
-                    } else {
-                        const details = data.item_details;
-                        if (itemIndex !== null) {
-                            // Adding as an additional ingredient
-                            if (!selectedItems[itemIndex].additionalIngredients) {
-                                selectedItems[itemIndex].additionalIngredients = [];
-                            }
-                            if (!selectedItems[itemIndex].additionalIngredients.includes(details.name)) {
-                                selectedItems[itemIndex].additionalIngredients.push(details.name);
-                                selectedItems[itemIndex].description += `, with ${details.name}`;
-                                addMessage('bot', `Added "${details.name}" to "${selectedItems[itemIndex].name}"!`);
-                            } else {
-                                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 {
-                                selectedItems.push({ ...details, quantity: 1, additionalIngredients: [] });
-                                addMessage('bot', `Added "${details.name}"!`);
-                            }
-                        }
-                        updateSelectionBox();
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error for "${itemName}". Retrying...`);
-                    setTimeout(() => fetchSectorItemDetails(itemName, itemIndex), 2000);
-                });
+        function addIngredientToItem(ingredientName, itemIndex) {
+            if (!selectedItems[itemIndex].additionalIngredients) {
+                selectedItems[itemIndex].additionalIngredients = [];
+            }
+            if (!selectedItems[itemIndex].additionalIngredients.includes(ingredientName)) {
+                selectedItems[itemIndex].additionalIngredients.push(ingredientName);
+                selectedItems[itemIndex].description += `, with ${ingredientName}`;
+                addMessage('bot', `Added "${ingredientName}" to "${selectedItems[itemIndex].name}"!`);
+            } else {
+                addMessage('bot', `"${ingredientName}" already added to "${selectedItems[itemIndex].name}"!`);
+            }
+            updateSelectionBox();
         }
 
         function displayItemsList(items) {
@@ -1025,7 +880,7 @@
             if (e.key === 'Enter') sendMessage();
         });
 
-        // Initial display of Veg/Non-Veg buttons
+        // Initial setup
         updateSelectionBox();
         console.log('Chef Bot script loaded!');
     </script>