panel 2 courier api restore

components/ComposeEmail.tsx

@@ -10,7 +10,7 @@ import { decodeComposeContent, encodeComposeContent } from '@/lib/compose-mime-d
 import { Email } from '@/app/courrier/page';
 import mime from 'mime';
 import { simpleParser } from 'mailparser';
-import { decodeEmail, cleanHtml } from '@/lib/mail-parser-wrapper';
+import { decodeEmail } from '@/lib/mail-parser-wrapper';
 import DOMPurify from 'dompurify';
 
 interface ComposeEmailProps {
@@ -156,78 +156,87 @@ export default function ComposeEmail({
             }
           }
 
-          // Parse the original email using the API
-          const response = await fetch('/api/parse-email', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ email: emailToProcess.content }),
-          });
-
-          if (!response.ok) {
-            throw new Error(`Failed to parse email: ${response.status}`);
-          }
-          
-          const data = await response.json();
-          console.log('[DEBUG] Parsed email data:', { 
-            hasHtml: !!data.html, 
-            hasText: !!data.text,
-            from: data.from,
-            subject: data.subject
-          });
-          
-          const emailContent = data.html || data.text || '';
-
-          // Format the reply/forward content
-          const quotedContent = forwardFrom ? `
-            <div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
-              ---------- Forwarded message ---------<br/>
-              From: ${emailToProcess.from}<br/>
-              Date: ${new Date(emailToProcess.date).toLocaleString()}<br/>
-              Subject: ${emailToProcess.subject}<br/>
-              To: ${emailToProcess.to}<br/>
-              ${emailToProcess.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''}
-            </div>
-            <div style="margin-top: 10px; color: #374151;">
-              ${emailContent}
-            </div>
-          ` : `
-            <div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
-              On ${new Date(emailToProcess.date).toLocaleString()}, ${emailToProcess.from} wrote:
-            </div>
-            <blockquote style="margin: 10px 0 0 10px; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #374151;">
-              ${emailContent}
-            </blockquote>
-          `;
-
-          // Set the content in the compose area with proper structure
-          const formattedContent = `
-            <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
-              <div style="min-height: 20px;"><br/></div>
-              ${quotedContent}
-            </div>
-          `;
-
-          if (composeBodyRef.current) {
-            composeBodyRef.current.innerHTML = formattedContent;
-
-            // Place cursor at the beginning before the quoted content
-            const selection = window.getSelection();
-            const range = document.createRange();
-            const firstDiv = composeBodyRef.current.querySelector('div[style*="min-height: 20px;"]');
-            if (firstDiv) {
-              range.setStart(firstDiv, 0);
-              range.collapse(true);
-              selection?.removeAllRanges();
-              selection?.addRange(range);
-              (firstDiv as HTMLElement).focus();
+          // Use the exact same implementation as Panel 3's ReplyContent
+          try {
+            const decoded = await decodeEmail(emailToProcess.content);
+            
+            let formattedContent = '';
+            
+            if (forwardFrom) {
+              formattedContent = `
+                <div class="forwarded-message">
+                  <p>---------- Forwarded message ---------</p>
+                  <p>From: ${decoded.from || ''}</p>
+                  <p>Date: ${formatDate(decoded.date)}</p>
+                  <p>Subject: ${decoded.subject || ''}</p>
+                  <p>To: ${decoded.to || ''}</p>
+                  <br>
+                  ${decoded.html || `<pre>${decoded.text || ''}</pre>`}
+                </div>
+              `;
+            } else {
+              formattedContent = `
+                <div class="quoted-message">
+                  <p>On ${formatDate(decoded.date)}, ${decoded.from || ''} wrote:</p>
+                  <blockquote>
+                    ${decoded.html || `<pre>${decoded.text || ''}</pre>`}
+                  </blockquote>
+                </div>
+              `;
             }
 
-            // Update compose state
-            setComposeBody(formattedContent);
-            setLocalContent(formattedContent);
-            console.log('[DEBUG] Successfully set compose content');
+            // Set the content in the compose area with proper structure
+            const wrappedContent = `
+              <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
+                <div style="min-height: 20px;"><br/></div>
+                ${formattedContent}
+              </div>
+            `;
+
+            if (composeBodyRef.current) {
+              composeBodyRef.current.innerHTML = wrappedContent;
+
+              // Place cursor at the beginning before the quoted content
+              const selection = window.getSelection();
+              const range = document.createRange();
+              const firstDiv = composeBodyRef.current.querySelector('div[style*="min-height: 20px;"]');
+              if (firstDiv) {
+                range.setStart(firstDiv, 0);
+                range.collapse(true);
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+                (firstDiv as HTMLElement).focus();
+              }
+
+              // Update compose state
+              setComposeBody(wrappedContent);
+              setLocalContent(wrappedContent);
+              console.log('[DEBUG] Successfully set compose content');
+            }
+          } catch (error) {
+            console.error('[DEBUG] Error parsing email for compose:', error);
+            
+            // Fallback to basic content display
+            const errorContent = `
+              <div class="compose-area" contenteditable="true">
+                <br/>
+                <div style="color: #64748b;">
+                  ---------- Original Message ---------<br/>
+                  ${emailToProcess.subject ? `Subject: ${emailToProcess.subject}<br/>` : ''}
+                  ${emailToProcess.from ? `From: ${emailToProcess.from}<br/>` : ''}
+                  ${emailToProcess.date ? `Date: ${new Date(emailToProcess.date).toLocaleString()}<br/>` : ''}
+                </div>
+                <div style="color: #64748b; border-left: 2px solid #e5e7eb; padding-left: 10px; margin: 10px 0;">
+                  ${emailToProcess.preview || 'No content available'}
+                </div>
+              </div>
+            `;
+            
+            if (composeBodyRef.current) {
+              composeBodyRef.current.innerHTML = errorContent;
+              setComposeBody(errorContent);
+              setLocalContent(errorContent);
+            }
           }
         } catch (error) {
           console.error('[DEBUG] Error initializing compose content:', error);
@@ -389,7 +398,7 @@ export default function ComposeEmail({
     }
   };
 
-  // Add formatDate function to match Panel 3 exactly
+  // Add formatDate function to match Panel 3 implementation
   function formatDate(date: Date | null): string {
     if (!date) return '';
     return new Intl.DateTimeFormat('fr-FR', {