@docyrus/ui-pro-ai-assistant 0.6.3 → 0.6.4

package/dist/index.js

@@ -12377,10 +12377,23 @@ function GenerativeActionButton({
     }
   );
 }
+var STREAMING_DEBOUNCE_MS = 250;
+var mermaidPromise = null;
+var loadMermaid = () => {
+  if (!mermaidPromise) {
+    mermaidPromise = import('mermaid').then((mod) => {
+      mod.default.initialize({ startOnLoad: false, securityLevel: "loose" });
+      return mod.default;
+    });
+  }
+  return mermaidPromise;
+};
 function MermaidRender({ content, className }) {
   const containerRef = useRef(null);
-  const svgRef = useRef(null);
-  const [svg, setSvg] = useState("");
+  const svgHostRef = useRef(null);
+  const sandboxRef = useRef(null);
+  const [status, setStatus] = useState("idle");
+  const [errorMessage, setErrorMessage] = useState(null);
   const [zoom, setZoom] = useState(1);
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const isDragging = useRef(false);
@@ -12388,20 +12401,34 @@ function MermaidRender({ content, className }) {
   useEffect(() => {
     if (!content) return;
     let cancelled = false;
-    const render = async () => {
+    const debounce = window.setTimeout(async () => {
       try {
-        const { default: mermaid } = await import('mermaid');
-        mermaid.initialize({ startOnLoad: false, securityLevel: "loose" });
+        const mermaid = await loadMermaid();
+        if (cancelled) return;
+        const valid = await mermaid.parse(content, { suppressErrors: true });
+        if (cancelled) return;
+        if (!valid) {
+          setErrorMessage("Invalid mermaid syntax");
+          setStatus("error");
+          return;
+        }
         const id = `mermaid-${Math.random().toString(36).slice(2)}`;
-        const { svg: rendered } = await mermaid.render(id, content);
-        if (!cancelled) setSvg(rendered);
+        const sandbox = sandboxRef.current ?? void 0;
+        const { svg } = await mermaid.render(id, content, sandbox);
+        if (cancelled) return;
+        if (svgHostRef.current) svgHostRef.current.innerHTML = svg;
+        setErrorMessage(null);
+        setStatus("rendered");
       } catch (err) {
+        if (cancelled) return;
         console.error("Mermaid render error:", err);
+        setErrorMessage("Failed to render diagram");
+        setStatus("error");
       }
-    };
-    render();
+    }, STREAMING_DEBOUNCE_MS);
     return () => {
       cancelled = true;
+      window.clearTimeout(debounce);
     };
   }, [content]);
   const zoomIn = () => setZoom((z) => Math.min(z + 0.15, 4));
@@ -12449,13 +12476,13 @@ function MermaidRender({ content, className }) {
       onMouseUp,
       onMouseLeave: onMouseUp,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { ref: sandboxRef, "aria-hidden": true, className: "absolute -left-[99999px] top-0 h-0 w-0 overflow-hidden" }),
+        status === "error" ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center p-4 text-xs text-muted-foreground", children: errorMessage }) : /* @__PURE__ */ jsx(
           "div",
           {
-            ref: svgRef,
+            ref: svgHostRef,
             className: "absolute inset-0 flex items-center justify-center",
-            style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, transformOrigin: "center" },
-            dangerouslySetInnerHTML: { __html: svg }
+            style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, transformOrigin: "center" }
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-3 z-10 flex gap-1", children: [