@blank-utils/llm 0.3.2 → 0.3.4

package/README.md

@@ -21,8 +21,10 @@
 - ⚛️ **React hooks** — `useChat`, `useStream`, `useCompletion` with eager background loading
 - 🔤 **Type-safe model selection** — full autocomplete for 30+ supported models across both backends
 - 📝 **Streaming support** — real-time token output with abort control
+- 📄 **PDF & Image Processing** — Extract text from PDFs natively and easily pass multimodal image attachments
 - 🔄 **Message queueing** — users can type while models download; messages are processed once ready
 - 🧩 **Vanilla JS friendly** — works outside React with DOM helpers and a simple `createLLM()` API
+- ⚡ **Instant Builds** — Bundled via `tsup` for lightning-fast compilation
 - 📦 **Zero config** — auto-detects WebGPU/WASM and picks the best backend
 
 ## Installation
@@ -408,6 +410,8 @@ import { ChatInput } from "@blank-utils/llm/react";
 - ⌨️ Enter to send, Shift+Enter for newline
 - ⏹️ Stop button while generating
 - 🎨 Dark/light theme support
+- 📄 **Drag-and-drop or click to upload PDF files for automatic local text extraction (OCR)**
+- 🖼️ **Paste/upload images directly into multimodal models**
 
 ---
 
@@ -508,10 +512,6 @@ You can use either the **alias** (short name) or the **full model ID** when spec
 | `qwen-2.5-7b`           | Qwen 2.5 7B                  | Large                       |
 | `qwen-2.5-coder-0.5b`   | Qwen 2.5 Coder 0.5B          | Code-focused                |
 | `qwen-2.5-coder-1.5b`   | Qwen 2.5 Coder 1.5B          | Code-focused                |
-| `qwen-3-0.6b`           | Qwen 3 0.6B                  | Latest gen                  |
-| `qwen-3-1.7b`           | Qwen 3 1.7B                  | Latest gen                  |
-| `qwen-3-4b`             | Qwen 3 4B                    | Latest gen                  |
-| `qwen-3-8b`             | Qwen 3 8B                    | Latest gen                  |
 | `gemma-2-2b`            | Gemma 2 2B                   | Google, efficient           |
 | `gemma-2-2b-1k`         | Gemma 2 2B (1K ctx)          | Lower memory                |
 | `gemma-2-9b`            | Gemma 2 9B                   | Large                       |
@@ -532,7 +532,6 @@ You can use either the **alias** (short name) or the **full model ID** when spec
 | `qwen-2.5-1.5b`       | `onnx-community/Qwen2.5-1.5B-Instruct`       | Good quality |
 | `qwen-2.5-coder-0.5b` | `onnx-community/Qwen2.5-Coder-0.5B-Instruct` | Code         |
 | `qwen-2.5-coder-1.5b` | `onnx-community/Qwen2.5-Coder-1.5B-Instruct` | Code         |
-| `qwen-3-0.6b`         | `onnx-community/Qwen3-0.6B-ONNX`             | Latest gen   |
 | `smollm2-135m`        | `HuggingFaceTB/SmolLM2-135M-Instruct`        | Ultra fast   |
 | `smollm2-360m`        | `HuggingFaceTB/SmolLM2-360M-Instruct`        | Fast         |
 | `smollm2-1.7b`        | `HuggingFaceTB/SmolLM2-1.7B-Instruct`        | Good         |
@@ -586,13 +585,10 @@ bun test
 
 ### Build Pipeline
 
-| Script        | What it does                                                                                                       |
-| ------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `clean`       | Removes `dist/`                                                                                                    |
-| `build:js`    | Bundles `src/index.ts` → `dist/index.js` and `src/react/index.tsx` → `dist/react/index.js` (ESM, externals: react) |
-| `postbuild`   | Copies WASM + ONNX runtime assets into `dist/` and `dist/react/`                                                   |
-| `build:types` | Generates `.d.ts` declaration files via `tsc`                                                                      |
-| `build`       | Runs all of the above in sequence                                                                                  |
+| Script  | What it does                                               |
+| ------- | ---------------------------------------------------------- |
+| `clean` | Removes `dist/`                                            |
+| `build` | Super-fast bundling via `tsup`, compiling ESM code & types |
 
 ### Package Exports
 

package/dist/{chunk-PNVU6364.js → chunk-365XIJLC.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 */
@@ -1923,7 +1992,7 @@ 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,
         {

package/dist/index.js

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

package/dist/react/index.js

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

package/package.json

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