@agents24/chat-react 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "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, AgentChatUserMessageActionRow, 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,21 +31,19 @@ export function ChatMessage({
   onHitlAction,
   onRegenerate,
   onSetFeedback,
+  resolveAttachmentContent,
   Timeline,
 }: Props) {
   const isUser = message.role === "user"
   return (
     <Message align={isUser ? "end" : "start"}>
-      <MessageContent>
+      <MessageContent className={isUser ? "gap-0" : undefined}>
         {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"}>
@@ -57,6 +56,16 @@ export function ChatMessage({
             />
           </BubbleContent>
         </Bubble>
+        {isUser && (
+          <AgentChatUserMessageActionRow>
+            <AgentChatDefaultActions
+              handlers={{
+                onCopy: (content) => { void navigator.clipboard.writeText(content).catch(() => undefined) },
+              }}
+              message={message}
+            />
+          </AgentChatUserMessageActionRow>
+        )}
         {!isUser && message.isFinal !== false && (
           <MessageFooter className="gap-1 opacity-70 transition-opacity group-hover/message:opacity-100">
             <AgentChatDefaultActions

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

@@ -100,11 +100,27 @@ 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)
   const isEmptyState = controller.activeThreadId === null && controller.messages.length === 0 && !hasBlockingError
+  const composerOverlayRef = React.useRef<HTMLDivElement>(null)
+  const [composerOverlayHeight, setComposerOverlayHeight] = React.useState(192)
+
+  React.useEffect(() => {
+    const overlay = composerOverlayRef.current
+    if (!overlay || isEmptyState) return
+
+    const updateHeight = () => {
+      setComposerOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height))
+    }
+
+    updateHeight()
+    const resizeObserver = new ResizeObserver(updateHeight)
+    resizeObserver.observe(overlay)
+    return () => resizeObserver.disconnect()
+  }, [isEmptyState])
 
   return (
     <SidebarProvider
@@ -127,7 +143,7 @@ export function ChatShell({
       />}
       <SidebarInset className="h-svh min-h-0 overflow-hidden bg-background">
         <header
-          className="flex h-12 shrink-0 items-center gap-2 border-b border-border/30 px-3 sm:px-4"
+          className="flex h-12 shrink-0 items-center gap-2 border-b border-border/50 px-3 sm:px-4"
           data-agents24-chat-header=""
         >
           <CollapsedHeaderActions onNew={runtime.newThread} />
@@ -151,7 +167,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 +182,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>
@@ -183,7 +200,8 @@ export function ChatShell({
                 <MessageScroller className="relative min-h-0 flex-1">
                   <MessageScrollerViewport preserveScrollOnPrepend>
                     <MessageScrollerContent
-                      className="mx-auto w-full max-w-3xl gap-7 px-4 pt-8 pb-16 sm:px-6 sm:pt-12"
+                      className="mx-auto w-full max-w-3xl gap-3 px-4 pt-8 pb-0 sm:px-6 sm:pt-12"
+                      style={{ paddingBottom: composerOverlayHeight + 72 }}
                     >
                       {controller.hasOlderTurns && (
                         <Button className="self-center" variant="ghost" size="sm" disabled={controller.isLoadingOlder} onClick={() => { void controller.loadOlder().catch(() => undefined) }}>
@@ -222,6 +240,7 @@ export function ChatShell({
                             onHitlAction={runtime.onHitlAction}
                             onRegenerate={() => controller.regenerate(message)}
                             onSetFeedback={(input) => controller.setFeedback(message, input)}
+                            resolveAttachmentContent={runtime.resolveAttachmentContent}
                             Timeline={components?.Timeline}
                           />
                         </MessageScrollerItem>
@@ -229,35 +248,47 @@ export function ChatShell({
                     </MessageScrollerContent>
                   </MessageScrollerViewport>
                   <TurnOutline messages={controller.messages} />
-                  <MessageScrollerButton />
                 </MessageScroller>
+
+                <div
+                  ref={composerOverlayRef}
+                  className="pointer-events-none absolute inset-x-0 bottom-0 z-30 overflow-visible pt-10"
+                  style={{
+                    background: "linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--background) 85%, transparent) 45%, var(--background) 65%, var(--background) 100%)",
+                  }}
+                >
+                  <div className="pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3">
+                    <MessageScrollerButton className="!relative !inset-auto !translate-x-0 rtl:!translate-x-0" />
+                  </div>
+                  <div className="pointer-events-auto">
+                    <ChatComposer
+                      inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
+                      contextWindow={runtime.contextWindow}
+                      disabled={runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError || isUploading}
+                      focusKey={controller.activeThreadId}
+                      isCancelling={isCancelling}
+                      isRunning={isRunning}
+                      agentId={runtime.agentId}
+                      agents={runtime.agents}
+                      onAgentChange={(agentId) => { void runtime.changeAgent(agentId) }}
+                      onStop={() => { void controller.cancelRun().catch(() => undefined) }}
+                      modelId={runtime.modelId}
+                      models={runtime.models}
+                      onModelChange={runtime.changeModel}
+                      onSubmit={(text, files) => runtime.submit({
+                        text,
+                        files: files.map((file) => ({
+                          data: file.source,
+                          mediaType: file.mediaType,
+                          name: file.filename,
+                        })),
+                        attachments: files,
+                      })}
+                      utilityRow="below"
+                    />
+                  </div>
+                </div>
               </MessageScrollerProvider>
-              <div className="relative z-30 shrink-0 bg-background pt-3">
-                  <ChatComposer
-                    inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
-                    contextWindow={runtime.contextWindow}
-                    disabled={runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError}
-                    focusKey={controller.activeThreadId}
-                    isCancelling={isCancelling}
-                    isRunning={isRunning}
-                    agentId={runtime.agentId}
-                    agents={runtime.agents}
-                    onAgentChange={(agentId) => { void runtime.changeAgent(agentId) }}
-                    onStop={() => { void controller.cancelRun().catch(() => undefined) }}
-                    modelId={runtime.modelId}
-                    models={runtime.models}
-                    onModelChange={runtime.changeModel}
-                    onSubmit={(text, files) => runtime.submit({
-                      text,
-                      files: files.map((file) => ({
-                        data: file,
-                        mediaType: file.type || "application/octet-stream",
-                        name: file.name,
-                      })),
-                    })}
-                    utilityRow="below"
-                  />
-              </div>
             </>
           )}
         </section>

package/scaffold/src/components/chat/turn-outline.tsx

@@ -1,73 +1,31 @@
+import { LatestThreadScroller, type LatestThreadScrollerOutlineItem } from "@agents24/chat-react"
 import type { ChatMessage } from "@agents24/react"
-import { useState } from "react"
 
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
-import { useMessageScroller, useMessageScrollerVisibility } from "../ui/message-scroller"
-import { cn } from "../../lib/utils"
-
-type Turn = { id: string; label: string; messageIds: string[]; response: string }
-
-function turnsFromMessages(messages: ChatMessage[]): Turn[] {
-  return messages.reduce<Turn[]>((turns, message) => {
+function turnsFromMessages(messages: ChatMessage[]): LatestThreadScrollerOutlineItem[] {
+  return messages.reduce<LatestThreadScrollerOutlineItem[]>((turns, message) => {
     if (message.role === "user") {
-      turns.push({ id: message.id, label: message.content.trim() || `Turn ${turns.length + 1}`, messageIds: [message.id], response: "" })
+      turns.push({
+        id: message.id,
+        label: message.content.trim() || `Turn ${turns.length + 1}`,
+        messageIds: [message.id],
+        responsePreview: "",
+      })
     } else if (turns.length) {
       const turn = turns[turns.length - 1]
-      turn.messageIds.push(message.id)
-      if (!turn.response) turn.response = message.content.trim()
+      turn.messageIds?.push(message.id)
+      if (!turn.responsePreview) turn.responsePreview = message.content.trim()
     }
     return turns
   }, [])
 }
 
 export function TurnOutline({ messages }: { messages: ChatMessage[] }) {
-  const turns = turnsFromMessages(messages)
-  const { scrollToMessage } = useMessageScroller()
-  const { currentAnchorId, visibleMessageIds } = useMessageScrollerVisibility()
-  const visible = new Set(visibleMessageIds)
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
-  const focusIndex = hoveredIndex ?? -1
-  if (turns.length < 2) return null
-
   return (
-    <nav aria-label="Transcript outline" className="pointer-events-none absolute end-2 top-1/2 z-20 hidden max-h-72 w-14 -translate-y-1/2 md:block xl:end-5">
-      <div className="pointer-events-auto flex flex-col items-end gap-0.5 py-2">
-        {turns.map((turn, index) => {
-          const active = turn.messageIds.some((id) => visible.has(id) || currentAnchorId === id)
-          const distance = focusIndex >= 0 ? Math.abs(index - focusIndex) : Number.POSITIVE_INFINITY
-          const barWidth = focusIndex < 0
-            ? 12
-            : distance === 0 ? 50 : distance === 1 ? 36 : distance === 2 ? 23 : 10
-          const barOpacity = focusIndex < 0
-            ? active ? 1 : 0.4
-            : distance === 0 ? 1 : distance === 1 ? 0.78 : distance === 2 ? 0.58 : 0.36
-          return (
-            <Tooltip key={turn.id}>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  aria-label={`Jump to ${turn.label}`}
-                  className="group relative flex h-2 w-14 items-center justify-end outline-none after:pointer-events-auto after:absolute after:-inset-y-0.5 after:inset-x-0 after:content-['']"
-                  onBlur={() => setHoveredIndex(null)}
-                  onFocus={() => setHoveredIndex(index)}
-                  onMouseEnter={() => setHoveredIndex(index)}
-                  onMouseLeave={() => setHoveredIndex(null)}
-                  onClick={() => scrollToMessage(turn.id, { align: "start", behavior: "smooth" })}
-                >
-                  <span
-                    className={cn("h-0.5 rounded-full bg-muted-foreground/40 transition-[width,background-color,opacity] duration-150 ease-out group-hover:bg-foreground group-focus-visible:bg-foreground", active && "bg-foreground")}
-                    style={{ opacity: barOpacity, width: barWidth }}
-                  />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="left" className="w-64 flex-col items-stretch gap-0 overflow-hidden p-3">
-                <p className="line-clamp-2 max-w-full wrap-break-word text-sm font-medium">{turn.label}</p>
-                {turn.response && <p className="mt-1 line-clamp-2 max-w-full wrap-break-word text-xs opacity-70">{turn.response}</p>}
-              </TooltipContent>
-            </Tooltip>
-          )
-        })}
-      </div>
-    </nav>
+    <LatestThreadScroller.Outline
+      items={turnsFromMessages(messages)}
+      minSideGutterForRail={0}
+      side="left"
+      verticalOffset="3.5rem"
+    />
   )
 }

package/scaffold/src/components/ui/message-scroller.tsx

@@ -55,7 +55,7 @@ function MessageScrollerContent({
   return (
     <MessageScrollerPrimitive.Content
       data-slot="message-scroller-content"
-      className={cn("flex h-max min-h-full flex-col gap-8", className)}
+      className={cn("flex h-max min-h-full flex-col gap-3", className)}
       {...props}
     />
   )

package/scaffold/src/components/ui/message.tsx

@@ -74,7 +74,7 @@ function MessageFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="message-footer"
       className={cn(
-        "flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        "flex max-w-full min-w-0 items-center pl-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
         className
       )}
       {...props}

package/scaffold/src/components/ui/sidebar.tsx

@@ -215,7 +215,7 @@ function Sidebar({
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            : "border-border/50 group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
           className
         )}
         {...props}