Update static/script.js

static/script.js

@@ -31,7 +31,7 @@ function sendMessage() {
         selectionBoxVisible = true;
         handleResponse(message);
     } else {
-        addMessage('bot', 'Hey, don’t be shy! Type something or add some items to get started! 😄');
+        addMessage('bot', 'Please type a dish or pick a preference! 😄');
     }
     userInput.value = '';
     updateSelectionBox();
@@ -42,7 +42,7 @@ function handleResponse(userInput) {
     let botResponse = '';
 
     if (conversation.length === 2) {
-        botResponse = `Great to meet you, ${userInput}! 🍳 What kind of food are you craving today? Try searching for 'chicken' or select a preference below!`;
+        botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
         displayOptions([
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' },
@@ -50,11 +50,11 @@ function handleResponse(userInput) {
         ]);
         addMessage('bot', botResponse);
     } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
-        botResponse = `Nice choice! Let me whip up some ${lowerInput} options for you...`;
+        botResponse = `Fetching ${lowerInput} dishes...`;
         addMessage('bot', botResponse);
         fetchMenuItems(lowerInput);
     } else {
-        botResponse = `Searching for "${userInput}" in our menu...`;
+        botResponse = `Looking for "${userInput}"...`;
         addMessage('bot', botResponse);
         fetchMenuItems(null, userInput);
     }
@@ -73,13 +73,13 @@ function updateSelectionBox() {
     selectionBox.className = 'selection-box';
 
     const vegButton = document.createElement('button');
-    vegButton.textContent = 'Vegetarian';
+    vegButton.textContent = 'Veg';
     vegButton.className = 'dietary-button green';
     vegButton.onclick = () => fetchMenuItems('vegetarian');
     selectionBox.appendChild(vegButton);
 
     const nonVegButton = document.createElement('button');
-    nonVegButton.textContent = 'Non-Vegetarian';
+    nonVegButton.textContent = 'Non-Veg';
     nonVegButton.className = 'dietary-button red';
     nonVegButton.onclick = () => fetchMenuItems('non-vegetarian');
     selectionBox.appendChild(nonVegButton);
@@ -91,7 +91,7 @@ function updateSelectionBox() {
     selectionBox.appendChild(bothButton);
 
     const label = document.createElement('span');
-    label.textContent = 'Selected Items:';
+    label.textContent = 'Selected:';
     selectionBox.appendChild(label);
 
     selectedItems.forEach((item, index) => {
@@ -109,11 +109,11 @@ function updateSelectionBox() {
         itemContainer.appendChild(itemSpan);
 
         const removeButton = document.createElement('button');
-        removeButton.textContent = 'Remove';
+        removeButton.textContent = 'X';
         removeButton.className = 'remove-button';
         removeButton.onclick = () => {
             selectedItems.splice(index, 1);
-            addMessage('bot', `Removed "${item.name}" from your selection.`);
+            addMessage('bot', `Removed "${item.name}".`);
             updateSelectionBox();
         };
         itemContainer.appendChild(removeButton);
@@ -123,7 +123,7 @@ function updateSelectionBox() {
 
     const textInput = document.createElement('input');
     textInput.type = 'text';
-    textInput.placeholder = 'Add Sector_Detail__c item...';
+    textInput.placeholder = 'Add item...';
     textInput.className = 'manual-input';
     textInput.addEventListener('keypress', (e) => {
         if (e.key === 'Enter' && textInput.value.trim()) {
@@ -139,26 +139,26 @@ function updateSelectionBox() {
         quantityInput.type = 'number';
         quantityInput.min = '1';
         quantityInput.value = '1';
-        quantityInput.placeholder = 'Quantity';
+        quantityInput.placeholder = 'Qty';
         quantityInput.className = 'quantity-input';
         selectionBox.appendChild(quantityInput);
 
         const submitButton = document.createElement('button');
-        submitButton.textContent = 'Submit to Salesforce';
+        submitButton.textContent = 'Submit';
         submitButton.className = 'submit-button';
         submitButton.onclick = () => promptAndSubmit(quantityInput.value);
         selectionBox.appendChild(submitButton);
 
         const orderNameInput = document.createElement('input');
         orderNameInput.type = 'text';
-        orderNameInput.placeholder = 'Custom Order Name (optional)';
+        orderNameInput.placeholder = 'Order Name';
         orderNameInput.className = 'order-name-input';
         selectionBox.appendChild(orderNameInput);
     }
 
     chatMessages.appendChild(selectionBox);
     chatMessages.scrollTop = chatMessages.scrollHeight;
-    console.log('Updated selection box with items:', selectedItems.map(item => ({ name: item.name, category: item.category })));
+    console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category })));
 }
 
 function fetchMenuItems(dietaryPreference, searchTerm = '') {
@@ -173,74 +173,21 @@ function fetchMenuItems(dietaryPreference, searchTerm = '') {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `Oops! Trouble fetching items: ${data.error}. Try again or search something specific.`);
+                addMessage('bot', `Error: ${data.error}. Try again!`);
             } else if (data.menu_items.length > 0) {
-                addMessage('bot', `Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} for "${searchTerm || dietaryPreference}"!`);
-                displayItemsList(data.menu_items, 'menuItemsList', true);
+                addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
+                displayItemsList(data.menu_items);
             } else {
-                addMessage('bot', `No items found for "${searchTerm || dietaryPreference}". Try something like "paneer" or "chicken"!`);
+                addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
             }
             console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
         })
         .catch(error => {
-            addMessage('bot', `Yikes! Couldn’t reach Salesforce: ${error.message}. I’ll retry in a sec...`);
+            addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
             setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 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);
-            } else {
-                addMessage('bot', `No matches for "${searchTerm}" in Ingredient_Object__c. Try "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 Ingredient_Object__c. Add it manually in the box below!`);
-                updateSelectionBox();
-            } else {
-                const details = data.item_details;
-                if (selectedItems.some(item => item.name === details.name)) {
-                    addMessage('bot', `"${details.name}" is already in your selection!`);
-                } else {
-                    selectedItems.push({ ...details, quantity: 1 });
-                    addMessage('bot', `Added "${itemName}" to your selection! Check the box below.`);
-                    updateSelectionBox();
-                }
-            }
-        })
-        .catch(error => {
-            addMessage('bot', `Trouble fetching "${itemName}": ${error.message}. Add it manually or I’ll retry...`);
-            updateSelectionBox();
-            setTimeout(() => fetchItemDetails(itemName), 2000);
-        });
-}
-
 function fetchSectorItemDetails(itemName) {
     fetch('/get_sector_item_details', {
         method: 'POST',
@@ -250,178 +197,107 @@ function fetchSectorItemDetails(itemName) {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `Sorry, I couldn’t find "${itemName}" in Sector_Detail__c. Try another item!`);
+                addMessage('bot', `No "${itemName}" found. Try another!`);
             } else {
                 const details = data.item_details;
                 if (selectedItems.some(item => item.name === details.name)) {
-                    addMessage('bot', `"${details.name}" is already in your selection!`);
+                    addMessage('bot', `"${details.name}" already selected!`);
                 } else {
                     selectedItems.push({ ...details, quantity: 1 });
-                    addMessage('bot', `Added "${details.name}" to your selection from Sector_Detail__c! Check the box below.`);
+                    addMessage('bot', `Added "${details.name}"!`);
                     updateSelectionBox();
                 }
             }
         })
         .catch(error => {
-            addMessage('bot', `Error fetching details for "${itemName}": ${error.message}. I’ll retry in a sec...`);
+            addMessage('bot', `Error for "${itemName}". Retrying...`);
             setTimeout(() => fetchSectorItemDetails(itemName), 2000);
         });
 }
 
-function showDescriptionPopup(item) {
-    const existingPopup = document.querySelector('.description-popup');
-    if (existingPopup) existingPopup.remove();
-
-    const popup = document.createElement('div');
-    popup.className = 'description-popup';
-
-    const content = document.createElement('div');
-    content.className = 'popup-content';
-
-    const img = document.createElement('img');
-    img.src = item.image_url || 'https://via.placeholder.com/100';
-    img.alt = item.name;
-    img.className = 'popup-image';
-    content.appendChild(img);
-
-    const title = document.createElement('h3');
-    title.textContent = item.name;
-    content.appendChild(title);
-
-    const desc = document.createElement('p');
-    desc.textContent = item.description || 'No description available';
-    content.appendChild(desc);
-
-    if (item.source === 'Menu_Item__c') {
-        const fields = [
-            { label: 'Category', value: item.category },
-            { label: 'Veg/Non-Veg', value: item.veg_nonveg },
-            { label: 'Ingredients', value: item.ingredients },
-            { label: 'Nutritional Info', value: item.nutritional_info },
-            { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
-            { label: 'Sector', value: item.sector },
-            { label: 'Spice Levels', value: item.spice_levels },
-            { label: 'Dynamic Dish', value: item.dynamic_dish ? 'Yes' : 'No' }
-        ];
-        fields.forEach(field => {
-            if (field.value) {
-                const p = document.createElement('p');
-                p.className = 'menu-item-field';
-                p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
-                content.appendChild(p);
-            }
-        });
+function toggleDescription(itemDiv, description, itemName) {
+    let descElement = itemDiv.querySelector('.item-description');
+    if (!descElement) {
+        descElement = document.createElement('p');
+        descElement.className = 'item-description';
+        descElement.textContent = description;
+        itemDiv.querySelector('.item-content').appendChild(descElement);
+        itemDiv.dataset.hidden = 'false';
+        console.log(`Showed description for ${itemName}`);
     } else {
-        const category = document.createElement('p');
-        category.textContent = `Category: ${item.category || 'Not specified'}`;
-        content.appendChild(category);
+        descElement.remove();
+        itemDiv.dataset.hidden = 'true';
+        console.log(`Hid description for ${itemName}`);
     }
-
-    const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'button-container';
-
-    const addButton = document.createElement('button');
-    addButton.textContent = 'Add';
-    addButton.className = 'popup-add-button';
-    addButton.onclick = () => {
-        const selectedItem = {
-            name: item.name,
-            image_url: item.image_url || '',
-            category: item.category || 'Not specified',
-            description: item.description || 'No description available',
-            source: item.source,
-            quantity: 1
-        };
-        if (item.source === 'Menu_Item__c') {
-            selectedItem.ingredients = item.ingredients;
-            selectedItem.nutritional_info = item.nutritional_info;
-            selectedItem.price = item.price;
-            selectedItem.sector = item.sector;
-            selectedItem.spice_levels = item.spice_levels;
-            selectedItem.veg_nonveg = item.veg_nonveg;
-            selectedItem.dynamic_dish = item.dynamic_dish;
-        }
-        if (selectedItems.some(existing => existing.name === selectedItem.name)) {
-            addMessage('-known', `"${selectedItem.name}" is already in your selection!`);
-        } else {
-            selectedItems.push(selectedItem);
-            addMessage('bot', `Added "${selectedItem.name}" to your selection! Check the box below.`);
-            updateSelectionBox();
-        }
-        popup.remove();
-    };
-    buttonContainer.appendChild(addButton);
-
-    const closeButton = document.createElement('button');
-    closeButton.textContent = 'Close';
-    closeButton.className = 'popup-close-button';
-    closeButton.onclick = () => popup.remove();
-    buttonContainer.appendChild(closeButton);
-
-    content.appendChild(buttonContainer);
-    popup.appendChild(content);
-    document.body.appendChild(popup);
 }
 
-function displayItemsList(items, containerId, isDetailed = false) {
-    const container = document.getElementById(containerId);
-    if (!container) {
-        console.error(`${containerId} container not found!`);
-        addMessage('bot', 'Something’s off with the display. Try again?');
+function displayItemsList(items) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found!');
+        addMessage('bot', 'Display issue. Try again?');
         return;
     }
-    container.innerHTML = '';
-    container.className = 'ingredients-list';
+
+    const itemsGrid = document.createElement('div');
+    itemsGrid.className = 'items-grid';
 
     items.forEach(item => {
         const itemDiv = document.createElement('div');
-        itemDiv.className = 'ingredient-item';
+        itemDiv.className = 'item-card';
+        itemDiv.dataset.hidden = item.source === 'Sector_Detail__c' ? 'true' : 'false';
 
         const img = document.createElement('img');
         img.src = item.image_url || 'https://via.placeholder.com/60';
         img.alt = item.name;
-        img.className = 'ingredient-image';
+        img.className = 'item-image';
         itemDiv.appendChild(img);
 
         const contentDiv = document.createElement('div');
-        contentDiv.className = 'ingredient-content';
+        contentDiv.className = 'item-content';
 
         const nameDiv = document.createElement('div');
         nameDiv.textContent = item.name;
-        nameDiv.className = 'ingredient-name';
+        nameDiv.className = 'item-name';
         contentDiv.appendChild(nameDiv);
 
-        if (item.source === 'Menu_Item__c' && isDetailed) {
+        if (item.source === 'Menu_Item__c') {
             const fields = [
                 { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
                 { label: 'Veg/Non-Veg', value: item.veg_nonveg },
-                { label: 'Spice Level', value: item.spice_levels },
+                { label: 'Spice', value: item.spice_levels },
                 { label: 'Category', value: item.category },
                 { label: 'Ingredients', value: item.ingredients },
-                { label: 'Nutritional Info', value: item.nutritional_info },
+                { label: 'Nutrition', value: item.nutritional_info },
                 { label: 'Sector', value: item.sector },
-                { label: 'Dynamic Dish', value: item.dynamic_dish ? 'Yes' : 'No' }
+                { label: 'Dynamic', value: item.dynamic_dish ? 'Yes' : 'No' }
             ];
             fields.forEach(field => {
                 if (field.value) {
                     const p = document.createElement('p');
-                    p.className = 'menu-item-field';
+                    p.className = 'item-field';
                     p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
                     contentDiv.appendChild(p);
                 }
             });
-        } else if (item.source === 'Sector_Detail__c' && isDetailed) {
-            const desc = document.createElement('p');
-            desc.className = 'menu-item-field';
-            desc.innerHTML = `<strong>Description:</strong> ${item.description}`;
-            contentDiv.appendChild(desc);
         }
 
         itemDiv.appendChild(contentDiv);
 
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'button-container';
+
+        if (item.source === 'Sector_Detail__c') {
+            const showButton = document.createElement('button');
+            showButton.textContent = 'Show';
+            showButton.className = 'show-button';
+            showButton.onclick = () => toggleDescription(itemDiv, item.description, item.name);
+            buttonContainer.appendChild(showButton);
+        }
+
         const addButton = document.createElement('button');
         addButton.textContent = 'Add';
-        addButton.className = 'show-desc-button';
+        addButton.className = 'add-button';
         addButton.onclick = () => {
             const selectedItem = {
                 name: item.name,
@@ -441,35 +317,31 @@ function displayItemsList(items, containerId, isDetailed = false) {
                 selectedItem.dynamic_dish = item.dynamic_dish;
             }
             if (selectedItems.some(existing => existing.name === selectedItem.name)) {
-                addMessage('bot', `"${selectedItem.name}" is already in your selection!`);
+                addMessage('bot', `"${selectedItem.name}" already selected!`);
             } else {
                 selectedItems.push(selectedItem);
-                addMessage('bot', `Added "${selectedItem.name}" to your selection! Check the box below.`);
+                addMessage('bot', `Added "${selectedItem.name}"!`);
                 updateSelectionBox();
             }
         };
-        itemDiv.appendChild(addButton);
-
-        if (item.source === 'Sector_Detail__c' && isDetailed) {
-            const showDescButton = document.createElement('button');
-            showDescButton.textContent = 'Show Details';
-            showDescButton.className = 'show-desc-button';
-            showDescButton.onclick = () => showDescriptionPopup(item);
-            itemDiv.appendChild(showDescButton);
-        }
+        buttonContainer.appendChild(addButton);
 
-        container.appendChild(itemDiv);
+        itemDiv.appendChild(buttonContainer);
+        itemsGrid.appendChild(itemDiv);
     });
+
+    chatMessages.appendChild(itemsGrid);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
 function displayOptions(options) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
-        console.error('Chat messages container not found for options!');
+        console.error('Chat messages container not found!');
         return;
     }
     const optionsDiv = document.createElement('div');
-    optionsDiv.style.marginTop = '10px';
+    optionsDiv.className = 'options-container';
 
     options.forEach(opt => {
         const button = document.createElement('button');
@@ -486,11 +358,9 @@ function displayOptions(options) {
     });
 
     const backButton = document.createElement('button');
-    backButton.textContent = 'Go Back';
+    backButton.textContent = 'Back';
     backButton.className = 'option-button';
-    backButton.style.marginTop = '10px';
     backButton.onclick = () => resetConversation();
-    optionsDiv.appendChild(document.createElement('br'));
     optionsDiv.appendChild(backButton);
 
     chatMessages.appendChild(optionsDiv);
@@ -499,16 +369,16 @@ function displayOptions(options) {
 function promptAndSubmit(quantity) {
     const orderNameInput = document.querySelector('.order-name-input');
     const customOrderName = orderNameInput ? orderNameInput.value.trim() : '';
-    if (confirm(`Submit ${selectedItems.length} items with quantity ${quantity}?`)) {
+    if (confirm(`Submit ${selectedItems.length} items (Qty: ${quantity})?`)) {
         submitToSalesforce(customOrderName, quantity);
     } else {
-        addMessage('bot', 'Submission cancelled. Add more items or try again!');
+        addMessage('bot', 'Cancelled. Add more items?');
     }
 }
 
 function submitToSalesforce(customOrderName, quantity) {
     if (selectedItems.length === 0) {
-        addMessage('bot', 'No items to submit yet! Add some tasty picks first! 😊');
+        addMessage('bot', 'No items selected! Add some dishes! 😊');
         return;
     }
 
@@ -528,15 +398,15 @@ function submitToSalesforce(customOrderName, quantity) {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `Uh-oh! Failed to submit items: ${data.error}. Want to try again?`);
+                addMessage('bot', `Submission failed: ${data.error}. Try again?`);
             } else {
-                addMessage('bot', `${data.success}! Your culinary choices are now saved under Ingredient_Name__c: ${data.ingredient_name}. What’s next on the menu?`);
+                addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`);
                 selectedItems = [];
                 updateSelectionBox();
             }
         })
         .catch(error => {
-            addMessage('bot', `Error submitting items: ${error.message}. I’ll retry shortly...`);
+            addMessage('bot', `Submission error: ${error.message}. Retrying...`);
             setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
         });
 }
@@ -546,7 +416,7 @@ function resetConversation() {
     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? Try searching for 'chicken' or select a preference below!` }
+        { role: 'bot', message: `Hi ${userName}! 🍳 Search for a dish or choose a preference below!` }
     ];
     selectedItems = [];
     selectionBoxVisible = true;
@@ -558,8 +428,6 @@ function resetConversation() {
         { text: 'Non-Vegetarian', class: 'red' },
         { text: 'Both', class: 'gray' }
     ]);
-    document.getElementById('suggestionsList').innerHTML = '';
-    document.getElementById('menuItemsList').innerHTML = '';
     updateSelectionBox();
 }
 
@@ -567,4 +435,4 @@ document.getElementById('userInput').addEventListener('keypress', (e) => {
     if (e.key === 'Enter') sendMessage();
 });
 
-console.log('Chef Bot script loaded successfully!');
+console.log('Chef Bot script loaded!');