Update static/script.js

static/script.js

@@ -2,6 +2,7 @@ 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');
@@ -27,363 +28,24 @@ function sendMessage() {
     if (message) {
         addMessage('user', message);
         conversation.push({ role: 'user', message: message });
+        selectionBoxVisible = true; // Show selection box after first user interaction
         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 = '';
+    userInput.value = '';
     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();
 
+    if (!selectionBoxVisible && selectedItems.length === 0) return;
+
     const selectionBox = document.createElement('div');
     selectionBox.className = 'selection-box';
 
@@ -406,7 +68,7 @@ function updateSelectionBox() {
     bothButton.onclick = () => fetchMenuItems('both');
     selectionBox.appendChild(bothButton);
 
-    // Add selected items label and list
+    // Add selected items
     const label = document.createElement('span');
     label.textContent = 'Selected Items:';
     selectionBox.appendChild(label);
@@ -417,7 +79,7 @@ function updateSelectionBox() {
         selectionBox.appendChild(itemSpan);
     });
 
-    // Add text input for manual item entry
+    // Add manual input
     const textInput = document.createElement('input');
     textInput.type = 'text';
     textInput.placeholder = 'Add item manually...';
@@ -428,7 +90,8 @@ function updateSelectionBox() {
                 name: textInput.value.trim(),
                 description: 'Manually added',
                 ingredients: 'Not specified',
-                image_url: ''
+                image_url: '',
+                category: 'Both'
             };
             selectedItems.push(manualItem);
             addMessage('bot', `Added "${manualItem.name}" to your selection! Check the box below.`);
@@ -438,7 +101,7 @@ function updateSelectionBox() {
     });
     selectionBox.appendChild(textInput);
 
-    // Add Submit button if there are selected items
+    // Add Submit button if items exist
     if (selectedItems.length > 0) {
         const submitButton = document.createElement('button');
         submitButton.textContent = 'Submit to Salesforce';
@@ -487,11 +150,11 @@ function fetchMenuItems(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?`);
+                addMessage('bot', `Oops! Trouble fetching ${dietaryPreference} items: ${data.error}. 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
+                displayItemsList(data.menu_items, 'menuItemsList', true);
             } else {
-                addMessage('bot', `Looks like we’re out of ${dietaryPreference} items in Sector_Detail__c. Try searching for something like "paneer" or "chicken"!`);
+                addMessage('bot', `No ${dietaryPreference} items found 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);
         })
@@ -513,9 +176,9 @@ 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', false); // Pass false for Ingredient_Object__c items
+                displayItemsList(data.suggestions, 'suggestionsList', false);
             } else {
-                addMessage('bot', `No luck with "${searchTerm}" in Ingredient_Object__c. How about "chicken" or "paneer"?`);
+                addMessage('bot', `No matches for "${searchTerm}" in Ingredient_Object__c. Try "chicken" or "paneer"?`);
             }
             console.log(`Suggestions for ${searchTerm}:`, data.suggestions);
         })
@@ -534,7 +197,7 @@ function fetchItemDetails(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!`);
+                addMessage('bot', `Couldn’t find "${itemName}" in Ingredient_Object__c. Add it manually in the box below!`);
                 updateSelectionBox();
             } else {
                 const details = data.item_details;
@@ -545,7 +208,7 @@ function fetchItemDetails(itemName) {
             }
         })
         .catch(error => {
-            addMessage('bot', `Trouble fetching details for "${itemName}": ${error.message}. Add it manually below or I’ll retry...`);
+            addMessage('bot', `Trouble fetching "${itemName}": ${error.message}. Add it manually or I’ll retry...`);
             updateSelectionBox();
             setTimeout(() => fetchItemDetails(itemName), 2000);
         });
@@ -575,7 +238,6 @@ function displayItemsList(items, containerId, isSectorDetail = false) {
         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',
@@ -585,11 +247,10 @@ function displayItemsList(items, containerId, isSectorDetail = false) {
                 };
                 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);
             }
+            updateSelectionBox();
         };
         itemDiv.appendChild(img);
         itemDiv.appendChild(name);
@@ -614,7 +275,9 @@ function displayOptions(options) {
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });
+            selectionBoxVisible = true;
             handleResponse(opt.text);
+            updateSelectionBox();
         };
         optionsDiv.appendChild(button);
     });
@@ -665,6 +328,7 @@ function resetConversation() {
         { role: 'bot', message: `Great to meet you, ${userName}! 🍳 What kind of food are you craving today?` }
     ];
     selectedItems = [];
+    selectionBoxVisible = true;
     const chatMessages = document.getElementById('chatMessages');
     chatMessages.innerHTML = '';
     conversation.forEach(msg => addMessage(msg.role, msg.message));