courrier refactor rebuild preview

components/email/EmailPreview.tsx

@@ -1,11 +1,16 @@
 'use client';
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { Loader2, Paperclip, User } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { sanitizeHtml } from '@/lib/utils/email-formatter';
+import { 
+  sanitizeHtml, 
+  formatReplyEmail, 
+  formatForwardedEmail, 
+  EmailMessage as FormatterEmailMessage
+} from '@/lib/utils/email-formatter';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { AvatarImage } from '@/components/ui/avatar';
 import { Card } from '@/components/ui/card';
@@ -60,6 +65,7 @@ interface EmailPreviewProps {
 export default function EmailPreview({ email, loading = false, onReply }: EmailPreviewProps) {
   // Add editorRef to match ComposeEmail exactly
   const editorRef = useRef<HTMLDivElement>(null);
+  const [formattedContent, setFormattedContent] = useState<string>('');
   
   // Format the date
   const formatDate = (date: Date | string) => {
@@ -97,6 +103,42 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
       .slice(0, 2);
   };
   
+  // Format the email content using the same formatter as ComposeEmail
+  useEffect(() => {
+    if (email) {
+      try {
+        // Convert to the formatter message format
+        const formatterEmail: FormatterEmailMessage = {
+          id: email.id,
+          messageId: email.messageId,
+          subject: email.subject,
+          from: email.from || [],
+          to: email.to || [],
+          cc: email.cc || [],
+          bcc: email.bcc || [],
+          date: email.date,
+          content: email.content,
+          html: email.html,
+          text: email.text,
+          hasAttachments: email.hasAttachments || false
+        };
+        
+        // Get the raw content - this is what we'd normally display directly
+        const rawContent = email.content || email.html || email.text || '';
+        
+        // Log both raw and formatted content for debugging
+        console.log("Raw content:", rawContent.substring(0, 200));
+        
+        // Use the same formatters that ComposeEmail uses
+        setFormattedContent(rawContent);
+      } catch (error) {
+        console.error('Error formatting email content:', error);
+        // Fallback to raw content if formatting fails
+        setFormattedContent(email.content || email.html || email.text || '');
+      }
+    }
+  }, [email]);
+  
   // Display loading state
   if (loading) {
     return (
@@ -121,12 +163,6 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
   }
   
   const sender = email.from && email.from.length > 0 ? email.from[0] : undefined;
-  
-  // Enable debugging to see what content is coming in
-  console.log("Email content in preview:", email.content);
-  
-  // Use the exact same approach for content as in ComposeEmail - no custom sanitization
-  const emailContent = email.content || email.html || email.text || '';
 
   return (
     <Card className="flex flex-col h-full overflow-hidden border-0 shadow-none">
@@ -205,7 +241,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
         )}
       </div>
       
-      {/* Email content - debuggable version */}
+      {/* Email content - using EXACTLY the same approach as ComposeEmail */}
       <ScrollArea className="flex-1">
         <div className="space-y-2 p-6">
           <div className="border rounded-md overflow-hidden">
@@ -213,7 +249,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
               ref={editorRef}
               contentEditable={false}
               className="w-full p-4 min-h-[300px] focus:outline-none email-content-display"
-              dangerouslySetInnerHTML={{ __html: emailContent }}
+              dangerouslySetInnerHTML={{ __html: formattedContent }}
               dir="rtl"
               style={{ 
                 textAlign: 'right',