Update app.py

app.py

@@ -35,7 +35,7 @@
                     </div>
                     <h1 class="text-xl font-semibold">Chat Flow</h1>
                 </div>
-                <button id="new-chat-btn" class="w-full flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
+                <button id="newChatBtn" class="w-full flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                     <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                         <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                     </svg>
@@ -43,40 +43,22 @@
                 </button>
             </div>
 
-            <!-- Chat History -->
-            <div class="flex-1 overflow-y-auto p-4 chat-scroll">
-                <h3 class="text-sm font-medium text-gray-400 mb-3">💬 Chat History</h3>
-                <div id="sessions-list" class="space-y-2">
-                    <p class="text-gray-500 text-sm">No previous chats yet</p>
-                </div>
-            </div>
-
             <!-- Settings -->
-            <div class="p-4 border-t border-gray-700 space-y-4">
+            <div class="p-4 border-t border-gray-700 space-y-4 flex-1">
                 <!-- Online Users -->
                 <div>
                     <h3 class="text-sm font-medium text-gray-400 mb-2">👥 Who's Online</h3>
                     <div class="flex items-center gap-2 text-sm mb-2">
                         <div class="w-2 h-2 bg-green-500 rounded-full"></div>
-                        <span id="online-status">Just you online</span>
+                        <span id="onlineStatus">Just you online</span>
                     </div>
-                    
-                    <!-- User Details -->
-                    <div class="bg-gray-700 rounded-lg p-3 mb-2 max-h-32 overflow-y-auto chat-scroll">
-                        <div id="users-list" class="space-y-1 text-xs">
-                            <div class="text-green-400">🟢 <span id="current-user-info">You: Loading...</span></div>
-                        </div>
-                    </div>
-                    
-                    <button id="refresh-users-btn" class="w-full text-xs px-2 py-1 bg-gray-600 hover:bg-gray-500 rounded transition-colors">
-                        🔄 Refresh Users
-                    </button>
+                    <div class="text-xs text-gray-500" id="currentUser">You: Loading...</div>
                 </div>
 
                 <!-- Model Selection -->
                 <div>
                     <label class="block text-sm font-medium text-gray-400 mb-2">AI Model</label>
-                    <select id="model-select" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <select id="modelSelect" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                         <option value="openai/gpt-3.5-turbo">GPT-3.5 Turbo</option>
                         <option value="meta-llama/llama-3.1-8b-instruct">LLaMA 3.1 8B</option>
                         <option value="meta-llama/llama-3.1-70b-instruct">LLaMA 3.1 70B</option>
@@ -88,28 +70,23 @@
                         <option value="google/gemma-3-4b-it:free">Gemma 3 4B</option>
                         <option value="openrouter/auto">Auto (Best Available)</option>
                     </select>
-                    <p class="text-xs text-green-400 mt-1 font-mono" id="model-id">openai/gpt-3.5-turbo</p>
+                    <p class="text-xs text-green-400 mt-1 font-mono" id="modelId">openai/gpt-3.5-turbo</p>
                 </div>
 
                 <!-- API Status -->
                 <div class="flex items-center gap-2 text-sm">
-                    <div id="api-dot" class="w-2 h-2 rounded-full bg-green-500"></div>
-                    <span id="api-status">🟢 API Connected</span>
+                    <div id="apiDot" class="w-2 h-2 rounded-full bg-green-500"></div>
+                    <span id="apiStatus">🟢 API Connected</span>
                 </div>
 
                 <!-- Controls -->
                 <div class="flex gap-2">
-                    <button id="download-btn" class="flex-1 flex items-center justify-center px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-sm" title="Download History">
-                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
-                        </svg>
-                    </button>
-                    <button id="clear-btn" class="flex-1 flex items-center justify-center px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-sm" title="Clear Chat">
+                    <button id="clearBtn" class="flex-1 flex items-center justify-center px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-sm" title="Clear Chat">
                         <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                             <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                         </svg>
                     </button>
-                    <button id="refresh-btn" class="flex-1 flex items-center justify-center px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-sm" title="Refresh">
+                    <button id="refreshBtn" class="flex-1 flex items-center justify-center px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-sm" title="Refresh">
                         <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                             <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                         </svg>
@@ -121,9 +98,9 @@
         <!-- Main Chat Area -->
         <div class="flex-1 flex flex-col">
             <!-- Chat Messages -->
-            <div id="messages-container" class="flex-1 overflow-y-auto chat-scroll">
+            <div id="messagesContainer" class="flex-1 overflow-y-auto chat-scroll">
                 <!-- Welcome Screen -->
-                <div id="welcome-screen" class="h-full flex items-center justify-center">
+                <div id="welcomeScreen" class="h-full flex items-center justify-center">
                     <div class="text-center max-w-md mx-auto px-4">
                         <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-6">
                             <svg class="w-8 h-8 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
@@ -136,7 +113,7 @@
                 </div>
 
                 <!-- Messages Area -->
-                <div id="messages-area" class="p-6 space-y-6 max-w-4xl mx-auto" style="display: none;">
+                <div id="messagesArea" class="p-6 space-y-6 max-w-4xl mx-auto" style="display: none;">
                 </div>
             </div>
 
@@ -144,16 +121,14 @@
             <div class="border-t border-gray-700 p-4">
                 <div class="max-w-4xl mx-auto">
                     <div class="flex gap-3">
-                        <div class="flex-1 relative">
-                            <input 
-                                type="text" 
-                                id="message-input"
-                                placeholder="Chat Smarter. Chat many Brains"
-                                class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                            />
-                        </div>
+                        <input 
+                            type="text" 
+                            id="messageInput"
+                            placeholder="Chat Smarter. Chat many Brains"
+                            class="flex-1 px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        />
                         <button 
-                            id="send-button"
+                            id="sendBtn"
                             class="px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg transition-colors flex items-center gap-2"
                         >
                             <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
@@ -163,7 +138,7 @@
                         </button>
                     </div>
                     <div class="mt-2 text-center">
-                        <span class="text-xs text-gray-500">Currently using: <strong id="current-model-name">GPT-3.5 Turbo</strong></span>
+                        <span class="text-xs text-gray-500">Currently using: <strong id="currentModelName">GPT-3.5 Turbo</strong></span>
                     </div>
                 </div>
             </div>
@@ -172,14 +147,12 @@
 
     <script>
         // 🔑 OpenRouter API Key
-        const OPENROUTER_API_KEY = "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";
+        const API_KEY = "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";
         
         // Global variables
         let messages = [];
-        let sessions = [];
-        let currentSessionId = 'default';
-        let isLoading = false;
         let selectedModel = 'openai/gpt-3.5-turbo';
+        let isLoading = false;
         let userId = 'User-' + Math.random().toString(36).substr(2, 8);
 
         const models = {
@@ -195,387 +168,175 @@
             'openrouter/auto': 'Auto (Best Available)'
         };
 
-        // Initialize
-        document.addEventListener('DOMContentLoaded', async function() {
-            console.log('DOM loaded, initializing app...');
-            
-            // Setup all event listeners first
+        // Initialize app
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('App starting...');
             setupEventListeners();
-            
-            // Get user location first (one time only)
-            await getUserLocation();
-            console.log('User location obtained:', currentUserLocation);
-            
-            // Initialize database with current user only
-            updateOnlineUsers();
-            checkAPIStatus();
-            
-            // Initialize send button text
-            const sendButton = document.getElementById('send-button');
-            if (sendButton) {
-                sendButton.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg> Send';
-            }
-            
-            // Update users display every 30 seconds (like Streamlit file checking)
-            setInterval(updateOnlineUsers, 30000);
-            
-            // Track user activity (but don't add fake users)
-            document.addEventListener('click', trackActivity);
-            document.addEventListener('keypress', trackActivity);
-            document.addEventListener('scroll', trackActivity);
-            
-            console.log('App initialization complete');
+            updateUserDisplay();
+            console.log('App ready!');
         });
 
         function setupEventListeners() {
-            console.log('Setting up event listeners...');
-            
-            // Model selection
-            const modelSelect = document.getElementById('model-select');
-            if (modelSelect) {
-                modelSelect.addEventListener('change', function(e) {
-                    selectedModel = e.target.value;
-                    document.getElementById('model-id').textContent = selectedModel;
-                    document.getElementById('current-model-name').textContent = models[selectedModel];
-                    console.log('Model changed to:', selectedModel);
-                });
-            }
-
-            // Enter key to send message
-            const messageInput = document.getElementById('message-input');
-            if (messageInput) {
-                messageInput.addEventListener('keydown', function(e) {
-                    if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault();
-                        console.log('Enter key pressed, sending message...');
-                        sendMessage();
-                    }
-                });
-                console.log('Message input event listener added');
-            }
+            // Send button
+            document.getElementById('sendBtn').onclick = function() {
+                console.log('Send button clicked');
+                sendMessage();
+            };
 
-            // Send button click
-            const sendButton = document.getElementById('send-button');
-            if (sendButton) {
-                sendButton.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    console.log('Send button clicked, sending message...');
+            // Enter key
+            document.getElementById('messageInput').onkeypress = function(e) {
+                if (e.key === 'Enter') {
+                    console.log('Enter pressed');
                     sendMessage();
-                });
-                console.log('Send button event listener added');
-            }
-
-            // New chat button
-            const newChatBtn = document.getElementById('new-chat-btn');
-            if (newChatBtn) {
-                newChatBtn.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    console.log('New chat button clicked');
-                    startNewChat();
-                });
-            }
+                }
+            };
 
-            // Download button
-            const downloadBtn = document.getElementById('download-btn');
-            if (downloadBtn) {
-                downloadBtn.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    console.log('Download button clicked');
-                    downloadHistory();
-                });
-            }
+            // Model selection
+            document.getElementById('modelSelect').onchange = function(e) {
+                selectedModel = e.target.value;
+                document.getElementById('modelId').textContent = selectedModel;
+                document.getElementById('currentModelName').textContent = models[selectedModel];
+                console.log('Model changed to:', selectedModel);
+            };
 
-            // Clear button
-            const clearBtn = document.getElementById('clear-btn');
-            if (clearBtn) {
-                clearBtn.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    console.log('Clear button clicked');
-                    clearChat();
-                });
-            }
+            // New chat
+            document.getElementById('newChatBtn').onclick = function() {
+                messages = [];
+                updateDisplay();
+                console.log('New chat started');
+            };
 
-            // Refresh button
-            const refreshBtn = document.getElementById('refresh-btn');
-            if (refreshBtn) {
-                refreshBtn.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    console.log('Refresh button clicked');
-                    window.location.reload();
-                });
-            }
+            // Clear chat
+            document.getElementById('clearBtn').onclick = function() {
+                messages = [];
+                updateDisplay();
+                console.log('Chat cleared');
+            };
 
-            // Refresh users button
-            const refreshUsersBtn = document.getElementById('refresh-users-btn');
-            if (refreshUsersBtn) {
-                refreshUsersBtn.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    console.log('Refresh users button clicked');
-                    refreshUsers();
-                });
-            }
+            // Refresh
+            document.getElementById('refreshBtn').onclick = function() {
+                window.location.reload();
+            };
 
-            console.log('All event listeners set up successfully');
+            console.log('Event listeners setup complete');
         }
 
         async function sendMessage() {
-            console.log('sendMessage function called');
-            
-            const input = document.getElementById('message-input');
-            if (!input) {
-                console.error('Message input not found');
-                return;
-            }
-            
+            const input = document.getElementById('messageInput');
             const message = input.value.trim();
-            console.log('Message to send:', message);
+            
+            console.log('Sending message:', message);
             
             if (!message || isLoading) {
-                console.log('No message or already loading');
+                console.log('No message or loading');
                 return;
             }
 
-            // Track activity when sending message
-            trackActivity();
-
             // Add user message
-            const userMessage = {
+            messages.push({
                 role: 'user',
-                content: message,
-                timestamp: new Date().toISOString()
-            };
+                content: message
+            });
 
-            messages.push(userMessage);
             input.value = '';
-            console.log('User message added to messages array');
-            
-            // Add empty assistant message for streaming
-            const assistantMessage = {
-                role: 'assistant',
-                content: '',
-                timestamp: new Date().toISOString()
-            };
-            messages.push(assistantMessage);
-            
-            updateMessagesDisplay();
+            updateDisplay();
             setLoading(true);
 
             try {
-                console.log('Calling getAIResponse...');
-                // The streaming will update the message in real-time
-                await getAIResponse(message);
-                
-                // Track activity after receiving response
-                trackActivity();
-                console.log('AI response completed');
+                const response = await getAIResponse(message);
+                messages.push({
+                    role: 'assistant', 
+                    content: response
+                });
+                updateDisplay();
             } catch (error) {
-                console.error('Error getting AI response:', error);
-                // Replace the empty message with error
-                messages[messages.length - 1].content = 'Sorry, I encountered an error. Please try again.';
-                updateMessagesDisplay();
+                console.error('Error:', error);
+                messages.push({
+                    role: 'assistant',
+                    content: 'Sorry, there was an error. Please try again.'
+                });
+                updateDisplay();
             }
 
             setLoading(false);
         }
 
         async function getAIResponse(userMessage) {
-            if (!OPENROUTER_API_KEY || OPENROUTER_API_KEY === "YOUR_API_KEY_HERE") {
-                throw new Error("Please add your OpenRouter API key to the code.");
-            }
-
-            const url = "https://openrouter.ai/api/v1/chat/completions";
-            const headers = {
-                "Content-Type": "application/json",
-                "Authorization": "Bearer " + OPENROUTER_API_KEY,
-                "HTTP-Referer": "https://huggingface.co/spaces",
-                "X-Title": "Chat Flow AI Assistant"
-            };
-
-            const cleanMessages = messages.slice(0, -1).map(msg => ({
-                role: msg.role,
-                content: msg.content.split('\n\n---\n*Response created by:')[0]
-            }));
-
-            const apiMessages = [
-                { role: "system", content: "You are a helpful AI assistant. Provide clear and helpful responses." }
-            ].concat(cleanMessages).concat([
-                { role: "user", content: userMessage }
-            ]);
-
-            const data = {
-                model: selectedModel,
-                messages: apiMessages,
-                stream: true,
-                max_tokens: 2000,
-                temperature: 0.7
-            };
-
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    headers: headers,
-                    body: JSON.stringify(data)
-                });
-
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    throw new Error("API Error: " + response.status + " - " + errorText);
+            console.log('Getting AI response...');
+            
+            const apiMessages = [{
+                role: "system", 
+                content: "You are a helpful AI assistant."
+            }];
+            
+            messages.forEach(msg => {
+                if (msg.role !== 'assistant' || !msg.content.includes('Response created by:')) {
+                    apiMessages.push({
+                        role: msg.role,
+                        content: msg.content.split('\n\n---\n*Response created by:')[0]
+                    });
                 }
+            });
 
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let fullResponse = "";
-                
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-                    
-                    const chunk = decoder.decode(value, { stream: true });
-                    const lines = chunk.split('\n');
-                    
-                    for (const line of lines) {
-                        if (line.trim() === '') continue;
-                        
-                        if (line.startsWith('data: ')) {
-                            const data = line.slice(6).trim();
-                            
-                            if (data === '[DONE]') {
-                                const modelName = models[selectedModel] || "AI";
-                                const finalResponse = fullResponse + "\n\n---\n*Response created by: **" + modelName + "***";
-                                
-                                // Update final message
-                                messages[messages.length - 1].content = finalResponse;
-                                updateMessagesDisplay();
-                                return finalResponse;
-                            }
-                            
-                            if (data === '') continue;
-                            
-                            try {
-                                const parsed = JSON.parse(data);
-                                const delta = parsed.choices?.[0]?.delta?.content;
-                                
-                                if (delta) {
-                                    fullResponse += delta;
-                                    // Update streaming message immediately
-                                    updateStreamingMessage(fullResponse);
-                                }
-                            } catch (e) {
-                                // Skip invalid JSON
-                                continue;
-                            }
-                        }
-                    }
-                }
-                
-                const modelName = models[selectedModel] || "AI";
-                const finalResponse = fullResponse + "\n\n---\n*Response created by: **" + modelName + "***";
-                messages[messages.length - 1].content = finalResponse;
-                updateMessagesDisplay();
-                return finalResponse;
-                
-            } catch (error) {
-                console.error('Streaming error:', error);
-                throw error;
-            }
-        }
+            const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+                method: 'POST',
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": "Bearer " + API_KEY,
+                    "HTTP-Referer": "https://huggingface.co/spaces",
+                    "X-Title": "Chat Flow AI Assistant"
+                },
+                body: JSON.stringify({
+                    model: selectedModel,
+                    messages: apiMessages,
+                    max_tokens: 2000,
+                    temperature: 0.7
+                })
+            });
 
-        function updateStreamingMessage(partialResponse) {
-            // Update the last message in real-time
-            if (messages.length > 0) {
-                const lastMessage = messages[messages.length - 1];
-                if (lastMessage.role === 'assistant') {
-                    lastMessage.content = partialResponse;
-                    
-                    // Update display with streaming cursor
-                    const messagesArea = document.getElementById('messages-area');
-                    const messageElements = messagesArea.children;
-                    
-                    if (messageElements.length > 0) {
-                        const lastMessageElement = messageElements[messageElements.length - 1];
-                        const contentDiv = lastMessageElement.querySelector('.whitespace-pre-wrap');
-                        if (contentDiv) {
-                            contentDiv.textContent = partialResponse + " ▌";
-                        }
-                    }
-                    
-                    // Auto scroll
-                    messagesArea.scrollTop = messagesArea.scrollHeight;
-                }
+            if (!response.ok) {
+                throw new Error('API Error: ' + response.status);
             }
-        }
 
-        function setLoading(loading) {
-            isLoading = loading;
-            const button = document.getElementById('send-button');
-            const input = document.getElementById('message-input');
+            const data = await response.json();
+            const aiResponse = data.choices[0].message.content;
+            const modelName = models[selectedModel] || "AI";
             
-            if (button && input) {
-                if (loading) {
-                    button.disabled = true;
-                    input.disabled = true;
-                    button.innerHTML = '<div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div> Loading...';
-                } else {
-                    button.disabled = false;
-                    input.disabled = false;
-                    button.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg> Send';
-                }
-            }
+            return aiResponse + "\n\n---\n*Response created by: **" + modelName + "***";
         }
 
-        function updateMessagesDisplay() {
-            const welcomeScreen = document.getElementById('welcome-screen');
-            const messagesArea = document.getElementById('messages-area');
-            
+        function updateDisplay() {
+            const welcome = document.getElementById('welcomeScreen');
+            const messagesArea = document.getElementById('messagesArea');
+
             if (messages.length === 0) {
-                welcomeScreen.style.display = 'flex';
+                welcome.style.display = 'flex';
                 messagesArea.style.display = 'none';
                 return;
             }
 
-            welcomeScreen.style.display = 'none';
+            welcome.style.display = 'none';
             messagesArea.style.display = 'block';
-            
+
             let html = '';
-            messages.forEach((message, index) => {
-                const isUser = message.role === 'user';
-                const avatar = isUser 
-                    ? '<div class="w-6 h-6 bg-blue-600 rounded-full"></div>'
-                    : '<svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
-                
-                let content = message.content;
+            messages.forEach(msg => {
+                const isUser = msg.role === 'user';
+                const avatar = isUser ? 
+                    '<div class="w-6 h-6 bg-blue-600 rounded-full"></div>' :
+                    '<svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
+
+                let content = msg.content;
                 let attribution = '';
-                
-                // Handle streaming messages
-                if (message.role === 'assistant') {
-                    if (content === '' && isLoading) {
-                        // Show loading dots for empty assistant message
-                        content = '';
-                        html += `
-                            <div class="flex gap-4">
-                                <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center flex-shrink-0">
-                                    ${avatar}
-                                </div>
-                                <div class="flex-1">
-                                    <div class="flex items-center gap-2 text-gray-400">
-                                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce loading-dot-1"></div>
-                                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce loading-dot-2"></div>
-                                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce loading-dot-3"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        `;
-                        return;
-                    } else if (content.includes('---\n*Response created by:')) {
-                        const parts = content.split('\n\n---\n*Response created by:');
-                        content = parts[0];
-                        if (parts[1]) {
-                            const modelName = parts[1].replace(/\*\*/g, '').replace(/\*/g, '');
-                            attribution = '<div class="text-xs text-gray-500 mt-2 italic">Response created by: <strong>' + modelName + '</strong></div>';
-                        }
+
+                if (msg.role === 'assistant' && content.includes('---\n*Response created by:')) {
+                    const parts = content.split('\n\n---\n*Response created by:');
+                    content = parts[0];
+                    if (parts[1]) {
+                        const modelName = parts[1].replace(/\*\*/g, '').replace(/\*/g, '');
+                        attribution = '<div class="text-xs text-gray-500 mt-2 italic">Response created by: <strong>' + modelName + '</strong></div>';
                     }
                 }
-                
+
                 html += `
                     <div class="flex gap-4">
                         <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center flex-shrink-0">
@@ -588,263 +349,29 @@
                     </div>
                 `;
             });
-            
+
             messagesArea.innerHTML = html;
             messagesArea.scrollTop = messagesArea.scrollHeight;
         }
 
-        function startNewChat() {
-            if (messages.length > 0) {
-                const title = generateChatTitle(messages);
-                const newSession = {
-                    id: 'session-' + Date.now(),
-                    title: title,
-                    messages: messages.slice(),
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString()
-                };
-                sessions.unshift(newSession);
-                updateSessionsList();
-            }
-            
-            messages = [];
-            currentSessionId = 'session-' + Date.now();
-            updateMessagesDisplay();
-        }
-
-        function generateChatTitle(msgs) {
-            if (!msgs || msgs.length === 0) return "New Chat";
-            const firstUserMessage = msgs.find(m => m.role === 'user');
-            if (!firstUserMessage) return "New Chat";
-            const content = firstUserMessage.content;
-            return content.length > 30 ? content.substring(0, 30) + "..." : content;
-        }
-
-        function updateSessionsList() {
-            const sessionsList = document.getElementById('sessions-list');
-            
-            if (sessions.length === 0) {
-                sessionsList.innerHTML = '<p class="text-gray-500 text-sm">No previous chats yet</p>';
-                return;
-            }
-            
-            let html = '';
-            sessions.forEach(session => {
-                const isCurrent = session.id === currentSessionId;
-                html += `
-                    <div class="group flex items-center gap-2">
-                        <button onclick="loadSession('${session.id}')" class="flex-1 text-left px-3 py-2 rounded-lg transition-colors ${isCurrent ? 'bg-blue-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-300'}">
-                            <div class="text-sm font-medium truncate">${session.title}</div>
-                            <div class="text-xs text-gray-400">${new Date(session.updatedAt).toLocaleDateString()}</div>
-                        </button>
-                        <button onclick="deleteSession('${session.id}')" class="opacity-0 group-hover:opacity-100 p-1 text-gray-400 hover:text-red-400 transition-all">
-                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
-                        </button>
-                    </div>
-                `;
-            });
-            
-            sessionsList.innerHTML = html;
-        }
-
-        function loadSession(sessionId) {
-            const session = sessions.find(s => s.id === sessionId);
-            if (!session) return;
-            
-            messages = session.messages.slice();
-            currentSessionId = sessionId;
-            updateMessagesDisplay();
-            updateSessionsList();
-        }
-
-        function deleteSession(sessionId) {
-            sessions = sessions.filter(s => s.id !== sessionId);
-            if (sessionId === currentSessionId) {
-                startNewChat();
-            }
-            updateSessionsList();
-        }
-
-        function clearChat() {
-            messages = [];
-            updateMessagesDisplay();
-        }
-
-        function downloadHistory() {
-            const dataStr = JSON.stringify(messages, null, 2);
-            const dataBlob = new Blob([dataStr], { type: 'application/json' });
-            const url = URL.createObjectURL(dataBlob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = 'chat_history_' + new Date().toISOString().split('T')[0] + '.json';
-            link.click();
-            URL.revokeObjectURL(url);
-        }
-
-        // Real database-style user tracking (like Streamlit version)
-        let userDatabase = new Map(); // Simulates your database file
-        let currentUserLocation = { city: 'Unknown', country: 'Unknown' };
-        let isGettingLocation = false;
-
-        // Get user's real location (one time only)
-        async function getUserLocation() {
-            if (isGettingLocation || currentUserLocation.city !== 'Unknown') return currentUserLocation;
-            isGettingLocation = true;
-            
-            try {
-                // Try geolocation API first
-                if (navigator.geolocation) {
-                    const position = await new Promise((resolve, reject) => {
-                        navigator.geolocation.getCurrentPosition(resolve, reject, {
-                            timeout: 10000,
-                            enableHighAccuracy: false
-                        });
-                    });
-                    
-                    const { latitude, longitude } = position.coords;
-                    
-                    // Use reverse geocoding to get city and country
-                    try {
-                        const response = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=en`);
-                        const data = await response.json();
-                        
-                        currentUserLocation = {
-                            city: data.city || data.locality || 'Unknown',
-                            country: data.countryName || 'Unknown'
-                        };
-                    } catch (geocodeError) {
-                        console.log('Geocoding failed, using IP fallback');
-                        await getLocationByIP();
-                    }
-                } else {
-                    await getLocationByIP();
-                }
-            } catch (error) {
-                console.log('Geolocation failed, using IP fallback');
-                await getLocationByIP();
-            }
-            
-            return currentUserLocation;
-        }
-
-        // Fallback: Get location by IP (one time only)
-        async function getLocationByIP() {
-            try {
-                const response = await fetch('https://ipapi.co/json/');
-                const data = await response.json();
-                
-                currentUserLocation = {
-                    city: data.city || 'Unknown',
-                    country: data.country_name || 'Unknown'
-                };
-            } catch (error) {
-                console.log('IP location failed');
-                currentUserLocation = { city: 'Unknown', country: 'Unknown' };
-            }
-        }
-
-        // Database-style user management (exactly like your Streamlit)
-        function updateOnlineUsers() {
-            const now = Date.now();
-            
-            // Add/update current user in database
-            userDatabase.set(userId, {
-                id: userId,
-                location: currentUserLocation,
-                lastSeen: now,
-                isCurrentUser: true
-            });
-            
-            // Clean up users not seen in last 5 minutes (like your Streamlit HISTORY_FILE logic)
-            const fiveMinutesAgo = now - (5 * 60 * 1000);
-            for (const [id, userData] of userDatabase.entries()) {
-                if (!userData.isCurrentUser && userData.lastSeen < fiveMinutesAgo) {
-                    userDatabase.delete(id);
-                }
-            }
-            
-            updateUsersDisplay();
-        }
-
-        function updateUsersDisplay() {
-            const count = userDatabase.size;
-            const status = count === 1 ? 'Just you online' : count + ' people online';
-            document.getElementById('online-status').textContent = status;
-            
-            // Update users list - show ONLY real database users
-            const usersList = document.getElementById('users-list');
-            const currentUserInfo = document.getElementById('current-user-info');
-            
-            // Update current user info
-            currentUserInfo.textContent = `You: ${userId} (${currentUserLocation.city}, ${currentUserLocation.country})`;
-            
-            let html = `<div class="text-green-400">🟢 You: ${userId}<br><span class="text-gray-400 ml-4">${currentUserLocation.city}, ${currentUserLocation.country}</span></div>`;
+        function setLoading(loading) {
+            isLoading = loading;
+            const btn = document.getElementById('sendBtn');
+            const input = document.getElementById('messageInput');
             
-            // Add ONLY other users from database (no fake users)
-            const otherUsers = Array.from(userDatabase.values()).filter(userData => !userData.isCurrentUser);
+            btn.disabled = loading;
+            input.disabled = loading;
             
-            if (otherUsers.length === 0) {
-                html += '<div class="text-gray-500 text-xs mt-2">No other users currently online</div>';
+            if (loading) {
+                btn.innerHTML = '<div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div> Loading...';
             } else {
-                otherUsers.forEach(userData => {
-                    const timeAgo = Math.floor((Date.now() - userData.lastSeen) / 1000);
-                    const timeText = timeAgo < 60 ? 'now' : `${Math.floor(timeAgo / 60)}m ago`;
-                    
-                    html += `
-                        <div class="text-blue-400 mt-2">
-                            🔵 ${userData.id}<br>
-                            <span class="text-gray-400 ml-4">${userData.location.city}, ${userData.location.country}</span><br>
-                            <span class="text-gray-500 ml-4 text-xs">Active ${timeText}</span>
-                        </div>
-                    `;
-                });
+                btn.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg> Send';
             }
-            
-            usersList.innerHTML = html;
-        }
-
-        function refreshUsers() {
-            // Just refresh display, don't add fake users
-            trackActivity();
         }
 
-        function trackActivity() {
-            const now = Date.now();
-            
-            // Update current user's last seen time in database
-            if (userDatabase.has(userId)) {
-                const userData = userDatabase.get(userId);
-                userData.lastSeen = now;
-                userDatabase.set(userId, userData);
-            }
-            
-            // Only update display, no fake user generation
-            updateUsersDisplay();
-        }
-
-        async function checkAPIStatus() {
-            try {
-                if (!OPENROUTER_API_KEY || OPENROUTER_API_KEY === "YOUR_API_KEY_HERE") {
-                    document.getElementById('api-status').textContent = '🔴 No API Key';
-                    document.getElementById('api-dot').className = 'w-2 h-2 rounded-full bg-red-500';
-                    return;
-                }
-
-                const response = await fetch("https://openrouter.ai/api/v1/models", {
-                    headers: { "Authorization": "Bearer " + OPENROUTER_API_KEY }
-                });
-                
-                if (response.ok) {
-                    document.getElementById('api-status').textContent = '🟢 API Connected';
-                    document.getElementById('api-dot').className = 'w-2 h-2 rounded-full bg-green-500';
-                } else {
-                    document.getElementById('api-status').textContent = '🔴 Connection Issue';
-                    document.getElementById('api-dot').className = 'w-2 h-2 rounded-full bg-red-500';
-                }
-            } catch (error) {
-                document.getElementById('api-status').textContent = '🔴 Connection Issue';
-                document.getElementById('api-dot').className = 'w-2 h-2 rounded-full bg-red-500';
-            }
+        function updateUserDisplay() {
+            document.getElementById('currentUser').textContent = 'You: ' + userId;
+            document.getElementById('onlineStatus').textContent = 'Just you online';
         }
     </script>
 </body>