Update static/script.js

static/script.js

@@ -3,7 +3,6 @@ let conversation = [
 ];
 let selectedItems = [];
 let selectionBoxVisible = false;
-let filterBoxVisible = false;
 
 function addMessage(role, message) {
     const chatMessages = document.getElementById('chatMessages');
@@ -30,10 +29,9 @@ function sendMessage() {
         addMessage('user', message);
         conversation.push({ role: 'user', message: message });
         selectionBoxVisible = true;
-        filterBoxVisible = true;
         handleResponse(message);
     } else {
-        addMessage('bot', 'Please type a dish name to add! 😄');
+        addMessage('bot', 'Please type a dish name! 😄');
     }
     userInput.value = '';
     updateSelectionBox();
@@ -44,61 +42,23 @@ function handleResponse(userInput) {
     let botResponse = '';
 
     if (conversation.length === 2) {
-        botResponse = `Hi ${userInput}! 🍳 Type a dish name in the chat to add or use the filter box to browse items!`;
+        botResponse = `Hi ${userInput}! 🍳 Search for a dish like "chicken" or "paneer"!`;
         displayOptions([
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' },
             { text: 'Both', class: 'gray' }
         ]);
         addMessage('bot', botResponse);
-        createFilterBox();
     } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
-        botResponse = `Filtering ${lowerInput} items...`;
+        botResponse = `Selected ${lowerInput}. Search for a dish!`;
         addMessage('bot', botResponse);
-        fetchMenuItems('', lowerInput);
     } else {
-        botResponse = `Adding "${userInput}"...`;
+        botResponse = `Looking for "${userInput}"...`;
         addMessage('bot', botResponse);
-        fetchSectorItemDetails(userInput);
+        fetchMenuItems(userInput);
     }
 }
 
-function createFilterBox() {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) return;
-
-    const existingFilter = document.querySelector('.filter-box');
-    if (existingFilter) existingFilter.remove();
-
-    if (!filterBoxVisible) return;
-
-    const filterBox = document.createElement('div');
-    filterBox.className = 'filter-box';
-
-    const filterInput = document.createElement('input');
-    filterInput.type = 'text';
-    filterInput.placeholder = 'Type a letter (e.g., A) or item name...';
-    filterInput.className = 'filter-input';
-    filterInput.addEventListener('input', () => {
-        const value = filterInput.value.trim();
-        if (value.length === 1 && /[a-zA-Z]/.test(value)) {
-            fetchMenuItems(value.toUpperCase());
-        } else if (value.length === 0) {
-            addMessage('bot', 'Type a letter to filter items.');
-        }
-    });
-    filterInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter' && filterInput.value.trim()) {
-            fetchSectorItemDetails(filterInput.value.trim());
-            filterInput.value = '';
-        }
-    });
-    filterBox.appendChild(filterInput);
-
-    chatMessages.appendChild(filterBox);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-
 function updateSelectionBox() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) return;
@@ -114,19 +74,31 @@ function updateSelectionBox() {
     const vegButton = document.createElement('button');
     vegButton.textContent = 'Veg';
     vegButton.className = 'dietary-button green';
-    vegButton.onclick = () => fetchMenuItems('', 'vegetarian');
+    vegButton.onclick = () => {
+        addMessage('user', 'Vegetarian');
+        conversation.push({ role: 'user', message: 'Vegetarian' });
+        handleResponse('vegetarian');
+    };
     selectionBox.appendChild(vegButton);
 
     const nonVegButton = document.createElement('button');
     nonVegButton.textContent = 'Non-Veg';
     nonVegButton.className = 'dietary-button red';
-    nonVegButton.onclick = () => fetchMenuItems('', 'non-vegetarian');
+    nonVegButton.onclick = () => {
+        addMessage('user', 'Non-Vegetarian');
+        conversation.push({ role: 'user', message: 'Non-Vegetarian' });
+        handleResponse('non-vegetarian');
+    };
     selectionBox.appendChild(nonVegButton);
 
     const bothButton = document.createElement('button');
     bothButton.textContent = 'Both';
     bothButton.className = 'dietary-button gray';
-    bothButton.onclick = () => fetchMenuItems('', 'both');
+    bothButton.onclick = () => {
+        addMessage('user', 'Both');
+        conversation.push({ role: 'user', message: 'Both' });
+        handleResponse('both');
+    };
     selectionBox.appendChild(bothButton);
 
     const label = document.createElement('span');
@@ -160,6 +132,19 @@ function updateSelectionBox() {
         selectionBox.appendChild(itemContainer);
     });
 
+    const textInput = document.createElement('input');
+    textInput.type = 'text';
+    textInput.placeholder = 'Add item...';
+    textInput.className = 'manual-input';
+    textInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' && textInput.value.trim()) {
+            const itemName = textInput.value.trim();
+            fetchSectorItemDetails(itemName);
+            textInput.value = '';
+        }
+    });
+    selectionBox.appendChild(textInput);
+
     if (selectedItems.length > 0) {
         const quantityInput = document.createElement('input');
         quantityInput.type = 'number';
@@ -187,14 +172,11 @@ function updateSelectionBox() {
     console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category })));
 }
 
-function fetchMenuItems(letter = '', dietaryPreference = '') {
-    const payload = {};
-    if (letter) payload.letter = letter;
-    if (dietaryPreference) payload.dietary_preference = dietaryPreference;
+function fetchMenuItems(searchTerm) {
     fetch('/get_menu_items', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
+        body: JSON.stringify({ search_term: searchTerm })
     })
         .then(response => response.json())
         .then(data => {
@@ -204,13 +186,13 @@ function fetchMenuItems(letter = '', dietaryPreference = '') {
                 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 "${letter || dietaryPreference}". Try another letter!`);
+                addMessage('bot', `No matches for "${searchTerm}". Try "paneer"!`);
             }
-            console.log(`Fetched items (letter: ${letter}, dietary: ${dietaryPreference}):`, data.menu_items);
+            console.log(`Fetched items for ${searchTerm}:`, data.menu_items);
         })
         .catch(error => {
             addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
-            setTimeout(() => fetchMenuItems(letter, dietaryPreference), 2000);
+            setTimeout(() => fetchMenuItems(searchTerm), 2000);
         });
 }
 
@@ -271,7 +253,7 @@ function displayItemsList(items) {
     items.forEach(item => {
         const itemDiv = document.createElement('div');
         itemDiv.className = 'item-card';
-        itemDiv.dataset.hidden = 'true';
+        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';
@@ -287,16 +269,39 @@ function displayItemsList(items) {
         nameDiv.className = 'item-name';
         contentDiv.appendChild(nameDiv);
 
+        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', value: item.spice_levels },
+                { label: 'Category', value: item.category },
+                { label: 'Ingredients', value: item.ingredients },
+                { label: 'Nutrition', value: item.nutritional_info },
+                { label: 'Sector', value: item.sector },
+                { label: 'Dynamic', value: item.dynamic_dish ? 'Yes' : 'No' }
+            ];
+            fields.forEach(field => {
+                if (field.value) {
+                    const p = document.createElement('p');
+                    p.className = 'item-field';
+                    p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
+                    contentDiv.appendChild(p);
+                }
+            });
+        }
+
         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);
+        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';
@@ -310,6 +315,15 @@ function displayItemsList(items) {
                 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('bot', `"${selectedItem.name}" already selected!`);
             } else {
@@ -342,8 +356,11 @@ function displayOptions(options) {
         button.textContent = opt.text;
         button.className = `option-button ${opt.class}`;
         button.onclick = () => {
-            addMessage('bot', `Filtering ${opt.text.toLowerCase()} items...`);
-            fetchMenuItems('', opt.text.toLowerCase());
+            addMessage('user', opt.text);
+            conversation.push({ role: 'user', message: opt.text });
+            selectionBoxVisible = true;
+            handleResponse(opt.text);
+            updateSelectionBox();
         };
         optionsDiv.appendChild(button);
     });
@@ -407,11 +424,10 @@ 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}! 🍳 Type a dish name in the chat to add or use the filter box to browse items!` }
+        { role: 'bot', message: `Hi ${userName}! 🍳 Search for a dish like "chicken" or "paneer"!` }
     ];
     selectedItems = [];
     selectionBoxVisible = true;
-    filterBoxVisible = true;
     const chatMessages = document.getElementById('chatMessages');
     chatMessages.innerHTML = '';
     conversation.forEach(msg => addMessage(msg.role, msg.message));
@@ -420,7 +436,6 @@ function resetConversation() {
         { text: 'Non-Vegetarian', class: 'red' },
         { text: 'Both', class: 'gray' }
     ]);
-    createFilterBox();
     updateSelectionBox();
 }