@mieweb/ui 0.6.1-dev.166 → 0.6.1-dev.168

package/dist/components/SuperChat/plugins/index.js

@@ -36,7 +36,7 @@ function CopyablePre({
         type: "button",
         onClick: onCopy,
         "aria-label": copied ? "Copied" : "Copy code",
-        className: "absolute top-2 right-2 rounded-md bg-neutral-700/80 px-2 py-1 text-xs text-neutral-100 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-neutral-600 focus-visible:opacity-100",
+        className: "absolute top-2 right-2 rounded-md border border-neutral-300 bg-white/80 px-2 py-1 text-xs text-neutral-700 opacity-0 shadow-sm transition-opacity group-hover:opacity-100 hover:bg-neutral-100 focus-visible:opacity-100 dark:border-neutral-600 dark:bg-neutral-700/80 dark:text-neutral-100 dark:hover:bg-neutral-600",
         children: copied ? "Copied" : "Copy"
       }
     ),
@@ -47,7 +47,9 @@ function CopyablePre({
         ref,
         tabIndex: 0,
         className: cn(
-          "overflow-x-auto rounded-lg bg-neutral-900 p-3 text-sm text-neutral-100 dark:bg-neutral-950",
+          // Background/text follow the theme so light mode matches the
+          // atom-one-light hljs palette (dark background looked out of place).
+          "overflow-x-auto rounded-lg border border-neutral-200 bg-neutral-50 p-3 text-sm text-neutral-800 dark:border-transparent dark:bg-neutral-900 dark:text-neutral-100",
           props.className
         )
       }
@@ -342,6 +344,23 @@ function createGenUIPlugin(registry) {
   };
 }
 var MERMAID_TAG = "mermaid-diagram";
+var MERMAID_DECLARATION_RE = /^\s*(?:flowchart|graph|sequenceDiagram|classDiagram|stateDiagram(?:-v2)?|erDiagram|journey|gantt|pie|mindmap|timeline|gitGraph|quadrantChart|requirementDiagram|block-beta|xychart-beta)\b/;
+var FENCE_LINE_RE = /^\s*```[\w-]*\s*$/;
+var MERMAID_DIRECTIVE_RE = /^\s*%%/;
+function normalizeMermaidSource(code) {
+  const lines = code.split(/\r?\n/);
+  const stripped = lines.filter((line) => !FENCE_LINE_RE.test(line));
+  const declarationIdx = stripped.findIndex(
+    (line) => MERMAID_DECLARATION_RE.test(line)
+  );
+  if (declarationIdx < 0) return stripped.join("\n").trim();
+  const preamble = [];
+  for (let i = 0; i < declarationIdx; i += 1) {
+    const line = stripped[i];
+    if (MERMAID_DIRECTIVE_RE.test(line)) preamble.push(line);
+  }
+  return [...preamble, ...stripped.slice(declarationIdx)].join("\n").trim();
+}
 function textOf2(node) {
   if (node.type === "text") return node.value ?? "";
   return (node.children ?? []).map(textOf2).join("");
@@ -409,6 +428,23 @@ function InertFallback2({ raw }) {
 }
 var mermaidReady = null;
 var mermaidTheme = null;
+async function renderMermaidWithRecovery(mermaid, id, source) {
+  const lines = source.split(/\r?\n/).map((line) => line.trimEnd());
+  let lastError;
+  for (let end = lines.length; end >= 1; end -= 1) {
+    const candidate = lines.slice(0, end).join("\n").trim();
+    if (!candidate) continue;
+    try {
+      return await mermaid.render(id, candidate);
+    } catch (error) {
+      lastError = error;
+    }
+  }
+  if (lastError instanceof Error) throw lastError;
+  throw new Error(
+    typeof lastError === "string" ? lastError : `Failed to parse mermaid diagram: ${String(lastError)}`
+  );
+}
 function loadMermaid(dark) {
   const theme = dark ? "dark" : "default";
   if (!mermaidReady || mermaidTheme !== theme) {
@@ -417,27 +453,55 @@ function loadMermaid(dark) {
       mermaid.initialize({
         startOnLoad: false,
         securityLevel: "strict",
-        theme
+        theme,
+        flowchart: { useMaxWidth: false },
+        themeVariables: { fontSize: "16px" }
       });
       return mermaid;
     });
   }
   return mermaidReady;
 }
+function isDarkMode() {
+  if (typeof document === "undefined") return false;
+  const root = document.documentElement;
+  return root.classList.contains("dark") || root.getAttribute("data-theme") === "dark";
+}
+function useIsDarkMode() {
+  const [dark, setDark] = React2.useState(isDarkMode);
+  React2.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const update = () => setDark(isDarkMode());
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return dark;
+}
 var mermaidSeq = 0;
 function MermaidDiagram({ code }) {
   const { streaming } = useTextRenderContext();
+  const dark = useIsDarkMode();
   const [svg, setSvg] = React2.useState(null);
   const [failed, setFailed] = React2.useState(false);
-  const idRef = React2.useRef(`superchat-mermaid-${mermaidSeq += 1}`);
-  const source = code.trim();
+  const idRef = React2.useRef(null);
+  if (idRef.current === null) {
+    mermaidSeq += 1;
+    idRef.current = `superchat-mermaid-${mermaidSeq}`;
+  }
+  const id = idRef.current;
+  const source = React2.useMemo(() => normalizeMermaidSource(code), [code]);
   React2.useEffect(() => {
     if (streaming || !source) return;
     let active = true;
     setSvg(null);
     setFailed(false);
-    const dark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
-    void loadMermaid(dark).then((mermaid) => mermaid.render(idRef.current, source)).then(({ svg: rendered }) => {
+    void loadMermaid(dark).then((mermaid) => renderMermaidWithRecovery(mermaid, id, source)).then(({ svg: rendered }) => {
       if (active) setSvg(rendered);
     }).catch(() => {
       if (active) setFailed(true);
@@ -445,7 +509,7 @@ function MermaidDiagram({ code }) {
     return () => {
       active = false;
     };
-  }, [source, streaming]);
+  }, [source, streaming, dark, id]);
   if (!source && !streaming) return /* @__PURE__ */ jsx(InertFallback2, { raw: code });
   if (failed) return /* @__PURE__ */ jsx(InertFallback2, { raw: code });
   if (streaming || svg === null) {
@@ -455,7 +519,7 @@ function MermaidDiagram({ code }) {
     "div",
     {
       "data-slot": "superchat-mermaid",
-      className: "my-2 overflow-x-auto",
+      className: "my-2 overflow-x-auto [&_svg]:h-auto [&_svg]:max-w-none",
       dangerouslySetInnerHTML: { __html: svg }
     }
   );