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 pick a 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 "paneer"!`;
+        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!`;
+        botResponse = `Fetching ${lowerInput} dishes...`;
         addMessage('bot', botResponse);
+        fetchMenuItems(lowerInput);
     } else {
         botResponse = `Looking for "${userInput}"...`;
         addMessage('bot', botResponse);
-        fetchMenuItems(userInput);
+        fetchMenuItems(null, userInput);
     }
 }
 
@@ -74,31 +75,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');
@@ -172,11 +161,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 +178,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 matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
             }
-            console.log(`Fetched 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);
         });
 }
 
@@ -424,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: `Hi ${userName}! 🍳 Search for a dish like "chicken" or "paneer"!` }
+        { role: 'bot', message: `Hi ${userName}! 🍳 Search for a dish or choose a preference below!` }
     ];
     selectedItems = [];
     selectionBoxVisible = true;