@blank-utils/llm 0.2.3 → 0.2.7

package/dist/react/index.js

@@ -56542,10 +56542,10 @@ ${fake_token_around_image}` + `${global_img_token}` + image_token.repeat(image_s
 import {
   createContext,
   useContext,
-  useState as useState2,
+  useState as useState3,
   useCallback as useCallback2,
   useEffect as useEffect3,
-  useMemo,
+  useMemo as useMemo2,
   useRef as useRef3
 } from "react";
 
@@ -57065,15 +57065,15 @@ async function createLLM(config = {}) {
 }
 
 // src/react/components.tsx
-import { useRef as useRef2, useEffect as useEffect2, useState } from "react";
+import { useRef as useRef2, useEffect as useEffect2, useState as useState2, useMemo } from "react";
 
 // src/react/chat-input.tsx
-import { useRef, useEffect, useCallback } from "react";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { useRef, useEffect, useCallback, useState } from "react";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
 function SendIcon() {
   return /* @__PURE__ */ jsxDEV("svg", {
-    width: "16",
-    height: "16",
+    width: "14",
+    height: "14",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -57081,30 +57081,88 @@ function SendIcon() {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsxDEV("path", {
-        d: "M22 2L11 13"
+      /* @__PURE__ */ jsxDEV("line", {
+        x1: "5",
+        y1: "12",
+        x2: "19",
+        y2: "12"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("path", {
-        d: "M22 2L15 22L11 13L2 9L22 2Z"
+      /* @__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: "16",
-    height: "16",
+    width: "14",
+    height: "14",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     children: /* @__PURE__ */ jsxDEV("rect", {
-      x: "4",
-      y: "4",
-      width: "16",
-      height: "16",
-      rx: "2"
+      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")
@@ -57112,82 +57170,192 @@ function injectStyles(theme) {
   const existing = document.getElementById(STYLE_ID);
   if (existing)
     existing.remove();
-  const isDark = theme === "dark";
+  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-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;
+      border: 1px solid ${border};
+      background: ${bg2};
+      padding: 12px;
+      transition: border-color 0.15s;
       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)"};
+      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: 40px;
-      max-height: 160px;
+      min-height: 24px;
+      max-height: 200px;
       resize: none;
       border: none;
       outline: none;
       background: transparent;
-      color: ${isDark ? "#e5e5e5" : "#1a1a1a"};
+      color: ${text};
       font-size: 14px;
       line-height: 1.5;
-      padding: 8px 12px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      padding: 0;
+      margin: 0;
+      font-family: ${sansFont};
       scrollbar-width: thin;
     }
     .llm-ci textarea::placeholder {
-      color: ${isDark ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.35)"};
+      color: ${textMuted};
     }
+
+    /* Toolbar */
     .llm-ci-toolbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 4px 4px 0;
+      margin-top: 8px;
+      min-height: 28px;
     }
-    .llm-ci-actions {
+    .llm-ci-left-actions {
       display: flex;
       align-items: center;
       gap: 2px;
     }
-    .llm-ci-send {
+    .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: 32px;
-      height: 32px;
-      border-radius: 50%;
+      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.15s ease;
-      flex-shrink: 0;
+      transition: all 0.1s;
+      gap: 6px;
+      background: transparent;
+      color: ${textSecondary};
     }
     .llm-ci-send--active {
-      background: ${isDark ? "#38bdf8" : "#3b82f6"};
-      color: white;
+      background: ${text};
+      color: ${bg2};
+      border-color: ${text};
     }
     .llm-ci-send--active:hover {
-      background: ${isDark ? "#0ea5e9" : "#2563eb"};
-      transform: scale(1.05);
+      opacity: 0.8;
     }
     .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)"};
+      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: ${isDark ? "rgba(239,68,68,0.15)" : "rgba(239,68,68,0.1)"};
-      color: ${isDark ? "#f87171" : "#ef4444"};
+      background: transparent;
+      border-color: ${border};
+      color: ${textSecondary};
     }
     .llm-ci-send--stop:hover {
-      background: ${isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.2)"};
+      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");
@@ -57203,12 +57371,18 @@ function ChatInput({
   disabled = false,
   isGenerating = false,
   placeholder = "Type a message...",
-  maxRows = 5,
+  maxRows = 8,
   actions,
   theme = "dark",
-  className
+  className,
+  images = [],
+  onImageAdd,
+  onImageRemove,
+  modelSelector
 }) {
   const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
   useEffect(() => {
     injectStyles(theme);
   }, [theme]);
@@ -57218,19 +57392,68 @@ function ChatInput({
       return;
     textarea.style.height = "auto";
     const lineHeight = 21;
-    const maxHeight = lineHeight * maxRows + 16;
+    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()) {
+      if (!disabled && (value.trim() || images.length > 0)) {
         onSend();
       }
     }
-  }, [disabled, value, onSend]);
-  const hasValue = value.trim().length > 0;
+  }, [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) {
@@ -57242,12 +57465,49 @@ function ChatInput({
   }
   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
@@ -57256,16 +57516,42 @@ function ChatInput({
         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)
+            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)
@@ -57274,7 +57560,16 @@ function ChatInput({
 }
 
 // src/react/components.tsx
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+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",
@@ -57295,6 +57590,21 @@ function RetryIcon() {
     ]
   }, 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")
@@ -57303,16 +57613,24 @@ function injectChatStyles(theme) {
   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-radius: 16px;
-      border: 1px solid ${d ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.08)"};
-      background: ${d ? "#0a0a0a" : "#fafafa"};
+      border: 1px solid ${border};
+      background: ${bg2};
       overflow: hidden;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      color: ${d ? "#e5e5e5" : "#1a1a1a"};
+      font-family: ${sansFont};
+      color: ${text};
     }
 
     /* Header */
@@ -57321,34 +57639,103 @@ function injectChatStyles(theme) {
       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)"};
+      border-bottom: 1px solid ${borderSubtle};
     }
-    .llm-chat-header-model {
-      font-weight: 600;
-      color: ${d ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.7)"};
+    
+    /* Model Selector */
+    .llm-chat-model-select {
+      position: relative;
     }
-    .llm-chat-header-status {
+    .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: 6px;
-      height: 6px;
+      width: 5px;
+      height: 5px;
       border-radius: 50%;
-      flex-shrink: 0;
     }
     .llm-chat-dot--loading {
-      background: #f59e0b;
-      animation: llm-pulse 1.5s ease-in-out infinite;
+      background: ${textSecondary};
+      animation: llm-pulse 1.5s infinite;
     }
     .llm-chat-dot--ready {
-      background: #22c55e;
+      background: ${text};
     }
     .llm-chat-dot--error {
-      background: #ef4444;
+      background: #ff3333;
     }
 
     /* Progress */
@@ -57356,122 +57743,144 @@ function injectChatStyles(theme) {
       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)"};
+      height: 1px;
+      background: ${borderSubtle};
       overflow: hidden;
     }
     .llm-chat-progress-fill {
       height: 100%;
-      border-radius: 2px;
-      background: linear-gradient(90deg, #38bdf8, #818cf8);
+      background: ${text};
       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)"};
+      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: 16px;
+      padding: 20px 16px;
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 24px;
       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;
+      flex-direction: column;
+      align-items: flex-start;
       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;
+      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;
-      max-width: 80%;
-      animation: llm-fadein 0.2s ease;
+      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%;
     }
-    .llm-chat-bubble-content {
+    
+    /* User message — flat, subtle bg, no radius */
+    .llm-chat-user-content {
       padding: 10px 14px;
-      border-radius: 16px;
       font-size: 14px;
-      line-height: 1.55;
+      line-height: 1.6;
       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;
+      background: ${surfaceSubtle};
+      border: 1px solid ${borderSubtle};
+      color: ${text};
     }
-
-    /* Streaming */
-    .llm-chat-streaming .llm-chat-bubble-content {
-      border: 1px solid ${d ? "rgba(56,189,248,0.2)" : "rgba(59,130,246,0.2)"};
+    
+    /* 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)"};
     }
-    .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;
+    
+    /* 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;
     }
-
-    /* Pending */
-    .llm-chat-pending {
+    
+    /* Attachments in message */
+    .llm-chat-msg-images {
       display: flex;
-      justify-content: center;
-      animation: llm-fadein 0.3s ease;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 8px;
+      justify-content: flex-end;
     }
-    .llm-chat-pending-badge {
-      font-size: 12px;
-      color: #f59e0b;
-      background: rgba(245,158,11,0.1);
-      padding: 4px 12px;
-      border-radius: 12px;
+    .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-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)"};
+      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: 8px;
+      gap: 12px;
     }
     .llm-chat-error-text {
-      font-size: 13px;
-      color: ${d ? "#f87171" : "#dc2626"};
+      font-size: 12px;
+      font-family: ${monoFont};
+      color: ${d ? "#ff6666" : "#cc0000"};
       flex: 1;
     }
     .llm-chat-error-retry {
@@ -57479,63 +57888,28 @@ function injectChatStyles(theme) {
       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)"};
+      border: 1px solid ${d ? "rgba(255,50,50,0.3)" : "rgba(200,0,0,0.2)"};
       background: transparent;
-      color: ${d ? "#f87171" : "#dc2626"};
-      font-size: 12px;
+      color: ${d ? "#ff6666" : "#cc0000"};
+      font-size: 11px;
+      font-family: ${monoFont};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
       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)"};
+      background: ${d ? "rgba(255,50,50,0.08)" : "rgba(200,0,0,0.04)"};
     }
 
-    /* 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 */
+    /* 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)"};
+      padding: 12px 16px 16px;
+      border-top: 1px solid ${borderSubtle};
     }
 
-    /* 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); }
+      50% { opacity: 0.2; }
     }
   `;
   const style = document.createElement("style");
@@ -57543,8 +57917,77 @@ function injectChatStyles(theme) {
   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 = "You are a helpful assistant. Keep responses concise and clear.",
+  systemPrompt = DEFAULT_SYSTEM_PROMPT,
   placeholder = "Type a message...",
   theme = "dark",
   className,
@@ -57555,14 +57998,16 @@ function Chat2({
   onError: onErrorProp,
   showHeader = true,
   showProgress = true,
-  welcomeMessage = "Send a message to start chatting"
+  welcomeMessage = "Ready to assist",
+  onModelChange
 }) {
-  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 { 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);
@@ -57571,21 +58016,28 @@ function Chat2({
   }, [theme]);
   useEffect2(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, streamingText]);
-  const generate = async (userContent, currentMessages) => {
+  }, [messages, streamingText, isGenerating]);
+  const generate = async (userContent, currentMessages, attachedImages = []) => {
     if (!llm || !isReady || isProcessingRef.current)
       return;
     isProcessingRef.current = true;
-    const userMsg = { role: "user", content: userContent };
+    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 });
     }
-    apiMessages.push(...currentMessages, userMsg);
-    setIsGenerating(true);
-    setStreamingText("");
-    abortRef.current = false;
+    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)
@@ -57601,29 +58053,26 @@ function Chat2({
     } 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;
     }
   };
-  useEffect2(() => {
-    if (isReady && pendingMessage && !isProcessingRef.current) {
-      const msg = pendingMessage;
-      setPendingMessage(null);
-      generate(msg, messages);
-    }
-  }, [isReady, pendingMessage]);
   const handleSend = () => {
     const text = input.trim();
-    if (!text)
+    if (!text && images.length === 0)
       return;
+    const currentImages = [...images];
     setInput("");
+    setImages([]);
     onSendProp?.(text);
     if (llm && isReady) {
-      generate(text, messages);
+      generate(text, messages, currentImages);
     } else if (isLoading) {
-      const userMsg = { role: "user", content: text };
-      setMessages((prev) => [...prev, userMsg]);
       setPendingMessage(text);
     }
   };
@@ -57636,7 +58085,7 @@ function Chat2({
     }
   };
   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";
+  const statusText = error ? "Error" : isReady ? "Ready" : isLoading ? "Loading" : "Idle";
   return /* @__PURE__ */ jsxDEV2("div", {
     className: `llm-chat${className ? ` ${className}` : ""}`,
     style: { maxHeight, height: "100%" },
@@ -57644,28 +58093,34 @@ function Chat2({
       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),
+          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-header-status",
+            className: "llm-chat-status",
             children: [
-              /* @__PURE__ */ jsxDEV2("span", {
-                className: statusDotClass
-              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("span", {
                 children: statusText
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: statusDotClass
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this)
@@ -57707,50 +58162,54 @@ function Chat2({
       /* @__PURE__ */ jsxDEV2("div", {
         className: "llm-chat-messages",
         children: [
-          isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxDEV2("div", {
-            className: "llm-chat-loading",
+          !isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxDEV2("div", {
+            className: "llm-chat-welcome",
             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..."
+              /* @__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),
-          !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",
+          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)
-            }, i, false, undefined, this);
-          }),
+            }, undefined, false, undefined, this)
+          }, i, false, undefined, this)),
           streamingText && /* @__PURE__ */ jsxDEV2("div", {
-            className: "llm-chat-bubble llm-chat-bubble--assistant llm-chat-streaming",
+            className: "llm-chat-bubble llm-chat-bubble--assistant",
             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..."
+              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", {
@@ -57767,17 +58226,42 @@ function Chat2({
           onStop: handleStop,
           disabled: !isReady && !isLoading,
           isGenerating,
-          placeholder: isLoading ? "Type now, send when ready..." : placeholder,
+          placeholder: isLoading ? "Model is loading..." : placeholder,
           theme,
-          actions: inputActions
+          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 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV3, Fragment as Fragment3 } from "react/jsx-dev-runtime";
 var LLMContext = createContext(null);
 function LLMProvider({
   children,
@@ -57787,10 +58271,10 @@ function LLMProvider({
   onError,
   ...config
 }) {
-  const [llm, setLLM] = useState2(null);
-  const [isLoading, setIsLoading] = useState2(false);
-  const [loadProgress, setLoadProgress] = useState2(null);
-  const [error, setError] = useState2(null);
+  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;
@@ -57844,7 +58328,7 @@ function LLMProvider({
       }
     };
   }, [llm]);
-  const value = useMemo(() => ({
+  const value = useMemo2(() => ({
     llm,
     isLoading,
     isReady: llm?.isReady ?? false,
@@ -57879,11 +58363,11 @@ function useChat(options = {}) {
     onFinish,
     onError
   } = options;
-  const [messages, setMessages] = useState2(initialMessages);
-  const [input, setInput] = useState2("");
-  const [isGenerating, setIsGenerating] = useState2(false);
-  const [streamingText, setStreamingText] = useState2("");
-  const [pendingMessage, setPendingMessage] = useState2(null);
+  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) => {
@@ -58005,8 +58489,8 @@ function useChat(options = {}) {
 function useStream(options = {}) {
   const { llm, isReady } = useLLM();
   const { generateOptions, onToken, onFinish, onError } = options;
-  const [text, setText] = useState2("");
-  const [isStreaming, setIsStreaming] = useState2(false);
+  const [text, setText] = useState3("");
+  const [isStreaming, setIsStreaming] = useState3(false);
   const abortRef = useRef3(false);
   const stream = useCallback2(async (input) => {
     if (!llm || !isReady) {
@@ -58050,8 +58534,8 @@ function useStream(options = {}) {
 function useCompletion(options = {}) {
   const { llm, isReady } = useLLM();
   const { generateOptions } = options;
-  const [completion, setCompletion] = useState2("");
-  const [isLoading, setIsLoading] = useState2(false);
+  const [completion, setCompletion] = useState3("");
+  const [isLoading, setIsLoading] = useState3(false);
   const complete = useCallback2(async (prompt) => {
     if (!llm || !isReady) {
       return "";
@@ -58107,11 +58591,11 @@ function LLMLoading({ children, className }) {
 function LLMReady({ children, fallback = null }) {
   const { isReady, isLoading } = useLLM();
   if (isLoading || !isReady) {
-    return /* @__PURE__ */ jsxDEV3(Fragment, {
+    return /* @__PURE__ */ jsxDEV3(Fragment3, {
       children: fallback
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV3(Fragment, {
+  return /* @__PURE__ */ jsxDEV3(Fragment3, {
     children
   }, undefined, false, undefined, this);
 }
@@ -58124,5 +58608,6 @@ export {
   LLMProvider,
   LLMLoading,
   ChatInput,
+  ChatApp,
   Chat2 as Chat
 };