79dad6124f
Turborepo monorepo with npm workspaces: - apps/web: Next.js 14 frontend with Tailwind v4, SSE progress, doc viewer - apps/worker: BullMQ job processor (clone → parse → LLM generate) - packages/shared: TypeScript types - packages/parser: Babel-based AST parser (JS/TS) + regex (Python) - packages/llm: OpenAI/Anthropic provider abstraction + prompt pipeline - packages/diagrams: Mermaid architecture & dependency graph generators - packages/database: Prisma schema (PostgreSQL) - Docker multi-stage build (web + worker targets) All packages compile successfully with tsc and next build.
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import mermaid from "mermaid";
|
|
|
|
interface MermaidDiagramProps {
|
|
chart: string;
|
|
}
|
|
|
|
export function MermaidDiagram({ chart }: MermaidDiagramProps) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isReady, setIsReady] = useState(false);
|
|
|
|
useEffect(() => {
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: "dark",
|
|
securityLevel: "loose",
|
|
themeVariables: {
|
|
darkMode: true,
|
|
background: "#0a0a0f",
|
|
primaryColor: "#1e3a5f",
|
|
primaryTextColor: "#ffffff",
|
|
primaryBorderColor: "#3b82f6",
|
|
lineColor: "#6366f1",
|
|
secondaryColor: "#1f2937",
|
|
tertiaryColor: "#374151",
|
|
fontFamily: "ui-monospace, monospace",
|
|
},
|
|
flowchart: {
|
|
useMaxWidth: true,
|
|
htmlLabels: true,
|
|
curve: "basis",
|
|
},
|
|
});
|
|
setIsReady(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!isReady || !containerRef.current || !chart) return;
|
|
|
|
const renderChart = async () => {
|
|
try {
|
|
const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
|
|
const { svg } = await mermaid.render(id, chart);
|
|
|
|
if (containerRef.current) {
|
|
containerRef.current.innerHTML = svg;
|
|
setError(null);
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to render diagram");
|
|
}
|
|
};
|
|
|
|
renderChart();
|
|
}, [chart, isReady]);
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20">
|
|
<p className="text-red-400 text-sm mb-2">Failed to render diagram</p>
|
|
<pre className="text-xs text-red-300/70 overflow-x-auto">{chart}</pre>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="mermaid-diagram overflow-x-auto"
|
|
style={{ minHeight: "100px" }}
|
|
>
|
|
{!isReady && (
|
|
<div className="flex items-center justify-center py-8">
|
|
<div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|