@agents24/chat-react 0.5.5 → 0.5.6

package/dist/scaffold/index.js

@@ -10,12 +10,18 @@ import {
 import {
   agentChatRuntimeErrorMessage
 } from "@agents24/chat-react/runtime";
-import { CircleAlert, LoaderCircle as LoaderCircle3, SquarePen as SquarePen2, X as X2 } from "lucide-react";
+import { CircleAlert, LoaderCircle as LoaderCircle3, SquarePen as SquarePen2, X } from "lucide-react";
 
 // scaffold/src/components/chat/chat-composer.tsx
-import { ArrowUp, ChevronDown, LoaderCircle, Mic, Square, X } from "lucide-react";
+import { ArrowUp, ChevronDown, LoaderCircle, Mic, Square } from "lucide-react";
 import * as React2 from "react";
-import { AgentChatContextStatus, useAudioRecorder } from "@agents24/chat-react/ui";
+import {
+  AgentChatContextStatus,
+  ChatAttachmentRows,
+  createAgentChatComposerFile,
+  revokeAgentChatComposerFiles,
+  useAudioRecorder
+} from "@agents24/chat-react/ui";
 import { canonicalInputMimeType, inputMimeTypes, validateAgentChatSubmission } from "@agents24/chat-react/runtime";
 
 // scaffold/src/components/ui/button.tsx
@@ -491,11 +497,20 @@ function ChatComposer({
   const [attachmentError, setAttachmentError] = React2.useState(null);
   const inputRef = React2.useRef(null);
   const textareaRef = React2.useRef(null);
+  const filesRef = React2.useRef([]);
+  const inFlightFilesRef = React2.useRef([]);
   const submittingRef = React2.useRef(false);
   const draftRevisionRef = React2.useRef(0);
   const attachmentMimeTypes = inputMimeTypes(inputContract);
   const allowAttachments = attachmentMimeTypes.length > 0;
   const recordingAllowed = inputContract.modalities.audio.recording_enabled;
+  React2.useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+  React2.useEffect(() => () => {
+    revokeAgentChatComposerFiles(filesRef.current);
+    revokeAgentChatComposerFiles(inFlightFilesRef.current);
+  }, []);
   React2.useEffect(() => {
     if (disabled || isRunning) return;
     const frame = window.requestAnimationFrame(() => textareaRef.current?.focus({ preventScroll: true }));
@@ -503,14 +518,14 @@ function ChatComposer({
   }, [disabled, focusKey, isRunning]);
   const addRecording = React2.useCallback((file) => {
     draftRevisionRef.current += 1;
-    setFiles((current) => [...current, file]);
+    setFiles((current) => [...current, createAgentChatComposerFile(file)]);
   }, []);
   const recorder = useAudioRecorder(addRecording);
   const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
   const validationError = validateAgentChatSubmission(
     inputContract,
     text,
-    files.map((file) => ({ data: file, mediaType: file.type }))
+    files.map((file) => ({ data: file.source, mediaType: file.mediaType }))
   );
   const selectedAgent = agents.find((item) => item.id === agentId);
   const selectedModel = models.find((item) => item.id === modelId);
@@ -558,16 +573,23 @@ function ChatComposer({
     const clearedRevision = draftRevisionRef.current + 1;
     draftRevisionRef.current = clearedRevision;
     submittingRef.current = true;
+    inFlightFilesRef.current = selectedFiles;
     setText("");
     setFiles([]);
     textareaRef.current?.focus();
     try {
       await onSubmit(value, selectedFiles);
+      revokeAgentChatComposerFiles(selectedFiles);
+      inFlightFilesRef.current = [];
     } catch {
       if (draftRevisionRef.current === clearedRevision) {
         draftRevisionRef.current += 1;
         setText(value);
         setFiles(selectedFiles);
+        inFlightFilesRef.current = [];
+      } else {
+        revokeAgentChatComposerFiles(selectedFiles);
+        inFlightFilesRef.current = [];
       }
     } finally {
       submittingRef.current = false;
@@ -579,13 +601,21 @@ function ChatComposer({
       className: "mx-auto w-full max-w-3xl px-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6",
       "data-agents24-chat-composer": "",
       children: [
-        allowAttachments && files.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mb-2 flex min-w-0 gap-2 overflow-x-auto", children: files.map((file, index) => /* @__PURE__ */ jsxs3("div", { className: "flex max-w-48 items-center gap-2 border bg-card px-2 py-1 text-xs", children: [
-          /* @__PURE__ */ jsx7("span", { className: "truncate", children: file.name }),
-          /* @__PURE__ */ jsx7(Button, { variant: "ghost", size: "icon-xs", "aria-label": `Remove ${file.name}`, onClick: () => {
-            draftRevisionRef.current += 1;
-            setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index));
-          }, children: /* @__PURE__ */ jsx7(X, {}) })
-        ] }, `${file.name}-${index}`)) }),
+        allowAttachments && files.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mb-2 min-w-0", children: /* @__PURE__ */ jsx7(
+          ChatAttachmentRows,
+          {
+            attachments: files,
+            onRemove: (attachment) => {
+              if (!attachment.id) return;
+              draftRevisionRef.current += 1;
+              setFiles((current) => {
+                const removed = current.find((file) => file.id === attachment.id);
+                if (removed) revokeAgentChatComposerFiles([removed]);
+                return current.filter((file) => file.id !== attachment.id);
+              });
+            }
+          }
+        ) }),
         attachmentError || recorder.error ? /* @__PURE__ */ jsx7("p", { className: "mb-2 text-xs text-destructive", role: "alert", children: attachmentError || recorder.error }) : null,
         /* @__PURE__ */ jsxs3(
           "div",
@@ -609,7 +639,7 @@ function ChatComposer({
                       const selected = Array.from(event.target.files ?? []);
                       const accepted = selected.filter((file) => attachmentMimeTypes.includes(canonicalInputMimeType(file.type)));
                       draftRevisionRef.current += 1;
-                      setFiles((current) => [...current, ...accepted]);
+                      setFiles((current) => [...current, ...accepted.map(createAgentChatComposerFile)]);
                       setAttachmentError(
                         accepted.length === selected.length ? null : "One or more selected file types are not supported by this Agent."
                       );
@@ -696,7 +726,7 @@ function ChatComposer({
 }
 
 // scaffold/src/components/chat/chat-message.tsx
-import { AgentChatDefaultActions, ChatAttachment, ChatAttachments } from "@agents24/chat-react/ui";
+import { AgentChatDefaultActions, ChatAttachmentRows as ChatAttachmentRows2 } from "@agents24/chat-react/ui";
 
 // scaffold/src/components/chat/message-parts.tsx
 import {
@@ -1104,17 +1134,19 @@ function ChatMessage({
   onHitlAction,
   onRegenerate,
   onSetFeedback,
+  resolveAttachmentContent,
   Timeline
 }) {
   const isUser = message.role === "user";
   return /* @__PURE__ */ jsx14(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ jsxs8(MessageContent, { children: [
-    isUser && message.attachments?.length ? /* @__PURE__ */ jsx14(ChatAttachments, { className: "mb-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx14(
-      ChatAttachment,
+    isUser && message.attachments?.length ? /* @__PURE__ */ jsx14(
+      ChatAttachmentRows2,
       {
-        data: attachment
-      },
-      String(attachment.id || attachment.url || attachment.filename || index)
-    )) }) : null,
+        attachments: message.attachments,
+        className: "mb-2",
+        resolveContent: resolveAttachmentContent
+      }
+    ) : null,
     /* @__PURE__ */ jsx14(Bubble, { variant: isUser ? "secondary" : "ghost", align: isUser ? "end" : "start", className: isUser ? "max-w-[min(75%,42rem)]" : "max-w-full overflow-visible", children: /* @__PURE__ */ jsx14(BubbleContent, { className: isUser ? "px-4 py-2.5" : "w-full overflow-visible", children: /* @__PURE__ */ jsx14(
       MessageParts,
       {
@@ -2142,7 +2174,7 @@ function OperationErrorNotice({ runtime }) {
         onClick: runtime.operationError ? runtime.clearOperationError : runtime.controller.clearBackgroundError,
         size: "icon-xs",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx25(X2, {})
+        children: /* @__PURE__ */ jsx25(X, {})
       }
     )
   ] }) });
@@ -2154,7 +2186,8 @@ function ChatShell({
   sidebar
 }) {
   const { controller } = runtime;
-  const isRunning = controller.runState === "streaming" || controller.runState === "reconnecting" || controller.runState === "paused" || controller.runState === "cancelling" || runtime.isSubmitting;
+  const isRunning = controller.runState === "streaming" || controller.runState === "reconnecting" || controller.runState === "paused" || controller.runState === "cancelling";
+  const isUploading = controller.runState === "uploading" || runtime.isUploading;
   const isCancelling = controller.runState === "cancelling";
   const activeTitle = controller.threads.find((thread) => thread.id === controller.activeThreadId)?.title;
   const hasBlockingError = Boolean(runtime.fatalError && controller.messages.length === 0);
@@ -2210,7 +2243,7 @@ function ChatShell({
                     {
                       inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
                       contextWindow: runtime.contextWindow,
-                      disabled: runtime.isBootstrapping || runtime.isChangingAgent,
+                      disabled: runtime.isBootstrapping || runtime.isChangingAgent || isUploading,
                       focusKey: controller.activeThreadId,
                       forceExpanded: true,
                       isCancelling,
@@ -2229,10 +2262,11 @@ function ChatShell({
                       onSubmit: (text, files) => runtime.submit({
                         text,
                         files: files.map((file) => ({
-                          data: file,
-                          mediaType: file.type || "application/octet-stream",
-                          name: file.name
-                        }))
+                          data: file.source,
+                          mediaType: file.mediaType,
+                          name: file.filename
+                        })),
+                        attachments: files
                       })
                     }
                   )
@@ -2285,6 +2319,7 @@ function ChatShell({
                                       onHitlAction: runtime.onHitlAction,
                                       onRegenerate: () => controller.regenerate(message),
                                       onSetFeedback: (input) => controller.setFeedback(message, input),
+                                      resolveAttachmentContent: runtime.resolveAttachmentContent,
                                       Timeline: components?.Timeline
                                     }
                                   )
@@ -2304,7 +2339,7 @@ function ChatShell({
                     {
                       inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
                       contextWindow: runtime.contextWindow,
-                      disabled: runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError,
+                      disabled: runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError || isUploading,
                       focusKey: controller.activeThreadId,
                       isCancelling,
                       isRunning,
@@ -2322,10 +2357,11 @@ function ChatShell({
                       onSubmit: (text, files) => runtime.submit({
                         text,
                         files: files.map((file) => ({
-                          data: file,
-                          mediaType: file.type || "application/octet-stream",
-                          name: file.name
-                        }))
+                          data: file.source,
+                          mediaType: file.mediaType,
+                          name: file.filename
+                        })),
+                        attachments: files
                       }),
                       utilityRow: "below"
                     }