@blank-utils/llm 0.4.4 → 0.4.6

package/dist/{chunk-PZDFDQSH.js → chunk-RRDW7WNW.js}

@@ -894,7 +894,7 @@ 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 "lucide-react";
+import { Send, Square, Paperclip } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChatInput({
   value,
@@ -1054,36 +1054,48 @@ ${newText}` : newText);
           }
         ),
         /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between mt-6", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 flex-wrap", children: [
             modelSelector && /* @__PURE__ */ jsx2("div", { children: modelSelector }),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs2(
               "button",
               {
                 type: "button",
-                className: "text-[11px] uppercase tracking-[0.2em] text-current opacity-50 hover:opacity-100 transition-opacity font-light",
+                className: "group flex items-center justify-center gap-2 px-4 py-2 rounded border bg-transparent border-current/20 text-current hover:bg-current/5 transition-all duration-300",
                 onClick: () => fileInputRef.current?.click(),
                 title: "Attach image or PDF (Ctrl+V to paste)",
-                children: "[ FILE ]"
+                children: [
+                  /* @__PURE__ */ jsx2(Paperclip, { className: "w-3.5 h-3.5 opacity-70 group-hover:opacity-100 transition-opacity" }),
+                  /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-bold tracking-[0.2em] uppercase whitespace-nowrap", children: "[ FILE ]" }),
+                  /* @__PURE__ */ jsx2("span", { className: "text-[9px] opacity-40 group-hover:opacity-60 transition-opacity tracking-widest whitespace-nowrap", children: "\u30D5\u30A1\u30A4\u30EB" })
+                ]
               }
             ),
             actions
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-4", children: isGenerating ? /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-3 flex-wrap", children: isGenerating ? /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
-              className: "text-red-500 hover:opacity-70 font-light text-[11px] uppercase tracking-[0.2em] transition-opacity cursor-pointer",
+              className: "group flex items-center justify-center gap-2 px-4 py-2 rounded border bg-red-500/10 border-red-500/30 text-red-500 hover:bg-red-500/20 transition-all duration-300",
               onClick: onStop,
-              children: "[ STOP ]"
+              children: [
+                /* @__PURE__ */ jsx2(Square, { className: "w-3.5 h-3.5 opacity-70 group-hover:opacity-100 transition-opacity" }),
+                /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-bold tracking-[0.2em] uppercase whitespace-nowrap", children: "[ STOP ]" }),
+                /* @__PURE__ */ jsx2("span", { className: "text-[9px] opacity-40 group-hover:opacity-60 transition-opacity tracking-widest whitespace-nowrap", children: "\u505C\u6B62" })
+              ]
             }
-          ) : /* @__PURE__ */ jsx2(
+          ) : /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
-              className: `text-[11px] font-light uppercase tracking-[0.2em] transition-opacity ${canSend ? "text-current opacity-100 hover:opacity-70 cursor-pointer" : "text-current opacity-20 cursor-not-allowed"}`,
+              className: `group flex items-center justify-center gap-2 px-5 py-2 rounded transition-all duration-300 ${canSend ? theme === "dark" ? "bg-[#fafafa] text-black border hover:opacity-80" : "bg-black text-[#fafafa] border hover:opacity-80" : theme === "dark" ? "bg-[#fafafa]/10 text-[#fafafa]/40 cursor-not-allowed border border-transparent" : "bg-black/10 text-black/40 cursor-not-allowed border border-transparent"}`,
               onClick: onSend,
               disabled: !canSend,
-              children: "[ SEND ]"
+              children: [
+                /* @__PURE__ */ jsx2(Send, { className: "w-3.5 h-3.5 opacity-70 group-hover:opacity-100 transition-opacity" }),
+                /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-bold tracking-[0.2em] uppercase whitespace-nowrap", children: "[ SEND ]" }),
+                /* @__PURE__ */ jsx2("span", { className: "text-[9px] opacity-40 group-hover:opacity-60 transition-opacity tracking-widest whitespace-nowrap", children: "\u9001\u4FE1" })
+              ]
             }
           ) })
         ] })
@@ -1093,7 +1105,7 @@ ${newText}` : newText);
 }
 
 // src/react/components.tsx
-import { AlertCircle } from "lucide-react";
+import { RotateCcw, AlertCircle } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Streamdown, parseMarkdownIntoBlocks } from "streamdown";
@@ -1451,9 +1463,20 @@ ${systemPrompt}` : systemPrompt;
         }
       ) })
     ] }),
-    error && /* @__PURE__ */ jsxs3("div", { className: "mx-6 mt-6 p-4 border border-red-500/30 text-red-500 bg-transparent flex justify-between items-center text-[10px] tracking-[0.2em] uppercase", children: [
-      /* @__PURE__ */ jsx3("span", { className: "font-light", children: error.message }),
-      /* @__PURE__ */ jsx3("button", { onClick: reload, className: "hover:opacity-70 transition-opacity", children: "[ REBOOT ]" })
+    error && /* @__PURE__ */ jsxs3("div", { className: "mx-6 md:mx-8 mt-6 p-6 border border-red-500/30 text-red-500 bg-red-500/5 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 text-[10px] tracking-[0.2em] uppercase rounded-md", children: [
+      /* @__PURE__ */ jsx3("span", { className: "font-light leading-relaxed max-w-2xl", children: error.message }),
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          onClick: reload,
+          className: "group flex items-center justify-center min-w-max gap-3 px-6 py-3 rounded-md border border-red-500/30 bg-red-500/10 text-red-500 hover:bg-red-500/20 transition-all duration-300",
+          children: [
+            /* @__PURE__ */ jsx3(RotateCcw, { className: "w-4 h-4 opacity-70 group-hover:opacity-100 transition-opacity" }),
+            /* @__PURE__ */ jsx3("span", { className: "text-[11px] font-bold tracking-[0.2em] uppercase", children: "[ REBOOT ]" }),
+            /* @__PURE__ */ jsx3("span", { className: "text-[10px] opacity-40 group-hover:opacity-60 transition-opacity tracking-widest", children: "\u518D\u8D77\u52D5" })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs3("div", { className: "flex-1 overflow-y-auto p-6 flex flex-col gap-12 scrollbar-none", children: [
       !isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxs3("div", { className: "flex-1 flex flex-col items-center justify-center text-center p-8", children: [

package/dist/index.css

@@ -2310,6 +2310,9 @@ video {
 .h-24 {
   height: 6rem;
 }
+.h-3\.5 {
+  height: 0.875rem;
+}
 .h-4 {
   height: 1rem;
 }
@@ -2352,6 +2355,9 @@ video {
 .w-24 {
   width: 6rem;
 }
+.w-3\.5 {
+  width: 0.875rem;
+}
 .w-4 {
   width: 1rem;
 }
@@ -2373,6 +2379,13 @@ video {
 .min-w-\[120px\] {
   min-width: 120px;
 }
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+.max-w-2xl {
+  max-width: 42rem;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -2453,6 +2466,9 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
@@ -2575,6 +2591,9 @@ video {
 .border-red-500\/30 {
   border-color: rgb(239 68 68 / 0.3);
 }
+.border-transparent {
+  border-color: transparent;
+}
 .border-white\/20 {
   border-color: rgb(255 255 255 / 0.2);
 }
@@ -2582,6 +2601,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
 }
+.bg-\[\#fafafa\]\/10 {
+  background-color: rgb(250 250 250 / 0.1);
+}
 .bg-\[var\(--sdm-tbg\)\] {
   background-color: var(--sdm-tbg);
 }
@@ -2612,6 +2634,9 @@ video {
 .bg-red-500\/20 {
   background-color: rgb(239 68 68 / 0.2);
 }
+.bg-red-500\/5 {
+  background-color: rgb(239 68 68 / 0.05);
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -2669,6 +2694,10 @@ video {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -2693,6 +2722,10 @@ video {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2780,6 +2813,9 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.font-bold {
+  font-weight: 700;
+}
 .font-light {
   font-weight: 300;
 }
@@ -2820,6 +2856,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(250 250 250 / var(--tw-text-opacity, 1));
 }
+.text-\[\#fafafa\]\/40 {
+  color: rgb(250 250 250 / 0.4);
+}
 .text-\[var\(--sdm-c\,inherit\)\] {
   color: var(--sdm-c,inherit);
 }
@@ -2827,6 +2866,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
+.text-black\/40 {
+  color: rgb(0 0 0 / 0.4);
+}
 .text-current {
   color: currentColor;
 }
@@ -2859,15 +2901,12 @@ video {
 .opacity-0 {
   opacity: 0;
 }
-.opacity-100 {
-  opacity: 1;
-}
-.opacity-20 {
-  opacity: 0.2;
-}
 .opacity-30 {
   opacity: 0.3;
 }
+.opacity-40 {
+  opacity: 0.4;
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -3085,6 +3124,9 @@ video {
   --tw-content: var(--streamdown-caret);
   content: var(--tw-content);
 }
+.hover\:bg-red-500\/20:hover {
+  background-color: rgb(239 68 68 / 0.2);
+}
 .hover\:bg-red-500\/30:hover {
   background-color: rgb(239 68 68 / 0.3);
 }
@@ -3097,6 +3139,9 @@ video {
 .hover\:opacity-70:hover {
   opacity: 0.7;
 }
+.hover\:opacity-80:hover {
+  opacity: 0.8;
+}
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -3109,6 +3154,9 @@ video {
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
+.group:hover .group-hover\:opacity-60 {
+  opacity: 0.6;
+}
 .group:hover .group-hover\:grayscale-0 {
   --tw-grayscale: grayscale(0);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3123,6 +3171,18 @@ video {
     backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   }
 }
+@media (min-width: 768px) {
+  .md\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+  .md\:flex-row {
+    flex-direction: row;
+  }
+  .md\:items-center {
+    align-items: center;
+  }
+}
 @media (prefers-color-scheme: dark) {
   .dark\:bg-\[var\(--shiki-dark-bg\,var\(--sdm-tbg\)\)\] {
     background-color: var(--shiki-dark-bg,var(--sdm-tbg));

package/dist/index.js

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

package/dist/react/index.css

@@ -2310,6 +2310,9 @@ video {
 .h-24 {
   height: 6rem;
 }
+.h-3\.5 {
+  height: 0.875rem;
+}
 .h-4 {
   height: 1rem;
 }
@@ -2352,6 +2355,9 @@ video {
 .w-24 {
   width: 6rem;
 }
+.w-3\.5 {
+  width: 0.875rem;
+}
 .w-4 {
   width: 1rem;
 }
@@ -2373,6 +2379,13 @@ video {
 .min-w-\[120px\] {
   min-width: 120px;
 }
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+.max-w-2xl {
+  max-width: 42rem;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -2453,6 +2466,9 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
@@ -2575,6 +2591,9 @@ video {
 .border-red-500\/30 {
   border-color: rgb(239 68 68 / 0.3);
 }
+.border-transparent {
+  border-color: transparent;
+}
 .border-white\/20 {
   border-color: rgb(255 255 255 / 0.2);
 }
@@ -2582,6 +2601,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
 }
+.bg-\[\#fafafa\]\/10 {
+  background-color: rgb(250 250 250 / 0.1);
+}
 .bg-\[var\(--sdm-tbg\)\] {
   background-color: var(--sdm-tbg);
 }
@@ -2612,6 +2634,9 @@ video {
 .bg-red-500\/20 {
   background-color: rgb(239 68 68 / 0.2);
 }
+.bg-red-500\/5 {
+  background-color: rgb(239 68 68 / 0.05);
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -2669,6 +2694,10 @@ video {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -2693,6 +2722,10 @@ video {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2780,6 +2813,9 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.font-bold {
+  font-weight: 700;
+}
 .font-light {
   font-weight: 300;
 }
@@ -2820,6 +2856,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(250 250 250 / var(--tw-text-opacity, 1));
 }
+.text-\[\#fafafa\]\/40 {
+  color: rgb(250 250 250 / 0.4);
+}
 .text-\[var\(--sdm-c\,inherit\)\] {
   color: var(--sdm-c,inherit);
 }
@@ -2827,6 +2866,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
+.text-black\/40 {
+  color: rgb(0 0 0 / 0.4);
+}
 .text-current {
   color: currentColor;
 }
@@ -2859,15 +2901,12 @@ video {
 .opacity-0 {
   opacity: 0;
 }
-.opacity-100 {
-  opacity: 1;
-}
-.opacity-20 {
-  opacity: 0.2;
-}
 .opacity-30 {
   opacity: 0.3;
 }
+.opacity-40 {
+  opacity: 0.4;
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -3085,6 +3124,9 @@ video {
   --tw-content: var(--streamdown-caret);
   content: var(--tw-content);
 }
+.hover\:bg-red-500\/20:hover {
+  background-color: rgb(239 68 68 / 0.2);
+}
 .hover\:bg-red-500\/30:hover {
   background-color: rgb(239 68 68 / 0.3);
 }
@@ -3097,6 +3139,9 @@ video {
 .hover\:opacity-70:hover {
   opacity: 0.7;
 }
+.hover\:opacity-80:hover {
+  opacity: 0.8;
+}
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -3109,6 +3154,9 @@ video {
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
+.group:hover .group-hover\:opacity-60 {
+  opacity: 0.6;
+}
 .group:hover .group-hover\:grayscale-0 {
   --tw-grayscale: grayscale(0);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3123,6 +3171,18 @@ video {
     backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   }
 }
+@media (min-width: 768px) {
+  .md\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+  .md\:flex-row {
+    flex-direction: row;
+  }
+  .md\:items-center {
+    align-items: center;
+  }
+}
 @media (prefers-color-scheme: dark) {
   .dark\:bg-\[var\(--shiki-dark-bg\,var\(--sdm-tbg\)\)\] {
     background-color: var(--shiki-dark-bg,var(--sdm-tbg));

package/dist/react/index.js

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

package/package.json

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