@@ -2163,7 +2167,7 @@ export function DashboardPage() {
setMessageSubject(subj.startsWith('Re:') ? subj : `Re: ${subj}`);
setMessageBody('');
}}
- className="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold text-xs flex items-center gap-1.5 cursor-pointer"
+ className="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold text-xs flex items-center gap-1.5 cursor-pointer transition shadow-lg shadow-emerald-500/20"
>
Reply
diff --git a/PostFundManagement.PartnerUI/src/components/notifications/MessageViewer.tsx b/PostFundManagement.PartnerUI/src/components/notifications/MessageViewer.tsx
new file mode 100644
index 0000000..9d22279
--- /dev/null
+++ b/PostFundManagement.PartnerUI/src/components/notifications/MessageViewer.tsx
@@ -0,0 +1,186 @@
+import React, { useState, useMemo } from 'react';
+import {
+ Copy,
+ Check,
+ Mail,
+ MessageSquare,
+ Code2,
+ Eye,
+ ShieldCheck,
+} from 'lucide-react';
+import { NotificationPlatform } from '../../types';
+import { parseMarkdownToHtml, isHtmlContent, stripMarkdown } from '../../lib/markdownUtils';
+
+export interface MessageViewerProps {
+ content: string;
+ platform?: NotificationPlatform | number | string;
+ subject?: string;
+ className?: string;
+ showFormatHeader?: boolean;
+}
+
+export const MessageViewer: React.FC
= ({
+ content,
+ platform,
+ subject,
+ className = '',
+ showFormatHeader = true,
+}) => {
+ const [copied, setCopied] = useState(false);
+ const [showRaw, setShowRaw] = useState(false);
+
+ // Determine whether this message represents an Email (HTML) or In-App (Markup)
+ const isEmail = useMemo(() => {
+ if (
+ platform === NotificationPlatform.Email ||
+ platform === 1 ||
+ platform === '1' ||
+ String(platform).toLowerCase() === 'email'
+ ) {
+ return true;
+ }
+ // If platform is not explicitly InApp, detect if content is structured HTML
+ if (
+ platform !== NotificationPlatform.InApp &&
+ platform !== 5 &&
+ platform !== '5' &&
+ String(platform).toLowerCase() !== 'inapp' &&
+ isHtmlContent(content)
+ ) {
+ return true;
+ }
+ return false;
+ }, [platform, content]);
+
+ const isInApp = useMemo(() => {
+ if (
+ platform === NotificationPlatform.InApp ||
+ platform === 5 ||
+ platform === '5' ||
+ String(platform).toLowerCase() === 'inapp'
+ ) {
+ return true;
+ }
+ return !isEmail;
+ }, [platform, isEmail]);
+
+ // Convert the message to its respective format:
+ // - Email: HTML rendered
+ // - In-App: Markup (Markdown) parsed to HTML
+ const renderedHtml = useMemo(() => {
+ if (!content) return 'No message content
';
+
+ // Format 1: Email => HTML
+ if (isEmail) {
+ if (isHtmlContent(content)) {
+ return content.replace(/)<[^<]*)*<\/script>/gi, '');
+ }
+ return parseMarkdownToHtml(content);
+ }
+
+ // Format 2: In-App => Markup (Markdown)
+ return parseMarkdownToHtml(content);
+ }, [content, isEmail]);
+
+ const handleCopy = () => {
+ const textToCopy = showRaw ? content : stripMarkdown(content) || content;
+ navigator.clipboard.writeText(textToCopy);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ };
+
+ return (
+
+ {/* Format Header & Controls Bar */}
+ {showFormatHeader && (
+
+
+ {isEmail ? (
+
+
+ Email (HTML)
+
+ ) : (
+
+
+ In-App (Markup)
+
+ )}
+
+
+ {isEmail ? 'Rendered as HTML Email' : 'Converted from Markup to Formatted View'}
+
+
+
+
+ {/* View Mode Toggle: Formatted vs Raw */}
+
+
+ {/* Copy Button */}
+
+
+
+ )}
+
+ {/* Message Body Content */}
+
+ {showRaw ? (
+
+ {content}
+
+ ) : (
+
+ )}
+
+
+ {/* Footer Info Stamp */}
+
+
+
+ PFM Communications • {isEmail ? 'Email HTML Format' : 'In-App Markup Format'}
+
+
+ {stripMarkdown(content).length} characters
+
+
+
${escaped}`;
});
+ // Tables (| A | B |\n|---|---|\n| C | D |)
+ html = html.replace(/((?:\|[^\n]+\|\n?)+)/g, (match) => {
+ const rows = match.trim().split('\n');
+ if (rows.length < 2) return match;
+
+ const hasSeparator = rows[1] && rows[1].includes('---');
+ if (!hasSeparator) return match;
+
+ const parseCells = (row: string) =>
+ row
+ .split('|')
+ .slice(1, -1)
+ .map((c) => c.trim());
+
+ const headers = parseCells(rows[0]);
+ const bodyRows = rows.slice(2);
+
+ let tableHtml = ``;
+ tableHtml += ``;
+ headers.forEach((h) => {
+ tableHtml += `| ${h} | `;
+ });
+ tableHtml += `
`;
+
+ bodyRows.forEach((row, i) => {
+ const cells = parseCells(row);
+ const bg = i % 2 === 0 ? '#0f172a' : '#1e293b/40';
+ tableHtml += ``;
+ cells.forEach((c) => {
+ tableHtml += `| ${c} | `;
+ });
+ tableHtml += `
`;
+ });
+
+ tableHtml += `
$1
');
html = html.replace(/^### (.*?)$/gm, '$1
');
html = html.replace(/^## (.*?)$/gm, '$1
');
html = html.replace(/^# (.*?)$/gm, '$1
');
+ // Blockquotes and GitHub alerts
+ html = html.replace(/^>\s*\[!NOTE\]\s*(.*?)$/gim, 'NOTE: $1
');
+ html = html.replace(/^>\s*\[!IMPORTANT\]\s*(.*?)$/gim, 'IMPORTANT: $1
');
+ html = html.replace(/^>\s*\[!WARNING\]\s*(.*?)$/gim, 'WARNING: $1
');
+ html = html.replace(/^>\s*\[!TIP\]\s*(.*?)$/gim, 'TIP: $1
');
+ html = html.replace(/^>\s*(.*?)$/gm, '$1
');
+
+ // Horizontal Rules (---)
+ html = html.replace(/^(?:---|\*\*\*|___)\s*$/gm, '
');
+
+ // Strikethrough
+ html = html.replace(/~~(.*?)~~/g, '$1');
+
html = html.replace(/\*\*\*(.*?)\*\*\*/g, '$1');
html = html.replace(/\*\*(.*?)\*\*/g, '$1');
html = html.replace(/__(.*?)__/g, '$1');