panel 2 courier api restore

components/ComposeEmail.tsx

@@ -159,17 +159,9 @@ export default function ComposeEmail({
           // Now proceed with the usual decoding
           const type = replyTo ? 'reply' : 'forward';
           
-          // ========== MATCH PANEL 3 CONTENT HANDLING ==========
+          // DIRECTLY MATCH PANEL 3 IMPLEMENTATION
           try {
-            // Get the actual email content - similar to panel 3
+            const decoded = await decodeEmail(emailToProcess.content);
-            const formattedEmail = emailToProcess.content.trim();
-            if (!formattedEmail) {
-              throw new Error("Email content is empty");
-            }
-            
-            // Parse the email just like panel 3
-            const decoded = await decodeEmail(formattedEmail);
-            
             console.log('[DEBUG] Decoded email for compose:', { 
               hasHtml: !!decoded.html, 
               hasText: !!decoded.text,
@@ -177,79 +169,43 @@ export default function ComposeEmail({
               subject: decoded.subject
             });
             
-            // Get clean content similar to Panel 3
+            let formattedContent = '';
-            let cleanContent = '';
             
-            if (decoded.html) {
+            if (type === 'forward') {
-              // Sanitize HTML exactly as in Panel 3
+              // EXACTLY MATCH THE FORMAT USED IN PANEL 3 (from ReplyContent in app/courrier/page.tsx)
-              cleanContent = DOMPurify.sanitize(decoded.html);
+              formattedContent = `
-            } else if (decoded.text) {
+                <div class="forwarded-message">
-              // Format text content with proper whitespace like Panel 3
+                  <p>---------- Forwarded message ---------</p>
-              cleanContent = `<div class="whitespace-pre-wrap">${decoded.text}</div>`;
+                  <p>From: ${decoded.from || ''}</p>
+                  <p>Date: ${formatDate(decoded.date ? new Date(decoded.date) : null)}</p>
+                  <p>Subject: ${decoded.subject || ''}</p>
+                  <p>To: ${decoded.to || ''}</p>
+                  <br>
+                  ${decoded.html || `<pre>${decoded.text || ''}</pre>`}
+                </div>
+              `;
             } else {
-              // Fallback to raw content if parsing failed
+              formattedContent = `
-              if (formattedEmail.startsWith('<') && formattedEmail.endsWith('>')) {
+                <div class="quoted-message">
-                cleanContent = DOMPurify.sanitize(formattedEmail);
+                  <p>On ${formatDate(decoded.date ? new Date(decoded.date) : null)}, ${decoded.from || ''} wrote:</p>
-              } else {
+                  <blockquote>
-                cleanContent = `<div class="whitespace-pre-wrap">${formattedEmail}</div>`;
+                    ${decoded.html || `<pre>${decoded.text || ''}</pre>`}
-              }
+                  </blockquote>
+                </div>
+              `;
             }
-            
-            // Extract reliable metadata
-            const from = decoded.from || 
-              (emailToProcess.fromName ? `${emailToProcess.fromName} <${emailToProcess.from}>` : emailToProcess.from) || 
-              'Unknown Sender';
-              
-            const date = decoded.date ? 
-              new Date(decoded.date).toLocaleString() : 
-              (emailToProcess.date ? new Date(emailToProcess.date).toLocaleString() : new Date().toLocaleString());
-              
-            const subject = decoded.subject || emailToProcess.subject || 'No Subject';
-            
-            const to = decoded.to || 
-              (emailToProcess.to && Array.isArray(emailToProcess.to) ? 
-                emailToProcess.to.map((t: any) => t.address || t.name || '').filter(Boolean).join(', ') : 
-                emailToProcess.to) || 
-              '';
-              
-            const cc = decoded.cc || 
-              (emailToProcess.cc && Array.isArray(emailToProcess.cc) ? 
-                emailToProcess.cc.map((c: any) => c.address || c.name || '').filter(Boolean).join(', ') : 
-                emailToProcess.cc) || 
-              '';
-            
-            // Format the content based on reply type
-            const quotedContent = type === 'forward' ? `
-              <div class="forwarded-message" style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
-                ---------- Forwarded message ---------<br/>
-                From: ${from}<br/>
-                Date: ${date}<br/>
-                Subject: ${subject}<br/>
-                To: ${to}<br/>
-                ${cc ? `Cc: ${cc}<br/>` : ''}
-              </div>
-              <div class="message-content prose prose-sm max-w-none" style="margin-top: 10px; border: 1px solid #e5e7eb; padding: 10px; border-radius: 4px; max-height: 300px; overflow-y: auto; color: #374151;">
-                ${cleanContent || '<div>No content available</div>'}
-              </div>
-            ` : `
-              <div class="quoted-message" style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
-                On ${date}, ${from} wrote:
-              </div>
-              <div class="message-content prose prose-sm max-w-none" style="margin: 10px 0 0 10px; padding: 10px; border-left: 2px solid #e5e7eb; border: 1px solid #e5e7eb; border-radius: 4px; max-height: 300px; overflow-y: auto; color: #374151;">
-                ${cleanContent || '<div>No content available</div>'}
-              </div>
-            `;
 
             // Set the content in the compose area with proper structure
-            const formattedContent = `
+            const sanitizedContent = DOMPurify.sanitize(formattedContent);
+            const wrappedContent = `
               <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
                 <div class="cursor-position" style="min-height: 20px; cursor: text;"><br/></div>
-                ${quotedContent}
+                ${sanitizedContent}
               </div>
             `;
 
             if (composeBodyRef.current) {
-              composeBodyRef.current.innerHTML = formattedContent;
+              composeBodyRef.current.innerHTML = wrappedContent;
 
               // Place cursor at the beginning before the quoted content
               const selection = window.getSelection();
@@ -264,7 +220,7 @@ export default function ComposeEmail({
               }
 
               // After setting the HTML content, add event listeners for scrolling
-              const messageContents = composeBodyRef.current.querySelectorAll('.message-content');
+              const messageContents = composeBodyRef.current.querySelectorAll('.message-content, .forwarded-message, .quoted-message');
               messageContents.forEach(container => {
                 // Make sure the container is properly styled for scrolling
                 (container as HTMLElement).style.maxHeight = '300px';
@@ -296,8 +252,8 @@ export default function ComposeEmail({
               });
 
               // Update compose state
-              setComposeBody(formattedContent);
+              setComposeBody(wrappedContent);
-              setLocalContent(formattedContent);
+              setLocalContent(wrappedContent);
               console.log('[DEBUG] Successfully set compose content with scrollable message area');
             }
           } catch (error) {
@@ -485,6 +441,18 @@ export default function ComposeEmail({
     }
   };
 
+  // Add formatDate function to match Panel 3 exactly
+  function formatDate(date: Date | null): string {
+    if (!date) return '';
+    return new Intl.DateTimeFormat('fr-FR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    }).format(date);
+  }
+
   if (!showCompose) return null;
 
   return (