Update app.py

app.py

@@ -200,17 +200,17 @@
         document.addEventListener('DOMContentLoaded', async function() {
             setupEventListeners();
             
-            // Get user location first
+            // Get user location first (one time only)
             await getUserLocation();
             
-            // Then update users and check API
+            // Initialize database with current user only
             updateOnlineUsers();
             checkAPIStatus();
             
-            // Track activity for online users - update every 10 seconds
-            setInterval(updateOnlineUsers, 10000);
+            // Update users display every 30 seconds (like Streamlit file checking)
+            setInterval(updateOnlineUsers, 30000);
             
-            // Track user activity
+            // Track user activity (but don't add fake users)
             document.addEventListener('click', trackActivity);
             document.addEventListener('keypress', trackActivity);
             document.addEventListener('scroll', trackActivity);
@@ -252,8 +252,6 @@
             messages.push(userMessage);
             input.value = '';
             
-            updateMessagesDisplay();
-            
             // Add empty assistant message for streaming
             const assistantMessage = {
                 role: 'assistant',
@@ -262,21 +260,17 @@
             };
             messages.push(assistantMessage);
             
+            updateMessagesDisplay();
             setLoading(true);
-            updateMessagesDisplay(); // Show the empty assistant message with loading
 
             try {
-                const aiResponse = await getAIResponse(message);
-                
-                // Update the last message with final response
-                messages[messages.length - 1].content = aiResponse;
-                
-                // Remove cursor and show final response
-                updateMessagesDisplay();
+                // The streaming will update the message in real-time
+                await getAIResponse(message);
                 
                 // Track activity after receiving response
                 trackActivity();
             } catch (error) {
+                console.error('Error:', error);
                 // Replace the empty message with error
                 messages[messages.length - 1].content = 'Sorry, I encountered an error. Please try again.';
                 updateMessagesDisplay();
@@ -298,7 +292,7 @@
                 "X-Title": "Chat Flow AI Assistant"
             };
 
-            const cleanMessages = messages.map(msg => ({
+            const cleanMessages = messages.slice(0, -1).map(msg => ({
                 role: msg.role,
                 content: msg.content.split('\n\n---\n*Response created by:')[0]
             }));
@@ -312,49 +306,60 @@
             const data = {
                 model: selectedModel,
                 messages: apiMessages,
-                stream: true, // Enable streaming
+                stream: true,
                 max_tokens: 2000,
                 temperature: 0.7
             };
 
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: headers,
-                body: JSON.stringify(data)
-            });
+            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);
-            }
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    throw new Error("API Error: " + response.status + " - " + errorText);
+                }
 
-            const reader = response.body.getReader();
-            const decoder = new TextDecoder();
-            let fullResponse = "";
-            
-            try {
+                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);
+                    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);
+                            const data = line.slice(6).trim();
+                            
                             if (data === '[DONE]') {
                                 const modelName = models[selectedModel] || "AI";
-                                return fullResponse + "\n\n---\n*Response created by: **" + modelName + "***";
+                                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 || '';
+                                const delta = parsed.choices?.[0]?.delta?.content;
+                                
                                 if (delta) {
                                     fullResponse += delta;
-                                    // Update the display in real-time
-                                    updateStreamingResponse(fullResponse);
+                                    // Update streaming message immediately
+                                    updateStreamingMessage(fullResponse);
                                 }
                             } catch (e) {
                                 // Skip invalid JSON
@@ -363,24 +368,40 @@
                         }
                     }
                 }
-            } finally {
-                reader.releaseLock();
+                
+                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 modelName = models[selectedModel] || "AI";
-            return fullResponse + "\n\n---\n*Response created by: **" + modelName + "***";
         }
 
-        function updateStreamingResponse(partialResponse) {
-            // Find the last message area and update it with streaming text
-            const messagesArea = document.getElementById('messages-area');
-            const messageElements = messagesArea.children;
-            
-            if (messageElements.length > 0) {
-                const lastMessage = messageElements[messageElements.length - 1];
-                const contentDiv = lastMessage.querySelector('.flex-1 .whitespace-pre-wrap');
-                if (contentDiv) {
-                    contentDiv.textContent = partialResponse + " ▌"; // Add cursor
+        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;
                 }
             }
         }
@@ -424,15 +445,33 @@
                 let content = message.content;
                 let attribution = '';
                 
-                // Handle empty assistant messages (streaming in progress)
-                if (message.role === 'assistant' && content === '' && isLoading) {
-                    content = '';
-                } else if (message.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>';
+                // 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>';
+                        }
                     }
                 }
                 
@@ -448,18 +487,6 @@
                     </div>
                 `;
             });
-
-            // Show loading dots if streaming
-            if (isLoading && messages.length > 0 && messages[messages.length - 1].role === 'assistant' && messages[messages.length - 1].content === '') {
-                // Replace the last empty message with loading dots
-                html = html.replace(/<div class="whitespace-pre-wrap text-gray-100"><\/div>/, `
-                    <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>
-                `);
-            }
             
             messagesArea.innerHTML = html;
             messagesArea.scrollTop = messagesArea.scrollHeight;
@@ -553,15 +580,14 @@
             URL.revokeObjectURL(url);
         }
 
-        // Online users tracking with real geolocation
-        let onlineUsers = new Map(); // Map to store user details
-        let lastActivity = Date.now();
-        let userLocation = { city: 'Unknown', country: 'Unknown' };
+        // 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
+        // Get user's real location (one time only)
         async function getUserLocation() {
-            if (isGettingLocation) return userLocation;
+            if (isGettingLocation || currentUserLocation.city !== 'Unknown') return currentUserLocation;
             isGettingLocation = true;
             
             try {
@@ -581,7 +607,7 @@
                         const response = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=en`);
                         const data = await response.json();
                         
-                        userLocation = {
+                        currentUserLocation = {
                             city: data.city || data.locality || 'Unknown',
                             country: data.countryName || 'Unknown'
                         };
@@ -597,85 +623,42 @@
                 await getLocationByIP();
             }
             
-            return userLocation;
+            return currentUserLocation;
         }
 
-        // Fallback: Get location by IP
+        // 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();
                 
-                userLocation = {
+                currentUserLocation = {
                     city: data.city || 'Unknown',
                     country: data.country_name || 'Unknown'
                 };
             } catch (error) {
                 console.log('IP location failed');
-                userLocation = { city: 'Unknown', country: 'Unknown' };
+                currentUserLocation = { city: 'Unknown', country: 'Unknown' };
             }
         }
 
-        async function updateOnlineUsers() {
-            // Ensure we have user location
-            if (userLocation.city === 'Unknown') {
-                await getUserLocation();
-            }
+        // Database-style user management (exactly like your Streamlit)
+        function updateOnlineUsers() {
+            const now = Date.now();
             
-            // Add current user with location
-            const currentUserData = {
+            // Add/update current user in database
+            userDatabase.set(userId, {
                 id: userId,
-                location: userLocation,
-                lastSeen: Date.now(),
+                location: currentUserLocation,
+                lastSeen: now,
                 isCurrentUser: true
-            };
-            
-            onlineUsers.set(userId, currentUserData);
-            
-            // Simulate other realistic users based on activity
-            const now = Date.now();
-            const timeSinceLastActivity = now - lastActivity;
-            
-            // Add new users when there's recent activity
-            if (timeSinceLastActivity < 10000 && Math.random() < 0.2) {
-                const newUserId = 'User-' + Math.random().toString(36).substr(2, 8);
-                const locations = [
-                    { city: 'New York', country: 'United States' },
-                    { city: 'London', country: 'United Kingdom' },
-                    { city: 'Tokyo', country: 'Japan' },
-                    { city: 'Paris', country: 'France' },
-                    { city: 'Sydney', country: 'Australia' },
-                    { city: 'Toronto', country: 'Canada' },
-                    { city: 'Berlin', country: 'Germany' },
-                    { city: 'Mumbai', country: 'India' },
-                    { city: 'São Paulo', country: 'Brazil' },
-                    { city: 'Singapore', country: 'Singapore' }
-                ];
-                
-                const randomLocation = locations[Math.floor(Math.random() * locations.length)];
-                
-                onlineUsers.set(newUserId, {
-                    id: newUserId,
-                    location: randomLocation,
-                    lastSeen: now,
-                    isCurrentUser: false
-                });
-            }
-            
-            // Remove users who have been inactive for more than 2 minutes
-            const cutoffTime = now - (2 * 60 * 1000);
-            for (const [id, userData] of onlineUsers.entries()) {
-                if (!userData.isCurrentUser && userData.lastSeen < cutoffTime) {
-                    onlineUsers.delete(id);
-                }
-            }
+            });
             
-            // Occasionally remove a random user to simulate leaving
-            if (onlineUsers.size > 3 && Math.random() < 0.1) {
-                const nonCurrentUsers = Array.from(onlineUsers.entries()).filter(([id, data]) => !data.isCurrentUser);
-                if (nonCurrentUsers.length > 0) {
-                    const randomUser = nonCurrentUsers[Math.floor(Math.random() * nonCurrentUsers.length)];
-                    onlineUsers.delete(randomUser[0]);
+            // 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);
                 }
             }
             
@@ -683,54 +666,59 @@
         }
 
         function updateUsersDisplay() {
-            const count = onlineUsers.size;
+            const count = userDatabase.size;
             const status = count === 1 ? 'Just you online' : count + ' people online';
             document.getElementById('online-status').textContent = status;
             
-            // Update users list
+            // 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} (${userLocation.city}, ${userLocation.country})`;
+            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">${userLocation.city}, ${userLocation.country}</span></div>`;
+            let html = `<div class="text-green-400">🟢 You: ${userId}<br><span class="text-gray-400 ml-4">${currentUserLocation.city}, ${currentUserLocation.country}</span></div>`;
             
-            // Add other users
-            const otherUsers = Array.from(onlineUsers.values()).filter(userData => !userData.isCurrentUser);
+            // Add ONLY other users from database (no fake users)
+            const otherUsers = Array.from(userDatabase.values()).filter(userData => !userData.isCurrentUser);
             
-            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">
-                        🔵 ${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>
-                `;
-            });
+            if (otherUsers.length === 0) {
+                html += '<div class="text-gray-500 text-xs mt-2">No other users currently online</div>';
+            } 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>
+                    `;
+                });
+            }
             
             usersList.innerHTML = html;
         }
 
         function refreshUsers() {
+            // Just refresh display, don't add fake users
             trackActivity();
-            updateOnlineUsers();
         }
 
         function trackActivity() {
-            lastActivity = Date.now();
+            const now = Date.now();
             
-            // Update current user's last seen time
-            if (onlineUsers.has(userId)) {
-                const userData = onlineUsers.get(userId);
-                userData.lastSeen = Date.now();
-                onlineUsers.set(userId, userData);
+            // 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);
             }
             
-            updateOnlineUsers();
+            // Only update display, no fake user generation
+            updateUsersDisplay();
         }
 
         async function checkAPIStatus() {