courrier multi account restore compose
This commit is contained in:
parent
003a7b354a
commit
e99d08fccf
@ -39,37 +39,6 @@ import {
|
||||
* for consistent handling of email content and text direction.
|
||||
*/
|
||||
|
||||
// Define interface for the legacy props
|
||||
interface LegacyComposeEmailProps {
|
||||
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: any) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
replyTo?: any | null;
|
||||
forwardFrom?: any | null;
|
||||
}
|
||||
|
||||
// Define interface for the modern props
|
||||
interface ComposeEmailProps {
|
||||
initialEmail?: EmailMessage | null;
|
||||
@ -89,55 +58,7 @@ interface ComposeEmailProps {
|
||||
}) => Promise<void>;
|
||||
}
|
||||
|
||||
// Union type for handling both types of props
|
||||
type ComposeEmailAllProps = ComposeEmailProps | LegacyComposeEmailProps;
|
||||
|
||||
// Type guard to check if props are legacy
|
||||
function isLegacyProps(
|
||||
props: ComposeEmailAllProps
|
||||
): props is LegacyComposeEmailProps {
|
||||
return 'showCompose' in props;
|
||||
}
|
||||
|
||||
// Helper function to adapt EmailMessage to QuotedEmailContent props format
|
||||
function EmailMessageToQuotedContentAdapter({
|
||||
email,
|
||||
type
|
||||
}: {
|
||||
email: EmailMessage,
|
||||
type: 'reply' | 'reply-all' | 'forward'
|
||||
}) {
|
||||
// Get the email content
|
||||
const content = email.content || email.html || email.text || '';
|
||||
|
||||
// Get the sender
|
||||
const sender = email.from && email.from.length > 0
|
||||
? {
|
||||
name: email.from[0].name,
|
||||
email: email.from[0].address
|
||||
}
|
||||
: { email: 'unknown@example.com' };
|
||||
|
||||
// Map the type to what QuotedEmailContent expects
|
||||
const mappedType = type === 'reply-all' ? 'reply' : type;
|
||||
|
||||
return (
|
||||
<QuotedEmailContent
|
||||
content={content}
|
||||
sender={sender}
|
||||
date={email.date}
|
||||
type={mappedType}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
// Handle legacy props by adapting them to new component
|
||||
if (isLegacyProps(props)) {
|
||||
return <LegacyAdapter {...props} />;
|
||||
}
|
||||
|
||||
// Continue with modern implementation for new props
|
||||
export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
const { initialEmail, type = 'new', onClose, onSend } = props;
|
||||
|
||||
// Email form state
|
||||
@ -359,132 +280,118 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-900/80 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">
|
||||
{type === 'reply' ? 'Reply' : type === 'forward' ? 'Forward' : type === 'reply-all' ? 'Reply All' : 'New Message'}
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hover:bg-gray-100 rounded-full"
|
||||
onClick={onClose}
|
||||
>
|
||||
<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={to}
|
||||
onChange={(e) => setTo(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={cc}
|
||||
onChange={(e) => setCc(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={bcc}
|
||||
onChange={(e) => setBcc(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={subject}
|
||||
onChange={(e) => setSubject(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 overflow-hidden">
|
||||
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
|
||||
<div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
|
||||
<RichEmailEditor
|
||||
initialContent={emailContent}
|
||||
onChange={setEmailContent}
|
||||
minHeight="200px"
|
||||
maxHeight="none"
|
||||
preserveFormatting={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="border rounded-md p-3 mt-4">
|
||||
<h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
|
||||
<div className="space-y-2">
|
||||
{attachments.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between text-sm border rounded p-2">
|
||||
<span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleAttachmentRemove(index)}
|
||||
className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col h-full">
|
||||
<ComposeEmailHeader
|
||||
type={type}
|
||||
onClose={onClose}
|
||||
/>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<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={to}
|
||||
onChange={(e) => setTo(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={cc}
|
||||
onChange={(e) => setCc(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={bcc}
|
||||
onChange={(e) => setBcc(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={subject}
|
||||
onChange={(e) => setSubject(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 overflow-hidden">
|
||||
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
|
||||
<div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
|
||||
<RichEmailEditor
|
||||
initialContent={emailContent}
|
||||
onChange={setEmailContent}
|
||||
minHeight="200px"
|
||||
maxHeight="none"
|
||||
preserveFormatting={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="border rounded-md p-3 mt-4">
|
||||
<h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
|
||||
<div className="space-y-2">
|
||||
{attachments.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between text-sm border rounded p-2">
|
||||
<span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleAttachmentRemove(index)}
|
||||
className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
@ -548,370 +455,4 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Legacy adapter to maintain backward compatibility
|
||||
function LegacyAdapter({
|
||||
showCompose,
|
||||
setShowCompose,
|
||||
composeTo,
|
||||
setComposeTo,
|
||||
composeCc,
|
||||
setComposeCc,
|
||||
composeBcc,
|
||||
setComposeBcc,
|
||||
composeSubject,
|
||||
setComposeSubject,
|
||||
composeBody,
|
||||
setComposeBody,
|
||||
showCc,
|
||||
setShowCc,
|
||||
showBcc,
|
||||
setShowBcc,
|
||||
attachments,
|
||||
setAttachments,
|
||||
handleSend,
|
||||
originalEmail,
|
||||
onSend,
|
||||
onCancel,
|
||||
replyTo,
|
||||
forwardFrom
|
||||
}: LegacyComposeEmailProps) {
|
||||
const [sending, setSending] = useState(false);
|
||||
|
||||
// Determine the type based on legacy props
|
||||
const determineType = (): 'new' | 'reply' | 'reply-all' | 'forward' => {
|
||||
if (originalEmail?.type === 'forward') return 'forward';
|
||||
if (originalEmail?.type === 'reply-all') return 'reply-all';
|
||||
if (originalEmail?.type === 'reply') return 'reply';
|
||||
if (replyTo) return 'reply';
|
||||
if (forwardFrom) return 'forward';
|
||||
return 'new';
|
||||
};
|
||||
|
||||
// Format legacy content on mount if necessary
|
||||
useEffect(() => {
|
||||
// Only format if we have original email and no content was set yet
|
||||
if ((originalEmail || replyTo || forwardFrom) &&
|
||||
(!composeBody || composeBody === '<p></p>' || composeBody === '<br>')) {
|
||||
|
||||
const type = determineType();
|
||||
|
||||
if (type === 'reply' || type === 'reply-all') {
|
||||
// For reply, format with sender info and original content
|
||||
const content = originalEmail?.content || '';
|
||||
const sender = replyTo?.name || replyTo?.email || 'Unknown sender';
|
||||
const date = new Date().toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
const replyContent = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${date}, ${sender} wrote:</div>
|
||||
<blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
|
||||
<div style="font-size: 13px;">
|
||||
${content}
|
||||
</div>
|
||||
</blockquote>
|
||||
`;
|
||||
|
||||
setComposeBody(replyContent);
|
||||
}
|
||||
else if (type === 'forward') {
|
||||
// For forward, format with original message details
|
||||
const content = originalEmail?.content || '';
|
||||
const fromString = forwardFrom?.name || forwardFrom?.email || 'Unknown';
|
||||
const toString = 'Recipients';
|
||||
const date = new Date().toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
const forwardContent = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
|
||||
<div style="font-family: Arial, sans-serif; color: #333;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<div>---------- Forwarded message ---------</div>
|
||||
<div><b>From:</b> ${fromString}</div>
|
||||
<div><b>Date:</b> ${date}</div>
|
||||
<div><b>Subject:</b> ${composeSubject || ''}</div>
|
||||
<div><b>To:</b> ${toString}</div>
|
||||
</div>
|
||||
<div class="email-original-content">
|
||||
${content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setComposeBody(forwardContent);
|
||||
}
|
||||
}
|
||||
}, [originalEmail, replyTo, forwardFrom, composeBody, determineType, composeSubject]);
|
||||
|
||||
// Converts attachments to the expected format
|
||||
const convertAttachments = () => {
|
||||
return attachments.map(att => ({
|
||||
name: att.name || att.filename || 'attachment',
|
||||
content: att.content || '',
|
||||
type: att.type || att.contentType || 'application/octet-stream'
|
||||
}));
|
||||
};
|
||||
|
||||
// Handle sending in the legacy format
|
||||
const handleLegacySend = async () => {
|
||||
setSending(true);
|
||||
|
||||
try {
|
||||
if (onSend) {
|
||||
// New API
|
||||
await onSend({
|
||||
to: composeTo,
|
||||
cc: composeCc,
|
||||
bcc: composeBcc,
|
||||
subject: composeSubject,
|
||||
body: composeBody,
|
||||
attachments: convertAttachments()
|
||||
});
|
||||
} else if (handleSend) {
|
||||
// Old API
|
||||
await handleSend();
|
||||
}
|
||||
|
||||
// Close compose window
|
||||
setShowCompose(false);
|
||||
} catch (error) {
|
||||
console.error('Error sending email:', error);
|
||||
alert('Failed to send email. Please try again.');
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle file selection for legacy interface
|
||||
const handleFileSelection = (files: FileList) => {
|
||||
const newAttachments = Array.from(files).map(file => ({
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
content: URL.createObjectURL(file),
|
||||
size: file.size
|
||||
}));
|
||||
|
||||
setAttachments([...attachments, ...newAttachments]);
|
||||
};
|
||||
|
||||
if (!showCompose) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-900/80 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">
|
||||
{determineType() === 'reply' ? 'Reply' : determineType() === 'forward' ? 'Forward' : determineType() === 'reply-all' ? 'Reply All' : 'New Message'}
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hover:bg-gray-100 rounded-full"
|
||||
onClick={() => {
|
||||
if (onCancel) onCancel();
|
||||
setShowCompose(false);
|
||||
}}
|
||||
>
|
||||
<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 overflow-hidden">
|
||||
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
|
||||
<div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
|
||||
<RichEmailEditor
|
||||
initialContent={composeBody}
|
||||
onChange={setComposeBody}
|
||||
minHeight="200px"
|
||||
maxHeight="none"
|
||||
preserveFormatting={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="border rounded-md p-3 mt-4">
|
||||
<h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
|
||||
<div className="space-y-2">
|
||||
{attachments.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between text-sm border rounded p-2">
|
||||
<span className="truncate max-w-[200px] text-gray-800">{file.name || file.filename}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setAttachments(attachments.filter((_, i) => i !== index))}
|
||||
className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</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-legacy"
|
||||
className="hidden"
|
||||
multiple
|
||||
onChange={(e) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
handleFileSelection(e.target.files);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="file-attachment-legacy">
|
||||
<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-legacy')?.click();
|
||||
}}
|
||||
>
|
||||
<Paperclip className="h-4 w-4 text-gray-600" />
|
||||
</Button>
|
||||
</label>
|
||||
{sending && <span className="text-xs text-gray-500 ml-2">Preparing attachment...</span>}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
if (onCancel) onCancel();
|
||||
setShowCompose(false);
|
||||
}}
|
||||
disabled={sending}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-blue-600 text-white hover:bg-blue-700"
|
||||
onClick={handleLegacySend}
|
||||
disabled={sending}
|
||||
>
|
||||
{sending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SendHorizontal className="mr-2 h-4 w-4" />
|
||||
Send
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user