Update static/script.js

static/script.js

@@ -147,7 +147,7 @@ function fetchMenuItems(dietaryPreference) {
             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');
+                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"!`);
             }
@@ -171,7 +171,7 @@ function suggestItems(searchTerm) {
                 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');
+                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"?`);
             }
@@ -209,7 +209,7 @@ function fetchItemDetails(itemName) {
         });
 }
 
-function displayItemsList(items, containerId) {
+function displayItemsList(items, containerId, isSectorDetail = false) {
     const container = document.getElementById(containerId);
     if (!container) {
         console.error(`${containerId} container not found!`);
@@ -231,7 +231,366 @@ function displayItemsList(items, containerId) {
         name.style.fontSize = '12px';
         const button = document.createElement('button');
         button.textContent = 'Add';
-        button.onclick = () => fetchItemDetails(item.name);
+        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);