resolve continuous chat error"

static/script.js

@@ -6,15 +6,34 @@ const sendButton = document.getElementById('send-button');
 var converter = new showdown.Converter();
 var response="";
 
+
+function addLoader(){
+    // loader_ele = `
+    //     <div class="dot-loader">
+    //         <div></div>
+    //         <div></div>
+    //         <div></div>
+    //     </div>
+    // `
+    const loader_ele = document.createElement('div');
+    loader_ele.classList.add('dot-loader');
+    loader_ele.innerHTML = `
+            <div></div>
+            <div></div>
+            <div></div>
+    `;
+    chatBox.appendChild(loader_ele);
+}
+
 function appendMessage(message, sender) {
     if(sender == "bot"){
         response += message;
         message = converter.makeHtml(response);
 
-        loader_ele = document.getElementById("loader");
+        let loader_ele = chatBox.lastElementChild;
         
         if(!loader_ele.classList.contains("hidden")){
-            loader_ele.classList.add('hidden');
+            chatBox.removeChild(loader_ele);
             const messageElement = document.createElement('div');
             messageElement.classList.add('chat-message', sender);
             messageElement.innerHTML = `<span>${message}</span>`;
@@ -23,15 +42,16 @@ function appendMessage(message, sender) {
         }else{
             last_message_ele = chatBox.lastElementChild.lastChild;
             last_message_ele.innerHTML  = message;
+            chatBox.scrollTop = chatBox.scrollHeight;
         }
     }else{
         const messageElement = document.createElement('div');
         messageElement.classList.add('chat-message', sender);
         messageElement.innerHTML = `<span>${message}</span>`;
-        chatBox.prepend(messageElement);
+        chatBox.append(messageElement);
         chatBox.scrollTop = chatBox.scrollHeight;
         setTimeout(() => {
-            document.getElementById("loader").classList.remove('hidden');
+            addLoader()
         }, 500);
     }
     chatBox.scrollTop = chatBox.scrollHeight;
@@ -42,6 +62,9 @@ sendButton.addEventListener('click', () => {
     if (message) {
         appendMessage(message, 'user');
         socket.emit('message', { question: message, session_id: 'abc123' });
+        // setInterval(()=>{
+        //     appendMessage("This is a test message", "bot");
+        // }, 2000)
         chatInput.value = '';
         response = "";
     }

static/styles.css

@@ -91,7 +91,7 @@ body {
     background-color: #e0e0e0;
     color: #333;
     padding: 15px;
-    border-radius: 8px;
+    border-radius: 10px;
     width: fit-content;
     display: flex;
     justify-content: center;

templates/chat.html

@@ -12,11 +12,7 @@
         <div class="chat-box" id="chat-box">
 
             
-            <div id="loader" class="dot-loader hidden">
-                <div></div>
-                <div></div>
-                <div></div>
-            </div>
+            
         </div>
         <div class="input-container">
             <input type="text" id="chat-input" placeholder="Type your message here...">