@tangle-network/agent-app 0.45.64 → 0.45.66

package/dist/{chunk-OMGV3CX2.js → chunk-AWM4H5XR.js}

@@ -12,9 +12,11 @@ import {
   POPOVER_OPTION_FOCUS,
   POPOVER_SURFACE_ATTR,
   PopoverSurface,
+  filterAcceptedFiles,
+  renamePastedImages,
   usePending,
   usePopover
-} from "./chunk-FZKNVQYP.js";
+} from "./chunk-23J72UUA.js";
 import {
   AsyncView
 } from "./chunk-3UBAO3N5.js";
@@ -1575,6 +1577,12 @@ function FolderGlyph({ className }) {
 function CloseGlyph({ className }) {
   return /* @__PURE__ */ jsx7("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx7("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
+function RetryGlyph({ className }) {
+  return /* @__PURE__ */ jsxs5("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx7("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx7("path", { d: "M3 3v5h5" })
+  ] });
+}
 function UploadGlyph({ className }) {
   return /* @__PURE__ */ jsx7("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx7("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" }) });
 }
@@ -1584,7 +1592,9 @@ function MicGlyph({ className }) {
     /* @__PURE__ */ jsx7("path", { d: "M5 10v1a7 7 0 0 0 14 0v-1M12 18v4" })
   ] });
 }
-var MAX_HEIGHT = 168;
+var DEFAULT_MAX_HEIGHT = 168;
+var LINE_HEIGHT = 24;
+var TEXTAREA_PADDING_Y = 8;
 var DEFAULT_SEND_FAILURE = "Message not sent. Your draft is still here \u2014 try again.";
 function isRejectedOutcome(outcome) {
   return typeof outcome === "object" && outcome !== null && outcome.ok === false;
@@ -1622,9 +1632,19 @@ function ChatComposer({
   onAttachFolder,
   pendingFiles = [],
   onRemoveFile,
+  onRetryFile,
   accept,
+  onRejectFiles,
   dropTitle = "Drop files to add context",
   dropDescription = "They attach to your next message.",
+  contextItems = [],
+  canSubmitAttachmentsOnly = false,
+  attachmentsNotReadyMessage,
+  canSubmitWhileBusy = false,
+  autoFocus,
+  minRows = 2,
+  maxHeight = DEFAULT_MAX_HEIGHT,
+  trailing,
   slashCommands,
   onDictate,
   onDictateError,
@@ -1644,6 +1664,7 @@ function ChatComposer({
   const folderInputRef = useRef6(null);
   const [dragOver, setDragOver] = useState8(false);
   const dragDepth = useRef6(0);
+  const pastedImageCount = useRef6(0);
   const setText = useCallback3(
     (next) => {
       if (!isControlled) setInternal(next);
@@ -1671,8 +1692,8 @@ function ChatComposer({
     const el = textareaRef.current;
     if (!el) return;
     el.style.height = "auto";
-    el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
-  }, [text]);
+    el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+  }, [text, maxHeight, minRows]);
   const prevSeedRef = useRef6(null);
   const pendingCaretRef = useRef6(null);
   useEffect6(() => {
@@ -1721,9 +1742,10 @@ function ChatComposer({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [focusShortcut, disabled]);
-  const readyFileCount = pendingFiles.filter((f) => f.status === "ready").length;
-  const hasSendable = text.trim().length > 0 || readyFileCount > 0;
-  const canSend = hasSendable && !isStreaming && !disabled;
+  const sendableFiles = canSubmitAttachmentsOnly ? pendingFiles : pendingFiles.filter((f) => f.status === "ready");
+  const hasSendable = text.trim().length > 0 || sendableFiles.length > 0;
+  const sendBlockedByStream = isStreaming && !canSubmitWhileBusy;
+  const canSend = hasSendable && !sendBlockedByStream && !disabled;
   const [failedSend, setFailedSend] = useState8(null);
   const failSend = useCallback3(
     (error, draft, trimmed, parts, caret) => {
@@ -1768,9 +1790,15 @@ function ChatComposer({
   );
   const send = useCallback3(() => {
     const trimmed = text.trim();
-    if (isStreaming || disabled) return;
+    if (sendBlockedByStream || disabled) return;
     const readyFiles = pendingFiles.filter((f) => f.status === "ready");
-    if (!trimmed && readyFiles.length === 0) return;
+    const sendable = canSubmitAttachmentsOnly ? pendingFiles : readyFiles;
+    if (!trimmed && sendable.length === 0) return;
+    if (!trimmed && readyFiles.length === 0) {
+      const message = attachmentsNotReadyMessage ?? (pendingFiles.some((f) => f.status === "error") ? "Retry or remove the failed attachment before sending." : "Wait for the attachment to finish uploading.");
+      setFailedSend({ message, text: "", trimmed: "", parts: [], restored: true });
+      return;
+    }
     const parts = onSendParts ? readyFiles.filter((f) => f.part).map((f) => f.part) : [];
     const el = textareaRef.current;
     const caret = { start: el?.selectionStart ?? text.length, end: el?.selectionEnd ?? text.length };
@@ -1778,14 +1806,24 @@ function ChatComposer({
     setText("");
     textRef.current = "";
     dispatchSend(text, trimmed, parts, caret);
-  }, [text, isStreaming, disabled, onSendParts, pendingFiles, setText, dispatchSend]);
+  }, [
+    text,
+    sendBlockedByStream,
+    disabled,
+    canSubmitAttachmentsOnly,
+    attachmentsNotReadyMessage,
+    onSendParts,
+    pendingFiles,
+    setText,
+    dispatchSend
+  ]);
   const retryFailedSend = useCallback3(() => {
     const failure = failedSend;
-    if (!failure || isStreaming || disabled) return;
+    if (!failure || sendBlockedByStream || disabled) return;
     setFailedSend(null);
     const caret = { start: failure.text.length, end: failure.text.length };
     dispatchSend(failure.text, failure.trimmed, failure.parts, caret);
-  }, [failedSend, isStreaming, disabled, dispatchSend]);
+  }, [failedSend, sendBlockedByStream, disabled, dispatchSend]);
   const slashPanelRef = useRef6(null);
   const cardRef = useRef6(null);
   const slashListId = useId();
@@ -1868,10 +1906,40 @@ function ChatComposer({
       send();
     }
   };
+  const deliverFiles = useCallback3(
+    (files, original) => {
+      if (!onAttach || files.length === 0) return;
+      const { accepted, rejected } = filterAcceptedFiles(files, accept);
+      if (rejected.length > 0) onRejectFiles?.(rejected);
+      if (accepted.length === 0) return;
+      const unchanged = accepted.length === original.length && accepted.every((file, i) => file === original[i]);
+      if (unchanged) {
+        onAttach(original);
+        return;
+      }
+      const transfer = new DataTransfer();
+      for (const file of accepted) transfer.items.add(file);
+      onAttach(transfer.files);
+    },
+    [onAttach, onRejectFiles, accept]
+  );
   const handleFileChange = (e) => {
-    if (e.target.files?.length) onAttach?.(e.target.files);
+    if (e.target.files?.length) deliverFiles(Array.from(e.target.files), e.target.files);
     e.target.value = "";
   };
+  const handlePaste = (e) => {
+    if (!onAttach) return;
+    const clipboardFiles = e.clipboardData?.files;
+    if (!clipboardFiles || clipboardFiles.length === 0) return;
+    e.preventDefault();
+    const { files, nextIndex } = renamePastedImages(
+      Array.from(clipboardFiles),
+      pastedImageCount.current,
+      pendingFiles.map((f) => f.name)
+    );
+    pastedImageCount.current = nextIndex;
+    deliverFiles(files, clipboardFiles);
+  };
   const handleFolderChange = (e) => {
     if (e.target.files?.length) (onAttachFolder ?? onAttach)?.(e.target.files);
     e.target.value = "";
@@ -1903,9 +1971,9 @@ function ChatComposer({
       dragDepth.current = 0;
       setDragOver(false);
       const files = e.dataTransfer?.files;
-      if (files?.length) onAttach?.(files);
+      if (files?.length) deliverFiles(Array.from(files), files);
     },
-    [onAttach]
+    [deliverFiles]
   );
   const folderChips = pendingFiles.filter((f) => f.kind === "folder");
   const fileChips = pendingFiles.filter((f) => f.kind !== "folder");
@@ -1982,7 +2050,7 @@ function ChatComposer({
                     type: "button",
                     "aria-label": "Retry sending the unsent message",
                     onClick: retryFailedSend,
-                    disabled: isStreaming || disabled,
+                    disabled: sendBlockedByStream || disabled,
                     className: "mt-1.5 font-medium underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-destructive/50",
                     children: "Retry"
                   }
@@ -1991,33 +2059,69 @@ function ChatComposer({
             ]
           }
         ),
-        pendingFiles.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [...folderChips, ...fileChips].map((f) => /* @__PURE__ */ jsxs5(
+        contextItems.length > 0 && /* @__PURE__ */ jsx7("div", { "aria-label": "Message context", className: "mb-2 flex min-w-0 flex-wrap gap-1.5", children: contextItems.map((item) => /* @__PURE__ */ jsxs5(
           "span",
           {
-            className: `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${f.status === "error" ? "border-destructive/40 text-destructive" : "border-border bg-secondary text-foreground"}`,
+            className: "inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md border border-primary/30 bg-primary/10 px-2.5 py-1 text-xs text-primary",
             children: [
-              f.kind === "folder" ? /* @__PURE__ */ jsx7(FolderGlyph, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsx7(PaperclipGlyph, { className: "h-3 w-3 shrink-0" }),
-              /* @__PURE__ */ jsx7("span", { className: "max-w-[150px] truncate", children: f.name }),
-              f.fileCount !== void 0 && /* @__PURE__ */ jsxs5("span", { className: "text-muted-foreground", children: [
-                "(",
-                f.fileCount,
-                ")"
-              ] }),
-              f.status === "uploading" && /* @__PURE__ */ jsx7("span", { className: "h-3 w-3 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
-              onRemoveFile && /* @__PURE__ */ jsx7(
+              item.icon && /* @__PURE__ */ jsx7("span", { className: "shrink-0", "aria-hidden": true, children: item.icon }),
+              /* @__PURE__ */ jsx7("span", { className: "min-w-0 truncate", children: item.label }),
+              item.onRemove && /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
-                  "aria-label": `Remove ${f.name}`,
-                  onClick: () => onRemoveFile(f.id),
-                  className: "rounded p-0.5 text-muted-foreground transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "aria-label": `Remove context ${item.label}`,
+                  onClick: item.onRemove,
+                  className: "shrink-0 rounded p-0.5 text-primary/70 transition hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                   children: /* @__PURE__ */ jsx7(CloseGlyph, { className: "h-3 w-3" })
                 }
               )
             ]
           },
-          f.id
+          item.id
         )) }),
+        pendingFiles.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [...folderChips, ...fileChips].map((f) => {
+          const isError = f.status === "error";
+          return /* @__PURE__ */ jsxs5(
+            "span",
+            {
+              title: isError ? f.errorMessage : void 0,
+              className: `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${isError ? "border-destructive/40 text-destructive" : "border-border bg-secondary text-foreground"} ${f.status === "pending" ? "opacity-60" : ""}`,
+              children: [
+                f.kind !== "folder" && f.previewUrl ? /* @__PURE__ */ jsx7("img", { src: f.previewUrl, alt: "", className: "h-8 w-8 shrink-0 rounded object-cover" }) : f.kind === "folder" ? /* @__PURE__ */ jsx7(FolderGlyph, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsx7(PaperclipGlyph, { className: "h-3 w-3 shrink-0" }),
+                /* @__PURE__ */ jsx7("span", { className: "max-w-[150px] truncate", children: f.name }),
+                f.fileCount !== void 0 && /* @__PURE__ */ jsxs5("span", { className: "text-muted-foreground", children: [
+                  "(",
+                  f.fileCount,
+                  ")"
+                ] }),
+                f.status === "uploading" && /* @__PURE__ */ jsx7("span", { className: "h-3 w-3 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
+                isError && f.errorMessage && /* @__PURE__ */ jsx7("span", { className: "max-w-[150px] truncate text-destructive/80", children: f.errorMessage }),
+                isError && onRetryFile && /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Retry upload ${f.name}`,
+                    onClick: () => onRetryFile(f.id),
+                    className: "rounded p-0.5 text-muted-foreground transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: /* @__PURE__ */ jsx7(RetryGlyph, { className: "h-3 w-3" })
+                  }
+                ),
+                onRemoveFile && /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${f.name}`,
+                    onClick: () => onRemoveFile(f.id),
+                    className: "rounded p-0.5 text-muted-foreground transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: /* @__PURE__ */ jsx7(CloseGlyph, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            f.id
+          );
+        }) }),
         /* @__PURE__ */ jsxs5(
           "div",
           {
@@ -2032,11 +2136,14 @@ function ChatComposer({
                   value: text,
                   onChange: (e) => setText(e.target.value),
                   onKeyDown: handleKeyDown,
+                  onPaste: onAttach ? handlePaste : void 0,
                   placeholder,
                   disabled,
-                  rows: 2,
+                  autoFocus,
+                  rows: minRows,
+                  style: { minHeight: minRows * LINE_HEIGHT + TEXTAREA_PADDING_Y, maxHeight },
                   "aria-label": "Message input",
-                  className: "max-h-[168px] min-h-[56px] w-full resize-none bg-transparent px-1.5 py-1 text-base leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50"
+                  className: "w-full resize-none bg-transparent px-1.5 py-1 text-base leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50"
                 }
               ),
               /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
@@ -2088,6 +2195,7 @@ function ChatComposer({
                     children: showInline && controls
                   }
                 ),
+                trailing && /* @__PURE__ */ jsx7("div", { "data-testid": "composer-trailing", className: "flex shrink-0 items-center gap-1.5", children: trailing }),
                 onDictate && dictation.supported ? dictation.recording ? /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-1.5", children: [
                   /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", className: "h-2 w-2 animate-pulse rounded-full bg-destructive" }),
                   /* @__PURE__ */ jsx7(
@@ -7569,4 +7677,4 @@ export {
   useThinkingSeconds,
   ChatMessages
 };
-//# sourceMappingURL=chunk-OMGV3CX2.js.map
+//# sourceMappingURL=chunk-AWM4H5XR.js.map