@blank-utils/llm 0.2.2 → 0.2.6

package/dist/react/index.js

@@ -57,10 +57,10 @@ function getAugmentedNamespace(n) {
     return n;
   var f = n.default;
   if (typeof f == "function") {
-    var a = function a() {
+    var a = function a2() {
       var isInstance = false;
       try {
-        isInstance = this instanceof a;
+        isInstance = this instanceof a2;
       } catch {}
       if (isInstance) {
         return Reflect.construct(f, arguments, this.constructor);
@@ -56542,11 +56542,11 @@ ${fake_token_around_image}` + `${global_img_token}` + image_token.repeat(image_s
 import {
   createContext,
   useContext,
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef
+  useState as useState3,
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef3
 } from "react";
 
 // src/detect.ts
@@ -56594,7 +56594,7 @@ async function detectCapabilities() {
   };
 }
 
-// src/backends/webllm.ts
+// src/models.ts
 var DEFAULT_WEBLLM_MODEL = "Phi-3.5-mini-instruct-q4f16_1-MLC";
 var WEBLLM_MODELS = {
   "llama-3.2-1b": "Llama-3.2-1B-Instruct-q4f16_1-MLC",
@@ -56626,6 +56626,21 @@ var WEBLLM_MODELS = {
   "hermes-3-llama-3.2-3b": "Hermes-3-Llama-3.2-3B-q4f16_1-MLC",
   "hermes-3-llama-3.1-8b": "Hermes-3-Llama-3.1-8B-q4f16_1-MLC"
 };
+var DEFAULT_TRANSFORMERS_MODEL = "onnx-community/Qwen2.5-0.5B-Instruct";
+var TRANSFORMERS_MODELS = {
+  "qwen-2.5-0.5b": "onnx-community/Qwen2.5-0.5B-Instruct",
+  "qwen-2.5-1.5b": "onnx-community/Qwen2.5-1.5B-Instruct",
+  "qwen-2.5-coder-0.5b": "onnx-community/Qwen2.5-Coder-0.5B-Instruct",
+  "qwen-2.5-coder-1.5b": "onnx-community/Qwen2.5-Coder-1.5B-Instruct",
+  "qwen-3-0.6b": "onnx-community/Qwen3-0.6B-ONNX",
+  "smollm2-135m": "HuggingFaceTB/SmolLM2-135M-Instruct",
+  "smollm2-360m": "HuggingFaceTB/SmolLM2-360M-Instruct",
+  "smollm2-1.7b": "HuggingFaceTB/SmolLM2-1.7B-Instruct",
+  "phi-3-mini": "Xenova/Phi-3-mini-4k-instruct",
+  tinyllama: "Xenova/TinyLlama-1.1B-Chat-v1.0"
+};
+
+// src/backends/webllm.ts
 function resolveModelId(model) {
   if (model in WEBLLM_MODELS) {
     return WEBLLM_MODELS[model];
@@ -56711,19 +56726,6 @@ class WebLLMProvider {
 }
 
 // src/backends/transformers.ts
-var DEFAULT_TRANSFORMERS_MODEL = "onnx-community/Qwen2.5-0.5B-Instruct";
-var TRANSFORMERS_MODELS = {
-  "qwen-2.5-0.5b": "onnx-community/Qwen2.5-0.5B-Instruct",
-  "qwen-2.5-1.5b": "onnx-community/Qwen2.5-1.5B-Instruct",
-  "qwen-2.5-coder-0.5b": "onnx-community/Qwen2.5-Coder-0.5B-Instruct",
-  "qwen-2.5-coder-1.5b": "onnx-community/Qwen2.5-Coder-1.5B-Instruct",
-  "qwen-3-0.6b": "onnx-community/Qwen3-0.6B-ONNX",
-  "smollm2-135m": "HuggingFaceTB/SmolLM2-135M-Instruct",
-  "smollm2-360m": "HuggingFaceTB/SmolLM2-360M-Instruct",
-  "smollm2-1.7b": "HuggingFaceTB/SmolLM2-1.7B-Instruct",
-  "phi-3-mini": "Xenova/Phi-3-mini-4k-instruct",
-  tinyllama: "Xenova/TinyLlama-1.1B-Chat-v1.0"
-};
 function detectChatFormat(modelId) {
   const lower = modelId.toLowerCase();
   if (lower.includes("qwen") || lower.includes("smollm")) {
@@ -57062,8 +57064,1204 @@ async function createLLM(config = {}) {
   return llm;
 }
 
-// src/react/index.tsx
+// src/react/components.tsx
+import { useRef as useRef2, useEffect as useEffect2, useState as useState2, useMemo } from "react";
+
+// src/react/chat-input.tsx
+import { useRef, useEffect, useCallback, useState } from "react";
 import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+function SendIcon() {
+  return /* @__PURE__ */ jsxDEV("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsxDEV("line", {
+        x1: "5",
+        y1: "12",
+        x2: "19",
+        y2: "12"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("polyline", {
+        points: "12 5 19 12 12 19"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function StopIcon() {
+  return /* @__PURE__ */ jsxDEV("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxDEV("rect", {
+      x: "6",
+      y: "6",
+      width: "12",
+      height: "12"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function ImageIcon() {
+  return /* @__PURE__ */ jsxDEV("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsxDEV("rect", {
+        x: "3",
+        y: "3",
+        width: "18",
+        height: "18",
+        rx: "0",
+        ry: "0"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("circle", {
+        cx: "8.5",
+        cy: "8.5",
+        r: "1.5"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("polyline", {
+        points: "21 15 16 10 5 21"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function XIcon() {
+  return /* @__PURE__ */ jsxDEV("svg", {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsxDEV("line", {
+        x1: "18",
+        y1: "6",
+        x2: "6",
+        y2: "18"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("line", {
+        x1: "6",
+        y1: "6",
+        x2: "18",
+        y2: "18"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var STYLE_ID = "__llm-chat-input-styles";
+function injectStyles(theme) {
+  if (typeof document === "undefined")
+    return;
+  const existing = document.getElementById(STYLE_ID);
+  if (existing)
+    existing.remove();
+  const d = theme === "dark";
+  const border = d ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)";
+  const borderFocus = d ? "rgba(255,255,255,0.35)" : "rgba(0,0,0,0.35)";
+  const bg2 = d ? "#000000" : "#ffffff";
+  const text = d ? "#ffffff" : "#000000";
+  const textMuted = d ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.3)";
+  const textSecondary = d ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  const monoFont = `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`;
+  const sansFont = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif`;
+  const css = `
+    .llm-ci {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid ${border};
+      background: ${bg2};
+      padding: 12px;
+      transition: border-color 0.15s;
+      position: relative;
+    }
+    .llm-ci:focus-within {
+      border-color: ${borderFocus};
+    }
+
+    /* Attached Images */
+    .llm-ci-images {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+    .llm-ci-image-preview {
+      position: relative;
+      width: 52px;
+      height: 52px;
+      overflow: hidden;
+      border: 1px solid ${border};
+    }
+    .llm-ci-image-preview img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .llm-ci-image-remove {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      width: 16px;
+      height: 16px;
+      background: ${d ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.8)"};
+      color: ${text};
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.1s;
+    }
+    .llm-ci-image-preview:hover .llm-ci-image-remove {
+      opacity: 1;
+    }
+
+    /* Textarea */
+    .llm-ci textarea {
+      width: 100%;
+      min-height: 24px;
+      max-height: 200px;
+      resize: none;
+      border: none;
+      outline: none;
+      background: transparent;
+      color: ${text};
+      font-size: 14px;
+      line-height: 1.5;
+      padding: 0;
+      margin: 0;
+      font-family: ${sansFont};
+      scrollbar-width: thin;
+    }
+    .llm-ci textarea::placeholder {
+      color: ${textMuted};
+    }
+
+    /* Toolbar */
+    .llm-ci-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 8px;
+      min-height: 28px;
+    }
+    .llm-ci-left-actions {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+    .llm-ci-right-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    /* Icon Buttons */
+    .llm-ci-btn-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: transparent;
+      color: ${textSecondary};
+      cursor: pointer;
+      transition: color 0.1s;
+    }
+    .llm-ci-btn-icon:hover {
+      color: ${text};
+    }
+
+    /* Send / Stop — flat, monospace, uppercase */
+    .llm-ci-send {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 28px;
+      padding: 0 12px;
+      border: 1px solid ${border};
+      font-size: 10px;
+      font-weight: 400;
+      font-family: ${monoFont};
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      cursor: pointer;
+      transition: all 0.1s;
+      gap: 6px;
+      background: transparent;
+      color: ${textSecondary};
+    }
+    .llm-ci-send--active {
+      background: ${text};
+      color: ${bg2};
+      border-color: ${text};
+    }
+    .llm-ci-send--active:hover {
+      opacity: 0.8;
+    }
+    .llm-ci-send--disabled {
+      color: ${textMuted};
+      border-color: ${d ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)"};
+      cursor: not-allowed;
+    }
+    .llm-ci-send--stop {
+      background: transparent;
+      border-color: ${border};
+      color: ${textSecondary};
+    }
+    .llm-ci-send--stop:hover {
+      border-color: ${borderFocus};
+      color: ${text};
+    }
+
+    /* Model Selector Slot */
+    .llm-ci-model-selector {
+      margin-right: auto;
+    }
+
+    /* Hidden file input */
+    .llm-ci-file-input {
+      display: none;
+    }
+
+    /* Drag Overlay */
+    .llm-ci-drag-overlay {
+      position: absolute;
+      inset: 0;
+      background: ${d ? "rgba(0,0,0,0.9)" : "rgba(255,255,255,0.9)"};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      border: 1px dashed ${textSecondary};
+      color: ${textSecondary};
+      font-size: 11px;
+      font-family: ${monoFont};
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+  `;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+function ChatInput({
+  value,
+  onChange,
+  onSend,
+  onStop,
+  disabled = false,
+  isGenerating = false,
+  placeholder = "Type a message...",
+  maxRows = 8,
+  actions,
+  theme = "dark",
+  className,
+  images = [],
+  onImageAdd,
+  onImageRemove,
+  modelSelector
+}) {
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  useEffect(() => {
+    injectStyles(theme);
+  }, [theme]);
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea)
+      return;
+    textarea.style.height = "auto";
+    const lineHeight = 21;
+    const maxHeight = lineHeight * maxRows + 24;
+    const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+    textarea.style.height = `${newHeight}px`;
+  }, [value, maxRows]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (!disabled && (value.trim() || images.length > 0)) {
+        onSend();
+      }
+    }
+  }, [disabled, value, images.length, onSend]);
+  const processFile = useCallback((file) => {
+    if (!file.type.startsWith("image/"))
+      return;
+    const reader = new FileReader;
+    reader.onload = (e) => {
+      if (e.target?.result && typeof e.target.result === "string") {
+        const id2 = Math.random().toString(36).substring(7);
+        onImageAdd?.({
+          id: id2,
+          dataUrl: e.target.result,
+          file,
+          name: file.name
+        });
+      }
+    };
+    reader.readAsDataURL(file);
+  }, [onImageAdd]);
+  const handlePaste = useCallback((e) => {
+    const items = e.clipboardData.items;
+    for (let i = 0;i < items.length; i++) {
+      const item = items[i];
+      if (item && item.type.indexOf("image") !== -1) {
+        const file = item.getAsFile();
+        if (file)
+          processFile(file);
+      }
+    }
+  }, [processFile]);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const files = e.dataTransfer.files;
+    for (let i = 0;i < files.length; i++) {
+      const file = files.item(i);
+      if (file)
+        processFile(file);
+    }
+  }, [processFile]);
+  const handleFileSelect = useCallback((e) => {
+    const files = e.target.files;
+    if (!files)
+      return;
+    for (let i = 0;i < files.length; i++) {
+      const file = files.item(i);
+      if (file)
+        processFile(file);
+    }
+    e.target.value = "";
+  }, [processFile]);
+  const hasValue = value.trim().length > 0 || images.length > 0;
+  const canSend = hasValue && !disabled && !isGenerating;
+  let sendClass = "llm-ci-send";
+  if (isGenerating) {
+    sendClass += " llm-ci-send--stop";
+  } else if (canSend) {
+    sendClass += " llm-ci-send--active";
+  } else {
+    sendClass += " llm-ci-send--disabled";
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: `llm-ci${className ? ` ${className}` : ""}`,
+    onDragOver: (e) => {
+      e.preventDefault();
+      setIsDragging(true);
+    },
+    onDragLeave: () => setIsDragging(false),
+    onDrop: handleDrop,
+    children: [
+      isDragging && /* @__PURE__ */ jsxDEV("div", {
+        className: "llm-ci-drag-overlay",
+        children: "[Drop image to attach]"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        multiple: true,
+        className: "llm-ci-file-input",
+        onChange: handleFileSelect
+      }, undefined, false, undefined, this),
+      images.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+        className: "llm-ci-images",
+        children: images.map((img) => /* @__PURE__ */ jsxDEV("div", {
+          className: "llm-ci-image-preview",
+          children: [
+            /* @__PURE__ */ jsxDEV("img", {
+              src: img.dataUrl,
+              alt: "attachment"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("button", {
+              type: "button",
+              className: "llm-ci-image-remove",
+              onClick: () => onImageRemove?.(img.id),
+              children: /* @__PURE__ */ jsxDEV(XIcon, {}, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, img.id, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("textarea", {
+        ref: textareaRef,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        onPaste: handlePaste,
+        placeholder,
+        disabled: disabled && !isGenerating,
+        rows: 1
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "llm-ci-toolbar",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "llm-ci-left-actions",
+            children: [
+              modelSelector && /* @__PURE__ */ jsxDEV("div", {
+                className: "llm-ci-model-selector",
+                children: modelSelector
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("button", {
+                type: "button",
+                className: "llm-ci-btn-icon",
+                onClick: () => fileInputRef.current?.click(),
+                title: "Attach image (or Ctrl+V to paste)",
+                children: /* @__PURE__ */ jsxDEV(ImageIcon, {}, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              actions
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "llm-ci-right-actions",
+            children: /* @__PURE__ */ jsxDEV("button", {
+              type: "button",
+              className: sendClass,
+              onClick: isGenerating ? onStop : onSend,
+              disabled: !isGenerating && !canSend,
+              "aria-label": isGenerating ? "Stop generation" : "Send message",
+              children: isGenerating ? /* @__PURE__ */ jsxDEV(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsxDEV(StopIcon, {}, undefined, false, undefined, this),
+                  " Stop"
+                ]
+              }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV(Fragment, {
+                children: [
+                  "Send ",
+                  /* @__PURE__ */ jsxDEV(SendIcon, {}, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/react/components.tsx
+import { Streamdown } from "streamdown";
+import { code } from "@streamdown/code";
+import { mermaid } from "@streamdown/mermaid";
+import { jsxDEV as jsxDEV2, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+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 LaTeX math ($$ ... $$).`;
+var ALL_MODELS = { ...WEBLLM_MODELS, ...TRANSFORMERS_MODELS };
+function RetryIcon() {
+  return /* @__PURE__ */ jsxDEV2("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsxDEV2("polyline", {
+        points: "23 4 23 10 17 10"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("path", {
+        d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsxDEV2("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsxDEV2("polyline", {
+      points: "6 9 12 15 18 9"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var STYLE_ID2 = "__llm-chat-styles";
+function injectChatStyles(theme) {
+  if (typeof document === "undefined")
+    return;
+  const existing = document.getElementById(STYLE_ID2);
+  if (existing)
+    existing.remove();
+  const d = theme === "dark";
+  const bg2 = d ? "#000000" : "#ffffff";
+  const border = d ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)";
+  const borderSubtle = d ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)";
+  const text = d ? "#ffffff" : "#000000";
+  const textSecondary = d ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  const textTertiary = d ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.3)";
+  const surfaceSubtle = d ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)";
+  const monoFont = `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`;
+  const sansFont = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif`;
+  const css = `
+    .llm-chat {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid ${border};
+      background: ${bg2};
+      overflow: hidden;
+      font-family: ${sansFont};
+      color: ${text};
+    }
+
+    /* Header */
+    .llm-chat-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      border-bottom: 1px solid ${borderSubtle};
+    }
+    
+    /* Model Selector */
+    .llm-chat-model-select {
+      position: relative;
+    }
+    .llm-chat-model-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: transparent;
+      border: none;
+      color: ${text};
+      font-weight: 400;
+      font-size: 11px;
+      font-family: ${monoFont};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      padding: 4px 0;
+      cursor: pointer;
+      transition: opacity 0.1s;
+    }
+    .llm-chat-model-btn:hover {
+      opacity: 0.6;
+    }
+    .llm-chat-model-menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      margin-top: 4px;
+      width: 280px;
+      max-height: 300px;
+      overflow-y: auto;
+      background: ${d ? "#0a0a0a" : "#fafafa"};
+      border: 1px solid ${border};
+      z-index: 50;
+      padding: 4px 0;
+      scrollbar-width: thin;
+    }
+    .llm-chat-model-group {
+      padding: 8px 12px 4px;
+      font-size: 10px;
+      font-weight: 400;
+      color: ${textSecondary};
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-family: ${monoFont};
+    }
+    .llm-chat-model-item {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-family: ${monoFont};
+      color: ${textSecondary};
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: color 0.1s;
+    }
+    .llm-chat-model-item:hover {
+      color: ${text};
+    }
+    .llm-chat-model-item--active {
+      color: ${text};
+    }
+
+    /* Status */
+    .llm-chat-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 10px;
+      font-family: ${monoFont};
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: ${textSecondary};
+    }
+    .llm-chat-dot {
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+    }
+    .llm-chat-dot--loading {
+      background: ${textSecondary};
+      animation: llm-pulse 1.5s infinite;
+    }
+    .llm-chat-dot--ready {
+      background: ${text};
+    }
+    .llm-chat-dot--error {
+      background: #ff3333;
+    }
+
+    /* Progress */
+    .llm-chat-progress {
+      padding: 0 16px 8px;
+    }
+    .llm-chat-progress-bar {
+      height: 1px;
+      background: ${borderSubtle};
+      overflow: hidden;
+    }
+    .llm-chat-progress-fill {
+      height: 100%;
+      background: ${text};
+      transition: width 0.3s ease;
+    }
+    .llm-chat-progress-text {
+      font-size: 10px;
+      font-family: ${monoFont};
+      color: ${textTertiary};
+      margin-top: 4px;
+      text-align: right;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    /* Messages */
+    .llm-chat-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      scrollbar-width: thin;
+    }
+    
+    /* Welcome */
+    .llm-chat-welcome {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      flex: 1;
+      color: ${textTertiary};
+      padding: 40px 0;
+    }
+    .llm-chat-welcome h3 {
+      font-size: 11px;
+      font-weight: 400;
+      font-family: ${monoFont};
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: ${textSecondary};
+      margin: 0 0 8px;
+    }
+    .llm-chat-welcome p {
+      font-size: 13px;
+      margin: 0;
+      max-width: 360px;
+      line-height: 1.6;
+      color: ${textTertiary};
+    }
+
+    /* Bubble */
+    .llm-chat-bubble {
+      display: flex;
+      flex-direction: column;
+      max-width: 100%;
+    }
+    .llm-chat-bubble--user {
+      align-self: flex-end;
+      max-width: 80%;
+    }
+    .llm-chat-bubble--assistant {
+      align-self: flex-start;
+      width: 100%;
+    }
+    
+    /* User message — flat, subtle bg, no radius */
+    .llm-chat-user-content {
+      padding: 10px 14px;
+      font-size: 14px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      background: ${surfaceSubtle};
+      border: 1px solid ${borderSubtle};
+      color: ${text};
+    }
+    
+    /* Assistant message */
+    .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)"};
+    }
+    
+    /* Streamdown Overrides */
+    .llm-chat-assistant-content pre {
+      background: ${surfaceSubtle} !important;
+      border: 1px solid ${borderSubtle} !important;
+      border-radius: 0 !important;
+      padding: 12px !important;
+      margin: 12px 0 !important;
+    }
+    .llm-chat-assistant-content code {
+      font-family: ${monoFont} !important;
+      font-size: 13px !important;
+    }
+    .llm-chat-assistant-content :not(pre) > code {
+      background: ${surfaceSubtle};
+      border: 1px solid ${borderSubtle};
+      padding: 1px 5px;
+      font-size: 12.5px !important;
+    }
+    
+    /* Attachments in message */
+    .llm-chat-msg-images {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 8px;
+      justify-content: flex-end;
+    }
+    .llm-chat-msg-img {
+      width: 100px;
+      height: 100px;
+      object-fit: cover;
+      border: 1px solid ${border};
+    }
+
+    /* Error */
+    .llm-chat-error {
+      margin: 0 16px;
+      padding: 10px 14px;
+      border: 1px solid ${d ? "rgba(255,50,50,0.2)" : "rgba(200,0,0,0.15)"};
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    .llm-chat-error-text {
+      font-size: 12px;
+      font-family: ${monoFont};
+      color: ${d ? "#ff6666" : "#cc0000"};
+      flex: 1;
+    }
+    .llm-chat-error-retry {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border: 1px solid ${d ? "rgba(255,50,50,0.3)" : "rgba(200,0,0,0.2)"};
+      background: transparent;
+      color: ${d ? "#ff6666" : "#cc0000"};
+      font-size: 11px;
+      font-family: ${monoFont};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      cursor: pointer;
+    }
+    .llm-chat-error-retry:hover {
+      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};
+    }
+
+    @keyframes llm-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.2; }
+    }
+  `;
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+function ModelSelector({
+  currentModel,
+  onSelect,
+  theme
+}) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const ref = useRef2(null);
+  useEffect2(() => {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const displayModel = useMemo(() => {
+    if (!currentModel)
+      return "Select Model";
+    const id2 = currentModel.split("/").pop() || currentModel;
+    return id2.length > 25 ? id2.substring(0, 25) + "..." : id2;
+  }, [currentModel]);
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "llm-chat-model-select",
+    ref,
+    children: [
+      /* @__PURE__ */ jsxDEV2("button", {
+        type: "button",
+        className: "llm-chat-model-btn",
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          "[",
+          displayModel,
+          "] ",
+          /* @__PURE__ */ jsxDEV2(ChevronDownIcon, {}, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      isOpen && /* @__PURE__ */ jsxDEV2("div", {
+        className: "llm-chat-model-menu",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-model-group",
+            children: "[WebLLM]"
+          }, undefined, false, undefined, this),
+          Object.entries(WEBLLM_MODELS).map(([key, value]) => /* @__PURE__ */ jsxDEV2("button", {
+            className: `llm-chat-model-item ${currentModel === value ? "llm-chat-model-item--active" : ""}`,
+            onClick: () => {
+              onSelect(value);
+              setIsOpen(false);
+            },
+            children: key
+          }, key, false, undefined, this)),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-model-group",
+            children: "[Transformers.js]"
+          }, undefined, false, undefined, this),
+          Object.entries(TRANSFORMERS_MODELS).map(([key, value]) => /* @__PURE__ */ jsxDEV2("button", {
+            className: `llm-chat-model-item ${currentModel === value ? "llm-chat-model-item--active" : ""}`,
+            onClick: () => {
+              onSelect(value);
+              setIsOpen(false);
+            },
+            children: key
+          }, key, false, undefined, this))
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function Chat2({
+  systemPrompt = DEFAULT_SYSTEM_PROMPT,
+  placeholder = "Type a message...",
+  theme = "dark",
+  className,
+  maxHeight = "600px",
+  inputActions,
+  onSend: onSendProp,
+  onResponse,
+  onError: onErrorProp,
+  showHeader = true,
+  showProgress = true,
+  welcomeMessage = "Ready to assist",
+  onModelChange
+}) {
+  const { llm, isLoading, isReady, loadProgress, error, modelId, reload } = useLLM();
+  const [messages, setMessages] = useState2([]);
+  const [input, setInput] = useState2("");
+  const [isGenerating, setIsGenerating] = useState2(false);
+  const [streamingText, setStreamingText] = useState2("");
+  const [pendingMessage, setPendingMessage] = useState2(null);
+  const [images, setImages] = useState2([]);
+  const messagesEndRef = useRef2(null);
+  const abortRef = useRef2(false);
+  const isProcessingRef = useRef2(false);
+  useEffect2(() => {
+    injectChatStyles(theme);
+  }, [theme]);
+  useEffect2(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, streamingText, isGenerating]);
+  const generate = async (userContent, currentMessages, attachedImages = []) => {
+    if (!llm || !isReady || isProcessingRef.current)
+      return;
+    isProcessingRef.current = true;
+    const userMsg = {
+      role: "user",
+      content: userContent,
+      images: attachedImages
+    };
+    setMessages((prev) => [...prev, userMsg]);
+    setIsGenerating(true);
+    setStreamingText("");
+    abortRef.current = false;
+    const apiMessages = [];
+    if (systemPrompt) {
+      apiMessages.push({ role: "system", content: systemPrompt });
+    }
+    currentMessages.forEach((m) => {
+      apiMessages.push({ role: m.role, content: m.content });
+    });
+    apiMessages.push({ role: "user", content: userContent });
+    try {
+      const response = await llm.stream(apiMessages, (_token, fullText) => {
+        if (abortRef.current)
+          return;
+        setStreamingText(fullText);
+      });
+      if (!abortRef.current) {
+        const assistantMsg = { role: "assistant", content: response };
+        setMessages((prev) => [...prev, assistantMsg]);
+        setStreamingText("");
+        onResponse?.(response);
+      }
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      onErrorProp?.(error2);
+      setMessages((prev) => [...prev, {
+        role: "assistant",
+        content: `Error: ${error2.message}`
+      }]);
+    } finally {
+      setIsGenerating(false);
+      isProcessingRef.current = false;
+    }
+  };
+  const handleSend = () => {
+    const text = input.trim();
+    if (!text && images.length === 0)
+      return;
+    const currentImages = [...images];
+    setInput("");
+    setImages([]);
+    onSendProp?.(text);
+    if (llm && isReady) {
+      generate(text, messages, currentImages);
+    } else if (isLoading) {
+      setPendingMessage(text);
+    }
+  };
+  const handleStop = () => {
+    abortRef.current = true;
+    setIsGenerating(false);
+    if (streamingText) {
+      setMessages((prev) => [...prev, { role: "assistant", content: streamingText + "..." }]);
+      setStreamingText("");
+    }
+  };
+  const statusDotClass = error ? "llm-chat-dot llm-chat-dot--error" : isReady ? "llm-chat-dot llm-chat-dot--ready" : "llm-chat-dot llm-chat-dot--loading";
+  const statusText = error ? "Error" : isReady ? "Ready" : isLoading ? "Loading" : "Idle";
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: `llm-chat${className ? ` ${className}` : ""}`,
+    style: { maxHeight, height: "100%" },
+    children: [
+      showHeader && /* @__PURE__ */ jsxDEV2("div", {
+        className: "llm-chat-header",
+        children: [
+          onModelChange ? /* @__PURE__ */ jsxDEV2(ModelSelector, {
+            currentModel: modelId,
+            onSelect: onModelChange,
+            theme
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-model-select",
+            children: /* @__PURE__ */ jsxDEV2("span", {
+              style: {
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                fontSize: "11px",
+                textTransform: "uppercase",
+                letterSpacing: "0.05em"
+              },
+              children: [
+                "[",
+                modelId?.split("/").pop(),
+                "]"
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-status",
+            children: [
+              /* @__PURE__ */ jsxDEV2("span", {
+                children: statusText
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: statusDotClass
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      showProgress && isLoading && loadProgress && /* @__PURE__ */ jsxDEV2("div", {
+        className: "llm-chat-progress",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-progress-bar",
+            children: /* @__PURE__ */ jsxDEV2("div", {
+              className: "llm-chat-progress-fill",
+              style: { width: `${Math.min(100, loadProgress.progress)}%` }
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-progress-text",
+            children: loadProgress.status
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      error && /* @__PURE__ */ jsxDEV2("div", {
+        className: "llm-chat-error",
+        children: [
+          /* @__PURE__ */ jsxDEV2("span", {
+            className: "llm-chat-error-text",
+            children: error.message
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("button", {
+            className: "llm-chat-error-retry",
+            onClick: reload,
+            children: [
+              /* @__PURE__ */ jsxDEV2(RetryIcon, {}, undefined, false, undefined, this),
+              " Retry"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "llm-chat-messages",
+        children: [
+          !isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-welcome",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h3", {
+                children: [
+                  "[",
+                  welcomeMessage,
+                  "]"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                children: "Markdown, code blocks, Mermaid diagrams. Paste images with Ctrl+V."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          messages.map((msg, i) => /* @__PURE__ */ jsxDEV2("div", {
+            className: `llm-chat-bubble llm-chat-bubble--${msg.role}`,
+            children: msg.role === "user" ? /* @__PURE__ */ jsxDEV2(Fragment2, {
+              children: [
+                msg.images && msg.images.length > 0 && /* @__PURE__ */ jsxDEV2("div", {
+                  className: "llm-chat-msg-images",
+                  children: msg.images.map((img) => /* @__PURE__ */ jsxDEV2("img", {
+                    src: img.dataUrl,
+                    className: "llm-chat-msg-img",
+                    alt: "attachment"
+                  }, img.id, false, undefined, this))
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV2("div", {
+                  className: "llm-chat-user-content",
+                  children: msg.content
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV2("div", {
+              className: "llm-chat-assistant-content",
+              children: /* @__PURE__ */ jsxDEV2(Streamdown, {
+                plugins: { code, mermaid },
+                children: msg.content
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          }, i, false, undefined, this)),
+          streamingText && /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-bubble llm-chat-bubble--assistant",
+            children: /* @__PURE__ */ jsxDEV2("div", {
+              className: "llm-chat-assistant-content",
+              children: /* @__PURE__ */ jsxDEV2(Streamdown, {
+                plugins: { code, mermaid },
+                children: streamingText
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            ref: messagesEndRef
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "llm-chat-input-area",
+        children: /* @__PURE__ */ jsxDEV2(ChatInput, {
+          value: input,
+          onChange: setInput,
+          onSend: handleSend,
+          onStop: handleStop,
+          disabled: !isReady && !isLoading,
+          isGenerating,
+          placeholder: isLoading ? "Model is loading..." : placeholder,
+          theme,
+          actions: inputActions,
+          images,
+          onImageAdd: (img) => setImages((prev) => [...prev, img]),
+          onImageRemove: (id2) => setImages((prev) => prev.filter((img) => img.id !== id2))
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ChatApp({
+  defaultModel = "qwen-2.5-0.5b",
+  defaultBackend = "auto",
+  autoLoad = true,
+  onModelChange,
+  ...chatProps
+}) {
+  const [model, setModel] = useState2(defaultModel);
+  const handleModelChange = (newModel) => {
+    setModel(newModel);
+    onModelChange?.(newModel);
+  };
+  return /* @__PURE__ */ jsxDEV2(LLMProvider, {
+    model,
+    backend: defaultBackend,
+    autoLoad,
+    children: /* @__PURE__ */ jsxDEV2(Chat2, {
+      ...chatProps,
+      onModelChange: handleModelChange
+    }, undefined, false, undefined, this)
+  }, model, false, undefined, this);
+}
+
+// src/react/index.tsx
+import { jsxDEV as jsxDEV3, Fragment as Fragment3 } from "react/jsx-dev-runtime";
 var LLMContext = createContext(null);
 function LLMProvider({
   children,
@@ -57073,14 +58271,14 @@ function LLMProvider({
   onError,
   ...config
 }) {
-  const [llm, setLLM] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [loadProgress, setLoadProgress] = useState(null);
-  const [error, setError] = useState(null);
-  const hasLoadedRef = useRef(false);
-  const configRef = useRef(config);
+  const [llm, setLLM] = useState3(null);
+  const [isLoading, setIsLoading] = useState3(false);
+  const [loadProgress, setLoadProgress] = useState3(null);
+  const [error, setError] = useState3(null);
+  const hasLoadedRef = useRef3(false);
+  const configRef = useRef3(config);
   configRef.current = config;
-  const load = useCallback(async () => {
+  const load = useCallback2(async () => {
     if (isLoading)
       return;
     setIsLoading(true);
@@ -57105,7 +58303,7 @@ function LLMProvider({
       setIsLoading(false);
     }
   }, [isLoading, onLoad, onProgress, onError]);
-  const unload = useCallback(async () => {
+  const unload = useCallback2(async () => {
     if (llm) {
       await llm.unload();
       setLLM(null);
@@ -57113,24 +58311,24 @@ function LLMProvider({
       hasLoadedRef.current = false;
     }
   }, [llm]);
-  const reload = useCallback(async () => {
+  const reload = useCallback2(async () => {
     await unload();
     await load();
   }, [unload, load]);
-  useEffect(() => {
+  useEffect3(() => {
     if (autoLoad && !hasLoadedRef.current && !llm && !isLoading) {
       hasLoadedRef.current = true;
       load();
     }
   }, [autoLoad, llm, isLoading, load]);
-  useEffect(() => {
+  useEffect3(() => {
     return () => {
       if (llm) {
         llm.unload().catch(console.error);
       }
     };
   }, [llm]);
-  const value = useMemo(() => ({
+  const value = useMemo2(() => ({
     llm,
     isLoading,
     isReady: llm?.isReady ?? false,
@@ -57141,7 +58339,7 @@ function LLMProvider({
     reload,
     unload
   }), [llm, isLoading, loadProgress, error, reload, unload]);
-  return /* @__PURE__ */ jsxDEV(LLMContext.Provider, {
+  return /* @__PURE__ */ jsxDEV3(LLMContext.Provider, {
     value,
     children
   }, undefined, false, undefined, this);
@@ -57165,14 +58363,14 @@ function useChat(options = {}) {
     onFinish,
     onError
   } = options;
-  const [messages, setMessages] = useState(initialMessages);
-  const [input, setInput] = useState("");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [streamingText, setStreamingText] = useState("");
-  const [pendingMessage, setPendingMessage] = useState(null);
-  const abortRef = useRef(false);
-  const isProcessingRef = useRef(false);
-  const generateResponse = useCallback(async (userContent, currentMessages) => {
+  const [messages, setMessages] = useState3(initialMessages);
+  const [input, setInput] = useState3("");
+  const [isGenerating, setIsGenerating] = useState3(false);
+  const [streamingText, setStreamingText] = useState3("");
+  const [pendingMessage, setPendingMessage] = useState3(null);
+  const abortRef = useRef3(false);
+  const isProcessingRef = useRef3(false);
+  const generateResponse = useCallback2(async (userContent, currentMessages) => {
     if (!llm || !isReady || isProcessingRef.current) {
       return "";
     }
@@ -57214,14 +58412,14 @@ function useChat(options = {}) {
       isProcessingRef.current = false;
     }
   }, [llm, isReady, systemPrompt, generateOptions, onStart, onToken, onFinish, onError]);
-  useEffect(() => {
+  useEffect3(() => {
     if (isReady && pendingMessage && !isProcessingRef.current) {
       const messageToProcess = pendingMessage;
       setPendingMessage(null);
       generateResponse(messageToProcess, messages);
     }
   }, [isReady, pendingMessage, messages, generateResponse]);
-  const send = useCallback(async (content) => {
+  const send = useCallback2(async (content) => {
     const messageContent = content ?? input;
     if (!messageContent.trim()) {
       return "";
@@ -57240,7 +58438,7 @@ function useChat(options = {}) {
     }
     return "";
   }, [input, llm, isReady, isLoading, queueWhileLoading, messages, generateResponse]);
-  const stop = useCallback(() => {
+  const stop = useCallback2(() => {
     abortRef.current = true;
     setIsGenerating(false);
     setPendingMessage(null);
@@ -57252,16 +58450,16 @@ function useChat(options = {}) {
       setStreamingText("");
     }
   }, [streamingText]);
-  const clear = useCallback(() => {
+  const clear = useCallback2(() => {
     setMessages(initialMessages);
     setStreamingText("");
     setInput("");
     setPendingMessage(null);
   }, [initialMessages]);
-  const append = useCallback((message) => {
+  const append = useCallback2((message) => {
     setMessages((prev) => [...prev, message]);
   }, []);
-  const reload = useCallback(async () => {
+  const reload = useCallback2(async () => {
     if (messages.length === 0)
       return "";
     const lastUserIndex = messages.findLastIndex((m) => m.role === "user");
@@ -57291,10 +58489,10 @@ function useChat(options = {}) {
 function useStream(options = {}) {
   const { llm, isReady } = useLLM();
   const { generateOptions, onToken, onFinish, onError } = options;
-  const [text, setText] = useState("");
-  const [isStreaming, setIsStreaming] = useState(false);
-  const abortRef = useRef(false);
-  const stream = useCallback(async (input) => {
+  const [text, setText] = useState3("");
+  const [isStreaming, setIsStreaming] = useState3(false);
+  const abortRef = useRef3(false);
+  const stream = useCallback2(async (input) => {
     if (!llm || !isReady) {
       return "";
     }
@@ -57318,11 +58516,11 @@ function useStream(options = {}) {
       setIsStreaming(false);
     }
   }, [llm, isReady, generateOptions, onToken, onFinish, onError]);
-  const stop = useCallback(() => {
+  const stop = useCallback2(() => {
     abortRef.current = true;
     setIsStreaming(false);
   }, []);
-  const clear = useCallback(() => {
+  const clear = useCallback2(() => {
     setText("");
   }, []);
   return {
@@ -57336,9 +58534,9 @@ function useStream(options = {}) {
 function useCompletion(options = {}) {
   const { llm, isReady } = useLLM();
   const { generateOptions } = options;
-  const [completion, setCompletion] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const complete = useCallback(async (prompt) => {
+  const [completion, setCompletion] = useState3("");
+  const [isLoading, setIsLoading] = useState3(false);
+  const complete = useCallback2(async (prompt) => {
     if (!llm || !isReady) {
       return "";
     }
@@ -57354,7 +58552,7 @@ function useCompletion(options = {}) {
       setIsLoading(false);
     }
   }, [llm, isReady, generateOptions]);
-  const clear = useCallback(() => {
+  const clear = useCallback2(() => {
     setCompletion("");
   }, []);
   return {
@@ -57369,22 +58567,22 @@ function LLMLoading({ children, className }) {
   if (!isLoading)
     return null;
   if (children) {
-    return /* @__PURE__ */ jsxDEV("div", {
+    return /* @__PURE__ */ jsxDEV3("div", {
       className,
       children
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxDEV3("div", {
     className,
     children: [
-      /* @__PURE__ */ jsxDEV("p", {
+      /* @__PURE__ */ jsxDEV3("p", {
         children: [
           "Loading model... ",
           loadProgress?.progress ?? 0,
           "%"
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("p", {
+      /* @__PURE__ */ jsxDEV3("p", {
         children: loadProgress?.status
       }, undefined, false, undefined, this)
     ]
@@ -57393,11 +58591,11 @@ function LLMLoading({ children, className }) {
 function LLMReady({ children, fallback = null }) {
   const { isReady, isLoading } = useLLM();
   if (isLoading || !isReady) {
-    return /* @__PURE__ */ jsxDEV(Fragment, {
+    return /* @__PURE__ */ jsxDEV3(Fragment3, {
       children: fallback
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV(Fragment, {
+  return /* @__PURE__ */ jsxDEV3(Fragment3, {
     children
   }, undefined, false, undefined, this);
 }
@@ -57408,5 +58606,8 @@ export {
   useChat,
   LLMReady,
   LLMProvider,
-  LLMLoading
+  LLMLoading,
+  ChatInput,
+  ChatApp,
+  Chat2 as Chat
 };