diff --git a/components/email/EmailContentDisplay.tsx b/components/email/EmailContentDisplay.tsx index 8a5b16ab..1a506738 100644 --- a/components/email/EmailContentDisplay.tsx +++ b/components/email/EmailContentDisplay.tsx @@ -1,7 +1,6 @@ 'use client'; -import React, { useMemo, CSSProperties } from 'react'; -import { renderEmailContent } from '@/lib/utils/email-utils'; +import React from 'react'; import { EmailContent } from '@/types/email'; interface EmailContentDisplayProps { @@ -23,34 +22,30 @@ const EmailContentDisplay: React.FC = ({ type = 'auto', debug = false }) => { - // Basic fallback for missing content - const safeContent = content || { - text: 'No content available', - html: '', - isHtml: false, - direction: 'ltr' - }; + if (!content) { + return
No content available
; + } - // Render the content with basic error handling - const htmlContent = useMemo(() => { - try { - return renderEmailContent(safeContent); - } catch (error) { - console.error('Error rendering content:', error); - return `
Error rendering email content
`; - } - }, [safeContent, type]); + let htmlContent = ''; - // Apply quoted text styling if needed - const containerStyle: CSSProperties = showQuotedText - ? {} - : { maxHeight: '400px', overflowY: 'auto' }; + // Simple content rendering + if (content.isHtml && content.html) { + // Use HTML content + htmlContent = content.html; + } else if (content.text) { + // Format text content with line breaks + htmlContent = content.text + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/\n/g, '
'); + } else { + // No content available + htmlContent = 'No content available'; + } return ( -
+
= ({ {/* Debug output if enabled */} {debug && ( -
-

Content Type: {safeContent.isHtml ? 'HTML' : 'Text'}

-

Direction: {safeContent.direction}

-

Has HTML: {!!safeContent.html}

-

Text Length: {safeContent.text?.length || 0}

+
+

Content Type: {content.isHtml ? 'HTML' : 'Text'}

+

Direction: {content.direction}

+

HTML Length: {content.html?.length || 0}

+

Text Length: {content.text?.length || 0}

)} @@ -71,32 +66,10 @@ const EmailContentDisplay: React.FC = ({ width: 100%; } - .email-content-display.quoted-text { - opacity: 0.85; - font-size: 0.95em; - } - - .email-content-inner :global(img) { + .email-content-inner 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; - } `}
); diff --git a/hooks/use-email-fetch.ts b/hooks/use-email-fetch.ts index 14baef70..214a0c79 100644 --- a/hooks/use-email-fetch.ts +++ b/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 || '', - html: data.content?.html || data.html, - isHtml: !!(data.content?.html || data.html), + text: typeof data.content === 'string' ? data.content : + data.content?.text || data.text || '', + 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); diff --git a/lib/utils/email-utils.ts b/lib/utils/email-utils.ts index c281dee0..dcd2c24a 100644 --- a/lib/utils/email-utils.ts +++ b/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 ''; } // 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 ``; } // 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, '&') .replace(/