Update static/script.js

static/script.js

@@ -74,43 +74,33 @@ function handleResponse(userInput) {
 }
 
 function displayOptions(options) {
-    const optionsContainer = document.getElementById('options-container');
-    if (!optionsContainer) {
-        console.error('Options container not found!');
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for options!');
         return;
     }
 
-    optionsContainer.innerHTML = ''; // Clear previous options if any
-
+    // Display each option as a chat message
     options.forEach(opt => {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'bot-message'; // This ensures the options look like bot messages
         const button = document.createElement('button');
         button.textContent = opt.text;
         button.className = `option-button ${opt.class}`;
+        
+        // When an option is clicked, treat it as a user response and trigger the appropriate handler
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });
             setTimeout(() => handleResponse(opt.text), 500);
         };
-        optionsContainer.appendChild(button);
-    });
 
-    optionsContainer.appendChild(document.createElement('br')); // Line break after options
+        messageDiv.appendChild(button);
+        chatMessages.appendChild(messageDiv); // Append the button inside a bot message container
+    });
 
-    // Optional 'Go Back' button functionality
-    if (conversation.length > 1) {
-        const backButton = document.createElement('button');
-        backButton.textContent = 'Go Back';
-        backButton.className = 'option-button';
-        backButton.onclick = () => {
-            if (conversation.length > 1) {
-                conversation.pop(); // Remove last message
-                chatMessages.innerHTML = ''; // Clear current messages
-                conversation.forEach(msg => addMessage(msg.role, msg.message)); // Re-render
-                setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
-            }
-        };
-        optionsContainer.appendChild(backButton);
-    }
+    // Scroll to the bottom of the chat container
+    chatMessages.scrollTop = chatMessages.scrollHeight;
 }