@tangle-network/sandbox-ui 0.77.0 → 0.80.0

package/dist/chat.d.ts

@@ -269,6 +269,44 @@ interface AgentSessionControlsProps {
  */
 declare function AgentSessionControls({ harness, profile, model, reasoning, filterModelsToHarness, trailing, className, context, layout, menuPlacement, }: AgentSessionControlsProps): react_jsx_runtime.JSX.Element | null;
 
+/** Limits applied when staging files onto a composer. */
+interface ComposerFileValidationConfig {
+    /** Reject any single file larger than this. */
+    maxSizeBytes?: number;
+    /** Reject files once the staged count would exceed this. */
+    maxCount?: number;
+    /** Files already staged, counted against `maxCount` before this batch. */
+    currentCount?: number;
+    /**
+     * Comma-separated accept list, same grammar as the native `<input accept>`
+     * attribute: file extensions (`.png`), exact MIME types (`image/png`), and
+     * MIME wildcards (`image/*`).
+     */
+    accept?: string;
+}
+/** A file that failed validation, paired with a human-readable reason. */
+interface ComposerFileRejection {
+    file: File;
+    reason: string;
+}
+/**
+ * Checks a single file against a comma-separated `accept` list using the same
+ * grammar as the native `<input accept>` attribute. An undefined or empty
+ * `accept` accepts everything.
+ */
+declare function isAcceptedType(file: File, accept?: string): boolean;
+/**
+ * Splits a batch of files into what's safe to stage and what's rejected,
+ * checking accept type, then size, then the running count against
+ * `currentCount` + `maxCount`. Each rejection carries a reason naming the
+ * file and the limit it broke. Pure data in, pure data out — no throwing,
+ * no console noise, so callers decide how to surface rejections.
+ */
+declare function validateComposerFiles(files: File[] | FileList, config: ComposerFileValidationConfig): {
+    accepted: File[];
+    rejected: ComposerFileRejection[];
+};
+
 /** A staged attachment shown as a chip above the input. */
 interface ComposerFile {
     id: string;
@@ -278,6 +316,14 @@ interface ComposerFile {
     /** File count for a folder chip. */
     fileCount?: number;
     status: "pending" | "uploading" | "ready" | "error";
+    /**
+     * Object URL for an image thumbnail. The app owns creation and revocation
+     * (e.g. `URL.createObjectURL` on stage, `URL.revokeObjectURL` on remove) —
+     * the composer only ever reads it.
+     */
+    previewUrl?: string;
+    /** Shown on the chip when `status === "error"`. */
+    errorMessage?: string;
 }
 interface AgentComposerProps {
     /** Composer text (controlled). */
@@ -324,9 +370,42 @@ interface AgentComposerProps {
     onAttachFolder?: (files: FileList) => void;
     attachments?: ReadonlyArray<ComposerFile>;
     onRemoveFile?: (id: string) => void;
+    /** When set, chips with `status === "error"` render a retry button. */
+    onRetryFile?: (id: string) => void;
+    /**
+     * File types the composer takes, in the native `<input accept>` grammar.
+     * Enforced on every ingress path — the picker dialog, drag-and-drop, and
+     * clipboard paste — so a type the picker won't offer can't arrive by another
+     * route. Non-matching files go to `onRejectFiles` and never reach
+     * `onAttach`. Folder attach is exempt (directory selection has no native
+     * accept semantics); size/count limits are the app's job in `onAttach`.
+     */
     accept?: string;
+    /**
+     * Called with the files `accept` filtered out of a drop/paste/pick, each
+     * with a human-readable reason. Without it rejection is silent — the same
+     * feedback the native picker gives for a type it won't offer.
+     */
+    onRejectFiles?: (rejections: ComposerFileRejection[]) => void;
     dropTitle?: string;
     dropDescription?: string;
+    /**
+     * `canSend` ignores `busy` so Enter/onSubmit keep firing while a turn is
+     * streaming. For composers that queue the next turn instead of blocking on
+     * the current one — the Stop-button rendering rule (`busy && onCancel`) is
+     * unaffected, so the button still flips to Stop while this is set. Default
+     * false.
+     */
+    canSubmitWhileBusy?: boolean;
+    /**
+     * Allow submitting with empty text when at least one attachment is staged
+     * (an image-only message). Counts attachments of ANY status — a gate on
+     * `ready` would make Enter silently dead while an upload is in flight,
+     * with no way for the app to explain why. The app's onSubmit owns the send
+     * policy (block, queue, or toast on pending/errored files) and what the
+     * message body becomes. Default false.
+     */
+    canSubmitAttachmentsOnly?: boolean;
     /** Cmd/Ctrl+L focuses the input and shows a hint. Default false. */
     focusShortcut?: boolean;
     /** Minimum textarea rows before it grows. Default 2. */
@@ -346,11 +425,13 @@ interface AgentComposerProps {
  * router-backed composer (no harness) and the sandbox-backed one (with harness).
  *
  * Opt-in extras make it the superset of every app's hand-rolled composer:
- * file/folder attachments with drag-and-drop + chips, a streaming Stop button
- * (`busy` + `onCancel`), a `controls` override slot for bespoke picker rows, and
- * a Cmd/Ctrl+L focus shortcut.
+ * file/folder attachments with drag-and-drop + chips + clipboard paste
+ * (`onAttach` also gates pasting files onto the textarea, auto-naming
+ * generic clipboard image blobs `pasted-image-<n>.<ext>`), a streaming Stop
+ * button (`busy` + `onCancel`), a `controls` override slot for bespoke
+ * picker rows, and a Cmd/Ctrl+L focus shortcut.
  */
-declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, onCancel, harness, profile, model, reasoning, context, controls, trailing, onAttach, onAttachFolder, attachments, onRemoveFile, accept, dropTitle, dropDescription, focusShortcut, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): react_jsx_runtime.JSX.Element;
+declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, onCancel, harness, profile, model, reasoning, context, controls, trailing, onAttach, onAttachFolder, attachments, onRemoveFile, onRetryFile, accept, onRejectFiles, dropTitle, dropDescription, canSubmitWhileBusy, canSubmitAttachmentsOnly, focusShortcut, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Whether `harness` can run `modelId`. Router-backed harnesses, and provider-less
@@ -464,4 +545,4 @@ declare function createFetchTransport(opts: {
     fetchImpl?: typeof fetch;
 }): ArtifactAgentDockTransport;
 
-export { AgentComposer, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionProfileControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerFile, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness };
+export { AgentComposer, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionProfileControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerFile, type ComposerFileRejection, type ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles };

package/dist/chat.js

@@ -13,11 +13,14 @@ import {
   ThinkingIndicator,
   UserMessage,
   createFetchTransport,
+  isAcceptedType,
   isModelCompatibleWithHarness,
   modelProvider,
   snapHarnessToModel,
-  snapModelToHarness
-} from "./chunk-UQXDIQWD.js";
+  snapModelToHarness,
+  validateComposerFiles
+} from "./chunk-UFVXAJSA.js";
+import "./chunk-TK46XFLM.js";
 import "./chunk-IWIZ7RZE.js";
 import "./chunk-L62ZT6RS.js";
 import "./chunk-EI44GEQ5.js";
@@ -37,8 +40,10 @@ export {
   ThinkingIndicator,
   UserMessage,
   createFetchTransport,
+  isAcceptedType,
   isModelCompatibleWithHarness,
   modelProvider,
   snapHarnessToModel,
-  snapModelToHarness
+  snapModelToHarness,
+  validateComposerFiles
 };

package/dist/{chunk-UQXDIQWD.js → chunk-UFVXAJSA.js}

@@ -1,3 +1,6 @@
+import {
+  formatBytes
+} from "./chunk-TK46XFLM.js";
 import {
   HARNESS_OPTIONS,
   HarnessLogo,
@@ -1064,12 +1067,84 @@ import {
   Folder,
   Loader2,
   Paperclip,
+  RotateCcw,
   Square,
   Upload,
   X
 } from "lucide-react";
 import * as React4 from "react";
+
+// src/chat/attachment-validation.ts
+function isAcceptedType(file, accept) {
+  if (!accept || accept.trim().length === 0) return true;
+  const patterns = accept.split(",").map((pattern) => pattern.trim()).filter((pattern) => pattern.length > 0);
+  if (patterns.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = (file.type || "").toLowerCase();
+  return patterns.some((pattern) => {
+    const lowerPattern = pattern.toLowerCase();
+    if (lowerPattern.startsWith(".")) {
+      return name.endsWith(lowerPattern);
+    }
+    if (lowerPattern.endsWith("/*")) {
+      const prefix = lowerPattern.slice(0, -1);
+      return type.startsWith(prefix);
+    }
+    return type === lowerPattern;
+  });
+}
+function validateComposerFiles(files, config) {
+  const { maxSizeBytes, maxCount, currentCount = 0, accept } = config;
+  const list = Array.isArray(files) ? files : Array.from(files);
+  const accepted = [];
+  const rejected = [];
+  for (const file of list) {
+    if (!isAcceptedType(file, accept)) {
+      rejected.push({
+        file,
+        reason: `"${file.name}" is not an accepted file type (${accept}).`
+      });
+      continue;
+    }
+    if (maxSizeBytes !== void 0 && file.size > maxSizeBytes) {
+      rejected.push({
+        file,
+        reason: `"${file.name}" (${formatBytes(file.size)}) exceeds the ${formatBytes(maxSizeBytes)} limit.`
+      });
+      continue;
+    }
+    if (maxCount !== void 0 && currentCount + accepted.length >= maxCount) {
+      rejected.push({
+        file,
+        reason: `"${file.name}" was not added \u2014 the ${maxCount}-file limit is already reached.`
+      });
+      continue;
+    }
+    accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+
+// src/chat/agent-composer.tsx
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var IMAGE_EXTENSION_BY_MIME = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/jpg": "jpg",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/bmp": "bmp",
+  "image/svg+xml": "svg"
+};
+function isGenericImageName(name) {
+  return /^(image)?(\.[a-z0-9]+)?$/i.test(name.trim());
+}
+function imageExtension(file) {
+  const fromMime = IMAGE_EXTENSION_BY_MIME[file.type.toLowerCase()];
+  if (fromMime) return fromMime;
+  const fromName = /\.([a-z0-9]+)$/i.exec(file.name)?.[1];
+  return fromName?.toLowerCase() ?? "png";
+}
 function AgentComposer({
   value,
   onChange,
@@ -1089,9 +1164,13 @@ function AgentComposer({
   onAttachFolder,
   attachments = [],
   onRemoveFile,
+  onRetryFile,
   accept,
+  onRejectFiles,
   dropTitle = "Drop files to add context",
   dropDescription = "They attach to your next message.",
+  canSubmitWhileBusy = false,
+  canSubmitAttachmentsOnly = false,
   focusShortcut = false,
   minRows = 2,
   maxHeight = 200,
@@ -1104,6 +1183,7 @@ function AgentComposer({
   const folderInputRef = React4.useRef(null);
   const [dragOver, setDragOver] = React4.useState(false);
   const dragDepth = React4.useRef(0);
+  const pastedImageCount = React4.useRef(0);
   const resize = React4.useCallback(
     (el) => {
       el.style.height = "auto";
@@ -1125,7 +1205,7 @@ function AgentComposer({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [focusShortcut, disabled]);
-  const canSend = !disabled && !busy && value.trim().length > 0;
+  const canSend = !disabled && (!busy || canSubmitWhileBusy) && (value.trim().length > 0 || canSubmitAttachmentsOnly && attachments.length > 0);
   const submit = () => {
     if (!canSend) return;
     onSubmit();
@@ -1154,6 +1234,15 @@ function AgentComposer({
     event.stopPropagation();
     if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
   };
+  const deliverFiles = (files) => {
+    if (!onAttach || files.length === 0) return;
+    const { accepted, rejected } = validateComposerFiles(files, { accept });
+    if (rejected.length > 0) onRejectFiles?.(rejected);
+    if (accepted.length === 0) return;
+    const dt = new DataTransfer();
+    for (const file of accepted) dt.items.add(file);
+    onAttach(dt.files);
+  };
   const handleDrop = (event) => {
     if (!dropEnabled) return;
     event.preventDefault();
@@ -1161,7 +1250,25 @@ function AgentComposer({
     dragDepth.current = 0;
     setDragOver(false);
     const files = event.dataTransfer?.files;
-    if (files?.length) onAttach?.(files);
+    if (files?.length) deliverFiles(Array.from(files));
+  };
+  const handlePaste = (event) => {
+    if (!onAttach) return;
+    const clipboardFiles = event.clipboardData?.files;
+    if (!clipboardFiles || clipboardFiles.length === 0) return;
+    event.preventDefault();
+    const files = Array.from(clipboardFiles).map((file) => {
+      if (file.type.startsWith("image/") && isGenericImageName(file.name)) {
+        pastedImageCount.current += 1;
+        return new File(
+          [file],
+          `pasted-image-${pastedImageCount.current}.${imageExtension(file)}`,
+          { type: file.type }
+        );
+      }
+      return file;
+    });
+    deliverFiles(files);
   };
   const folderChips = attachments.filter((file) => file.kind === "folder");
   const fileChips = attachments.filter((file) => file.kind !== "folder");
@@ -1190,36 +1297,60 @@ function AgentComposer({
           disabled && "opacity-60"
         ),
         children: [
-          attachments.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1.5", children: [...folderChips, ...fileChips].map((file) => /* @__PURE__ */ jsxs4(
-            "span",
-            {
-              className: cn(
-                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs",
-                file.status === "error" ? "border-[var(--status-error,#ff4d6d)]/40 text-[var(--status-error,#ff4d6d)]" : "border-[var(--md3-outline-variant)] bg-surface-container text-foreground"
-              ),
-              children: [
-                file.kind === "folder" ? /* @__PURE__ */ jsx4(Folder, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx4(Paperclip, { className: "size-3 shrink-0" }),
-                /* @__PURE__ */ jsx4("span", { className: "max-w-[150px] truncate", children: file.name }),
-                file.fileCount !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", children: [
-                  "(",
-                  file.fileCount,
-                  ")"
-                ] }),
-                file.status === "uploading" && /* @__PURE__ */ jsx4(Loader2, { className: "size-3 animate-spin" }),
-                onRemoveFile && /* @__PURE__ */ jsx4(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": `Remove ${file.name}`,
-                    onClick: () => onRemoveFile(file.id),
-                    className: "rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                    children: /* @__PURE__ */ jsx4(X, { className: "size-3" })
-                  }
-                )
-              ]
-            },
-            file.id
-          )) }),
+          attachments.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1.5", children: [...folderChips, ...fileChips].map((file) => {
+            const isError = file.status === "error";
+            const isPending = file.status === "pending";
+            return /* @__PURE__ */ jsxs4(
+              "span",
+              {
+                title: isError ? file.errorMessage : void 0,
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs",
+                  isError ? "border-[var(--status-error,#ff4d6d)]/40 text-[var(--status-error,#ff4d6d)]" : "border-[var(--md3-outline-variant)] bg-surface-container text-foreground",
+                  isPending && "opacity-60"
+                ),
+                children: [
+                  file.kind !== "folder" && file.previewUrl ? /* @__PURE__ */ jsx4(
+                    "img",
+                    {
+                      src: file.previewUrl,
+                      alt: "",
+                      className: "size-8 rounded object-cover"
+                    }
+                  ) : file.kind === "folder" ? /* @__PURE__ */ jsx4(Folder, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx4(Paperclip, { className: "size-3 shrink-0" }),
+                  /* @__PURE__ */ jsx4("span", { className: "max-w-[150px] truncate", children: file.name }),
+                  file.fileCount !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", children: [
+                    "(",
+                    file.fileCount,
+                    ")"
+                  ] }),
+                  file.status === "uploading" && /* @__PURE__ */ jsx4(Loader2, { className: "size-3 animate-spin" }),
+                  isError && file.errorMessage && /* @__PURE__ */ jsx4("span", { className: "max-w-[150px] truncate text-[var(--status-error,#ff4d6d)]/80", children: file.errorMessage }),
+                  isError && onRetryFile && /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Retry upload ${file.name}`,
+                      onClick: () => onRetryFile(file.id),
+                      className: "rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                      children: /* @__PURE__ */ jsx4(RotateCcw, { className: "size-3" })
+                    }
+                  ),
+                  onRemoveFile && /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Remove ${file.name}`,
+                      onClick: () => onRemoveFile(file.id),
+                      className: "rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                      children: /* @__PURE__ */ jsx4(X, { className: "size-3" })
+                    }
+                  )
+                ]
+              },
+              file.id
+            );
+          }) }),
           /* @__PURE__ */ jsx4(
             "textarea",
             {
@@ -1230,6 +1361,7 @@ function AgentComposer({
               autoFocus,
               onChange: (event) => onChange(event.target.value),
               onInput: (event) => resize(event.currentTarget),
+              onPaste: handlePaste,
               onKeyDown: (event) => {
                 if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.keyCode !== 229) {
                   event.preventDefault();
@@ -1277,7 +1409,8 @@ function AgentComposer({
                   className: "hidden",
                   accept,
                   onChange: (event) => {
-                    if (event.target.files?.length) onAttach(event.target.files);
+                    if (event.target.files?.length)
+                      deliverFiles(Array.from(event.target.files));
                     event.target.value = "";
                   }
                 }
@@ -1700,6 +1833,8 @@ export {
   snapHarnessToModel,
   AgentProfilePicker,
   AgentSessionControls,
+  isAcceptedType,
+  validateComposerFiles,
   AgentComposer,
   ArtifactAgentDock,
   createFetchTransport,