Update static/script.js

static/script.js

@@ -15,6 +15,34 @@ function addMessage(role, message) {
     messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
     messageDiv.textContent = message;
     chatMessages.appendChild(messageDiv);
+
+    // Add "Go Back" button after bot messages, except for the initial greeting
+    if (role === 'bot' && conversation.length > 1) {
+        const backButton = document.createElement('button');
+        backButton.textContent = 'Go Back';
+        backButton.className = 'option-button';
+        backButton.onclick = () => {
+            // Remove the last user message and bot response
+            if (conversation.length > 1) {
+                conversation.pop(); // Remove bot response
+                if (conversation.length > 1) {
+                    conversation.pop(); // Remove user input
+                }
+                selectedIngredients = []; // Clear selected ingredients
+                selectedMenuItem = null; // Clear selected menu item
+                chatMessages.innerHTML = ''; // Clear chat
+                // Re-render conversation
+                conversation.forEach(msg => addMessage(msg.role, msg.message));
+                // Reprocess the last user input, if any
+                if (conversation.length > 1) {
+                    setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
+                }
+            }
+        };
+        chatMessages.appendChild(backButton);
+        chatMessages.appendChild(document.createElement('br'));
+    }
+
     chatMessages.scrollTop = chatMessages.scrollHeight;
     console.log(`Added ${role} message: ${message}`);
 }
@@ -47,15 +75,13 @@ function handleResponse(userInput) {
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' }
         ];
-    }else if (lastMessage.includes('non-vegetarian')) {
+    } else if (lastMessage.includes('non-vegetarian')) {
         conversation.push({ role: 'user', message: 'Non-Vegetarian' });
         console.log("Food preference selected: Non-Vegetarian");
         botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
         fetchIngredients('non-vegetarian');
         return;
-
-    }
-    else if (lastMessage.includes('vegetarian')) {
+    } else if (lastMessage.includes('vegetarian')) {
         conversation.push({ role: 'user', message: 'Vegetarian' });
         console.log("Food preference selected: Vegetarian");
         botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
@@ -69,7 +95,7 @@ function handleResponse(userInput) {
         return;
     } else if (lastMessage.includes('yes') && selectedMenuItem) {
         botResponse = 'Here are some ingredients to customize your dish:';
-        fetchIngredients('both');  // Fetch non-veg ingredients for customization
+        fetchIngredients('both'); // Fetch both veg and non-veg ingredients for customization
         return;
     } else if (lastMessage.includes('no') && selectedMenuItem) {
         addToCart(selectedMenuItem);
@@ -111,13 +137,13 @@ function fetchIngredients(foodPreference) {
     });
 }
 
-function fetchMenuItems(category) {
+function fetchMenuItems(ingredientNames) {
     fetch('/get_menu_items', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ category: category })
+        body: JSON.stringify({ ingredient_names: ingredientNames })
     })
     .then(response => response.json())
     .then(data => {
@@ -125,7 +151,7 @@ function fetchMenuItems(category) {
             addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
         } else {
             const menuItems = data.menu_items || [];
-            addMessage('bot', 'Here are some dishes based on your selection:');
+            addMessage('bot', 'Here are some dishes based on your selected ingredients:');
             displayMenuItems(menuItems);
         }
     })
@@ -141,6 +167,10 @@ function displayIngredientsList(ingredients) {
         return;
     }
 
+    // Clear and re-render conversation
+    chatMessages.innerHTML = '';
+    conversation.forEach(msg => addMessage(msg.role, msg.message));
+
     let ingredientsList = document.querySelector('.ingredients-list');
     if (!ingredientsList) {
         ingredientsList = document.createElement('div');
@@ -183,6 +213,10 @@ function displayMenuItems(menuItems) {
         return;
     }
 
+    // Clear and re-render conversation
+    chatMessages.innerHTML = '';
+    conversation.forEach(msg => addMessage(msg.role, msg.message));
+
     let menuItemsList = document.querySelector('.menu-items-list');
     if (!menuItemsList) {
         menuItemsList = document.createElement('div');
@@ -228,6 +262,10 @@ function displaySelectedIngredients() {
         return;
     }
 
+    // Clear and re-render conversation
+    chatMessages.innerHTML = '';
+    conversation.forEach(msg => addMessage(msg.role, msg.message));
+
     let selectedArea = document.querySelector('.selected-ingredients');
     if (!selectedArea) {
         selectedArea = document.createElement('div');
@@ -266,10 +304,7 @@ function submitIngredients() {
     .then(response => response.json())
     .then(data => {
         if (data.success) {
-            // Extract the ingredient names from the selectedIngredients array
             const ingredientNames = selectedIngredients.map(ingredient => ingredient.name.toLowerCase()).join(' ');
-
-            // Fetch menu items based on ingredient names
             fetchMenuItems(ingredientNames);
         } else {
             addMessage('bot', 'There was an issue submitting your ingredients. Please try again.');
@@ -280,30 +315,6 @@ function submitIngredients() {
     });
 }
 
-function fetchMenuItems(ingredientNames) {
-    fetch('/get_menu_items', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ ingredient_names: ingredientNames })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.error) {
-            addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
-        } else {
-            const menuItems = data.menu_items || [];
-            addMessage('bot', 'Here are some dishes based on your selected ingredients:');
-            displayMenuItems(menuItems);
-        }
-    })
-    .catch(error => {
-        addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
-    });
-}
-
-
 function displayCustomizationInput() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
@@ -311,6 +322,10 @@ function displayCustomizationInput() {
         return;
     }
 
+    // Clear and re-render conversation
+    chatMessages.innerHTML = '';
+    conversation.forEach(msg => addMessage(msg.role, msg.message));
+
     let customizationArea = document.querySelector('.customization-input');
     if (!customizationArea) {
         customizationArea = document.createElement('div');
@@ -352,6 +367,11 @@ function displayOptions(options) {
         console.error('Chat messages container not found for options!');
         return;
     }
+
+    // Clear and re-render conversation
+    chatMessages.innerHTML = '';
+    conversation.forEach(msg => addMessage(msg.role, msg.message));
+
     options.forEach(opt => {
         const button = document.createElement('button');
         button.textContent = opt.text;
@@ -359,25 +379,11 @@ function displayOptions(options) {
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });
-            chatMessages.innerHTML = '';
-            conversation.forEach(msg => addMessage(msg.role, msg.message));
             setTimeout(() => handleResponse(opt.text), 500);
         };
         chatMessages.appendChild(button);
     });
     chatMessages.appendChild(document.createElement('br'));
-    const backButton = document.createElement('button');
-    backButton.textContent = 'Go Back';
-    backButton.className = 'option-button';
-    backButton.onclick = () => {
-        conversation.pop();
-        selectedIngredients = [];
-        selectedMenuItem = null;
-        chatMessages.innerHTML = '';
-        conversation.forEach(msg => addMessage(msg.role, msg.message));
-        setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
-    };
-    chatMessages.appendChild(backButton);
 }
 
 document.getElementById('userInput').addEventListener('keypress', function(e) {