@blank-utils/llm 0.3.3 → 0.3.5

package/dist/{chunk-PNVU6364.js → chunk-PA7F4CD6.js}

@@ -1551,10 +1551,13 @@ function injectChatStyles(theme) {
     .llm-chat-bubble--user {
       align-self: flex-end;
       max-width: 80%;
+      overflow-wrap: break-word;
     }
     .llm-chat-bubble--assistant {
       align-self: flex-start;
       width: 100%;
+      min-width: 0; /* Prevents flex children from expanding past 100% */
+      overflow-x: hidden;
     }
     
     /* User message \u2014 flat, subtle bg, no radius */
@@ -1568,30 +1571,96 @@ function injectChatStyles(theme) {
       color: ${text};
     }
     
-    /* Assistant message */
+    /* Streamdown Overrides / Markdown Styling */
     .llm-chat-assistant-content {
       font-size: 14px;
       line-height: 1.7;
-      color: ${d ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.85)"};
+      color: ${text};
+      word-wrap: break-word;
+    }
+    .llm-chat-assistant-content > *:first-child { margin-top: 0; }
+    .llm-chat-assistant-content > *:last-child { margin-bottom: 0; }
+    
+    .llm-chat-assistant-content p {
+      margin: 0 0 12px 0;
+    }
+    
+    .llm-chat-assistant-content h1,
+    .llm-chat-assistant-content h2,
+    .llm-chat-assistant-content h3,
+    .llm-chat-assistant-content h4 {
+      margin: 20px 0 10px 0;
+      color: ${text};
+      font-weight: 600;
+      line-height: 1.3;
+    }
+    .llm-chat-assistant-content h1 { font-size: 1.5em; }
+    .llm-chat-assistant-content h2 { font-size: 1.3em; }
+    .llm-chat-assistant-content h3 { font-size: 1.1em; }
+    
+    .llm-chat-assistant-content ul,
+    .llm-chat-assistant-content ol {
+      margin: 0 0 12px 0;
+      padding-left: 24px;
+    }
+    .llm-chat-assistant-content li {
+      margin-bottom: 4px;
     }
     
-    /* Streamdown Overrides */
     .llm-chat-assistant-content pre {
       background: ${surfaceSubtle} !important;
       border: 1px solid ${borderSubtle} !important;
-      border-radius: 0 !important;
+      border-radius: 6px !important;
       padding: 12px !important;
       margin: 12px 0 !important;
+      overflow-x: auto !important;
+      white-space: pre !important;
+      max-width: 100%;
     }
     .llm-chat-assistant-content code {
       font-family: ${monoFont} !important;
       font-size: 13px !important;
+      white-space: inherit;
     }
     .llm-chat-assistant-content :not(pre) > code {
       background: ${surfaceSubtle};
       border: 1px solid ${borderSubtle};
-      padding: 1px 5px;
+      border-radius: 4px;
+      padding: 2px 5px;
       font-size: 12.5px !important;
+      white-space: pre-wrap !important;
+      word-break: break-word;
+    }
+    
+    .llm-chat-assistant-content blockquote {
+      border-left: 3px solid ${borderSubtle};
+      margin: 0 0 12px 0;
+      padding-left: 12px;
+      color: ${textTertiary};
+    }
+    
+    .llm-chat-assistant-content a {
+      color: #3b82f6;
+      text-decoration: none;
+    }
+    .llm-chat-assistant-content a:hover {
+      text-decoration: underline;
+    }
+    
+    .llm-chat-assistant-content table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 12px 0;
+    }
+    .llm-chat-assistant-content th,
+    .llm-chat-assistant-content td {
+      border: 1px solid ${borderSubtle};
+      padding: 6px 10px;
+      text-align: left;
+    }
+    .llm-chat-assistant-content th {
+      background: ${surfaceSubtle};
+      font-weight: 600;
     }
     
     /* Attachments in message */
@@ -1643,12 +1712,29 @@ function injectChatStyles(theme) {
       background: ${d ? "rgba(255,50,50,0.08)" : "rgba(200,0,0,0.04)"};
     }
 
-    /* Input Area */
     .llm-chat-input-area {
       padding: 12px 16px 16px;
       border-top: 1px solid ${borderSubtle};
     }
 
+    /* Streamdown Animation CSS */
+    @keyframes sd-fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes sd-blurIn {
+      from { opacity: 0; filter: blur(4px); }
+      to { opacity: 1; filter: blur(0); }
+    }
+    @keyframes sd-slideUp {
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    [data-sd-animate] {
+      animation: var(--sd-animation, sd-fadeIn) var(--sd-duration, 150ms)
+        var(--sd-easing, ease) both;
+    }
+
     @keyframes llm-pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.2; }
@@ -1923,11 +2009,13 @@ function Chat({
       ] }),
       messages.map((msg, i) => /* @__PURE__ */ jsx3("div", { className: `llm-chat-bubble llm-chat-bubble--${msg.role}`, children: msg.role === "user" ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
         msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx3("div", { className: "llm-chat-msg-images", children: msg.images.map((img) => /* @__PURE__ */ jsx3("img", { src: img.dataUrl, className: "llm-chat-msg-img", alt: "attachment" }, img.id)) }),
-        /* @__PURE__ */ jsx3("div", { className: "llm-chat-user-content", children: msg.content })
+        /* @__PURE__ */ jsx3("div", { className: "llm-chat-user-content", style: { padding: "0px" }, children: /* @__PURE__ */ jsx3("div", { className: "llm-chat-assistant-content", style: { padding: "10px 14px" }, children: /* @__PURE__ */ jsx3(Streamdown, { plugins: { code, mermaid }, children: msg.content }) }) })
       ] }) : /* @__PURE__ */ jsx3("div", { className: "llm-chat-assistant-content", children: /* @__PURE__ */ jsx3(
         Streamdown,
         {
           plugins: { code, mermaid },
+          animated: true,
+          isAnimating: false,
           children: msg.content
         }
       ) }) }, i)),
@@ -1935,6 +2023,8 @@ function Chat({
         Streamdown,
         {
           plugins: { code, mermaid },
+          animated: true,
+          isAnimating: isGenerating,
           children: streamingText
         }
       ) }) }),

package/dist/index.js

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

package/dist/react/index.js

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

package/package.json

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