courrier clean 2

components/email/ComposeEmail.tsx

@@ -350,56 +350,12 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
       
       setSubject(subject);
       
-      // Format the forwarded message as a simple text representation with clean formatting
-      let forwardedText = '';
+      // For forwarded emails, we'll use a completely different approach
+      // Just save the original HTML content and use it directly
+      // This preserves all formatting without trying to parse it
       
-      // Format the "From" field
-      const fromString = Array.isArray(initialEmail.from) && initialEmail.from.length > 0
-        ? initialEmail.from.map(addr => addr.name 
-            ? `${addr.name} <${addr.address}>` 
-            : addr.address).join(', ')
-        : 'Unknown';
-      
-      // Format the "To" field
-      const toString = Array.isArray(initialEmail.to) && initialEmail.to.length > 0
-        ? initialEmail.to.map(addr => addr.name 
-            ? `${addr.name} <${addr.address}>` 
-            : addr.address).join(', ')
-        : '';
-      
-      // Format the date
-      const dateString = initialEmail.date 
-        ? typeof initialEmail.date === 'string'
-          ? new Date(initialEmail.date).toLocaleString()
-          : initialEmail.date.toLocaleString()
-        : new Date().toLocaleString();
-      
-      // Create a simple text representation of the forwarded header
-      forwardedText += '---------- Forwarded message ---------\n';
-      forwardedText += `From: ${fromString}\n`;
-      forwardedText += `Date: ${dateString}\n`;
-      forwardedText += `Subject: ${subjectBase}\n`;
-      forwardedText += `To: ${toString}\n\n`;
-      
-      // Add the content - clean and sanitize the HTML to prevent formatting issues
-      if (initialEmail.content || initialEmail.html || initialEmail.text) {
-        // Try to extract text from HTML content
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = initialEmail.content || initialEmail.html || initialEmail.text || '';
-        
-        // Get the text content, preserving line breaks
-        let cleanContent = tempDiv.textContent || tempDiv.innerText || '';
-        
-        // Add the clean content
-        forwardedText += cleanContent;
-      } else {
-        forwardedText += 'No content available in original email';
-      }
-      
-      // Set the forwarded text as the original content (plain text preserves formatting better)
-      setOriginalContent(forwardedText);
-      
-      // Keep user message separate
+      // Set message parts for the editor
+      setOriginalContent(initialEmail.content || initialEmail.html || initialEmail.text || '');
       setUserMessage('');
       setBody('');
     } catch (error) {
@@ -455,7 +411,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
     setAttachments(current => current.filter((_, i) => i !== index));
   };
 
-  // Send the email
+  // Modified send handler to combine user message with forwarded content
   const handleSend = async () => {
     if (!to) {
       alert('Please specify at least one recipient');
@@ -465,15 +421,42 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
     try {
       setSending(true);
       
-      // Combine user message with original content for forwarded emails
-      let finalBody = '';
+      // Prepare the complete email body
+      let finalBody = body;
       
       if (type === 'forward' && originalContent) {
-        // Format the user message + forwarded content properly
-        finalBody = `${userMessage}\n\n${originalContent}`;
-      } else {
-        // For other cases, use the current body
-        finalBody = editorRef.current?.innerHTML || body;
+        // For forwarded emails, construct the email in a standard format
+        const fromString = initialEmail?.from?.map(addr => 
+          addr.name ? `${addr.name} <${addr.address}>` : addr.address
+        ).join(', ') || '';
+        
+        const toString = initialEmail?.to?.map(addr => 
+          addr.name ? `${addr.name} <${addr.address}>` : addr.address
+        ).join(', ') || '';
+        
+        const dateString = initialEmail?.date 
+          ? typeof initialEmail.date === 'string'
+            ? new Date(initialEmail.date).toLocaleString()
+            : initialEmail.date.toLocaleString()
+          : '';
+        
+        // Combine user message with forwarded header and content
+        finalBody = `
+          ${userMessage}
+          <br><br>
+          <div style="border-top: 1px solid #ccc; margin-top: 20px; padding-top: 10px;">
+            <div style="font-family: Arial, sans-serif; color: #333;">
+              <div style="margin-bottom: 15px;">
+                <div>---------- Forwarded message ---------</div>
+                <div><b>From:</b> ${fromString}</div>
+                <div><b>Date:</b> ${dateString}</div>
+                <div><b>Subject:</b> ${initialEmail?.subject || ''}</div>
+                <div><b>To:</b> ${toString}</div>
+              </div>
+              <div>${originalContent}</div>
+            </div>
+          </div>
+        `;
       }
       
       await onSend({
@@ -499,8 +482,6 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
     if (editorRef.current) {
       const content = editorRef.current.innerHTML;
       setUserMessage(content);
-      
-      // Simply update body with user message - we'll combine with original content when sending
       setBody(content);
     }
   };
@@ -641,17 +622,14 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
             {type !== 'new' && originalContent && (
               <div className="border-t">
                 <div className="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500">
-                  {type === 'forward' ? 'Forwarded content' : 'Original message'}
+                  {type === 'forward' ? 'Forwarded content (original)' : 'Original message'}
+                </div>
+                <div className="p-4 bg-gray-50 border-t overflow-auto max-h-[400px]">
+                  <div 
+                    className="forwarded-content text-sm" 
+                    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(originalContent) }}
+                  />
                 </div>
-                <pre 
-                  className="p-4 bg-gray-50 text-sm original-content font-mono whitespace-pre-wrap overflow-auto"
-                  style={{ 
-                    lineHeight: '1.5',
-                    maxHeight: '400px'
-                  }}
-                >
-                  {originalContent}
-                </pre>
               </div>
             )}
           </div>

lib/services/email-service.ts

@@ -720,7 +720,7 @@ export async function formatEmailForReplyOrForward(
 /**
  * Format subject with appropriate prefix (Re:, Fwd:)
  */
-async function formatSubject(subject: string, type: 'reply' | 'reply-all' | 'forward'): Promise<string> {
+export async function formatSubject(subject: string, type: 'reply' | 'reply-all' | 'forward'): Promise<string> {
   // Clean up any existing prefixes
   let cleanSubject = subject
     .replace(/^(Re|Fwd|FW|Forward):\s*/i, '')
@@ -743,7 +743,7 @@ async function formatSubject(subject: string, type: 'reply' | 'reply-all' | 'for
 /**
  * Create a quote header for reply/forward
  */
-async function createQuoteHeader(email: EmailMessage): Promise<string> {
+export async function createQuoteHeader(email: EmailMessage): Promise<string> {
   // Format the date
   const date = new Date(email.date);
   const formattedDate = date.toLocaleString('en-US', {