'use client'; import { useEffect, useState, useMemo, useCallback, useRef } from 'react'; import { useRouter } from 'next/navigation'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { Checkbox } from '@/components/ui/checkbox'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare, Copy, EyeOff, AlertOctagon, Archive, RefreshCw } from 'lucide-react'; import { ScrollArea } from '@/components/ui/scroll-area'; import { useSession } from 'next-auth/react'; import { decodeQuotedPrintable, decodeBase64, convertCharset, cleanHtml, parseEmailHeaders, extractBoundary, extractFilename, extractHeader } from '@/lib/infomaniak-mime-decoder'; import DOMPurify from 'isomorphic-dompurify'; import ComposeEmail from '@/components/ComposeEmail'; export interface Account { id: number; name: string; email: string; color: string; folders?: string[]; } export interface Email { id: number; accountId: number; from: string; fromName: string; to: string; subject: string; body: string; date: string; read: boolean; starred: boolean; folder: string; cc?: string; bcc?: string; flags?: string[]; raw: string; } interface Attachment { name: string; type: string; content: string; encoding: string; } interface ParsedEmailContent { headers: string; body: string; html?: string; text?: string; attachments?: Array<{ filename: string; content: string; contentType: string; }>; } interface ParsedEmailMetadata { subject: string; from: string; to: string; date: string; contentType: string; text: string | null; html: string | null; raw: { headers: string; body: string; }; } function splitEmailHeadersAndBody(emailBody: string): { headers: string; body: string } { const [headers, ...bodyParts] = emailBody.split('\r\n\r\n'); return { headers: headers || '', body: bodyParts.join('\r\n\r\n') }; } function renderEmailContent(email: Email) { if (!email.body) { console.warn('No email body provided'); return null; } try { // Split email into headers and body const [headersPart, ...bodyParts] = email.body.split('\r\n\r\n'); if (!headersPart || bodyParts.length === 0) { throw new Error('Invalid email format: missing headers or body'); } const body = bodyParts.join('\r\n\r\n'); // Parse headers using Infomaniak MIME decoder const headerInfo = parseEmailHeaders(headersPart); const boundary = extractBoundary(headersPart); // If it's a multipart email if (boundary) { try { const parts = body.split(`--${boundary}`); let htmlContent = ''; let textContent = ''; let attachments: { filename: string; content: string }[] = []; for (const part of parts) { if (!part.trim()) continue; const [partHeaders, ...partBodyParts] = part.split('\r\n\r\n'); if (!partHeaders || partBodyParts.length === 0) continue; const partBody = partBodyParts.join('\r\n\r\n'); const contentType = extractHeader(partHeaders, 'Content-Type').toLowerCase(); const encoding = extractHeader(partHeaders, 'Content-Transfer-Encoding').toLowerCase(); const charset = extractHeader(partHeaders, 'charset') || 'utf-8'; try { let decodedContent = ''; if (encoding === 'base64') { decodedContent = decodeBase64(partBody, charset); } else if (encoding === 'quoted-printable') { decodedContent = decodeQuotedPrintable(partBody, charset); } else { decodedContent = convertCharset(partBody, charset); } if (contentType.includes('text/html')) { // For HTML content, we want to preserve the HTML structure // Only clean up problematic elements while keeping the formatting htmlContent = decodedContent .replace(/]*>[\s\S]*?<\/style>/gi, '') .replace(/]*>[\s\S]*?<\/script>/gi, '') .replace(/]*>/gi, '') .replace(/]*>/gi, '') .replace(/]*>/gi, '') .replace(/]*>[\s\S]*?<\/title>/gi, '') .replace(/]*>[\s\S]*?<\/head>/gi, '') .replace(/]*>/gi, '') .replace(/<\/body>/gi, '') .replace(/]*>/gi, '') .replace(/<\/html>/gi, ''); } else if (contentType.includes('text/plain')) { textContent = decodedContent; } else if (contentType.includes('attachment') || extractHeader(partHeaders, 'Content-Disposition').includes('attachment')) { attachments.push({ filename: extractFilename(partHeaders) || 'unnamed_attachment', content: decodedContent }); } } catch (partError) { console.error('Error processing email part:', partError); continue; } } // Prefer HTML content if available if (htmlContent) { return (
{attachments.length > 0 && renderAttachments(attachments)}
); } // Fall back to text content if (textContent) { return (
{textContent.split('\n').map((line: string, i: number) => (

{line}

))}
{attachments.length > 0 && renderAttachments(attachments)}
); } } catch (multipartError) { console.error('Error processing multipart email:', multipartError); throw new Error('Failed to process multipart email'); } } // If it's a simple email, try to detect content type and decode const contentType = extractHeader(headersPart, 'Content-Type').toLowerCase(); const encoding = extractHeader(headersPart, 'Content-Transfer-Encoding').toLowerCase(); const charset = extractHeader(headersPart, 'charset') || 'utf-8'; try { let decodedBody = ''; if (encoding === 'base64') { decodedBody = decodeBase64(body, charset); } else if (encoding === 'quoted-printable') { decodedBody = decodeQuotedPrintable(body, charset); } else { decodedBody = convertCharset(body, charset); } if (contentType.includes('text/html')) { // For HTML content, preserve the HTML structure const cleanedHtml = decodedBody .replace(/]*>[\s\S]*?<\/style>/gi, '') .replace(/]*>[\s\S]*?<\/script>/gi, '') .replace(/]*>/gi, '') .replace(/]*>/gi, '') .replace(/]*>/gi, '') .replace(/]*>[\s\S]*?<\/title>/gi, '') .replace(/]*>[\s\S]*?<\/head>/gi, '') .replace(/]*>/gi, '') .replace(/<\/body>/gi, '') .replace(/]*>/gi, '') .replace(/<\/html>/gi, ''); return (
); } else { return (
{decodedBody.split('\n').map((line: string, i: number) => (

{line}

))}
); } } catch (decodeError) { console.error('Error decoding email body:', decodeError); throw new Error('Failed to decode email body'); } } catch (error) { console.error('Error rendering email content:', error); return (
Error displaying email content: {error instanceof Error ? error.message : 'Unknown error'}
          {email.body}
); } } // Helper function to render attachments function renderAttachments(attachments: { filename: string; content: string }[]) { return (

Attachments:

    {attachments.map((attachment, index) => (
  • {attachment.filename}
    • ))}
); } // Define the exact folder names from IMAP type MailFolder = string; // Map IMAP folders to sidebar items with icons const getFolderIcon = (folder: string) => { switch (folder.toLowerCase()) { case 'inbox': return Inbox; case 'sent': return Send; case 'drafts': return Edit; case 'trash': return Trash; case 'spam': return AlertOctagon; case 'archive': case 'archives': return Archive; default: return Folder; } }; // Initial sidebar items - only INBOX const initialSidebarItems = [ { view: 'INBOX' as MailFolder, label: 'Inbox', icon: Inbox, folder: 'INBOX' } ]; function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'reply') { if (!email.body) return ''; let content = ''; let headers = ''; let body = ''; // Split headers and body const parts = email.body.split('\r\n\r\n'); if (parts.length > 1) { headers = parts[0]; body = parts.slice(1).join('\r\n\r\n'); } else { body = email.body; } // Parse headers const headerInfo = parseEmailHeaders(headers); const boundary = extractBoundary(headers); // Handle multipart emails if (boundary) { const parts = body.split(`--${boundary}`); for (const part of parts) { if (!part.trim()) continue; const [partHeaders, ...partBodyParts] = part.split('\r\n\r\n'); if (!partHeaders || partBodyParts.length === 0) continue; const partBody = partBodyParts.join('\r\n\r\n'); const partHeaderInfo = parseEmailHeaders(partHeaders); try { let decodedContent = ''; if (partHeaderInfo.encoding === 'base64') { decodedContent = decodeBase64(partBody, partHeaderInfo.charset); } else if (partHeaderInfo.encoding === 'quoted-printable') { decodedContent = decodeQuotedPrintable(partBody, partHeaderInfo.charset); } else { decodedContent = convertCharset(partBody, partHeaderInfo.charset); } // Preserve the original MIME structure if (partHeaderInfo.contentType.includes('text/html')) { content = ` `; break; } else if (partHeaderInfo.contentType.includes('text/plain') && !content) { content = ` `; } } catch (error) { console.error('Error decoding email part:', error); } } } else { // Handle simple email try { let decodedBody = ''; if (headerInfo.encoding === 'base64') { decodedBody = decodeBase64(body, headerInfo.charset); } else if (headerInfo.encoding === 'quoted-printable') { decodedBody = decodeQuotedPrintable(body, headerInfo.charset); } else { decodedBody = convertCharset(body, headerInfo.charset); } content = ` `; } catch (error) { console.error('Error decoding email body:', error); content = body; } } // Clean and sanitize HTML content while preserving structure content = cleanHtml(content); // Format the reply/forward content with proper structure and direction let formattedContent = ''; if (type === 'forward') { formattedContent = ` `; } else { formattedContent = ` `; } return formattedContent; } export default function CourrierPage() { const router = useRouter(); const { data: session } = useSession(); const [loading, setLoading] = useState(true); const [accounts, setAccounts] = useState([ { id: 0, name: 'All', email: '', color: 'bg-gray-500' }, { id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' } ]); const [selectedAccount, setSelectedAccount] = useState(null); const [currentView, setCurrentView] = useState('INBOX'); const [showCompose, setShowCompose] = useState(false); const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); const [selectedEmails, setSelectedEmails] = useState([]); const [showBulkActions, setShowBulkActions] = useState(false); const [showBcc, setShowBcc] = useState(false); const [emails, setEmails] = useState([]); const [error, setError] = useState(null); const [composeSubject, setComposeSubject] = useState(''); const [composeTo, setComposeTo] = useState(''); const [composeCc, setComposeCc] = useState(''); const [composeBcc, setComposeBcc] = useState(''); const [composeBody, setComposeBody] = useState(''); const [selectedEmail, setSelectedEmail] = useState(null); const [sidebarOpen, setSidebarOpen] = useState(true); const [foldersOpen, setFoldersOpen] = useState(true); const [showSettings, setShowSettings] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false); const [composeOpen, setComposeOpen] = useState(false); const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false); const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false); const [showAccountActions, setShowAccountActions] = useState(null); const [showEmailActions, setShowEmailActions] = useState(false); const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email'); const [itemToDelete, setItemToDelete] = useState(null); const [showCc, setShowCc] = useState(false); const [contentLoading, setContentLoading] = useState(false); const [attachments, setAttachments] = useState([]); const [folders, setFolders] = useState([]); const [unreadCount, setUnreadCount] = useState(0); const [availableFolders, setAvailableFolders] = useState([]); const [sidebarItems, setSidebarItems] = useState(initialSidebarItems); const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(true); const [isLoadingMore, setIsLoadingMore] = useState(false); const [isLoadingInitial, setIsLoadingInitial] = useState(true); const [isLoadingSearch, setIsLoadingSearch] = useState(false); const [isLoadingCompose, setIsLoadingCompose] = useState(false); const [isLoadingReply, setIsLoadingReply] = useState(false); const [isLoadingForward, setIsLoadingForward] = useState(false); const [isLoadingDelete, setIsLoadingDelete] = useState(false); const [isLoadingMove, setIsLoadingMove] = useState(false); const [isLoadingStar, setIsLoadingStar] = useState(false); const [isLoadingUnstar, setIsLoadingUnstar] = useState(false); const [isLoadingMarkRead, setIsLoadingMarkRead] = useState(false); const [isLoadingMarkUnread, setIsLoadingMarkUnread] = useState(false); const [isLoadingRefresh, setIsLoadingRefresh] = useState(false); const emailsPerPage = 20; const [isSearching, setIsSearching] = useState(false); const [searchResults, setSearchResults] = useState([]); const [showSearchResults, setShowSearchResults] = useState(false); const [isComposing, setIsComposing] = useState(false); const [composeEmail, setComposeEmail] = useState({ to: '', subject: '', body: '', }); const [isSending, setIsSending] = useState(false); const [isReplying, setIsReplying] = useState(false); const [isForwarding, setIsForwarding] = useState(false); const [replyToEmail, setReplyToEmail] = useState(null); const [forwardEmail, setForwardEmail] = useState(null); const [replyBody, setReplyBody] = useState(''); const [forwardBody, setForwardBody] = useState(''); const [replyAttachments, setReplyAttachments] = useState([]); const [forwardAttachments, setForwardAttachments] = useState([]); const [isSendingReply, setIsSendingReply] = useState(false); const [isSendingForward, setIsSendingForward] = useState(false); const [isDeleting, setIsDeleting] = useState(false); const [isMoving, setIsMoving] = useState(false); const [isStarring, setIsStarring] = useState(false); const [isUnstarring, setIsUnstarring] = useState(false); const [isMarkingRead, setIsMarkingRead] = useState(false); const [isMarkingUnread, setIsMarkingUnread] = useState(false); const [isRefreshing, setIsRefreshing] = useState(false); const composeBodyRef = useRef(null); const [originalEmail, setOriginalEmail] = useState<{ content: string; type: 'reply' | 'reply-all' | 'forward'; } | null>(null); // Debug logging for email distribution useEffect(() => { const emailsByFolder = emails.reduce((acc, email) => { acc[email.folder] = (acc[email.folder] || 0) + 1; return acc; }, {} as Record); console.log('Emails by folder:', emailsByFolder); console.log('Current view:', currentView); }, [emails, currentView]); // Move getSelectedEmail inside the component const getSelectedEmail = () => { return emails.find(email => email.id === selectedEmail?.id); }; // Check for stored credentials useEffect(() => { const checkCredentials = async () => { try { console.log('Checking for stored credentials...'); const response = await fetch('/api/courrier'); if (!response.ok) { const errorData = await response.json(); console.log('API response error:', errorData); if (errorData.error === 'No stored credentials found') { console.log('No credentials found, redirecting to login...'); router.push('/courrier/login'); return; } throw new Error(errorData.error || 'Failed to check credentials'); } console.log('Credentials verified, loading emails...'); setLoading(false); loadEmails(); } catch (err) { console.error('Error checking credentials:', err); setError(err instanceof Error ? err.message : 'Failed to check credentials'); setLoading(false); } }; checkCredentials(); }, [router]); // Update the loadEmails function const loadEmails = async (isLoadMore = false) => { try { if (isLoadMore) { setIsLoadingMore(true); } else { setLoading(true); } setError(null); const response = await fetch(`/api/courrier?folder=${encodeURIComponent(currentView)}&page=${page}&limit=${emailsPerPage}`); if (!response.ok) { throw new Error('Failed to load emails'); } const data = await response.json(); // Get available folders from the API response if (data.folders) { setAvailableFolders(data.folders); } // Process emails keeping exact folder names const processedEmails = (data.emails || []).map((email: any) => ({ id: Number(email.id), accountId: 1, from: email.from || '', fromName: email.fromName || email.from?.split('@')[0] || '', to: email.to || '', subject: email.subject || '(No subject)', body: email.body || '', date: email.date || new Date().toISOString(), read: email.read || false, starred: email.starred || false, folder: email.folder || currentView, cc: email.cc, bcc: email.bcc, flags: email.flags || [], raw: email.body || '' })); // Only update unread count if we're in the Inbox folder if (currentView === 'INBOX') { const unreadInboxEmails = processedEmails.filter( (email: Email) => !email.read && email.folder === 'INBOX' ).length; setUnreadCount(unreadInboxEmails); } if (isLoadMore) { setEmails(prev => [...prev, ...processedEmails]); setPage(prev => prev + 1); } else { setEmails(processedEmails); setPage(1); } // Update hasMore based on API response setHasMore(data.hasMore || false); } catch (err) { setError(err instanceof Error ? err.message : 'Failed to load emails'); } finally { setLoading(false); setIsLoadingMore(false); } }; // Add an effect to reload emails when the view changes useEffect(() => { setPage(1); // Reset page when view changes setHasMore(true); loadEmails(); }, [currentView]); // Format date for display const formatDate = (dateString: string) => { const date = new Date(dateString); const now = new Date(); if (date.toDateString() === now.toDateString()) { return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } else { return date.toLocaleDateString([], { month: 'short', day: 'numeric' }); } }; // Get account color const getAccountColor = (accountId: number) => { const account = accounts.find(acc => acc.id === accountId); return account ? account.color : 'bg-gray-500'; }; // Update handleEmailSelect to set selectedEmail correctly const handleEmailSelect = async (emailId: number) => { const email = emails.find(e => e.id === emailId); if (!email) { return; } // Set the selected email first to show preview immediately setSelectedEmail(email); // Fetch the full email content const response = await fetch(`/api/mail/${emailId}`); if (!response.ok) { throw new Error('Failed to fetch full email content'); } const fullEmail = await response.json(); // Update the email in the list and selected email with full content setEmails(prevEmails => prevEmails.map(email => email.id === emailId ? { ...email, body: fullEmail.body } : email )); setSelectedEmail(prev => prev ? { ...prev, body: fullEmail.body } : prev); // Try to mark as read in the background try { const markReadResponse = await fetch(`/api/mail/mark-read`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ emailId, isRead: true, }), }); if (markReadResponse.ok) { // Only update the emails list if the API call was successful setEmails((prevEmails: Email[]) => prevEmails.map((email: Email): Email => email.id === emailId ? { ...email, read: true } : email ) ); } else { console.error('Failed to mark email as read:', await markReadResponse.text()); } } catch (error) { console.error('Error marking email as read:', error); } }; // Add these improved handlers const handleEmailCheckbox = (e: React.ChangeEvent, emailId: number) => { e.stopPropagation(); if (e.target.checked) { setSelectedEmails([...selectedEmails, emailId.toString()]); } else { setSelectedEmails(selectedEmails.filter(id => id !== emailId.toString())); } }; // Handles marking an individual email as read/unread const handleMarkAsRead = (emailId: string, isRead: boolean) => { setEmails(emails.map(email => email.id.toString() === emailId ? { ...email, read: isRead } : email )); }; // Handles bulk actions for selected emails const handleBulkAction = async (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => { if (action === 'delete') { setDeleteType('emails'); setShowDeleteConfirm(true); return; } try { const response = await fetch('/api/courrier/bulk-actions', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ emailIds: selectedEmails, action: action }), }); if (!response.ok) { throw new Error('Failed to perform bulk action'); } // Update local state based on the action setEmails(emails.map(email => { if (selectedEmails.includes(email.id.toString())) { switch (action) { case 'mark-read': return { ...email, read: true }; case 'mark-unread': return { ...email, read: false }; case 'archive': return { ...email, folder: 'Archive' }; default: return email; } } return email; })); // Clear selection after successful action setSelectedEmails([]); } catch (error) { console.error('Error performing bulk action:', error); alert('Failed to perform bulk action. Please try again.'); } }; // Add handleDeleteConfirm function const handleDeleteConfirm = async () => { try { const response = await fetch('/api/courrier/bulk-actions', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ emailIds: selectedEmails, action: 'delete' }), }); if (!response.ok) { throw new Error('Failed to delete emails'); } // Remove deleted emails from state setEmails(emails.filter(email => !selectedEmails.includes(email.id.toString()))); setSelectedEmails([]); } catch (error) { console.error('Error deleting emails:', error); alert('Failed to delete emails. Please try again.'); } finally { setShowDeleteConfirm(false); } }; // Add infinite scroll handler const handleScroll = useCallback((e: React.UIEvent) => { const target = e.currentTarget; if ( target.scrollHeight - target.scrollTop === target.clientHeight && !isLoadingMore && hasMore ) { setPage(prev => prev + 1); loadEmails(true); } }, [isLoadingMore, hasMore]); // Sort emails by date (most recent first) const sortedEmails = useMemo(() => { return [...emails].sort((a, b) => { return new Date(b.date).getTime() - new Date(a.date).getTime(); }); }, [emails]); const toggleSelectAll = () => { if (selectedEmails.length === emails.length) { setSelectedEmails([]); } else { setSelectedEmails(emails.map(email => email.id.toString())); } }; // Add filtered emails based on search query const filteredEmails = useMemo(() => { if (!searchQuery) return emails; const query = searchQuery.toLowerCase(); return emails.filter(email => email.subject.toLowerCase().includes(query) || email.from.toLowerCase().includes(query) || email.to.toLowerCase().includes(query) || email.body.toLowerCase().includes(query) ); }, [emails, searchQuery]); // Update the email list to use filtered emails const renderEmailList = () => (
{renderEmailListHeader()} {renderBulkActionsToolbar()}
{loading ? (
) : filteredEmails.length === 0 ? (

{searchQuery ? 'No emails match your search' : 'No emails in this folder'}

) : (
{filteredEmails.map((email) => renderEmailListItem(email))} {isLoadingMore && (
)}
)}
); // Update the email count in the header to show filtered count const renderEmailListHeader = () => (
setSearchQuery(e.target.value)} />
0 && selectedEmails.length === filteredEmails.length} onCheckedChange={toggleSelectAll} className="mt-0.5" />

{currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}

{searchQuery ? `${filteredEmails.length} of ${emails.length} emails` : `${emails.length} emails`}
); // Update the bulk actions toolbar to include confirmation dialog const renderBulkActionsToolbar = () => { if (selectedEmails.length === 0) return null; return (
{selectedEmails.length} selected
); }; // Keep only one renderEmailListWrapper function that includes both panels const renderEmailListWrapper = () => (
{/* Email list panel */} {renderEmailList()} {/* Preview panel - will automatically take remaining space */}
{selectedEmail ? ( <> {/* Email actions header */}

{selectedEmail.subject}

{/* Scrollable content area */}
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}

{selectedEmail.fromName} <{selectedEmail.from}>

to {selectedEmail.to}

{selectedEmail.cc && (

cc {selectedEmail.cc}

)}
{new Date(selectedEmail.date).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
{renderEmailContent(selectedEmail)}
) : (

Select an email to view its contents

)}
); // Update sidebar items when available folders change useEffect(() => { if (availableFolders.length > 0) { const newItems = [ ...initialSidebarItems, ...availableFolders .filter(folder => !['INBOX'].includes(folder)) // Exclude folders already in initial items .map(folder => ({ view: folder as MailFolder, label: folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(), icon: getFolderIcon(folder), folder: folder })) ]; setSidebarItems(newItems); } }, [availableFolders]); // Update the email list item to match header checkbox alignment const renderEmailListItem = (email: Email) => { return (
handleEmailSelect(email.id)} > { const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent; handleEmailCheckbox(e, email.id); }} onClick={(e) => e.stopPropagation()} className="mt-0.5" />
{email.fromName || email.from}
{formatDate(email.date)}

{email.subject || '(No subject)'}

{generateEmailPreview(email)}
); }; const generateEmailPreview = (email: Email): string => { console.log('=== generateEmailPreview Debug ==='); console.log('Email ID:', email.id); console.log('Subject:', email.subject); console.log('Body length:', email.body.length); console.log('First 200 chars of body:', email.body.substring(0, 200)); try { // Split email into headers and body const [headersPart, ...bodyParts] = email.body.split('\r\n\r\n'); const body = bodyParts.join('\r\n\r\n'); // Parse headers using our MIME decoder const headerInfo = parseEmailHeaders(headersPart); const boundary = extractBoundary(headersPart); let preview = ''; // If it's a multipart email if (boundary) { const parts = body.split(`--${boundary}`); for (const part of parts) { if (!part.trim()) continue; const [partHeaders, ...partBodyParts] = part.split('\r\n\r\n'); const partBody = partBodyParts.join('\r\n\r\n'); const partHeaderInfo = parseEmailHeaders(partHeaders); if (partHeaderInfo.contentType.includes('text/plain')) { preview = decodeQuotedPrintable(partBody, partHeaderInfo.charset); break; } else if (partHeaderInfo.contentType.includes('text/html') && !preview) { preview = cleanHtml(decodeQuotedPrintable(partBody, partHeaderInfo.charset)); } } } // If no preview from multipart, try to decode the whole body if (!preview) { preview = decodeQuotedPrintable(body, headerInfo.charset); if (headerInfo.contentType.includes('text/html')) { preview = cleanHtml(preview); } } // Clean up the preview preview = preview .replace(/^>+/gm, '') .replace(/Content-Type:[^\n]+/g, '') .replace(/Content-Transfer-Encoding:[^\n]+/g, '') .replace(/--[a-zA-Z0-9]+(-[a-zA-Z0-9]+)?/g, '') .replace(/boundary=[^\n]+/g, '') .replace(/charset=[^\n]+/g, '') .replace(/[\r\n]+/g, ' ') .trim(); // Take first 100 characters preview = preview.substring(0, 100); // Try to end at a complete word if (preview.length === 100) { const lastSpace = preview.lastIndexOf(' '); if (lastSpace > 80) { preview = preview.substring(0, lastSpace); } preview += '...'; } return preview; } catch (error) { console.error('Error generating email preview:', error); return email.body .replace(/<[^>]+>/g, ' ') .replace(/ |‌|»|«|>/g, ' ') .replace(/\s+/g, ' ') .substring(0, 100) .trim() + '...'; } }; // Render the sidebar navigation const renderSidebarNav = () => ( ); // Add attachment handling functions const handleFileAttachment = async (e: React.ChangeEvent) => { if (!e.target.files) return; const newAttachments: Attachment[] = []; const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes const oversizedFiles: string[] = []; for (const file of e.target.files) { if (file.size > MAX_FILE_SIZE) { oversizedFiles.push(file.name); continue; } try { // Read file as base64 const base64Content = await new Promise((resolve) => { const reader = new FileReader(); reader.onloadend = () => { const base64 = reader.result as string; resolve(base64.split(',')[1]); // Remove data URL prefix }; reader.readAsDataURL(file); }); newAttachments.push({ name: file.name, type: file.type, content: base64Content, encoding: 'base64' }); } catch (error) { console.error('Error processing attachment:', error); } } if (oversizedFiles.length > 0) { alert(`The following files exceed the 10MB size limit and were not attached:\n${oversizedFiles.join('\n')}`); } if (newAttachments.length > 0) { setAttachments([...attachments, ...newAttachments]); } }; // Add handleSend function for email composition const handleSend = async () => { if (!composeTo) { alert('Please specify at least one recipient'); return; } try { const response = await fetch('/api/courrier/send', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ to: composeTo, cc: composeCc, bcc: composeBcc, subject: composeSubject, body: composeBody, attachments: attachments, }), }); const data = await response.json(); if (!response.ok) { if (data.error === 'Attachment size limit exceeded') { alert(`Error: ${data.error}\nThe following files are too large:\n${data.details.oversizedFiles.join('\n')}`); } else { alert(`Error sending email: ${data.error}`); } return; } // Clear compose form and close modal setComposeTo(''); setComposeCc(''); setComposeBcc(''); setComposeSubject(''); setComposeBody(''); setAttachments([]); setShowCompose(false); } catch (error) { console.error('Error sending email:', error); alert('Failed to send email. Please try again.'); } }; // Add toggleStarred function const toggleStarred = async (emailId: number, e?: React.MouseEvent) => { if (e) { e.stopPropagation(); } const email = emails.find(e => e.id === emailId); if (!email) return; try { const response = await fetch('/api/courrier/toggle-star', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ emailId, starred: !email.starred }), }); if (!response.ok) { throw new Error('Failed to toggle star'); } // Update email in state setEmails(emails.map(e => e.id === emailId ? { ...e, starred: !e.starred } : e )); } catch (error) { console.error('Error toggling star:', error); } }; // Add handleReply function const handleReply = (type: 'reply' | 'reply-all' | 'forward') => { if (!selectedEmail) return; const getReplyTo = () => { if (type === 'forward') return ''; return selectedEmail.from; }; const getReplyCc = () => { if (type !== 'reply-all') return ''; return selectedEmail.cc || ''; }; const getReplySubject = () => { const subject = selectedEmail.subject || ''; if (type === 'forward') { return subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`; } return subject.startsWith('Re:') ? subject : `Re: ${subject}`; }; // Get the formatted original email content const originalContent = getReplyBody(selectedEmail, type); // Create a clean structure with clear separation const formattedContent = `
${originalContent}
`; // Update the compose form setComposeTo(getReplyTo()); setComposeCc(getReplyCc()); setComposeSubject(getReplySubject()); setComposeBody(formattedContent); setComposeBcc(''); // Show the compose form and CC field for Reply All setShowCompose(true); setShowCc(type === 'reply-all'); setShowBcc(false); setAttachments([]); }; // Add the confirmation dialog component const renderDeleteConfirmDialog = () => ( Delete Emails Are you sure you want to delete {selectedEmails.length} selected email{selectedEmails.length > 1 ? 's' : ''}? This action cannot be undone. Cancel Delete ); const handleMailboxChange = async (newMailbox: string) => { setCurrentView(newMailbox); setSelectedEmails([]); setSearchQuery(''); setEmails([]); setLoading(true); setError(null); setHasMore(true); setPage(1); try { // Optimize the request by adding a timeout const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout const response = await fetch(`/api/courrier?folder=${encodeURIComponent(newMailbox)}&page=1&limit=${emailsPerPage}`, { signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { throw new Error('Failed to fetch emails'); } const data = await response.json(); // Process emails more efficiently const processedEmails = data.emails.map((email: any) => ({ id: Number(email.id), accountId: 1, from: email.from || '', fromName: email.from?.split('@')[0] || '', to: email.to || '', subject: email.subject || '(No subject)', body: email.body || '', date: email.date || new Date().toISOString(), read: email.read || false, starred: email.starred || false, folder: email.folder || newMailbox, cc: email.cc, bcc: email.bcc, flags: email.flags || [], raw: email.body || '' })); setEmails(processedEmails); setHasMore(processedEmails.length === emailsPerPage); // Only update unread count if we're in the Inbox folder if (newMailbox === 'INBOX') { const unreadInboxEmails = processedEmails.filter( (email: Email) => !email.read && email.folder === 'INBOX' ).length; setUnreadCount(unreadInboxEmails); } } catch (error) { console.error('Error fetching emails:', error); setError(error instanceof Error ? error.message : 'Failed to fetch emails'); } finally { setLoading(false); } }; if (error) { return (

{error}

); } return ( <> {/* Main layout */}
{/* Sidebar */}
{/* Courrier Title */}
COURRIER
{/* Compose button and refresh button */}
{/* Accounts Section */}
{accountsDropdownOpen && (
{accounts.map(account => (
))}
)}
{/* Navigation */} {renderSidebarNav()}
{/* Main content area */}
{/* Email list panel */} {renderEmailListWrapper()}
{/* Compose Email Modal */} { // Handle the sent email console.log('Email sent:', email); setShowCompose(false); }} onCancel={() => { setShowCompose(false); setComposeTo(''); setComposeCc(''); setComposeBcc(''); setComposeSubject(''); setComposeBody(''); setShowCc(false); setShowBcc(false); setAttachments([]); }} /> {renderDeleteConfirmDialog()} ); }