refactor: improve file type detection and icon rendering

- Simplified and enhanced file type detection logic in FilePreview and UserMessage components - Updated icon selection to use more robust file extension and name matching - Refined PDF.js worker configuration for safer initialization - Streamlined file preview icon selection with more consistent approach
stackblitz-labs · Mar 2, 2025 · 9bfa13c · 9bfa13c
1 parent ed52408
commit 9bfa13c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 85 deletions.
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
@@ -379,7 +379,7 @@ export const ChatImpl = memo(
             );
           }
 
-          // For other files, maintain normal behavior
+          // For text files, use standard format
           return (
             `[File attached: ${fileName} (${fileSizeKB} KB)]\n\n` +
             `Content of file ${fileName}:\n` +

diff --git a/app/components/chat/FilePreview.tsx b/app/components/chat/FilePreview.tsx
@@ -17,23 +17,25 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
       return 'i-ph:image';
     }
 
-    if (fileType.includes('pdf')) {
+    const fileName = fileType.toLowerCase();
+
+    if (fileName.includes('pdf') || fileName.endsWith('.pdf')) {
       return 'i-ph:file-pdf';
     }
 
-    if (fileType.includes('text') || fileType.includes('txt')) {
-      return 'i-ph:file-text';
+    if (fileName.includes('docx') || fileName.endsWith('.docx')) {
+      return 'i-ph:file-doc';
     }
 
-    if (fileType.includes('json') || fileType.includes('javascript') || fileType.includes('js')) {
-      return 'i-ph:file-code';
+    if (fileName.includes('text') || fileName.includes('txt') || fileName.endsWith('.txt')) {
+      return 'i-ph:file-text';
     }
 
-    if (fileType.includes('csv') || fileType.includes('excel') || fileType.includes('spreadsheet')) {
-      return 'i-ph:file-spreadsheet';
+    if (fileName.endsWith('.md')) {
+      return 'i-ph:file-text';
     }
 
-    return 'i-ph:file-doc';
+    return 'i-ph:file-text';
   };
 
   return (

diff --git a/app/components/chat/UserMessage.tsx b/app/components/chat/UserMessage.tsx
@@ -10,85 +10,12 @@ function getFileIcon(fileName: string) {
   const extension = fileName.split('.').pop()?.toLowerCase() || '';
 
   switch (extension) {
-    // JavaScript/TypeScript
-    case 'js':
-    case 'jsx':
-    case 'ts':
-    case 'tsx':
-      return 'i-ph:file-js text-yellow-400';
-
-    // Markup and style
-    case 'html':
-    case 'xml':
-      return 'i-ph:file-html text-orange-400';
-    case 'css':
-    case 'scss':
-    case 'sass':
-      return 'i-ph:file-css text-blue-400';
-
-    // Data and configuration
-    case 'json':
-    case 'yaml':
-    case 'yml':
-    case 'conf':
-    case 'ini':
-    case 'env':
-      return 'i-ph:brackets-curly text-green-400';
-    case 'csv':
-      return 'i-ph:table text-blue-300';
-
-    // Programming languages
-    case 'py':
-      return 'i-ph:file-py text-blue-500';
-    case 'c':
-    case 'cpp':
-    case 'h':
-      return 'i-ph:code text-blue-600';
-    case 'java':
-      return 'i-ph:code text-red-500';
-    case 'rb':
-      return 'i-ph:gem text-red-400';
-    case 'php':
-      return 'i-ph:elephant text-purple-500';
-    case 'go':
-      return 'i-ph:code text-cyan-400';
-    case 'rs':
-      return 'i-ph:code text-orange-600';
-    case 'swift':
-      return 'i-ph:code text-orange-500';
-
-    // Scripts
-    case 'sh':
-    case 'bat':
-    case 'ps1':
-      return 'i-ph:terminal text-green-500';
-
     // Documents
     case 'md':
     case 'txt':
-    case 'rtf':
       return 'i-ph:file-text text-amber-400';
     case 'docx':
       return 'i-ph:file-doc text-blue-500';
-    case 'xlsx':
-      return 'i-ph:file-xls text-green-600';
-    case 'pptx':
-      return 'i-ph:file-ppt text-red-600';
-
-    // Logs
-    case 'log':
-    case 'gitignore':
-      return 'i-ph:list-bullets text-gray-400';
-
-    // Images
-    case 'jpg':
-    case 'jpeg':
-    case 'png':
-    case 'gif':
-    case 'svg':
-      return 'i-ph:image text-green-500';
-
-    // Specific documents
     case 'pdf':
       return 'i-ph:file-pdf text-red-500';
 

diff --git a/app/utils/documentUtils.ts b/app/utils/documentUtils.ts
@@ -1,10 +1,19 @@
 import JSZip from 'jszip';
 import * as pdfjsLib from 'pdfjs-dist';
 
-// Disable the worker completely
+// Configure PDF.js worker in a safe way
 try {
-  // @ts-ignore - Forcing a different configuration to avoid worker errors
-  pdfjsLib.GlobalWorkerOptions = { workerSrc: null };
+  // Only modify if in browser environment and if it's writable
+  if (typeof window !== 'undefined' && pdfjsLib.GlobalWorkerOptions) {
+    // Check if the property is writable
+    const descriptor = Object.getOwnPropertyDescriptor(pdfjsLib, 'GlobalWorkerOptions');
+    if (descriptor && descriptor.writable) {
+      // @ts-ignore - Only set workerSrc if property is writable
+      pdfjsLib.GlobalWorkerOptions = { workerSrc: null };
+    } else {
+      console.log('PDF.js GlobalWorkerOptions is read-only, skipping configuration');
+    }
+  }
 } catch (e) {
   console.warn('Failed to modify PDF.js worker configuration:', e);
 }