144 lines
3.5 KiB
TypeScript
144 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import EmailContentDisplay from './EmailContentDisplay';
|
|
|
|
interface QuotedEmailContentProps {
|
|
content: string;
|
|
sender: {
|
|
name?: string;
|
|
email: string;
|
|
};
|
|
date: Date | string;
|
|
type: 'reply' | 'forward';
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Component for displaying properly formatted quoted email content in replies and forwards
|
|
*/
|
|
const QuotedEmailContent: React.FC<QuotedEmailContentProps> = ({
|
|
content,
|
|
sender,
|
|
date,
|
|
type,
|
|
className = ''
|
|
}) => {
|
|
// Format the date
|
|
const formatDate = (date: Date | string) => {
|
|
if (!date) return '';
|
|
|
|
const dateObj = typeof date === 'string' ? new Date(date) : date;
|
|
|
|
try {
|
|
return dateObj.toLocaleString('en-US', {
|
|
weekday: 'short',
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
} catch (e) {
|
|
return typeof date === 'string' ? date : date.toString();
|
|
}
|
|
};
|
|
|
|
// Format sender info
|
|
const senderName = sender.name || sender.email;
|
|
const formattedDate = formatDate(date);
|
|
|
|
// Create header based on type
|
|
const renderQuoteHeader = () => {
|
|
if (type === 'reply') {
|
|
return (
|
|
<div className="quote-header">
|
|
On {formattedDate}, {senderName} wrote:
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className="forward-header">
|
|
<div>---------- Forwarded message ---------</div>
|
|
<div><b>From:</b> {senderName} <{sender.email}></div>
|
|
<div><b>Date:</b> {formattedDate}</div>
|
|
<div><b>Subject:</b> {/* Subject would be passed as a prop if needed */}</div>
|
|
<div><b>To:</b> {/* Recipients would be passed as a prop if needed */}</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`quoted-email-container ${className}`}>
|
|
{renderQuoteHeader()}
|
|
<div className="quoted-content">
|
|
<EmailContentDisplay
|
|
content={content}
|
|
type="auto"
|
|
className="quoted-email-body"
|
|
showQuotedText={true}
|
|
/>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.quoted-email-container {
|
|
margin-top: 20px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
|
}
|
|
|
|
.quote-header {
|
|
color: #555;
|
|
font-size: 13px;
|
|
margin: 10px 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.forward-header {
|
|
color: #555;
|
|
font-size: 13px;
|
|
margin-bottom: 15px;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.forward-header div {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.quoted-content {
|
|
border-left: 2px solid #ddd;
|
|
padding: 0 0 0 15px;
|
|
margin: 10px 0;
|
|
color: #505050;
|
|
}
|
|
|
|
:global(.quoted-email-body) {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
:global(.quoted-email-body table) {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
:global(.quoted-email-body th),
|
|
:global(.quoted-email-body td) {
|
|
padding: 0.5rem;
|
|
vertical-align: top;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
:global(.quoted-email-body th) {
|
|
font-weight: 600;
|
|
text-align: left;
|
|
background-color: #f8f9fa;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuotedEmailContent;
|