Update static/script.js

static/script.js

@@ -118,6 +118,17 @@ function submitForm() {
     });
 }
 
+function clearOptions() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return;
+    const optionButtons = chatMessages.querySelectorAll('.bot-message .option-button');
+    optionButtons.forEach(button => {
+        if (button.parentElement) {
+            button.parentElement.remove();
+        }
+    });
+}
+
 function displayOptions(options, isCategory = false) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
@@ -125,6 +136,9 @@ function displayOptions(options, isCategory = false) {
         return;
     }
 
+    // Clear existing options before displaying new ones
+    clearOptions();
+
     options.forEach(opt => {
         const messageDiv = document.createElement('div');
         messageDiv.className = 'bot-message';
@@ -150,6 +164,27 @@ function displayOptions(options, isCategory = false) {
     chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
+function displayBackToCategoriesButton() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return;
+
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'bot-message';
+    const button = document.createElement('button');
+    button.textContent = 'Back to Categories';
+    button.className = 'option-button blue';
+
+    button.onclick = () => {
+        addMessage('user', 'Back to Categories');
+        conversation.push({ role: 'user', message: 'Back to Categories' });
+        setTimeout(() => handleResponse('back to categories'), 500);
+    };
+
+    messageDiv.appendChild(button);
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
 function handleResponse(userInput) {
     const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
     let botResponse = '';
@@ -219,13 +254,23 @@ function handleResponse(userInput) {
         return;
     }
 
+    // Handle "Back to Categories"
+    if (lastMessage === 'back to categories') {
+        botResponse = 'Please select a category to explore frequently asked questions:';
+        addMessage('bot', botResponse);
+        displayOptions(categories, true);
+        return;
+    }
+
     // Handle category selection
     if (categories.some(cat => cat.text.toLowerCase() === lastMessage)) {
+        currentCategory = userInput;
         botResponse = `Here are the questions in the "${userInput}" category:`;
         addMessage('bot', botResponse);
         options = faqOptions[userInput] || [];
         if (options.length > 0) {
             displayOptions(options); // Display FAQ options for the selected category
+            displayBackToCategoriesButton(); // Add a "Back to Categories" button
         }
         return;
     }
@@ -307,4 +352,8 @@ function handleResponse(userInput) {
     }
 
     addMessage('bot', botResponse);
+    // After displaying a FAQ response, show the "Back to Categories" button
+    if (faqOptions[currentCategory]) {
+        displayBackToCategoriesButton();
+    }
 }