Update index.html

index.html

@@ -873,7 +873,7 @@
     function showLoginModal() {
       loginModal.style.display = 'flex';
       usernameInput.focus();
-      loginError.style.display = 'none';
+      showLoginError(''); // Clear any errors using the error function
       updateAuthModal();
     }
 
@@ -884,7 +884,7 @@
     function toggleAuthMode() {
       isLoginMode = !isLoginMode;
       updateAuthModal();
-      loginError.style.display = 'none';
+      showLoginError(''); // Clear any errors using the error function
       usernameInput.value = '';
       passwordInput.value = '';
       usernameInput.focus();
@@ -947,11 +947,10 @@
             isLoggedIn = true;
             currentUser.textContent = username;
             hideLoginModal();
-            // Clear API key input and status for new login session
-            apiKeyInput.value = '';
-            apiKeyStatusText.textContent = 'API Key: Not connected';
-            showApiKeyModal();
-            addBotMessage('✅ Login successful! Please enter your GROQ API key to continue.');
+            
+            // Check for existing user data and API key
+            await checkExistingUserData();
+            
           } else if (response.status === 401) {
             showLoginError('Invalid username or password');
           } else {
@@ -994,8 +993,148 @@
     }
 
     function showLoginError(message) {
-      loginError.textContent = message;
-      loginError.style.display = 'block';
+      if (message && message.trim()) {
+        loginError.textContent = message;
+        loginError.style.display = 'block';
+      } else {
+        loginError.textContent = '';
+        loginError.style.display = 'none';
+      }
+    }
+
+    async function checkExistingUserData() {
+      try {
+        // Get user's existing data
+        const userDataResponse = await makeAuthenticatedRequest(`${API_BASE}/user_data/`);
+        if (userDataResponse.ok) {
+          const userData = await userDataResponse.json();
+          
+          // Restore papers if user has any
+          if (userData.detailed_papers && userData.detailed_papers.length > 0) {
+            papers = [];
+            let nextId = Date.now();
+            
+            userData.detailed_papers.forEach((paperData, index) => {
+              // Add main paper
+              const paper = {
+                id: nextId++,
+                title: paperData.title,
+                type: 'restored',
+                hasReferences: paperData.has_references,
+                referencesLoaded: paperData.references_loaded
+              };
+              papers.push(paper);
+              
+              // Add reference papers if they exist
+              if (paperData.references && paperData.references.length > 0) {
+                paperData.references.forEach(refTitle => {
+                  papers.push({
+                    id: nextId++,
+                    title: refTitle,
+                    type: 'reference',
+                    hasReferences: false,
+                    referencesLoaded: false,
+                    isReference: true
+                  });
+                });
+              }
+            });
+            
+            updatePapersList();
+            updateStatus();
+            addBotMessage(`✅ Welcome back! Restored all paper(s) from your previous session.`);
+          } else if (userData.papers && userData.papers.length > 0) {
+            // Fallback to old format for backward compatibility
+            papers = userData.papers.map((title, index) => ({
+              id: Date.now() + index,
+              title: title,
+              type: 'restored',
+              hasReferences: false,
+              referencesLoaded: false
+            }));
+            updatePapersList();
+            updateStatus();
+            addBotMessage(`✅ Welcome back! Restored ${userData.papers.length} paper(s) from your previous session.`);
+          }
+          
+          // Check API key status
+          if (userData.has_api_key) {
+            apiKeyStatusText.textContent = 'API Key: Connected';
+            showApiKeyModalWithOption();
+          } else {
+            // Clear API key input and status for new login session
+            apiKeyInput.value = '';
+            apiKeyStatusText.textContent = 'API Key: Not connected';
+            showApiKeyModal();
+          }
+        } else {
+          // Fallback to normal flow
+          apiKeyInput.value = '';
+          apiKeyStatusText.textContent = 'API Key: Not connected';
+          showApiKeyModal();
+          addBotMessage('✅ Login successful! Please enter your GROQ API key to continue.');
+        }
+      } catch (error) {
+        console.error('Error checking user data:', error);
+        // Fallback to normal flow
+        apiKeyInput.value = '';
+        apiKeyStatusText.textContent = 'API Key: Not connected';
+        showApiKeyModal();
+        addBotMessage('✅ Login successful! Please enter your GROQ API key to continue.');
+      }
+    }
+
+    function showApiKeyModalWithOption() {
+      if (!isLoggedIn) {
+        showLoginModal();
+        return;
+      }
+      
+      // Update modal to show option for existing API key
+      const apiKeyForm = document.querySelector('.api-key-form');
+      apiKeyForm.innerHTML = `
+        <h2>🔑 API Key Options</h2>
+        <p>You have an existing GROQ API key. Choose an option:</p>
+        <button type="button" class="api-key-submit" onclick="useExistingApiKey()" style="margin-bottom: 15px; width: 100%;">
+          Use Existing API Key
+        </button>
+        <button type="button" class="api-key-submit" onclick="enterNewApiKey()" style="background: rgba(102, 126, 234, 0.1); color: #667eea; width: 100%;">
+          Enter New API Key
+        </button>
+      `;
+      
+      apiKeyModal.style.display = 'flex';
+    }
+
+    async function useExistingApiKey() {
+      hideApiKeyModal();
+      addBotMessage('✅ Using your existing API key. You can start uploading papers and asking questions!');
+    }
+
+    function enterNewApiKey() {
+      // Reset modal to normal API key entry
+      const apiKeyForm = document.querySelector('.api-key-form');
+      apiKeyForm.innerHTML = `
+        <h2>🔑 Enter GROQ API Key</h2>
+        <p>Please enter your GROQ API key to use the chatbot. Your key will be stored securely in your session.</p>
+        <div class="api-key-input-group">
+          <input type="password" id="apiKeyInput" class="api-key-input" placeholder="Enter your GROQ API key...">
+          <button type="button" class="toggle-visibility" onclick="toggleApiKeyVisibility()">👁️</button>
+        </div>
+        <button id="apiKeySubmit" class="api-key-submit">Connect</button>
+      `;
+      
+      // Re-initialize the input and submit button references
+      const newApiKeyInput = document.getElementById('apiKeyInput');
+      const newApiKeySubmit = document.getElementById('apiKeySubmit');
+      newApiKeyInput.value = '';
+      newApiKeyInput.focus();
+      
+      // Re-add event listeners
+      newApiKeySubmit.addEventListener('click', setApiKey);
+      newApiKeyInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') setApiKey();
+      });
     }
 
     function logout() {
@@ -1025,13 +1164,17 @@
 
     // ✅ API Key Functions
     function toggleApiKeyVisibility() {
-      const input = apiKeyInput;
+      // Always get the current API key input element dynamically
+      const currentApiKeyInput = document.getElementById('apiKeyInput');
       const button = document.querySelector('.toggle-visibility');
-      if (input.type === 'password') {
-        input.type = 'text';
+      
+      if (!currentApiKeyInput) return;
+      
+      if (currentApiKeyInput.type === 'password') {
+        currentApiKeyInput.type = 'text';
         button.textContent = '🙈';
       } else {
-        input.type = 'password';
+        currentApiKeyInput.type = 'password';
         button.textContent = '👁️';
       }
     }
@@ -1042,9 +1185,14 @@
         return;
       }
       // Clear the API key input for new users
-      apiKeyInput.value = '';
+      const currentApiKeyInput = document.getElementById('apiKeyInput');
+      if (currentApiKeyInput) {
+        currentApiKeyInput.value = '';
+      }
       apiKeyModal.style.display = 'flex';
-      apiKeyInput.focus();
+      if (currentApiKeyInput) {
+        currentApiKeyInput.focus();
+      }
     }
 
     function hideApiKeyModal() {
@@ -1052,14 +1200,23 @@
     }
 
     async function setApiKey() {
-      const key = apiKeyInput.value.trim();
+      // Always get the current API key input element dynamically
+      const currentApiKeyInput = document.getElementById('apiKeyInput');
+      const currentApiKeySubmit = document.getElementById('apiKeySubmit');
+      
+      if (!currentApiKeyInput) {
+        alert('API key input not found');
+        return;
+      }
+      
+      const key = currentApiKeyInput.value.trim();
       if (!key) {
         alert('Please enter a valid API key');
         return;
       }
 
-      apiKeySubmit.disabled = true;
-      apiKeySubmit.textContent = 'Connecting...';
+      currentApiKeySubmit.disabled = true;
+      currentApiKeySubmit.textContent = 'Connecting...';
 
       try {
         // Send API key to backend for ephemeral storage
@@ -1083,8 +1240,8 @@
         console.error('API key setup error:', error);
         addBotMessage(`❌ Failed to connect API key: ${error.message}`);
       } finally {
-        apiKeySubmit.disabled = false;
-        apiKeySubmit.textContent = 'Connect';
+        currentApiKeySubmit.disabled = false;
+        currentApiKeySubmit.textContent = 'Connect';
       }
     }
 
@@ -1303,7 +1460,7 @@
         return;
       }
       
-      setStatus('processing', 'Loading references... (might take longer)');
+      setStatus('processing', 'Loading references...(might take longer)');
       const formData = new FormData();
       formData.append("index", paperIndex.toString());
       
@@ -1388,12 +1545,16 @@
         if (paper.isReference) {
           div.style.borderLeft = '4px solid #28a745';
           div.style.backgroundColor = 'rgba(40, 167, 69, 0.05)';
+        } else if (paper.type === 'restored') {
+          div.style.borderLeft = '4px solid #17a2b8';
+          div.style.backgroundColor = 'rgba(23, 162, 184, 0.05)';
         }
         
         div.innerHTML = `
           <div class="paper-title">
-            ${paper.isReference ? '📎 ' : ''}${paper.title}
+            ${paper.isReference ? '📎 ' : ''}${paper.type === 'restored' ? '🔄 ' : ''}${paper.title}
             ${paper.isReference ? ' <small style="color: #6c757d;">(Reference)</small>' : ''}
+            ${paper.type === 'restored' ? ' <small style="color: #17a2b8;">(Restored)</small>' : ''}
           </div>
           <div class="paper-actions">
             ${!paper.isReference ? `
@@ -1459,6 +1620,8 @@
     window.addReferences = addReferences;
     window.logout = logout;
     window.toggleAuthMode = toggleAuthMode;
+    window.useExistingApiKey = useExistingApiKey;
+    window.enterNewApiKey = enterNewApiKey;
   </script>
 </body>
 </html>