Update app.py

app.py

@@ -56,11 +56,21 @@
                 <!-- 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">
+                    <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>
                     </div>
-                    <p class="text-xs text-gray-500 mt-1" id="user-id">You: User-ABC123</p>
+                    
+                    <!-- 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 onclick="refreshUsers()" class="w-full text-xs px-2 py-1 bg-gray-600 hover:bg-gray-500 rounded transition-colors">
+                        🔄 Refresh Users
+                    </button>
                 </div>
 
                 <!-- Model Selection -->
@@ -187,20 +197,23 @@
         };
 
         // Initialize
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             setupEventListeners();
+            
+            // Get user location first
+            await getUserLocation();
+            
+            // Then update users and check API
             updateOnlineUsers();
             checkAPIStatus();
             
-            // Update user ID display
-            document.getElementById('user-id').textContent = 'You: ' + userId;
-            
-            // Track activity for online users
-            setInterval(updateOnlineUsers, 5000); // Update every 5 seconds
+            // Track activity for online users - update every 10 seconds
+            setInterval(updateOnlineUsers, 10000);
             
             // Track user activity
             document.addEventListener('click', trackActivity);
             document.addEventListener('keypress', trackActivity);
+            document.addEventListener('scroll', trackActivity);
         });
 
         function setupEventListeners() {
@@ -540,53 +553,183 @@
             URL.revokeObjectURL(url);
         }
 
-        // Online users tracking (accurate database simulation)
-        let onlineUsers = new Set();
+        // 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' };
+        let isGettingLocation = false;
 
-        function updateOnlineUsers() {
-            // Add current user to online set
-            onlineUsers.add(userId);
+        // Get user's real location
+        async function getUserLocation() {
+            if (isGettingLocation) return userLocation;
+            isGettingLocation = true;
             
-            // Simulate real users joining/leaving based on activity
+            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();
+                        
+                        userLocation = {
+                            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 userLocation;
+        }
+
+        // Fallback: Get location by IP
+        async function getLocationByIP() {
+            try {
+                const response = await fetch('https://ipapi.co/json/');
+                const data = await response.json();
+                
+                userLocation = {
+                    city: data.city || 'Unknown',
+                    country: data.country_name || 'Unknown'
+                };
+            } catch (error) {
+                console.log('IP location failed');
+                userLocation = { city: 'Unknown', country: 'Unknown' };
+            }
+        }
+
+        async function updateOnlineUsers() {
+            // Ensure we have user location
+            if (userLocation.city === 'Unknown') {
+                await getUserLocation();
+            }
+            
+            // Add current user with location
+            const currentUserData = {
+                id: userId,
+                location: userLocation,
+                lastSeen: Date.now(),
+                isCurrentUser: true
+            };
+            
+            onlineUsers.set(userId, currentUserData);
+            
+            // Simulate other realistic users based on activity
             const now = Date.now();
             const timeSinceLastActivity = now - lastActivity;
             
-            // If someone just sent a message, might add another user
-            if (timeSinceLastActivity < 5000 && Math.random() < 0.3) {
+            // 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);
-                onlineUsers.add(newUserId);
+                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 inactive users (simulate users leaving)
-            if (onlineUsers.size > 1 && Math.random() < 0.1) {
-                const usersArray = Array.from(onlineUsers);
-                const userToRemove = usersArray.find(id => id !== userId);
-                if (userToRemove) {
-                    onlineUsers.delete(userToRemove);
+            // 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);
                 }
             }
             
-            // Ensure current user is always in the set
-            onlineUsers.add(userId);
+            // 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]);
+                }
+            }
             
-            // Update display
+            updateUsersDisplay();
+        }
+
+        function updateUsersDisplay() {
             const count = onlineUsers.size;
             const status = count === 1 ? 'Just you online' : count + ' people online';
             document.getElementById('online-status').textContent = status;
             
-            // Show some other user IDs for realism
-            if (count > 1) {
-                const otherUsers = Array.from(onlineUsers).filter(id => id !== userId);
-                const displayUser = otherUsers[0];
-                document.getElementById('user-id').innerHTML = `You: ${userId}<br><small class="text-gray-600">Others: ${displayUser}${otherUsers.length > 1 ? ', ...' : ''}</small>`;
-            } else {
-                document.getElementById('user-id').textContent = 'You: ' + userId;
-            }
+            // Update users list
+            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})`;
+            
+            let html = `<div class="text-green-400">🟢 You: ${userId}<br><span class="text-gray-400 ml-4">${userLocation.city}, ${userLocation.country}</span></div>`;
+            
+            // Add other users
+            const otherUsers = Array.from(onlineUsers.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>
+                `;
+            });
+            
+            usersList.innerHTML = html;
+        }
+
+        function refreshUsers() {
+            trackActivity();
+            updateOnlineUsers();
         }
 
         function trackActivity() {
             lastActivity = 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);
+            }
+            
             updateOnlineUsers();
         }