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 { | |
| padding: 4px; | |
| border: 1px solid #0288d1; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| 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; | |
| 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; | |
| } | |
| @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; | |
| } | |
| } | |
| @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; | |
| } | |
| } | |
| </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, your culinary assistant! What’s your name?</div> | |
| </div> | |
| <div class="suggestions-list" id="suggestionsList"></div> | |
| <div class="ingredients-list" id="menuItemsList"></div> | |
| <div class="chat-input"> | |
| <input type="text" id="userInput" placeholder="Type here (e.g., paneer, chicken)..."> | |
| <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?' } | |
| ]; | |
| 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 (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} 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(); | |
| if (!selectionBoxVisible && selectedItems.length === 0) return; | |
| 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); | |
| } | |
| // Add ingredient input for customization | |
| 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); | |
| // Display original item if customized | |
| 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); | |
| } | |
| 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); | |
| } | |
| }); | |
| 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(); | |
| fetchSectorItemDetails(itemName); | |
| textInput.value = ''; | |
| } | |
| }); | |
| selectionBox.appendChild(textInput); | |
| if (selectedItems.length > 0) { | |
| 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 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'; | |
| 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 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 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. 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 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) { | |
| 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 }, | |
| { 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' } | |
| ]; | |
| 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 || '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)) { | |
| 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 displayOptions(options) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found!'); | |
| return; | |
| } | |
| 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); | |
| }); | |
| const backButton = document.createElement('button'); | |
| backButton.textContent = 'Back'; | |
| backButton.className = 'option-button'; | |
| backButton.onclick = () => resetConversation(); | |
| optionsDiv.appendChild(backButton); | |
| chatMessages.appendChild(optionsDiv); | |
| } | |
| function promptAndSubmit(quantity) { | |
| const orderNameInput = document.querySelector('.order-name-input'); | |
| const customOrderName = orderNameInput ? orderNameInput.value.trim() : ''; | |
| if (confirm(`Submit ${selectedItems.length} items (Qty: ${quantity})?`)) { | |
| submitToSalesforce(customOrderName, 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); | |
| }); | |
| } | |
| 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}! 🍳 Search for a dish or choose a preference below!` } | |
| ]; | |
| selectedItems = []; | |
| 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(); | |
| }); | |
| console.log('Chef Bot script loaded!'); | |
| </script> | |
| </body> | |
| </html> |