Update static/app.js

static/app.js

@@ -25,6 +25,10 @@ class ContextAwareApp {
             apiKeyContent: document.getElementById('api-key-content'),
             toggleIcon: document.getElementById('toggle-icon'),
 
+            // ✨ NEW: File Input elements
+            fileInput: document.getElementById('file-input'),
+            fileName: document.getElementById('file-name'),
+
             // Responsive collapsible section elements
             kbHeader: document.getElementById('kb-header'),
             kbContent: document.getElementById('kb-content'),
@@ -64,7 +68,7 @@ class ContextAwareApp {
             "👋 **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" +
+            "2. **Add your context** by uploading a file or pasting text in the Knowledge Base.\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'
@@ -89,12 +93,21 @@ class ContextAwareApp {
             }
         });
         this.elements.contextInput.addEventListener('input', () => {
+            // If user types in textarea, clear the file input
+            if (this.elements.fileInput.value) {
+                this.elements.fileInput.value = '';
+                this.elements.fileName.textContent = 'Choose a file...';
+            }
             this.updateContextStats();
-            this.updateUI(); // Add this to ensure UI updates when context changes
+            this.updateUI();
         });
         this.elements.chatInput.addEventListener('input', () => this.autoResizeTextarea(this.elements.chatInput));
+        
+        // ✨ NEW: File input listener
+        this.elements.fileInput.addEventListener('change', () => this.handleFileSelection());
+
 
-        // API Key listeners - Fixed event handling
+        // API Key listeners
         this.elements.testApiKeyBtn.addEventListener('click', (e) => {
             e.preventDefault();
             this.testApiKey();
@@ -105,7 +118,7 @@ class ContextAwareApp {
         });
         this.elements.apiKeyInput.addEventListener('input', () => {
             this.onApiKeyInputChange();
-            this.updateUI(); // Ensure UI updates immediately on input change
+            this.updateUI();
         });
         this.elements.apiKeyInput.addEventListener('keydown', e => {
             if (e.key === 'Enter') {
@@ -123,6 +136,23 @@ class ContextAwareApp {
         window.addEventListener('resize', () => this.setupResponsiveUI());
     }
 
+    /**
+     * ✨ NEW: Handles file selection, updates UI, and clears textarea.
+     */
+    handleFileSelection() {
+        const file = this.elements.fileInput.files[0];
+        if (file) {
+            this.elements.fileName.textContent = file.name;
+            // Clear textarea and its stats when a file is selected
+            this.elements.contextInput.value = '';
+            this.updateContextStats();
+            this.updateUI();
+        } else {
+            this.elements.fileName.textContent = 'Choose a file...';
+        }
+    }
+
+
     /**
      * Sets up the initial state of collapsible sections based on screen size.
      */
@@ -213,7 +243,7 @@ class ContextAwareApp {
     }
 
     /**
-     * Test the API key validity - Fixed with better error handling and timeout
+     * Test the API key validity
      */
     async testApiKey(silent = false) {
         const apiKey = this.elements.apiKeyInput.value.trim();
@@ -229,7 +259,6 @@ class ContextAwareApp {
         }
 
         try {
-            // Create an AbortController for timeout handling
             const controller = new AbortController();
             const timeoutId = setTimeout(() => controller.abort(), 120000); // 120 second timeout
 
@@ -242,13 +271,12 @@ class ContextAwareApp {
 
             clearTimeout(timeoutId);
 
+            const result = await response.json();
+
             if (!response.ok) {
-                const errorText = await response.text();
-                throw new Error(`Server error (${response.status}): ${errorText}`);
+                 throw new Error(result.detail || `Server error (${response.status})`);
             }
 
-            const result = await response.json();
-
             if (result.valid) {
                 this.state.apiKeyValidated = true;
                 this.state.userApiKey = apiKey;
@@ -371,7 +399,7 @@ class ContextAwareApp {
     }
 
     /**
-     * Handles the logic for indexing the provided context.
+     * ✨ UPDATED: Handles indexing from either a file or the textarea.
      */
     async handleIndexContext() {
         if (!this.state.apiKeyValidated) {
@@ -379,20 +407,35 @@ class ContextAwareApp {
             return;
         }
 
+        const file = this.elements.fileInput.files[0];
         const context = this.elements.contextInput.value.trim();
-        if (context.length < 20) {
-            this.showStatus('Context is too short. Please provide at least 20 characters.', 'error');
+
+        if (!file && context.length < 20) {
+            this.showStatus('Context is too short. Please provide at least 20 characters or upload a file.', 'error');
             return;
         }
 
         this.state.isIndexing = true;
         this.updateUI();
-        this.showStatus('Indexing context... This may take a moment.', 'loading');
+        
+        // Decide which endpoint to use
+        if (file) {
+            this.showStatus(`Uploading and indexing ${file.name}...`, 'loading');
+            await this.handleIndexFile(file);
+        } else {
+            this.showStatus('Indexing context from text area...', 'loading');
+            await this.handleIndexText(context);
+        }
 
-        try {
-            const controller = new AbortController();
-            const timeoutId = setTimeout(() => controller.abort(), 60000); // 60 second timeout for indexing
+        this.state.isIndexing = false;
+        this.updateUI();
+    }
 
+    /**
+     * Handles indexing from the text area.
+     */
+    async handleIndexText(context) {
+        try {
             const response = await fetch('/api/v1/index', {
                 method: 'POST',
                 headers: { 
@@ -400,35 +443,57 @@ class ContextAwareApp {
                     'X-API-Key': this.state.userApiKey
                 },
                 body: JSON.stringify({ context }),
-                signal: controller.signal
             });
 
-            clearTimeout(timeoutId);
+            const result = await response.json();
+            if (!response.ok) throw new Error(result.detail);
+            
+            this.state.isIndexed = true;
+            this.showStatus(`Successfully indexed ${result.documents_added || '1'} document chunks.`, 'success');
 
-            if (!response.ok) {
-                const errorText = await response.text();
-                throw new Error(`Server error (${response.status}): ${errorText}`);
-            }
+        } catch (error) {
+            this.handleIndexingError(error);
+        }
+    }
+
+    /**
+     * ✨ NEW: Handles indexing from a file upload.
+     */
+    async handleIndexFile(file) {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        try {
+            const response = await fetch('/api/v1/index-file', {
+                method: 'POST',
+                headers: { 
+                    'X-API-Key': this.state.userApiKey
+                    // No 'Content-Type' header needed, browser sets it for FormData
+                },
+                body: formData,
+            });
 
             const result = await response.json();
+            if (!response.ok) throw new Error(result.detail);
+            
             this.state.isIndexed = true;
-            this.showStatus(`Successfully indexed ${result.documents_added || '1'} document chunks.`, 'success');
+            this.showStatus(result.message, 'success');
+
         } catch (error) {
-            console.error('Indexing error:', error);
-            let errorMessage = 'Error indexing context';
-            if (error.name === 'AbortError') {
-                errorMessage = 'Indexing timed out. Please try with smaller content or check your connection.';
-            } else if (error.message) {
-                errorMessage = error.message;
-            }
-            this.showStatus(errorMessage, 'error');
-            this.state.isIndexed = false;
-        } finally {
-            this.state.isIndexing = false;
-            this.updateUI();
+            this.handleIndexingError(error);
         }
     }
 
+    /**
+     * Centralized error handler for all indexing methods.
+     */
+    handleIndexingError(error) {
+        console.error('Indexing error:', error);
+        this.showStatus(`Error indexing context: ${error.message}`, 'error');
+        this.state.isIndexed = false;
+    }
+
+
     /**
      * Handles sending a user's prompt to the backend for a response.
      */
@@ -556,6 +621,8 @@ class ContextAwareApp {
      */
     async handleClearContext() {
         this.elements.contextInput.value = '';
+        this.elements.fileInput.value = ''; // Also clear the file input
+        this.elements.fileName.textContent = 'Choose a file...';
         this.updateContextStats();
         this.state.isIndexed = false;
         this.updateUI();
@@ -577,7 +644,10 @@ class ContextAwareApp {
      * Updates all UI elements based on the current application state.
      */
     updateUI() {
-        const hasContext = this.elements.contextInput.value.trim().length > 10;
+        const hasTextContext = this.elements.contextInput.value.trim().length > 10;
+        const hasFileContext = this.elements.fileInput.files.length > 0;
+        const hasContext = hasTextContext || hasFileContext;
+
         const isQandA = this.elements.taskSelect.value === 'q_and_a';
         const hasValidApiKey = this.state.apiKeyValidated;
         const isBusy = this.state.isIndexing || this.state.isGenerating || this.state.isTestingApiKey;
@@ -600,7 +670,8 @@ class ContextAwareApp {
         if (isQandA) {
             this.elements.sendButton.disabled = isBusy || !this.state.isIndexed || !hasValidApiKey;
         } else {
-            this.elements.sendButton.disabled = isBusy || !hasContext || !hasValidApiKey;
+            // For other tasks, context comes from the text area, not the index
+            this.elements.sendButton.disabled = isBusy || !hasTextContext || !hasValidApiKey;
         }
 
         // Update visual states
@@ -631,10 +702,12 @@ class ContextAwareApp {
         let colorClass = 'text-slate-400';
         if (type === 'success') colorClass = 'text-green-400';
         if (type === 'error') colorClass = 'text-red-400';
+        if (type === 'loading') colorClass = 'text-blue-400 animate-pulse';
 
         indicator.innerHTML = `<span class="${colorClass}">${message}</span>`;
 
         if (type !== 'loading') {
+            indicator.querySelector('span').classList.remove('animate-pulse');
             setTimeout(() => indicator.classList.add('hidden'), 5000);
         }
     }