Update static/script.js

static/script.js

@@ -111,13 +111,13 @@ function fetchIngredients(foodPreference) {
     });
 }
 
-function fetchMenuItems(category) {
+function fetchMenuItems(ingredient) {
     fetch('/get_menu_items', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ category: category })
+        body: JSON.stringify({ ingredient: ingredient })
     })
     .then(response => response.json())
     .then(data => {
@@ -125,8 +125,19 @@ function fetchMenuItems(category) {
             addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
         } else {
             const menuItems = data.menu_items || [];
-            addMessage('bot', 'Here are some dishes based on your selection:');
-            displayMenuItems(menuItems);
+            if (menuItems.length > 0) {
+                let menuItemNames = menuItems.map(item => item.name).join(", ");
+                addMessage('bot', `Here are some items with ${ingredient}: ${menuItemNames}. Please select one:`);
+
+                // Create buttons for each menu item to select
+                const options = menuItems.map(item => ({
+                    text: item.name,
+                    class: 'blue',
+                }));
+                displayOptions(options);
+            } else {
+                addMessage('bot', `Sorry, no items found with ${ingredient}.`);
+            }
         }
     })
     .catch(error => {
@@ -134,6 +145,29 @@ function fetchMenuItems(category) {
     });
 }
 
+function displayOptions(options) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for options!');
+        return;
+    }
+    
+    options.forEach(opt => {
+        const button = document.createElement('button');
+        button.textContent = opt.text;
+        button.className = `option-button ${opt.class}`;
+        button.onclick = () => {
+            addMessage('user', opt.text);
+            conversation.push({ role: 'user', message: opt.text });
+            chatMessages.innerHTML = '';
+            conversation.forEach(msg => addMessage(msg.role, msg.message));
+            setTimeout(() => handleResponse(opt.text), 500);
+        };
+        chatMessages.appendChild(button);
+    });
+}
+
+
 function displayIngredientsList(ingredients) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {