mail page rest

app/courrier/page.tsx

@@ -231,9 +231,9 @@ function decodeMIME(text: string, encoding?: string, charset: string = 'utf-8'):
   }
 }
 
-function extractHtmlBody(htmlContent: string): string {
+function extractHtmlBody(html: string): string {
-  const bodyMatch = htmlContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+  const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
-  return bodyMatch ? bodyMatch[1] : htmlContent;
+  return bodyMatch ? bodyMatch[1] : html;
 }
 
 function decodeMimeContent(content: string): string {
@@ -271,91 +271,78 @@ function decodeMimeContent(content: string): string {
 }
 
 function renderEmailContent(email: Email) {
+  if (!email.body) return null;
+
   try {
-    // Parse the full email content
+    // Parse the email content using our MIME decoder
     const parsed = parseFullEmail(email.body);
     
-    // If we have HTML content, display it
+    // If we have HTML content, render it
     if (parsed.html) {
       return (
-        <div className="prose max-w-none">
+        <div className="email-content">
-          <div 
+          <div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: parsed.html }} />
-            dangerouslySetInnerHTML={{ 
+          {parsed.attachments && parsed.attachments.length > 0 && (
-              __html: parsed.html
+            <div className="mt-4">
-                .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
+              <h3 className="text-sm font-medium mb-2">Attachments:</h3>
-                .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+              <ul className="space-y-2">
-                .replace(/<base[^>]*>/gi, '')
+                {parsed.attachments.map((attachment, index) => (
-                .replace(/<meta[^>]*>/gi, '')
+                  <li key={index} className="flex items-center gap-2">
-                .replace(/<link[^>]*>/gi, '')
+                    <Paperclip className="h-4 w-4 text-muted-foreground" />
-                .replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '')
+                    <span className="text-sm">{attachment.filename}</span>
-                .replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '')
+                  </li>
-                .replace(/<body[^>]*>/gi, '')
+                ))}
-                .replace(/<\/body>/gi, '')
+              </ul>
-                .replace(/<html[^>]*>/gi, '')
-                .replace(/<\/html>/gi, '')
-            }} 
-          />
-        </div>
-      );
-    }
-    
-    // If we have text content, display it with proper formatting
-    if (parsed.text) {
-      return (
-        <div className="whitespace-pre-wrap">
-          {parsed.text}
-        </div>
-      );
-    }
-
-    // If we have attachments, display them
-    if (parsed.attachments && parsed.attachments.length > 0) {
-      return (
-        <div>
-          <div className="mb-4">
-            {parsed.attachments.map((attachment, index) => (
-              <div key={index} className="flex items-center gap-2 p-2 border rounded">
-                <span className="text-sm">{attachment.filename}</span>
-                <span className="text-xs text-muted-foreground">
-                  ({attachment.contentType})
-                </span>
-              </div>
-            ))}
-          </div>
-          {parsed.body && (
-            <div className="whitespace-pre-wrap">
-              {parsed.body}
             </div>
           )}
         </div>
       );
     }
     
-    // If parsing failed, try to clean and display the raw body
+    // If we have text content, render it
-    const cleanedBody = email.body
+    if (parsed.text) {
-      .replace(/Content-Type:.*?\r\n/g, '')
+      return (
-      .replace(/Content-Transfer-Encoding:.*?\r\n/g, '')
+        <div className="email-content">
-      .replace(/MIME-Version:.*?\r\n/g, '')
+          <div className="whitespace-pre-wrap font-sans text-base leading-relaxed">
-      .replace(/--.*?--\r\n/g, '')
+            {parsed.text.split('\n').map((line, i) => (
-      .replace(/--.*?\r\n/g, '')
+              <p key={i} className="mb-2">{line}</p>
-      .replace(/=\r\n/g, '')
+            ))}
-      .replace(/=3D/g, '=')
+          </div>
-      .replace(/=20/g, ' ')
+          {parsed.attachments && parsed.attachments.length > 0 && (
-      .replace(/=09/g, '\t')
+            <div className="mt-4">
-      .replace(/=0A/g, '\n')
+              <h3 className="text-sm font-medium mb-2">Attachments:</h3>
-      .replace(/=0D/g, '\r')
+              <ul className="space-y-2">
-      .replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
+                {parsed.attachments.map((attachment, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <Paperclip className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm">{attachment.filename}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // If we couldn't parse the content, try to decode and clean the raw body
+    const decodedBody = decodeMIME(email.body, 'quoted-printable', 'utf-8');
+    const cleanedContent = cleanHtml(decodedBody);
 
     return (
-      <div className="whitespace-pre-wrap">
+      <div className="email-content">
-        {cleanedBody}
+        <div className="whitespace-pre-wrap font-sans text-base leading-relaxed">
+          {cleanedContent.split('\n').map((line, i) => (
+            <p key={i} className="mb-2">{line}</p>
+          ))}
+        </div>
       </div>
     );
   } catch (error) {
     console.error('Error rendering email content:', error);
     return (
-      <div className="text-muted-foreground">
+      <div className="email-content">
-        Unable to display email content
+        <pre className="whitespace-pre-wrap text-sm">{email.body}</pre>
       </div>
     );
   }