@agents24/chat-react 0.5.5 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Accessible web UI and complete default layout for Agents24 chat applications.",
   "license": "MIT",
   "repository": {
@@ -58,8 +58,9 @@
     "prepack": "pnpm run build && pnpm run check:boundaries"
   },
   "dependencies": {
-    "@agents24/client": "0.2.3",
-    "@agents24/react": "0.2.3",
+    "@untitledui/file-icons": "0.0.9",
+    "@agents24/client": "0.2.4",
+    "@agents24/react": "0.2.4",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/merriweather": "^5.3.0",

package/scaffold/src/components/chat/chat-composer.tsx

@@ -1,6 +1,13 @@
-import { ArrowUp, ChevronDown, LoaderCircle, Mic, Square, X } from "lucide-react"
+import { ArrowUp, ChevronDown, LoaderCircle, Mic, Square } from "lucide-react"
 import * as React from "react"
-import { AgentChatContextStatus, useAudioRecorder } from "@agents24/chat-react/ui"
+import {
+  AgentChatContextStatus,
+  ChatAttachmentRows,
+  createAgentChatComposerFile,
+  revokeAgentChatComposerFiles,
+  useAudioRecorder,
+  type AgentChatComposerFile,
+} from "@agents24/chat-react/ui"
 import { canonicalInputMimeType, inputMimeTypes, validateAgentChatSubmission, type AgentChatInputContract } from "@agents24/chat-react/runtime"
 import type { ContextWindow } from "@agents24/client/protocol"
 
@@ -29,7 +36,7 @@ type ChatComposerProps = {
   onModelChange: (modelId: string) => void
   onAgentChange: (agentId: string) => void
   onStop: () => void
-  onSubmit: (text: string, files: File[]) => Promise<void>
+  onSubmit: (text: string, files: AgentChatComposerFile[]) => Promise<void>
   utilityRow?: "inline" | "below"
 }
 
@@ -52,15 +59,24 @@ export function ChatComposer({
   utilityRow = "inline",
 }: ChatComposerProps) {
   const [text, setText] = React.useState("")
-  const [files, setFiles] = React.useState<File[]>([])
+  const [files, setFiles] = React.useState<AgentChatComposerFile[]>([])
   const [attachmentError, setAttachmentError] = React.useState<string | null>(null)
   const inputRef = React.useRef<HTMLInputElement>(null)
   const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+  const filesRef = React.useRef<AgentChatComposerFile[]>([])
+  const inFlightFilesRef = React.useRef<AgentChatComposerFile[]>([])
   const submittingRef = React.useRef(false)
   const draftRevisionRef = React.useRef(0)
   const attachmentMimeTypes = inputMimeTypes(inputContract)
   const allowAttachments = attachmentMimeTypes.length > 0
   const recordingAllowed = inputContract.modalities.audio.recording_enabled
+  React.useEffect(() => {
+    filesRef.current = files
+  }, [files])
+  React.useEffect(() => () => {
+    revokeAgentChatComposerFiles(filesRef.current)
+    revokeAgentChatComposerFiles(inFlightFilesRef.current)
+  }, [])
   React.useEffect(() => {
     if (disabled || isRunning) return
     const frame = window.requestAnimationFrame(() => textareaRef.current?.focus({ preventScroll: true }))
@@ -68,14 +84,14 @@ export function ChatComposer({
   }, [disabled, focusKey, isRunning])
   const addRecording = React.useCallback((file: 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)
@@ -143,16 +159,23 @@ export 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
@@ -165,18 +188,19 @@ export function ChatComposer({
       data-agents24-chat-composer=""
     >
       {allowAttachments && files.length > 0 && (
-        <div className="mb-2 flex min-w-0 gap-2 overflow-x-auto">
-          {files.map((file, index) => (
-            <div key={`${file.name}-${index}`} className="flex max-w-48 items-center gap-2 border bg-card px-2 py-1 text-xs">
-              <span className="truncate">{file.name}</span>
-              <Button variant="ghost" size="icon-xs" aria-label={`Remove ${file.name}`} onClick={() => {
-                draftRevisionRef.current += 1
-                setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index))
-              }}>
-                <X />
-              </Button>
-            </div>
-          ))}
+        <div className="mb-2 min-w-0">
+          <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)
+              })
+            }}
+          />
         </div>
       )}
       {attachmentError || recorder.error ? <p className="mb-2 text-xs text-destructive" role="alert">{attachmentError || recorder.error}</p> : null}
@@ -201,7 +225,7 @@ export function ChatComposer({
                   attachmentMimeTypes.includes(canonicalInputMimeType(file.type))
                 ))
                 draftRevisionRef.current += 1
-                setFiles((current) => [...current, ...accepted])
+                setFiles((current) => [...current, ...accepted.map(createAgentChatComposerFile)])
                 setAttachmentError(
                   accepted.length === selected.length
                     ? null

package/scaffold/src/components/chat/chat-message.tsx

@@ -1,7 +1,7 @@
 import type { ChatHitlPart, ChatMessage as ChatMessageModel } from "@agents24/react"
 import type { FeedbackReason, HitlResponse } from "@agents24/client"
 import type { AgentChatRuntimeHitlActionState } from "@agents24/chat-react/runtime"
-import { AgentChatDefaultActions, ChatAttachment, ChatAttachments } from "@agents24/chat-react/ui"
+import { AgentChatDefaultActions, ChatAttachmentRows, type ChatAttachmentContentResolver } from "@agents24/chat-react/ui"
 import * as React from "react"
 
 import { MessageParts } from "./message-parts"
@@ -20,6 +20,7 @@ type Props = {
     input: { rating: "like" | "dislike" | null; reason?: FeedbackReason | null; comment?: string | null },
   ) => Promise<void>
   Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
+  resolveAttachmentContent?: ChatAttachmentContentResolver
 }
 
 export function ChatMessage({
@@ -30,6 +31,7 @@ export function ChatMessage({
   onHitlAction,
   onRegenerate,
   onSetFeedback,
+  resolveAttachmentContent,
   Timeline,
 }: Props) {
   const isUser = message.role === "user"
@@ -37,14 +39,11 @@ export function ChatMessage({
     <Message align={isUser ? "end" : "start"}>
       <MessageContent>
         {isUser && message.attachments?.length ? (
-          <ChatAttachments className="mb-2 justify-end">
-            {message.attachments.map((attachment, index) => (
-              <ChatAttachment
-                data={attachment}
-                key={String(attachment.id || attachment.url || attachment.filename || index)}
-              />
-            ))}
-          </ChatAttachments>
+          <ChatAttachmentRows
+            attachments={message.attachments}
+            className="mb-2"
+            resolveContent={resolveAttachmentContent}
+          />
         ) : null}
         <Bubble variant={isUser ? "secondary" : "ghost"} align={isUser ? "end" : "start"} className={isUser ? "max-w-[min(75%,42rem)]" : "max-w-full overflow-visible"}>
           <BubbleContent className={isUser ? "px-4 py-2.5" : "w-full overflow-visible"}>

package/scaffold/src/components/chat/chat-shell.tsx

@@ -100,7 +100,7 @@ export function ChatShell({
     || controller.runState === "reconnecting"
     || controller.runState === "paused"
     || controller.runState === "cancelling"
-    || runtime.isSubmitting
+  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)
@@ -151,7 +151,7 @@ export function ChatShell({
               <ChatComposer
                 inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
                 contextWindow={runtime.contextWindow}
-                disabled={runtime.isBootstrapping || runtime.isChangingAgent}
+                disabled={runtime.isBootstrapping || runtime.isChangingAgent || isUploading}
                 focusKey={controller.activeThreadId}
                 forceExpanded
                 isCancelling={isCancelling}
@@ -166,10 +166,11 @@ export 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,
                 })}
               />
             </div>
@@ -222,6 +223,7 @@ export function ChatShell({
                             onHitlAction={runtime.onHitlAction}
                             onRegenerate={() => controller.regenerate(message)}
                             onSetFeedback={(input) => controller.setFeedback(message, input)}
+                            resolveAttachmentContent={runtime.resolveAttachmentContent}
                             Timeline={components?.Timeline}
                           />
                         </MessageScrollerItem>
@@ -236,7 +238,7 @@ export function ChatShell({
                   <ChatComposer
                     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={isCancelling}
                     isRunning={isRunning}
@@ -250,10 +252,11 @@ export 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"
                   />