Update static/script.js

static/script.js

@@ -175,6 +175,50 @@ function displayIngredientsList(ingredients) {
         ingredientsList.appendChild(item);
     });
 }
+function displayMenuItems(menuItems) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for menu items!');
+        return;
+    }
+
+    let menuItemsList = document.querySelector('.menu-items-list');
+    if (!menuItemsList) {
+        menuItemsList = document.createElement('div');
+        menuItemsList.className = 'menu-items-list';
+        chatMessages.appendChild(menuItemsList);
+    } else {
+        menuItemsList.innerHTML = '';
+    }
+
+    menuItems.forEach(item => {
+        const menuItem = document.createElement('div');
+        menuItem.className = 'menu-item';
+        const img = document.createElement('img');
+        img.src = item.image_url || 'https://via.placeholder.com/80';
+        img.alt = item.name;
+        const name = document.createElement('div');
+        name.textContent = item.name;
+        name.style.textAlign = 'center';
+        name.style.marginTop = '5px';
+        name.style.fontSize = '12px';
+        const button = document.createElement('button');
+        button.textContent = 'Add to Cart';
+        button.onclick = () => {
+            selectedMenuItem = item;
+            addMessage('bot', `World-class selection! Would you like to customize your dish further?`);
+            const options = [
+                { text: 'Yes', class: 'green' },
+                { text: 'No', class: 'red' }
+            ];
+            displayOptions(options);
+        };
+        menuItem.appendChild(img);
+        menuItem.appendChild(name);
+        menuItem.appendChild(button);
+        menuItemsList.appendChild(menuItem);
+    });
+}
 
 function displaySelectedIngredients() {
     const chatMessages = document.getElementById('chatMessages');
@@ -310,7 +354,28 @@ function displayOptions(options) {
     };
     chatMessages.appendChild(backButton);
 }
-
+function fetchMenuItems(ingredientNames) {
+    fetch('/get_menu_items', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ ingredient_names: ingredientNames })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            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 selected ingredients:');
+            displayMenuItems(menuItems);
+        }
+    })
+    .catch(error => {
+        addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
+    });
+}
 document.getElementById('userInput').addEventListener('keypress', function(e) {
     if (e.key === 'Enter') {
         sendMessage();