Update static/script.js

static/script.js

@@ -87,12 +87,16 @@ function handleResponse(userInput) {
     }
 }
 function handleYesResponse() {
-    const botResponse = 'Here are your selected ingredients along with more ingredients to customize your dish:';
+    const botResponse = 'Here is your selected dish:';
     addMessage('bot', botResponse);
 
-    // Fetch both ingredients (selected and new ingredients for customization)
-    fetchIngredientsForCustomization('both'); 
+    // Display the selected menu item (Name, Image, etc.)
+    
+
+    // Fetch ingredients for customization (both veg and non-veg)
+    fetchIngredientsForCustomization('both');
 }
+
 function fetchIngredientsForCustomization(foodPreference) {
     fetch('/get_ingredients_for_customization', {
         method: 'POST',
@@ -123,55 +127,51 @@ function displayCustomizationIngredients(ingredients) {
         return;
     }
 
+    // Clear previous ingredient lists
     let ingredientsList = document.querySelector('.customization-ingredients-list');
     if (!ingredientsList) {
         ingredientsList = document.createElement('div');
         ingredientsList.className = 'customization-ingredients-list';
         chatMessages.appendChild(ingredientsList);
     } else {
-        ingredientsList.innerHTML = ''; // Clear previous list
+        ingredientsList.innerHTML = '';  // Clear previous list
     }
 
-    // Apply styles directly within the script for layout
-    ingredientsList.style.display = 'flex';
-    ingredientsList.style.overflowX = 'auto';
-    ingredientsList.style.whiteSpace = 'nowrap';
-    ingredientsList.style.flexWrap = 'wrap';  // Allow wrapping if items overflow
-
-    // Display new ingredients
+    // **Display Selected Menu Item First** (inside this function)
+    const selectedItemDiv = document.createElement('div');
+    selectedItemDiv.className = 'selected-menu-item';
+    
+    // Show the selected menu item
+    const itemName = document.createElement('div');
+    itemName.className = 'menu-item-name';
+    itemName.textContent = selectedMenuItem.name;
+    selectedItemDiv.appendChild(itemName);
+
+    const itemImage = document.createElement('img');
+    itemImage.src = selectedMenuItem.image_url || 'https://via.placeholder.com/150';
+    itemImage.alt = selectedMenuItem.name;
+    selectedItemDiv.appendChild(itemImage);
+
+    const itemDescription = document.createElement('div');
+    itemDescription.className = 'menu-item-description';
+    itemDescription.textContent = selectedMenuItem.description || 'No description available.';
+    selectedItemDiv.appendChild(itemDescription);
+
+    // Append selected menu item to the ingredient list container
+    ingredientsList.appendChild(selectedItemDiv);
+
+    // **Display New Ingredients Below the Menu Item** 
     ingredients.forEach(ingredient => {
         const item = document.createElement('div');
         item.className = 'ingredient-item';
-
-        // Styling for each item (flex and width)
-        item.style.flexShrink = '0';  // Prevent shrinking
-        item.style.marginRight = '10px';  // Space between items
-        item.style.width = '20%';  // Adjust width for responsiveness
-
-        // Create and append image
         const img = document.createElement('img');
         img.src = ingredient.image_url || 'https://via.placeholder.com/80';
         img.alt = ingredient.name;
-        img.style.width = '100%';   // Make image fill the container
-        img.style.height = 'auto';  // Maintain aspect ratio
-        item.appendChild(img);
-
-        // Create and append name
         const name = document.createElement('div');
         name.textContent = ingredient.name;
         name.style.textAlign = 'center';
         name.style.marginTop = '5px';
         name.style.fontSize = '12px';
-        item.appendChild(name);
-
-        // Create and append the text box (input)
-        const inputBox = document.createElement('input');
-        inputBox.type = 'text';
-        inputBox.placeholder = 'Enter details';
-        inputBox.style.marginTop = '5px';
-        item.appendChild(inputBox);
-
-        // Create and append button
         const button = document.createElement('button');
         button.textContent = 'Add';
         button.onclick = () => {
@@ -180,15 +180,16 @@ function displayCustomizationIngredients(ingredients) {
                 displaySelectedCustomizationIngredients();
             }
         };
+        item.appendChild(img);
+        item.appendChild(name);
         item.appendChild(button);
-
-        // Append the item to the list
         ingredientsList.appendChild(item);
     });
 }
 
 
 
+
 function displaySelectedCustomizationIngredients() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {