panel 2 courier api

This commit is contained in:
alma 2025-04-25 17:13:49 +02:00
parent ed28483b1d
commit fb12b916b8
5 changed files with 233 additions and 792 deletions

View File

@ -1,233 +0,0 @@
import { NextResponse } from 'next/server';
import { ImapFlow } from 'imapflow';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import { prisma } from '@/lib/prisma';
import { parseEmail } from '@/lib/server/email-parser';
import { LRUCache } from 'lru-cache';
// Simple in-memory cache for email content
const emailContentCache = new LRUCache<string, any>({
max: 100,
ttl: 1000 * 60 * 15, // 15 minutes
});
export async function GET(
request: Request,
{ params }: { params: { id: string } }
) {
try {
// 1. Get email ID from params (properly awaited)
const { id } = await Promise.resolve(params);
// 2. Authentication check
const session = await getServerSession(authOptions);
if (!session?.user?.id) {
return NextResponse.json(
{ error: 'Unauthorized' },
{ status: 401 }
);
}
// 3. Check cache first
const cacheKey = `email:${session.user.id}:${id}`;
const cachedEmail = emailContentCache.get(cacheKey);
if (cachedEmail) {
return NextResponse.json(cachedEmail);
}
// 4. Get credentials from database
const credentials = await prisma.mailCredentials.findUnique({
where: {
userId: session.user.id
}
});
if (!credentials) {
return NextResponse.json(
{ error: 'No mail credentials found. Please configure your email account.' },
{ status: 401 }
);
}
// 5. Get the current folder from the request URL
const url = new URL(request.url);
const folder = url.searchParams.get('folder') || 'INBOX';
// 6. Create IMAP client
const client = new ImapFlow({
host: credentials.host,
port: credentials.port,
secure: true,
auth: {
user: credentials.email,
pass: credentials.password,
},
logger: false,
emitLogs: false,
tls: {
rejectUnauthorized: false
},
disableAutoIdle: true
});
try {
await client.connect();
// 7. Open the folder
const mailbox = await client.mailboxOpen(folder);
console.log(`Mailbox opened: ${folder}, total messages: ${mailbox.exists}`);
// 8. Download the raw message data using a dynamic fetch approach
console.log(`Attempting to fetch message with UID: ${id}`);
// Create a loop to process all messages until we find the right one
let foundMessage = null;
const chunkSize = 10;
for (let i = 1; i <= mailbox.exists; i += chunkSize) {
const endIdx = Math.min(i + chunkSize - 1, mailbox.exists);
const range = `${i}:${endIdx}`;
console.log(`Scanning messages ${range}`);
// Fetch messages in chunks with UID
const messages = client.fetch(range, {
uid: true,
envelope: true,
flags: true,
bodyStructure: true,
source: true
});
for await (const message of messages) {
if (message.uid.toString() === id) {
console.log(`Found matching message with UID ${id}`);
foundMessage = message;
break;
}
}
if (foundMessage) {
break;
}
}
if (!foundMessage) {
console.log(`No message found with UID ${id}`);
return NextResponse.json(
{ error: `Email not found with UID ${id}` },
{ status: 404 }
);
}
console.log(`Successfully fetched message, parsing content...`);
// 9. Parse the email content
const parsedEmail = await parseEmail(foundMessage.source.toString());
// Debug the parsed email structure
console.log('Parsed email data structure:', {
hasHtml: !!parsedEmail.html,
hasText: !!parsedEmail.text,
htmlLength: parsedEmail.html ? parsedEmail.html.length : 0,
textLength: parsedEmail.text ? parsedEmail.text.length : 0,
attachmentsCount: parsedEmail.attachments ? parsedEmail.attachments.length : 0
});
// 10. Prepare the full email object with all needed data
const rawEmail = {
id,
from: foundMessage.envelope.from?.[0]?.address || '',
fromName: foundMessage.envelope.from?.[0]?.name ||
foundMessage.envelope.from?.[0]?.address?.split('@')[0] || '',
to: foundMessage.envelope.to?.map((addr: any) => addr.address).join(', ') || '',
subject: foundMessage.envelope.subject || '(No subject)',
date: foundMessage.envelope.date?.toISOString() || new Date().toISOString(),
html: parsedEmail.html || '',
text: parsedEmail.text || '',
rawSource: foundMessage.source?.toString() || '',
read: foundMessage.flags.has('\\Seen'),
starred: foundMessage.flags.has('\\Flagged'),
folder: folder
};
// 10. Prepare the full email object with all needed data
const fullEmail = {
id,
from: foundMessage.envelope.from?.[0]?.address || '',
fromName: foundMessage.envelope.from?.[0]?.name ||
foundMessage.envelope.from?.[0]?.address?.split('@')[0] || '',
to: foundMessage.envelope.to?.map((addr: any) => addr.address).join(', ') || '',
subject: foundMessage.envelope.subject || '(No subject)',
date: foundMessage.envelope.date?.toISOString() || new Date().toISOString(),
// Use the raw fields directly to avoid any complex processing
content: parsedEmail.html || parsedEmail.text || '',
textContent: parsedEmail.text || '',
rawContent: foundMessage.source?.toString() || '',
read: foundMessage.flags.has('\\Seen'),
starred: foundMessage.flags.has('\\Flagged'),
folder: folder,
hasAttachments: foundMessage.bodyStructure?.type === 'multipart',
attachments: parsedEmail.attachments || [],
flags: Array.from(foundMessage.flags),
headers: parsedEmail.headers || {},
// Include the raw email for debugging
_raw: rawEmail
};
// Log the structure of the email being returned
console.log('Returning email object with content structure:', {
id: fullEmail.id,
hasContent: !!fullEmail.content,
contentLength: fullEmail.content ? fullEmail.content.length : 0,
hasTextContent: !!fullEmail.textContent,
textContentLength: fullEmail.textContent ? fullEmail.textContent.length : 0
});
// 11. Mark as read if not already
if (!foundMessage.flags.has('\\Seen')) {
try {
// Use the same sequence range to mark message as read
for (let i = 1; i <= mailbox.exists; i += chunkSize) {
const endIdx = Math.min(i + chunkSize - 1, mailbox.exists);
const range = `${i}:${endIdx}`;
// Find message and mark as read
const messages = client.fetch(range, { uid: true });
for await (const message of messages) {
if (message.uid.toString() === id) {
await client.messageFlagsAdd(i.toString(), ['\\Seen']);
break;
}
}
}
} catch (error) {
console.error('Error marking message as read:', error);
}
}
// Deep clone and stringify the email object to ensure no circular references
const sanitizedEmail = JSON.parse(JSON.stringify(fullEmail));
// 12. Cache the email content
emailContentCache.set(cacheKey, sanitizedEmail);
// 13. Return the full email
return NextResponse.json(sanitizedEmail);
} finally {
// 14. Close the connection
try {
await client.logout();
} catch (e) {
console.error('Error during IMAP logout:', e);
}
}
} catch (error) {
console.error('Error fetching email:', error);
return NextResponse.json(
{ error: 'Failed to fetch email' },
{ status: 500 }
);
}
}

View File

@ -3,106 +3,28 @@ import { ImapFlow } from 'imapflow';
import { getServerSession } from 'next-auth'; import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route'; import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import { prisma } from '@/lib/prisma'; import { prisma } from '@/lib/prisma';
import { LRUCache } from 'lru-cache';
// Define types // Add caching for better performance
interface Email { const cache = new Map();
id: string;
from: string;
fromName?: string;
to: string;
subject: string;
date: string;
read: boolean;
starred: boolean;
folder: string;
hasAttachments: boolean;
flags: string[];
preview?: string | null;
}
interface CachedData { const getCachedEmail = (id: string) => cache.get(id);
emails: Email[]; const setCachedEmail = (id: string, email: Email) => cache.set(id, email);
folders: string[];
total: number;
hasMore: boolean;
page: number;
limit: number;
}
// Configure efficient caching with TTL - fix the type to allow any data // Add debouncing for folder changes
const emailCache = new LRUCache<string, any>({ const debouncedLoadEmails = debounce((folder: string) => {
max: 500, // Store up to 500 emails loadEmails(folder);
ttl: 1000 * 60 * 5, // Cache for 5 minutes }, 300);
});
// Simple in-memory cache for email content // Add infinite scroll
const emailContentCache = new LRUCache<string, any>({ const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
max: 100, const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
ttl: 1000 * 60 * 15, // 15 minutes if (scrollHeight - scrollTop === clientHeight) {
}); // Load more emails
// Keep IMAP connections per user with timeouts
const connectionPool = new Map<string, {
client: ImapFlow;
lastUsed: number;
}>();
// Clean up idle connections periodically
setInterval(() => {
const now = Date.now();
connectionPool.forEach((connection, userId) => {
if (now - connection.lastUsed > 1000 * 60 * 2) { // 2 minutes idle
connection.client.logout().catch(console.error);
connectionPool.delete(userId);
}
});
}, 60000); // Check every minute
// Get or create IMAP client for user
async function getImapClient(userId: string, credentials: any): Promise<ImapFlow> {
const existing = connectionPool.get(userId);
if (existing) {
existing.lastUsed = Date.now();
return existing.client;
} }
};
// Remove invalid options
const client = new ImapFlow({
host: credentials.host,
port: credentials.port,
secure: true,
auth: {
user: credentials.email,
pass: credentials.password,
},
logger: false,
emitLogs: false,
tls: {
rejectUnauthorized: false
},
disableAutoIdle: true
});
await client.connect();
connectionPool.set(userId, {
client,
lastUsed: Date.now()
});
return client;
}
// Generate cache key
function getCacheKey(userId: string, folder: string, page: number, limit: number): string {
return `${userId}:${folder}:${page}:${limit}`;
}
export async function GET(request: Request) { export async function GET(request: Request) {
try { try {
// 1. Authentication
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
if (!session?.user?.id) { if (!session?.user?.id) {
return NextResponse.json( return NextResponse.json(
@ -111,24 +33,7 @@ export async function GET(request: Request) {
); );
} }
// 2. Parse request parameters // Get credentials from database
const url = new URL(request.url);
const folder = url.searchParams.get('folder') || 'INBOX';
const page = parseInt(url.searchParams.get('page') || '1');
const limit = parseInt(url.searchParams.get('limit') || '20');
const preview = url.searchParams.get('preview') === 'true';
const forceRefresh = url.searchParams.get('refresh') === 'true';
// 3. Check cache first (unless refresh requested)
const cacheKey = getCacheKey(session.user.id, folder, page, limit);
if (!forceRefresh) {
const cachedData = emailCache.get(cacheKey);
if (cachedData) {
return NextResponse.json(cachedData);
}
}
// 4. Get credentials
const credentials = await prisma.mailCredentials.findUnique({ const credentials = await prisma.mailCredentials.findUnique({
where: { where: {
userId: session.user.id userId: session.user.id
@ -142,72 +47,73 @@ export async function GET(request: Request) {
); );
} }
// 5. Get IMAP client from pool (or create new) // Get query parameters
const client = await getImapClient(session.user.id, credentials); const url = new URL(request.url);
const folder = url.searchParams.get('folder') || 'INBOX';
try { const page = parseInt(url.searchParams.get('page') || '1');
// 6. Get mailboxes (with caching) const limit = parseInt(url.searchParams.get('limit') || '20');
let availableFolders: string[]; const preview = url.searchParams.get('preview') === 'true';
const foldersCacheKey = `folders:${session.user.id}`;
const cachedFolders = emailCache.get(foldersCacheKey); // Calculate start and end sequence numbers
const start = (page - 1) * limit + 1;
if (cachedFolders) { const end = start + limit - 1;
availableFolders = cachedFolders;
} else { // Connect to IMAP server
const mailboxes = await client.list(); const client = new ImapFlow({
availableFolders = mailboxes.map(box => box.path); host: credentials.host,
emailCache.set(foldersCacheKey, availableFolders); port: credentials.port,
secure: true,
auth: {
user: credentials.email,
pass: credentials.password,
},
logger: false,
emitLogs: false,
tls: {
rejectUnauthorized: false
} }
});
try {
await client.connect();
// 7. Open mailbox // Get list of all mailboxes first
const mailboxes = await client.list();
const availableFolders = mailboxes.map(box => box.path);
// Open the requested mailbox
const mailbox = await client.mailboxOpen(folder); const mailbox = await client.mailboxOpen(folder);
const result: Email[] = []; const result = [];
// 8. Fetch emails (if any exist)
// Define start and end variables HERE
let start = 1;
let end = 0;
// Only try to fetch if the mailbox has messages
if (mailbox.exists > 0) { if (mailbox.exists > 0) {
// Calculate range with boundaries // Adjust start and end to be within bounds
start = Math.min((page - 1) * limit + 1, mailbox.exists); const adjustedStart = Math.min(start, mailbox.exists);
end = Math.min(start + limit - 1, mailbox.exists); const adjustedEnd = Math.min(end, mailbox.exists);
// Use sequence numbers in descending order for newest first // Fetch both metadata and preview content
const range = `${mailbox.exists - end + 1}:${mailbox.exists - start + 1}`; const messages = await client.fetch(`${adjustedStart}:${adjustedEnd}`, {
// Fetch messages with optimized options
const options: any = {
envelope: true, envelope: true,
flags: true, flags: true,
bodyStructure: true bodyStructure: true,
}; // Only fetch preview content if requested
...(preview ? {
bodyParts: ['TEXT'],
bodyPartsOptions: {
TEXT: {
maxLength: 1000 // Limit preview length
}
}
} : {})
});
// Only fetch preview if requested
if (preview) {
options.bodyParts = ['TEXT', 'HTML'];
}
const messages = await client.fetch(range, options);
// Process messages
for await (const message of messages) { for await (const message of messages) {
// Extract preview content correctly result.push({
let previewContent = null; id: message.uid,
if (preview && message.bodyParts) {
// Try HTML first, then TEXT
const htmlPart = message.bodyParts.get('HTML');
const textPart = message.bodyParts.get('TEXT');
previewContent = htmlPart?.toString() || textPart?.toString() || null;
}
const email: Email = {
id: message.uid.toString(),
from: message.envelope.from?.[0]?.address || '', from: message.envelope.from?.[0]?.address || '',
fromName: message.envelope.from?.[0]?.name || fromName: message.envelope.from?.[0]?.name || message.envelope.from?.[0]?.address?.split('@')[0] || '',
message.envelope.from?.[0]?.address?.split('@')[0] || '', to: message.envelope.to?.map(addr => addr.address).join(', ') || '',
to: message.envelope.to?.map((addr: any) => addr.address).join(', ') || '',
subject: message.envelope.subject || '(No subject)', subject: message.envelope.subject || '(No subject)',
date: message.envelope.date?.toISOString() || new Date().toISOString(), date: message.envelope.date?.toISOString() || new Date().toISOString(),
read: message.flags.has('\\Seen'), read: message.flags.has('\\Seen'),
@ -215,31 +121,24 @@ export async function GET(request: Request) {
folder: mailbox.path, folder: mailbox.path,
hasAttachments: message.bodyStructure?.type === 'multipart', hasAttachments: message.bodyStructure?.type === 'multipart',
flags: Array.from(message.flags), flags: Array.from(message.flags),
preview: previewContent // Include preview content if available
}; preview: preview ? message.bodyParts?.TEXT?.toString() : null
});
result.push(email);
} }
} }
// 9. Prepare response data return NextResponse.json({
const responseData = {
emails: result, emails: result,
folders: availableFolders, folders: availableFolders,
total: mailbox.exists, total: mailbox.exists,
hasMore: end < mailbox.exists, hasMore: end < mailbox.exists
page, });
limit } finally {
}; try {
await client.logout();
// 10. Cache the results } catch (e) {
emailCache.set(cacheKey, responseData); console.error('Error during logout:', e);
}
return NextResponse.json(responseData);
} catch (error) {
// Connection error - remove from pool
connectionPool.delete(session.user.id);
throw error;
} }
} catch (error) { } catch (error) {
console.error('Error in courrier route:', error); console.error('Error in courrier route:', error);
@ -248,12 +147,4 @@ export async function GET(request: Request) {
{ status: 500 } { status: 500 }
); );
} }
} }
// Helper method to release connection when app shutting down
export async function cleanup() {
for (const [userId, connection] of connectionPool.entries()) {
await connection.client.logout().catch(console.error);
connectionPool.delete(userId);
}
}

View File

@ -1,7 +1,7 @@
import { NextResponse } from 'next/server'; import { NextResponse } from 'next/server';
import { getServerSession } from 'next-auth'; import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route'; import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import { prisma } from '@/lib/prisma'; import { getImapClient } from '@/lib/imap';
import { ImapFlow } from 'imapflow'; import { ImapFlow } from 'imapflow';
export async function POST(request: Request) { export async function POST(request: Request) {
@ -9,7 +9,7 @@ export async function POST(request: Request) {
try { try {
// Get the session and validate it // Get the session and validate it
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
console.log('Session:', session); console.log('Session:', session); // Debug log
if (!session?.user?.id) { if (!session?.user?.id) {
console.error('No session or user ID found'); console.error('No session or user ID found');
@ -21,7 +21,7 @@ export async function POST(request: Request) {
// Get the request body // Get the request body
const { emailId, isRead } = await request.json(); const { emailId, isRead } = await request.json();
console.log('Request body:', { emailId, isRead }); console.log('Request body:', { emailId, isRead }); // Debug log
if (!emailId || typeof isRead !== 'boolean') { if (!emailId || typeof isRead !== 'boolean') {
console.error('Invalid request parameters:', { emailId, isRead }); console.error('Invalid request parameters:', { emailId, isRead });
@ -34,99 +34,43 @@ export async function POST(request: Request) {
// Get the current folder from the request URL // Get the current folder from the request URL
const url = new URL(request.url); const url = new URL(request.url);
const folder = url.searchParams.get('folder') || 'INBOX'; const folder = url.searchParams.get('folder') || 'INBOX';
console.log('Folder:', folder); console.log('Folder:', folder); // Debug log
// Get credentials directly from database
const credentials = await prisma.mailCredentials.findUnique({
where: {
userId: session.user.id
}
});
if (!credentials) {
return NextResponse.json(
{ error: 'No mail credentials found. Please configure your email account.' },
{ status: 401 }
);
}
// Create IMAP client
client = new ImapFlow({
host: credentials.host,
port: credentials.port,
secure: true,
auth: {
user: credentials.email,
pass: credentials.password,
},
logger: false,
emitLogs: false,
tls: {
rejectUnauthorized: false
},
disableAutoIdle: true
});
try { try {
await client.connect(); // Initialize IMAP client with user credentials
client = await getImapClient();
// Open the mailbox if (!client) {
const mailbox = await client.mailboxOpen(folder); console.error('Failed to initialize IMAP client');
console.log(`Mailbox opened: ${folder}, total messages: ${mailbox.exists}`); return NextResponse.json(
{ error: 'Failed to initialize email client' },
// Scan through messages in chunks to find the one with the right UID { status: 500 }
let foundMessage = false; );
const chunkSize = 10;
for (let i = 1; i <= mailbox.exists; i += chunkSize) {
const endIdx = Math.min(i + chunkSize - 1, mailbox.exists);
const range = `${i}:${endIdx}`;
console.log(`Scanning messages ${range} to find UID ${emailId}`);
// Fetch messages in chunks with UID
const messages = client.fetch(range, {
uid: true,
flags: true
});
for await (const message of messages) {
if (message.uid.toString() === emailId) {
console.log(`Found matching message with UID ${emailId}`);
// Get the sequence number (i is the start of the range)
const seqNum = i + message.seq - 1;
console.log(`Message sequence number: ${seqNum}`);
// Update the flags based on the isRead parameter
if (isRead && !message.flags.has('\\Seen')) {
console.log(`Marking message ${emailId} as read`);
await client.messageFlagsAdd(seqNum.toString(), ['\\Seen']);
} else if (!isRead && message.flags.has('\\Seen')) {
console.log(`Marking message ${emailId} as unread`);
await client.messageFlagsRemove(seqNum.toString(), ['\\Seen']);
} else {
console.log(`Message ${emailId} already has the correct read status`);
}
foundMessage = true;
break;
}
}
if (foundMessage) {
break;
}
} }
if (!foundMessage) { await client.connect();
console.error(`Email with UID ${emailId} not found`); await client.mailboxOpen(folder);
// Fetch the email to get its UID
const message = await client.fetchOne(emailId.toString(), {
uid: true,
flags: true
});
if (!message) {
console.error('Email not found:', emailId);
return NextResponse.json( return NextResponse.json(
{ error: 'Email not found' }, { error: 'Email not found' },
{ status: 404 } { status: 404 }
); );
} }
// Update the flags
if (isRead) {
await client.messageFlagsAdd(message.uid.toString(), ['\\Seen'], { uid: true });
} else {
await client.messageFlagsRemove(message.uid.toString(), ['\\Seen'], { uid: true });
}
return NextResponse.json({ success: true }); return NextResponse.json({ success: true });
} finally { } finally {
if (client) { if (client) {

View File

@ -49,8 +49,6 @@ export interface Email {
subject: string; subject: string;
content: string; content: string;
body?: string; // For backward compatibility body?: string; // For backward compatibility
textContent?: string;
rawContent?: string; // Raw email content for fallback display
date: string; date: string;
read: boolean; read: boolean;
starred: boolean; starred: boolean;
@ -101,147 +99,90 @@ function splitEmailHeadersAndBody(emailBody: string): { headers: string; body: s
} }
function EmailContent({ email }: { email: Email }) { function EmailContent({ email }: { email: Email }) {
// Improved debugging with more details const [content, setContent] = useState<React.ReactNode>(null);
console.log("EmailContent rendering with EMAIL OBJECT:", email); const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
// Check if we have a raw object with content
const rawEmail = (email as any)._raw;
if (rawEmail) {
console.log("Found _raw email field:", rawEmail);
}
console.log("Content details:", {
hasContent: Boolean(email.content),
contentLength: email.content?.length || 0,
contentType: typeof email.content,
hasTextContent: Boolean(email.textContent),
textContentLength: email.textContent?.length || 0,
textContentType: typeof email.textContent,
hasRawContent: Boolean(email.rawContent),
rawContentLength: email.rawContent?.length || 0,
hasBody: Boolean(email.body),
bodyLength: email.body?.length || 0,
hasRawHtml: Boolean(rawEmail?.html),
rawHtmlLength: rawEmail?.html?.length || 0,
hasRawText: Boolean(rawEmail?.text),
rawTextLength: rawEmail?.text?.length || 0
});
// Use state to track if we've rendered content useEffect(() => {
const [renderedContent, setRenderedContent] = useState<boolean>(false); let mounted = true;
// Special handling for potential nested content structure async function loadContent() {
const content = typeof email.content === 'object' if (!email) return;
? JSON.stringify(email.content)
: email.content; setIsLoading(true);
try {
const textContent = typeof email.textContent === 'object' if (!email.content) {
? JSON.stringify(email.textContent) if (mounted) {
: email.textContent; setContent(<div className="text-gray-500">No content available</div>);
setIsLoading(false);
const rawContent = typeof email.rawContent === 'object' }
? JSON.stringify(email.rawContent) return;
: email.rawContent; }
const body = typeof email.body === 'object' const formattedEmail = email.content.trim();
? JSON.stringify(email.body) if (!formattedEmail) {
: email.body; if (mounted) {
setContent(<div className="text-gray-500">No content available</div>);
// Also try to get content from the _raw field if it exists setIsLoading(false);
const rawHtml = rawEmail?.html || ''; }
const rawText = rawEmail?.text || ''; return;
}
// Use a more defensive approach with content
const hasContent = content !== undefined && content !== null && content.trim() !== ''; const parsedEmail = await decodeEmail(formattedEmail);
const hasTextContent = textContent !== undefined && textContent !== null && textContent.trim() !== '';
const hasRawContent = rawContent !== undefined && rawContent !== null && rawContent.trim() !== ''; if (mounted) {
const hasBody = body !== undefined && body !== null && body.trim() !== ''; if (parsedEmail.html) {
const hasRawHtml = rawHtml !== undefined && rawHtml !== null && rawHtml.trim() !== ''; setContent(
const hasRawText = rawText !== undefined && rawText !== null && rawText.trim() !== ''; <div
className="email-content prose prose-sm max-w-none dark:prose-invert"
// Try raw text first (most reliable format) dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(parsedEmail.html) }}
if (hasRawText && !renderedContent) { />
setRenderedContent(true); );
} else if (parsedEmail.text) {
setContent(
<div className="email-content whitespace-pre-wrap">
{parsedEmail.text}
</div>
);
} else {
setContent(<div className="text-gray-500">No content available</div>);
}
setError(null);
setIsLoading(false);
}
} catch (err) {
console.error('Error rendering email content:', err);
if (mounted) {
setError('Error rendering email content. Please try again.');
setContent(null);
setIsLoading(false);
}
}
}
loadContent();
return () => {
mounted = false;
};
}, [email?.content]);
if (isLoading) {
return ( return (
<div className="email-content whitespace-pre-wrap"> <div className="flex items-center justify-center py-8">
{rawText} <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
</div> </div>
); );
} }
// Try raw HTML if (error) {
if (hasRawHtml && !renderedContent) { return <div className="text-red-500">{error}</div>;
setRenderedContent(true);
return (
<div
className="email-content prose prose-sm max-w-none dark:prose-invert"
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHtml) }}
/>
);
} }
// If textContent is available, render it directly return content || <div className="text-gray-500">No content available</div>;
if (hasTextContent && !renderedContent) {
setRenderedContent(true);
return (
<div className="email-content whitespace-pre-wrap">
{textContent}
</div>
);
}
// If html content is available, render it directly
if (hasContent && !renderedContent) {
setRenderedContent(true);
return (
<div
className="email-content prose prose-sm max-w-none dark:prose-invert"
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }}
/>
);
}
// Try body field (backward compatibility)
if (hasBody && !renderedContent) {
setRenderedContent(true);
return (
<div
className="email-content prose prose-sm max-w-none dark:prose-invert"
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(body) }}
/>
);
}
// Fallback to raw content if available
if (hasRawContent && !renderedContent) {
setRenderedContent(true);
return (
<div className="email-content whitespace-pre-wrap text-sm bg-gray-50 p-3 rounded">
{rawContent}
</div>
);
}
// Last resort - show a better error message with debugging info
return (
<div className="text-gray-500">
<p>No content available</p>
<div className="mt-2 p-2 bg-red-50 text-red-700 text-xs rounded">
<p>Content flags:</p>
<p>- Has content: {hasContent ? 'Yes' : 'No'} (type: {typeof email.content})</p>
<p>- Has text content: {hasTextContent ? 'Yes' : 'No'} (type: {typeof email.textContent})</p>
<p>- Has raw content: {hasRawContent ? 'Yes' : 'No'} (type: {typeof email.rawContent})</p>
<p>- Has body: {hasBody ? 'Yes' : 'No'} (type: {typeof email.body})</p>
<p>- Has raw HTML: {hasRawHtml ? 'Yes' : 'No'}</p>
<p>- Has raw text: {hasRawText ? 'Yes' : 'No'}</p>
</div>
</div>
);
} }
function renderEmailContent(email: Email) { function renderEmailContent(email: Email) {
if (!email) return <div className="text-gray-500">No email selected</div>;
return <EmailContent email={email} />; return <EmailContent email={email} />;
} }
@ -536,7 +477,6 @@ export default function CourrierPage() {
content: string; content: string;
type: 'reply' | 'reply-all' | 'forward'; type: 'reply' | 'reply-all' | 'forward';
} | null>(null); } | null>(null);
const [selectEmailLoading, setSelectEmailLoading] = useState(false);
// Debug logging for email distribution // Debug logging for email distribution
useEffect(() => { useEffect(() => {
@ -680,89 +620,60 @@ export default function CourrierPage() {
return account ? account.color : 'bg-gray-500'; return account ? account.color : 'bg-gray-500';
}; };
// Update handleEmailSelect to set selectedEmail correctly and improve error handling // Update handleEmailSelect to set selectedEmail correctly
const handleEmailSelect = async (emailId: string) => { const handleEmailSelect = async (emailId: string) => {
try { try {
// Set a provisional selected email immediately for better UX // Make sure it's using this:
const initialEmail = emails.find((e) => e.id === emailId) || null; const response = await fetch(`/api/courrier/${emailId}`);
setSelectedEmail(initialEmail);
setSelectEmailLoading(true);
console.log(`Fetching email ${emailId} from folder ${currentView}`);
const response = await fetch(`/api/courrier/${emailId}?folder=${currentView}`);
if (!response.ok) { if (!response.ok) {
console.error(`Error fetching email: ${response.status} ${response.statusText}`); throw new Error('Failed to fetch full email content');
setSelectEmailLoading(false);
return;
} }
// Get the raw JSON string first to log it exactly as received const fullEmail = await response.json();
const rawJsonText = await response.text();
console.log("Raw API response text:", rawJsonText);
// Then parse it // Update the email in the list and selected email with full content
let fullEmail; setEmails(prevEmails => prevEmails.map(email =>
email.id === emailId
? { ...email, content: fullEmail.content || fullEmail.body || email.content }
: email
));
setSelectedEmail(prev => prev ? {
...prev,
content: fullEmail.content || fullEmail.body || prev.content
} : prev);
// Try to mark as read in the background
try { try {
fullEmail = JSON.parse(rawJsonText); const markReadResponse = await fetch(`/api/mail/mark-read`, {
console.log("Parsed JSON API response:", fullEmail); method: 'POST',
} catch (jsonError) { headers: {
console.error("Error parsing JSON response:", jsonError); 'Content-Type': 'application/json',
setSelectEmailLoading(false); },
return; body: JSON.stringify({
} emailId,
isRead: true,
// Create a clean, processed version of the email ensuring all necessary fields exist }),
const processedEmail = {
...fullEmail,
id: fullEmail.id || emailId,
content: typeof fullEmail.content === 'string' ? fullEmail.content : '',
textContent: typeof fullEmail.textContent === 'string' ? fullEmail.textContent : '',
rawContent: typeof fullEmail.rawContent === 'string' ? fullEmail.rawContent : '',
body: typeof fullEmail.body === 'string' ? fullEmail.body : '',
from: fullEmail.from || initialEmail?.from || '',
fromName: fullEmail.fromName || initialEmail?.fromName || '',
to: fullEmail.to || initialEmail?.to || '',
subject: fullEmail.subject || initialEmail?.subject || '(No subject)',
date: fullEmail.date || initialEmail?.date || new Date().toISOString(),
read: fullEmail.read !== undefined ? fullEmail.read : true,
folder: fullEmail.folder || currentView
};
console.log("Processed email for UI:", {
...processedEmail,
contentLength: processedEmail.content.length,
textContentLength: processedEmail.textContent.length,
rawContentLength: processedEmail.rawContent.length
});
// Set the selected email with complete information
setSelectedEmail(processedEmail);
// Update the email in the list to mark it as read
setEmails((prevEmails) =>
prevEmails.map((email) =>
email.id === emailId ? { ...email, read: true } : email
)
);
// Try to mark the email as read in the background
try {
const markReadResponse = await fetch(`/api/mail/mark-read?id=${emailId}&folder=${currentView}`, {
method: "POST",
}); });
if (!markReadResponse.ok) { if (markReadResponse.ok) {
console.error(`Error marking email as read: ${markReadResponse.status} ${markReadResponse.statusText}`); // 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 (markReadError) { } catch (error) {
console.error("Error calling mark-read API:", markReadError); console.error('Error marking email as read:', error);
} }
setSelectEmailLoading(false);
} catch (error) { } catch (error) {
console.error("Error in handleEmailSelect:", error); console.error('Error fetching email:', error);
setSelectEmailLoading(false);
} }
}; };
@ -1124,60 +1035,7 @@ export default function CourrierPage() {
</div> </div>
</div> </div>
{/* Email status message */}
<p className="text-xs text-blue-600 mb-4">
Viewing message from: {selectedEmail.from} {new Date(selectedEmail.date).toLocaleString()}
</p>
{/* Direct content display for debugging */}
<div className="mb-4 p-3 border border-blue-100 rounded-md bg-blue-50">
<div className="flex justify-between items-center mb-2">
<h4 className="text-xs font-medium text-blue-800">Direct Content Preview</h4>
</div>
<div className="text-xs overflow-auto max-h-[300px]">
<strong>Content:</strong> {selectedEmail.content
? <div className="mt-1 p-1 bg-white/80 rounded overflow-auto max-h-[100px]">
<p>Type: {typeof selectedEmail.content}</p>
<p>Value: {typeof selectedEmail.content === 'object'
? JSON.stringify(selectedEmail.content)
: selectedEmail.content.substring(0, 500)}...</p>
</div>
: 'Empty'}<br/>
<strong>Text Content:</strong> {selectedEmail.textContent
? <div className="mt-1 p-1 bg-white/80 rounded overflow-auto max-h-[100px]">
<p>Type: {typeof selectedEmail.textContent}</p>
<p>Value: {typeof selectedEmail.textContent === 'object'
? JSON.stringify(selectedEmail.textContent)
: selectedEmail.textContent.substring(0, 500)}...</p>
</div>
: 'Empty'}<br/>
<strong>Raw Content:</strong> {selectedEmail.rawContent
? <div className="mt-1 p-1 bg-white/80 rounded overflow-auto max-h-[100px]">
<p>Type: {typeof selectedEmail.rawContent}</p>
<p>Value: {typeof selectedEmail.rawContent === 'object'
? JSON.stringify(selectedEmail.rawContent)
: selectedEmail.rawContent.substring(0, 500)}...</p>
</div>
: 'Empty'}<br/>
{(selectedEmail as any)._raw && (
<>
<strong>Raw Email Fields:</strong>
<div className="mt-1 p-1 bg-white/80 rounded overflow-auto max-h-[100px]">
<p><strong>HTML:</strong> {(selectedEmail as any)._raw.html
? `${(selectedEmail as any)._raw.html.substring(0, 200)}...`
: 'Empty'}</p>
<p><strong>Text:</strong> {(selectedEmail as any)._raw.text
? `${(selectedEmail as any)._raw.text.substring(0, 200)}...`
: 'Empty'}</p>
</div>
</>
)}
</div>
</div>
<div className="prose max-w-none"> <div className="prose max-w-none">
{/* Go back to using the original renderEmailContent function */}
{renderEmailContent(selectedEmail)} {renderEmailContent(selectedEmail)}
</div> </div>
</ScrollArea> </ScrollArea>

View File

@ -1,8 +1,6 @@
import { simpleParser } from 'mailparser'; import { simpleParser } from 'mailparser';
function cleanHtml(html: string | null | undefined): string { function cleanHtml(html: string): string {
if (!html) return '';
try { try {
// Basic HTML cleaning without DOMPurify // Basic HTML cleaning without DOMPurify
return html return html
@ -19,7 +17,7 @@ function cleanHtml(html: string | null | undefined): string {
.trim(); .trim();
} catch (error) { } catch (error) {
console.error('Error cleaning HTML:', error); console.error('Error cleaning HTML:', error);
return html || ''; return html;
} }
} }
@ -33,25 +31,8 @@ function getAddressText(address: any): string | null {
export async function parseEmail(emailContent: string) { export async function parseEmail(emailContent: string) {
try { try {
// Add debug logging for the raw content length
console.log(`Starting to parse email content (length: ${emailContent ? emailContent.length : 0})`);
const parsed = await simpleParser(emailContent); const parsed = await simpleParser(emailContent);
// Add debug logging for the parsed content
console.log('Parsed email fields:', {
hasSubject: !!parsed.subject,
hasHtml: !!parsed.html,
htmlLength: parsed.html?.length || 0,
hasText: !!parsed.text,
textLength: parsed.text?.length || 0,
attachmentsCount: parsed.attachments?.length || 0,
});
// Clean the HTML content if it exists
const cleanedHtml = parsed.html ? cleanHtml(parsed.html) : null;
// Return a properly structured object with all fields explicitly specified
return { return {
subject: parsed.subject || null, subject: parsed.subject || null,
from: getAddressText(parsed.from), from: getAddressText(parsed.from),
@ -59,7 +40,7 @@ export async function parseEmail(emailContent: string) {
cc: getAddressText(parsed.cc), cc: getAddressText(parsed.cc),
bcc: getAddressText(parsed.bcc), bcc: getAddressText(parsed.bcc),
date: parsed.date || null, date: parsed.date || null,
html: cleanedHtml, html: parsed.html ? cleanHtml(parsed.html) : null,
text: parsed.text || null, text: parsed.text || null,
attachments: parsed.attachments || [], attachments: parsed.attachments || [],
headers: Object.fromEntries(parsed.headers) headers: Object.fromEntries(parsed.headers)