Update app.py

app.py

@@ -35,7 +35,7 @@
                     </div>
                     <h1 class="text-xl font-semibold">Chat Flow</h1>
                 </div>
-                <button onclick="startNewChat()" 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="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">
                     <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                         <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                     </svg>
@@ -68,7 +68,7 @@
                         </div>
                     </div>
                     
-                    <button onclick="refreshUsers()" class="w-full text-xs px-2 py-1 bg-gray-600 hover:bg-gray-500 rounded transition-colors">
+                    <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>
@@ -99,17 +99,17 @@
 
                 <!-- Controls -->
                 <div class="flex gap-2">
-                    <button onclick="downloadHistory()" 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">
+                    <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 onclick="clearChat()" 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="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">
                         <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 onclick="window.location.reload()" 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="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">
                         <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>
@@ -197,15 +197,25 @@
 
         // Initialize
         document.addEventListener('DOMContentLoaded', async function() {
+            console.log('DOM loaded, initializing app...');
+            
+            // Setup all event listeners first
             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);
             
@@ -213,9 +223,13 @@
             document.addEventListener('click', trackActivity);
             document.addEventListener('keypress', trackActivity);
             document.addEventListener('scroll', trackActivity);
+            
+            console.log('App initialization complete');
         });
 
         function setupEventListeners() {
+            console.log('Setting up event listeners...');
+            
             // Model selection
             const modelSelect = document.getElementById('model-select');
             if (modelSelect) {
@@ -223,6 +237,7 @@
                     selectedModel = e.target.value;
                     document.getElementById('model-id').textContent = selectedModel;
                     document.getElementById('current-model-name').textContent = models[selectedModel];
+                    console.log('Model changed to:', selectedModel);
                 });
             }
 
@@ -232,23 +247,93 @@
                 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 click
             const sendButton = document.getElementById('send-button');
             if (sendButton) {
-                sendButton.addEventListener('click', sendMessage);
+                sendButton.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    console.log('Send button clicked, sending message...');
+                    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();
+                });
+            }
+
+            // Clear button
+            const clearBtn = document.getElementById('clear-btn');
+            if (clearBtn) {
+                clearBtn.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    console.log('Clear button clicked');
+                    clearChat();
+                });
+            }
+
+            // 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();
+                });
+            }
+
+            // 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();
+                });
             }
+
+            console.log('All event listeners set up successfully');
         }
 
         async function sendMessage() {
+            console.log('sendMessage function called');
+            
             const input = document.getElementById('message-input');
+            if (!input) {
+                console.error('Message input not found');
+                return;
+            }
+            
             const message = input.value.trim();
+            console.log('Message to send:', message);
             
-            if (!message || isLoading) return;
+            if (!message || isLoading) {
+                console.log('No message or already loading');
+                return;
+            }
 
             // Track activity when sending message
             trackActivity();
@@ -262,6 +347,7 @@
 
             messages.push(userMessage);
             input.value = '';
+            console.log('User message added to messages array');
             
             // Add empty assistant message for streaming
             const assistantMessage = {
@@ -275,13 +361,15 @@
             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');
             } catch (error) {
-                console.error('Error:', 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();