courrier clean 2

components/email/ComposeEmail.tsx

@@ -413,12 +413,12 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
         );
       }
       
-      // In forwarding, we'll make the entire content editable, not just the user message area
+      // Set the original content for display
-      const completeContent = `<br/>${headerHtml}<div class="forwarded-content" style="color: #333;">${contentHtml}</div>`;
+      setOriginalContent(`${headerHtml}<div class="forwarded-content" style="color: #333;">${contentHtml}</div>`);
       
-      // Don't separate original content, allow editing the entire body
+      // Leave the editorRef empty to allow user to type their message
-      setUserMessage(completeContent);
+      setUserMessage('');
-      setBody(completeContent);
+      setBody('');
       
     } catch (error) {
       console.error('Error formatting forwarded email:', error);
@@ -505,11 +505,14 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   const handleEditorInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (editorRef.current) {
       const content = editorRef.current.innerHTML;
-      
-      // For forwarded messages, the entire content is now editable
-      // No need to separate user message from original content
       setUserMessage(content);
-      setBody(content);
+      
+      // Combine user message with original content
+      if (originalContent) {
+        setBody(`${content}<div class="quote-divider"></div>${originalContent}`);
+      } else {
+        setBody(content);
+      }
     }
   };
 
@@ -633,18 +636,39 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           
           {/* Email editor with clear separation between user message and original content */}
           <div className="border rounded-md overflow-hidden">
-            {/* Combined editable area that includes both user message and original content */}
+            {/* User's editable message area */}
             <div
               ref={editorRef}
               contentEditable={!sending}
-              className="w-full p-4 min-h-[200px] focus:outline-none"
+              className="w-full p-4 min-h-[100px] focus:outline-none"
               onInput={handleEditorInput}
               style={{ 
                 direction: isRTL ? 'rtl' : 'ltr', 
                 textAlign: isRTL ? 'right' : 'left'
               }}
-              dangerouslySetInnerHTML={type !== 'new' ? { __html: body } : undefined}
             />
+            
+            {/* Original content display with visual separation - editable for replies/forwards */}
+            {type !== 'new' && originalContent && (
+              <div className="border-t">
+                <div className="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500">
+                  {type === 'forward' ? 'Forwarded content (editable)' : 'Original message (editable)'}
+                </div>
+                <div 
+                  className="p-4 bg-gray-50 text-sm original-content"
+                  contentEditable={!sending}
+                  dangerouslySetInnerHTML={{ __html: originalContent }}
+                  style={{ opacity: 1.0 }}
+                  onInput={(e) => {
+                    const target = e.target as HTMLDivElement;
+                    setOriginalContent(target.innerHTML);
+                    // Update the complete body
+                    const userPart = editorRef.current?.innerHTML || '';
+                    setBody(`${userPart}<div class="quote-divider"></div>${target.innerHTML}`);
+                  }}
+                />
+              </div>
+            )}
           </div>
         </div>