@brainfish-ai/components 0.23.0 → 0.23.2

package/dist/esm/chunks/{FormattedMessage.DFWDPJoI.js → FormattedMessage.Br7XTLD2.js}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { memo, useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import React__default, { memo, useState, useEffect, useMemo, useCallback, Suspense, lazy } from 'react';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import { match, compile } from 'path-to-regexp';
@@ -8,7 +8,6 @@ import { Button } from '../components/ui/button.js';
 import { _ as _extends } from './extends.mO86zOh3.js';
 import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers.BFTU3MAI.js';
 import ReactMarkdown from 'react-markdown';
-import mermaid from 'mermaid';
 import { AnimatePresence, motion } from 'framer-motion';
 import { i as isAnswerUncertain } from './utils.Cwtlq8dh.js';
 
@@ -39350,51 +39349,6 @@ const MemoizedReactMarkdown = memo(
   (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.isStreaming === nextProps.isStreaming
 );
 
-const config = {
-  startOnLoad: false,
-  theme: "default",
-  securityLevel: "loose",
-  fontFamily: "inherit",
-  secure: ["secure", "securityLevel", "startOnLoad", "maxTextSize"]
-};
-const MermaidDiagram = ({ content }) => {
-  const [svg, setSvg] = useState("");
-  const [error, setError] = useState(null);
-  const containerRef = useRef(null);
-  const [isInitialized, setIsInitialized] = useState(false);
-  useEffect(() => {
-    const initializeMermaid = () => {
-      try {
-        mermaid.initialize(config);
-        setIsInitialized(true);
-      } catch (err) {
-        console.error("Error initializing mermaid:", err);
-        setError("Failed to initialize diagram renderer");
-      }
-    };
-    initializeMermaid();
-  }, []);
-  useEffect(() => {
-    if (!isInitialized) return;
-    const renderDiagram = async () => {
-      try {
-        const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
-        const { svg: svg2 } = await mermaid.render(id, content);
-        setSvg(svg2);
-        setError(null);
-      } catch (err) {
-        console.error("Error rendering mermaid diagram:", err);
-        setError("Failed to render diagram");
-      }
-    };
-    void renderDiagram();
-  }, [content, isInitialized]);
-  if (error) {
-    return /* @__PURE__ */ React__default.createElement("div", { className: "text-red-500 bg-red-50 p-4 rounded-md" }, error, /* @__PURE__ */ React__default.createElement("pre", { className: "mt-2 text-sm" }, content));
-  }
-  return /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, className: "my-4 overflow-auto", dangerouslySetInnerHTML: { __html: svg } });
-};
-
 const ZoomableImage = ({ src, alt }) => {
   const [isZoomed, setIsZoomed] = React.useState(false);
   const [showFullCaption, setShowFullCaption] = React.useState(false);
@@ -39544,6 +39498,7 @@ async function getContentType(attachmentId, contentTypeEndpoint, signal) {
   }
 }
 
+const MermaidDiagram = lazy(() => import('./MermaidDiagram.xQ0CVFOI.js').then((m) => ({ default: m.MermaidDiagram })));
 const videoContentTypePrefix = "[Content: Video]";
 const videoContentTypePrefixRegexp = new RegExp("^\\" + videoContentTypePrefix);
 const FormattedMessage = memo(({ message, isStreaming, redirectRules = [], contentTypeEndpoint }) => {
@@ -39655,7 +39610,7 @@ const FormattedMessage = memo(({ message, isStreaming, redirectRules = [], conte
           const match2 = /language-(\w+)/.exec(className || "");
           const language = match2 && match2[1];
           if (!inline && (language === "mermaid" || language === "mermaidjs")) {
-            return /* @__PURE__ */ React__default.createElement(MermaidDiagram, { content: String(children).replace(/\n$/, "") });
+            return /* @__PURE__ */ React__default.createElement(Suspense, { fallback: /* @__PURE__ */ React__default.createElement("div", { className: "my-4 h-12 animate-pulse rounded bg-slate-100" }) }, /* @__PURE__ */ React__default.createElement(MermaidDiagram, { content: String(children).replace(/\n$/, "") }));
           }
           return !inline && language ? /* @__PURE__ */ React__default.createElement(CodeBlock, { key: Math.random(), language, value: String(children).replace(/\n$/, ""), ...props }) : /* @__PURE__ */ React__default.createElement(
             "code",
@@ -39756,5 +39711,5 @@ const FormattedMessage = memo(({ message, isStreaming, redirectRules = [], conte
 });
 FormattedMessage.displayName = "FormattedMessage";
 
-export { CodeBlock as C, FormattedMessage as F, MemoizedReactMarkdown as M, ZoomableImage as Z, MermaidDiagram as a, addPopupWidgetUtm as b, addUtmParameters as c };
-//# sourceMappingURL=FormattedMessage.DFWDPJoI.js.map
+export { CodeBlock as C, FormattedMessage as F, MemoizedReactMarkdown as M, ZoomableImage as Z, addPopupWidgetUtm as a, addUtmParameters as b };
+//# sourceMappingURL=FormattedMessage.Br7XTLD2.js.map