Update static/script.js

static/script.js

@@ -29,7 +29,7 @@ function sendMessage() {
         addMessage('user', message);
         conversation.push({ role: 'user', message: message });
         selectionBoxVisible = true;
-        setTimeout(() => handleResponse(message), 500);
+        handleResponse(message);
     } else {
         addMessage('bot', 'Hey, don’t be shy! Type something or add some items to get started! 😄');
     }
@@ -37,6 +37,48 @@ function sendMessage() {
     updateSelectionBox();
 }
 
+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? Or ask me to help customize a dish!`;
+        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 {
+        fetch('/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: userInput })
+        })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    addMessage('bot', `Oops! ${data.error}. Let’s try something else!`);
+                } else {
+                    addMessage('bot', data.response);
+                    if (data.search_term) {
+                        fetchMenuItems(null, data.search_term);
+                    }
+                }
+            })
+            .catch(error => {
+                addMessage('bot', `Yikes! Couldn’t reach the assistant: ${error.message}. I’ll suggest rice or chicken instead!`);
+            });
+        return;
+    }
+
+    addMessage('bot', botResponse);
+}
+
 function updateSelectionBox() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) return;
@@ -82,7 +124,7 @@ function updateSelectionBox() {
         itemContainer.appendChild(img);
 
         const itemSpan = document.createElement('span');
-        itemSpan.textContent = item.name;
+        itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
         itemContainer.appendChild(itemSpan);
 
         const removeButton = document.createElement('button');
@@ -100,76 +142,72 @@ function updateSelectionBox() {
 
     const textInput = document.createElement('input');
     textInput.type = 'text';
-    textInput.placeholder = 'Add item (Sector_Detail__c or Menu_Item__c)...';
+    textInput.placeholder = 'Add Sector_Detail__c item...';
     textInput.className = 'manual-input';
     textInput.addEventListener('keypress', (e) => {
         if (e.key === 'Enter' && textInput.value.trim()) {
             const itemName = textInput.value.trim();
-            fetchSectorOrMenuItemDetails(itemName);
+            fetchSectorItemDetails(itemName);
             textInput.value = '';
         }
     });
     selectionBox.appendChild(textInput);
 
     if (selectedItems.length > 0) {
+        const quantityInput = document.createElement('input');
+        quantityInput.type = 'number';
+        quantityInput.min = '1';
+        quantityInput.value = '1';
+        quantityInput.placeholder = 'Quantity';
+        quantityInput.className = 'quantity-input';
+        selectionBox.appendChild(quantityInput);
+
         const submitButton = document.createElement('button');
         submitButton.textContent = 'Submit to Salesforce';
         submitButton.className = 'submit-button';
-        submitButton.onclick = submitToSalesforce;
+        submitButton.onclick = () => promptAndSubmit(quantityInput.value);
         selectionBox.appendChild(submitButton);
+
+        const orderNameInput = document.createElement('input');
+        orderNameInput.type = 'text';
+        orderNameInput.placeholder = 'Custom Order Name (optional)';
+        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 => item.name));
+    console.log('Updated selection box with items:', selectedItems.map(item => ({ name: item.name, category: item.category })));
 }
 
-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 = `Looking up details for "${userInput}"...`;
-        addMessage('bot', botResponse);
-        fetchSectorOrMenuItemDetails(userInput);
-        return;
+function fetchMenuItems(dietaryPreference, searchTerm = '') {
+    const payload = {};
+    if (dietaryPreference) {
+        payload.dietary_preference = dietaryPreference;
+    }
+    if (searchTerm) {
+        payload.search_term = searchTerm;
     }
-
-    addMessage('bot', botResponse);
-}
-
-function fetchMenuItems(dietaryPreference) {
     fetch('/get_menu_items', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ dietary_preference: dietaryPreference })
+        body: JSON.stringify(payload)
     })
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `Oops! Trouble fetching ${dietaryPreference} items: ${data.error}. Try again or search something specific.`);
+                addMessage('bot', `Oops! Trouble fetching items: ${data.error}. Try again or contact your admin if it persists.`);
             } 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);
             } else {
-                addMessage('bot', `No ${dietaryPreference} items found. Try searching for something like "paneer" or "chicken"!`);
+                addMessage('bot', `No items found for "${searchTerm || dietaryPreference}". Try searching for something like "paneer" or "chicken"!`);
             }
-            console.log(`Fetched items for ${dietaryPreference}:`, data.menu_items);
+            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...`);
-            setTimeout(() => fetchMenuItems(dietaryPreference), 2000);
+            setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
         });
 }
 
@@ -197,9 +235,8 @@ function suggestItems(searchTerm) {
         });
 }
 
-function fetchSectorOrMenuItemDetails(itemName) {
-    // Try Menu_Item__c first
-    fetch('/get_menu_item_details', {
+function fetchItemDetails(itemName) {
+    fetch('/get_item_details', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ item_name: itemName })
@@ -207,17 +244,23 @@ function fetchSectorOrMenuItemDetails(itemName) {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                // If not found in Menu_Item__c, try Sector_Detail__c
-                fetchSectorItemDetails(itemName);
+                addMessage('bot', `Couldn’t find "${itemName}" in Ingredient_Object__c. Add it manually in the box below!`);
+                updateSelectionBox();
             } else {
                 const details = data.item_details;
-                addMessage('bot', `Found "${details.name}" in Menu_Item__c!`);
-                showDescriptionPopup(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}. Trying Sector_Detail__c...`);
-            fetchSectorItemDetails(itemName);
+            addMessage('bot', `Trouble fetching "${itemName}": ${error.message}. Add it manually or I’ll retry...`);
+            updateSelectionBox();
+            setTimeout(() => fetchItemDetails(itemName), 2000);
         });
 }
 
@@ -230,11 +273,17 @@ function fetchSectorItemDetails(itemName) {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `Sorry, I couldn’t find "${itemName}" in Menu_Item__c or Sector_Detail__c. Try another item!`);
+                addMessage('bot', `Sorry, I couldn’t find "${itemName}" in Sector_Detail__c. Try another item!`);
             } else {
                 const details = data.item_details;
-                addMessage('bot', `Found "${details.name}" in Sector_Detail__c!`);
-                showDescriptionPopup(details);
+                console.log(`Fetched details for ${itemName} from Sector_Detail__c:`, 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 "${details.name}" to your selection from Sector_Detail__c! Category: ${details.category || 'Not specified'}. Check the box below.`);
+                    updateSelectionBox();
+                }
             }
         })
         .catch(error => {
@@ -264,7 +313,7 @@ function showDescriptionPopup(item) {
     content.appendChild(title);
 
     const desc = document.createElement('p');
-    desc.textContent = item.description;
+    desc.textContent = item.description || 'No description available';
     content.appendChild(desc);
 
     if (item.source === 'Menu_Item__c') {
@@ -278,7 +327,6 @@ function showDescriptionPopup(item) {
             { 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');
@@ -287,6 +335,11 @@ function showDescriptionPopup(item) {
                 content.appendChild(p);
             }
         });
+    } else {
+        const category = document.createElement('p');
+        const categoryValue = item.category || 'Not specified';
+        category.textContent = `Category: ${categoryValue}`;
+        content.appendChild(category);
     }
 
     const buttonContainer = document.createElement('div');
@@ -299,8 +352,9 @@ function showDescriptionPopup(item) {
         const selectedItem = {
             name: item.name,
             image_url: item.image_url || '',
-            category: item.category || 'Unknown',
+            category: item.category || 'Not specified',
             description: item.description || 'No description available',
+            quantity: 1,
             source: item.source
         };
         if (item.source === 'Menu_Item__c') {
@@ -354,37 +408,79 @@ function displayItemsList(items, containerId, isDetailed = false) {
         img.className = 'ingredient-image';
         itemDiv.appendChild(img);
 
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'ingredient-content';
+
         const nameDiv = document.createElement('div');
         nameDiv.textContent = item.name;
         nameDiv.className = 'ingredient-name';
-        itemDiv.appendChild(nameDiv);
+        contentDiv.appendChild(nameDiv);
+
+        if (item.source === 'Menu_Item__c' && isDetailed) {
+            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: 'Category', value: item.category },
+                { label: 'Ingredients', value: item.ingredients },
+                { label: 'Nutritional Info', value: item.nutritional_info },
+                { label: 'Sector', value: item.sector },
+                { 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}`;
+                    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 addButton = document.createElement('button');
+        addButton.textContent = 'Add';
+        addButton.className = 'show-desc-button';
+        addButton.onclick = () => {
+            const selectedItem = {
+                name: item.name,
+                image_url: item.image_url || '',
+                category: item.category || 'Not specified',
+                description: item.description || 'No description available',
+                quantity: 1,
+                source: item.source
+            };
+            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('bot', `"${selectedItem.name}" is already in your selection!`);
+            } else {
+                selectedItems.push(selectedItem);
+                addMessage('bot', `Added "${selectedItem.name}" to your selection! Check the box below.`);
+                updateSelectionBox();
+            }
+        };
+        itemDiv.appendChild(addButton);
 
-        if (isDetailed) {
+        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);
-        } else {
-            const addButton = document.createElement('button');
-            addButton.textContent = 'Add';
-            addButton.onclick = () => {
-                const selectedItem = {
-                    name: item.name,
-                    image_url: item.image_url || '',
-                    category: item.category || 'Unknown',
-                    description: item.description || 'No description available',
-                    source: item.source || 'Unknown'
-                };
-                if (selectedItems.some(existing => existing.name === selectedItem.name)) {
-                    addMessage('bot', `"${selectedItem.name}" is already in your selection!`);
-                } else {
-                    selectedItems.push(selectedItem);
-                    addMessage('bot', `Added "${selectedItem.name}" to your selection!`);
-                    updateSelectionBox();
-                }
-            };
-            itemDiv.appendChild(addButton);
         }
 
         container.appendChild(itemDiv);
@@ -425,7 +521,17 @@ function displayOptions(options) {
     chatMessages.appendChild(optionsDiv);
 }
 
-function submitToSalesforce() {
+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}?`)) {
+        submitToSalesforce(customOrderName, quantity);
+    } else {
+        addMessage('bot', 'Submission cancelled. Add more items or try again!');
+    }
+}
+
+function submitToSalesforce(customOrderName, quantity) {
     if (selectedItems.length === 0) {
         addMessage('bot', 'No items to submit yet! Add some tasty picks first! 😊');
         return;
@@ -433,28 +539,32 @@ function submitToSalesforce() {
 
     const itemsToSubmit = selectedItems.map(item => ({
         name: item.name,
-        category: item.category || 'Unknown',
-        description: item.description || 'No description available'
+        category: item.category || 'Not specified',
+        description: item.description || 'No description available',
+        image_url: item.image_url || '',
+        quantity: parseInt(quantity) || 1
     }));
 
+    console.log('Submitting to Salesforce with single Ingredient_Name__c:', itemsToSubmit);
+
     fetch('/submit_items', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ items: itemsToSubmit })
+        body: JSON.stringify({ items: itemsToSubmit, custom_order_name: customOrderName })
     })
         .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?`);
+                addMessage('bot', `${data.success}! Your culinary choices are now saved under Ingredient_Name__c: ${data.ingredient_name}. What’s next on the menu?`);
                 selectedItems = [];
                 updateSelectionBox();
             }
         })
         .catch(error => {
             addMessage('bot', `Error submitting items: ${error.message}. I’ll retry shortly...`);
-            setTimeout(submitToSalesforce, 2000);
+            setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
         });
 }
 
@@ -463,7 +573,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?` }
+        { role: 'bot', message: `Great to meet you, ${userName}! 🍳 What kind of food are you craving today? Or ask me to help customize a dish!` }
     ];
     selectedItems = [];
     selectionBoxVisible = true;