Update static/script.js

static/script.js

@@ -120,15 +120,22 @@ function displayIngredientsList(ingredients) {
     }
 
     ingredients.forEach(ingredient => {
+        const item = document.createElement('div');
+        item.className = 'ingredient-item';
+        const img = document.createElement('img');
+        img.src = ingredient.image_url || 'https://via.placeholder.com/80'; // Fallback image
+        img.alt = ingredient.name;
         const button = document.createElement('button');
-        button.textContent = ingredient;
+        button.textContent = 'Add';
         button.onclick = () => {
-            if (!selectedIngredients.includes(ingredient)) {
+            if (!selectedIngredients.some(item => item.name === ingredient.name)) {
                 selectedIngredients.push(ingredient);
                 displaySelectedIngredients();
             }
         };
-        ingredientsList.appendChild(button);
+        item.appendChild(img);
+        item.appendChild(button);
+        ingredientsList.appendChild(item);
     });
 }
 
@@ -145,17 +152,15 @@ function displaySelectedIngredients() {
         selectedArea = document.createElement('div');
         selectedArea.className = 'selected-ingredients';
         chatMessages.appendChild(selectedArea);
-    }
-
-    const textarea = selectedArea.querySelector('textarea') || document.createElement('textarea');
-    textarea.value = selectedIngredients.join('\n');
-    textarea.onchange = () => {
-        selectedIngredients = textarea.value.split('\n').filter(item => item.trim() !== '');
-    };
-    if (!selectedArea.contains(textarea)) {
+    } else {
         selectedArea.innerHTML = '';
-        selectedArea.appendChild(textarea);
     }
+
+    selectedIngredients.forEach(ingredient => {
+        const div = document.createElement('div');
+        div.textContent = ingredient.name;
+        selectedArea.appendChild(div);
+    });
 }
 
 function displayOptions(options) {
@@ -183,8 +188,8 @@ function displayOptions(options) {
     backButton.className = 'option-button';
     backButton.onclick = () => {
         conversation.pop(); // Remove last user input
-        chatMessages.innerHTML = ''; // Clear previous messages
         selectedIngredients = []; // Clear selected ingredients
+        chatMessages.innerHTML = ''; // Clear previous messages
         conversation.forEach(msg => addMessage(msg.role, msg.message));
         setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
     };