Update templates/index.html

templates/index.html

@@ -47,15 +47,9 @@
                     <span id="fileName" class="ml-2 text-gray-600"></span>
                 </div>
 
-                <!-- Chat Messages with improved scrolling -->
+                <!-- Chat Messages -->
                 <div id="chatMessages" class="flex-1 overflow-y-auto mb-4 space-y-4 bg-gray-50 p-4 rounded-lg">
-                    {% for message in messages %}
-                    <div class="flex {% if message.role == 'user' %}justify-end{% endif %}">
-                        <div class="max-w-3/4 p-3 rounded-lg {% if message.role == 'user' %}bg-blue-500 text-white{% else %}bg-gray-200{% endif %}">
-                            {{ message.content }}
-                        </div>
-                    </div>
-                    {% endfor %}
+                    <!-- Messages will be displayed here -->
                 </div>
 
                 <!-- Input Area -->
@@ -75,6 +69,7 @@
     </div>
 
     <script>
+        // Global variables
         const messageInput = document.getElementById('messageInput');
         const chatMessages = document.getElementById('chatMessages');
         const webSearchToggle = document.getElementById('webSearchToggle');
@@ -85,6 +80,7 @@
         let conversations = [];
         let currentConversationId = null;
 
+        // Conversation Management
         function startNewConversation() {
             const conversationId = Date.now().toString();
             const conversation = {
@@ -111,15 +107,28 @@
         }
 
         function loadConversation(conversationId) {
+            if (conversationId === currentConversationId) return;
+            
             currentConversationId = conversationId;
             const conversation = conversations.find(c => c.id === conversationId);
             updateConversationsList();
             
             if (conversation) {
                 clearChatMessages();
+                
                 conversation.messages.forEach(msg => {
-                    addMessage(msg.content, msg.isUser);
+                    const messageDiv = document.createElement('div');
+                    messageDiv.className = `flex ${msg.isUser ? 'justify-end' : ''}`;
+                    
+                    const innerDiv = document.createElement('div');
+                    innerDiv.className = `max-w-3/4 p-3 rounded-lg ${msg.isUser ? 'bg-blue-500 text-white' : 'bg-gray-200'}`;
+                    innerDiv.innerHTML = marked.parse(msg.content);
+                    
+                    messageDiv.appendChild(innerDiv);
+                    chatMessages.appendChild(messageDiv);
                 });
+                
+                chatMessages.scrollTop = chatMessages.scrollHeight;
             }
         }
 
@@ -139,7 +148,6 @@
             chatMessages.appendChild(messageDiv);
             chatMessages.scrollTop = chatMessages.scrollHeight;
 
-            // Save message to current conversation
             if (currentConversationId) {
                 const conversation = conversations.find(c => c.id === currentConversationId);
                 if (conversation) {
@@ -148,6 +156,7 @@
             }
         }
 
+        // Message Handling
         async function sendMessage() {
             const message = messageInput.value.trim();
             if (!message) return;
@@ -183,12 +192,7 @@
             }
         }
 
-        messageInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                sendMessage();
-            }
-        });
-
+        // File Upload Handling
         fileUpload.addEventListener('change', async (e) => {
             const file = e.target.files[0];
             if (!file) return;
@@ -214,9 +218,19 @@
             }
         });
 
+        // Chat Clear Handling
         async function clearChat() {
             try {
-                await fetch('/clear_chat', { method: 'POST' });
+                await fetch('/clear_chat', { 
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        conversation_id: currentConversationId
+                    })
+                });
+                
                 if (currentConversationId) {
                     const conversation = conversations.find(c => c.id === currentConversationId);
                     if (conversation) {
@@ -229,7 +243,14 @@
             }
         }
 
-        // Start with a new conversation
+        // Event Listeners
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+
+        // Initialize
         startNewConversation();
     </script>
 </body>