49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client";
|
|
import { useI18n } from "@/components/i18n";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
import type { MermaidErrorComponentProps } from "streamdown";
|
|
|
|
/**
|
|
* Fallback for mermaid diagrams that fail to parse — wired via Streamdown's
|
|
* `mermaid.errorComponent`. Replaces the default light-themed red box with a
|
|
* card matching the app: the error, the source in a details block (so a
|
|
* broken diagram doesn't flood the transcript), and a retry.
|
|
*/
|
|
export const MermaidError = ({
|
|
chart,
|
|
error,
|
|
retry,
|
|
className,
|
|
}: MermaidErrorComponentProps & { className?: string }) => {
|
|
const { t } = useI18n();
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"my-4 rounded-xl border border-destructive/40 bg-destructive/5 p-4",
|
|
className,
|
|
)}
|
|
data-streamdown="mermaid-error"
|
|
>
|
|
<p className="text-sm font-medium text-destructive">
|
|
{t("Diagram failed to render")}
|
|
</p>
|
|
<p className="mt-1 font-mono text-xs break-words text-muted-foreground">
|
|
{error}
|
|
</p>
|
|
<details className="mt-3">
|
|
<summary className="cursor-pointer text-xs text-muted-foreground">
|
|
{t("Show diagram source")}
|
|
</summary>
|
|
<pre className="mt-2 overflow-x-auto rounded-lg bg-muted p-3 font-mono text-xs text-foreground">
|
|
{chart}
|
|
</pre>
|
|
</details>
|
|
<Button className="mt-3" onClick={retry} size="sm" variant="outline">
|
|
{t("Retry")}
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|