hermium 0.2.0 → 0.3.0

package/dist/server/_ssr/ChatInputBlock-Bu2-iop_.mjs

@@ -0,0 +1,220 @@
+import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
+import { u as useChatStore, B as Button, c as cn } from "./router-CUAfx91O.mjs";
+import { k as IconFile, C as IconX, o as IconPaperclip, q as IconPhotoScan, t as IconPlayerStop, a as IconArrowUp } from "../_libs/tabler__icons-react.mjs";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ChatInputBlock({
+  onCreateSession
+}) {
+  const [inputValue, setInputValue] = reactExports.useState("");
+  const [attachments, setAttachments] = reactExports.useState([]);
+  const [isDragging, setIsDragging] = reactExports.useState(false);
+  const inputRef = reactExports.useRef(null);
+  const fileInputRef = reactExports.useRef(null);
+  const sendMessage = useChatStore((s) => s.sendMessage);
+  const abortStream = useChatStore((s) => s.abortStream);
+  const isStreaming = useChatStore((s) => s.isStreaming);
+  const activeSessionId = useChatStore((s) => s.activeSessionId);
+  const handleFiles = reactExports.useCallback((files) => {
+    if (!files) return;
+    const newAttachments = [];
+    for (const file of Array.from(files)) {
+      newAttachments.push({
+        id: Math.random().toString(36).slice(2),
+        name: file.name,
+        type: file.type || "application/octet-stream",
+        size: file.size,
+        url: URL.createObjectURL(file),
+        file
+      });
+    }
+    setAttachments((prev) => [...prev, ...newAttachments]);
+  }, []);
+  const removeAttachment = reactExports.useCallback((id) => {
+    setAttachments((prev) => {
+      const att = prev.find((a) => a.id === id);
+      if (att) URL.revokeObjectURL(att.url);
+      return prev.filter((a) => a.id !== id);
+    });
+  }, []);
+  const send = async () => {
+    const raw = inputValue.trim();
+    if (!raw && attachments.length === 0) return;
+    if (onCreateSession) {
+      const id = await useChatStore.getState().createNewSession();
+      if (id) {
+        onCreateSession(id);
+        setInputValue("");
+        if (inputRef.current) inputRef.current.value = "";
+        const atts2 = attachments.length > 0 ? attachments : void 0;
+        setAttachments([]);
+        await sendMessage(raw, void 0, atts2);
+      }
+      return;
+    }
+    if (!activeSessionId) {
+      const id = await useChatStore.getState().createNewSession();
+      if (!id) return;
+    }
+    setInputValue("");
+    if (inputRef.current) inputRef.current.value = "";
+    const atts = attachments.length > 0 ? attachments : void 0;
+    setAttachments([]);
+    await sendMessage(raw, void 0, atts);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  const isImage = (type) => type.startsWith("image/");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[120px] flex-col rounded-2xl cursor-text bg-card border border-border shadow-lg transition-colors",
+        isDragging && "border-primary ring-2 ring-primary/20"
+      ),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        attachments.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2 p-3 pb-0", children: attachments.map((att) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "group relative flex items-center gap-2 rounded-lg border bg-muted/50 px-2 py-1.5 pr-7 text-xs",
+            children: [
+              isImage(att.type) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: att.url,
+                  alt: att.name,
+                  className: "h-6 w-6 rounded object-cover"
+                }
+              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconFile, { className: "size-4 text-muted-foreground shrink-0" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate max-w-[120px]", children: att.name }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground/60", children: formatSize(att.size) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => removeAttachment(att.id),
+                  className: "absolute right-1 top-1/2 -translate-y-1/2 flex items-center justify-center rounded p-0.5 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconX, { className: "size-3" })
+                }
+              )
+            ]
+          },
+          att.id
+        )) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 relative overflow-y-auto max-h-[258px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Textarea,
+          {
+            ref: inputRef,
+            value: inputValue,
+            onChange: (e) => setInputValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder: "Ask anything",
+            className: "w-full border-0 p-3 transition-[padding] duration-200 ease-in-out min-h-[48.4px] outline-none text-[16px] text-foreground resize-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent! whitespace-pre-wrap break-words"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-h-[40px] items-center gap-2 p-2 pb-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                className: "hidden",
+                onChange: (e) => handleFiles(e.target.files)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                className: "text-muted-foreground hover:text-foreground transition-colors duration-100 ease-out",
+                title: "Attach files",
+                "aria-label": "Attach files",
+                onClick: () => fileInputRef.current?.click(),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconPaperclip, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                className: "text-muted-foreground hover:text-foreground transition-colors duration-100 ease-out",
+                title: "Attach images",
+                "aria-label": "Attach images",
+                onClick: () => fileInputRef.current?.click(),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconPhotoScan, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-auto flex items-center gap-3", children: isStreaming ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              onClick: abortStream,
+              className: "rounded-full bg-destructive hover:bg-destructive/90 text-destructive-foreground transition-colors cursor-pointer",
+              title: "Stop generating",
+              "aria-label": "Stop generating",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconPlayerStop, { className: "h-4 w-4" })
+            }
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              onClick: send,
+              className: cn(
+                "rounded-full transition-colors duration-100 ease-out cursor-pointer bg-primary",
+                (inputValue || attachments.length > 0) && "bg-primary hover:bg-primary/90!"
+              ),
+              disabled: !inputValue && attachments.length === 0,
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, { className: "h-4 w-4 text-primary-foreground" })
+            }
+          ) })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  ChatInputBlock as C
+};

package/dist/server/_ssr/MarkdownMessage-CNS7OSKN.mjs

@@ -0,0 +1,68 @@
+import { j as jsxRuntimeExports } from "../_libs/react.mjs";
+import "./index-C1mT_2d8.mjs";
+import { M as Markdown } from "../_libs/react-markdown.mjs";
+import { r as rehypeHighlight } from "../_libs/rehype-highlight.mjs";
+import { r as remarkGfm } from "../_libs/remark-gfm.mjs";
+function MarkdownMessage({
+  content,
+  isStreaming
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "prose prose-sm dark:prose-invert max-w-none leading-relaxed", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Markdown,
+      {
+        remarkPlugins: [remarkGfm],
+        rehypePlugins: [rehypeHighlight],
+        components: {
+          p: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-3 last:mb-0", children }),
+          h1: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-xl font-semibold mt-4 mb-2", children }),
+          h2: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold mt-3 mb-2", children }),
+          h3: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-semibold mt-2 mb-1", children }),
+          ul: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "list-disc pl-5 mb-3 space-y-1", children }),
+          ol: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: "list-decimal pl-5 mb-3 space-y-1", children }),
+          li: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "marker:text-muted-foreground", children }),
+          code: ({ className, children, ...props }) => {
+            const isBlock = className?.includes("hljs") || className?.includes("language-");
+            if (!isBlock) {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "code",
+                {
+                  className: "rounded bg-muted px-1.5 py-0.5 text-sm font-mono text-foreground",
+                  ...props,
+                  children
+                }
+              );
+            }
+            const lang = className?.match(/language-(\w+)/)?.[1];
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative my-3 rounded-lg border bg-muted/50 overflow-hidden", children: [
+              lang && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between px-3 py-1.5 bg-muted border-b text-[10px] text-muted-foreground font-mono uppercase", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "p-3 overflow-x-auto text-sm leading-relaxed m-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className, ...props, children }) })
+            ] });
+          },
+          blockquote: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("blockquote", { className: "border-l-2 border-muted-foreground/30 pl-4 italic text-muted-foreground my-3", children }),
+          a: ({ href, children }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "a",
+            {
+              href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-primary underline underline-offset-2 hover:text-primary/80 transition-colors",
+              children
+            }
+          ),
+          table: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-x-auto my-3 rounded-lg border", children: /* @__PURE__ */ jsxRuntimeExports.jsx("table", { className: "w-full text-sm border-collapse", children }) }),
+          thead: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { className: "bg-muted border-b", children }),
+          th: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-3 py-2 text-left font-medium text-foreground", children }),
+          td: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-3 py-2 border-b border-muted", children }),
+          hr: () => /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "my-4 border-border" }),
+          strong: ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "font-semibold text-foreground", children })
+        },
+        children: content
+      }
+    ),
+    isStreaming && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-block w-0.5 h-4 bg-foreground/70 ml-0.5 align-text-bottom animate-pulse" })
+  ] });
+}
+export {
+  MarkdownMessage as M
+};