222 lines
8.4 KiB
TypeScript
222 lines
8.4 KiB
TypeScript
'use client';
|
|
|
|
import { useRef, useMemo } from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Card } from '@/components/ui/card';
|
|
import { EmailMessage, EmailAddress } from '@/types/email';
|
|
import { formatEmailAddresses, formatEmailDate } from '@/lib/utils/email-utils';
|
|
import { adaptLegacyEmail } from '@/lib/utils/email-adapter';
|
|
import EmailContentDisplay from './EmailContentDisplay';
|
|
|
|
interface EmailPreviewProps {
|
|
email: EmailMessage | any;
|
|
loading?: boolean;
|
|
onReply?: (type: 'reply' | 'reply-all' | 'forward') => void;
|
|
}
|
|
|
|
export default function EmailPreview({ email, loading = false, onReply }: EmailPreviewProps) {
|
|
// Add editorRef to match ComposeEmail exactly
|
|
const editorRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Convert legacy email to standardized format if needed
|
|
const standardizedEmail = useMemo(() => {
|
|
if (!email) return null;
|
|
|
|
try {
|
|
// Check if the email is already in the standardized format
|
|
if (
|
|
email.content &&
|
|
typeof email.content === 'object' &&
|
|
'isHtml' in email.content &&
|
|
'text' in email.content
|
|
) {
|
|
console.log('EmailPreview: Email is already in standardized format');
|
|
return email as EmailMessage;
|
|
}
|
|
|
|
// Otherwise, adapt it
|
|
console.log('EmailPreview: Adapting legacy email format');
|
|
return adaptLegacyEmail(email);
|
|
} catch (error) {
|
|
console.error('Error adapting email:', error);
|
|
return null;
|
|
}
|
|
}, [email]);
|
|
|
|
// Get sender initials for avatar
|
|
const getSenderInitials = (name: string) => {
|
|
if (!name) return '';
|
|
return name
|
|
.split(" ")
|
|
.map((n) => n?.[0] || '')
|
|
.join("")
|
|
.toUpperCase()
|
|
.slice(0, 2);
|
|
};
|
|
|
|
// Display loading state
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full p-6">
|
|
<div className="text-center">
|
|
<Loader2 className="h-8 w-8 animate-spin mx-auto mb-4 text-primary" />
|
|
<p>Loading email...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// No email selected
|
|
if (!standardizedEmail) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full p-6">
|
|
<div className="text-center text-muted-foreground">
|
|
<p>Select an email to view</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Debug output for content structure
|
|
console.log('EmailPreview: Standardized Email Content:', standardizedEmail.content);
|
|
|
|
const sender = standardizedEmail.from && standardizedEmail.from.length > 0 ? standardizedEmail.from[0] : undefined;
|
|
|
|
// Check for attachments
|
|
const hasAttachments = standardizedEmail.attachments && standardizedEmail.attachments.length > 0;
|
|
|
|
return (
|
|
<Card className="flex flex-col h-full overflow-hidden border-0 shadow-none">
|
|
{/* Email header */}
|
|
<div className="p-6 border-b">
|
|
<div className="mb-4">
|
|
<h2 className="text-xl font-semibold mb-4">{standardizedEmail.subject}</h2>
|
|
|
|
<div className="flex items-start gap-3 mb-4">
|
|
<Avatar className="h-10 w-10">
|
|
<AvatarFallback>{getSenderInitials(sender?.name || '')}</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between">
|
|
<div className="font-medium">{sender?.name || sender?.address}</div>
|
|
<span className="text-sm text-muted-foreground">{formatEmailDate(standardizedEmail.date)}</span>
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground truncate mt-1">
|
|
To: {formatEmailAddresses(standardizedEmail.to)}
|
|
</div>
|
|
|
|
{standardizedEmail.cc && standardizedEmail.cc.length > 0 && (
|
|
<div className="text-sm text-muted-foreground truncate mt-1">
|
|
Cc: {formatEmailAddresses(standardizedEmail.cc)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action buttons */}
|
|
{onReply && (
|
|
<div className="flex gap-2 mt-4">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => onReply('reply')}
|
|
>
|
|
Reply
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => onReply('reply-all')}
|
|
>
|
|
Reply All
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => onReply('forward')}
|
|
>
|
|
Forward
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Attachments list */}
|
|
{hasAttachments && (
|
|
<div className="px-6 py-3 border-b bg-muted/20">
|
|
<h3 className="text-sm font-medium mb-2">Attachments ({standardizedEmail.attachments.length})</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{standardizedEmail.attachments.map((attachment, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center gap-2 bg-background rounded-md px-3 py-1.5 text-sm border"
|
|
>
|
|
<div className="flex-shrink-0">
|
|
<svg className="h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
|
</div>
|
|
<span>{attachment.filename}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Email body */}
|
|
<ScrollArea className="flex-1">
|
|
<div className="p-6">
|
|
{/* Render the email content using the new standardized component */}
|
|
<div
|
|
ref={editorRef}
|
|
className="email-content-container rounded-lg overflow-hidden bg-white shadow-sm"
|
|
style={{
|
|
minHeight: '300px',
|
|
border: '1px solid #e2e8f0'
|
|
}}
|
|
>
|
|
<EmailContentDisplay
|
|
content={standardizedEmail.content}
|
|
type="auto"
|
|
className="p-6"
|
|
debug={process.env.NODE_ENV === 'development'}
|
|
/>
|
|
</div>
|
|
|
|
{/* Always show debugging info in development mode */}
|
|
{process.env.NODE_ENV === 'development' && (
|
|
<details className="mt-4 text-xs text-muted-foreground border rounded-md p-2" open>
|
|
<summary className="cursor-pointer">Email Debug Info</summary>
|
|
<div className="mt-2 overflow-auto max-h-80 p-2 bg-gray-50 rounded">
|
|
<p><strong>Email ID:</strong> {standardizedEmail.id}</p>
|
|
<p><strong>Content Type:</strong> {standardizedEmail.content.isHtml ? 'HTML' : 'Plain Text'}</p>
|
|
<p><strong>Text Direction:</strong> {standardizedEmail.content.direction || 'ltr'}</p>
|
|
<p><strong>Content Size:</strong>
|
|
HTML: {standardizedEmail.content.html?.length || 0} chars,
|
|
Text: {standardizedEmail.content.text?.length || 0} chars
|
|
</p>
|
|
<p><strong>Content Structure:</strong> {JSON.stringify(standardizedEmail.content, null, 2)}</p>
|
|
<hr className="my-2" />
|
|
<p><strong>Original Email Type:</strong> {typeof email}</p>
|
|
<p><strong>Original Content Type:</strong> {typeof email.content}</p>
|
|
{email && typeof email.content === 'object' && (
|
|
<p><strong>Original Content Keys:</strong> {Object.keys(email.content).join(', ')}</p>
|
|
)}
|
|
{email && email.html && (
|
|
<p><strong>Has HTML property:</strong> {email.html.length} chars</p>
|
|
)}
|
|
{email && email.text && (
|
|
<p><strong>Has Text property:</strong> {email.text.length} chars</p>
|
|
)}
|
|
</div>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</Card>
|
|
);
|
|
}
|