Fixed partner message reader
This commit is contained in:
@@ -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<MessageViewerProps> = ({
|
||||
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 '<p class="text-slate-400 italic">No message content</p>';
|
||||
|
||||
// Format 1: Email => HTML
|
||||
if (isEmail) {
|
||||
if (isHtmlContent(content)) {
|
||||
return content.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/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 (
|
||||
<div className={`flex flex-col rounded-2xl bg-slate-900/50 border border-white/10 overflow-hidden ${className}`}>
|
||||
{/* Format Header & Controls Bar */}
|
||||
{showFormatHeader && (
|
||||
<div className="px-4 py-2.5 border-b border-white/[0.08] bg-[#0b101d]/90 flex items-center justify-between text-xs text-slate-400 gap-3">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{isEmail ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-cyan-500/10 border border-cyan-500/20 text-cyan-300 font-semibold text-[11px]">
|
||||
<Mail className="w-3.5 h-3.5 text-cyan-400" />
|
||||
<span>Email (HTML)</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-300 font-semibold text-[11px]">
|
||||
<MessageSquare className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span>In-App (Markup)</span>
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span className="text-[11px] text-slate-400 hidden sm:inline">
|
||||
{isEmail ? 'Rendered as HTML Email' : 'Converted from Markup to Formatted View'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* View Mode Toggle: Formatted vs Raw */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowRaw(!showRaw)}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded-lg bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white text-[11px] font-medium transition cursor-pointer border border-white/10"
|
||||
title={showRaw ? 'Switch to Formatted view' : 'View Raw message content'}
|
||||
>
|
||||
{showRaw ? (
|
||||
<>
|
||||
<Eye className="w-3 h-3 text-emerald-400" />
|
||||
<span>Formatted</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Code2 className="w-3 h-3" />
|
||||
<span>Raw</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Copy Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded-lg bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white text-[11px] font-medium transition cursor-pointer border border-white/10"
|
||||
title="Copy message content"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-3 h-3 text-emerald-400" />
|
||||
<span className="text-emerald-300">Copied</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-3 h-3" />
|
||||
<span>Copy</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Message Body Content */}
|
||||
<div className="p-5 sm:p-6 overflow-x-auto max-h-[55vh] overflow-y-auto text-sm leading-relaxed text-slate-200">
|
||||
{showRaw ? (
|
||||
<pre className="font-mono text-xs text-slate-300 whitespace-pre-wrap break-words bg-[#080d18] p-4 rounded-xl border border-white/5">
|
||||
{content}
|
||||
</pre>
|
||||
) : (
|
||||
<div
|
||||
className="prose prose-invert max-w-none text-xs sm:text-sm leading-relaxed text-slate-200 [&_h1]:text-white [&_h1]:text-xl [&_h1]:font-bold [&_h1]:mb-3 [&_h2]:text-white [&_h2]:text-lg [&_h2]:font-bold [&_h2]:mb-2 [&_h3]:text-white [&_h3]:text-base [&_h3]:font-bold [&_h3]:mb-2 [&_h4]:text-white [&_h4]:font-semibold [&_a]:text-emerald-400 [&_a:hover]:underline [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-2 [&_li]:text-slate-300 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_th]:border-slate-700 [&_th]:bg-slate-800/80 [&_th]:p-2 [&_td]:border [&_td]:border-slate-800 [&_td]:p-2 [&_blockquote]:border-l-4 [&_blockquote]:border-emerald-500 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:my-2 [&_code]:bg-slate-800 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-emerald-300"
|
||||
dangerouslySetInnerHTML={{ __html: renderedHtml }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Info Stamp */}
|
||||
<div className="px-5 py-2.5 border-t border-white/[0.08] bg-[#090e1a] flex items-center justify-between text-[11px] text-slate-400">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span>PFM Communications • {isEmail ? 'Email HTML Format' : 'In-App Markup Format'}</span>
|
||||
</div>
|
||||
<span className="font-mono text-[10px] text-slate-400">
|
||||
{stripMarkdown(content).length} characters
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user