fix js issue

app.py

@@ -45,7 +45,7 @@ except:
     # connect to index
     pinecone_index = pc.Index(index_name)
 
-bm25 = BM25Encoder().load("bm25_traveler_website.json")
+bm25 = BM25Encoder().load("./bm25_traveler_website.json")
 
 embed_model = HuggingFaceEmbeddings(model_name="Alibaba-NLP/gte-large-en-v1.5", model_kwargs={"trust_remote_code":True})
 
@@ -157,9 +157,9 @@ def handle_message(data):
             ):
                 emit('response', chunk, room=request.sid)
 
-app.route("/")
+@app.route("/")
 def index_view():
-    render_template('chat.html') 
+    return render_template('chat.html') 
 
 if __name__ == '__main__': 
     socketio.run(app, debug=True)

static/script.js

@@ -1,4 +1,4 @@
-const socket = io.connect('http://' + document.baseURI + ':' + location.port);
+const socket = io.connect(document.baseURI);
 
 const chatBox = document.getElementById('chat-box');
 const chatInput = document.getElementById('chat-input');
@@ -7,32 +7,40 @@ var converter = new showdown.Converter();
 var response="";
 
 function appendMessage(message, sender) {
-    last_message_ele = chatBox.children[chatBox.children.length - 2];
-    response += message;
-    message = converter.makeHtml(response);
-    if(last_message_ele && last_message_ele.classList.contains('bot')){
-        last_message_ele.lastChild.innerHTML  = message;
-    }else{
-        if(sender == 'bot'){
-            document.getElementById("loader").classList.add('hidden');
+    if(sender == "bot"){
+        response += message;
+        message = converter.makeHtml(response);
+
+        loader_ele = document.getElementById("loader");
+        
+        if(!loader_ele.classList.contains("hidden")){
+            loader_ele.classList.add('hidden');
+            const messageElement = document.createElement('div');
+            messageElement.classList.add('chat-message', sender);
+            messageElement.innerHTML = `<span>${message}</span>`;
+            chatBox.append(messageElement);
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }else{
+            last_message_ele = chatBox.lastElementChild.lastChild;
+            last_message_ele.innerHTML  = message;
         }
+    }else{
         const messageElement = document.createElement('div');
         messageElement.classList.add('chat-message', sender);
         messageElement.innerHTML = `<span>${message}</span>`;
-        if(sender == 'bot'){
-            chatBox.append(messageElement);
-        }else{
-            chatBox.prepend(messageElement);
-        }
+        chatBox.prepend(messageElement);
         chatBox.scrollTop = chatBox.scrollHeight;
+        setTimeout(() => {
+            document.getElementById("loader").classList.remove('hidden');
+        }, 500);
     }
+    chatBox.scrollTop = chatBox.scrollHeight;
 }
 
 sendButton.addEventListener('click', () => {
     const message = chatInput.value.trim();
     if (message) {
         appendMessage(message, 'user');
-        document.getElementById("loader").classList.remove('hidden');
         socket.emit('message', { question: message, session_id: 'abc123' });
         chatInput.value = '';
         response = "";

static/styles.css

@@ -4,6 +4,7 @@ body {
     margin: 0;
     padding: 0;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
@@ -42,7 +43,7 @@ body {
     background-color: #007bff;
     color: #fff;
     padding: 10px;
-    border-radius: 8px;
+    border-radius: 12px;
     display: inline-block;
     max-width: 70%;
 }
@@ -50,8 +51,8 @@ body {
 .chat-message.bot span {
     background-color: #e0e0e0;
     color: #333;
-    padding: 10px;
-    border-radius: 8px;
+    padding: 6px 10px;
+    border-radius: 12px;
     display: inline-block;
     max-width: 70%;
 }
@@ -89,7 +90,7 @@ body {
 .dot-loader {
     background-color: #e0e0e0;
     color: #333;
-    padding: 10px;
+    padding: 15px;
     border-radius: 8px;
     width: fit-content;
     display: flex;

templates/chat.html

@@ -7,11 +7,11 @@
     <link rel="stylesheet" href="../static/styles.css">
 </head>
 <body>
+    <h3>This is a RAG application over the website <a href="https://omkar0896.pythonanywhere.com/">https://omkar0896.pythonanywhere.com/</a></h3>
     <div class="chat-container">
         <div class="chat-box" id="chat-box">
 
             
-            <!-- Dot Loader element -->
             <div id="loader" class="dot-loader hidden">
                 <div></div>
                 <div></div>

templates/index.html

@@ -1,13 +0,0 @@
-<!-- templates/home.html -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Home</title>
-</head>
-<body>
-    <h1>Welcome to the Flask Chat App</h1>
-    <p><a href="/chat">Go to Chat</a></p>
-</body>
-</html>