let conversation = [ { role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' } ]; let selectedItems = []; 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 }); setTimeout(() => handleResponse(message), 500); } else { addMessage('bot', 'Hey, don’t be shy! Type something or add some items to get started! 😄'); } userInput.value = ''; // Clear input after sending } function updateSelectionBox() { const chatMessages = document.getElementById('chatMessages'); if (!chatMessages) return; // Remove existing selection box if it exists const existingBox = document.querySelector('.selection-box'); if (existingBox) existingBox.remove(); const selectionBox = document.createElement('div'); selectionBox.className = 'selection-box'; // Add dietary preference buttons const vegButton = document.createElement('button'); vegButton.textContent = 'Vegetarian'; vegButton.className = 'dietary-button green'; vegButton.onclick = () => fetchMenuItems('vegetarian'); selectionBox.appendChild(vegButton); const nonVegButton = document.createElement('button'); nonVegButton.textContent = 'Non-Vegetarian'; nonVegButton.className = 'dietary-button red'; nonVegButton.onclick = () => fetchMenuItems('non-vegetarian'); selectionBox.appendChild(nonVegButton); const bothButton = document.createElement('button'); bothButton.textContent = 'Both'; bothButton.className = 'dietary-button gray'; bothButton.onclick = () => fetchMenuItems('both'); selectionBox.appendChild(bothButton); // Add selected items label and list const label = document.createElement('span'); label.textContent = 'Selected Items:'; selectionBox.appendChild(label); selectedItems.forEach(item => { const itemSpan = document.createElement('span'); itemSpan.textContent = item.name; selectionBox.appendChild(itemSpan); }); // Add text input for manual item entry const textInput = document.createElement('input'); textInput.type = 'text'; textInput.placeholder = 'Add item manually...'; textInput.className = 'manual-input'; textInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && textInput.value.trim()) { const manualItem = { name: textInput.value.trim(), description: 'Manually added', ingredients: 'Not specified', image_url: '' }; selectedItems.push(manualItem); addMessage('bot', `Added "${manualItem.name}" to your selection! Check the box below.`); textInput.value = ''; updateSelectionBox(); } }); selectionBox.appendChild(textInput); // Add Submit button if there are selected items if (selectedItems.length > 0) { const submitButton = document.createElement('button'); submitButton.textContent = 'Submit to Salesforce'; submitButton.className = 'submit-button'; submitButton.onclick = submitToSalesforce; selectionBox.appendChild(submitButton); } chatMessages.appendChild(selectionBox); chatMessages.scrollTop = chatMessages.scrollHeight; console.log('Updated selection box with items:', selectedItems.map(item => item.name)); } function handleResponse(userInput) { const lowerInput = userInput.toLowerCase(); let botResponse = ''; if (conversation.length === 2) { botResponse = `Great to meet you, ${userInput}! 🍳 What kind of food are you craving today?`; displayOptions([ { text: 'Vegetarian', class: 'green' }, { text: 'Non-Vegetarian', class: 'red' }, { text: 'Both', class: 'gray' } ]); } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') { botResponse = `Nice choice! Let me whip up some ${lowerInput} options for you...`; addMessage('bot', botResponse); fetchMenuItems(lowerInput); return; } else { botResponse = `Hmm, let’s see what I can find for "${userInput}"...`; addMessage('bot', botResponse); suggestItems(userInput); return; } addMessage('bot', botResponse); } function fetchMenuItems(dietaryPreference) { fetch('/get_menu_items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ dietary_preference: dietaryPreference }) }) .then(response => response.json()) .then(data => { if (data.error) { addMessage('bot', `Oops! Trouble fetching ${dietaryPreference} items: ${data.error}. Want to try again or search something specific?`); } else if (data.menu_items.length > 0) { displayItemsList(data.menu_items, 'menuItemsList', true); // Pass true to indicate Sector_Detail__c items } else { addMessage('bot', `Looks like we’re out of ${dietaryPreference} items in Sector_Detail__c. Try searching for something like "paneer" or "chicken"!`); } console.log(`Fetched items from Sector_Detail__c for ${dietaryPreference}:`, data.menu_items); }) .catch(error => { addMessage('bot', `Yikes! Couldn’t reach Salesforce: ${error.message}. I’ll retry in a sec...`); setTimeout(() => fetchMenuItems(dietaryPreference), 2000); }); } function suggestItems(searchTerm) { fetch('/suggest_items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ search_term: searchTerm }) }) .then(response => response.json()) .then(data => { if (data.error) { addMessage('bot', `Couldn’t find anything for "${searchTerm}": ${data.error}. Got another idea?`); } else if (data.suggestions.length > 0) { addMessage('bot', `Check out these suggestions for "${searchTerm}" from Ingredient_Object__c:`); displayItemsList(data.suggestions, 'suggestionsList', false); // Pass false for Ingredient_Object__c items } else { addMessage('bot', `No luck with "${searchTerm}" in Ingredient_Object__c. How about "chicken" or "paneer"?`); } console.log(`Suggestions for ${searchTerm}:`, data.suggestions); }) .catch(error => { addMessage('bot', `Error fetching suggestions: ${error.message}. Retrying...`); setTimeout(() => suggestItems(searchTerm), 2000); }); } function fetchItemDetails(itemName) { fetch('/get_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', `Couldn’t find "${itemName}" in Salesforce. Add it manually in the box below!`); updateSelectionBox(); } else { const details = data.item_details; selectedItems.push(details); addMessage('bot', `Added "${itemName}" to your selection! Check the box below.`); updateSelectionBox(); console.log(`Details for ${itemName}:`, details); } }) .catch(error => { addMessage('bot', `Trouble fetching details for "${itemName}": ${error.message}. Add it manually below or I’ll retry...`); updateSelectionBox(); setTimeout(() => fetchItemDetails(itemName), 2000); }); } function displayItemsList(items, containerId, isSectorDetail = false) { const container = document.getElementById(containerId); if (!container) { console.error(`${containerId} container not found!`); addMessage('bot', 'Something’s off with the display. Try again?'); return; } container.innerHTML = ''; items.forEach(item => { const itemDiv = document.createElement('div'); itemDiv.className = containerId === 'menuItemsList' ? 'ingredient-item' : 'suggestion-item'; const img = document.createElement('img'); img.src = item.image_url || 'https://via.placeholder.com/60'; img.alt = item.name; const name = document.createElement('div'); name.textContent = item.name; name.style.textAlign = 'center'; name.style.marginTop = '5px'; name.style.fontSize = '12px'; const button = document.createElement('button'); button.textContent = 'Add'; button.onclick = () => { if (isSectorDetail) { // Directly use item data from Sector_Detail__c const sectorItem = { name: item.name, description: 'From Sector_Detail__c', ingredients: 'Not specified', image_url: item.image_url || '', category: item.category || 'Both' }; selectedItems.push(sectorItem); addMessage('bot', `Added "${item.name}" to your selection! Check the box below.`); updateSelectionBox(); } else { // Fetch details from Ingredient_Object__c for suggestions fetchItemDetails(item.name); } }; itemDiv.appendChild(img); itemDiv.appendChild(name); itemDiv.appendChild(button); container.appendChild(itemDiv); }); } function displayOptions(options) { const chatMessages = document.getElementById('chatMessages'); if (!chatMessages) { console.error('Chat messages container not found for options!'); return; } const optionsDiv = document.createElement('div'); optionsDiv.style.marginTop = '10px'; 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 }); handleResponse(opt.text); }; optionsDiv.appendChild(button); }); const backButton = document.createElement('button'); backButton.textContent = 'Go Back'; backButton.className = 'option-button'; backButton.style.marginTop = '10px'; backButton.onclick = () => resetConversation(); optionsDiv.appendChild(document.createElement('br')); optionsDiv.appendChild(backButton); chatMessages.appendChild(optionsDiv); } function submitToSalesforce() { if (selectedItems.length === 0) { addMessage('bot', 'No items to submit yet! Add some tasty picks first! 😊'); return; } fetch('/submit_items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: selectedItems }) }) .then(response => response.json()) .then(data => { if (data.error) { addMessage('bot', `Uh-oh! Failed to submit items: ${data.error}. Want to try again?`); } else { addMessage('bot', `${data.success}! Your culinary choices are now saved. What’s next on the menu?`); selectedItems = []; updateSelectionBox(); } }) .catch(error => { addMessage('bot', `Error submitting items: ${error.message}. I’ll retry shortly...`); setTimeout(submitToSalesforce, 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: `Great to meet you, ${userName}! 🍳 What kind of food are you craving today?` } ]; selectedItems = []; 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' } ]); document.getElementById('suggestionsList').innerHTML = ''; document.getElementById('menuItemsList').innerHTML = ''; updateSelectionBox(); } document.getElementById('userInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); }); console.log('Chef Bot script loaded successfully!');let conversation = [ { role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' } ]; let selectedItems = []; 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 }); setTimeout(() => handleResponse(message), 500); } else { addMessage('bot', 'Hey, don’t be shy! Type something or add some items to get started! 😄'); } userInput.value = ''; // Clear input after sending } function updateSelectionBox() { const chatMessages = document.getElementById('chatMessages'); if (!chatMessages) return; // Remove existing selection box if it exists const existingBox = document.querySelector('.selection-box'); if (existingBox) existingBox.remove(); const selectionBox = document.createElement('div'); selectionBox.className = 'selection-box'; // Add dietary preference buttons const vegButton = document.createElement('button'); vegButton.textContent = 'Vegetarian'; vegButton.className = 'dietary-button green'; vegButton.onclick = () => fetchMenuItems('vegetarian'); selectionBox.appendChild(vegButton); const nonVegButton = document.createElement('button'); nonVegButton.textContent = 'Non-Vegetarian'; nonVegButton.className = 'dietary-button red'; nonVegButton.onclick = () => fetchMenuItems('non-vegetarian'); selectionBox.appendChild(nonVegButton); const bothButton = document.createElement('button'); bothButton.textContent = 'Both'; bothButton.className = 'dietary-button gray'; bothButton.onclick = () => fetchMenuItems('both'); selectionBox.appendChild(bothButton); // Add selected items label and list const label = document.createElement('span'); label.textContent = 'Selected Items:'; selectionBox.appendChild(label); selectedItems.forEach(item => { const itemSpan = document.createElement('span'); itemSpan.textContent = item.name; selectionBox.appendChild(itemSpan); }); // Add text input for manual item entry const textInput = document.createElement('input'); textInput.type = 'text'; textInput.placeholder = 'Add item manually...'; textInput.className = 'manual-input'; textInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && textInput.value.trim()) { const manualItem = { name: textInput.value.trim(), description: 'Manually added', ingredients: 'Not specified', image_url: '' }; selectedItems.push(manualItem); addMessage('bot', `Added "${manualItem.name}" to your selection! Check the box below.`); textInput.value = ''; updateSelectionBox(); } }); selectionBox.appendChild(textInput); // Add Submit button if there are selected items if (selectedItems.length > 0) { const submitButton = document.createElement('button'); submitButton.textContent = 'Submit to Salesforce'; submitButton.className = 'submit-button'; submitButton.onclick = submitToSalesforce; selectionBox.appendChild(submitButton); } chatMessages.appendChild(selectionBox); chatMessages.scrollTop = chatMessages.scrollHeight; console.log('Updated selection box with items:', selectedItems.map(item => item.name)); } function handleResponse(userInput) { const lowerInput = userInput.toLowerCase(); let botResponse = ''; if (conversation.length === 2) { botResponse = `Great to meet you, ${userInput}! 🍳 What kind of food are you craving today?`; displayOptions([ { text: 'Vegetarian', class: 'green' }, { text: 'Non-Vegetarian', class: 'red' }, { text: 'Both', class: 'gray' } ]); } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') { botResponse = `Nice choice! Let me whip up some ${lowerInput} options for you...`; addMessage('bot', botResponse); fetchMenuItems(lowerInput); return; } else { botResponse = `Hmm, let’s see what I can find for "${userInput}"...`; addMessage('bot', botResponse); suggestItems(userInput); return; } addMessage('bot', botResponse); } function fetchMenuItems(dietaryPreference) { fetch('/get_menu_items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ dietary_preference: dietaryPreference }) }) .then(response => response.json()) .then(data => { if (data.error) { addMessage('bot', `Oops! Trouble fetching ${dietaryPreference} items: ${data.error}. Want to try again or search something specific?`); } else if (data.menu_items.length > 0) { displayItemsList(data.menu_items, 'menuItemsList', true); // Pass true to indicate Sector_Detail__c items } else { addMessage('bot', `Looks like we’re out of ${dietaryPreference} items in Sector_Detail__c. Try searching for something like "paneer" or "chicken"!`); } console.log(`Fetched items from Sector_Detail__c for ${dietaryPreference}:`, data.menu_items); }) .catch(error => { addMessage('bot', `Yikes! Couldn’t reach Salesforce: ${error.message}. I’ll retry in a sec...`); setTimeout(() => fetchMenuItems(dietaryPreference), 2000); }); } function suggestItems(searchTerm) { fetch('/suggest_items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ search_term: searchTerm }) }) .then(response => response.json()) .then(data => { if (data.error) { addMessage('bot', `Couldn’t find anything for "${searchTerm}": ${data.error}. Got another idea?`); } else if (data.suggestions.length > 0) { addMessage('bot', `Check out these suggestions for "${searchTerm}" from Ingredient_Object__c:`); displayItemsList(data.suggestions, 'suggestionsList', false); // Pass false for Ingredient_Object__c items } else { addMessage('bot', `No luck with "${searchTerm}" in Ingredient_Object__c. How about "chicken" or "paneer"?`); } console.log(`Suggestions for ${searchTerm}:`, data.suggestions); }) .catch(error => { addMessage('bot', `Error fetching suggestions: ${error.message}. Retrying...`); setTimeout(() => suggestItems(searchTerm), 2000); }); } function fetchItemDetails(itemName) { fetch('/get_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', `Couldn’t find "${itemName}" in Salesforce. Add it manually in the box below!`); updateSelectionBox(); } else { const details = data.item_details; selectedItems.push(details); addMessage('bot', `Added "${itemName}" to your selection! Check the box below.`); updateSelectionBox(); console.log(`Details for ${itemName}:`, details); } }) .catch(error => { addMessage('bot', `Trouble fetching details for "${itemName}": ${error.message}. Add it manually below or I’ll retry...`); updateSelectionBox(); setTimeout(() => fetchItemDetails(itemName), 2000); }); } function displayItemsList(items, containerId, isSectorDetail = false) { const container = document.getElementById(containerId); if (!container) { console.error(`${containerId} container not found!`); addMessage('bot', 'Something’s off with the display. Try again?'); return; } container.innerHTML = ''; items.forEach(item => { const itemDiv = document.createElement('div'); itemDiv.className = containerId === 'menuItemsList' ? 'ingredient-item' : 'suggestion-item'; const img = document.createElement('img'); img.src = item.image_url || 'https://via.placeholder.com/60'; img.alt = item.name; const name = document.createElement('div'); name.textContent = item.name; name.style.textAlign = 'center'; name.style.marginTop = '5px'; name.style.fontSize = '12px'; const button = document.createElement('button'); button.textContent = 'Add'; button.onclick = () => { if (isSectorDetail) { // Directly use item data from Sector_Detail__c const sectorItem = { name: item.name, description: 'From Sector_Detail__c', ingredients: 'Not specified', image_url: item.image_url || '', category: item.category || 'Both' }; selectedItems.push(sectorItem); addMessage('bot', `Added "${item.name}" to your selection! Check the box below.`); updateSelectionBox(); } else { // Fetch details from Ingredient_Object__c for suggestions fetchItemDetails(item.name); } }; itemDiv.appendChild(img); itemDiv.appendChild(name); itemDiv.appendChild(button); container.appendChild(itemDiv); }); } function displayOptions(options) { const chatMessages = document.getElementById('chatMessages'); if (!chatMessages) { console.error('Chat messages container not found for options!'); return; } const optionsDiv = document.createElement('div'); optionsDiv.style.marginTop = '10px'; 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 }); handleResponse(opt.text); }; optionsDiv.appendChild(button); }); const backButton = document.createElement('button'); backButton.textContent = 'Go Back'; backButton.className = 'option-button'; backButton.style.marginTop = '10px'; backButton.onclick = () => resetConversation(); optionsDiv.appendChild(document.createElement('br')); optionsDiv.appendChild(backButton); chatMessages.appendChild(optionsDiv); } function submitToSalesforce() { if (selectedItems.length === 0) { addMessage('bot', 'No items to submit yet! Add some tasty picks first! 😊'); return; } fetch('/submit_items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: selectedItems }) }) .then(response => response.json()) .then(data => { if (data.error) { addMessage('bot', `Uh-oh! Failed to submit items: ${data.error}. Want to try again?`); } else { addMessage('bot', `${data.success}! Your culinary choices are now saved. What’s next on the menu?`); selectedItems = []; updateSelectionBox(); } }) .catch(error => { addMessage('bot', `Error submitting items: ${error.message}. I’ll retry shortly...`); setTimeout(submitToSalesforce, 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: `Great to meet you, ${userName}! 🍳 What kind of food are you craving today?` } ]; selectedItems = []; 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' } ]); document.getElementById('suggestionsList').innerHTML = ''; document.getElementById('menuItemsList').innerHTML = ''; updateSelectionBox(); } document.getElementById('userInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); }); console.log('Chef Bot script loaded successfully!');