367 lines
12 KiB
TypeScript
367 lines
12 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';
|
|
|
|
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 [isInitialized, setIsInitialized] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (composeBodyRef.current && !isInitialized) {
|
|
let content = '';
|
|
|
|
if (replyTo) {
|
|
// For replies
|
|
content = `
|
|
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
|
|
<div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
|
|
<div style="margin-bottom: 10px;">
|
|
On ${new Date(replyTo.date).toLocaleString()}, ${replyTo.from} wrote:
|
|
</div>
|
|
<blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
|
|
${composeBody}
|
|
</blockquote>
|
|
</div>
|
|
`;
|
|
} else if (forwardFrom) {
|
|
// For forwards
|
|
content = `
|
|
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
|
|
<div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
|
|
<div style="margin-bottom: 10px;">
|
|
---------- Forwarded message ---------<br/>
|
|
From: ${forwardFrom.from}<br/>
|
|
Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
|
|
Subject: ${forwardFrom.subject}<br/>
|
|
To: ${forwardFrom.to}<br/>
|
|
${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
|
|
</div>
|
|
<blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
|
|
${composeBody}
|
|
</blockquote>
|
|
</div>
|
|
`;
|
|
} else {
|
|
// For new messages
|
|
content = `
|
|
<div class="compose-area" contenteditable="true" style="min-height: 200px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px;"></div>
|
|
`;
|
|
}
|
|
|
|
composeBodyRef.current.innerHTML = content;
|
|
setIsInitialized(true);
|
|
|
|
// Place cursor at the beginning of the compose area
|
|
const composeArea = composeBodyRef.current.querySelector('.compose-area');
|
|
if (composeArea) {
|
|
const range = document.createRange();
|
|
const sel = window.getSelection();
|
|
range.setStart(composeArea, 0);
|
|
range.collapse(true);
|
|
sel?.removeAllRanges();
|
|
sel?.addRange(range);
|
|
(composeArea as HTMLElement).focus();
|
|
}
|
|
}
|
|
}, [composeBody, replyTo, forwardFrom, isInitialized]);
|
|
|
|
const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
|
|
if (!composeBodyRef.current) return;
|
|
const composeArea = composeBodyRef.current.querySelector('.compose-area');
|
|
if (composeArea) {
|
|
const newContent = composeArea.innerHTML;
|
|
setComposeBody(newContent);
|
|
if (onBodyChange) {
|
|
onBodyChange(newContent);
|
|
}
|
|
}
|
|
};
|
|
|
|
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 {
|
|
const base64Content = await new Promise<string>((resolve) => {
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
const base64 = reader.result as string;
|
|
resolve(base64.split(',')[1]);
|
|
};
|
|
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]);
|
|
}
|
|
};
|
|
|
|
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">To</Label>
|
|
<Input
|
|
id="to"
|
|
value={composeTo}
|
|
onChange={(e) => setComposeTo(e.target.value)}
|
|
placeholder="Recipients"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
{/* Cc Field */}
|
|
{showCc && (
|
|
<div className="flex-none">
|
|
<Label htmlFor="cc">Cc</Label>
|
|
<Input
|
|
id="cc"
|
|
value={composeCc}
|
|
onChange={(e) => setComposeCc(e.target.value)}
|
|
placeholder="Carbon copy"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Bcc Field */}
|
|
{showBcc && (
|
|
<div className="flex-none">
|
|
<Label htmlFor="bcc">Bcc</Label>
|
|
<Input
|
|
id="bcc"
|
|
value={composeBcc}
|
|
onChange={(e) => setComposeBcc(e.target.value)}
|
|
placeholder="Blind carbon copy"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Subject Field */}
|
|
<div className="flex-none">
|
|
<Label htmlFor="subject">Subject</Label>
|
|
<Input
|
|
id="subject"
|
|
value={composeSubject}
|
|
onChange={(e) => setComposeSubject(e.target.value)}
|
|
placeholder="Subject"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
{/* Message Body */}
|
|
<div className="flex-1 min-h-0">
|
|
<div
|
|
ref={composeBodyRef}
|
|
onInput={handleInput}
|
|
className="h-full"
|
|
style={{ overflowY: 'auto' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Attachments */}
|
|
{attachments.length > 0 && (
|
|
<div className="flex-none">
|
|
<div className="flex flex-wrap gap-2">
|
|
{attachments.map((attachment, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center gap-2 bg-gray-100 px-3 py-1 rounded-full text-sm"
|
|
>
|
|
<Paperclip className="h-4 w-4 text-gray-500" />
|
|
<span>{attachment.name}</span>
|
|
<button
|
|
onClick={() => {
|
|
const newAttachments = [...attachments];
|
|
newAttachments.splice(index, 1);
|
|
setAttachments(newAttachments);
|
|
}}
|
|
className="text-gray-500 hover:text-gray-700"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex-none flex items-center justify-between pt-4 border-t border-gray-200">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.multiple = true;
|
|
input.onchange = (e) => handleFileAttachment(e as any);
|
|
input.click();
|
|
}}
|
|
>
|
|
<Paperclip className="h-4 w-4 mr-2" />
|
|
Attach
|
|
</Button>
|
|
{!showCc && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowCc(true)}
|
|
>
|
|
Cc
|
|
</Button>
|
|
)}
|
|
{!showBcc && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowBcc(true)}
|
|
>
|
|
Bcc
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onCancel}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={handleSend}
|
|
>
|
|
Send
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|