Update static/script.js

static/script.js

@@ -54,10 +54,9 @@ function handleResponse(userInput) {
         currentStep = 'ingredients';
         botResponse = 'Great choice! 🍽️ Please select your ingredients from the list below.';
     } else if (currentStep === 'ingredients' && selectedIngredients.length > 0) {
-        // No automatic transition; wait for "Send" button
+        // Wait for "Send" button
         return;
     } else if (currentStep === 'recipes') {
-        // Handle back button logic if needed
         if (lastMessage.includes('back')) {
             if (conversation.length > 2) {
                 conversation.pop(); // Remove 'back'
@@ -69,6 +68,13 @@ function handleResponse(userInput) {
                     conversation.forEach(msg => addMessage(msg.role, msg.message));
                     handleResponse(prevMessage);
                     return;
+                } else if (prevMessage.includes('send')) {
+                    currentStep = 'ingredients';
+                    chatMessages.innerHTML = '';
+                    conversation.forEach(msg => addMessage(msg.role, msg.message));
+                    displaySelectedIngredients();
+                    addSendButton();
+                    return;
                 }
             }
         }
@@ -79,9 +85,8 @@ function handleResponse(userInput) {
         displayOptions(options);
     } else if (currentStep === 'ingredients') {
         fetchIngredients(lastMessage);
-        addSendButton();
     } else if (currentStep === 'recipes') {
-        displayBackButton();
+        displayBackButton(); // Ensure back button is available
     }
 }
 
@@ -99,7 +104,6 @@ function fetchIngredients(dietaryPreference) {
             const ingredients = data.ingredients || [];
             addMessage('bot', 'Great choice! These are available ingredients:');
             displayIngredientsList(ingredients);
-            displaySelectedIngredients();
         }
     })
     .catch(error => {
@@ -147,6 +151,8 @@ function displayIngredientsList(ingredients) {
         item.appendChild(button);
         ingredientsList.appendChild(item);
     });
+    displaySelectedIngredients(); // Show selected ingredients below
+    addSendButton(); // Add Send button below ingredients
 }
 
 function displaySelectedIngredients() {
@@ -165,11 +171,15 @@ function displaySelectedIngredients() {
         selectedArea.innerHTML = '';
     }
 
-    selectedIngredients.forEach(ingredient => {
-        const div = document.createElement('div');
-        div.textContent = ingredient.name;
-        selectedArea.appendChild(div);
-    });
+    if (selectedIngredients.length > 0) {
+        selectedIngredients.forEach(ingredient => {
+            const div = document.createElement('div');
+            div.textContent = ingredient.name;
+            selectedArea.appendChild(div);
+        });
+    } else {
+        selectedArea.innerHTML = '<div>No ingredients selected yet.</div>';
+    }
 }
 
 function addSendButton() {
@@ -207,7 +217,6 @@ function generateRecipes() {
             currentStep = 'recipes';
             addMessage('bot', 'Here are 5 South Indian recipes based on your ingredients:');
             displayRecipes(data.recipes);
-            displayBackButton();
         }
     })
     .catch(error => {
@@ -234,14 +243,23 @@ function displayRecipes(recipes) {
         const desc = document.createElement('div');
         desc.textContent = recipe.description;
         desc.style.fontSize = '12px';
-        const button = document.createElement('button');
-        button.textContent = 'Add to Cart';
-        button.className = 'option-button';
-        button.onclick = () => showPopup(recipe);
+        const addButton = document.createElement('button');
+        addButton.textContent = 'Add to Cart';
+        addButton.className = 'option-button';
+        addButton.onclick = () => showPopup(recipe);
+        const backButton = document.createElement('button');
+        backButton.textContent = 'Back';
+        backButton.className = 'option-button';
+        backButton.onclick = () => {
+            addMessage('user', 'Back');
+            conversation.push({ role: 'user', message: 'Back' });
+            handleResponse('Back');
+        };
         item.appendChild(img);
         item.appendChild(name);
         item.appendChild(desc);
-        item.appendChild(button);
+        item.appendChild(addButton);
+        item.appendChild(backButton);
         chatMessages.appendChild(item);
     });
 }
@@ -266,21 +284,14 @@ function closePopup() {
     if (popup) popup.style.display = 'none';
 }
 
-function displayBackButton() {
+function resetChat() {
+    conversation = [{ role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }];
+    selectedIngredients = [];
+    currentStep = 'name';
     const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) return;
-
-    let backButton = document.querySelector('.back-button');
-    if (!backButton) {
-        backButton = document.createElement('button');
-        backButton.textContent = 'Back';
-        backButton.className = 'option-button back-button';
-        backButton.onclick = () => {
-            addMessage('user', 'Back');
-            conversation.push({ role: 'user', message: 'Back' });
-            handleResponse('Back');
-        };
-        chatMessages.appendChild(backButton);
+    if (chatMessages) {
+        chatMessages.innerHTML = '';
+        addMessage('bot', conversation[0].message);
     }
 }