8d47f67318
Tables are a GitHub Flavored Markdown extension not supported by react-markdown's default parser. Added remark-gfm plugin so tables, strikethrough, and task lists render correctly in KB articles.
338 lines
11 KiB
JavaScript
338 lines
11 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
import rehypeSanitize from 'rehype-sanitize';
|
|
import mermaid from 'mermaid';
|
|
import { X, Download, Loader, AlertCircle, FileText, File } from 'lucide-react';
|
|
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: 'dark',
|
|
darkMode: true,
|
|
themeVariables: {
|
|
background: '#0f172a',
|
|
primaryColor: '#1e3a5f',
|
|
primaryTextColor: '#e2e8f0',
|
|
primaryBorderColor: '#0ea5e9',
|
|
lineColor: '#475569',
|
|
secondaryColor: '#1a2e1a',
|
|
tertiaryColor: '#2d1f14',
|
|
edgeLabelBackground: '#1e293b',
|
|
clusterBkg: '#1e293b',
|
|
titleColor: '#e2e8f0',
|
|
fontFamily: 'monospace'
|
|
}
|
|
});
|
|
|
|
let mermaidCounter = 0;
|
|
|
|
function MermaidDiagram({ code }) {
|
|
const ref = useRef(null);
|
|
const [svgError, setSvgError] = useState('');
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
const id = `mermaid-kb-${++mermaidCounter}`;
|
|
mermaid.render(id, code)
|
|
.then(({ svg }) => {
|
|
if (!cancelled && ref.current) {
|
|
ref.current.innerHTML = svg;
|
|
// Make SVG responsive
|
|
const svgEl = ref.current.querySelector('svg');
|
|
if (svgEl) {
|
|
svgEl.removeAttribute('width');
|
|
svgEl.removeAttribute('height');
|
|
svgEl.style.width = '100%';
|
|
svgEl.style.maxWidth = '100%';
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
if (!cancelled) setSvgError(err.message || 'Failed to render diagram');
|
|
});
|
|
return () => { cancelled = true; };
|
|
}, [code]);
|
|
|
|
if (svgError) {
|
|
return (
|
|
<pre style={{ color: '#EF4444', fontSize: '0.75rem', padding: '0.75rem', background: 'rgba(239,68,68,0.1)', borderRadius: '0.375rem', overflowX: 'auto' }}>
|
|
Mermaid render error: {svgError}
|
|
</pre>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
style={{ background: 'rgba(15,23,42,0.6)', border: '1px solid rgba(14,165,233,0.2)', borderRadius: '0.5rem', padding: '1rem', margin: '1rem 0', overflowX: 'auto' }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
|
|
|
export default function KnowledgeBaseViewer({ article, onClose }) {
|
|
const [content, setContent] = useState('');
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
fetchArticleContent();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [article.id]);
|
|
|
|
const fetchArticleContent = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/knowledge-base/${article.id}/content`, {
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to fetch article content');
|
|
|
|
const text = await response.text();
|
|
setContent(text);
|
|
} catch (err) {
|
|
console.error('Error fetching article content:', err);
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDownload = async () => {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/knowledge-base/${article.id}/download`, {
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Download failed');
|
|
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = article.file_name;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
} catch (err) {
|
|
console.error('Error downloading file:', err);
|
|
setError('Failed to download file');
|
|
}
|
|
};
|
|
|
|
const isMarkdown = article.file_name?.endsWith('.md');
|
|
const isText = article.file_name?.endsWith('.txt');
|
|
const isPDF = article.file_name?.endsWith('.pdf');
|
|
const isImage = /\.(jpg|jpeg|png|gif|bmp)$/i.test(article.file_name || '');
|
|
|
|
const getCategoryColor = (cat) => {
|
|
const colors = {
|
|
'General': '#94A3B8',
|
|
'Policy': '#0EA5E9',
|
|
'Procedure': '#10B981',
|
|
'Guide': '#F59E0B',
|
|
'Reference': '#8B5CF6'
|
|
};
|
|
return colors[cat] || '#94A3B8';
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
return new Date(dateString).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 50%, rgba(30, 41, 59, 0.95) 100%)',
|
|
border: '2px solid rgba(14, 165, 233, 0.4)',
|
|
borderRadius: '0.5rem',
|
|
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 28px rgba(14, 165, 233, 0.15)',
|
|
padding: '1.5rem',
|
|
position: 'relative',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between mb-4 pb-4" style={{ borderBottom: '1px solid rgba(14, 165, 233, 0.2)' }}>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<FileText className="w-5 h-5" style={{ color: getCategoryColor(article.category) }} />
|
|
<h2 className="text-xl font-semibold" style={{ color: '#E2E8F0', fontFamily: 'monospace' }}>
|
|
{article.title}
|
|
</h2>
|
|
</div>
|
|
{article.description && (
|
|
<p className="text-sm mb-2" style={{ color: '#94A3B8' }}>
|
|
{article.description}
|
|
</p>
|
|
)}
|
|
<div className="flex items-center gap-3 text-xs" style={{ color: '#64748B' }}>
|
|
<span
|
|
className="px-2 py-1 rounded"
|
|
style={{
|
|
background: `${getCategoryColor(article.category)}33`,
|
|
color: getCategoryColor(article.category),
|
|
fontWeight: '600'
|
|
}}
|
|
>
|
|
{article.category}
|
|
</span>
|
|
<span>Created: {formatDate(article.created_at)}</span>
|
|
{article.created_by_username && (
|
|
<span>By: {article.created_by_username}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 ml-4">
|
|
<button
|
|
onClick={handleDownload}
|
|
className="intel-button intel-button-small"
|
|
title="Download"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={onClose}
|
|
className="intel-button intel-button-small"
|
|
title="Close"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="kb-content-area">
|
|
{loading && (
|
|
<div className="text-center py-12">
|
|
<Loader className="w-8 h-8 animate-spin mx-auto mb-4" style={{ color: '#0EA5E9' }} />
|
|
<p style={{ color: '#94A3B8' }}>Loading document...</p>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="flex items-start gap-3 p-4 rounded" style={{ background: 'rgba(239, 68, 68, 0.1)', border: '1px solid #EF4444' }}>
|
|
<AlertCircle className="w-6 h-6 flex-shrink-0" style={{ color: '#EF4444' }} />
|
|
<div>
|
|
<p className="font-medium" style={{ color: '#FCA5A5' }}>Failed to Load Document</p>
|
|
<p className="text-sm mt-1" style={{ color: '#94A3B8' }}>{error}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && (
|
|
<>
|
|
{/* Markdown Rendering */}
|
|
{isMarkdown && (
|
|
<div className="markdown-content">
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
rehypePlugins={[rehypeSanitize]}
|
|
components={{
|
|
code({ inline, className, children }) {
|
|
const lang = /language-(\w+)/.exec(className || '')?.[1];
|
|
if (!inline && lang === 'mermaid') {
|
|
return <MermaidDiagram code={String(children).replace(/\n$/, '')} />;
|
|
}
|
|
return (
|
|
<code
|
|
className={className}
|
|
style={inline ? { background: 'rgba(14,165,233,0.15)', padding: '0.1rem 0.3rem', borderRadius: '0.25rem', fontFamily: 'monospace', fontSize: '0.85em' } : {}}
|
|
>
|
|
{children}
|
|
</code>
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
)}
|
|
|
|
{/* Plain Text */}
|
|
{isText && !isMarkdown && (
|
|
<pre
|
|
className="text-sm p-4 rounded overflow-auto"
|
|
style={{
|
|
background: 'rgba(15, 23, 42, 0.8)',
|
|
border: '1px solid rgba(14, 165, 233, 0.2)',
|
|
color: '#E2E8F0',
|
|
fontFamily: 'monospace',
|
|
whiteSpace: 'pre-wrap',
|
|
wordWrap: 'break-word',
|
|
maxHeight: '600px'
|
|
}}
|
|
>
|
|
{content}
|
|
</pre>
|
|
)}
|
|
|
|
{/* PDF */}
|
|
{isPDF && (
|
|
<div className="w-full" style={{ height: '700px' }}>
|
|
<iframe
|
|
sandbox="allow-same-origin"
|
|
src={`${API_BASE}/knowledge-base/${article.id}/content`}
|
|
title={article.title}
|
|
className="w-full h-full rounded"
|
|
style={{
|
|
border: '1px solid rgba(14, 165, 233, 0.3)',
|
|
background: 'rgba(15, 23, 42, 0.8)'
|
|
}}
|
|
>
|
|
<div className="text-center py-12">
|
|
<File className="w-16 h-16 mx-auto mb-4" style={{ color: '#EF4444' }} />
|
|
<p className="mb-4" style={{ color: '#94A3B8' }}>
|
|
Your browser doesn't support PDF preview. Click the download button to view this file.
|
|
</p>
|
|
<button onClick={handleDownload} className="intel-button intel-button-success">
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Download PDF
|
|
</button>
|
|
</div>
|
|
</iframe>
|
|
</div>
|
|
)}
|
|
|
|
{/* Images */}
|
|
{isImage && (
|
|
<div className="text-center">
|
|
<img
|
|
src={`${API_BASE}/knowledge-base/${article.id}/content`}
|
|
alt={article.title}
|
|
className="max-w-full h-auto rounded"
|
|
style={{ border: '1px solid rgba(14, 165, 233, 0.3)' }}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Other file types */}
|
|
{!isMarkdown && !isText && !isPDF && !isImage && (
|
|
<div className="text-center py-12">
|
|
<File className="w-16 h-16 mx-auto mb-4" style={{ color: '#94A3B8' }} />
|
|
<p className="mb-4" style={{ color: '#94A3B8' }}>
|
|
Preview not available for this file type.
|
|
</p>
|
|
<button onClick={handleDownload} className="intel-button intel-button-success">
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Download File
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|