@blank-utils/llm 0.3.8 → 0.3.10

package/dist/{chunk-SGV7RTM4.js → chunk-AIJOKRQN.js}

@@ -1101,32 +1101,41 @@ ${newText}` : newText);
 }
 
 // src/react/components.tsx
-import { RotateCcw, ChevronDown } from "lucide-react";
+import { RotateCcw, ChevronDown, AlertCircleIcon } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Streamdown } from "streamdown";
-import { createCodePlugin } from "@streamdown/code";
-import { createMermaidPlugin } from "@streamdown/mermaid";
-import { createMathPlugin } from "@streamdown/math";
+import { code } from "@streamdown/code";
+import { mermaid } from "@streamdown/mermaid";
+import { math } from "@streamdown/math";
 import "streamdown/styles.css";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var codePlugin = createCodePlugin({
-  themes: ["github-light", "github-dark"]
-});
-var mermaidPlugin = createMermaidPlugin({
-  config: {
-    theme: "base",
-    themeVariables: {
-      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+var CustomMermaidError = ({ error, retry }) => /* @__PURE__ */ jsxs3("div", { className: "rounded-lg border border-red-500/20 bg-red-500/10 p-4 my-4 font-sans", children: [
+  /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx3("span", { className: "text-xl", children: /* @__PURE__ */ jsx3(AlertCircleIcon, { className: "text-red-500" }) }),
+    /* @__PURE__ */ jsx3("p", { className: "font-semibold text-red-500 text-sm", children: "Failed to render Mermaid diagram" })
+  ] }),
+  /* @__PURE__ */ jsx3("div", { className: "mt-2 text-red-400/80 text-xs overflow-x-auto whitespace-pre-wrap font-mono", children: error }),
+  /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick: retry,
+      className: "mt-3 rounded bg-red-500/20 px-3 py-1.5 text-red-500 text-xs font-medium hover:bg-red-500/30 transition-colors",
+      children: "Try Again"
     }
+  )
+] });
+var streamdownControls = {
+  mermaid: {
+    fullscreen: true,
+    download: true,
+    copy: true,
+    panZoom: true
   }
-});
-var mathPlugin = createMathPlugin({
-  singleDollarTextMath: false
-});
+};
 var DEFAULT_SYSTEM_PROMPT = `You are a helpful AI assistant.
 - You can use full Markdown (bold, italic, headers, lists).
 - You can use Code Blocks with language syntax highlighting.
@@ -1260,6 +1269,14 @@ function Chat({
   const messagesEndRef = useRef3(null);
   const abortRef = useRef3(false);
   const isProcessingRef = useRef3(false);
+  const mermaidOptions = useMemo2(() => ({
+    errorComponent: CustomMermaidError,
+    config: {
+      theme: theme === "dark" ? "dark" : "default",
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      securityLevel: "strict"
+    }
+  }), [theme]);
   useEffect3(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, streamingText, isGenerating]);
@@ -1416,9 +1433,42 @@ function Chat({
       ] }),
       messages.map((msg, i) => /* @__PURE__ */ jsx3("div", { className: cn("flex flex-col max-w-[85%]", msg.role === "user" ? "self-end" : "self-start w-full"), children: msg.role === "user" ? /* @__PURE__ */ jsxs3("div", { className: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-5 py-3.5 rounded-[24px] rounded-br-[8px] sm:px-6 shadow-sm border border-zinc-200 dark:border-zinc-700/50", children: [
         msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-2 mb-3 mt-1", children: msg.images.map((img) => /* @__PURE__ */ jsx3("img", { src: img.dataUrl, className: "w-24 h-24 object-cover rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm", alt: "attachment" }, img.id)) }),
-        /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx3(Streamdown, { plugins: { code: codePlugin, mermaid: mermaidPlugin, math: mathPlugin }, components: markdownComponents, animated: true, isAnimating: false, children: msg.content }) })
-      ] }) : /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none px-2 w-full min-w-0", children: /* @__PURE__ */ jsx3(Streamdown, { plugins: { code: codePlugin, mermaid: mermaidPlugin, math: mathPlugin }, components: markdownComponents, animated: true, isAnimating: false, children: msg.content }) }) }, i)),
-      streamingText && /* @__PURE__ */ jsx3("div", { className: "flex flex-col self-start w-full max-w-[85%]", children: /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none px-2 w-full min-w-0", children: /* @__PURE__ */ jsx3(Streamdown, { plugins: { code: codePlugin, mermaid: mermaidPlugin, math: mathPlugin }, components: markdownComponents, animated: true, isAnimating: isGenerating, children: streamingText }) }) }),
+        /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx3(
+          Streamdown,
+          {
+            plugins: { code, mermaid, math },
+            components: markdownComponents,
+            animated: true,
+            isAnimating: false,
+            mermaid: mermaidOptions,
+            controls: streamdownControls,
+            children: msg.content
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none px-2 w-full min-w-0", children: /* @__PURE__ */ jsx3(
+        Streamdown,
+        {
+          plugins: { code, mermaid, math },
+          components: markdownComponents,
+          animated: true,
+          isAnimating: false,
+          mermaid: mermaidOptions,
+          controls: streamdownControls,
+          children: msg.content
+        }
+      ) }) }, i)),
+      streamingText && /* @__PURE__ */ jsx3("div", { className: "flex flex-col self-start w-full max-w-[85%]", children: /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none px-2 w-full min-w-0", children: /* @__PURE__ */ jsx3(
+        Streamdown,
+        {
+          plugins: { code, mermaid, math },
+          components: markdownComponents,
+          animated: true,
+          isAnimating: isGenerating,
+          mermaid: mermaidOptions,
+          controls: streamdownControls,
+          children: streamingText
+        }
+      ) }) }),
       /* @__PURE__ */ jsx3("div", { ref: messagesEndRef, className: "h-4" })
     ] }),
     /* @__PURE__ */ jsx3("div", { className: "p-4 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl border-t border-zinc-100 dark:border-zinc-800/80", children: /* @__PURE__ */ jsx3(