Update static/script.js

static/script.js

@@ -31,7 +31,7 @@ function sendMessage() {
         selectionBoxVisible = true;
         handleResponse(message);
     } else {
-        addMessage('bot', 'Please type a dish name! 😄');
+        addMessage('bot', 'Please type a dish or preference! 😄');
     }
     userInput.value = '';
     updateSelectionBox();
@@ -42,7 +42,7 @@ function handleResponse(userInput) {
     let botResponse = '';
 
     if (conversation.length === 2) {
-        botResponse = `Hi ${userInput}! 🍳 Search for a dish like "chicken" or add items below!`;
+        botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
         displayOptions([
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' },
@@ -50,12 +50,13 @@ function handleResponse(userInput) {
         ]);
         addMessage('bot', botResponse);
     } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
-        botResponse = `Selected ${lowerInput}. Search for a dish or add an item!`;
+        botResponse = `Fetching ${lowerInput} dishes...`;
         addMessage('bot', botResponse);
+        fetchMenuItems(lowerInput);
     } else {
         botResponse = `Looking for "${userInput}"...`;
         addMessage('bot', botResponse);
-        fetchMenuItems(userInput);
+        fetchMenuItems(null, userInput);
     }
 }
 
@@ -108,6 +109,7 @@ function updateSelectionBox() {
     selectedItems.forEach((item, index) => {
         const itemContainer = document.createElement('div');
         itemContainer.className = 'selected-item';
+        itemContainer.dataset.hidden = item.source === 'Sector_Detail__c' ? 'true' : 'false';
 
         const img = document.createElement('img');
         img.src = item.image_url || 'https://via.placeholder.com/30';
@@ -115,9 +117,22 @@ function updateSelectionBox() {
         img.className = 'selected-item-image';
         itemContainer.appendChild(img);
 
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'selected-item-content';
+
         const itemSpan = document.createElement('span');
         itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
-        itemContainer.appendChild(itemSpan);
+        contentDiv.appendChild(itemSpan);
+
+        if (item.source === 'Sector_Detail__c') {
+            const showButton = document.createElement('button');
+            showButton.textContent = 'Show';
+            showButton.className = 'show-button';
+            showButton.onclick = () => toggleDescription(itemContainer, item.description, item.name);
+            contentDiv.appendChild(showButton);
+        }
+
+        itemContainer.appendChild(contentDiv);
 
         const removeButton = document.createElement('button');
         removeButton.textContent = 'X';
@@ -172,11 +187,14 @@ function updateSelectionBox() {
     console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category })));
 }
 
-function fetchMenuItems(searchTerm) {
+function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
+    const payload = {};
+    if (dietaryPreference) payload.dietary_preference = dietaryPreference;
+    if (searchTerm) payload.search_term = searchTerm;
     fetch('/get_menu_items', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ search_term: searchTerm })
+        body: JSON.stringify(payload)
     })
         .then(response => response.json())
         .then(data => {
@@ -186,13 +204,13 @@ function fetchMenuItems(searchTerm) {
                 addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
                 displayItemsList(data.menu_items);
             } else {
-                addMessage('bot', `No matches for "${searchTerm}". Try "chicken"!`);
+                addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
             }
-            console.log(`Fetched Menu_Item__c items for ${searchTerm}:`, data.menu_items);
+            console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
         })
         .catch(error => {
             addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
-            setTimeout(() => fetchMenuItems(searchTerm), 2000);
+            setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
         });
 }
 
@@ -205,15 +223,14 @@ function fetchSectorItemDetails(itemName) {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `No "${itemName}" found in Sector_Detail__c. Try another!`);
+                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}" already selected!`);
                 } else {
                     selectedItems.push({ ...details, quantity: 1 });
-                    addMessage('bot', `--- Added "${details.name}" ---`);
-                    displaySingleItem(details);
+                    addMessage('bot', `Added "${details.name}"!`);
                     updateSelectionBox();
                 }
             }
@@ -224,18 +241,18 @@ function fetchSectorItemDetails(itemName) {
         });
 }
 
-function toggleDescription(itemDiv, description, itemName) {
-    let descElement = itemDiv.querySelector('.item-description');
+function toggleDescription(itemContainer, description, itemName) {
+    let descElement = itemContainer.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';
+        itemContainer.querySelector('.selected-item-content').appendChild(descElement);
+        itemContainer.dataset.hidden = 'false';
         console.log(`Showed description for ${itemName}`);
     } else {
         descElement.remove();
-        itemDiv.dataset.hidden = 'true';
+        itemContainer.dataset.hidden = 'true';
         console.log(`Hid description for ${itemName}`);
     }
 }
@@ -254,7 +271,6 @@ function displayItemsList(items) {
     items.forEach(item => {
         const itemDiv = document.createElement('div');
         itemDiv.className = 'item-card';
-        itemDiv.dataset.hidden = 'false';
 
         const img = document.createElement('img');
         img.src = item.image_url || 'https://via.placeholder.com/60';
@@ -331,67 +347,6 @@ function displayItemsList(items) {
     chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
-function displaySingleItem(item) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found!');
-        addMessage('bot', 'Display issue. Try again?');
-        return;
-    }
-
-    const itemsGrid = document.createElement('div');
-    itemsGrid.className = 'items-grid';
-
-    const itemDiv = document.createElement('div');
-    itemDiv.className = 'item-card';
-    itemDiv.dataset.hidden = 'true';
-
-    const img = document.createElement('img');
-    img.src = item.image_url || 'https://via.placeholder.com/60';
-    img.alt = item.name;
-    img.className = 'item-image';
-    itemDiv.appendChild(img);
-
-    const contentDiv = document.createElement('div');
-    contentDiv.className = 'item-content';
-
-    const nameDiv = document.createElement('div');
-    nameDiv.textContent = item.name;
-    nameDiv.className = 'item-name';
-    contentDiv.appendChild(nameDiv);
-
-    itemDiv.appendChild(contentDiv);
-
-    const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'button-container';
-
-    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 = 'add-button';
-    addButton.onclick = () => {
-        if (selectedItems.some(existing => existing.name === item.name)) {
-            addMessage('bot', `"${item.name}" already selected!`);
-        } else {
-            selectedItems.push({ ...item, quantity: 1 });
-            addMessage('bot', `Added "${item.name}"!`);
-            updateSelectionBox();
-        }
-    };
-    buttonContainer.appendChild(addButton);
-
-    itemDiv.appendChild(buttonContainer);
-    itemsGrid.appendChild(itemDiv);
-
-    chatMessages.appendChild(itemsGrid);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-
 function displayOptions(options) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
@@ -474,7 +429,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: `Hi ${userName}! 🍳 Search for a dish like "chicken" or add items below!` }
+        { role: 'bot', message: `Hi ${userName}! 🍳 Search for a dish or choose a preference below!` }
     ];
     selectedItems = [];
     selectionBoxVisible = true;