courrier preview

components/email/EmailContentDisplay.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import React, { useMemo, CSSProperties } from 'react';
+import React from 'react';
-import { renderEmailContent } from '@/lib/utils/email-utils';
 import { EmailContent } from '@/types/email';
 
 interface EmailContentDisplayProps {
@@ -23,34 +22,30 @@ const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
   type = 'auto',
   debug = false
 }) => {
-  // Basic fallback for missing content
+  if (!content) {
-  const safeContent = content || {
+    return <div className={className}>No content available</div>;
-    text: 'No content available',
+  }
-    html: '',
-    isHtml: false,
-    direction: 'ltr'
-  };
   
-  // Render the content with basic error handling
+  let htmlContent = '';
-  const htmlContent = useMemo(() => {
-    try {
-      return renderEmailContent(safeContent);
-    } catch (error) {
-      console.error('Error rendering content:', error);
-      return `<div class="error-message p-4 text-red-500">Error rendering email content</div>`;
-    }
-  }, [safeContent, type]);
   
-  // Apply quoted text styling if needed
+  // Simple content rendering
-  const containerStyle: CSSProperties = showQuotedText 
+  if (content.isHtml && content.html) {
-    ? {} 
+    // Use HTML content
-    : { maxHeight: '400px', overflowY: 'auto' };
+    htmlContent = content.html;
+  } else if (content.text) {
+    // Format text content with line breaks
+    htmlContent = content.text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/\n/g, '<br>');
+  } else {
+    // No content available
+    htmlContent = 'No content available';
+  }
   
   return (
-    <div 
+    <div className={`email-content-display ${className}`}>
-      className={`email-content-display ${className} ${showQuotedText ? 'quoted-text' : ''}`}
-      style={containerStyle}
-    >
       <div 
         className="email-content-inner"
         dangerouslySetInnerHTML={{ __html: htmlContent }} 
@@ -58,11 +53,11 @@ const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
       
       {/* Debug output if enabled */}
       {debug && (
-        <div className="content-debug mt-4 p-2 text-xs bg-gray-100 border rounded">
+        <div className="mt-4 p-2 text-xs bg-gray-100 border rounded">
-          <p><strong>Content Type:</strong> {safeContent.isHtml ? 'HTML' : 'Text'}</p>
+          <p><strong>Content Type:</strong> {content.isHtml ? 'HTML' : 'Text'}</p>
-          <p><strong>Direction:</strong> {safeContent.direction}</p>
+          <p><strong>Direction:</strong> {content.direction}</p>
-          <p><strong>Has HTML:</strong> {!!safeContent.html}</p>
+          <p><strong>HTML Length:</strong> {content.html?.length || 0}</p>
-          <p><strong>Text Length:</strong> {safeContent.text?.length || 0}</p>
+          <p><strong>Text Length:</strong> {content.text?.length || 0}</p>
         </div>
       )}
       
@@ -71,32 +66,10 @@ const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
           width: 100%;
         }
         
-        .email-content-display.quoted-text {
+        .email-content-inner img {
-          opacity: 0.85;
-          font-size: 0.95em;
-        }
-        
-        .email-content-inner :global(img) {
           max-width: 100%;
           height: auto;
         }
-        
-        .email-content-inner :global(table) {
-          max-width: 100%;
-          border-collapse: collapse;
-          margin-bottom: 1rem;
-        }
-        
-        .email-content-inner :global(td),
-        .email-content-inner :global(th) {
-          padding: 0.5rem;
-          border: 1px solid #ddd;
-        }
-        
-        .content-debug {
-          font-family: monospace;
-          color: #666;
-        }
       `}</style>
     </div>
   );

hooks/use-email-fetch.ts

@@ -72,17 +72,31 @@ export function useEmailFetch({ onEmailLoaded, onError }: UseEmailFetchProps = {
 
       const data = await response.json();
       
-      // Simple normalization of content structure
+      // Create a valid email message object with required fields
       const transformedEmail: EmailMessage = {
-        ...data,
+        id: data.id || emailId,
+        subject: data.subject || '',
+        from: data.from || '',
+        to: data.to || '',
+        cc: data.cc,
+        bcc: data.bcc,
+        date: data.date || new Date().toISOString(),
+        flags: Array.isArray(data.flags) ? data.flags : [],
         content: {
-          text: data.content?.text || data.text || '',
+          text: typeof data.content === 'string' ? data.content : 
-          html: data.content?.html || data.html,
+                data.content?.text || data.text || '',
-          isHtml: !!(data.content?.html || data.html),
+          html: data.content?.html || data.html || undefined,
+          isHtml: !!(data.content?.html || data.html || 
+                   (typeof data.content === 'string' && data.content.includes('<'))),
           direction: data.content?.direction || 'ltr'
-        }
+        },
+        attachments: data.attachments
       };
       
+      console.log('Email processed:', transformedEmail.id, 
+                  'HTML:', !!transformedEmail.content.html,
+                  'Text length:', transformedEmail.content.text.length);
+      
       setState({ email: transformedEmail, loading: false, error: null });
       onEmailLoaded?.(transformedEmail);
       

lib/utils/email-utils.ts

@@ -199,17 +199,22 @@ export function normalizeEmailContent(email: any): EmailMessage {
  * Render normalized email content into HTML for display
  */
 export function renderEmailContent(content: EmailContent): string {
+  console.log('renderEmailContent received:', JSON.stringify(content, null, 2));
+  
   if (!content) {
+    console.log('No content provided to renderEmailContent');
     return '<div class="email-content-empty">No content available</div>';
   }
   
   // If we have HTML content and isHtml flag is true, use it
   if (content.isHtml && content.html) {
+    console.log('Rendering HTML content, length:', content.html.length);
     return `<div class="email-content" dir="${content.direction || 'ltr'}">${content.html}</div>`;
   }
   
   // Otherwise, format the text content with basic HTML
   const text = content.text || '';
+  console.log('Rendering text content, length:', text.length);
   const formattedText = text
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')