@blank-utils/llm 0.3.9 → 0.3.11

package/dist/{chunk-35TEFO6H.js → chunk-D3AYWZX2.js}

@@ -1101,7 +1101,7 @@ ${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";
@@ -1113,10 +1113,39 @@ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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 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.
-- You can use Mermaid diagrams (\`\`\`mermaid ... \`\`\`).
+- You can use Mermaid diagrams to visualize structured data, processes, and architectures. 
+  - IMPORTANT: ALWAYS use exactly \`\`\`mermaid as the language tag. NEVER use \`\`\`mer, \`\`\`mmd, etc. 
+  - For example:
+    \`\`\`mermaid
+    graph TD
+      A --> B
+    \`\`\`
 - You can use LaTeX math ($$ ... $$).`;
 var ALL_MODELS = { ...WEBLLM_MODELS, ...TRANSFORMERS_MODELS };
 function isVisionModel2(modelId) {
@@ -1246,6 +1275,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]);
@@ -1402,9 +1439,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, mermaid, math }, 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, mermaid, math }, 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, mermaid, math }, 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(

package/dist/index.css

@@ -2559,6 +2559,9 @@ video {
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
 .break-all {
   word-break: break-all;
 }
@@ -2631,6 +2634,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
 }
+.border-red-500\/20 {
+  border-color: rgb(239 68 68 / 0.2);
+}
 .border-zinc-100 {
   --tw-border-opacity: 1;
   border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));
@@ -2684,6 +2690,12 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
 }
+.bg-red-500\/10 {
+  background-color: rgb(239 68 68 / 0.1);
+}
+.bg-red-500\/20 {
+  background-color: rgb(239 68 68 / 0.2);
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -2842,6 +2854,16 @@ video {
     "Courier New",
     monospace;
 }
+.font-sans {
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2926,6 +2948,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
+.text-red-400\/80 {
+  color: rgb(248 113 113 / 0.8);
+}
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity, 1));
@@ -3236,6 +3265,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-red-500\/30:hover {
+  background-color: rgb(239 68 68 / 0.3);
+}
 .hover\:bg-zinc-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));

package/dist/index.js

@@ -26,7 +26,7 @@ import {
   useCompletion,
   useLLM,
   useStream
-} from "./chunk-35TEFO6H.js";
+} from "./chunk-D3AYWZX2.js";
 export {
   Chat,
   ChatInput,

package/dist/react/index.css

@@ -2559,6 +2559,9 @@ video {
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
 .break-all {
   word-break: break-all;
 }
@@ -2631,6 +2634,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
 }
+.border-red-500\/20 {
+  border-color: rgb(239 68 68 / 0.2);
+}
 .border-zinc-100 {
   --tw-border-opacity: 1;
   border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));
@@ -2684,6 +2690,12 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
 }
+.bg-red-500\/10 {
+  background-color: rgb(239 68 68 / 0.1);
+}
+.bg-red-500\/20 {
+  background-color: rgb(239 68 68 / 0.2);
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -2842,6 +2854,16 @@ video {
     "Courier New",
     monospace;
 }
+.font-sans {
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2926,6 +2948,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
+.text-red-400\/80 {
+  color: rgb(248 113 113 / 0.8);
+}
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity, 1));
@@ -3236,6 +3265,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-red-500\/30:hover {
+  background-color: rgb(239 68 68 / 0.3);
+}
 .hover\:bg-zinc-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));

package/dist/react/index.js

@@ -9,7 +9,7 @@ import {
   useCompletion,
   useLLM,
   useStream
-} from "../chunk-35TEFO6H.js";
+} from "../chunk-D3AYWZX2.js";
 export {
   Chat,
   ChatApp,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blank-utils/llm",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Run LLMs directly in your browser with WebGPU acceleration. Supports React hooks and eager background loading.",
   "type": "module",
   "main": "./dist/index.js",