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

package/dist/components/mermaid-diagram.d.ts

@@ -4,5 +4,5 @@ interface MermaidDiagramProps {
     mermaidNotation: string;
     state?: string;
 }
-export declare function MermaidDiagram({ title, description, mermaidNotation, state }: MermaidDiagramProps): import("react/jsx-runtime").JSX.Element;
+export declare function MermaidDiagram({ title, description, mermaidNotation }: MermaidDiagramProps): import("react/jsx-runtime").JSX.Element;
 export {};

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));
@@ -12410,10 +12437,16 @@ function MermaidRender({ content, className }) {
     setZoom(1);
     setPan({ x: 0, y: 0 });
   };
-  const onWheel = useCallback((e) => {
-    e.preventDefault();
-    const delta = e.deltaY > 0 ? -0.1 : 0.1;
-    setZoom((z) => Math.min(Math.max(z + delta, 0.2), 4));
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      setZoom((z) => Math.min(Math.max(z + delta, 0.2), 4));
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
   }, []);
   const onMouseDown = useCallback((e) => {
     isDragging.current = true;
@@ -12438,19 +12471,18 @@ function MermaidRender({ content, className }) {
         "bg-[radial-gradient(circle,_#94a3b8_1px,_transparent_1px)] bg-[size:22px_22px] bg-slate-50",
         className
       ),
-      onWheel,
       onMouseDown,
       onMouseMove,
       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: [
@@ -12465,11 +12497,10 @@ function MermaidRender({ content, className }) {
 function MermaidDiagram({
   title,
   description,
-  mermaidNotation,
-  state
+  mermaidNotation
 }) {
   const [modalOpen, setModalOpen] = useState(false);
-  if (state !== "output-available") {
+  if (!mermaidNotation) {
     return /* @__PURE__ */ jsx("div", { className: "w-full h-[400px] rounded-lg border bg-muted/30 animate-pulse" });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [