Update static/script.js

static/script.js

@@ -1,6 +1,7 @@
 let conversation = [
     { role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }
 ];
+let selectedIngredients = [];
 
 function addMessage(role, message) {
     const chatMessages = document.getElementById('chatMessages');
@@ -92,11 +93,8 @@ function fetchIngredients(dietaryPreference) {
         } else {
             const ingredients = data.ingredients || [];
             addMessage('bot', 'Great choice! These are available ingredients:');
-            if (ingredients.length > 0) {
-                ingredients.forEach(ingredient => addMessage('bot', `- ${ingredient}`));
-            } else {
-                addMessage('bot', '- No ingredients available.');
-            }
+            displayIngredientsList(ingredients);
+            displaySelectedIngredients();
         }
     })
     .catch(error => {
@@ -104,6 +102,62 @@ function fetchIngredients(dietaryPreference) {
     });
 }
 
+function displayIngredientsList(ingredients) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for ingredients!');
+        return;
+    }
+
+    // Create or update ingredients list
+    let ingredientsList = document.querySelector('.ingredients-list');
+    if (!ingredientsList) {
+        ingredientsList = document.createElement('div');
+        ingredientsList.className = 'ingredients-list';
+        chatMessages.appendChild(ingredientsList);
+    } else {
+        ingredientsList.innerHTML = '';
+    }
+
+    ingredients.forEach(ingredient => {
+        const button = document.createElement('button');
+        button.textContent = ingredient;
+        button.onclick = () => {
+            if (!selectedIngredients.includes(ingredient)) {
+                selectedIngredients.push(ingredient);
+                displaySelectedIngredients();
+            }
+        };
+        ingredientsList.appendChild(button);
+    });
+}
+
+function displaySelectedIngredients() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for selected ingredients!');
+        return;
+    }
+
+    // Create or update selected ingredients area
+    let selectedArea = document.querySelector('.selected-ingredients');
+    if (!selectedArea) {
+        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)) {
+        selectedArea.innerHTML = '';
+        selectedArea.appendChild(textarea);
+    }
+}
+
 function displayOptions(options) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
@@ -130,6 +184,7 @@ function displayOptions(options) {
     backButton.onclick = () => {
         conversation.pop(); // Remove last user input
         chatMessages.innerHTML = ''; // Clear previous messages
+        selectedIngredients = []; // Clear selected ingredients
         conversation.forEach(msg => addMessage(msg.role, msg.message));
         setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
     };