Update static/script.js

static/script.js

@@ -1,7 +1,7 @@
 let conversation = [
     { role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }
 ];
-let selectedIngredients = [];
+let selectedItems = [];
 
 function addMessage(role, message) {
     const chatMessages = document.getElementById('chatMessages');
@@ -35,20 +35,28 @@ function sendMessage() {
 }
 
 function handleResponse(userInput) {
-    const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
+    const lowerInput = userInput.toLowerCase();
     let botResponse = '';
     let options = [];
 
-    if (conversation.length === 2) { // After name input
+    // 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' }
         ];
-    } else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
-        botResponse = `Great choice! 🍽️ These are the available ingredients for ${lastMessage}:`;
-        fetchIngredients(lastMessage);
+    }
+    // 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;
     }
 
@@ -58,104 +66,132 @@ function handleResponse(userInput) {
     }
 }
 
-function fetchIngredients(dietaryPreference) {
-    fetch('/get_ingredients', {
+// 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({ dietary_preference: dietaryPreference })
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ search_term: searchTerm })
     })
-    .then(response => response.json())
-    .then(data => {
-        if (data.error) {
-            addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
-        } else {
-            const ingredients = data.ingredients || [];
-            addMessage('bot', 'Great choice! These are available ingredients:');
-            displayIngredientsList(ingredients);
-            displaySelectedIngredients();
-            console.log(`Ingredients fetched for ${dietaryPreference}:`, ingredients);
-        }
+        .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 })
     })
-    .catch(error => {
-        addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
-    });
+        .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}`);
+        });
 }
 
-function displayIngredientsList(ingredients) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found for ingredients!');
+// 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 = '';
 
-    let ingredientsList = document.querySelector('.ingredients-list');
-    if (!ingredientsList) {
-        ingredientsList = document.createElement('div');
-        ingredientsList.className = 'ingredients-list';
-        chatMessages.appendChild(ingredientsList);
-    } else {
-        ingredientsList.innerHTML = '';
-    }
-
-    ingredients.forEach(ingredient => {
-        const item = document.createElement('div');
-        item.className = 'ingredient-item';
+    items.forEach(item => {
+        const itemDiv = document.createElement('div');
+        itemDiv.className = containerId === 'menuItemsList' ? 'ingredient-item' : 'suggestion-item';
         const img = document.createElement('img');
-        img.src = ingredient.image_url || 'https://via.placeholder.com/80';
-        img.alt = ingredient.name;
+        img.src = item.image_url || 'https://via.placeholder.com/60';
+        img.alt = item.name;
         const name = document.createElement('div');
-        name.textContent = ingredient.name;
+        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 (!selectedIngredients.some(item => item.name === ingredient.name)) {
-                selectedIngredients.push(ingredient);
-                displaySelectedIngredients();
-            }
-        };
-        item.appendChild(img);
-        item.appendChild(name);
-        item.appendChild(button);
-        ingredientsList.appendChild(item);
+        button.onclick = () => fetchItemDetails(item.name);
+        itemDiv.appendChild(img);
+        itemDiv.appendChild(name);
+        itemDiv.appendChild(button);
+        container.appendChild(itemDiv);
     });
 }
 
-function displaySelectedIngredients() {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found for selected ingredients!');
-        return;
-    }
-
-    let selectedArea = document.querySelector('.selected-ingredients');
+// Display selected items with details
+function displaySelectedItems() {
+    const selectedArea = document.getElementById('itemDetails');
     if (!selectedArea) {
-        selectedArea = document.createElement('div');
-        selectedArea.className = 'selected-ingredients';
-        chatMessages.appendChild(selectedArea);
-    } else {
-        selectedArea.innerHTML = '';
+        console.error('Item details container not found!');
+        return;
     }
+    selectedArea.innerHTML = '';
 
-    selectedIngredients.forEach(ingredient => {
+    selectedItems.forEach(item => {
         const div = document.createElement('div');
-        div.textContent = ingredient.name;
+        div.innerHTML = `<strong>${item.name}</strong><br>Description: ${item.description}<br>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;
     }
-    // Clear existing content
     chatMessages.innerHTML = '';
+
     options.forEach(opt => {
         const button = document.createElement('button');
         button.textContent = opt.text;
@@ -163,19 +199,23 @@ function displayOptions(options) {
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });
-            handleResponse(opt.text); // Process the selection immediately
+            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 = () => {
-        // Reset conversation to initial state
         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?` }];
-        selectedIngredients = [];
+        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([
@@ -187,11 +227,9 @@ function displayOptions(options) {
     chatMessages.appendChild(backButton);
 }
 
-// Add event listener for Enter key
-document.getElementById('userInput').addEventListener('keypress', function(e) {
-    if (e.key === 'Enter') {
-        sendMessage();
-    }
+// Event listeners
+document.getElementById('userInput').addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') sendMessage();
 });
 
 // Initial load check