Update static/script.js

static/script.js

@@ -3,6 +3,7 @@ let conversation = [
 ];
 let selectedItems = [];
 let selectionBoxVisible = false;
+let filterBoxVisible = false;
 
 function addMessage(role, message) {
     const chatMessages = document.getElementById('chatMessages');
@@ -29,9 +30,10 @@ 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! 😄');
+        addMessage('bot', 'Please type a dish name to add! 😄');
     }
     userInput.value = '';
     updateSelectionBox();
@@ -42,23 +44,61 @@ function handleResponse(userInput) {
     let botResponse = '';
 
     if (conversation.length === 2) {
-        botResponse = `Hi ${userInput}! 🍳 Search for a dish like "chicken" or "paneer"!`;
+        botResponse = `Hi ${userInput}! 🍳 Type a dish name in the chat to add or use the filter box to browse items!`;
         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 = `Selected ${lowerInput}. Search for a dish!`;
+        botResponse = `Filtering ${lowerInput} items...`;
         addMessage('bot', botResponse);
+        fetchMenuItems('', lowerInput);
     } else {
-        botResponse = `Looking for "${userInput}"...`;
+        botResponse = `Adding "${userInput}"...`;
         addMessage('bot', botResponse);
-        fetchMenuItems(userInput);
+        fetchSectorItemDetails(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;
@@ -74,31 +114,19 @@ function updateSelectionBox() {
     const vegButton = document.createElement('button');
     vegButton.textContent = 'Veg';
     vegButton.className = 'dietary-button green';
-    vegButton.onclick = () => {
-        addMessage('user', 'Vegetarian');
-        conversation.push({ role: 'user', message: 'Vegetarian' });
-        handleResponse('vegetarian');
-    };
+    vegButton.onclick = () => fetchMenuItems('', 'vegetarian');
     selectionBox.appendChild(vegButton);
 
     const nonVegButton = document.createElement('button');
     nonVegButton.textContent = 'Non-Veg';
     nonVegButton.className = 'dietary-button red';
-    nonVegButton.onclick = () => {
-        addMessage('user', 'Non-Vegetarian');
-        conversation.push({ role: 'user', message: 'Non-Vegetarian' });
-        handleResponse('non-vegetarian');
-    };
+    nonVegButton.onclick = () => fetchMenuItems('', 'non-vegetarian');
     selectionBox.appendChild(nonVegButton);
 
     const bothButton = document.createElement('button');
     bothButton.textContent = 'Both';
     bothButton.className = 'dietary-button gray';
-    bothButton.onclick = () => {
-        addMessage('user', 'Both');
-        conversation.push({ role: 'user', message: 'Both' });
-        handleResponse('both');
-    };
+    bothButton.onclick = () => fetchMenuItems('', 'both');
     selectionBox.appendChild(bothButton);
 
     const label = document.createElement('span');
@@ -132,19 +160,6 @@ 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';
@@ -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(letter = '', dietaryPreference = '') {
+    const payload = {};
+    if (letter) payload.letter = letter;
+    if (dietaryPreference) payload.dietary_preference = dietaryPreference;
     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 "paneer"!`);
+                addMessage('bot', `No items found for "${letter || dietaryPreference}". Try another letter!`);
             }
-            console.log(`Fetched items for ${searchTerm}:`, data.menu_items);
+            console.log(`Fetched items (letter: ${letter}, dietary: ${dietaryPreference}):`, data.menu_items);
         })
         .catch(error => {
             addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
-            setTimeout(() => fetchMenuItems(searchTerm), 2000);
+            setTimeout(() => fetchMenuItems(letter, dietaryPreference), 2000);
         });
 }
 
@@ -253,7 +271,7 @@ function displayItemsList(items) {
     items.forEach(item => {
         const itemDiv = document.createElement('div');
         itemDiv.className = 'item-card';
-        itemDiv.dataset.hidden = item.source === 'Sector_Detail__c' ? 'true' : 'false';
+        itemDiv.dataset.hidden = 'true';
 
         const img = document.createElement('img');
         img.src = item.image_url || 'https://via.placeholder.com/60';
@@ -269,39 +287,16 @@ 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';
 
-        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 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';
@@ -315,15 +310,6 @@ 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 {
@@ -356,11 +342,8 @@ function displayOptions(options) {
         button.textContent = opt.text;
         button.className = `option-button ${opt.class}`;
         button.onclick = () => {
-            addMessage('user', opt.text);
-            conversation.push({ role: 'user', message: opt.text });
-            selectionBoxVisible = true;
-            handleResponse(opt.text);
-            updateSelectionBox();
+            addMessage('bot', `Filtering ${opt.text.toLowerCase()} items...`);
+            fetchMenuItems('', opt.text.toLowerCase());
         };
         optionsDiv.appendChild(button);
     });
@@ -424,10 +407,11 @@ 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 "paneer"!` }
+        { role: 'bot', message: `Hi ${userName}! 🍳 Type a dish name in the chat to add or use the filter box to browse items!` }
     ];
     selectedItems = [];
     selectionBoxVisible = true;
+    filterBoxVisible = true;
     const chatMessages = document.getElementById('chatMessages');
     chatMessages.innerHTML = '';
     conversation.forEach(msg => addMessage(msg.role, msg.message));
@@ -436,6 +420,7 @@ function resetConversation() {
         { text: 'Non-Vegetarian', class: 'red' },
         { text: 'Both', class: 'gray' }
     ]);
+    createFilterBox();
     updateSelectionBox();
 }