Update static/script.js

static/script.js

@@ -94,6 +94,7 @@ function fetchNewStepIngredients() {
             addMessage('bot', 'Please select ingredients to add to your dish:');
             // Call the new function to display ingredients without the Submit button
             displayIngredientsWithoutSubmit(ingredients); // Show ingredients here without the submit button
+             displayMenuItemIngredientsWithoutSubmit(selectedMenuItem);  
             //displaySelectedIngredients(); // Optionally display the selected ingredients in a different area
             // Then show the customization box for instructions
             //displayCustomizationInput(); // Show the customization input below
@@ -155,6 +156,60 @@ function displayIngredientsWithoutSubmit(ingredients) {
         ingredientsList.appendChild(item);
     });
 }
+// Display selected ingredients for a menu item (without submit button)
+function displayMenuItemIngredientsWithoutSubmit(menuItem) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for ingredients!');
+        return;
+    }
+
+    // Create or find the menu item ingredients list container
+    let ingredientsList = document.querySelector(`.ingredients-list-for-${menuItem.name}`);
+    if (!ingredientsList) {
+        ingredientsList = document.createElement('div');
+        ingredientsList.className = `ingredients-list-for-${menuItem.name}`;
+        ingredientsList.style.overflowX = 'auto';  // Enable horizontal scrolling
+        ingredientsList.style.whiteSpace = 'nowrap';  // Prevent line breaks to make it horizontal scroll
+        chatMessages.appendChild(ingredientsList);
+    } else {
+        ingredientsList.innerHTML = '';  // Clear previous content
+    }
+
+    // Loop through each selected ingredient and display it with the "Add" button
+    menuItem.ingredients.forEach(ingredient => {
+        const item = document.createElement('div');
+        item.className = 'ingredient-item';
+        item.style.display = 'inline-block'; // Align items horizontally
+        item.style.marginRight = '10px'; // Add some space between items
+        item.style.textAlign = 'center'; // Center align the ingredient name and button
+
+        const img = document.createElement('img');
+        img.src = ingredient.image_url || 'https://via.placeholder.com/80';
+        img.alt = ingredient.name;
+        img.style.width = '80px'; // Set the image size
+        img.style.height = '80px'; // Set the image size
+
+        const name = document.createElement('div');
+        name.textContent = ingredient.name;
+        name.style.marginTop = '5px';
+        name.style.fontSize = '12px'; // Adjust the font size of the name
+
+        const button = document.createElement('button');
+        button.textContent = 'Add';
+        button.onclick = () => {
+            if (!selectedIngredients.some(item => item.name === ingredient.name)) {
+                selectedIngredients.push(ingredient); // Add ingredient to the selected list
+                displayMenuItemIngredientsWithoutSubmit(menuItem); // Update the list of selected ingredients
+            }
+        };
+
+        item.appendChild(img);
+        item.appendChild(name);
+        item.appendChild(button);
+        ingredientsList.appendChild(item);
+    });
+}
 
 // Display the fetched ingredients
 function displayIngredientsList(ingredients) {