@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
54 lines (53 loc) • 1.71 kB
JavaScript
"use client";
import { mermaidThemes } from "../const.mjs";
import MermaidFallback from "./MermaidFallback.mjs";
import MermaidSvg from "./MermaidSvg.mjs";
import { useStreamMermaid } from "../../hooks/useStreamMermaid.mjs";
import { memo, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/Mermaid/SyntaxMermaid/StreamMermaid.tsx
const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {
const safeChildren = children ?? "";
const isDefaultTheme = customTheme === "lobe-theme" || !customTheme;
const background = useMemo(() => {
if (isDefaultTheme) return;
return mermaidThemes.find((item) => item.id === customTheme)?.background;
}, [isDefaultTheme, customTheme]);
const { svg, error, loading } = useStreamMermaid(safeChildren, {
enabled: true,
theme: isDefaultTheme ? void 0 : customTheme
});
const containerStyle = {
background: variant === "filled" ? background : void 0,
margin: 0,
minWidth: 300,
padding: variant === "borderless" ? 0 : 16,
position: "relative",
width: "100%",
...style
};
if (error && !loading) return /* @__PURE__ */ jsx(MermaidFallback, {
className: fallbackClassName,
message: error,
style,
children: safeChildren
});
if (!svg) return /* @__PURE__ */ jsx("div", {
className: fallbackClassName,
style,
children: /* @__PURE__ */ jsx("div", {
style: { padding: 16 },
children: "Rendering..."
})
});
return /* @__PURE__ */ jsx(MermaidSvg, {
className,
ref,
style: containerStyle,
svg
});
});
StreamMermaid.displayName = "StreamMermaid";
//#endregion
export { StreamMermaid as default };
//# sourceMappingURL=StreamMermaid.mjs.map