@agents24/chat-react 0.5.5 → 0.5.7

package/dist/scaffold/index.js

@@ -10,12 +10,19 @@ 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";
+import * as React8 from "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 +498,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 +519,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 +574,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 +602,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 +640,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 +727,7 @@ function ChatComposer({
 }
 
 // scaffold/src/components/chat/chat-message.tsx
-import { AgentChatDefaultActions, ChatAttachment, ChatAttachments } from "@agents24/chat-react/ui";
+import { AgentChatDefaultActions, AgentChatUserMessageActionRow, ChatAttachmentRows as ChatAttachmentRows2 } from "@agents24/chat-react/ui";
 
 // scaffold/src/components/chat/message-parts.tsx
 import {
@@ -1086,7 +1117,7 @@ function MessageFooter({ className, ...props }) {
     {
       "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
@@ -1104,17 +1135,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,
+  return /* @__PURE__ */ jsx14(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ jsxs8(MessageContent, { className: isUser ? "gap-0" : void 0, children: [
+    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,
       {
@@ -1125,6 +1158,17 @@ function ChatMessage({
         Timeline
       }
     ) }) }),
+    isUser && /* @__PURE__ */ jsx14(AgentChatUserMessageActionRow, { children: /* @__PURE__ */ jsx14(
+      AgentChatDefaultActions,
+      {
+        handlers: {
+          onCopy: (content) => {
+            void navigator.clipboard.writeText(content).catch(() => void 0);
+          }
+        },
+        message
+      }
+    ) }),
     !isUser && message.isFinal !== false && /* @__PURE__ */ jsx14(MessageFooter, { className: "gap-1 opacity-70 transition-opacity group-hover/message:opacity-100", children: /* @__PURE__ */ jsx14(
       AgentChatDefaultActions,
       {
@@ -1527,7 +1571,7 @@ function Sidebar({
             className: cn(
               "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
               // 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",
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "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,
@@ -1926,7 +1970,47 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
 }
 
 // scaffold/src/components/chat/turn-outline.tsx
-import { useState as useState8 } from "react";
+import { LatestThreadScroller } from "@agents24/chat-react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function turnsFromMessages(messages) {
+  return messages.reduce((turns, message) => {
+    if (message.role === "user") {
+      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.responsePreview) turn.responsePreview = message.content.trim();
+    }
+    return turns;
+  }, []);
+}
+function TurnOutline({ messages }) {
+  return /* @__PURE__ */ jsx23(
+    LatestThreadScroller.Outline,
+    {
+      items: turnsFromMessages(messages),
+      minSideGutterForRail: 0,
+      side: "left",
+      verticalOffset: "3.5rem"
+    }
+  );
+}
+
+// scaffold/src/components/chat/timeline-loading.ts
+function isScaffoldTimelineLoading({
+  activeRunId,
+  message,
+  runState,
+  streamingMessageId
+}) {
+  if (runState !== "streaming" && runState !== "reconnecting") return false;
+  return message.id === streamingMessageId || Boolean(message.runId && message.runId === activeRunId);
+}
 
 // scaffold/src/components/ui/message-scroller.tsx
 import {
@@ -1936,15 +2020,15 @@ import {
   useMessageScrollerVisibility
 } from "@shadcn/react/message-scroller";
 import { ArrowDownIcon } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function MessageScrollerProvider(props) {
-  return /* @__PURE__ */ jsx23(MessageScrollerPrimitive.Provider, { ...props });
+  return /* @__PURE__ */ jsx24(MessageScrollerPrimitive.Provider, { ...props });
 }
 function MessageScroller({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MessageScrollerPrimitive.Root,
     {
       "data-slot": "message-scroller",
@@ -1960,7 +2044,7 @@ function MessageScrollerViewport({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MessageScrollerPrimitive.Viewport,
     {
       "data-slot": "message-scroller-viewport",
@@ -1976,11 +2060,11 @@ function MessageScrollerContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     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
     }
   );
@@ -1990,7 +2074,7 @@ function MessageScrollerItem({
   scrollAnchor = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MessageScrollerPrimitive.Item,
     {
       "data-slot": "message-scroller-item",
@@ -2012,7 +2096,7 @@ function MessageScrollerButton({
   size = "icon-sm",
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MessageScrollerPrimitive.Button,
     {
       "data-slot": "message-scroller-button",
@@ -2024,88 +2108,21 @@ function MessageScrollerButton({
         "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
         className
       ),
-      render: render ?? /* @__PURE__ */ jsx23(Button, { variant, size }),
+      render: render ?? /* @__PURE__ */ jsx24(Button, { variant, size }),
       ...props,
       children: children ?? /* @__PURE__ */ jsxs14(Fragment3, { children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           ArrowDownIcon,
           {}
         ),
-        /* @__PURE__ */ jsx23("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
+        /* @__PURE__ */ jsx24("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
       ] })
     }
   );
 }
 
-// scaffold/src/components/chat/turn-outline.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
-function turnsFromMessages(messages) {
-  return messages.reduce((turns, message) => {
-    if (message.role === "user") {
-      turns.push({ id: message.id, label: message.content.trim() || `Turn ${turns.length + 1}`, messageIds: [message.id], response: "" });
-    } else if (turns.length) {
-      const turn = turns[turns.length - 1];
-      turn.messageIds.push(message.id);
-      if (!turn.response) turn.response = message.content.trim();
-    }
-    return turns;
-  }, []);
-}
-function TurnOutline({ messages }) {
-  const turns = turnsFromMessages(messages);
-  const { scrollToMessage } = useMessageScroller();
-  const { currentAnchorId, visibleMessageIds } = useMessageScrollerVisibility();
-  const visible = new Set(visibleMessageIds);
-  const [hoveredIndex, setHoveredIndex] = useState8(null);
-  const focusIndex = hoveredIndex ?? -1;
-  if (turns.length < 2) return null;
-  return /* @__PURE__ */ jsx24("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", children: /* @__PURE__ */ jsx24("div", { className: "pointer-events-auto flex flex-col items-end gap-0.5 py-2", children: 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 /* @__PURE__ */ jsxs15(Tooltip, { children: [
-      /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx24(
-        "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" }),
-          children: /* @__PURE__ */ jsx24(
-            "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 }
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsxs15(TooltipContent, { side: "left", className: "w-64 flex-col items-stretch gap-0 overflow-hidden p-3", children: [
-        /* @__PURE__ */ jsx24("p", { className: "line-clamp-2 max-w-full wrap-break-word text-sm font-medium", children: turn.label }),
-        turn.response && /* @__PURE__ */ jsx24("p", { className: "mt-1 line-clamp-2 max-w-full wrap-break-word text-xs opacity-70", children: turn.response })
-      ] })
-    ] }, turn.id);
-  }) }) });
-}
-
-// scaffold/src/components/chat/timeline-loading.ts
-function isScaffoldTimelineLoading({
-  activeRunId,
-  message,
-  runState,
-  streamingMessageId
-}) {
-  if (runState !== "streaming" && runState !== "reconnecting") return false;
-  return message.id === streamingMessageId || Boolean(message.runId && message.runId === activeRunId);
-}
-
 // scaffold/src/components/chat/chat-shell.tsx
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var LOADING_INPUT_CONTRACT = {
   version: "agents24.runtime-inputs.v2",
   modalities: {
@@ -2124,7 +2141,7 @@ function CollapsedHeaderActions({ onNew }) {
   const { isMobile, openMobile, state } = useSidebar();
   const sidebarVisible = isMobile ? openMobile : state === "expanded";
   if (sidebarVisible) return null;
-  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
     /* @__PURE__ */ jsx25("div", { className: "h-8 w-17 shrink-0", "aria-hidden": "true" }),
     /* @__PURE__ */ jsx25("div", { className: "pointer-events-none fixed start-12 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ jsx25(Button, { className: "pointer-events-auto", variant: "ghost", size: "icon-sm", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ jsx25(SquarePen2, {}) }) })
   ] });
@@ -2132,7 +2149,7 @@ function CollapsedHeaderActions({ onNew }) {
 function OperationErrorNotice({ runtime }) {
   const error = runtime.operationError || runtime.backgroundError;
   if (!error) return null;
-  return /* @__PURE__ */ jsx25("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4", children: /* @__PURE__ */ jsxs16("div", { className: "pointer-events-auto flex max-w-lg items-start gap-2 rounded-lg border border-destructive/20 bg-background px-3 py-2 text-sm shadow-md", role: "alert", children: [
+  return /* @__PURE__ */ jsx25("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4", children: /* @__PURE__ */ jsxs15("div", { className: "pointer-events-auto flex max-w-lg items-start gap-2 rounded-lg border border-destructive/20 bg-background px-3 py-2 text-sm shadow-md", role: "alert", children: [
     /* @__PURE__ */ jsx25(CircleAlert, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
     /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 wrap-break-word", children: agentChatRuntimeErrorMessage(error) || "The chat could not complete that action." }),
     /* @__PURE__ */ jsx25(
@@ -2142,7 +2159,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,12 +2171,26 @@ 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);
   const isEmptyState = controller.activeThreadId === null && controller.messages.length === 0 && !hasBlockingError;
-  return /* @__PURE__ */ jsxs16(
+  const composerOverlayRef = React8.useRef(null);
+  const [composerOverlayHeight, setComposerOverlayHeight] = React8.useState(192);
+  React8.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 /* @__PURE__ */ jsxs15(
     SidebarProvider,
     {
       className: "h-svh min-h-0 overflow-hidden",
@@ -2182,11 +2213,11 @@ function ChatShell({
             onOpen: runtime.openThread
           }
         ),
-        /* @__PURE__ */ jsxs16(SidebarInset, { className: "h-svh min-h-0 overflow-hidden bg-background", children: [
-          /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs15(SidebarInset, { className: "h-svh min-h-0 overflow-hidden bg-background", children: [
+          /* @__PURE__ */ jsxs15(
             "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": "",
               children: [
                 /* @__PURE__ */ jsx25(CollapsedHeaderActions, { onNew: runtime.newThread }),
@@ -2195,7 +2226,7 @@ function ChatShell({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsxs15(
             "section",
             {
               "aria-label": "Conversation",
@@ -2203,14 +2234,14 @@ function ChatShell({
               "data-agents24-chat-transcript": "",
               children: [
                 /* @__PURE__ */ jsx25(OperationErrorNotice, { runtime }),
-                isEmptyState ? /* @__PURE__ */ jsxs16("div", { className: "absolute inset-0 flex min-h-0 flex-col justify-center pb-20", children: [
+                isEmptyState ? /* @__PURE__ */ jsxs15("div", { className: "absolute inset-0 flex min-h-0 flex-col justify-center pb-20", children: [
                   /* @__PURE__ */ jsx25("div", { className: "mx-auto mb-8 w-full max-w-3xl px-4 text-center sm:px-6", children: /* @__PURE__ */ jsx25("h2", { className: "text-3xl font-semibold tracking-tight sm:text-4xl", children: "Ready when you are." }) }),
                   /* @__PURE__ */ jsx25(
                     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: true,
                       isCancelling,
@@ -2229,36 +2260,38 @@ 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
                       })
                     }
                   )
-                ] }) : /* @__PURE__ */ jsxs16(Fragment4, { children: [
-                  /* @__PURE__ */ jsx25(
-                    MessageScrollerProvider,
-                    {
-                      autoScroll: true,
-                      defaultScrollPosition: "last-anchor",
-                      scrollPreviousItemPeek: 64,
-                      children: /* @__PURE__ */ jsxs16(MessageScroller, { className: "relative min-h-0 flex-1", children: [
-                        /* @__PURE__ */ jsx25(MessageScrollerViewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ jsxs16(
+                ] }) : /* @__PURE__ */ jsx25(Fragment4, { children: /* @__PURE__ */ jsxs15(
+                  MessageScrollerProvider,
+                  {
+                    autoScroll: true,
+                    defaultScrollPosition: "last-anchor",
+                    scrollPreviousItemPeek: 64,
+                    children: [
+                      /* @__PURE__ */ jsxs15(MessageScroller, { className: "relative min-h-0 flex-1", children: [
+                        /* @__PURE__ */ jsx25(MessageScrollerViewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ jsxs15(
                           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 },
                             children: [
-                              controller.hasOlderTurns && /* @__PURE__ */ jsxs16(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
+                              controller.hasOlderTurns && /* @__PURE__ */ jsxs15(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
                                 void controller.loadOlder().catch(() => void 0);
                               }, children: [
                                 controller.isLoadingOlder && /* @__PURE__ */ jsx25(LoaderCircle3, { className: "animate-spin" }),
                                 " Load earlier messages"
                               ] }),
                               runtime.isBootstrapping && /* @__PURE__ */ jsx25("div", { "aria-label": "Loading conversation", className: "flex flex-1 items-center justify-center py-24 text-muted-foreground", role: "status", children: /* @__PURE__ */ jsx25(LoaderCircle3, { className: "size-4 animate-spin" }) }),
-                              hasBlockingError && /* @__PURE__ */ jsxs16("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center", children: [
+                              hasBlockingError && /* @__PURE__ */ jsxs15("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center", children: [
                                 /* @__PURE__ */ jsx25(CircleAlert, { className: "size-5 text-destructive" }),
-                                /* @__PURE__ */ jsxs16("div", { children: [
+                                /* @__PURE__ */ jsxs15("div", { children: [
                                   /* @__PURE__ */ jsx25("h2", { className: "font-medium", children: "Couldn\u2019t connect" }),
                                   /* @__PURE__ */ jsx25("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: runtime.errorMessage })
                                 ] }),
@@ -2285,6 +2318,7 @@ function ChatShell({
                                       onHitlAction: runtime.onHitlAction,
                                       onRegenerate: () => controller.regenerate(message),
                                       onSetFeedback: (input) => controller.setFeedback(message, input),
+                                      resolveAttachmentContent: runtime.resolveAttachmentContent,
                                       Timeline: components?.Timeline
                                     }
                                   )
@@ -2294,43 +2328,56 @@ function ChatShell({
                             ]
                           }
                         ) }),
-                        /* @__PURE__ */ jsx25(TurnOutline, { messages: controller.messages }),
-                        /* @__PURE__ */ jsx25(MessageScrollerButton, {})
-                      ] })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx25("div", { className: "relative z-30 shrink-0 bg-background pt-3", children: /* @__PURE__ */ jsx25(
-                    ChatComposer,
-                    {
-                      inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
-                      contextWindow: runtime.contextWindow,
-                      disabled: runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError,
-                      focusKey: controller.activeThreadId,
-                      isCancelling,
-                      isRunning,
-                      agentId: runtime.agentId,
-                      agents: runtime.agents,
-                      onAgentChange: (agentId) => {
-                        void runtime.changeAgent(agentId);
-                      },
-                      onStop: () => {
-                        void controller.cancelRun().catch(() => void 0);
-                      },
-                      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"
-                    }
-                  ) })
-                ] })
+                        /* @__PURE__ */ jsx25(TurnOutline, { messages: controller.messages })
+                      ] }),
+                      /* @__PURE__ */ jsxs15(
+                        "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%)"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx25("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ jsx25(MessageScrollerButton, { className: "!relative !inset-auto !translate-x-0 rtl:!translate-x-0" }) }),
+                            /* @__PURE__ */ jsx25("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx25(
+                              ChatComposer,
+                              {
+                                inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
+                                contextWindow: runtime.contextWindow,
+                                disabled: runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError || isUploading,
+                                focusKey: controller.activeThreadId,
+                                isCancelling,
+                                isRunning,
+                                agentId: runtime.agentId,
+                                agents: runtime.agents,
+                                onAgentChange: (agentId) => {
+                                  void runtime.changeAgent(agentId);
+                                },
+                                onStop: () => {
+                                  void controller.cancelRun().catch(() => void 0);
+                                },
+                                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"
+                              }
+                            ) })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ) })
               ]
             }
           )