Update static/script.js

static/script.js

@@ -30,40 +30,39 @@ function sendMessage() {
         userInput.value = '';
         setTimeout(() => handleResponse(message), 500);
     } else {
-        console.warn('Empty message!');
+        addMessage('bot', 'Please type something to continue! 😊');
     }
 }
 
 function handleResponse(userInput) {
     const lowerInput = userInput.toLowerCase();
     let botResponse = '';
-    let options = [];
 
-    // First message: Ask for dietary preference after name
+    // Step 1: After name input
     if (conversation.length === 2) {
-        botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
-        options = [
+        botResponse = `Nice to meet you, ${userInput}! 😊 What type of food would you like to explore today?`;
+        displayOptions([
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' },
             { text: 'Both', class: 'gray' }
-        ];
+        ]);
     }
-    // After dietary preference, fetch menu items
+    // Step 2: After dietary preference
     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
+        botResponse = `Awesome! Let me fetch some ${lowerInput} menu items for you...`;
+        addMessage('bot', botResponse);
+        fetchMenuItems(lowerInput);
         return;
     }
-    // Otherwise, treat input as a search term for suggestions
+    // Step 3: Search for specific items
     else {
-        suggestItems(lowerInput); // Fetch suggestions dynamically
+        botResponse = `Looking for something with "${userInput}"...`;
+        addMessage('bot', botResponse);
+        suggestItems(userInput);
         return;
     }
 
     addMessage('bot', botResponse);
-    if (options.length > 0) {
-        displayOptions(options);
-    }
 }
 
 // Fetch menu items from Salesforce
@@ -72,24 +71,31 @@ function fetchMenuItems(dietaryPreference) {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
+                addMessage('bot', `Oops! Couldn’t fetch menu items: ${data.error}. Try again?`);
             } 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');
+                    // Client-side filtering (update if Salesforce supports this)
+                    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);
+                if (filteredItems.length > 0) {
+                    addMessage('bot', `Here are some ${dietaryPreference} menu items:`);
+                    displayItemsList(filteredItems, 'menuItemsList');
+                } else {
+                    addMessage('bot', `No ${dietaryPreference} items found. Try searching for something specific!`);
+                }
+                console.log(`Fetched menu items for ${dietaryPreference}:`, filteredItems);
             }
         })
         .catch(error => {
-            addMessage('bot', `Error: Unable to connect to the database. ${error.message}`);
+            addMessage('bot', `Error connecting to the database: ${error.message}. I’ll try again soon!`);
+            setTimeout(() => fetchMenuItems(dietaryPreference), 2000); // Retry after 2 seconds
         });
 }
 
-// Fetch suggestions from Salesforce based on user input
+// Fetch suggestions from Salesforce
 function suggestItems(searchTerm) {
     fetch('/suggest_items', {
         method: 'POST',
@@ -99,21 +105,22 @@ function suggestItems(searchTerm) {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `Sorry, I couldn’t find anything for "${searchTerm}": ${data.error}`);
+                addMessage('bot', `Couldn’t find anything for "${searchTerm}": ${data.error}. Try another term?`);
             } else if (data.suggestions.length > 0) {
-                addMessage('bot', `Here are some suggestions for "${searchTerm}":`);
+                addMessage('bot', `Found these 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!`);
+                addMessage('bot', `No matches for "${searchTerm}". Maybe try "chicken" or "rice"?`);
             }
+            console.log(`Suggestions for ${searchTerm}:`, data.suggestions);
         })
         .catch(error => {
-            addMessage('bot', `Error fetching suggestions: ${error.message}`);
+            addMessage('bot', `Error fetching suggestions: ${error.message}. Retrying...`);
+            setTimeout(() => suggestItems(searchTerm), 2000); // Retry after 2 seconds
         });
 }
 
-// Fetch item details from Salesforce
+// Fetch item details from Salesforce with improved error handling
 function fetchItemDetails(itemName) {
     fetch('/get_item_details', {
         method: 'POST',
@@ -123,17 +130,18 @@ function fetchItemDetails(itemName) {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `Sorry, couldn’t get details for "${itemName}": ${data.error}`);
+                addMessage('bot', `Sorry, couldn’t get details for "${itemName}": ${data.error}. Does it exist in our menu?`);
             } else {
                 const details = data.item_details;
                 selectedItems.push(details);
-                addMessage('bot', `Added "${itemName}" to your selection. Here are the details:`);
+                addMessage('bot', `Here’s what I found for "${itemName}":`);
                 displaySelectedItems();
                 console.log(`Details fetched for ${itemName}:`, details);
             }
         })
         .catch(error => {
-            addMessage('bot', `Error fetching details: ${error.message}`);
+            addMessage('bot', `Error fetching details for "${itemName}": ${error.message}. I’ll retry...`);
+            setTimeout(() => fetchItemDetails(itemName), 2000); // Retry after 2 seconds
         });
 }
 
@@ -142,6 +150,7 @@ function displayItemsList(items, containerId) {
     const container = document.getElementById(containerId);
     if (!container) {
         console.error(`${containerId} container not found!`);
+        addMessage('bot', 'Something went wrong with the display. Please try again!');
         return;
     }
     container.innerHTML = '';
@@ -172,25 +181,31 @@ function displaySelectedItems() {
     const selectedArea = document.getElementById('itemDetails');
     if (!selectedArea) {
         console.error('Item details container not found!');
+        addMessage('bot', 'Can’t show details right now. Try again later!');
         return;
     }
     selectedArea.innerHTML = '';
 
-    selectedItems.forEach(item => {
-        const div = document.createElement('div');
-        div.innerHTML = `<strong>${item.name}</strong><br>Description: ${item.description}<br>Ingredients: ${item.ingredients}`;
-        selectedArea.appendChild(div);
-    });
+    if (selectedItems.length === 0) {
+        selectedArea.innerHTML = '<div>No items selected yet!</div>';
+    } else {
+        selectedItems.forEach(item => {
+            const div = document.createElement('div');
+            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)
+// Display options (Vegetarian, Non-Vegetarian, Both)
 function displayOptions(options) {
-    const chatMessages = document.getElementById('chatMessages');
+    const chatMessages = document.getElementId('chatMessages');
     if (!chatMessages) {
         console.error('Chat messages container not found for options!');
         return;
     }
-    chatMessages.innerHTML = '';
+    const optionsDiv = document.createElement('div');
+    optionsDiv.style.marginTop = '10px';
 
     options.forEach(opt => {
         const button = document.createElement('button');
@@ -201,30 +216,40 @@ function displayOptions(options) {
             conversation.push({ role: 'user', message: opt.text });
             handleResponse(opt.text);
         };
-        chatMessages.appendChild(button);
+        optionsDiv.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);
+    backButton.style.marginTop = '10px';
+    backButton.onclick = () => resetConversation();
+    optionsDiv.appendChild(document.createElement('br'));
+    optionsDiv.appendChild(backButton);
+
+    chatMessages.appendChild(optionsDiv);
+}
+
+// Reset conversation
+function resetConversation() {
+    const userName = conversation.length > 1 ? conversation[1].message : 'Friend';
+    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}! 😊 What type of food would you like to explore 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 = '';
+    displaySelectedItems();
 }
 
 // Event listeners
@@ -232,5 +257,5 @@ document.getElementById('userInput').addEventListener('keypress', (e) => {
     if (e.key === 'Enter') sendMessage();
 });
 
-// Initial load check
-console.log('Script loaded successfully');
+// Initial load
+console.log('Chef Bot script loaded successfully!');