courrier clean 2

app/courrier/page.tsx

@@ -1602,34 +1602,107 @@ export default function CourrierPage() {
           
           setSelectedEmail(updatedEmail);
           
-          // For forwarding, we need to set the isForwarding flag to true
+          // Format content directly here
-          if (type === 'forward') {
+          formatEmailAndShowCompose(updatedEmail, type);
-            console.log('[DEBUG] Setting isForwarding flag for forwarding');
-            setIsForwarding(true);
-          } else {
-            // For replying, we need to set isReplying to true
-            console.log('[DEBUG] Setting isReplying to true for replying');
-            setIsReplying(true);
-            // Store the reply type in the component state if needed
-            setReplyToEmail(updatedEmail);
-          }
         }
       } else {
-        // Content already loaded, just set the flags
+        // Content already loaded, format directly
-        if (type === 'forward') {
+        formatEmailAndShowCompose(selectedEmail, type);
-          console.log('[DEBUG] Setting isForwarding flag for forwarding (content already loaded)');
+      }
-          setIsForwarding(true);
+    } catch (error) {
-        } else {
+      console.error('[DEBUG] Error preparing email for reply/forward:', error);
-          console.log('[DEBUG] Setting isReplying to true (content already loaded)');
+    }
-          setIsReplying(true);
+  };
-          setReplyToEmail(selectedEmail);
+  
+  // New helper function to directly format email content
+  const formatEmailAndShowCompose = (email: Email, type: 'reply' | 'reply-all' | 'forward') => {
+    try {
+      console.log('[DEBUG] Formatting email for', type);
+      
+      // Get email sender name and address
+      const senderName = email.fromName || email.from.split('@')[0];
+      const senderEmail = email.from;
+      
+      // Format date properly
+      const formattedDate = formatDate(new Date(email.date));
+      
+      // Set flag for component rendering
+      if (type === 'forward') {
+        setIsForwarding(true);
+      } else {
+        setIsReplying(true);
+      }
+      
+      // Set recipients based on reply type
+      if (type === 'reply') {
+        setComposeTo(senderName ? `${senderName} <${senderEmail}>` : senderEmail);
+      } else if (type === 'reply-all') {
+        // To: original sender
+        setComposeTo(senderName ? `${senderName} <${senderEmail}>` : senderEmail);
+        
+        // CC: all other recipients (simplified)
+        if (email.cc) {
+          setComposeCc(email.cc);
+          setShowCc(true);
         }
       }
       
+      // Format subject
+      let subject = email.subject || 'No Subject';
+      // Remove existing prefixes to avoid duplication
+      subject = subject.replace(/^(Re|Fwd):\s*/gi, '');
+      
+      // Add appropriate prefix
+      if (type === 'forward') {
+        subject = `Fwd: ${subject}`;
+      } else {
+        subject = `Re: ${subject}`;
+      }
+      setComposeSubject(subject);
+      
+      // Format content
+      let formattedContent = '';
+      
+      if (type === 'forward') {
+        formattedContent = `
+          <div dir="ltr" style="text-align: left;">
+            <br>
+            <div style="border-left: 1px solid #ccc; padding-left: 1ex; margin-left: 0.8ex; direction: ltr; text-align: left;">
+              <div style="font-weight: bold; margin-bottom: 10px; direction: ltr; text-align: left;">---------- Forwarded message ---------</div>
+              <div style="margin-bottom: 10px; color: #555; font-size: 0.9em; direction: ltr; text-align: left;">
+                <div><strong>From:</strong> ${senderName} &lt;${senderEmail}&gt;</div>
+                <div><strong>Date:</strong> ${formattedDate}</div>
+                <div><strong>Subject:</strong> ${email.subject || 'No Subject'}</div>
+                <div><strong>To:</strong> ${email.to || 'No Recipients'}</div>
+                ${email.cc ? `<div><strong>Cc:</strong> ${email.cc}</div>` : ''}
+              </div>
+              <hr style="border: none; border-top: 1px solid #ddd; margin: 10px 0;">
+              <div style="direction: ltr; text-align: left;">${email.html || email.content || '<div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">No content available</div>'}</div>
+            </div>
+          </div>
+        `;
+      } else {
+        formattedContent = `
+          <div dir="ltr" style="text-align: left;">
+            <br>
+            <blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid #ccc; padding-left: 1ex;">
+              <div style="margin-bottom: 10px; color: #555; font-size: 0.9em; direction: ltr; text-align: left;">
+                <div>On ${formattedDate}, ${senderName} &lt;${senderEmail}&gt; wrote:</div>
+              </div>
+              <div style="direction: ltr; text-align: left;">${email.html || email.content || 'No content available'}</div>
+            </blockquote>
+          </div>
+        `;
+      }
+      
+      // Set the formatted content directly
+      setComposeBody(formattedContent);
+      
       // Show the compose dialog
       setShowCompose(true);
+      
     } catch (error) {
-      console.error('[DEBUG] Error preparing email for reply/forward:', error);
+      console.error('[DEBUG] Error formatting email:', error);
     }
   };
 
@@ -2308,8 +2381,6 @@ export default function CourrierPage() {
         attachments={attachments}
         setAttachments={setAttachments}
         handleSend={handleSend}
-        replyTo={isReplying ? selectedEmail : null}
-        forwardFrom={isForwarding ? selectedEmail : null}
         onSend={async (emailData) => {
           console.log('Email sent:', emailData);
           setShowCompose(false);

components/ComposeEmail.tsx

@@ -7,8 +7,36 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import DOMPurify from 'isomorphic-dompurify';
-import { formatEmailForReply, formatEmailForForward, EmailMessageForFormatting } from '@/lib/email-formatter';
 
+// Add a CSS style block to handle the direction properly
+const forceLTRStyles = `
+.force-ltr {
+  direction: ltr !important;
+  text-align: left !important;
+  unicode-bidi: isolate !important;
+  writing-mode: horizontal-tb !important;
+}
+.force-ltr * {
+  direction: ltr !important;
+  text-align: left !important;
+  unicode-bidi: isolate !important;
+}
+[dir="rtl"] .force-ltr,
+[dir="rtl"] .force-ltr * {
+  direction: ltr !important;
+  text-align: left !important;
+}
+.email-content {
+  direction: ltr !important;
+  text-align: left !important;
+}
+.email-content * {
+  direction: ltr !important;
+  text-align: left !important;
+}
+`;
+
+// Nous simplifions l'interface car nous n'utilisons plus ces props
 interface EmailObject {
   id?: string;
   from?: string;
@@ -54,6 +82,7 @@ interface ComposeEmailProps {
   };
   onSend: (email: any) => Promise<void>;
   onCancel: () => void;
+  // Nous laissons ces props pour la rétrocompatibilité mais nous ne les utilisons plus
   replyTo?: EmailObject | null;
   forwardFrom?: EmailObject | null;
 }
@@ -79,6 +108,7 @@ export default function ComposeEmail({
   setAttachments,
   handleSend,
   originalEmail,
+  // replyTo et forwardFrom ne sont plus utilisés
   replyTo,
   forwardFrom,
   onSend,
@@ -87,112 +117,41 @@ export default function ComposeEmail({
   const [isSending, setIsSending] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const contentEditableRef = useRef<HTMLDivElement>(null);
-  const [useRichEditor, setUseRichEditor] = useState(false);
+  // Si nous avons un contenu préformaté, nous utilisons toujours l'éditeur riche
+  const [useRichEditor, setUseRichEditor] = useState(!!composeBody);
   const [userMessage, setUserMessage] = useState('');
+  // Nous extrarons la partie de contenu citée du corps de l'email préformaté
   const [quotedContent, setQuotedContent] = useState('');
   const [hasStartedTyping, setHasStartedTyping] = useState(false);
   
   useEffect(() => {
-    // When forwarding or replying, use rich editor
+    // Utiliser l'éditeur riche si nous avons du contenu HTML
-    setUseRichEditor(!!replyTo || !!forwardFrom);
+    if (composeBody && composeBody.includes('<')) {
-  }, [replyTo, forwardFrom]);
+      setUseRichEditor(true);
-
+      
-  useEffect(() => {
+      // Séparer le contenu de l'utilisateur (vide) et le contenu cité (préformaté)
-    // Initialize reply if replyTo is provided
+      setUserMessage('');
-    if (replyTo) {
+      setQuotedContent(composeBody);
-      initializeReplyEmail(replyTo);
     }
-  }, [replyTo, setComposeTo, setComposeSubject, setComposeBody]);
+  }, [composeBody]);
-  
-  useEffect(() => {
-    // Initialize forward email if forwardFrom is provided
-    if (forwardFrom) {
-      initializeForwardedEmail(forwardFrom);
-    }
-  }, [forwardFrom]);
 
-  // Initialize forwarded email content
+  // Nous n'avons plus besoin de ces effets qui initialisaient replyTo et forwardFrom
-  const initializeForwardedEmail = async (email: any) => {
+  // useEffect(() => {
-    console.log("Initializing forwarded email", email);
+  //   if (replyTo) {
-    try {
+  //     initializeReplyEmail(replyTo);
-      // Convert the email to the format expected by our formatter
+  //   }
-      const emailForFormatting: EmailMessageForFormatting = {
+  // }, [replyTo, setComposeTo, setComposeSubject, setComposeBody]);
-        subject: email.subject,
+  // 
-        from: email.from,
+  // useEffect(() => {
-        to: email.to,
+  //   if (forwardFrom) {
-        date: email.date,
+  //     initializeForwardedEmail(forwardFrom);
-        html: email.html || email.content,
+  //   }
-        text: email.text,
+  // }, [forwardFrom]);
-        cc: email.cc,
-        bcc: email.bcc
-      };
 
-      // Use the client-side formatter
+  // Nous n'avons plus besoin de ces fonctions qui initialisaient le contenu 
-      const formattedEmail = formatEmailForForward(emailForFormatting);
+  // via formatEmailForReply et formatEmailForForward
-      
+  // const initializeForwardedEmail = async (email: any) => {...};
-      setComposeSubject(formattedEmail.subject);
+  // const initializeReplyEmail = async (email: any, replyType: 'reply' | 'replyAll' = 'reply') => {...};
-      // The email-formatter already adds proper direction, no need for extra wrappers
-      setQuotedContent(formattedEmail.body);
-      setComposeBody(''); // Clear user message when forwarding
-    } catch (error) {
-      console.error("Error initializing forwarded email:", error);
-      setQuotedContent(`
-        <div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">
-          Error loading original message content
-        </div>
-      `);
-    }
-  };
-
-  // Initialize reply email content
-  const initializeReplyEmail = async (email: any, replyType: 'reply' | 'replyAll' = 'reply') => {
-    console.log("Initializing reply email", email, replyType);
-    try {
-      // Convert the email to the format expected by our formatter
-      const emailForFormatting: EmailMessageForFormatting = {
-        subject: email.subject,
-        from: email.from,
-        to: email.to,
-        date: email.date,
-        html: email.html || email.content,
-        text: email.text,
-        cc: email.cc,
-        bcc: email.bcc
-      };
-
-      // Use the client-side formatter
-      const formattedEmail = formatEmailForReply(emailForFormatting, replyType);
-      
-      setComposeSubject(formattedEmail.subject);
-      
-      // Set recipients
-      if (formattedEmail.to) {
-        const toAddresses = formattedEmail.to.map(recipient => 
-          recipient.name ? `${recipient.name} <${recipient.address}>` : recipient.address
-        ).join(', ');
-        setComposeTo(toAddresses);
-      }
-      
-      if (formattedEmail.cc && formattedEmail.cc.length > 0) {
-        const ccAddresses = formattedEmail.cc.map(recipient => 
-          recipient.name ? `${recipient.name} <${recipient.address}>` : recipient.address
-        ).join(', ');
-        setComposeCc(ccAddresses);
-        setShowCc(true);
-      }
-      
-      // The email-formatter already adds proper direction, no need for extra wrappers
-      setQuotedContent(formattedEmail.body);
-      setComposeBody(''); // Clear user message when replying
-    } catch (error) {
-      console.error("Error initializing reply email:", error);
-      setQuotedContent(`
-        <div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">
-          Error loading original message content
-        </div>
-      `);
-    }
-  };
 
   // Handle file attachment selection
   const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -276,32 +235,7 @@ export default function ComposeEmail({
       {showCompose && (
     <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
           {/* Add global styles for email direction */}
-          <style dangerouslySetInnerHTML={{ __html: `
+          <style dangerouslySetInnerHTML={{ __html: forceLTRStyles }} />
-            .force-ltr {
-              direction: ltr !important;
-              text-align: left !important;
-              unicode-bidi: isolate !important;
-              writing-mode: horizontal-tb !important;
-            }
-            .force-ltr * {
-              direction: ltr !important;
-              text-align: left !important;
-              unicode-bidi: isolate !important;
-            }
-            [dir="rtl"] .force-ltr,
-            [dir="rtl"] .force-ltr * {
-              direction: ltr !important;
-              text-align: left !important;
-            }
-            .email-content {
-              direction: ltr !important;
-              text-align: left !important;
-            }
-            .email-content * {
-              direction: ltr !important;
-              text-align: left !important;
-            }
-          `}} />
           
           <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
         {/* Modal Header */}