From 5bd57d731dd8a3a9fee2c3db87a0293e97078861 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Thu, 24 Apr 2025 20:15:07 +0200
Subject: [PATCH] compose mime

---
 components/ComposeEmail.tsx | 57 ++++++++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 8c70cae8..f87b48f4 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -86,6 +86,8 @@ export default function ComposeEmail({
   useEffect(() => {
     if (replyTo || forwardFrom) {
       const initializeContent = async () => {
+        if (!composeBodyRef.current) return;
+        
         try {
           const emailToProcess = replyTo || forwardFrom;
           if (!emailToProcess?.body) {
@@ -93,6 +95,15 @@ export default function ComposeEmail({
             return;
           }
 
+          // Create initial content immediately
+          const initialContent = `
+            <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
+              <br/>
+              <div id="reply-placeholder">Loading original message...</div>
+            </div>
+          `;
+          composeBodyRef.current.innerHTML = initialContent;
+
           // Parse the original email using the API
           const response = await fetch('/api/parse-email', {
             method: 'POST',
@@ -107,21 +118,38 @@ export default function ComposeEmail({
           }
 
           const parsedEmail = await response.json();
-          const originalContent = parsedEmail.html || parsedEmail.text || '';
           
           // Format the reply/forward content
-          const prefix = replyTo ? '\n\n' : '\n\n---------- Forwarded message ----------\n\n';
-          const quoteStyle = 'border-left: 2px solid #ccc; margin-left: 1em; padding-left: 1em;';
-          const formattedContent = `
-            <div><br/>${prefix}</div>
-            <div style="${quoteStyle}">
-              ${originalContent}
+          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/>` : ''}
+              <br/>
+              ${parsedEmail.html || parsedEmail.text || 'No content available'}
             </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: 0; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #6b7280;">
+              ${parsedEmail.html || parsedEmail.text || 'No content available'}
+            </blockquote>
           `;
 
           // Set the content in the compose area
           if (composeBodyRef.current) {
+            const formattedContent = `
+              <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
+                <br/>
+                ${quotedContent}
+              </div>
+            `;
             composeBodyRef.current.innerHTML = formattedContent;
+
             // Place cursor at the beginning
             const selection = window.getSelection();
             const range = document.createRange();
@@ -129,12 +157,21 @@ export default function ComposeEmail({
             range.collapse(true);
             selection?.removeAllRanges();
             selection?.addRange(range);
-          }
 
-          // Update compose state
-          setComposeBody(formattedContent);
+            // Update compose state
+            setComposeBody(formattedContent);
+          }
         } catch (error) {
           console.error('Error initializing compose content:', error);
+          if (composeBodyRef.current) {
+            const errorContent = `
+              <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
+                <br/>
+                <div style="color: #ef4444;">Error loading original message.</div>
+              </div>
+            `;
+            composeBodyRef.current.innerHTML = errorContent;
+          }
         }
       };