@tangle-network/sandbox-ui 0.3.12 → 0.4.0

package/dist/{chunk-6H3EFUUC.js → chunk-GVUW4VDD.js}

@@ -362,7 +362,7 @@ function AgentTimeline({
 
 // src/chat/chat-input.tsx
 import { useState as useState2, useRef, useCallback } from "react";
-import { Send, Square, Paperclip, X } from "lucide-react";
+import { Send, Square, Paperclip, FolderUp, X, Upload } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ChatInput({
   onSend,
@@ -375,11 +375,18 @@ function ChatInput({
   pendingFiles = [],
   onRemoveFile,
   onAttach,
+  onAttachFolder,
+  accept,
+  dropTitle = "Drop files to add context",
+  dropDescription = "Files will be attached to your next message.",
   className
 }) {
   const [value, setValue] = useState2("");
+  const [dragOver, setDragOver] = useState2(false);
+  const dragCounter = useRef(0);
   const textareaRef = useRef(null);
   const fileInputRef = useRef(null);
+  const folderInputRef = useRef(null);
   const handleSend = useCallback(() => {
     const trimmed = value.trim();
     if (!trimmed || isStreaming || disabled) return;
@@ -404,126 +411,244 @@ function ChatInput({
   const handleAttachClick = () => {
     fileInputRef.current?.click();
   };
+  const handleFolderClick = () => {
+    folderInputRef.current?.click();
+  };
   const handleFileChange = (e) => {
     if (e.target.files?.length) {
       onAttach?.(e.target.files);
       e.target.value = "";
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { className: cn("px-4 py-3", className), children: [
-    pendingFiles.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mb-3 flex flex-wrap gap-2", children: pendingFiles.map((f) => /* @__PURE__ */ jsxs5(
-      "span",
-      {
-        className: cn(
-          "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs shadow-[var(--shadow-card)] backdrop-blur-sm",
-          "border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))]",
-          f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
-          f.status !== "error" && "text-[var(--text-secondary)]"
-        ),
-        children: [
-          /* @__PURE__ */ jsx6("span", { className: "truncate max-w-[150px]", children: f.name }),
-          f.status === "uploading" && /* @__PURE__ */ jsx6("span", { className: "w-3 h-3 border-2 border-[var(--brand-cool)] border-t-transparent rounded-full animate-spin" }),
-          onRemoveFile && /* @__PURE__ */ jsx6(
-            "button",
+  const handleFolderChange = (e) => {
+    if (e.target.files?.length) {
+      (onAttachFolder ?? onAttach)?.(e.target.files);
+      e.target.value = "";
+    }
+  };
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current++;
+    if (e.dataTransfer?.types.includes("Files")) {
+      setDragOver(true);
+    }
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setDragOver(false);
+    }
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "copy";
+  }, []);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current = 0;
+    setDragOver(false);
+    const files = e.dataTransfer?.files;
+    if (files?.length && onAttach) {
+      onAttach(files);
+    }
+  }, [onAttach]);
+  const fileChips = pendingFiles.filter((f) => f.type === "file" || !f.type);
+  const folderChips = pendingFiles.filter((f) => f.type === "folder");
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn("px-4 py-3 relative", className),
+      onDragEnter: onAttach ? handleDragEnter : void 0,
+      onDragLeave: onAttach ? handleDragLeave : void 0,
+      onDragOver: onAttach ? handleDragOver : void 0,
+      onDrop: onAttach ? handleDrop : void 0,
+      children: [
+        dragOver && /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-[28px] border-2 border-dashed border-[var(--brand-cool)] bg-[var(--brand-cool)]/8 backdrop-blur-sm pointer-events-none", children: /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx6("div", { className: "mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--brand-cool)]/15", children: /* @__PURE__ */ jsx6(Upload, { className: "h-6 w-6 text-[var(--brand-cool)]" }) }),
+          /* @__PURE__ */ jsx6("p", { className: "text-sm font-semibold text-[var(--text-primary)]", children: dropTitle }),
+          /* @__PURE__ */ jsx6("p", { className: "mt-1 text-xs text-[var(--text-muted)]", children: dropDescription })
+        ] }) }),
+        pendingFiles.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "mb-3 flex flex-wrap gap-2", children: [
+          folderChips.map((f) => /* @__PURE__ */ jsxs5(
+            "span",
             {
-              type: "button",
-              "aria-label": `Remove ${f.name}`,
-              onClick: () => onRemoveFile(f.id),
-              className: "rounded p-0.5 transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
-              children: /* @__PURE__ */ jsx6(X, { className: "h-3 w-3" })
-            }
-          )
-        ]
-      },
-      f.id
-    )) }),
-    /* @__PURE__ */ jsx6("div", { className: "rounded-[28px] border border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top,rgba(96,165,250,0.16),transparent_42%),linear-gradient(135deg,rgba(98,114,243,0.12),rgba(255,255,255,0.03)_42%,transparent)] p-[1px] shadow-[var(--shadow-accent)]", children: /* @__PURE__ */ jsxs5("div", { className: "rounded-[26px] border border-white/5 bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent_35%),var(--bg-card)] px-3 py-3.5 transition-colors focus-within:border-[var(--border-accent)]", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center justify-between gap-3 px-1", children: [
-        /* @__PURE__ */ jsx6("div", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Agent Command Deck" }),
-        /* @__PURE__ */ jsx6("div", { className: "text-[11px] text-[var(--text-muted)]", children: isStreaming ? "Streaming response" : "Ready for next instruction" })
-      ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
-        onAttach && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-          /* @__PURE__ */ jsx6(
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs shadow-[var(--shadow-card)] backdrop-blur-sm",
+                "border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))]",
+                f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
+                f.status !== "error" && "text-[var(--text-secondary)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx6(FolderUp, { className: "h-3 w-3 shrink-0" }),
+                /* @__PURE__ */ jsx6("span", { className: "truncate max-w-[150px]", children: f.name }),
+                f.fileCount !== void 0 && /* @__PURE__ */ jsxs5("span", { className: "text-[var(--text-muted)]", children: [
+                  "(",
+                  f.fileCount,
+                  ")"
+                ] }),
+                f.status === "uploading" && /* @__PURE__ */ jsx6("span", { className: "w-3 h-3 border-2 border-[var(--brand-cool)] border-t-transparent rounded-full animate-spin" }),
+                onRemoveFile && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${f.name}`,
+                    onClick: () => onRemoveFile(f.id),
+                    className: "rounded p-0.5 transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                    children: /* @__PURE__ */ jsx6(X, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            f.id
+          )),
+          fileChips.map((f) => /* @__PURE__ */ jsxs5(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs shadow-[var(--shadow-card)] backdrop-blur-sm",
+                "border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))]",
+                f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
+                f.status !== "error" && "text-[var(--text-secondary)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx6(Paperclip, { className: "h-3 w-3 shrink-0" }),
+                /* @__PURE__ */ jsx6("span", { className: "truncate max-w-[150px]", children: f.name }),
+                f.status === "uploading" && /* @__PURE__ */ jsx6("span", { className: "w-3 h-3 border-2 border-[var(--brand-cool)] border-t-transparent rounded-full animate-spin" }),
+                onRemoveFile && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${f.name}`,
+                    onClick: () => onRemoveFile(f.id),
+                    className: "rounded p-0.5 transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                    children: /* @__PURE__ */ jsx6(X, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            f.id
+          ))
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "rounded-[28px] border border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top,rgba(96,165,250,0.16),transparent_42%),linear-gradient(135deg,rgba(98,114,243,0.12),rgba(255,255,255,0.03)_42%,transparent)] p-[1px] shadow-[var(--shadow-accent)]", children: /* @__PURE__ */ jsxs5("div", { className: "rounded-[26px] border border-white/5 bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent_35%),var(--bg-card)] px-3 py-3.5 transition-colors focus-within:border-[var(--border-accent)]", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center justify-between gap-3 px-1", children: [
+            /* @__PURE__ */ jsx6("div", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Agent Command Deck" }),
+            /* @__PURE__ */ jsx6("div", { className: "text-[11px] text-[var(--text-muted)]", children: isStreaming ? "Streaming response" : "Ready for next instruction" })
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
+            onAttach && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleAttachClick,
+                  disabled: isStreaming,
+                  "aria-label": "Attach files",
+                  title: "Attach files",
+                  className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-[var(--text-muted)] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                  children: /* @__PURE__ */ jsx6(Paperclip, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  onChange: handleFileChange,
+                  accept: accept ?? ".pdf,.csv,.xlsx,.xls,.jpg,.jpeg,.png,.gif,.txt,.json,.yaml,.yml"
+                }
+              )
+            ] }),
+            (onAttachFolder ?? onAttach) && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleFolderClick,
+                  disabled: isStreaming,
+                  "aria-label": "Attach folder",
+                  title: "Attach folder",
+                  className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-[var(--text-muted)] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                  children: /* @__PURE__ */ jsx6(FolderUp, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  ref: folderInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  onChange: handleFolderChange,
+                  webkitdirectory: ""
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx6(
+              "textarea",
+              {
+                ref: textareaRef,
+                value,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                placeholder,
+                disabled: isStreaming || disabled,
+                rows: 1,
+                "aria-label": "Message input",
+                className: "min-h-[36px] max-h-[160px] flex-1 resize-none bg-transparent text-[15px] leading-7 text-[var(--text-primary)] placeholder:text-[var(--text-muted)] disabled:opacity-50 focus-visible:outline-none"
+              }
+            ),
+            isStreaming ? /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                "aria-label": "Stop response",
+                className: "mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--code-error)]/20 bg-[var(--code-error)]/14 p-2.5 text-[var(--code-error)] transition-colors hover:bg-[var(--code-error)]/24 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--code-error)]/50",
+                children: /* @__PURE__ */ jsx6(Square, { className: "h-4 w-4" })
+              }
+            ) : /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                onClick: handleSend,
+                disabled: !value.trim() || disabled,
+                "aria-label": "Send message",
+                className: "mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--border-accent)] bg-[linear-gradient(135deg,rgba(82,164,255,0.24),rgba(82,164,255,0.08))] p-2.5 text-[var(--brand-cool)] transition-colors hover:translate-y-[-1px] hover:bg-[linear-gradient(135deg,rgba(82,164,255,0.28),rgba(82,164,255,0.12))] disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                children: /* @__PURE__ */ jsx6(Send, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs5("div", { className: "mt-2 flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-2", children: modelLabel && /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
-              onClick: handleAttachClick,
-              disabled: isStreaming,
-              "aria-label": "Attach files",
-              className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-[var(--text-muted)] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
-              children: /* @__PURE__ */ jsx6(Paperclip, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              multiple: true,
-              className: "hidden",
-              onChange: handleFileChange,
-              accept: ".pdf,.csv,.xlsx,.xls,.jpg,.jpeg,.png,.gif,.txt,.json,.yaml,.yml"
+              onClick: onModelClick,
+              "aria-label": `Select model, current model ${modelLabel}`,
+              className: "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-2.5 py-1 text-xs text-[var(--text-muted)] transition-colors hover:border-[var(--border-accent)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+              children: [
+                /* @__PURE__ */ jsx6("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--code-success)]" }),
+                modelLabel
+              ]
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsx6(
-          "textarea",
-          {
-            ref: textareaRef,
-            value,
-            onChange: handleChange,
-            onKeyDown: handleKeyDown,
-            placeholder,
-            disabled: isStreaming || disabled,
-            rows: 1,
-            "aria-label": "Message input",
-            className: "min-h-[36px] max-h-[160px] flex-1 resize-none bg-transparent text-[15px] leading-7 text-[var(--text-primary)] placeholder:text-[var(--text-muted)] disabled:opacity-50 focus-visible:outline-none"
-          }
-        ),
-        isStreaming ? /* @__PURE__ */ jsx6(
-          "button",
-          {
-            type: "button",
-            onClick: onCancel,
-            "aria-label": "Stop response",
-            className: "mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--code-error)]/20 bg-[var(--code-error)]/14 p-2.5 text-[var(--code-error)] transition-colors hover:bg-[var(--code-error)]/24 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--code-error)]/50",
-            children: /* @__PURE__ */ jsx6(Square, { className: "h-4 w-4" })
-          }
-        ) : /* @__PURE__ */ jsx6(
-          "button",
-          {
-            type: "button",
-            onClick: handleSend,
-            disabled: !value.trim() || disabled,
-            "aria-label": "Send message",
-            className: "mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--border-accent)] bg-[linear-gradient(135deg,rgba(82,164,255,0.24),rgba(82,164,255,0.08))] p-2.5 text-[var(--brand-cool)] transition-colors hover:translate-y-[-1px] hover:bg-[linear-gradient(135deg,rgba(82,164,255,0.28),rgba(82,164,255,0.12))] disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
-            children: /* @__PURE__ */ jsx6(Send, { className: "h-4 w-4" })
-          }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxs5("div", { className: "mt-2 flex items-center justify-between px-1", children: [
-      /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-2", children: modelLabel && /* @__PURE__ */ jsxs5(
-        "button",
-        {
-          type: "button",
-          onClick: onModelClick,
-          "aria-label": `Select model, current model ${modelLabel}`,
-          className: "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-2.5 py-1 text-xs text-[var(--text-muted)] transition-colors hover:border-[var(--border-accent)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
-          children: [
-            /* @__PURE__ */ jsx6("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--code-success)]" }),
-            modelLabel
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs5("span", { className: "text-xs text-[var(--text-muted)]", children: [
-        /* @__PURE__ */ jsx6("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px]", children: "Cmd" }),
-        /* @__PURE__ */ jsx6("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px] ml-0.5", children: "L" }),
-        /* @__PURE__ */ jsx6("span", { className: "ml-1", children: "to focus" })
-      ] })
-    ] })
-  ] });
+          ) }),
+          /* @__PURE__ */ jsxs5("span", { className: "text-xs text-[var(--text-muted)]", children: [
+            /* @__PURE__ */ jsx6("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px]", children: "Cmd" }),
+            /* @__PURE__ */ jsx6("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px] ml-0.5", children: "L" }),
+            /* @__PURE__ */ jsx6("span", { className: "ml-1", children: "to focus" })
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/chat/chat-container.tsx