420 lines
13 KiB
TypeScript
420 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
import {
|
|
X, Paperclip, SendHorizontal, Loader2, Plus
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import DOMPurify from 'isomorphic-dompurify';
|
|
|
|
// Import from the centralized utils
|
|
import {
|
|
formatReplyEmail,
|
|
formatForwardedEmail
|
|
} from '@/lib/utils/email-utils';
|
|
import { EmailMessage } from '@/types/email';
|
|
|
|
/**
|
|
* Email composer component
|
|
* Handles new emails, replies, and forwards with a clean UI
|
|
*/
|
|
interface ComposeEmailProps {
|
|
initialEmail?: EmailMessage | null;
|
|
type?: 'new' | 'reply' | 'reply-all' | 'forward';
|
|
onClose: () => void;
|
|
onSend: (emailData: {
|
|
to: string;
|
|
cc?: string;
|
|
bcc?: string;
|
|
subject: string;
|
|
body: string;
|
|
attachments?: Array<{
|
|
name: string;
|
|
content: string;
|
|
type: string;
|
|
}>;
|
|
}) => Promise<void>;
|
|
}
|
|
|
|
export default function ComposeEmail(props: ComposeEmailProps) {
|
|
const { initialEmail, type = 'new', onClose, onSend } = props;
|
|
|
|
// Email form state
|
|
const [to, setTo] = useState<string>('');
|
|
const [cc, setCc] = useState<string>('');
|
|
const [bcc, setBcc] = useState<string>('');
|
|
const [subject, setSubject] = useState<string>('');
|
|
const [emailContent, setEmailContent] = useState<string>('');
|
|
const [showCc, setShowCc] = useState<boolean>(false);
|
|
const [showBcc, setShowBcc] = useState<boolean>(false);
|
|
const [sending, setSending] = useState<boolean>(false);
|
|
const [attachments, setAttachments] = useState<Array<{
|
|
name: string;
|
|
content: string;
|
|
type: string;
|
|
}>>([]);
|
|
|
|
const editorRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Initialize the form when replying to or forwarding an email
|
|
useEffect(() => {
|
|
if (initialEmail && type !== 'new') {
|
|
try {
|
|
// Set recipients based on type
|
|
if (type === 'reply' || type === 'reply-all') {
|
|
// Get formatted data for reply
|
|
const formatted = formatReplyEmail(initialEmail, type);
|
|
|
|
// Set the recipients
|
|
setTo(formatted.to);
|
|
if (formatted.cc) {
|
|
setCc(formatted.cc);
|
|
setShowCc(true);
|
|
}
|
|
|
|
// Set subject
|
|
setSubject(formatted.subject);
|
|
|
|
// Set content with original email
|
|
const content = formatted.content.html || formatted.content.text;
|
|
setEmailContent(content);
|
|
}
|
|
else if (type === 'forward') {
|
|
// Get formatted data for forward
|
|
const formatted = formatForwardedEmail(initialEmail);
|
|
|
|
// Set subject
|
|
setSubject(formatted.subject);
|
|
|
|
// Set content with original email
|
|
const content = formatted.content.html || formatted.content.text;
|
|
setEmailContent(content);
|
|
|
|
// If the original email has attachments, include them
|
|
if (initialEmail.attachments && initialEmail.attachments.length > 0) {
|
|
const formattedAttachments = initialEmail.attachments.map(att => ({
|
|
name: att.filename || 'attachment',
|
|
type: att.contentType || 'application/octet-stream',
|
|
content: att.content || ''
|
|
}));
|
|
setAttachments(formattedAttachments);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error initializing compose form:', error);
|
|
}
|
|
}
|
|
}, [initialEmail, type]);
|
|
|
|
// Place cursor at beginning and ensure content is scrolled to top
|
|
useEffect(() => {
|
|
if (editorRef.current && type !== 'new') {
|
|
// Small delay to ensure DOM is ready
|
|
setTimeout(() => {
|
|
if (editorRef.current) {
|
|
// Focus the editor
|
|
editorRef.current.focus();
|
|
|
|
// Put cursor at the beginning
|
|
const selection = window.getSelection();
|
|
const range = document.createRange();
|
|
range.setStart(editorRef.current, 0);
|
|
range.collapse(true);
|
|
selection?.removeAllRanges();
|
|
selection?.addRange(range);
|
|
|
|
// Also make sure editor container is scrolled to top
|
|
editorRef.current.scrollTop = 0;
|
|
|
|
// Find parent scrollable containers and scroll them to top
|
|
let parent = editorRef.current.parentElement;
|
|
while (parent) {
|
|
if (parent.classList.contains('overflow-y-auto')) {
|
|
parent.scrollTop = 0;
|
|
}
|
|
parent = parent.parentElement;
|
|
}
|
|
}
|
|
}, 100);
|
|
}
|
|
}, [emailContent, type]);
|
|
|
|
// Handle file attachments
|
|
const handleAttachmentAdd = async (files: FileList) => {
|
|
const newAttachments = Array.from(files).map(file => ({
|
|
name: file.name,
|
|
type: file.type,
|
|
content: URL.createObjectURL(file)
|
|
}));
|
|
|
|
setAttachments(prev => [...prev, ...newAttachments]);
|
|
};
|
|
|
|
const handleAttachmentRemove = (index: number) => {
|
|
setAttachments(prev => prev.filter((_, i) => i !== index));
|
|
};
|
|
|
|
// Handle sending email
|
|
const handleSend = async () => {
|
|
if (!to) {
|
|
alert('Please specify at least one recipient');
|
|
return;
|
|
}
|
|
|
|
setSending(true);
|
|
|
|
try {
|
|
await onSend({
|
|
to,
|
|
cc: cc || undefined,
|
|
bcc: bcc || undefined,
|
|
subject,
|
|
body: emailContent,
|
|
attachments
|
|
});
|
|
|
|
// Reset form and close
|
|
onClose();
|
|
} catch (error) {
|
|
console.error('Error sending email:', error);
|
|
alert('Failed to send email. Please try again.');
|
|
} finally {
|
|
setSending(false);
|
|
}
|
|
};
|
|
|
|
// Get compose title based on type
|
|
const getComposeTitle = () => {
|
|
switch(type) {
|
|
case 'reply': return 'Reply';
|
|
case 'reply-all': return 'Reply All';
|
|
case 'forward': return 'Forward';
|
|
default: return 'New Message';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full max-h-[80vh]">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b">
|
|
<h2 className="text-lg font-medium">{getComposeTitle()}</h2>
|
|
<Button variant="ghost" size="icon" onClick={onClose}>
|
|
<X className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Email Form */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
<div className="p-4 space-y-4">
|
|
{/* Recipients */}
|
|
<div className="border-b pb-2">
|
|
<div className="flex items-center mb-2">
|
|
<span className="w-16 text-gray-500">To:</span>
|
|
<Input
|
|
type="text"
|
|
value={to}
|
|
onChange={(e) => setTo(e.target.value)}
|
|
placeholder="recipient@example.com"
|
|
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
|
|
/>
|
|
</div>
|
|
|
|
{showCc && (
|
|
<div className="flex items-center mb-2">
|
|
<span className="w-16 text-gray-500">Cc:</span>
|
|
<Input
|
|
type="text"
|
|
value={cc}
|
|
onChange={(e) => setCc(e.target.value)}
|
|
placeholder="cc@example.com"
|
|
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{showBcc && (
|
|
<div className="flex items-center mb-2">
|
|
<span className="w-16 text-gray-500">Bcc:</span>
|
|
<Input
|
|
type="text"
|
|
value={bcc}
|
|
onChange={(e) => setBcc(e.target.value)}
|
|
placeholder="bcc@example.com"
|
|
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* CC/BCC Toggle Links */}
|
|
<div className="flex gap-3 ml-16 mb-1">
|
|
{!showCc && (
|
|
<button
|
|
className="text-blue-600 text-sm"
|
|
onClick={() => setShowCc(true)}
|
|
>
|
|
Add Cc
|
|
</button>
|
|
)}
|
|
|
|
{!showBcc && (
|
|
<button
|
|
className="text-blue-600 text-sm"
|
|
onClick={() => setShowBcc(true)}
|
|
>
|
|
Add Bcc
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subject */}
|
|
<div className="border-b pb-2">
|
|
<div className="flex items-center">
|
|
<span className="w-16 text-gray-500">Subject:</span>
|
|
<Input
|
|
type="text"
|
|
value={subject}
|
|
onChange={(e) => setSubject(e.target.value)}
|
|
placeholder="Subject"
|
|
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Message Body */}
|
|
<div
|
|
ref={editorRef}
|
|
className="min-h-[300px] outline-none p-2"
|
|
contentEditable={true}
|
|
dangerouslySetInnerHTML={{ __html: emailContent }}
|
|
onInput={(e) => setEmailContent(e.currentTarget.innerHTML)}
|
|
/>
|
|
|
|
{/* Attachments */}
|
|
{attachments.length > 0 && (
|
|
<div className="p-2 border rounded-md">
|
|
{attachments.map((file, index) => (
|
|
<div key={index} className="flex items-center justify-between text-sm py-1">
|
|
<span className="truncate mr-2">{file.name}</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleAttachmentRemove(index)}
|
|
className="h-6 w-6 p-0"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t p-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
{/* File Input for Attachments */}
|
|
<input
|
|
type="file"
|
|
id="file-attachment"
|
|
className="hidden"
|
|
multiple
|
|
onChange={(e) => {
|
|
if (e.target.files && e.target.files.length > 0) {
|
|
handleAttachmentAdd(e.target.files);
|
|
}
|
|
}}
|
|
/>
|
|
<label htmlFor="file-attachment">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8"
|
|
>
|
|
<Paperclip className="h-4 w-4" />
|
|
</Button>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
|
|
<Button
|
|
variant="default"
|
|
onClick={handleSend}
|
|
disabled={sending}
|
|
className="bg-blue-600 hover:bg-blue-700"
|
|
>
|
|
{sending ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Sending
|
|
</>
|
|
) : 'Send'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Styles for email content */}
|
|
<style jsx global>{`
|
|
[contenteditable] {
|
|
-webkit-user-modify: read-write-plaintext-only;
|
|
overflow-wrap: break-word;
|
|
-webkit-line-break: after-white-space;
|
|
-webkit-user-select: text;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
[contenteditable]:focus {
|
|
outline: none;
|
|
}
|
|
|
|
[contenteditable] blockquote {
|
|
margin: 10px 0;
|
|
padding-left: 15px;
|
|
border-left: 2px solid #ddd;
|
|
color: #666;
|
|
}
|
|
|
|
[contenteditable] img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
[contenteditable] table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
[contenteditable] th,
|
|
[contenteditable] td {
|
|
padding: 5px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
[contenteditable] th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Forwarded message styles */
|
|
.email-original-content {
|
|
margin-top: 20px;
|
|
color: #505050;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|