Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chef Bot</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f0f2f5; | |
| overflow-x: hidden; | |
| } | |
| .chat-container { | |
| width: 100%; | |
| max-width: 100%; | |
| height: 100vh; | |
| border: 1px solid #ccc; | |
| border-radius: 0; | |
| background-color: white; | |
| display: flex; | |
| flex-direction: column; | |
| box-sizing: border-box; | |
| } | |
| .chat-header { | |
| background-color: #0288d1; | |
| color: white; | |
| padding: 8px; | |
| text-align: center; | |
| font-size: 16px; | |
| flex-shrink: 0; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 5px; | |
| box-sizing: border-box; | |
| scroll-behavior: smooth; | |
| } | |
| .bot-message { | |
| background-color: #e3f2fd; | |
| padding: 8px; | |
| margin: 5px 0; | |
| border-radius: 5px; | |
| max-width: 85%; | |
| word-wrap: break-word; | |
| font-size: 12px; | |
| } | |
| .user-message { | |
| background-color: #ffebee; | |
| padding: 8px; | |
| margin: 5px 0; | |
| border-radius: 5px; | |
| max-width: 85%; | |
| margin-left: auto; | |
| text-align: right; | |
| word-wrap: break-word; | |
| font-size: 12px; | |
| } | |
| .chat-input { | |
| display: flex; | |
| padding: 5px; | |
| border-top: 1px solid #ccc; | |
| flex-shrink: 0; | |
| position: fixed; | |
| bottom: 0; | |
| width: 100%; | |
| background-color: white; | |
| box-sizing: border-box; | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| padding: 6px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| min-height: 35px; | |
| box-sizing: border-box; | |
| } | |
| .chat-input button { | |
| padding: 6px 10px; | |
| margin-left: 5px; | |
| background-color: #ff8f00; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| min-height: 35px; | |
| min-width: 60px; | |
| } | |
| .chat-input button:active { | |
| background-color: #f57c00; | |
| } | |
| .items-grid { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| padding: 8px; | |
| margin: 5px 0; | |
| background-color: #f9f9f9; | |
| border-radius: 5px; | |
| gap: 8px; | |
| scroll-behavior: smooth; | |
| } | |
| .item-card { | |
| flex: 0 0 150px; | |
| background-color: white; | |
| border: 1px solid #ddd; | |
| border-radius: 6px; | |
| padding: 8px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .item-card:active { | |
| transform: scale(0.98); | |
| } | |
| .item-image { | |
| width: 100%; | |
| height: 100px; | |
| object-fit: cover; | |
| border-radius: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .item-content { | |
| width: 100%; | |
| } | |
| .item-name { | |
| font-size: 12px; | |
| font-weight: bold; | |
| color: #333; | |
| margin-bottom: 3px; | |
| } | |
| .item-field { | |
| font-size: 10px; | |
| margin: 2px 0; | |
| color: #555; | |
| } | |
| .item-field strong { | |
| color: #0288d1; | |
| } | |
| .item-description { | |
| font-size: 10px; | |
| margin: 5px 0; | |
| color: #555; | |
| } | |
| .button-container { | |
| display: flex; | |
| gap: 5px; | |
| margin-top: 5px; | |
| } | |
| .show-button { | |
| padding: 4px; | |
| background-color: #0288d1; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 10px; | |
| flex: 1; | |
| min-width: 40px; | |
| } | |
| .show-button:active { | |
| background-color: #0277bd; | |
| } | |
| .add-button { | |
| padding: 4px; | |
| background-color: #4caf50; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 10px; | |
| flex: 1; | |
| min-width: 40px; | |
| } | |
| .add-button:active { | |
| background-color: #45a049; | |
| } | |
| .options-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| margin: 5px 0; | |
| } | |
| .option-button { | |
| padding: 6px 10px; | |
| margin: 3px; | |
| background-color: #7b1fa2; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| min-width: 60px; | |
| } | |
| .option-button.green { background-color: #4caf50; } | |
| .option-button.red { background-color: #d32f2f; } | |
| .option-button.gray { background-color: #616161; } | |
| .option-button:active { opacity: 0.9; } | |
| .selection-box { | |
| background-color: #e1f5fe; | |
| padding: 8px; | |
| border: 1px solid #0288d1; | |
| border-radius: 5px; | |
| margin: 5px 0; | |
| font-size: 12px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .selection-box span { | |
| background-color: #bbdefb; | |
| padding: 3px 8px; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| } | |
| .selected-item { | |
| display: flex; | |
| align-items: center; | |
| background-color: #bbdefb; | |
| padding: 3px 8px; | |
| border-radius: 5px; | |
| font-size: 11px; | |
| } | |
| .selected-item-image { | |
| width: 25px; | |
| height: 25px; | |
| object-fit: cover; | |
| border-radius: 5px; | |
| margin-right: 5px; | |
| } | |
| .submit-button { | |
| padding: 6px 10px; | |
| background-color: #0288d1; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| min-width: 60px; | |
| } | |
| .submit-button:active { | |
| background-color: #0277bd; | |
| } | |
| .remove-button { | |
| padding: 3px 6px; | |
| margin-left: 5px; | |
| background-color: #d32f2f; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 10px; | |
| } | |
| .remove-button:active { | |
| background-color: #b71c1c; | |
| } | |
| .manual-input, .custom-input, .submit-input { | |
| padding: 4px; | |
| border: 1px solid #0288d1; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| width: 100px; | |
| } | |
| .quantity-input { | |
| padding: 4px; | |
| border: 1px solid #0288d1; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| width: 50px; | |
| } | |
| .order-name-input { | |
| padding: 4px; | |
| border: 1px solid #0288d1; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| 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; | |
| } | |
| .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> | |
| <body> | |
| <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> | |
| <div class="chat-input"> | |
| <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! Choose a preference or type a dish below!' } | |
| ]; | |
| let selectedItems = []; | |
| let selectionBoxVisible = false; | |
| function addMessage(role, message) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found!'); | |
| return; | |
| } | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message'; | |
| messageDiv.textContent = message; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| console.log(`Added ${role} message: ${message}`); | |
| } | |
| function sendMessage() { | |
| const userInput = document.getElementById('userInput'); | |
| if (!userInput) { | |
| console.error('User input field not found!'); | |
| return; | |
| } | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addMessage('user', message); | |
| conversation.push({ role: 'user', message: message }); | |
| selectionBoxVisible = true; | |
| handleResponse(message); | |
| } else { | |
| addMessage('bot', 'Please type a dish or preference! 😄'); | |
| } | |
| 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); | |
| } else { | |
| botResponse = `Looking for "${userInput}"...`; | |
| addMessage('bot', botResponse); | |
| fetchMenuItems(null, userInput); | |
| } | |
| } | |
| function updateSelectionBox() { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) return; | |
| const existingBox = document.querySelector('.selection-box'); | |
| if (existingBox) existingBox.remove(); | |
| 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); | |
| 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); | |
| 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); | |
| } | |
| }); | |
| 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.scrollTop = chatMessages.scrollHeight; | |
| 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('/get_menu_items', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(payload) | |
| }) | |
| .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} item${data.menu_items.length > 1 ? 's' : ''} ---`); | |
| displayItemsList(data.menu_items); | |
| } else { | |
| addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`); | |
| } | |
| console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items); | |
| }) | |
| .catch(error => { | |
| addMessage('bot', `Connection issue: ${error.message}. Retrying...`); | |
| setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000); | |
| }); | |
| } | |
| 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.`); | |
| } | |
| } | |
| }) | |
| .catch(error => { | |
| addMessage('bot', `Connection issue: ${error.message}. Retrying...`); | |
| setTimeout(() => fetchSectorItems(dietaryPreference), 2000); | |
| }); | |
| } | |
| 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 displayItemsList(items) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found!'); | |
| addMessage('bot', 'Display issue. Try again?'); | |
| return; | |
| } | |
| const itemsGrid = document.createElement('div'); | |
| itemsGrid.className = 'items-grid'; | |
| items.forEach(item => { | |
| const itemDiv = document.createElement('div'); | |
| itemDiv.className = 'item-card'; | |
| const img = document.createElement('img'); | |
| img.src = item.image_url || 'https://via.placeholder.com/60'; | |
| img.alt = item.name; | |
| img.className = 'item-image'; | |
| itemDiv.appendChild(img); | |
| const contentDiv = document.createElement('div'); | |
| contentDiv.className = 'item-content'; | |
| const nameDiv = document.createElement('div'); | |
| nameDiv.textContent = item.name; | |
| nameDiv.className = 'item-name'; | |
| contentDiv.appendChild(nameDiv); | |
| const fields = [ | |
| { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' }, | |
| { label: 'Veg/Non-Veg', value: item.veg_nonveg || item.category }, | |
| { label: 'Description', value: item.description }, | |
| ]; | |
| fields.forEach(field => { | |
| if (field.value) { | |
| const p = document.createElement('p'); | |
| p.className = 'item-field'; | |
| p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`; | |
| contentDiv.appendChild(p); | |
| } | |
| }); | |
| itemDiv.appendChild(contentDiv); | |
| const buttonContainer = document.createElement('div'); | |
| buttonContainer.className = 'button-container'; | |
| const addButton = document.createElement('button'); | |
| addButton.textContent = 'Add'; | |
| addButton.className = 'add-button'; | |
| addButton.onclick = () => { | |
| const selectedItem = { | |
| name: item.name, | |
| image_url: item.image_url || '', | |
| category: item.category || item.veg_nonveg || 'Not specified', | |
| description: item.description || 'No description available', | |
| source: item.source, | |
| quantity: 1, | |
| additionalIngredients: [] | |
| }; | |
| if (selectedItems.some(existing => existing.name === selectedItem.name && !existing.additionalIngredients)) { | |
| addMessage('bot', `"${selectedItem.name}" already selected!`); | |
| } else { | |
| selectedItems.push(selectedItem); | |
| addMessage('bot', `Added "${selectedItem.name}"!`); | |
| updateSelectionBox(); | |
| } | |
| }; | |
| buttonContainer.appendChild(addButton); | |
| itemDiv.appendChild(buttonContainer); | |
| itemsGrid.appendChild(itemDiv); | |
| }); | |
| chatMessages.appendChild(itemsGrid); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| 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?'); | |
| } | |
| } | |
| 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(', ')}` | |
| : item.name, | |
| category: item.category || 'Not specified', | |
| description: item.description || 'No description available', | |
| image_url: item.image_url || '', | |
| quantity: parseInt(quantity) || 1, | |
| additionalIngredients: item.additionalIngredients || [] | |
| })); | |
| fetch('/submit_items', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ items: itemsToSubmit, custom_order_name: customOrderName }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.error) { | |
| addMessage('bot', `Submission failed: ${data.error}. Try again?`); | |
| } else { | |
| addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`); | |
| selectedItems = []; | |
| updateSelectionBox(); | |
| } | |
| }) | |
| .catch(error => { | |
| addMessage('bot', `Submission error: ${error.message}. Retrying...`); | |
| setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000); | |
| }); | |
| } | |
| document.getElementById('userInput').addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| // Initial display of Veg/Non-Veg buttons | |
| updateSelectionBox(); | |
| console.log('Chef Bot script loaded!'); | |
| </script> | |
| </body> | |
| </html> |