Update static/app.js

static/app.js

@@ -2,6 +2,7 @@ class ContextAwareApp {
     constructor() {
         // Centralized DOM element references
         this.elements = {
+            // Main layout panels
             contextInput: document.getElementById('context-input'),
             chatInput: document.getElementById('chat-input'),
             sendButton: document.getElementById('send-button'),
@@ -12,6 +13,7 @@ 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'),
@@ -22,6 +24,14 @@ class ContextAwareApp {
             toggleApiSection: document.getElementById('toggle-api-section'),
             apiKeyContent: document.getElementById('api-key-content'),
             toggleIcon: document.getElementById('toggle-icon'),
+
+            // Responsive collapsible section elements
+            kbHeader: document.getElementById('kb-header'),
+            kbContent: document.getElementById('kb-content'),
+            kbToggleIcon: document.getElementById('kb-toggle-icon'),
+            assistantHeader: document.getElementById('assistant-header'),
+            assistantContent: document.getElementById('assistant-content'),
+            assistantToggleIcon: document.getElementById('assistant-toggle-icon'),
         };
 
         // Application state
@@ -31,7 +41,10 @@ class ContextAwareApp {
             isIndexed: false,
             apiKeyValidated: false,
             userApiKey: '',
+            // Collapse states for mobile view
             apiSectionCollapsed: false,
+            kbSectionCollapsed: false,
+            assistantSectionCollapsed: false,
         };
 
         this.initialize();
@@ -43,13 +56,14 @@ class ContextAwareApp {
     async initialize() {
         this.addEventListeners();
         this.loadStoredApiKey();
+        this.setupResponsiveUI();
         
         // Show welcome message
         this.addMessageToChat(
             "👋 **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" +
+            "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'
@@ -62,7 +76,6 @@ class ContextAwareApp {
      * 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());
@@ -86,8 +99,64 @@ class ContextAwareApp {
             }
         });
         
-        // Toggle API section
-        this.elements.toggleApiSection.addEventListener('click', () => this.toggleApiKeySection());
+        // Toggle listeners for collapsible sections
+        this.elements.toggleApiSection.addEventListener('click', () => this.toggleSection('api'));
+        this.elements.kbHeader.addEventListener('click', () => this.toggleSection('kb'));
+        this.elements.assistantHeader.addEventListener('click', () => this.toggleSection('assistant'));
+
+        // Listen for window resize to adjust UI
+        window.addEventListener('resize', () => this.setupResponsiveUI());
+    }
+
+    /**
+     * Sets up the initial state of collapsible sections based on screen size.
+     */
+    setupResponsiveUI() {
+        const isMobile = window.innerWidth < 1024;
+        
+        // On mobile, collapse the knowledge base by default to show the chat first.
+        // On desktop, ensure everything is expanded.
+        this.state.kbSectionCollapsed = isMobile;
+        this.state.assistantSectionCollapsed = false; // Always show assistant on load
+        
+        // Hide API section by default if a valid key is already loaded
+        if (this.state.apiKeyValidated) {
+            this.state.apiSectionCollapsed = true;
+        }
+
+        this.updateSectionVisibility('api');
+        this.updateSectionVisibility('kb');
+        this.updateSectionVisibility('assistant');
+    }
+
+    /**
+     * Toggles a specific collapsible section.
+     * @param {'api' | 'kb' | 'assistant'} sectionName - The name of the section to toggle.
+     */
+    toggleSection(sectionName) {
+        const stateKey = `${sectionName}SectionCollapsed`;
+        this.state[stateKey] = !this.state[stateKey];
+        this.updateSectionVisibility(sectionName);
+    }
+
+    /**
+     * Updates the visibility of a collapsible section based on its state.
+     * @param {'api' | 'kb' | 'assistant'} sectionName - The name of the section to update.
+     */
+    updateSectionVisibility(sectionName) {
+        const contentEl = this.elements[`${sectionName}Content`];
+        const toggleIconEl = this.elements[`${sectionName}ToggleIcon`];
+        const isCollapsed = this.state[`${sectionName}SectionCollapsed`];
+
+        if (contentEl) {
+            contentEl.style.display = isCollapsed ? 'none' : 'block';
+             if(sectionName !== 'api' && contentEl.classList.contains('lg:flex')){
+                 contentEl.style.display = isCollapsed ? 'none' : 'flex';
+             }
+        }
+        if (toggleIconEl) {
+            toggleIconEl.style.transform = isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)';
+        }
     }
 
     /**
@@ -108,16 +177,15 @@ class ContextAwareApp {
     onApiKeyInputChange() {
         const apiKey = this.elements.apiKeyInput.value.trim();
         
-        // Reset validation state when user changes the key
         this.state.apiKeyValidated = false;
         this.state.userApiKey = '';
         
         if (!apiKey) {
             this.updateApiKeyStatus('pending', 'Enter API key and click Test');
         } else if (!apiKey.startsWith('sk-or-')) {
-            this.updateApiKeyStatus('error', 'OpenRouter API keys should start with "sk-or-"');
+            this.updateApiKeyStatus('error', 'Key should start with "sk-or-"');
         } else if (apiKey.length < 40) {
-            this.updateApiKeyStatus('error', 'API key appears to be too short');
+            this.updateApiKeyStatus('error', 'API key appears too short');
         } else {
             this.updateApiKeyStatus('pending', 'Click "Test Key" to validate');
         }
@@ -128,137 +196,72 @@ class ContextAwareApp {
     /**
      * 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 (apiKey.length < 40) {
-              this.updateApiKeyStatus('error', 'API key appears to be too short');
-              return;
-          }
-  
-          if (!silent) {
-              this.updateApiKeyStatus('testing', 'Testing API key...');
-              this.elements.testApiKeyBtn.disabled = true;
-              this.elements.testApiKeyBtn.textContent = 'Testing...';
-          }
-  
-          try {
-              const response = await fetch('/api/v1/test-api-key', {
-                  method: 'POST',
-                  headers: { 
-                      'Content-Type': 'application/json'
-                  },
-                  body: JSON.stringify({ api_key: apiKey }),
-              });
-  
-              // Parse the response regardless of HTTP status
-              const result = await response.json();
-  
-              if (response.ok && result.valid) {
-                  // API key is valid
-                  this.state.apiKeyValidated = true;
-                  this.state.userApiKey = apiKey;
-                  
-                  let message = result.message;
-                  if (result.model_info && result.model_info.credits === 'insufficient') {
-                      message = 'API key is valid but has no credits. You may need to add credits to use it.';
-                  }
-                  
-                  this.updateApiKeyStatus('success', message);
-                  
-                  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 {
-                  // API key is invalid
-                  this.state.apiKeyValidated = false;
-                  this.state.userApiKey = '';
-                  
-                  const errorMessage = result.message || 'Unknown error occurred';
-                  this.updateApiKeyStatus('error', errorMessage);
-                  
-                  if (!silent) {
-                      this.addMessageToChat(
-                          `❌ **API Key Invalid**: ${errorMessage}`,
-                          'system'
-                      );
-                  }
-              }
-          } catch (error) {
-              console.error('API key test error:', error);
-              this.state.apiKeyValidated = false;
-              this.state.userApiKey = '';
-              
-              const errorMessage = `Error testing API key: ${error.message}`;
-              this.updateApiKeyStatus('error', errorMessage);
-              
-              if (!silent) {
-                  this.addMessageToChat(
-                      `❌ **Connection Error**: ${errorMessage}`,
-                      'system'
-                  );
-              }
-          } finally {
-              this.elements.testApiKeyBtn.disabled = false;
-              this.elements.testApiKeyBtn.textContent = 'Test Key';
-              this.updateUI();
-          }
-      }
+    async testApiKey(silent = false) {
+        const apiKey = this.elements.apiKeyInput.value.trim();
+        
+        if (!apiKey) {
+            if (!silent) this.updateApiKeyStatus('error', 'Please enter an API key');
+            return;
+        }
+
+        if (!silent) {
+            this.updateApiKeyStatus('testing', 'Testing API key...');
+            this.elements.testApiKeyBtn.disabled = true;
+            this.elements.testApiKeyBtn.textContent = 'Testing...';
+        }
+
+        try {
+            const response = await fetch('/api/v1/test-api-key', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ api_key: apiKey }),
+            });
+            const result = await response.json();
+
+            if (response.ok && result.valid) {
+                this.state.apiKeyValidated = true;
+                this.state.userApiKey = apiKey;
+                this.updateApiKeyStatus('success', result.message);
+                if (!silent) {
+                    this.addMessageToChat("✅ **API Key Validated!** You can now use the assistant.", 'system');
+                    this.state.apiSectionCollapsed = true;
+                    this.updateSectionVisibility('api');
+                }
+            } else {
+                this.state.apiKeyValidated = false;
+                this.state.userApiKey = '';
+                this.updateApiKeyStatus('error', result.message || 'Unknown error');
+                if (!silent) this.addMessageToChat(`❌ **API Key Invalid**: ${result.message}`, 'system');
+            }
+        } catch (error) {
+            console.error('API key test error:', error);
+            this.state.apiKeyValidated = false;
+            this.state.userApiKey = '';
+            const errorMessage = `Error testing API key: ${error.message}`;
+            this.updateApiKeyStatus('error', errorMessage);
+            if (!silent) this.addMessageToChat(`❌ **Connection Error**: ${errorMessage}`, 'system');
+        } finally {
+            this.elements.testApiKeyBtn.disabled = false;
+            this.elements.testApiKeyBtn.textContent = 'Test Key';
+            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');
-            this.addMessageToChat(
-                "⚠️ **Please test the API key first** before saving it. Click the 'Test Key' button.",
-                'system'
-            );
-            return;
-        }
-
-        if (!apiKey) {
-            this.updateApiKeyStatus('error', 'No API key to save');
+            this.addMessageToChat("⚠️ **Please test the API key first** before saving.", 'system');
             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'
-            );
+            this.addMessageToChat("💾 **API Key Saved!** It will be remembered for future sessions.", 'system');
         } catch (error) {
-            console.error('Save API key error:', error);
-            this.updateApiKeyStatus('error', 'Failed to save API key locally');
-            
-            this.addMessageToChat(
-                "❌ **Save Failed**: Could not save API key to local storage.",
-                'system'
-            );
+            this.addMessageToChat("❌ **Save Failed**: Could not save API key to local storage.", 'system');
         }
     }
 
@@ -266,52 +269,41 @@ class ContextAwareApp {
      * 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';
+        const statusEl = this.elements.apiStatusText;
+        const iconEl = this.elements.apiStatusIcon;
         
         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...';
+                iconEl.className = 'w-3 h-3 bg-blue-500 rounded-full animate-pulse flex-shrink-0';
+                statusEl.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';
+                iconEl.className = 'w-3 h-3 bg-green-500 rounded-full flex-shrink-0';
+                statusEl.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';
+                iconEl.className = 'w-3 h-3 bg-red-500 rounded-full flex-shrink-0';
+                statusEl.textContent = 'API Key Invalid';
                 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';
+                iconEl.className = 'w-3 h-3 bg-yellow-500 rounded-full flex-shrink-0';
+                statusEl.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)';
-        }
+        // Also update the detailed status message box
+        const detailedStatusEl = this.elements.apiKeyStatus;
+        detailedStatusEl.textContent = message;
+        detailedStatusEl.classList.remove('hidden');
+        detailedStatusEl.className = 'p-3 rounded-lg text-sm ';
+
+        const colors = {
+            testing: 'bg-blue-500/20 text-blue-300 border border-blue-500/30',
+            success: 'bg-green-500/20 text-green-300 border border-green-500/30',
+            error: 'bg-red-500/20 text-red-300 border border-red-500/30',
+            pending: 'bg-yellow-500/20 text-yellow-300 border border-yellow-500/30',
+        };
+        detailedStatusEl.classList.add(colors[status]);
     }
 
     /**
@@ -319,11 +311,10 @@ class ContextAwareApp {
      */
     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'
-            );
+            this.addMessageToChat("🔑 **API Key Required**: Please enter and test your API key first.", 'system');
+            this.state.apiSectionCollapsed = false;
+            this.updateSectionVisibility('api');
+            this.elements.apiKeyInput.focus();
             return;
         }
 
@@ -340,7 +331,7 @@ class ContextAwareApp {
      */
     async handleIndexContext() {
         if (!this.state.apiKeyValidated) {
-            this.updateApiKeyStatus('error', 'Please enter and test a valid API key first');
+            this.addMessageToChat("🔑 **API Key Required**: Please validate your API key before indexing.", 'system');
             return;
         }
 
@@ -383,10 +374,10 @@ class ContextAwareApp {
      */
     async handleSendPrompt() {
         const prompt = this.elements.chatInput.value.trim();
-        if (prompt.length < 2 || this.state.isGenerating || !this.state.isIndexed) {
-            if (!this.state.isIndexed) {
-                this.showStatus('Please index your context before asking questions.', 'error');
-            }
+        if (prompt.length < 2 || this.state.isGenerating) return;
+        
+        if (!this.state.isIndexed) {
+            this.showStatus('Please index your context before asking questions.', 'error');
             return;
         }
 
@@ -438,7 +429,7 @@ class ContextAwareApp {
             return;
         }
 
-        let userMessage = `Task: ${task_type}`;
+        let userMessage = `Task: ${task_type.charAt(0).toUpperCase() + task_type.slice(1)}`;
         if (prompt) {
             userMessage += `\nPrompt: ${prompt}`;
         }
@@ -449,7 +440,7 @@ class ContextAwareApp {
 
         this.state.isGenerating = true;
         this.updateUI();
-        this.showStatus('AI is performing the task...', 'loading');
+        this.showStatus(`AI is performing task: ${task_type}...`, 'loading');
 
         try {
             const response = await fetch('/api/v1/task', {
@@ -491,9 +482,7 @@ class ContextAwareApp {
         try {
             await fetch('/api/v1/clear_index', { 
                 method: 'POST',
-                headers: {
-                    'X-API-Key': this.state.userApiKey
-                }
+                headers: { 'X-API-Key': this.state.userApiKey }
             });
             this.showStatus('Knowledge base cleared. Ready for new context.', 'success');
         } catch (error) {
@@ -509,7 +498,6 @@ class ContextAwareApp {
         const isQandA = this.elements.taskSelect.value === 'q_and_a';
         const hasValidApiKey = this.state.apiKeyValidated;
 
-        // Disable buttons if no API key
         this.elements.indexContextBtn.disabled = this.state.isIndexing || !hasContext || !hasValidApiKey;
 
         if (isQandA) {
@@ -518,7 +506,6 @@ class ContextAwareApp {
             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;
@@ -526,8 +513,6 @@ class ContextAwareApp {
 
     /**
      * Displays a status message to the user.
-     * @param {string} message - The message to display.
-     * @param {'loading'|'success'|'error'} type - The type of message.
      */
     showStatus(message, type) {
         const indicator = this.elements.statusIndicator;
@@ -538,7 +523,6 @@ class ContextAwareApp {
 
         indicator.innerHTML = `<span class="${colorClass}">${message}</span>`;
 
-        // Hide the message after a delay unless it's a loading indicator
         if (type !== 'loading') {
             setTimeout(() => indicator.classList.add('hidden'), 5000);
         }
@@ -546,8 +530,6 @@ class ContextAwareApp {
 
     /**
      * Adds a new message to the chat display.
-     * @param {string} message - The message content.
-     * @param {'user'|'ai'|'system'} sender - The sender of the message.
      */
     addMessageToChat(message, sender) {
         const messageDiv = document.createElement('div');
@@ -565,7 +547,6 @@ class ContextAwareApp {
             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);
@@ -607,4 +588,4 @@ class ContextAwareApp {
 
 document.addEventListener('DOMContentLoaded', () => {
     new ContextAwareApp();
-});
+});