Update templates/chef-bot.html

templates/chef-bot.html

@@ -252,7 +252,7 @@
             margin-right: 8px;
         }
 
-        .ingredient-select, .ingredient-info-input {
+        .ingredient-info-input {
             padding: 8px;
             border: 1px solid #b3d7ff;
             border-radius: 6px;
@@ -262,6 +262,21 @@
             margin: 5px;
         }
 
+        .ingredient-button {
+            padding: 8px 12px;
+            background-color: #6c757d;
+            color: #ffffff;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 13px;
+            margin: 5px;
+        }
+
+        .ingredient-button:hover {
+            background-color: #5a6268;
+        }
+
         .submit-button {
             padding: 10px 20px;
             background-color: #0078d4;
@@ -422,7 +437,7 @@
                 padding: 4px 8px;
             }
 
-            .ingredient-select, .ingredient-info-input {
+            .ingredient-info-input, .ingredient-button {
                 width: 120px;
                 font-size: 12px;
             }
@@ -625,27 +640,22 @@
                         itemSpan.textContent = `${itemName} (Qty: ${item.quantity || 1})`;
                         contentDiv.appendChild(itemSpan);
 
-                        // Ingredient Selector
-                        const ingredientSelect = document.createElement('select');
-                        ingredientSelect.className = 'ingredient-select';
-                        const defaultOption = document.createElement('option');
-                        defaultOption.value = '';
-                        defaultOption.textContent = 'Add ingredient...';
-                        ingredientSelect.appendChild(defaultOption);
+                        // Ingredient Buttons
+                        const ingredientButtonsDiv = document.createElement('div');
+                        ingredientButtonsDiv.style.display = 'flex';
+                        ingredientButtonsDiv.style.flexWrap = 'wrap';
+                        ingredientButtonsDiv.style.gap = '5px';
                         sectorIngredients.forEach(ingredient => {
-                            const option = document.createElement('option');
-                            option.value = ingredient.name;
-                            option.textContent = ingredient.name;
-                            ingredientSelect.appendChild(option);
+                            const ingredientButton = document.createElement('button');
+                            ingredientButton.textContent = ingredient.name;
+                            ingredientButton.className = 'ingredient-button';
+                            ingredientButton.onclick = () => {
+                                addMessage('bot', `Finding dishes with "${ingredient.name}"...`);
+                                fetchRelatedMenuItems(ingredient.name);
+                            };
+                            ingredientButtonsDiv.appendChild(ingredientButton);
                         });
-                        ingredientSelect.addEventListener('change', (e) => {
-                            const ingredientName = e.target.value;
-                            if (ingredientName) {
-                                addIngredientToItem(ingredientName, index);
-                                e.target.value = '';
-                            }
-                        });
-                        contentDiv.appendChild(ingredientSelect);
+                        contentDiv.appendChild(ingredientButtonsDiv);
 
                         // Ingredientsinfo Input
                         const ingredientInfoInput = document.createElement('input');
@@ -766,18 +776,28 @@
             }
         }
 
-        function addIngredientToItem(ingredientName, itemIndex) {
-            if (!selectedItems[itemIndex].additionalIngredients) {
-                selectedItems[itemIndex].additionalIngredients = [];
-            }
-            if (!selectedItems[itemIndex].additionalIngredients.includes(ingredientName)) {
-                selectedItems[itemIndex].additionalIngredients.push(ingredientName);
-                selectedItems[itemIndex].description += `, with ${ingredientName}`;
-                addMessage('bot', `Added "${ingredientName}" to "${selectedItems[itemIndex].name}"!`);
-            } else {
-                addMessage('bot', `"${ingredientName}" already added to "${selectedItems[itemIndex].name}"!`);
-            }
-            updateSelectionBox();
+        function fetchRelatedMenuItems(ingredientName) {
+            fetch('/get_related_menu_items', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ ingredient_name: ingredientName, dietary_preference: selectedPreference })
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.error) {
+                        addMessage('bot', `Error: ${data.error}. Try another ingredient!`);
+                    } else if (data.menu_items.length > 0) {
+                        addMessage('bot', `--- Found ${data.menu_items.length} dish${data.menu_items.length > 1 ? 'es' : ''} with "${ingredientName}" ---`);
+                        displayItemsList(data.menu_items);
+                    } else {
+                        addMessage('bot', `No dishes found with "${ingredientName}". Try another!`);
+                    }
+                    console.log(`Fetched related items for ${ingredientName}:`, data.menu_items);
+                })
+                .catch(error => {
+                    addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
+                    setTimeout(() => fetchRelatedMenuItems(ingredientName), 2000);
+                });
         }
 
         function displayItemsList(items) {