@blank-utils/llm 0.3.10 → 0.3.12

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

@@ -1101,10 +1101,10 @@ ${newText}` : newText);
 }
 
 // src/react/components.tsx
-import { RotateCcw, ChevronDown, AlertCircleIcon } from "lucide-react";
+import { RotateCcw, ChevronDown, AlertCircle } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { Streamdown } from "streamdown";
+import { Streamdown, parseMarkdownIntoBlocks } from "streamdown";
 import { code } from "@streamdown/code";
 import { mermaid } from "@streamdown/mermaid";
 import { math } from "@streamdown/math";
@@ -1113,9 +1113,14 @@ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function sanitizeMarkdownLanguageBlocks(markdown) {
+  let cleanMarkdown = markdown;
+  cleanMarkdown = cleanMarkdown.replace(/```(?:mer|merma|mermai|mmd)\n/gi, "```mermaid\n");
+  return parseMarkdownIntoBlocks(cleanMarkdown);
+}
 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("span", { className: "text-xl", children: /* @__PURE__ */ jsx3(AlertCircle, { className: "w-5 h-5 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 }),
@@ -1139,7 +1144,13 @@ var streamdownControls = {
 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) {
@@ -1442,6 +1453,7 @@ function Chat({
             isAnimating: false,
             mermaid: mermaidOptions,
             controls: streamdownControls,
+            parseMarkdownIntoBlocksFn: sanitizeMarkdownLanguageBlocks,
             children: msg.content
           }
         ) })
@@ -1454,6 +1466,7 @@ function Chat({
           isAnimating: false,
           mermaid: mermaidOptions,
           controls: streamdownControls,
+          parseMarkdownIntoBlocksFn: sanitizeMarkdownLanguageBlocks,
           children: msg.content
         }
       ) }) }, i)),
@@ -1466,6 +1479,7 @@ function Chat({
           isAnimating: isGenerating,
           mermaid: mermaidOptions,
           controls: streamdownControls,
+          parseMarkdownIntoBlocksFn: sanitizeMarkdownLanguageBlocks,
           children: streamingText
         }
       ) }) }),

package/dist/index.js

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

package/dist/react/index.js

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

package/package.json

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