570 lines
20 KiB
TypeScript
570 lines
20 KiB
TypeScript
'use client';
|
|
|
|
import { useRef, useEffect, useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Paperclip, X } from 'lucide-react';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { decodeComposeContent, encodeComposeContent } from '@/lib/compose-mime-decoder';
|
|
import { Email } from '@/app/courrier/page';
|
|
import mime from 'mime';
|
|
import { simpleParser } from 'mailparser';
|
|
import { decodeEmail, cleanHtml } from '@/lib/mail-parser-wrapper';
|
|
import DOMPurify from 'dompurify';
|
|
|
|
interface ComposeEmailProps {
|
|
showCompose: boolean;
|
|
setShowCompose: (show: boolean) => void;
|
|
composeTo: string;
|
|
setComposeTo: (to: string) => void;
|
|
composeCc: string;
|
|
setComposeCc: (cc: string) => void;
|
|
composeBcc: string;
|
|
setComposeBcc: (bcc: string) => void;
|
|
composeSubject: string;
|
|
setComposeSubject: (subject: string) => void;
|
|
composeBody: string;
|
|
setComposeBody: (body: string) => void;
|
|
showCc: boolean;
|
|
setShowCc: (show: boolean) => void;
|
|
showBcc: boolean;
|
|
setShowBcc: (show: boolean) => void;
|
|
attachments: any[];
|
|
setAttachments: (attachments: any[]) => void;
|
|
handleSend: () => Promise<void>;
|
|
originalEmail?: {
|
|
content: string;
|
|
type: 'reply' | 'reply-all' | 'forward';
|
|
};
|
|
onSend: (email: Email) => void;
|
|
onCancel: () => void;
|
|
onBodyChange?: (body: string) => void;
|
|
initialTo?: string;
|
|
initialSubject?: string;
|
|
initialBody?: string;
|
|
initialCc?: string;
|
|
initialBcc?: string;
|
|
replyTo?: Email | null;
|
|
forwardFrom?: Email | null;
|
|
}
|
|
|
|
export default function ComposeEmail({
|
|
showCompose,
|
|
setShowCompose,
|
|
composeTo,
|
|
setComposeTo,
|
|
composeCc,
|
|
setComposeCc,
|
|
composeBcc,
|
|
setComposeBcc,
|
|
composeSubject,
|
|
setComposeSubject,
|
|
composeBody,
|
|
setComposeBody,
|
|
showCc,
|
|
setShowCc,
|
|
showBcc,
|
|
setShowBcc,
|
|
attachments,
|
|
setAttachments,
|
|
handleSend,
|
|
originalEmail,
|
|
onSend,
|
|
onCancel,
|
|
onBodyChange,
|
|
initialTo,
|
|
initialSubject,
|
|
initialBody,
|
|
initialCc,
|
|
initialBcc,
|
|
replyTo,
|
|
forwardFrom
|
|
}: ComposeEmailProps) {
|
|
const composeBodyRef = useRef<HTMLDivElement>(null);
|
|
const [localContent, setLocalContent] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (replyTo || forwardFrom) {
|
|
const initializeContent = async () => {
|
|
if (!composeBodyRef.current) return;
|
|
|
|
try {
|
|
const emailToProcess = replyTo || forwardFrom;
|
|
console.log('[DEBUG] Initializing compose content with email:',
|
|
emailToProcess ? {
|
|
id: emailToProcess.id,
|
|
subject: emailToProcess.subject,
|
|
hasContent: !!emailToProcess.content,
|
|
contentLength: emailToProcess.content ? emailToProcess.content.length : 0,
|
|
preview: emailToProcess.preview
|
|
} : 'null'
|
|
);
|
|
|
|
// Set initial loading state
|
|
composeBodyRef.current.innerHTML = `
|
|
<div class="compose-area" contenteditable="true">
|
|
<br/>
|
|
<div class="text-gray-500">Loading original message...</div>
|
|
</div>
|
|
`;
|
|
|
|
setIsLoading(true);
|
|
|
|
// Check if email object exists
|
|
if (!emailToProcess) {
|
|
console.error('[DEBUG] No email to process for reply/forward');
|
|
composeBodyRef.current.innerHTML = `
|
|
<div class="compose-area" contenteditable="true">
|
|
<br/>
|
|
<div style="color: #ef4444;">No email selected for reply/forward.</div>
|
|
</div>
|
|
`;
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Check if we need to fetch full content first
|
|
if (!emailToProcess.content || emailToProcess.content.length === 0) {
|
|
console.log('[DEBUG] Need to fetch content before composing reply/forward');
|
|
|
|
try {
|
|
const response = await fetch(`/api/courrier/${emailToProcess.id}?folder=${encodeURIComponent(emailToProcess.folder || 'INBOX')}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch email content: ${response.status}`);
|
|
}
|
|
|
|
const fullContent = await response.json();
|
|
|
|
// Update the email content with the fetched full content
|
|
emailToProcess.content = fullContent.content;
|
|
emailToProcess.contentFetched = true;
|
|
|
|
console.log('[DEBUG] Successfully fetched content for reply/forward');
|
|
} catch (error) {
|
|
console.error('[DEBUG] Error fetching content for reply:', error);
|
|
composeBodyRef.current.innerHTML = `
|
|
<div class="compose-area" contenteditable="true">
|
|
<br/>
|
|
<div style="color: #ef4444;">Failed to load email content. Please try again.</div>
|
|
</div>
|
|
`;
|
|
setIsLoading(false);
|
|
return; // Exit if we couldn't get the content
|
|
}
|
|
}
|
|
|
|
// Parse the original email using the API
|
|
const response = await fetch('/api/parse-email', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ email: emailToProcess.content }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to parse email: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log('[DEBUG] Parsed email data:', {
|
|
hasHtml: !!data.html,
|
|
hasText: !!data.text,
|
|
from: data.from,
|
|
subject: data.subject
|
|
});
|
|
|
|
const emailContent = data.html || data.text || '';
|
|
|
|
// Format the reply/forward content
|
|
const quotedContent = forwardFrom ? `
|
|
<div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
|
|
---------- Forwarded message ---------<br/>
|
|
From: ${emailToProcess.from}<br/>
|
|
Date: ${new Date(emailToProcess.date).toLocaleString()}<br/>
|
|
Subject: ${emailToProcess.subject}<br/>
|
|
To: ${emailToProcess.to}<br/>
|
|
${emailToProcess.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''}
|
|
</div>
|
|
<div style="margin-top: 10px; color: #374151;">
|
|
${emailContent}
|
|
</div>
|
|
` : `
|
|
<div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
|
|
On ${new Date(emailToProcess.date).toLocaleString()}, ${emailToProcess.from} wrote:
|
|
</div>
|
|
<blockquote style="margin: 10px 0 0 10px; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #374151;">
|
|
${emailContent}
|
|
</blockquote>
|
|
`;
|
|
|
|
// Set the content in the compose area with proper structure
|
|
const formattedContent = `
|
|
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
|
|
<div style="min-height: 20px;"><br/></div>
|
|
${quotedContent}
|
|
</div>
|
|
`;
|
|
|
|
if (composeBodyRef.current) {
|
|
composeBodyRef.current.innerHTML = formattedContent;
|
|
|
|
// Place cursor at the beginning before the quoted content
|
|
const selection = window.getSelection();
|
|
const range = document.createRange();
|
|
const firstDiv = composeBodyRef.current.querySelector('div[style*="min-height: 20px;"]');
|
|
if (firstDiv) {
|
|
range.setStart(firstDiv, 0);
|
|
range.collapse(true);
|
|
selection?.removeAllRanges();
|
|
selection?.addRange(range);
|
|
(firstDiv as HTMLElement).focus();
|
|
}
|
|
|
|
// Update compose state
|
|
setComposeBody(formattedContent);
|
|
setLocalContent(formattedContent);
|
|
console.log('[DEBUG] Successfully set compose content');
|
|
}
|
|
} catch (error) {
|
|
console.error('[DEBUG] Error initializing compose content:', error);
|
|
if (composeBodyRef.current) {
|
|
const errorContent = `
|
|
<div class="compose-area" contenteditable="true">
|
|
<br/>
|
|
<div style="color: #ef4444;">Error loading original message.</div>
|
|
<div style="color: #64748b; font-size: 0.875rem; margin-top: 0.5rem;">
|
|
Technical details: ${error instanceof Error ? error.message : 'Unknown error'}
|
|
</div>
|
|
</div>
|
|
`;
|
|
composeBodyRef.current.innerHTML = errorContent;
|
|
setComposeBody(errorContent);
|
|
setLocalContent(errorContent);
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
initializeContent();
|
|
}
|
|
}, [replyTo, forwardFrom, setComposeBody]);
|
|
|
|
const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
|
|
if (!e.currentTarget) return;
|
|
const content = e.currentTarget.innerHTML;
|
|
if (!content.trim()) {
|
|
setLocalContent('');
|
|
setComposeBody('');
|
|
} else {
|
|
setLocalContent(content);
|
|
setComposeBody(content);
|
|
}
|
|
|
|
if (onBodyChange) {
|
|
onBodyChange(content);
|
|
}
|
|
|
|
// Ensure scrolling and cursor behavior works after edits
|
|
const messageContentDivs = e.currentTarget.querySelectorAll('.message-content');
|
|
messageContentDivs.forEach(div => {
|
|
// Make sure the div remains scrollable after input events
|
|
(div as HTMLElement).style.maxHeight = '300px';
|
|
(div as HTMLElement).style.overflowY = 'auto';
|
|
(div as HTMLElement).style.border = '1px solid #e5e7eb';
|
|
(div as HTMLElement).style.borderRadius = '4px';
|
|
(div as HTMLElement).style.padding = '10px';
|
|
|
|
// Ensure wheel events are properly handled
|
|
if (!(div as HTMLElement).hasAttribute('data-scroll-handler-attached')) {
|
|
div.addEventListener('wheel', (e: Event) => {
|
|
const wheelEvent = e as WheelEvent;
|
|
const target = e.currentTarget as HTMLElement;
|
|
|
|
// Check if we're at the boundary of the scrollable area
|
|
const isAtBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 1;
|
|
const isAtTop = target.scrollTop <= 0;
|
|
|
|
// Only prevent default if we're not at the boundaries in the direction of scrolling
|
|
if ((wheelEvent.deltaY > 0 && !isAtBottom) || (wheelEvent.deltaY < 0 && !isAtTop)) {
|
|
e.stopPropagation();
|
|
e.preventDefault(); // Prevent the parent container from scrolling
|
|
}
|
|
}, { passive: false });
|
|
|
|
// Mark this element as having a scroll handler attached
|
|
(div as HTMLElement).setAttribute('data-scroll-handler-attached', 'true');
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleSendEmail = async () => {
|
|
if (!composeBodyRef.current) return;
|
|
|
|
const composeArea = composeBodyRef.current.querySelector('.compose-area');
|
|
if (!composeArea) return;
|
|
|
|
const content = composeArea.innerHTML;
|
|
if (!content.trim()) {
|
|
console.error('Email content is empty');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const encodedContent = await encodeComposeContent(content);
|
|
setComposeBody(encodedContent);
|
|
await handleSend();
|
|
setShowCompose(false);
|
|
} catch (error) {
|
|
console.error('Error sending email:', error);
|
|
}
|
|
};
|
|
|
|
const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (!e.target.files) return;
|
|
|
|
const newAttachments: any[] = [];
|
|
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<string>((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 focus handling for better UX
|
|
const handleComposeAreaClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
// If the click is directly on the compose area and not on any child element
|
|
if (e.target === e.currentTarget) {
|
|
// Find the cursor position element
|
|
const cursorPosition = e.currentTarget.querySelector('.cursor-position');
|
|
if (cursorPosition) {
|
|
// Focus the cursor position element
|
|
(cursorPosition as HTMLElement).focus();
|
|
|
|
// Set cursor at the beginning
|
|
const selection = window.getSelection();
|
|
const range = document.createRange();
|
|
range.setStart(cursorPosition, 0);
|
|
range.collapse(true);
|
|
selection?.removeAllRanges();
|
|
selection?.addRange(range);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Add formatDate function to match Panel 3 exactly
|
|
function formatDate(date: Date | null): string {
|
|
if (!date) return '';
|
|
return new Intl.DateTimeFormat('fr-FR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}).format(date);
|
|
}
|
|
|
|
if (!showCompose) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
|
<div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
|
{/* Modal Header */}
|
|
<div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
|
<h3 className="text-lg font-semibold text-gray-900">
|
|
{replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
|
|
</h3>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="hover:bg-gray-100 rounded-full"
|
|
onClick={onCancel}
|
|
>
|
|
<X className="h-5 w-5 text-gray-500" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Modal Body */}
|
|
<div className="flex-1 overflow-hidden">
|
|
<div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
|
|
{/* To Field */}
|
|
<div className="flex-none">
|
|
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
|
|
<Input
|
|
id="to"
|
|
value={composeTo}
|
|
onChange={(e) => setComposeTo(e.target.value)}
|
|
placeholder="recipient@example.com"
|
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
/>
|
|
</div>
|
|
|
|
{/* CC/BCC Toggle Buttons */}
|
|
<div className="flex-none flex items-center gap-4">
|
|
<button
|
|
type="button"
|
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
onClick={() => setShowCc(!showCc)}
|
|
>
|
|
{showCc ? 'Hide Cc' : 'Add Cc'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
onClick={() => setShowBcc(!showBcc)}
|
|
>
|
|
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* CC Field */}
|
|
{showCc && (
|
|
<div className="flex-none">
|
|
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
|
|
<Input
|
|
id="cc"
|
|
value={composeCc}
|
|
onChange={(e) => setComposeCc(e.target.value)}
|
|
placeholder="cc@example.com"
|
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* BCC Field */}
|
|
{showBcc && (
|
|
<div className="flex-none">
|
|
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
|
|
<Input
|
|
id="bcc"
|
|
value={composeBcc}
|
|
onChange={(e) => setComposeBcc(e.target.value)}
|
|
placeholder="bcc@example.com"
|
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Subject Field */}
|
|
<div className="flex-none">
|
|
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
|
|
<Input
|
|
id="subject"
|
|
value={composeSubject}
|
|
onChange={(e) => setComposeSubject(e.target.value)}
|
|
placeholder="Enter subject"
|
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
/>
|
|
</div>
|
|
|
|
{/* Message Body */}
|
|
<div className="flex-1 min-h-[200px] flex flex-col">
|
|
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
|
|
<div
|
|
ref={composeBodyRef}
|
|
contentEditable="true"
|
|
onInput={handleInput}
|
|
onClick={handleComposeAreaClick}
|
|
className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-black overflow-y-auto focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
style={{
|
|
direction: 'ltr',
|
|
maxHeight: 'calc(100vh - 400px)',
|
|
minHeight: '200px',
|
|
overflowY: 'auto',
|
|
scrollbarWidth: 'thin',
|
|
scrollbarColor: '#cbd5e0 #f3f4f6',
|
|
cursor: 'text'
|
|
}}
|
|
dir="ltr"
|
|
spellCheck="true"
|
|
role="textbox"
|
|
aria-multiline="true"
|
|
tabIndex={0}
|
|
suppressContentEditableWarning={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal Footer */}
|
|
<div className="flex-none flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
|
|
<div className="flex items-center gap-2">
|
|
{/* File Input for Attachments */}
|
|
<input
|
|
type="file"
|
|
id="file-attachment"
|
|
className="hidden"
|
|
multiple
|
|
onChange={handleFileAttachment}
|
|
/>
|
|
<label htmlFor="file-attachment">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
document.getElementById('file-attachment')?.click();
|
|
}}
|
|
>
|
|
<Paperclip className="h-4 w-4 text-gray-600" />
|
|
</Button>
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Button
|
|
variant="ghost"
|
|
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
|
|
onClick={onCancel}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
className="bg-blue-600 text-white hover:bg-blue-700"
|
|
onClick={handleSendEmail}
|
|
>
|
|
Send
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |