Update templates/index.html

templates/index.html

@@ -289,6 +289,8 @@
                 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
                 const img = document.createElement('img');
                 img.src = content.src;
                 img.alt = "Uploaded image";
@@ -301,6 +303,7 @@
                 }
             } 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
                 const docInfoDiv = document.createElement('div');
                 docInfoDiv.innerHTML = `<strong>Document Uploaded:</strong> ${content.name}<br>`;
                 if (content.textPreview) {
@@ -341,7 +344,6 @@
             console.log("DEBUG: Image input change event triggered.");
             console.log("DEBUG: event.target.files:", event.target.files); 
 
-            // IMPORTANT: Do NOT call clearFileSelection() here. It clears the file before it's read.
             const file = event.target.files[0];
 
             if (!file) {
@@ -366,19 +368,17 @@
 
             uploadedFile = file;
             uploadedFileType = 'image';
-            fileNameDisplay.textContent = file.name;
+            // Update this line to show success message and file name
+            fileNameDisplay.textContent = `Image: ${file.name} (Uploaded successfully!)`;
             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);
-                const img = document.createElement('img');
-                img.src = e.target.result;
-                img.classList.add('uploaded-file-preview');
-                filePreview.innerHTML = '';
-                filePreview.appendChild(img);
-                filePreview.classList.remove('hidden');
+                // Removed image preview code here
+                filePreview.innerHTML = ''; // Ensure no old preview remains
+                filePreview.classList.add('hidden'); // Ensure preview container remains hidden
             };
             reader.onerror = (e) => {
                 console.error("DEBUG: FileReader error for image:", e);
@@ -393,7 +393,6 @@
             console.log("DEBUG: Document input change event triggered.");
             console.log("DEBUG: event.target.files:", event.target.files);
 
-            // IMPORTANT: Do NOT call clearFileSelection() here. It clears the file before it's read.
             const file = event.target.files[0];
 
             if (!file) {
@@ -405,7 +404,8 @@
             console.log("DEBUG: Selected document file:", file);
             uploadedFile = file;
             uploadedFileType = 'document';
-            fileNameDisplay.textContent = file.name;
+            // Update this line to show success message and file name
+            fileNameDisplay.textContent = `Document: ${file.name} (Uploaded successfully!)`;
             clearFileButton.classList.remove('hidden');
 
             // Basic text extraction for .txt files on frontend
@@ -414,12 +414,9 @@
                 reader.onload = (e) => {
                     uploadedFileText = e.target.result;
                     console.log("DEBUG: Document FileReader loaded. Text length:", uploadedFileText.length);
-                    const textPreview = document.createElement('pre');
-                    textPreview.classList.add('uploaded-file-preview', 'whitespace-pre-wrap', 'text-sm', 'max-h-32', 'overflow-y-auto', 'bg-gray-700', 'p-2', 'rounded-md');
-                    textPreview.textContent = uploadedFileText.substring(0, 500) + (uploadedFileText.length > 500 ? '...' : '');
-                    filePreview.innerHTML = '';
-                    filePreview.appendChild(textPreview);
-                    filePreview.classList.remove('hidden');
+                    // Removed document preview code here
+                    filePreview.innerHTML = ''; // Ensure no old preview remains
+                    filePreview.classList.add('hidden'); // Ensure preview container remains hidden
                 };
                 reader.onerror = (e) => {
                     console.error("DEBUG: FileReader error for document:", e);
@@ -429,15 +426,12 @@
                 reader.readAsText(file);
             } else {
                 // For other document types, inform the user about limitations
-                const unsupportedMessage = document.createElement('div');
-                unsupportedMessage.classList.add('p-3', 'bg-red-800', 'text-white', 'rounded-lg');
-                unsupportedMessage.innerHTML = `<strong>Unsupported Document Type:</strong> Only plain text (.txt) files are directly processed on the frontend. For PDF, DOCX, etc., advanced backend parsing is required. The file name will be sent, but content won't be extracted here.`;
-                filePreview.innerHTML = '';
-                filePreview.appendChild(unsupportedMessage);
-                filePreview.classList.remove('hidden');
-                uploadedFileText = null; // Ensure no text is sent for unsupported types
+                // 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.");
                 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
             }
         });
 
@@ -466,17 +460,19 @@
                     mimeType: uploadedFile.type,
                     data: uploadedFileBase64
                 };
-                displayContent = { type: 'image', src: `data:${uploadedFile.type};base64,${uploadedFileBase64}`, text: userQuery };
+                // 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) {
                 requestBody.document_text = uploadedFileText;
-                displayContent = { type: 'document', name: uploadedFile.name, textPreview: uploadedFileText.substring(0, 500), text: userQuery };
+                // 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) {
                 // For unsupported document types, send filename and a note
-                // This will be handled as a text query on the backend
                 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.`;
-                displayContent = { type: 'document', name: uploadedFile.name, text: userQuery };
+                // 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);
             }
 
@@ -488,8 +484,6 @@
             messageInput.style.height = 'auto'; // Reset textarea height
 
             // Clear file selection after adding to chat
-            // IMPORTANT: This is the correct place to clear the file selection
-            // after the data has been used to construct the request.
             clearFileSelection(); 
 
             // Show loading indicator