@agents24/chat-react 0.5.5 → 0.5.7

package/dist/runtime/use-agent-chat-runtime.d.ts

@@ -1,6 +1,6 @@
 import type { AgentClient, ClientBootstrap, HitlResponse, PortableUpload } from "@agents24/client";
 import type { ContextCompression, ContextWindow } from "@agents24/client/protocol";
-import { type AgentChatController, type ChatHitlPart } from "@agents24/react";
+import { type AgentChatController, type ChatAttachment, type ChatHitlPart } from "@agents24/react";
 import type { ChatMcpOauthCompletion } from "../types";
 export type AgentChatRuntimeAgent = {
     name: string;
@@ -16,7 +16,7 @@ export type AgentChatRuntimeAgentOption = {
     id: string;
     label: string;
 };
-export type AgentChatRuntimeViewState = "ready" | "loading" | "streaming" | "reconnecting" | "paused" | "cancelling" | "cancelled" | "offline" | "denied" | "quota" | "failed" | "expired";
+export type AgentChatRuntimeViewState = "ready" | "loading" | "uploading" | "streaming" | "reconnecting" | "paused" | "cancelling" | "cancelled" | "offline" | "denied" | "quota" | "failed" | "expired";
 export type AgentChatRuntimeConnectionState = "connected" | "connecting" | "reconnecting" | "offline" | "expired";
 export type AgentChatThreadChangeReason = "created" | "opened" | "new" | "deleted";
 export type AgentChatActiveThreadChange = {
@@ -32,6 +32,7 @@ export type AgentChatMcpAuthorizationCompletion = (input: {
 export type AgentChatRuntimeSubmit = {
     text: string;
     files?: readonly PortableUpload[];
+    attachments?: ChatAttachment[];
 };
 export type AgentChatRuntimeHitlActionState = {
     action: string;
@@ -79,6 +80,10 @@ export type AgentChatRuntime = {
     openThread(threadId: string): Promise<void>;
     operationError: unknown;
     retryBootstrap(): Promise<void>;
+    resolveAttachmentContent(attachment: ChatAttachment, signal: AbortSignal): Promise<{
+        url: string;
+        validUntil: string | null;
+    }>;
     state: AgentChatRuntimeViewState;
     submit(input: AgentChatRuntimeSubmit): Promise<void>;
 };

package/dist/scaffold/components/chat/chat-composer.d.ts

@@ -1,3 +1,4 @@
+import { type AgentChatComposerFile } from "@agents24/chat-react/ui";
 import { type AgentChatInputContract } from "@agents24/chat-react/runtime";
 import type { ContextWindow } from "@agents24/client/protocol";
 type ChatComposerProps = {
@@ -21,7 +22,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";
 };
 export declare function ChatComposer({ inputContract, disabled, contextWindow, focusKey, forceExpanded, isCancelling, isRunning, agentId, agents, modelId, models, onModelChange, onAgentChange, onStop, onSubmit, utilityRow, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/scaffold/components/chat/chat-message.d.ts

@@ -1,6 +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 { type ChatAttachmentContentResolver } from "@agents24/chat-react/ui";
 import * as React from "react";
 import type { Agents24ChatTimelineSlotProps } from "../../app";
 type Props = {
@@ -16,6 +17,7 @@ type Props = {
         comment?: string | null;
     }) => Promise<void>;
     Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>;
+    resolveAttachmentContent?: ChatAttachmentContentResolver;
 };
-export declare function ChatMessage({ allowFeedback, getHitlActionState, isLoading, message, onHitlAction, onRegenerate, onSetFeedback, Timeline, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMessage({ allowFeedback, getHitlActionState, isLoading, message, onHitlAction, onRegenerate, onSetFeedback, resolveAttachmentContent, Timeline, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/scaffold/components/chat/turn-outline.d.ts

@@ -1,4 +1,4 @@
 import type { ChatMessage } from "@agents24/react";
 export declare function TurnOutline({ messages }: {
     messages: ChatMessage[];
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/scaffold/index.cjs

@@ -39,11 +39,12 @@ module.exports = __toCommonJS(src_exports);
 
 // scaffold/src/app.tsx
 var import_runtime3 = require("@agents24/chat-react/runtime");
-var import_react3 = require("@agents24/react");
+var import_react2 = require("@agents24/react");
 
 // scaffold/src/components/chat/chat-shell.tsx
 var import_runtime2 = require("@agents24/chat-react/runtime");
 var import_lucide_react12 = require("lucide-react");
+var React8 = __toESM(require("react"), 1);
 
 // scaffold/src/components/chat/chat-composer.tsx
 var import_lucide_react3 = require("lucide-react");
@@ -524,11 +525,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 = (0, import_runtime.inputMimeTypes)(inputContract);
   const allowAttachments = attachmentMimeTypes.length > 0;
   const recordingAllowed = inputContract.modalities.audio.recording_enabled;
+  React2.useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+  React2.useEffect(() => () => {
+    (0, import_ui.revokeAgentChatComposerFiles)(filesRef.current);
+    (0, import_ui.revokeAgentChatComposerFiles)(inFlightFilesRef.current);
+  }, []);
   React2.useEffect(() => {
     if (disabled || isRunning) return;
     const frame = window.requestAnimationFrame(() => textareaRef.current?.focus({ preventScroll: true }));
@@ -536,14 +546,14 @@ function ChatComposer({
   }, [disabled, focusKey, isRunning]);
   const addRecording = React2.useCallback((file) => {
     draftRevisionRef.current += 1;
-    setFiles((current) => [...current, file]);
+    setFiles((current) => [...current, (0, import_ui.createAgentChatComposerFile)(file)]);
   }, []);
   const recorder = (0, import_ui.useAudioRecorder)(addRecording);
   const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
   const validationError = (0, import_runtime.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);
@@ -591,16 +601,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);
+      (0, import_ui.revokeAgentChatComposerFiles)(selectedFiles);
+      inFlightFilesRef.current = [];
     } catch {
       if (draftRevisionRef.current === clearedRevision) {
         draftRevisionRef.current += 1;
         setText(value);
         setFiles(selectedFiles);
+        inFlightFilesRef.current = [];
+      } else {
+        (0, import_ui.revokeAgentChatComposerFiles)(selectedFiles);
+        inFlightFilesRef.current = [];
       }
     } finally {
       submittingRef.current = false;
@@ -612,13 +629,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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mb-2 flex min-w-0 gap-2 overflow-x-auto", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex max-w-48 items-center gap-2 border bg-card px-2 py-1 text-xs", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: file.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { variant: "ghost", size: "icon-xs", "aria-label": `Remove ${file.name}`, onClick: () => {
-            draftRevisionRef.current += 1;
-            setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index));
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.X, {}) })
-        ] }, `${file.name}-${index}`)) }),
+        allowAttachments && files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mb-2 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_ui.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) (0, import_ui.revokeAgentChatComposerFiles)([removed]);
+                return current.filter((file) => file.id !== attachment.id);
+              });
+            }
+          }
+        ) }),
         attachmentError || recorder.error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mb-2 text-xs text-destructive", role: "alert", children: attachmentError || recorder.error }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
@@ -642,7 +667,7 @@ function ChatComposer({
                       const selected = Array.from(event.target.files ?? []);
                       const accepted = selected.filter((file) => attachmentMimeTypes.includes((0, import_runtime.canonicalInputMimeType)(file.type)));
                       draftRevisionRef.current += 1;
-                      setFiles((current) => [...current, ...accepted]);
+                      setFiles((current) => [...current, ...accepted.map(import_ui.createAgentChatComposerFile)]);
                       setAttachmentError(
                         accepted.length === selected.length ? null : "One or more selected file types are not supported by this Agent."
                       );
@@ -1116,7 +1141,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
@@ -1134,17 +1159,19 @@ function ChatMessage({
   onHitlAction,
   onRegenerate,
   onSetFeedback,
+  resolveAttachmentContent,
   Timeline
 }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MessageContent, { children: [
-    isUser && message.attachments?.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui3.ChatAttachments, { className: "mb-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_ui3.ChatAttachment,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MessageContent, { className: isUser ? "gap-0" : void 0, children: [
+    isUser && message.attachments?.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_ui3.ChatAttachmentRows,
       {
-        data: attachment
-      },
-      String(attachment.id || attachment.url || attachment.filename || index)
-    )) }) : null,
+        attachments: message.attachments,
+        className: "mb-2",
+        resolveContent: resolveAttachmentContent
+      }
+    ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Bubble, { variant: isUser ? "secondary" : "ghost", align: isUser ? "end" : "start", className: isUser ? "max-w-[min(75%,42rem)]" : "max-w-full overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BubbleContent, { className: isUser ? "px-4 py-2.5" : "w-full overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       MessageParts,
       {
@@ -1155,6 +1182,17 @@ function ChatMessage({
         Timeline
       }
     ) }) }),
+    isUser && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui3.AgentChatUserMessageActionRow, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_ui3.AgentChatDefaultActions,
+      {
+        handlers: {
+          onCopy: (content) => {
+            void navigator.clipboard.writeText(content).catch(() => void 0);
+          }
+        },
+        message
+      }
+    ) }),
     !isUser && message.isFinal !== false && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageFooter, { className: "gap-1 opacity-70 transition-opacity group-hover/message:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_ui3.AgentChatDefaultActions,
       {
@@ -1557,7 +1595,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,
@@ -1956,20 +1994,60 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
 }
 
 // scaffold/src/components/chat/turn-outline.tsx
-var import_react2 = require("react");
+var import_chat_react = require("@agents24/chat-react");
+var import_jsx_runtime23 = require("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__ */ (0, import_jsx_runtime23.jsx)(
+    import_chat_react.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
 var import_message_scroller = require("@shadcn/react/message-scroller");
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function MessageScrollerProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_message_scroller.MessageScroller.Provider, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_message_scroller.MessageScroller.Provider, { ...props });
 }
 function MessageScroller({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.Root,
     {
       "data-slot": "message-scroller",
@@ -1985,7 +2063,7 @@ function MessageScrollerViewport({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.Viewport,
     {
       "data-slot": "message-scroller-viewport",
@@ -2001,11 +2079,11 @@ function MessageScrollerContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.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
     }
   );
@@ -2015,7 +2093,7 @@ function MessageScrollerItem({
   scrollAnchor = false,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.Item,
     {
       "data-slot": "message-scroller-item",
@@ -2037,7 +2115,7 @@ function MessageScrollerButton({
   size = "icon-sm",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.Button,
     {
       "data-slot": "message-scroller-button",
@@ -2049,86 +2127,19 @@ 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__ */ (0, import_jsx_runtime23.jsx)(Button, { variant, size }),
+      render: render ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant, size }),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_lucide_react11.ArrowDownIcon,
           {}
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
       ] })
     }
   );
 }
 
-// scaffold/src/components/chat/turn-outline.tsx
-var import_jsx_runtime24 = require("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 } = (0, import_message_scroller.useMessageScroller)();
-  const { currentAnchorId, visibleMessageIds } = (0, import_message_scroller.useMessageScrollerVisibility)();
-  const visible = new Set(visibleMessageIds);
-  const [hoveredIndex, setHoveredIndex] = (0, import_react2.useState)(null);
-  const focusIndex = hoveredIndex ?? -1;
-  if (turns.length < 2) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        "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__ */ (0, import_jsx_runtime24.jsx)(
-            "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__ */ (0, import_jsx_runtime24.jsxs)(TooltipContent, { side: "left", className: "w-64 flex-col items-stretch gap-0 overflow-hidden p-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "line-clamp-2 max-w-full wrap-break-word text-sm font-medium", children: turn.label }),
-        turn.response && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var LOADING_INPUT_CONTRACT = {
@@ -2179,11 +2190,25 @@ 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;
+  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__ */ (0, import_jsx_runtime25.jsxs)(
     SidebarProvider,
     {
@@ -2211,7 +2236,7 @@ function ChatShell({
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "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__ */ (0, import_jsx_runtime25.jsx)(CollapsedHeaderActions, { onNew: runtime.newThread }),
@@ -2235,7 +2260,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,
@@ -2254,25 +2279,27 @@ 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__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    MessageScrollerProvider,
-                    {
-                      autoScroll: true,
-                      defaultScrollPosition: "last-anchor",
-                      scrollPreviousItemPeek: 64,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MessageScroller, { className: "relative min-h-0 flex-1", children: [
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                  MessageScrollerProvider,
+                  {
+                    autoScroll: true,
+                    defaultScrollPosition: "last-anchor",
+                    scrollPreviousItemPeek: 64,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MessageScroller, { className: "relative min-h-0 flex-1", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageScrollerViewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                           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__ */ (0, import_jsx_runtime25.jsxs)(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
                                 void controller.loadOlder().catch(() => void 0);
@@ -2310,6 +2337,7 @@ function ChatShell({
                                       onHitlAction: runtime.onHitlAction,
                                       onRegenerate: () => controller.regenerate(message),
                                       onSetFeedback: (input) => controller.setFeedback(message, input),
+                                      resolveAttachmentContent: runtime.resolveAttachmentContent,
                                       Timeline: components?.Timeline
                                     }
                                   )
@@ -2319,43 +2347,56 @@ function ChatShell({
                             ]
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TurnOutline, { messages: controller.messages }),
-                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageScrollerButton, {})
-                      ] })
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "relative z-30 shrink-0 bg-background pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    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__ */ (0, import_jsx_runtime25.jsx)(TurnOutline, { messages: controller.messages })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                        "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__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageScrollerButton, { className: "!relative !inset-auto !translate-x-0 rtl:!translate-x-0" }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                              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"
+                              }
+                            ) })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ) })
               ]
             }
           )
@@ -2384,7 +2425,7 @@ function RuntimeChat({
 }
 function App(props) {
   const identity = props.identity || GUEST_CHAT_IDENTITY;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react3.Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RuntimeChat, { ...props }, identity.state) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react2.Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RuntimeChat, { ...props }, identity.state) });
 }
 
 // scaffold/src/index.tsx