let conversation = [ { role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know 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 }); userInput.value = ''; setTimeout(() => handleResponse(message), 500); } else { console.warn('Empty message!'); } } function handleResponse(userInput) { const lowerInput = userInput.toLowerCase(); let botResponse = ''; let options = []; // First message: Ask for dietary preference after name if (conversation.length === 2) { botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`; options = [ { text: 'Vegetarian', class: 'green' }, { text: 'Non-Vegetarian', class: 'red' }, { text: 'Both', class: 'gray' } ]; } // After dietary preference, fetch menu items else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') { botResponse = `Great choice! 🍽️ Here are some menu items for ${lowerInput}:`; fetchMenuItems(lowerInput); // Fetch from Salesforce based on preference return; } // Otherwise, treat input as a search term for suggestions else { suggestItems(lowerInput); // Fetch suggestions dynamically return; } addMessage('bot', botResponse); if (options.length > 0) { displayOptions(options); } } // Fetch menu items from Salesforce function fetchMenuItems(dietaryPreference) { fetch('/get_menu_items', { method: 'GET' }) .then(response => response.json()) .then(data => { if (data.error) { addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`); } else { const filteredItems = data.menu_items.filter(item => { if (dietaryPreference === 'both') return true; // Assuming Salesforce has a Category__c field for filtering return dietaryPreference === 'vegetarian' ? item.name.toLowerCase().includes('veg') : !item.name.toLowerCase().includes('veg'); }); addMessage('bot', 'Here are some available menu items:'); displayItemsList(filteredItems, 'menuItemsList'); console.log(`Menu items fetched for ${dietaryPreference}:`, filteredItems); } }) .catch(error => { addMessage('bot', `Error: Unable to connect to the database. ${error.message}`); }); } // Fetch suggestions from Salesforce based on user input 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', `Sorry, I couldn’t find anything for "${searchTerm}": ${data.error}`); } else if (data.suggestions.length > 0) { addMessage('bot', `Here are some suggestions for "${searchTerm}":`); displayItemsList(data.suggestions, 'suggestionsList'); console.log(`Suggestions fetched for ${searchTerm}:`, data.suggestions); } else { addMessage('bot', `No suggestions found for "${searchTerm}". Try something else!`); } }) .catch(error => { addMessage('bot', `Error fetching suggestions: ${error.message}`); }); } // Fetch item details from Salesforce 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', `Sorry, couldn’t get details for "${itemName}": ${data.error}`); } else { const details = data.item_details; selectedItems.push(details); addMessage('bot', `Added "${itemName}" to your selection. Here are the details:`); displaySelectedItems(); console.log(`Details fetched for ${itemName}:`, details); } }) .catch(error => { addMessage('bot', `Error fetching details: ${error.message}`); }); } // Display items (menu items or suggestions) function displayItemsList(items, containerId) { const container = document.getElementById(containerId); if (!container) { console.error(`${containerId} container not found!`); 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 = () => fetchItemDetails(item.name); itemDiv.appendChild(img); itemDiv.appendChild(name); itemDiv.appendChild(button); container.appendChild(itemDiv); }); } // Display selected items with details function displaySelectedItems() { const selectedArea = document.getElementById('itemDetails'); if (!selectedArea) { console.error('Item details container not found!'); return; } selectedArea.innerHTML = ''; selectedItems.forEach(item => { const div = document.createElement('div'); div.innerHTML = `${item.name}
Description: ${item.description}
Ingredients: ${item.ingredients}`; selectedArea.appendChild(div); }); } // Display options (e.g., Vegetarian, Non-Vegetarian, Both) function displayOptions(options) { const chatMessages = document.getElementById('chatMessages'); if (!chatMessages) { console.error('Chat messages container not found for options!'); return; } chatMessages.innerHTML = ''; 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); }; chatMessages.appendChild(button); }); chatMessages.appendChild(document.createElement('br')); const backButton = document.createElement('button'); backButton.textContent = 'Go Back'; backButton.className = 'option-button'; backButton.onclick = () => { const userName = conversation.length > 1 ? conversation[1].message : 'User'; conversation = [ { role: 'bot', message: `Hi there! I'm Chef Bot! May I know your name?` }, { role: 'user', message: userName }, { role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` } ]; selectedItems = []; chatMessages.innerHTML = ''; conversation.forEach(msg => addMessage(msg.role, msg.message)); displayOptions([ { text: 'Vegetarian', class: 'green' }, { text: 'Non-Vegetarian', class: 'red' }, { text: 'Both', class: 'gray' } ]); }; chatMessages.appendChild(backButton); } // Event listeners document.getElementById('userInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); }); // Initial load check console.log('Script loaded successfully');