Update static/app.js

static/app.js

@@ -12,13 +12,28 @@ class ContextAwareApp {
             taskSelect: document.getElementById('task-select'),
             charCount: document.getElementById('char-count'),
             wordCount: document.getElementById('word-count'),
+            // API Key elements
+            apiKeyInput: document.getElementById('api-key-input'),
+            testApiKeyBtn: document.getElementById('test-api-key'),
+            saveApiKeyBtn: document.getElementById('save-api-key'),
+            apiKeyStatus: document.getElementById('api-key-status'),
+            apiStatusIcon: document.getElementById('api-status-icon'),
+            apiStatusText: document.getElementById('api-status-text'),
+            toggleApiSection: document.getElementById('toggle-api-section'),
+            apiKeyContent: document.getElementById('api-key-content'),
+            toggleIcon: document.getElementById('toggle-icon'),
         };
+
         // Application state
         this.state = {
             isIndexing: false,
             isGenerating: false,
             isIndexed: false,
+            apiKeyValidated: false,
+            userApiKey: '',
+            apiSectionCollapsed: false,
         };
+
         this.initialize();
     }
 
@@ -26,25 +41,28 @@ class ContextAwareApp {
      * Sets up the application, event listeners, and initial state.
      */
     async initialize() {
-    this.addEventListeners();
-    
-    // Check API configuration first
-    const apiConfigured = await this.checkApiConfiguration();
-    
-    if (apiConfigured) {
+        this.addEventListeners();
+        this.loadStoredApiKey();
+        
+        // Show welcome message
         this.addMessageToChat(
-            "Welcome! Here's how to get started:\n1. Paste your context into the 'Knowledge Base' on the left.\n2. Click 'Index Context' for Q&A, or select a different action from the dropdown.\n3. Provide a prompt if needed and click the send button.",
-            'ai'
+            "👋 **Welcome to ContextIQ!**\n\n" +
+            "To get started:\n" +
+            "1. **Enter your OpenRouter API key** in the configuration section above\n" +
+            "2. **Add your context** in the Knowledge Base on the left\n" +
+            "3. **Index the context** and start asking questions!\n\n" +
+            "🆓 You can get a free API key from [openrouter.ai](https://openrouter.ai) - no credit card required!",
+            'system'
         );
+        
+        this.updateUI();
     }
-    
-    this.updateUI();
-}
 
     /**
      * Binds all necessary event listeners to DOM elements.
      */
     addEventListeners() {
+        // Existing listeners
         this.elements.indexContextBtn.addEventListener('click', () => this.handleIndexContext());
         this.elements.clearContextBtn.addEventListener('click', () => this.handleClearContext());
         this.elements.sendButton.addEventListener('click', () => this.handleSubmit());
@@ -56,12 +74,194 @@ class ContextAwareApp {
         });
         this.elements.contextInput.addEventListener('input', () => this.updateContextStats());
         this.elements.chatInput.addEventListener('input', () => this.autoResizeTextarea(this.elements.chatInput));
+
+        // API Key listeners
+        this.elements.testApiKeyBtn.addEventListener('click', () => this.testApiKey());
+        this.elements.saveApiKeyBtn.addEventListener('click', () => this.saveApiKey());
+        this.elements.apiKeyInput.addEventListener('input', () => this.onApiKeyInputChange());
+        this.elements.apiKeyInput.addEventListener('keydown', e => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.testApiKey();
+            }
+        });
+        
+        // Toggle API section
+        this.elements.toggleApiSection.addEventListener('click', () => this.toggleApiKeySection());
+    }
+
+    /**
+     * Load stored API key from localStorage if available
+     */
+    loadStoredApiKey() {
+        const storedKey = localStorage.getItem('openrouter_api_key');
+        if (storedKey) {
+            this.elements.apiKeyInput.value = storedKey;
+            this.state.userApiKey = storedKey;
+            this.testApiKey(true); // Test silently on load
+        }
+    }
+
+    /**
+     * Handle API key input changes
+     */
+    onApiKeyInputChange() {
+        const apiKey = this.elements.apiKeyInput.value.trim();
+        this.state.apiKeyValidated = false;
+        this.updateApiKeyStatus('pending', 'Enter API key and click Test');
+        this.updateUI();
+    }
+
+    /**
+     * Test the API key validity
+     */
+    async testApiKey(silent = false) {
+        const apiKey = this.elements.apiKeyInput.value.trim();
+        
+        if (!apiKey) {
+            this.updateApiKeyStatus('error', 'Please enter an API key');
+            return;
+        }
+
+        if (!apiKey.startsWith('sk-or-')) {
+            this.updateApiKeyStatus('error', 'OpenRouter API keys should start with "sk-or-"');
+            return;
+        }
+
+        if (!silent) {
+            this.updateApiKeyStatus('testing', 'Testing API key...');
+            this.elements.testApiKeyBtn.disabled = true;
+        }
+
+        try {
+            const response = await fetch('/api/v1/test-api-key', {
+                method: 'POST',
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'X-API-Key': apiKey
+                },
+                body: JSON.stringify({ api_key: apiKey }),
+            });
+
+            if (response.ok) {
+                this.state.apiKeyValidated = true;
+                this.state.userApiKey = apiKey;
+                this.updateApiKeyStatus('success', 'API key is valid!');
+                
+                if (!silent) {
+                    this.addMessageToChat(
+                        "✅ **API Key Validated!** You can now use the assistant. Start by adding some context to the Knowledge Base.",
+                        'system'
+                    );
+                }
+                
+                // Auto-collapse the API section after successful validation
+                if (!this.state.apiSectionCollapsed) {
+                    this.toggleApiKeySection();
+                }
+            } else {
+                const error = await response.json();
+                this.state.apiKeyValidated = false;
+                this.updateApiKeyStatus('error', `Invalid API key: ${error.detail || 'Unknown error'}`);
+            }
+        } catch (error) {
+            this.state.apiKeyValidated = false;
+            this.updateApiKeyStatus('error', `Error testing API key: ${error.message}`);
+        } finally {
+            this.elements.testApiKeyBtn.disabled = false;
+            this.updateUI();
+        }
+    }
+
+    /**
+     * Save the API key to localStorage
+     */
+    saveApiKey() {
+        const apiKey = this.elements.apiKeyInput.value.trim();
+        
+        if (!this.state.apiKeyValidated) {
+            this.updateApiKeyStatus('error', 'Please test the API key first');
+            return;
+        }
+
+        try {
+            localStorage.setItem('openrouter_api_key', apiKey);
+            this.updateApiKeyStatus('success', 'API key saved locally!');
+            
+            this.addMessageToChat(
+                "💾 **API Key Saved!** Your key is stored locally and will be remembered for future sessions.",
+                'system'
+            );
+        } catch (error) {
+            this.updateApiKeyStatus('error', 'Failed to save API key locally');
+        }
+    }
+
+    /**
+     * Update API key status display
+     */
+    updateApiKeyStatus(status, message) {
+        const statusElement = this.elements.apiKeyStatus;
+        const iconElement = this.elements.apiStatusIcon;
+        const textElement = this.elements.apiStatusText;
+        
+        statusElement.classList.remove('hidden');
+        statusElement.className = 'p-3 rounded-lg text-sm';
+        
+        switch (status) {
+            case 'testing':
+                statusElement.classList.add('bg-blue-500/20', 'text-blue-300', 'border', 'border-blue-500/30');
+                iconElement.className = 'w-3 h-3 bg-blue-500 rounded-full animate-pulse';
+                textElement.textContent = 'Testing...';
+                break;
+            case 'success':
+                statusElement.classList.add('bg-green-500/20', 'text-green-300', 'border', 'border-green-500/30');
+                iconElement.className = 'w-3 h-3 bg-green-500 rounded-full';
+                textElement.textContent = 'API Key Valid';
+                break;
+            case 'error':
+                statusElement.classList.add('bg-red-500/20', 'text-red-300', 'border', 'border-red-500/30');
+                iconElement.className = 'w-3 h-3 bg-red-500 rounded-full';
+                textElement.textContent = 'API Key Required';
+                break;
+            case 'pending':
+                statusElement.classList.add('bg-yellow-500/20', 'text-yellow-300', 'border', 'border-yellow-500/30');
+                iconElement.className = 'w-3 h-3 bg-yellow-500 rounded-full';
+                textElement.textContent = 'API Key Pending';
+                break;
+        }
+        
+        statusElement.textContent = message;
+    }
+
+    /**
+     * Toggle API key section visibility
+     */
+    toggleApiKeySection() {
+        this.state.apiSectionCollapsed = !this.state.apiSectionCollapsed;
+        
+        if (this.state.apiSectionCollapsed) {
+            this.elements.apiKeyContent.style.display = 'none';
+            this.elements.toggleIcon.style.transform = 'rotate(-90deg)';
+        } else {
+            this.elements.apiKeyContent.style.display = 'block';
+            this.elements.toggleIcon.style.transform = 'rotate(0deg)';
+        }
     }
 
     /**
      * Main handler for the send button. Directs to the correct function based on the selected task.
      */
     handleSubmit() {
+        if (!this.state.apiKeyValidated) {
+            this.updateApiKeyStatus('error', 'Please enter and test a valid API key first');
+            this.addMessageToChat(
+                "🔑 **API Key Required**: Please enter your OpenRouter API key in the configuration section above to use the assistant.",
+                'system'
+            );
+            return;
+        }
+
         const selectedTask = this.elements.taskSelect.value;
         if (selectedTask === 'q_and_a') {
             this.handleSendPrompt();
@@ -70,29 +270,15 @@ class ContextAwareApp {
         }
     }
 
-    async checkApiConfiguration() {
-    try {
-        const response = await fetch('/debug');
-        const config = await response.json();
-        
-        if (!config.api_key_configured) {
-            this.addMessageToChat(
-                "⚠️ **Configuration Issue**: OpenRouter API key is not set. " +
-                "Please contact the administrator to configure the OPENROUTER_API_KEY environment variable.",
-                'system'
-            );
-            return false;
-        }
-        return true;
-    } catch (error) {
-        console.error('Error checking API configuration:', error);
-        return false;
-    }
-}
     /**
      * Handles the logic for indexing the provided context.
      */
     async handleIndexContext() {
+        if (!this.state.apiKeyValidated) {
+            this.updateApiKeyStatus('error', 'Please enter and test a valid API key first');
+            return;
+        }
+
         const context = this.elements.contextInput.value.trim();
         if (context.length < 20) {
             this.showStatus('Context is too short. Please provide at least 20 characters.', 'error');
@@ -106,7 +292,10 @@ class ContextAwareApp {
         try {
             const response = await fetch('/api/v1/index', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'X-API-Key': this.state.userApiKey
+                },
                 body: JSON.stringify({ context }),
             });
 
@@ -147,7 +336,10 @@ class ContextAwareApp {
         try {
             const response = await fetch('/api/v1/generate', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'X-API-Key': this.state.userApiKey
+                },
                 body: JSON.stringify({ prompt }),
             });
 
@@ -197,7 +389,10 @@ class ContextAwareApp {
         try {
             const response = await fetch('/api/v1/task', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'X-API-Key': this.state.userApiKey
+                },
                 body: JSON.stringify({ context, task_type, prompt }),
             });
 
@@ -218,7 +413,6 @@ class ContextAwareApp {
         }
     }
 
-
     /**
      * Clears the context input and the indexed data on the backend.
      */
@@ -230,7 +424,12 @@ class ContextAwareApp {
         this.showStatus('Clearing knowledge base...', 'loading');
 
         try {
-            await fetch('/api/v1/clear_index', { method: 'POST' });
+            await fetch('/api/v1/clear_index', { 
+                method: 'POST',
+                headers: {
+                    'X-API-Key': this.state.userApiKey
+                }
+            });
             this.showStatus('Knowledge base cleared. Ready for new context.', 'success');
         } catch (error) {
             this.showStatus(`Error clearing index: ${error.message}`, 'error');
@@ -243,16 +442,22 @@ class ContextAwareApp {
     updateUI() {
         const hasContext = this.elements.contextInput.value.trim().length > 10;
         const isQandA = this.elements.taskSelect.value === 'q_and_a';
+        const hasValidApiKey = this.state.apiKeyValidated;
 
-        this.elements.indexContextBtn.disabled = this.state.isIndexing || !hasContext;
+        // Disable buttons if no API key
+        this.elements.indexContextBtn.disabled = this.state.isIndexing || !hasContext || !hasValidApiKey;
 
         if (isQandA) {
-            this.elements.sendButton.disabled = this.state.isGenerating || !this.state.isIndexed;
+            this.elements.sendButton.disabled = this.state.isGenerating || !this.state.isIndexed || !hasValidApiKey;
         } else {
-            this.elements.sendButton.disabled = this.state.isGenerating || !hasContext;
+            this.elements.sendButton.disabled = this.state.isGenerating || !hasContext || !hasValidApiKey;
         }
-    }
 
+        // Update API key input button states
+        const apiKeyEntered = this.elements.apiKeyInput.value.trim().length > 0;
+        this.elements.testApiKeyBtn.disabled = !apiKeyEntered;
+        this.elements.saveApiKeyBtn.disabled = !this.state.apiKeyValidated;
+    }
 
     /**
      * Displays a status message to the user.
@@ -279,39 +484,39 @@ class ContextAwareApp {
      * @param {string} message - The message content.
      * @param {'user'|'ai'|'system'} sender - The sender of the message.
      */
-addMessageToChat(message, sender) {
-    const messageDiv = document.createElement('div');
-    messageDiv.className = 'chat-message flex items-start space-x-3 animate-fade-in';
-    const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-
-    const icons = {
-        user: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
-        ai: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`,
-        system: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`
-    };
-    const bubbleClasses = {
-        user: 'bg-gradient-to-br from-emerald-500 to-teal-600',
-        ai: 'bg-gradient-to-br from-indigo-500 to-purple-600',
-        system: 'bg-gradient-to-br from-red-500 to-orange-600'
-    };
-
-    // Use marked to parse markdown, but sanitize first
-    const formattedMessage = sender === 'user' ?
-        this.escapeHtml(message).replace(/\n/g, '<br>') :
-        marked.parse(message);
-
-    messageDiv.innerHTML = `
-        <div class="w-8 h-8 ${bubbleClasses[sender]} rounded-full flex items-center justify-center flex-shrink-0 text-white">${icons[sender]}</div>
-        <div class="flex-1">
-            <div class="bg-slate-800/50 rounded-xl p-4 border border-slate-600/30">
-                <div class="text-slate-200 leading-relaxed markdown-content">${formattedMessage}</div>
-            </div>
-            <div class="text-xs text-slate-500 mt-2">${timestamp}</div>
-        </div>`;
-
-    this.elements.chatContainer.appendChild(messageDiv);
-    this.elements.chatContainer.scrollTop = this.elements.chatContainer.scrollHeight;
-}
+    addMessageToChat(message, sender) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'chat-message flex items-start space-x-3 animate-fade-in';
+        const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+        const icons = {
+            user: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+            ai: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`,
+            system: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>`
+        };
+        const bubbleClasses = {
+            user: 'bg-gradient-to-br from-emerald-500 to-teal-600',
+            ai: 'bg-gradient-to-br from-indigo-500 to-purple-600',
+            system: 'bg-gradient-to-br from-blue-500 to-cyan-600'
+        };
+
+        // Use marked to parse markdown, but sanitize first
+        const formattedMessage = sender === 'user' ?
+            this.escapeHtml(message).replace(/\n/g, '<br>') :
+            marked.parse(message);
+
+        messageDiv.innerHTML = `
+            <div class="w-8 h-8 ${bubbleClasses[sender]} rounded-full flex items-center justify-center flex-shrink-0 text-white">${icons[sender]}</div>
+            <div class="flex-1">
+                <div class="bg-slate-800/50 rounded-xl p-4 border border-slate-600/30">
+                    <div class="text-slate-200 leading-relaxed markdown-content">${formattedMessage}</div>
+                </div>
+                <div class="text-xs text-slate-500 mt-2">${timestamp}</div>
+            </div>`;
+
+        this.elements.chatContainer.appendChild(messageDiv);
+        this.elements.chatContainer.scrollTop = this.elements.chatContainer.scrollHeight;
+    }
 
     /**
      * Updates character and word counts for the context input.