Update static/script.js

static/script.js

@@ -47,8 +47,8 @@ function handleResponse(userInput) {
             { text: 'Both', class: 'gray' }
         ];
     } else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
-        botResponse = `Great choice! 🍽️ These are the available ingredients for ${lastMessage} (including any "Both" category):`;
-        fetchIngredients(lastMessage.toLowerCase());
+        botResponse = `Great choice! 🍽️ These are the available ingredients for ${lastMessage}:`;
+        fetchIngredients(lastMessage);
         return;
     }
 
@@ -75,7 +75,6 @@ function fetchIngredients(dietaryPreference) {
             addMessage('bot', 'Great choice! These are available ingredients:');
             displayIngredientsList(ingredients);
             displaySelectedIngredients();
-            // Log ingredients to console for debugging
             console.log(`Ingredients fetched for ${dietaryPreference}:`, ingredients);
         }
     })
@@ -107,7 +106,7 @@ function displayIngredientsList(ingredients) {
         img.src = ingredient.image_url || 'https://via.placeholder.com/80';
         img.alt = ingredient.name;
         const name = document.createElement('div');
-        name.textContent = ingredient.name; // Removed category from display
+        name.textContent = ingredient.name;
         name.style.textAlign = 'center';
         name.style.marginTop = '5px';
         name.style.fontSize = '12px';
@@ -144,7 +143,7 @@ function displaySelectedIngredients() {
 
     selectedIngredients.forEach(ingredient => {
         const div = document.createElement('div');
-        div.textContent = ingredient.name; // Removed category from display
+        div.textContent = ingredient.name;
         selectedArea.appendChild(div);
     });
 }
@@ -155,6 +154,8 @@ function displayOptions(options) {
         console.error('Chat messages container not found for options!');
         return;
     }
+    // Clear existing options and messages
+    chatMessages.innerHTML = '';
     options.forEach(opt => {
         const button = document.createElement('button');
         button.textContent = opt.text;
@@ -162,9 +163,7 @@ function displayOptions(options) {
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });
-            chatMessages.innerHTML = ''; // Clear previous messages
-            conversation.forEach(msg => addMessage(msg.role, msg.message));
-            setTimeout(() => handleResponse(opt.text), 500);
+            handleResponse(opt.text); // Directly handle response without clearing
         };
         chatMessages.appendChild(button);
     });
@@ -173,11 +172,16 @@ function displayOptions(options) {
     backButton.textContent = 'Go Back';
     backButton.className = 'option-button';
     backButton.onclick = () => {
-        conversation.pop(); // Remove last user input
+        conversation = [{ role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }]; // Reset conversation
         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);
+        chatMessages.innerHTML = ''; // Clear messages
+        const userName = conversation[0].message.split('!')[0].split('name?')[0].trim().split(' ')[4]; // Extract name
+        addMessage('bot', `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?`);
+        displayOptions([
+            { text: 'Vegetarian', class: 'green' },
+            { text: 'Non-Vegetarian', class: 'red' },
+            { text: 'Both', class: 'gray' }
+        ]);
     };
     chatMessages.appendChild(backButton);
 }