Update static/script.js

static/script.js

@@ -15,34 +15,6 @@ 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}`);
 }
@@ -95,7 +67,7 @@ function handleResponse(userInput) {
         return;
     } else if (lastMessage.includes('yes') && selectedMenuItem) {
         botResponse = 'Here are some ingredients to customize your dish:';
-        fetchIngredients('both'); // Fetch both veg and non-veg ingredients for customization
+        fetchIngredients('both');
         return;
     } else if (lastMessage.includes('no') && selectedMenuItem) {
         addToCart(selectedMenuItem);
@@ -137,13 +109,13 @@ function fetchIngredients(foodPreference) {
     });
 }
 
-function fetchMenuItems(ingredientNames) {
+function fetchMenuItems(category) {
     fetch('/get_menu_items', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ ingredient_names: ingredientNames })
+        body: JSON.stringify({ category: category })
     })
     .then(response => response.json())
     .then(data => {
@@ -151,7 +123,7 @@ function fetchMenuItems(ingredientNames) {
             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:');
+            addMessage('bot', 'Here are some dishes based on your selection:');
             displayMenuItems(menuItems);
         }
     })
@@ -167,10 +139,6 @@ 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');
@@ -213,10 +181,6 @@ 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');
@@ -262,10 +226,6 @@ 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');
@@ -315,6 +275,29 @@ 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) {
@@ -322,11 +305,7 @@ function displayCustomizationInput() {
         return;
     }
 
-    // Clear and re-render conversation
-    chatMessages.innerHTML = '';
-    conversation.forEach(msg => addMessage(msg.role, msg.message));
-
-    let customizationArea = document.querySelector('.customization-input');
+    let customizationArea = document.query|:querySelector('.customization-input');
     if (!customizationArea) {
         customizationArea = document.createElement('div');
         customizationArea.className = 'customization-input';
@@ -367,11 +346,6 @@ 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;
@@ -384,6 +358,25 @@ function displayOptions(options) {
         chatMessages.appendChild(button);
     });
     chatMessages.appendChild(document.createElement('br'));
+    if (conversation.length > 1) { // Ensure back button appears only when there's a previous step
+        const backButton = document.createElement('button');
+        backButton.textContent = 'Go Back';
+        backButton.className = 'option-button';
+        backButton.onclick = () => {
+            if (conversation.length > 1) {
+                conversation.pop(); // Remove the last conversation entry
+                selectedIngredients = []; // Clear selected ingredients if going back
+                selectedMenuItem = null; // Clear selected menu item
+                chatMessages.innerHTML = ''; // Clear current messages
+                conversation.forEach(msg => addMessage(msg.role, msg.message)); // Re-render conversation
+                // Trigger response based on the now-last message
+                if (conversation.length > 0) {
+                    setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
+                }
+            }
+        };
+        chatMessages.appendChild(backButton);
+    }
 }
 
 document.getElementById('userInput').addEventListener('keypress', function(e) {