Update templates/index.html

templates/index.html

@@ -75,9 +75,9 @@
         textarea {
             resize: none; /* Prevent manual resizing */
             flex-grow: 1;
-            min-height: 2.5rem; /* Minimum height for single line */
-            max-height: 8rem; /* Max height before scrolling */
-            overflow-y: auto; /* Enable scrolling if content exceeds max-height */
+            min-height: 2.5rem;
+            max-height: 8rem;
+            overflow-y: auto;
             background-color: #2d3748; /* Same as container */
             color: #e2e8f0; /* Light text */
             border: 1px solid #4a5568; /* Darker border */
@@ -174,7 +174,7 @@
         <div id="messagesArea" class="messages-area">
             <!-- Chat messages will be appended here -->
             <div class="ai-message message-bubble">
-                Hello! How can I assist you today? You can type a message, or upload an image or a text document.
+                Hello! How can I assist you today? You can type a message, or upload an image, a text document, or a PDF.
             </div>
         </div>
         <div class="input-area flex-col items-stretch">
@@ -253,9 +253,9 @@
         }
 
         let uploadedFile = null; // Stores the selected file object
-        let uploadedFileType = null; // 'image' or 'document'
-        let uploadedFileBase64 = null; // For images
-        let uploadedFileText = null; // For documents
+        let uploadedFileType = null; // 'image', 'text_document', or 'pdf_document'
+        let uploadedFileBase64 = null; // For images and PDFs
+        let uploadedFileText = null; // For text documents
 
         // Function to show custom message box
         function showMessage(title, content) {
@@ -288,9 +288,7 @@
             } else if (typeof content === 'string') {
                 messageDiv.innerHTML = marked.parse(content); // Render Markdown for text
             } else if (typeof content === 'object' && content.type === 'image') {
-                // Display image in message bubble
-                // This block is now effectively unused for user messages as displayContent will be a string
-                // But keeping it here for potential future use or if AI sends image back
+                // Display image in message bubble (if AI sends image back, or if re-introduced)
                 const img = document.createElement('img');
                 img.src = content.src;
                 img.alt = "Uploaded image";
@@ -302,8 +300,7 @@
                     messageDiv.appendChild(textDiv);
                 }
             } else if (typeof content === 'object' && content.type === 'document') {
-                // Display document info in message bubble
-                // This block is now effectively unused for user messages as displayContent will be a string
+                // Display document info in message bubble (if AI sends document back, or if re-introduced)
                 const docInfoDiv = document.createElement('div');
                 docInfoDiv.innerHTML = `<strong>Document Uploaded:</strong> ${content.name}<br>`;
                 if (content.textPreview) {
@@ -368,17 +365,15 @@
 
             uploadedFile = file;
             uploadedFileType = 'image';
-            // Update this line to show success message and file name
-            fileNameDisplay.textContent = `Image: ${file.name} (Uploaded successfully!)`;
+            fileNameDisplay.textContent = `Image: ${file.name} (Ready to send)`;
             clearFileButton.classList.remove('hidden');
 
             const reader = new FileReader();
             reader.onload = (e) => {
                 uploadedFileBase64 = e.target.result.split(',')[1]; // Get base64 part
                 console.log("DEBUG: Image FileReader loaded. Base64 length:", uploadedFileBase64.length);
-                // Removed image preview code here
-                filePreview.innerHTML = ''; // Ensure no old preview remains
-                filePreview.classList.add('hidden'); // Ensure preview container remains hidden
+                filePreview.innerHTML = ''; 
+                filePreview.classList.add('hidden'); 
             };
             reader.onerror = (e) => {
                 console.error("DEBUG: FileReader error for image:", e);
@@ -403,35 +398,56 @@
 
             console.log("DEBUG: Selected document file:", file);
             uploadedFile = file;
-            uploadedFileType = 'document';
-            // Update this line to show success message and file name
-            fileNameDisplay.textContent = `Document: ${file.name} (Uploaded successfully!)`;
+            fileNameDisplay.textContent = `Document: ${file.name} (Ready to send)`;
             clearFileButton.classList.remove('hidden');
 
-            // Basic text extraction for .txt files on frontend
+            // Determine file type and read accordingly
             if (file.type === 'text/plain') {
+                uploadedFileType = 'text_document';
                 const reader = new FileReader();
                 reader.onload = (e) => {
                     uploadedFileText = e.target.result;
-                    console.log("DEBUG: Document FileReader loaded. Text length:", uploadedFileText.length);
-                    // Removed document preview code here
-                    filePreview.innerHTML = ''; // Ensure no old preview remains
-                    filePreview.classList.add('hidden'); // Ensure preview container remains hidden
+                    console.log("DEBUG: Text Document FileReader loaded. Text length:", uploadedFileText.length);
+                    filePreview.innerHTML = ''; 
+                    filePreview.classList.add('hidden'); 
                 };
                 reader.onerror = (e) => {
-                    console.error("DEBUG: FileReader error for document:", e);
-                    showMessage("File Read Error", "Could not read the document file.");
+                    console.error("DEBUG: FileReader error for text document:", e);
+                    showMessage("File Read Error", "Could not read the text document file.");
                     clearFileSelection();
                 };
                 reader.readAsText(file);
+            } else if (file.type === 'application/pdf') {
+                uploadedFileType = 'pdf_document';
+                if (file.size > 10 * 1024 * 1024) { // 10MB limit for PDFs (adjust as needed)
+                    showMessage("File Too Large", "Please upload a PDF smaller than 10MB.");
+                    documentUpload.value = '';
+                    console.error("DEBUG: PDF file too large:", file.size);
+                    clearFileSelection();
+                    return;
+                }
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    uploadedFileBase64 = e.target.result.split(',')[1]; // Get base64 part
+                    console.log("DEBUG: PDF FileReader loaded. Base64 length:", uploadedFileBase64.length);
+                    filePreview.innerHTML = ''; 
+                    filePreview.classList.add('hidden'); 
+                };
+                reader.onerror = (e) => {
+                    console.error("DEBUG: FileReader error for PDF:", e);
+                    showMessage("File Read Error", "Could not read the PDF file.");
+                    clearFileSelection();
+                };
+                reader.readAsDataURL(file); // Read PDF as Data URL (base64)
             } else {
-                // For other document types, inform the user about limitations
-                // The filename will still be displayed via fileNameDisplay.textContent
-                showMessage("Unsupported Document", "Only plain text (.txt) files are directly processed on the frontend. For PDF, DOCX, etc., advanced backend parsing is required.");
+                // For other document types like .docx, inform the user
+                uploadedFileType = 'unsupported_document';
+                showMessage("Unsupported Document", "Only plain text (.txt) and PDF (.pdf) files are directly processed. For DOCX, etc., advanced backend parsing is required.");
                 console.warn("DEBUG: Unsupported document type selected:", file.type);
-                uploadedFileText = null; // Ensure no text is sent for unsupported types
-                filePreview.innerHTML = ''; // Ensure no old preview remains
-                filePreview.classList.add('hidden'); // Ensure preview container remains hidden
+                uploadedFileText = null; 
+                uploadedFileBase64 = null;
+                filePreview.innerHTML = ''; 
+                filePreview.classList.add('hidden'); 
             }
         });
 
@@ -460,18 +476,22 @@
                     mimeType: uploadedFile.type,
                     data: uploadedFileBase64
                 };
-                // Change displayContent to a text message for the chat bubble
                 displayContent = `Image uploaded: ${uploadedFile.name}. ${userQuery ? `\n\n${userQuery}` : ''}`;
                 console.log("DEBUG: Prepared image data for requestBody. MimeType:", requestBody.image_data.mimeType, "Data length:", requestBody.image_data.data.length);
-            } else if (uploadedFileType === 'document' && uploadedFileText) {
+            } else if (uploadedFileType === 'text_document' && uploadedFileText) {
                 requestBody.document_text = uploadedFileText;
-                // Change displayContent to a text message for the chat bubble
                 displayContent = `Document uploaded: ${uploadedFile.name}. ${userQuery ? `\n\n${userQuery}` : ''}`;
-                console.log("DEBUG: Prepared document text for requestBody. Text length:", requestBody.document_text.length);
-            } else if (uploadedFileType === 'document' && uploadedFile && !uploadedFileText) {
+                console.log("DEBUG: Prepared text document text for requestBody. Text length:", requestBody.document_text.length);
+            } else if (uploadedFileType === 'pdf_document' && uploadedFileBase64) {
+                requestBody.pdf_data = {
+                    mimeType: uploadedFile.type,
+                    data: uploadedFileBase64
+                };
+                displayContent = `PDF uploaded: ${uploadedFile.name}. ${userQuery ? `\n\n${userQuery}` : ''}`;
+                console.log("DEBUG: Prepared PDF data for requestBody. MimeType:", requestBody.pdf_data.mimeType, "Data length:", requestBody.pdf_data.data.length);
+            } else if (uploadedFileType === 'unsupported_document' && uploadedFile) {
                 // For unsupported document types, send filename and a note
                 requestBody.query = `${userQuery}\n\nUser uploaded a document named "${uploadedFile.name}". Please note: Content extraction for this file type is not supported in this demo.`;
-                // Change displayContent to a text message for the chat bubble
                 displayContent = `Document uploaded: ${uploadedFile.name} (unsupported type). ${userQuery ? `\n\n${userQuery}` : ''}`;
                 console.log("DEBUG: Prepared unsupported document type as text query:", requestBody.query);
             }