@blank-utils/llm 0.3.5 → 0.3.6

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

@@ -894,227 +894,8 @@ import { useRef as useRef3, useEffect as useEffect3, useState as useState3, useM
 // src/react/chat-input.tsx
 import "react";
 import { useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2, useState as useState2 } from "react";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function SendIcon() {
-  return /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx2("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-    /* @__PURE__ */ jsx2("polyline", { points: "12 5 19 12 12 19" })
-  ] });
-}
-function StopIcon() {
-  return /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("rect", { x: "6", y: "6", width: "12", height: "12" }) });
-}
-function ImageIcon() {
-  return /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "18", height: "18", rx: "0", ry: "0" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-    /* @__PURE__ */ jsx2("polyline", { points: "21 15 16 10 5 21" })
-  ] });
-}
-function XIcon() {
-  return /* @__PURE__ */ jsxs2("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ jsx2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-  ] });
-}
-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 bg = 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: ${bg};
-      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 \u2014 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: ${bg};
-      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);
-}
+import { Send, Square, ImagePlus, X } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChatInput({
   value,
   onChange,
@@ -1122,11 +903,10 @@ function ChatInput({
   onStop,
   disabled = false,
   isGenerating = false,
-  placeholder = "Type a message...",
+  placeholder = "Message...",
   maxRows = 8,
   actions,
-  theme = "dark",
-  className,
+  className = "",
   images = [],
   onImageAdd,
   onImageRemove,
@@ -1135,29 +915,22 @@ function ChatInput({
   const textareaRef = useRef2(null);
   const fileInputRef = useRef2(null);
   const [isDragging, setIsDragging] = useState2(false);
-  useEffect2(() => {
-    injectStyles(theme);
-  }, [theme]);
   useEffect2(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
     textarea.style.height = "auto";
-    const lineHeight = 21;
+    const lineHeight = 24;
     const maxHeight = lineHeight * maxRows + 24;
-    const newHeight = Math.min(textarea.scrollHeight, maxHeight);
-    textarea.style.height = `${newHeight}px`;
+    textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
   }, [value, maxRows]);
-  const handleKeyDown = useCallback2(
-    (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        if (!disabled && (value.trim() || images.length > 0)) {
-          onSend();
-        }
+  const handleKeyDown = useCallback2((e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (!disabled && (value.trim() || images.length > 0)) {
+        onSend();
       }
-    },
-    [disabled, value, images.length, onSend]
-  );
+    }
+  }, [disabled, value, images.length, onSend]);
   const processFile = useCallback2((file) => {
     if (file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf")) {
       const reader2 = new FileReader();
@@ -1195,12 +968,7 @@ ${newText}` : newText);
     reader.onload = (e) => {
       if (e.target?.result && typeof e.target.result === "string") {
         const id = Math.random().toString(36).substring(7);
-        onImageAdd?.({
-          id,
-          dataUrl: e.target.result,
-          file,
-          name: file.name
-        });
+        onImageAdd?.({ id, dataUrl: e.target.result, file, name: file.name });
       }
     };
     reader.readAsDataURL(file);
@@ -1235,18 +1003,10 @@ ${newText}` : newText);
   }, [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__ */ jsxs2(
     "div",
     {
-      className: `llm-ci${className ? ` ${className}` : ""}`,
+      className: `relative flex flex-col bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-sm focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500 transition-all p-3 ${className}`,
       onDragOver: (e) => {
         e.preventDefault();
         setIsDragging(true);
@@ -1254,7 +1014,10 @@ ${newText}` : newText);
       onDragLeave: () => setIsDragging(false),
       onDrop: handleDrop,
       children: [
-        isDragging && /* @__PURE__ */ jsx2("div", { className: "llm-ci-drag-overlay", children: "[Drop image to attach]" }),
+        isDragging && /* @__PURE__ */ jsxs2("div", { className: "absolute inset-0 bg-white/90 dark:bg-zinc-900/90 flex flex-col items-center justify-center z-20 border-2 border-dashed border-blue-500 rounded-2xl", children: [
+          /* @__PURE__ */ jsx2(ImagePlus, { className: "w-8 h-8 text-blue-500 mb-2" }),
+          /* @__PURE__ */ jsx2("span", { className: "text-blue-500 font-medium tracking-wide", children: "Drop file to attach" })
+        ] }),
         /* @__PURE__ */ jsx2(
           "input",
           {
@@ -1262,19 +1025,19 @@ ${newText}` : newText);
             type: "file",
             accept: "image/*,.pdf",
             multiple: true,
-            className: "llm-ci-file-input",
+            className: "hidden",
             onChange: handleFileSelect
           }
         ),
-        images.length > 0 && /* @__PURE__ */ jsx2("div", { className: "llm-ci-images", children: images.map((img) => /* @__PURE__ */ jsxs2("div", { className: "llm-ci-image-preview", children: [
-          /* @__PURE__ */ jsx2("img", { src: img.dataUrl, alt: "attachment" }),
+        images.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-2 mb-3 px-2", children: images.map((img) => /* @__PURE__ */ jsxs2("div", { className: "relative w-14 h-14 overflow-hidden border border-zinc-200 dark:border-zinc-700 rounded-xl group select-none", children: [
+          /* @__PURE__ */ jsx2("img", { src: img.dataUrl, alt: "attachment", className: "w-full h-full object-cover transition-transform group-hover:scale-105" }),
           /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
-              className: "llm-ci-image-remove",
+              className: "absolute top-1 right-1 w-5 h-5 bg-black/50 hover:bg-black/80 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all backdrop-blur-sm",
               onClick: () => onImageRemove?.(img.id),
-              children: /* @__PURE__ */ jsx2(XIcon, {})
+              children: /* @__PURE__ */ jsx2(X, { className: "w-3 h-3" })
             }
           )
         ] }, img.id)) }),
@@ -1288,39 +1051,47 @@ ${newText}` : newText);
             onPaste: handlePaste,
             placeholder,
             disabled: disabled && !isGenerating,
-            rows: 1
+            rows: 1,
+            className: "w-full min-h-[24px] max-h-[200px] resize-none border-none outline-none bg-transparent text-zinc-900 dark:text-zinc-100 text-[15px] leading-relaxed px-2 m-0 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-700"
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { className: "llm-ci-toolbar", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "llm-ci-left-actions", children: [
-            modelSelector && /* @__PURE__ */ jsx2("div", { className: "llm-ci-model-selector", children: modelSelector }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-end justify-between mt-3 px-1", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
+            modelSelector && /* @__PURE__ */ jsx2("div", { className: "mr-2", children: modelSelector }),
             /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
-                className: "llm-ci-btn-icon",
+                className: "flex items-center justify-center w-8 h-8 rounded-full text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-200/50 dark:hover:bg-zinc-800 transition-colors",
                 onClick: () => fileInputRef.current?.click(),
-                title: "Attach image (or Ctrl+V to paste)",
-                children: /* @__PURE__ */ jsx2(ImageIcon, {})
+                title: "Attach image or PDF (Ctrl+V to paste)",
+                children: /* @__PURE__ */ jsx2(ImagePlus, { className: "w-4 h-4" })
               }
             ),
             actions
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "llm-ci-right-actions", children: /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2", children: isGenerating ? /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
-              className: sendClass,
-              onClick: isGenerating ? onStop : onSend,
-              disabled: !isGenerating && !canSend,
-              "aria-label": isGenerating ? "Stop generation" : "Send message",
-              children: isGenerating ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                /* @__PURE__ */ jsx2(StopIcon, {}),
+              className: "flex items-center justify-center h-8 px-4 rounded-full bg-zinc-200 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-300 dark:hover:bg-zinc-700 text-xs font-semibold tracking-wide transition-colors gap-1.5 cursor-pointer shadow-sm",
+              onClick: onStop,
+              children: [
+                /* @__PURE__ */ jsx2(Square, { className: "w-3 h-3 fill-current" }),
                 " Stop"
-              ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              className: `flex items-center justify-center h-8 px-4 rounded-full text-xs font-semibold tracking-wide transition-all gap-1.5 ${canSend ? "bg-black dark:bg-white text-white dark:text-black shadow-md hover:scale-[1.02] active:scale-[0.98] cursor-pointer" : "bg-zinc-200 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-600 cursor-not-allowed"}`,
+              onClick: onSend,
+              disabled: !canSend,
+              children: [
                 "Send ",
-                /* @__PURE__ */ jsx2(SendIcon, {})
-              ] })
+                /* @__PURE__ */ jsx2(Send, { className: "w-3.5 h-3.5" })
+              ]
             }
           ) })
         ] })
@@ -1330,430 +1101,53 @@ ${newText}` : newText);
 }
 
 // src/react/components.tsx
+import { RotateCcw, ChevronDown } from "lucide-react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 import { Streamdown } from "streamdown";
 import { code } from "@streamdown/code";
 import { mermaid } from "@streamdown/mermaid";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { math } from "@streamdown/math";
+import "streamdown/styles.css";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 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__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx3("polyline", { points: "23 4 23 10 17 10" }),
-    /* @__PURE__ */ jsx3("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
-  ] });
-}
-function ChevronDownIcon() {
-  return /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("polyline", { points: "6 9 12 15 18 9" }) });
-}
-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 bg = 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: ${bg};
-      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%;
-      overflow-wrap: break-word;
-    }
-    .llm-chat-bubble--assistant {
-      align-self: flex-start;
-      width: 100%;
-      min-width: 0; /* Prevents flex children from expanding past 100% */
-      overflow-x: hidden;
-    }
-    
-    /* User message \u2014 flat, subtle bg, no radius */
-    .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};
-    }
-    
-    /* Streamdown Overrides / Markdown Styling */
-    .llm-chat-assistant-content {
-      font-size: 14px;
-      line-height: 1.7;
-      color: ${text};
-      word-wrap: break-word;
-    }
-    .llm-chat-assistant-content > *:first-child { margin-top: 0; }
-    .llm-chat-assistant-content > *:last-child { margin-bottom: 0; }
-    
-    .llm-chat-assistant-content p {
-      margin: 0 0 12px 0;
-    }
-    
-    .llm-chat-assistant-content h1,
-    .llm-chat-assistant-content h2,
-    .llm-chat-assistant-content h3,
-    .llm-chat-assistant-content h4 {
-      margin: 20px 0 10px 0;
-      color: ${text};
-      font-weight: 600;
-      line-height: 1.3;
-    }
-    .llm-chat-assistant-content h1 { font-size: 1.5em; }
-    .llm-chat-assistant-content h2 { font-size: 1.3em; }
-    .llm-chat-assistant-content h3 { font-size: 1.1em; }
-    
-    .llm-chat-assistant-content ul,
-    .llm-chat-assistant-content ol {
-      margin: 0 0 12px 0;
-      padding-left: 24px;
-    }
-    .llm-chat-assistant-content li {
-      margin-bottom: 4px;
-    }
-    
-    .llm-chat-assistant-content pre {
-      background: ${surfaceSubtle} !important;
-      border: 1px solid ${borderSubtle} !important;
-      border-radius: 6px !important;
-      padding: 12px !important;
-      margin: 12px 0 !important;
-      overflow-x: auto !important;
-      white-space: pre !important;
-      max-width: 100%;
-    }
-    .llm-chat-assistant-content code {
-      font-family: ${monoFont} !important;
-      font-size: 13px !important;
-      white-space: inherit;
-    }
-    .llm-chat-assistant-content :not(pre) > code {
-      background: ${surfaceSubtle};
-      border: 1px solid ${borderSubtle};
-      border-radius: 4px;
-      padding: 2px 5px;
-      font-size: 12.5px !important;
-      white-space: pre-wrap !important;
-      word-break: break-word;
-    }
-    
-    .llm-chat-assistant-content blockquote {
-      border-left: 3px solid ${borderSubtle};
-      margin: 0 0 12px 0;
-      padding-left: 12px;
-      color: ${textTertiary};
-    }
-    
-    .llm-chat-assistant-content a {
-      color: #3b82f6;
-      text-decoration: none;
-    }
-    .llm-chat-assistant-content a:hover {
-      text-decoration: underline;
-    }
-    
-    .llm-chat-assistant-content table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 12px 0;
-    }
-    .llm-chat-assistant-content th,
-    .llm-chat-assistant-content td {
-      border: 1px solid ${borderSubtle};
-      padding: 6px 10px;
-      text-align: left;
-    }
-    .llm-chat-assistant-content th {
-      background: ${surfaceSubtle};
-      font-weight: 600;
-    }
-    
-    /* Attachments in message */
-    .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)"};
-    }
-
-    .llm-chat-input-area {
-      padding: 12px 16px 16px;
-      border-top: 1px solid ${borderSubtle};
-    }
-
-    /* Streamdown Animation CSS */
-    @keyframes sd-fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-    @keyframes sd-blurIn {
-      from { opacity: 0; filter: blur(4px); }
-      to { opacity: 1; filter: blur(0); }
-    }
-    @keyframes sd-slideUp {
-      from { opacity: 0; transform: translateY(4px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    [data-sd-animate] {
-      animation: var(--sd-animation, sd-fadeIn) var(--sd-duration, 150ms)
-        var(--sd-easing, ease) both;
-    }
-
-    @keyframes llm-pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.2; }
-    }
-  `;
-  const style = document.createElement("style");
-  style.id = STYLE_ID2;
-  style.textContent = css;
-  document.head.appendChild(style);
-}
 function isVisionModel2(modelId) {
   if (!modelId) return false;
   const lower = modelId.toLowerCase();
   return lower.includes("vl") || lower.includes("vision") || lower.includes("moondream");
 }
+var markdownComponents = {
+  h1: ({ children }) => /* @__PURE__ */ jsx3("h1", { className: "text-3xl font-bold tracking-tight mt-6 mb-4 text-zinc-900 dark:text-zinc-100", children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx3("h2", { className: "text-2xl font-semibold tracking-tight mt-6 mb-4 text-zinc-900 dark:text-zinc-100 border-b border-zinc-200 dark:border-zinc-800 pb-2", children }),
+  h3: ({ children }) => /* @__PURE__ */ jsx3("h3", { className: "text-xl font-semibold tracking-tight mt-6 mb-3 text-zinc-900 dark:text-zinc-100", children }),
+  h4: ({ children }) => /* @__PURE__ */ jsx3("h4", { className: "text-lg font-semibold tracking-tight mt-4 mb-2 text-zinc-900 dark:text-zinc-100", children }),
+  p: ({ children }) => /* @__PURE__ */ jsx3("p", { className: "leading-7 [&:not(:first-child)]:mt-4 text-zinc-800 dark:text-zinc-300", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx3("ul", { className: "my-4 ml-6 list-disc [&>li]:mt-2 text-zinc-800 dark:text-zinc-300", children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx3("ol", { className: "my-4 ml-6 list-decimal [&>li]:mt-2 text-zinc-800 dark:text-zinc-300", children }),
+  li: ({ children }) => /* @__PURE__ */ jsx3("li", { children }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx3("blockquote", { className: "mt-4 border-l-2 border-zinc-300 dark:border-zinc-700 pl-4 italic text-zinc-600 dark:text-zinc-400", children }),
+  a: ({ href, children }) => /* @__PURE__ */ jsx3("a", { href, className: "font-medium text-blue-600 hover:underline dark:text-blue-400", target: "_blank", rel: "noopener noreferrer", children }),
+  table: ({ children }) => /* @__PURE__ */ jsx3("div", { className: "my-4 w-full overflow-y-auto", children: /* @__PURE__ */ jsx3("table", { className: "w-full text-sm", children }) }),
+  tr: ({ children }) => /* @__PURE__ */ jsx3("tr", { className: "m-0 border-t border-zinc-200 dark:border-zinc-800 p-0 even:bg-zinc-50 dark:even:bg-zinc-900/50", children }),
+  th: ({ children }) => /* @__PURE__ */ jsx3("th", { className: "border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 px-4 py-2 font-semibold text-zinc-900 dark:text-zinc-100 text-left [&[align=center]]:text-center [&[align=right]]:text-right", children }),
+  td: ({ children }) => /* @__PURE__ */ jsx3("td", { className: "border border-zinc-200 dark:border-zinc-700 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right text-zinc-700 dark:text-zinc-300", children }),
+  pre: ({ children }) => /* @__PURE__ */ jsx3("pre", { className: "mt-4 mb-4 overflow-x-auto rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 p-4 text-[13px] leading-relaxed font-mono shadow-sm", children }),
+  code: ({ children, className }) => {
+    const isInline = !className;
+    return /* @__PURE__ */ jsx3("code", { className: cn("font-mono text-[13px]", isInline ? "bg-zinc-100 dark:bg-zinc-800/60 rounded-md px-1.5 py-0.5 border border-zinc-200 dark:border-zinc-700 text-zinc-800 dark:text-zinc-300" : ""), children });
+  }
+};
 function ModelSelector({
   currentModel,
-  onSelect,
-  theme
+  onSelect
 }) {
   const [isOpen, setIsOpen] = useState3(false);
   const ref = useRef3(null);
@@ -1775,27 +1169,28 @@ function ModelSelector({
     }
     return label;
   }, [currentModel]);
-  return /* @__PURE__ */ jsxs3("div", { className: "llm-chat-model-select", ref, children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", ref, children: [
     /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
-        className: "llm-chat-model-btn",
+        className: "flex items-center gap-1.5 px-3 py-1.5 bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-xs font-medium tracking-wide rounded-full transition-colors",
         onClick: () => setIsOpen(!isOpen),
         children: [
-          "[",
-          displayModel,
-          "] ",
-          /* @__PURE__ */ jsx3(ChevronDownIcon, {})
+          /* @__PURE__ */ jsx3("span", { children: displayModel }),
+          /* @__PURE__ */ jsx3(ChevronDown, { className: "w-3.5 h-3.5 opacity-70" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs3("div", { className: "llm-chat-model-menu", children: [
-      /* @__PURE__ */ jsx3("div", { className: "llm-chat-model-group", children: "[WebLLM]" }),
+    isOpen && /* @__PURE__ */ jsxs3("div", { className: "absolute top-[calc(100%+8px)] left-0 w-72 max-h-[300px] overflow-y-auto bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-xl z-50 py-2 scrollbar-thin", children: [
+      /* @__PURE__ */ jsx3("div", { className: "px-3 py-1.5 text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider", children: "WebLLM" }),
       Object.entries(WEBLLM_MODELS).map(([key, value]) => /* @__PURE__ */ jsxs3(
         "button",
         {
-          className: `llm-chat-model-item ${currentModel === value ? "llm-chat-model-item--active" : ""}`,
+          className: cn(
+            "block w-full text-left px-3 py-2 text-xs font-medium truncate transition-colors",
+            currentModel === value ? "bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400" : "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
+          ),
           onClick: () => {
             onSelect(value);
             setIsOpen(false);
@@ -1803,16 +1198,19 @@ function ModelSelector({
           children: [
             key,
             " ",
-            isVisionModel2(value) ? " [VISION]" : ""
+            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-1 px-1.5 py-0.5 rounded text-[9px] bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700", children: "VISION" })
           ]
         },
         key
       )),
-      /* @__PURE__ */ jsx3("div", { className: "llm-chat-model-group", children: "[Transformers.js]" }),
+      /* @__PURE__ */ jsx3("div", { className: "px-3 py-1.5 text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mt-2 border-t border-zinc-100 dark:border-zinc-800 pt-3", children: "Transformers.js" }),
       Object.entries(TRANSFORMERS_MODELS).map(([key, value]) => /* @__PURE__ */ jsxs3(
         "button",
         {
-          className: `llm-chat-model-item ${currentModel === value ? "llm-chat-model-item--active" : ""}`,
+          className: cn(
+            "block w-full text-left px-3 py-2 text-xs font-medium truncate transition-colors",
+            currentModel === value ? "bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400" : "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
+          ),
           onClick: () => {
             onSelect(value);
             setIsOpen(false);
@@ -1820,7 +1218,7 @@ function ModelSelector({
           children: [
             key,
             " ",
-            isVisionModel2(value) ? " [VISION]" : ""
+            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-1 px-1.5 py-0.5 rounded text-[9px] bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700", children: "VISION" })
           ]
         },
         key
@@ -1830,7 +1228,7 @@ function ModelSelector({
 }
 function Chat({
   systemPrompt = DEFAULT_SYSTEM_PROMPT,
-  placeholder = "Type a message...",
+  placeholder = "Message...",
   theme = "dark",
   className,
   maxHeight = "600px",
@@ -1840,7 +1238,7 @@ function Chat({
   onError: onErrorProp,
   showHeader = true,
   showProgress = true,
-  welcomeMessage = "Ready to assist",
+  welcomeMessage = "How can I help you today?",
   onModelChange
 }) {
   const { llm, isLoading, isReady, loadProgress, error, modelId, reload } = useLLM();
@@ -1853,9 +1251,6 @@ function Chat({
   const messagesEndRef = useRef3(null);
   const abortRef = useRef3(false);
   const isProcessingRef = useRef3(false);
-  useEffect3(() => {
-    injectChatStyles(theme);
-  }, [theme]);
   useEffect3(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, streamingText, isGenerating]);
@@ -1954,83 +1349,70 @@ function Chat({
       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__ */ jsxs3("div", { className: `llm-chat${className ? ` ${className}` : ""}`, style: { maxHeight, height: "100%" }, children: [
-    showHeader && /* @__PURE__ */ jsxs3("div", { className: "llm-chat-header", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col bg-white dark:bg-[#09090b] border border-zinc-200 dark:border-zinc-800 rounded-3xl overflow-hidden shadow-sm", className), style: { maxHeight, height: "100%" }, children: [
+    showHeader && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-5 py-4 border-b border-zinc-100 dark:border-zinc-800/60 bg-white/50 dark:bg-zinc-900/20 backdrop-blur-md", children: [
       onModelChange ? /* @__PURE__ */ jsx3(
         ModelSelector,
         {
           currentModel: modelId,
-          onSelect: onModelChange,
-          theme
+          onSelect: onModelChange
         }
-      ) : /* @__PURE__ */ jsx3("div", { className: "llm-chat-model-select", children: /* @__PURE__ */ jsxs3("span", { style: {
-        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-        fontSize: "11px",
-        textTransform: "uppercase",
-        letterSpacing: "0.05em"
-      }, children: [
-        "[",
-        modelId?.split("/").pop(),
-        "] ",
-        modelId && isVisionModel2(modelId) ? "[VISION]" : ""
-      ] }) }),
-      /* @__PURE__ */ jsxs3("div", { className: "llm-chat-status", children: [
-        /* @__PURE__ */ jsx3("span", { children: statusText }),
-        /* @__PURE__ */ jsx3("div", { className: statusDotClass })
+      ) : /* @__PURE__ */ jsxs3("div", { className: "px-3 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-full flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-xs font-semibold tracking-wide text-zinc-700 dark:text-zinc-300", children: modelId?.split("/").pop() }),
+        modelId && isVisionModel2(modelId) && /* @__PURE__ */ jsx3("span", { className: "px-1.5 py-0.5 rounded text-[9px] font-bold bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 border border-blue-200 dark:border-blue-800", children: "VISION" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400 capitalize", children: error ? "Error" : isReady ? "Ready" : isLoading ? "Loading" : "Idle" }),
+        /* @__PURE__ */ jsx3("div", { className: cn(
+          "w-2 h-2 rounded-full",
+          error ? "bg-red-500" : isReady ? "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" : "bg-zinc-300 dark:bg-zinc-700 animate-pulse"
+        ) })
       ] })
     ] }),
-    showProgress && isLoading && loadProgress && /* @__PURE__ */ jsxs3("div", { className: "llm-chat-progress", children: [
-      /* @__PURE__ */ jsx3("div", { className: "llm-chat-progress-bar", children: /* @__PURE__ */ jsx3(
+    showProgress && isLoading && loadProgress && /* @__PURE__ */ jsxs3("div", { className: "px-5 py-3 border-b border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/30", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center mb-1.5", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400 truncate pr-4", children: loadProgress.status }),
+        /* @__PURE__ */ jsxs3("span", { className: "text-xs font-bold text-zinc-900 dark:text-zinc-100", children: [
+          Math.round(loadProgress.progress),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "h-1.5 w-full bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx3(
         "div",
         {
-          className: "llm-chat-progress-fill",
+          className: "h-full bg-blue-500 dark:bg-blue-600 rounded-full transition-all duration-300 ease-out",
           style: { width: `${Math.min(100, loadProgress.progress)}%` }
         }
-      ) }),
-      /* @__PURE__ */ jsx3("div", { className: "llm-chat-progress-text", children: loadProgress.status })
+      ) })
     ] }),
-    error && /* @__PURE__ */ jsxs3("div", { className: "llm-chat-error", children: [
-      /* @__PURE__ */ jsx3("span", { className: "llm-chat-error-text", children: error.message }),
-      /* @__PURE__ */ jsxs3("button", { className: "llm-chat-error-retry", onClick: reload, children: [
-        /* @__PURE__ */ jsx3(RetryIcon, {}),
-        " Retry"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "llm-chat-messages", children: [
-      !isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxs3("div", { className: "llm-chat-welcome", children: [
-        /* @__PURE__ */ jsxs3("h3", { children: [
-          "[",
-          welcomeMessage,
-          "]"
-        ] }),
-        /* @__PURE__ */ jsx3("p", { children: "Markdown, code blocks, Mermaid diagrams. Paste images with Ctrl+V." })
-      ] }),
-      messages.map((msg, i) => /* @__PURE__ */ jsx3("div", { className: `llm-chat-bubble llm-chat-bubble--${msg.role}`, children: msg.role === "user" ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
-        msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx3("div", { className: "llm-chat-msg-images", children: msg.images.map((img) => /* @__PURE__ */ jsx3("img", { src: img.dataUrl, className: "llm-chat-msg-img", alt: "attachment" }, img.id)) }),
-        /* @__PURE__ */ jsx3("div", { className: "llm-chat-user-content", style: { padding: "0px" }, children: /* @__PURE__ */ jsx3("div", { className: "llm-chat-assistant-content", style: { padding: "10px 14px" }, children: /* @__PURE__ */ jsx3(Streamdown, { plugins: { code, mermaid }, children: msg.content }) }) })
-      ] }) : /* @__PURE__ */ jsx3("div", { className: "llm-chat-assistant-content", children: /* @__PURE__ */ jsx3(
-        Streamdown,
-        {
-          plugins: { code, mermaid },
-          animated: true,
-          isAnimating: false,
-          children: msg.content
-        }
-      ) }) }, i)),
-      streamingText && /* @__PURE__ */ jsx3("div", { className: "llm-chat-bubble llm-chat-bubble--assistant", children: /* @__PURE__ */ jsx3("div", { className: "llm-chat-assistant-content", children: /* @__PURE__ */ jsx3(
-        Streamdown,
+    error && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mx-5 mt-4 p-3 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900/50 rounded-xl", children: [
+      /* @__PURE__ */ jsx3("span", { className: "text-sm text-red-700 dark:text-red-400 font-medium", children: error.message }),
+      /* @__PURE__ */ jsxs3(
+        "button",
         {
-          plugins: { code, mermaid },
-          animated: true,
-          isAnimating: isGenerating,
-          children: streamingText
+          className: "flex items-center gap-1.5 px-3 py-1.5 bg-white dark:bg-black border border-red-200 dark:border-red-900 shadow-sm rounded-lg text-xs font-semibold text-red-700 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/50 transition-colors",
+          onClick: reload,
+          children: [
+            /* @__PURE__ */ jsx3(RotateCcw, { className: "w-3.5 h-3.5" }),
+            " Retry"
+          ]
         }
-      ) }) }),
-      /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex-1 overflow-y-auto p-5 flex flex-col gap-6 scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-800", children: [
+      !isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxs3("div", { className: "flex-1 flex flex-col items-center justify-center text-center opacity-80 mt-12 mb-8 transition-opacity hover:opacity-100", children: [
+        /* @__PURE__ */ jsx3("div", { className: "w-16 h-16 bg-gradient-to-tr from-blue-500 to-cyan-400 rounded-2xl shadow-xl shadow-blue-500/20 mb-6 flex items-center justify-center transform rotate-3", children: /* @__PURE__ */ jsx3("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) }),
+        /* @__PURE__ */ jsx3("h3", { className: "text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 mb-2", children: welcomeMessage }),
+        /* @__PURE__ */ jsx3("p", { className: "text-zinc-500 dark:text-zinc-400 max-w-sm", children: "Use Markdown, paste images (Ctrl+V), create Mermaid diagrams, and write math equations safely." })
+      ] }),
+      messages.map((msg, i) => /* @__PURE__ */ jsx3("div", { className: cn("flex flex-col max-w-[85%]", msg.role === "user" ? "self-end" : "self-start w-full"), children: msg.role === "user" ? /* @__PURE__ */ jsxs3("div", { className: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-5 py-3.5 rounded-[24px] rounded-br-[8px] sm:px-6 shadow-sm border border-zinc-200 dark:border-zinc-700/50", children: [
+        msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-2 mb-3 mt-1", children: msg.images.map((img) => /* @__PURE__ */ jsx3("img", { src: img.dataUrl, className: "w-24 h-24 object-cover rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm", alt: "attachment" }, img.id)) }),
+        /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx3(Streamdown, { plugins: { code, mermaid, math }, components: markdownComponents, animated: true, isAnimating: false, children: msg.content }) })
+      ] }) : /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none px-2 w-full min-w-0", children: /* @__PURE__ */ jsx3(Streamdown, { plugins: { code, mermaid, math }, components: markdownComponents, animated: true, isAnimating: false, children: msg.content }) }) }, i)),
+      streamingText && /* @__PURE__ */ jsx3("div", { className: "flex flex-col self-start w-full max-w-[85%]", children: /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none px-2 w-full min-w-0", children: /* @__PURE__ */ jsx3(Streamdown, { plugins: { code, mermaid, math }, components: markdownComponents, animated: true, isAnimating: isGenerating, children: streamingText }) }) }),
+      /* @__PURE__ */ jsx3("div", { ref: messagesEndRef, className: "h-4" })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "llm-chat-input-area", children: /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx3("div", { className: "p-4 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl border-t border-zinc-100 dark:border-zinc-800/80", children: /* @__PURE__ */ jsx3(
       ChatInput,
       {
         value: input,
@@ -2040,7 +1422,6 @@ function Chat({
         disabled: !isReady && !isLoading,
         isGenerating,
         placeholder: isLoading ? "Model is loading..." : placeholder,
-        theme,
         actions: inputActions,
         images,
         onImageAdd: (img) => setImages((prev) => [...prev, img]),