courrier refactor rebuild 2

components/email/ComposeEmail.tsx

@@ -181,40 +181,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           const subject = subjectBase.match(/^Re:/i) ? subjectBase : `Re: ${subjectBase}`;
           setSubject(subject);
           
-          // Format the reply content with the quoted message included directly
+          // Initialize with empty content - the QuotedEmailContent component will handle displaying the quoted message
-          const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
+          setEmailContent('<div><br></div>');
-          const sender = initialEmail.from && initialEmail.from.length > 0 
-            ? initialEmail.from[0].name || initialEmail.from[0].address 
-            : 'Unknown sender';
-          const date = initialEmail.date ? 
-            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
-            new Date();
-          
-          // Format date for display
-          const formattedDate = date.toLocaleString('en-US', {
-            weekday: 'short',
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-          });
-          
-          // Create reply content with quote
-          const replyContent = `
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${formattedDate}, ${sender} wrote:</div>
-            <blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
-              <div style="font-size: 13px;">
-                ${content}
-              </div>
-            </blockquote>
-          `;
-          
-          setEmailContent(replyContent);
           
           // Show CC field if there are CC recipients
           if (initialEmail.cc && initialEmail.cc.length > 0) {
@@ -227,47 +195,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           const subject = subjectBase.match(/^(Fwd|FW|Forward):/i) ? subjectBase : `Fwd: ${subjectBase}`;
           setSubject(subject);
           
-          // Format the forward content with the original email included directly
+          // Initialize with empty content - the QuotedEmailContent component will handle displaying the forwarded message
-          const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
+          setEmailContent('<div><br></div>');
-          const fromString = formatEmailAddresses(initialEmail.from || []);
-          const toString = formatEmailAddresses(initialEmail.to || []);
-          const date = initialEmail.date ? 
-            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
-            new Date();
-          
-          // Format date for display
-          const formattedDate = date.toLocaleString('en-US', {
-            weekday: 'short',
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-          });
-          
-          // Create forwarded content
-          const forwardContent = `
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div style="border-top: 1px solid #ccc; margin-top: 10px; 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> ${formattedDate}</div>
-                  <div><b>Subject:</b> ${initialEmail.subject || ''}</div>
-                  <div><b>To:</b> ${toString}</div>
-                </div>
-                <div class="email-original-content">
-                  ${content}
-                </div>
-              </div>
-            </div>
-          `;
-          
-          setEmailContent(forwardContent);
           
           // If the original email has attachments, we should include them
           if (initialEmail.attachments && initialEmail.attachments.length > 0) {
@@ -461,6 +390,14 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
                   maxHeight="none"
                   preserveFormatting={true}
                 />
+                
+                {/* Render quoted content for replies and forwards */}
+                {initialEmail && type !== 'new' && (
+                  <EmailMessageToQuotedContentAdapter
+                    email={initialEmail}
+                    type={type as 'reply' | 'reply-all' | 'forward'}
+                  />
+                )}
               </div>
             </div>
             
@@ -599,72 +536,15 @@ function LegacyAdapter({
       const type = determineType();
       
       if (type === 'reply' || type === 'reply-all') {
-        // For reply, format with sender info and original content
+        // For reply, just set an empty div
-        const content = originalEmail?.content || '';
+        setComposeBody('<div><br></div>');
-        const sender = replyTo?.name || replyTo?.email || 'Unknown sender';
-        const date = new Date().toLocaleString('en-US', {
-          weekday: 'short',
-          year: 'numeric', 
-          month: 'short',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        });
-        
-        const replyContent = `
-          <div><br></div>
-          <div><br></div>
-          <div><br></div>
-          <div><br></div>
-          <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${date}, ${sender} wrote:</div>
-          <blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
-            <div style="font-size: 13px;">
-              ${content}
-            </div>
-          </blockquote>
-        `;
-        
-        setComposeBody(replyContent);
       }
       else if (type === 'forward') {
-        // For forward, format with original message details
+        // For forward, just set an empty div
-        const content = originalEmail?.content || '';
+        setComposeBody('<div><br></div>');
-        const fromString = forwardFrom?.name || forwardFrom?.email || 'Unknown';
-        const toString = 'Recipients';
-        const date = new Date().toLocaleString('en-US', {
-          weekday: 'short',
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        });
-        
-        const forwardContent = `
-          <div><br></div>
-          <div><br></div>
-          <div><br></div>
-          <div><br></div>
-          <div style="border-top: 1px solid #ccc; margin-top: 10px; 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> ${date}</div>
-                <div><b>Subject:</b> ${composeSubject || ''}</div>
-                <div><b>To:</b> ${toString}</div>
-              </div>
-              <div class="email-original-content">
-                ${content}
-              </div>
-            </div>
-          </div>
-        `;
-        
-        setComposeBody(forwardContent);
       }
     }
-  }, [originalEmail, replyTo, forwardFrom, composeBody, determineType, composeSubject]);
+  }, [originalEmail, replyTo, forwardFrom, composeBody, determineType, setComposeBody]);
   
   // Converts attachments to the expected format
   const convertAttachments = () => {
@@ -824,6 +704,33 @@ function LegacyAdapter({
                   maxHeight="none"
                   preserveFormatting={true}
                 />
+                
+                {/* Render original message for replies and forwards */}
+                {(originalEmail || replyTo || forwardFrom) && (
+                  <div className="mt-4">
+                    {replyTo ? (
+                      <QuotedEmailContent
+                        content={originalEmail?.content || ''}
+                        sender={{
+                          name: replyTo.name,
+                          email: replyTo.email
+                        }}
+                        date={new Date()}
+                        type="reply"
+                      />
+                    ) : forwardFrom ? (
+                      <QuotedEmailContent
+                        content={originalEmail?.content || ''}
+                        sender={{
+                          name: forwardFrom.name,
+                          email: forwardFrom.email
+                        }}
+                        date={new Date()}
+                        type="forward"
+                      />
+                    ) : null}
+                  </div>
+                )}
               </div>
             </div>
             

node_modules/.package-lock.json

@@ -5622,12 +5622,6 @@
         "npm": ">=8.2.3"
       }
     },
-    "node_modules/quill-better-table": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/quill-better-table/-/quill-better-table-1.2.10.tgz",
-      "integrity": "sha512-CFwxAQzt4EPCQuynQ65R/FU7Yu//kcDBb/rmBBOsFfO758+q50zvG/PDt4Lenv9DcrSgwnyNkfo4yeA5fzzVYQ==",
-      "license": "MIT"
-    },
     "node_modules/quill-delta": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",

package-lock.json

@@ -71,7 +71,6 @@
         "nodemailer": "^6.10.1",
         "pg": "^8.14.1",
         "quill": "^2.0.3",
-        "quill-better-table": "^1.2.10",
         "react": "^18",
         "react-datepicker": "^8.3.0",
         "react-day-picker": "8.10.1",
@@ -6593,12 +6592,6 @@
         "npm": ">=8.2.3"
       }
     },
-    "node_modules/quill-better-table": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/quill-better-table/-/quill-better-table-1.2.10.tgz",
-      "integrity": "sha512-CFwxAQzt4EPCQuynQ65R/FU7Yu//kcDBb/rmBBOsFfO758+q50zvG/PDt4Lenv9DcrSgwnyNkfo4yeA5fzzVYQ==",
-      "license": "MIT"
-    },
     "node_modules/quill-delta": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",

yarn.lock

@@ -3031,11 +3031,6 @@ quick-format-unescaped@^4.0.3:
   resolved "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz"
   integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
 
-quill-better-table@^1.2.10:
-  version "1.2.10"
-  resolved "https://registry.npmjs.org/quill-better-table/-/quill-better-table-1.2.10.tgz"
-  integrity sha512-CFwxAQzt4EPCQuynQ65R/FU7Yu//kcDBb/rmBBOsFfO758+q50zvG/PDt4Lenv9DcrSgwnyNkfo4yeA5fzzVYQ==
-
 quill-delta@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz"