@blank-utils/llm 0.2.2 → 0.2.3

package/dist/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);
@@ -56591,7 +56591,7 @@ async function logCapabilities() {
   console.log(`  Recommended device: ${caps.recommendedDevice}`);
   return caps;
 }
-// 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",
@@ -56623,6 +56623,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];
@@ -56710,19 +56725,6 @@ function createWebLLMProvider() {
   return new 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")) {
@@ -57127,13 +57129,727 @@ async function isWebGPUSupported() {
 import {
   createContext,
   useContext,
-  useState,
-  useCallback,
-  useEffect,
+  useState as useState2,
+  useCallback as useCallback2,
+  useEffect as useEffect3,
   useMemo,
-  useRef
+  useRef as useRef3
 } from "react";
-import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+
+// src/react/components.tsx
+import { useRef as useRef2, useEffect as useEffect2, useState } from "react";
+
+// src/react/chat-input.tsx
+import { useRef, useEffect, useCallback } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function SendIcon() {
+  return /* @__PURE__ */ jsxDEV("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsxDEV("path", {
+        d: "M22 2L11 13"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("path", {
+        d: "M22 2L15 22L11 13L2 9L22 2Z"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function StopIcon() {
+  return /* @__PURE__ */ jsxDEV("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxDEV("rect", {
+      x: "4",
+      y: "4",
+      width: "16",
+      height: "16",
+      rx: "2"
+    }, undefined, false, undefined, this)
+  }, undefined, false, 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 isDark = theme === "dark";
+  const css = `
+    .llm-ci {
+      display: flex;
+      flex-direction: column;
+      border-radius: 16px;
+      border: 1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.12)"};
+      background: ${isDark ? "rgba(17,17,17,0.95)" : "rgba(255,255,255,0.98)"};
+      padding: 8px;
+      transition: border-color 0.2s, box-shadow 0.2s;
+      position: relative;
+    }
+    .llm-ci:focus-within {
+      border-color: ${isDark ? "rgba(56,189,248,0.4)" : "rgba(59,130,246,0.4)"};
+      box-shadow: 0 0 0 2px ${isDark ? "rgba(56,189,248,0.1)" : "rgba(59,130,246,0.1)"};
+    }
+    .llm-ci textarea {
+      width: 100%;
+      min-height: 40px;
+      max-height: 160px;
+      resize: none;
+      border: none;
+      outline: none;
+      background: transparent;
+      color: ${isDark ? "#e5e5e5" : "#1a1a1a"};
+      font-size: 14px;
+      line-height: 1.5;
+      padding: 8px 12px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      scrollbar-width: thin;
+    }
+    .llm-ci textarea::placeholder {
+      color: ${isDark ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.35)"};
+    }
+    .llm-ci-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 4px 4px 0;
+    }
+    .llm-ci-actions {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+    .llm-ci-send {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      flex-shrink: 0;
+    }
+    .llm-ci-send--active {
+      background: ${isDark ? "#38bdf8" : "#3b82f6"};
+      color: white;
+    }
+    .llm-ci-send--active:hover {
+      background: ${isDark ? "#0ea5e9" : "#2563eb"};
+      transform: scale(1.05);
+    }
+    .llm-ci-send--disabled {
+      background: ${isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"};
+      color: ${isDark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)"};
+      cursor: not-allowed;
+    }
+    .llm-ci-send--stop {
+      background: ${isDark ? "rgba(239,68,68,0.15)" : "rgba(239,68,68,0.1)"};
+      color: ${isDark ? "#f87171" : "#ef4444"};
+    }
+    .llm-ci-send--stop:hover {
+      background: ${isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.2)"};
+    }
+  `;
+  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 = 5,
+  actions,
+  theme = "dark",
+  className
+}) {
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    injectStyles(theme);
+  }, [theme]);
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea)
+      return;
+    textarea.style.height = "auto";
+    const lineHeight = 21;
+    const maxHeight = lineHeight * maxRows + 16;
+    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()) {
+        onSend();
+      }
+    }
+  }, [disabled, value, onSend]);
+  const hasValue = value.trim().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}` : ""}`,
+    children: [
+      /* @__PURE__ */ jsxDEV("textarea", {
+        ref: textareaRef,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        disabled: disabled && !isGenerating,
+        rows: 1
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "llm-ci-toolbar",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "llm-ci-actions",
+            children: actions
+          }, undefined, false, undefined, this),
+          /* @__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(StopIcon, {}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(SendIcon, {}, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/react/components.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+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);
+}
+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 css = `
+    .llm-chat {
+      display: flex;
+      flex-direction: column;
+      border-radius: 16px;
+      border: 1px solid ${d ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.08)"};
+      background: ${d ? "#0a0a0a" : "#fafafa"};
+      overflow: hidden;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      color: ${d ? "#e5e5e5" : "#1a1a1a"};
+    }
+
+    /* Header */
+    .llm-chat-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      border-bottom: 1px solid ${d ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)"};
+      font-size: 12px;
+      color: ${d ? "rgba(255,255,255,0.45)" : "rgba(0,0,0,0.45)"};
+    }
+    .llm-chat-header-model {
+      font-weight: 600;
+      color: ${d ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.7)"};
+    }
+    .llm-chat-header-status {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .llm-chat-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .llm-chat-dot--loading {
+      background: #f59e0b;
+      animation: llm-pulse 1.5s ease-in-out infinite;
+    }
+    .llm-chat-dot--ready {
+      background: #22c55e;
+    }
+    .llm-chat-dot--error {
+      background: #ef4444;
+    }
+
+    /* Progress */
+    .llm-chat-progress {
+      padding: 0 16px 8px;
+    }
+    .llm-chat-progress-bar {
+      height: 3px;
+      border-radius: 2px;
+      background: ${d ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)"};
+      overflow: hidden;
+    }
+    .llm-chat-progress-fill {
+      height: 100%;
+      border-radius: 2px;
+      background: linear-gradient(90deg, #38bdf8, #818cf8);
+      transition: width 0.3s ease;
+    }
+    .llm-chat-progress-text {
+      font-size: 11px;
+      color: ${d ? "rgba(255,255,255,0.35)" : "rgba(0,0,0,0.35)"};
+      margin-top: 4px;
+    }
+
+    /* Messages */
+    .llm-chat-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      scrollbar-width: thin;
+      scrollbar-color: ${d ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"} transparent;
+    }
+
+    /* Welcome */
+    .llm-chat-welcome {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      text-align: center;
+      color: ${d ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.25)"};
+      font-size: 14px;
+      padding: 40px 20px;
+      line-height: 1.5;
+    }
+
+    /* Bubble */
+    .llm-chat-bubble {
+      display: flex;
+      max-width: 80%;
+      animation: llm-fadein 0.2s ease;
+    }
+    .llm-chat-bubble--user {
+      align-self: flex-end;
+    }
+    .llm-chat-bubble--assistant {
+      align-self: flex-start;
+    }
+    .llm-chat-bubble-content {
+      padding: 10px 14px;
+      border-radius: 16px;
+      font-size: 14px;
+      line-height: 1.55;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .llm-chat-bubble--user .llm-chat-bubble-content {
+      background: linear-gradient(135deg, #38bdf8, #818cf8);
+      color: white;
+      border-bottom-right-radius: 4px;
+    }
+    .llm-chat-bubble--assistant .llm-chat-bubble-content {
+      background: ${d ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)"};
+      color: ${d ? "#d4d4d4" : "#333"};
+      border-bottom-left-radius: 4px;
+    }
+
+    /* Streaming */
+    .llm-chat-streaming .llm-chat-bubble-content {
+      border: 1px solid ${d ? "rgba(56,189,248,0.2)" : "rgba(59,130,246,0.2)"};
+    }
+    .llm-chat-cursor {
+      display: inline-block;
+      width: 2px;
+      height: 14px;
+      background: ${d ? "#38bdf8" : "#3b82f6"};
+      margin-left: 2px;
+      vertical-align: text-bottom;
+      animation: llm-blink 0.8s step-end infinite;
+    }
+
+    /* Pending */
+    .llm-chat-pending {
+      display: flex;
+      justify-content: center;
+      animation: llm-fadein 0.3s ease;
+    }
+    .llm-chat-pending-badge {
+      font-size: 12px;
+      color: #f59e0b;
+      background: rgba(245,158,11,0.1);
+      padding: 4px 12px;
+      border-radius: 12px;
+    }
+
+    /* Error */
+    .llm-chat-error {
+      margin: 0 16px;
+      padding: 10px 14px;
+      border-radius: 12px;
+      background: ${d ? "rgba(239,68,68,0.08)" : "rgba(239,68,68,0.05)"};
+      border: 1px solid ${d ? "rgba(239,68,68,0.2)" : "rgba(239,68,68,0.15)"};
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .llm-chat-error-text {
+      font-size: 13px;
+      color: ${d ? "#f87171" : "#dc2626"};
+      flex: 1;
+    }
+    .llm-chat-error-retry {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border-radius: 8px;
+      border: 1px solid ${d ? "rgba(239,68,68,0.3)" : "rgba(239,68,68,0.2)"};
+      background: transparent;
+      color: ${d ? "#f87171" : "#dc2626"};
+      font-size: 12px;
+      cursor: pointer;
+      transition: background 0.15s;
+      flex-shrink: 0;
+    }
+    .llm-chat-error-retry:hover {
+      background: ${d ? "rgba(239,68,68,0.12)" : "rgba(239,68,68,0.08)"};
+    }
+
+    /* Loading overlay */
+    .llm-chat-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      flex: 1;
+      padding: 40px 20px;
+    }
+    .llm-chat-spinner {
+      width: 28px;
+      height: 28px;
+      border: 2.5px solid ${d ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"};
+      border-top-color: #38bdf8;
+      border-radius: 50%;
+      animation: llm-spin 0.7s linear infinite;
+    }
+    .llm-chat-loading-text {
+      font-size: 13px;
+      color: ${d ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.4)"};
+    }
+
+    /* Input area */
+    .llm-chat-input-area {
+      padding: 8px 12px 12px;
+      border-top: 1px solid ${d ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)"};
+    }
+
+    /* Animations */
+    @keyframes llm-fadein {
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes llm-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+    @keyframes llm-blink {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0; }
+    }
+    @keyframes llm-spin {
+      to { transform: rotate(360deg); }
+    }
+  `;
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+function Chat2({
+  systemPrompt = "You are a helpful assistant. Keep responses concise and clear.",
+  placeholder = "Type a message...",
+  theme = "dark",
+  className,
+  maxHeight = "600px",
+  inputActions,
+  onSend: onSendProp,
+  onResponse,
+  onError: onErrorProp,
+  showHeader = true,
+  showProgress = true,
+  welcomeMessage = "Send a message to start chatting"
+}) {
+  const { llm, isLoading, isReady, loadProgress, error, modelId, backend: backend2, reload } = useLLM();
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [streamingText, setStreamingText] = useState("");
+  const [pendingMessage, setPendingMessage] = useState(null);
+  const messagesEndRef = useRef2(null);
+  const abortRef = useRef2(false);
+  const isProcessingRef = useRef2(false);
+  useEffect2(() => {
+    injectChatStyles(theme);
+  }, [theme]);
+  useEffect2(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, streamingText]);
+  const generate = async (userContent, currentMessages) => {
+    if (!llm || !isReady || isProcessingRef.current)
+      return;
+    isProcessingRef.current = true;
+    const userMsg = { role: "user", content: userContent };
+    setMessages((prev) => [...prev, userMsg]);
+    const apiMessages = [];
+    if (systemPrompt) {
+      apiMessages.push({ role: "system", content: systemPrompt });
+    }
+    apiMessages.push(...currentMessages, userMsg);
+    setIsGenerating(true);
+    setStreamingText("");
+    abortRef.current = false;
+    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);
+    } finally {
+      setIsGenerating(false);
+      isProcessingRef.current = false;
+    }
+  };
+  useEffect2(() => {
+    if (isReady && pendingMessage && !isProcessingRef.current) {
+      const msg = pendingMessage;
+      setPendingMessage(null);
+      generate(msg, messages);
+    }
+  }, [isReady, pendingMessage]);
+  const handleSend = () => {
+    const text = input.trim();
+    if (!text)
+      return;
+    setInput("");
+    onSendProp?.(text);
+    if (llm && isReady) {
+      generate(text, messages);
+    } else if (isLoading) {
+      const userMsg = { role: "user", content: text };
+      setMessages((prev) => [...prev, userMsg]);
+      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: [
+          /* @__PURE__ */ jsxDEV2("span", {
+            className: "llm-chat-header-model",
+            children: [
+              modelId ? modelId.split("/").pop()?.substring(0, 30) : "No model",
+              backend2 && /* @__PURE__ */ jsxDEV2("span", {
+                style: { fontWeight: 400, marginLeft: 6, opacity: 0.6 },
+                children: [
+                  "(",
+                  backend2,
+                  ")"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-header-status",
+            children: [
+              /* @__PURE__ */ jsxDEV2("span", {
+                className: statusDotClass
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("span", {
+                children: statusText
+              }, 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-loading",
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "llm-chat-spinner"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "llm-chat-loading-text",
+                children: loadProgress?.status || "Initializing model..."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          !isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-welcome",
+            children: welcomeMessage
+          }, undefined, false, undefined, this),
+          messages.map((msg, i) => {
+            if (msg.role === "system")
+              return null;
+            return /* @__PURE__ */ jsxDEV2("div", {
+              className: `llm-chat-bubble llm-chat-bubble--${msg.role}`,
+              children: /* @__PURE__ */ jsxDEV2("div", {
+                className: "llm-chat-bubble-content",
+                children: msg.content
+              }, undefined, false, undefined, this)
+            }, i, false, undefined, this);
+          }),
+          streamingText && /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-bubble llm-chat-bubble--assistant llm-chat-streaming",
+            children: /* @__PURE__ */ jsxDEV2("div", {
+              className: "llm-chat-bubble-content",
+              children: [
+                streamingText,
+                /* @__PURE__ */ jsxDEV2("span", {
+                  className: "llm-chat-cursor"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          pendingMessage !== null && /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-pending",
+            children: /* @__PURE__ */ jsxDEV2("span", {
+              className: "llm-chat-pending-badge",
+              children: "⏳ Waiting for model to load..."
+            }, 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 ? "Type now, send when ready..." : placeholder,
+          theme,
+          actions: inputActions
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/react/index.tsx
+import { jsxDEV as jsxDEV3, Fragment } from "react/jsx-dev-runtime";
 var LLMContext = createContext(null);
 function LLMProvider({
   children,
@@ -57143,14 +57859,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] = useState2(null);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [loadProgress, setLoadProgress] = useState2(null);
+  const [error, setError] = useState2(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);
@@ -57175,7 +57891,7 @@ function LLMProvider({
       setIsLoading(false);
     }
   }, [isLoading, onLoad, onProgress, onError]);
-  const unload = useCallback(async () => {
+  const unload = useCallback2(async () => {
     if (llm) {
       await llm.unload();
       setLLM(null);
@@ -57183,17 +57899,17 @@ 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);
@@ -57211,7 +57927,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);
@@ -57235,14 +57951,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] = useState2(initialMessages);
+  const [input, setInput] = useState2("");
+  const [isGenerating, setIsGenerating] = useState2(false);
+  const [streamingText, setStreamingText] = useState2("");
+  const [pendingMessage, setPendingMessage] = useState2(null);
+  const abortRef = useRef3(false);
+  const isProcessingRef = useRef3(false);
+  const generateResponse = useCallback2(async (userContent, currentMessages) => {
     if (!llm || !isReady || isProcessingRef.current) {
       return "";
     }
@@ -57284,14 +58000,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 "";
@@ -57310,7 +58026,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);
@@ -57322,16 +58038,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");
@@ -57361,10 +58077,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] = useState2("");
+  const [isStreaming, setIsStreaming] = useState2(false);
+  const abortRef = useRef3(false);
+  const stream = useCallback2(async (input) => {
     if (!llm || !isReady) {
       return "";
     }
@@ -57388,11 +58104,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 {
@@ -57406,9 +58122,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] = useState2("");
+  const [isLoading, setIsLoading] = useState2(false);
+  const complete = useCallback2(async (prompt) => {
     if (!llm || !isReady) {
       return "";
     }
@@ -57424,7 +58140,7 @@ function useCompletion(options = {}) {
       setIsLoading(false);
     }
   }, [llm, isReady, generateOptions]);
-  const clear = useCallback(() => {
+  const clear = useCallback2(() => {
     setCompletion("");
   }, []);
   return {
@@ -57439,22 +58155,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)
     ]
@@ -57463,11 +58179,11 @@ function LLMLoading({ children, className }) {
 function LLMReady({ children, fallback = null }) {
   const { isReady, isLoading } = useLLM();
   if (isLoading || !isReady) {
-    return /* @__PURE__ */ jsxDEV(Fragment, {
+    return /* @__PURE__ */ jsxDEV3(Fragment, {
       children: fallback
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV(Fragment, {
+  return /* @__PURE__ */ jsxDEV3(Fragment, {
     children
   }, undefined, false, undefined, this);
 }
@@ -57497,5 +58213,7 @@ export {
   LLMProvider,
   LLMLoading,
   DEFAULT_WEBLLM_MODEL,
-  DEFAULT_TRANSFORMERS_MODEL
+  DEFAULT_TRANSFORMERS_MODEL,
+  ChatInput,
+  Chat2 as Chat
 };