@agents24/chat-react 0.5.16 → 0.5.18

package/dist/scaffold/index.js

@@ -10,6 +10,7 @@ import {
 import {
   agentChatRuntimeErrorMessage
 } from "@agents24/chat-react/runtime";
+import { AgentChatQueue, queuedMessageComposerFiles, useLiveCompletionRuns } from "@agents24/chat-react/ui";
 import { CircleAlert, LoaderCircle as LoaderCircle3, SquarePen as SquarePen2, X } from "lucide-react";
 import * as React8 from "react";
 
@@ -19,9 +20,11 @@ import * as React2 from "react";
 import {
   AgentChatContextStatus,
   ChatAttachmentRows,
+  chatComposerAction,
   createAgentChatComposerFile,
   revokeAgentChatComposerFiles,
-  useAudioRecorder
+  useAudioRecorder,
+  useChatComposerFocus
 } from "@agents24/chat-react/ui";
 import { canonicalInputMimeType, inputMimeTypes, validateAgentChatSubmission } from "@agents24/chat-react/runtime";
 
@@ -491,6 +494,7 @@ function ChatComposer({
   onAgentChange,
   onStop,
   onSubmit,
+  restoredDraft,
   utilityRow = "inline"
 }) {
   const [text, setText] = React2.useState("");
@@ -512,11 +516,18 @@ function ChatComposer({
     revokeAgentChatComposerFiles(filesRef.current);
     revokeAgentChatComposerFiles(inFlightFilesRef.current);
   }, []);
-  React2.useEffect(() => {
-    if (disabled || isRunning) return;
-    const frame = window.requestAnimationFrame(() => textareaRef.current?.focus({ preventScroll: true }));
-    return () => window.cancelAnimationFrame(frame);
-  }, [disabled, focusKey, isRunning]);
+  const focusComposer = useChatComposerFocus({
+    textareaRef,
+    disabled: Boolean(disabled),
+    focusKey,
+    restoredDraft,
+    onRestore: (draft) => {
+      draftRevisionRef.current += 1;
+      revokeAgentChatComposerFiles(filesRef.current);
+      setText(draft.text);
+      setFiles(draft.files);
+    }
+  });
   const addRecording = React2.useCallback((file) => {
     draftRevisionRef.current += 1;
     setFiles((current) => [...current, createAgentChatComposerFile(file)]);
@@ -526,8 +537,9 @@ function ChatComposer({
   const validationError = validateAgentChatSubmission(
     inputContract,
     text,
-    files.map((file) => ({ data: file.source, mediaType: file.mediaType }))
+    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType }))
   );
+  const action = chatComposerAction({ hasDraft: Boolean(text.trim() || files.length), isRunning, isCancelling });
   const selectedAgent = agents.find((item) => item.id === agentId);
   const selectedModel = models.find((item) => item.id === modelId);
   const modelSelector = models.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "w-fit max-w-40", children: /* @__PURE__ */ jsxs3(Select, { disabled: disabled || isRunning, onValueChange: onModelChange, value: modelId || void 0, children: [
@@ -568,7 +580,7 @@ function ChatComposer({
   const hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0;
   const showUtilityRow = utilityRow === "below";
   const submit = async () => {
-    if (disabled || isRunning || submittingRef.current || validationError) return;
+    if (disabled || submittingRef.current || validationError) return;
     const value = text;
     const selectedFiles = files;
     const clearedRevision = draftRevisionRef.current + 1;
@@ -577,7 +589,7 @@ function ChatComposer({
     inFlightFilesRef.current = selectedFiles;
     setText("");
     setFiles([]);
-    textareaRef.current?.focus();
+    focusComposer();
     try {
       await onSubmit(value, selectedFiles);
       revokeAgentChatComposerFiles(selectedFiles);
@@ -599,7 +611,7 @@ function ChatComposer({
   return /* @__PURE__ */ jsxs3(
     "div",
     {
-      className: "mx-auto w-full max-w-3xl px-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6",
+      className: "relative z-10 w-full pb-[max(1rem,env(safe-area-inset-bottom))]",
       "data-agents24-chat-composer": "",
       children: [
         allowAttachments && files.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mb-2 min-w-0", children: /* @__PURE__ */ jsx7(
@@ -648,7 +660,7 @@ function ChatComposer({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx7("div", { className: "agents24-composer-attach flex min-w-0 items-center", children: /* @__PURE__ */ jsx7(Button, { className: "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground", variant: "ghost", size: "icon", "aria-label": "Attach files", disabled: disabled || isRunning, onClick: () => inputRef.current?.click(), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "+" }) }) })
+                /* @__PURE__ */ jsx7("div", { className: "agents24-composer-attach flex min-w-0 items-center", children: /* @__PURE__ */ jsx7(Button, { className: "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground", variant: "ghost", size: "icon", "aria-label": "Attach files", disabled, onClick: () => inputRef.current?.click(), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "+" }) }) })
               ] }) : /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", className: "agents24-composer-attach" }),
               /* @__PURE__ */ jsx7(
                 Textarea,
@@ -692,7 +704,7 @@ function ChatComposer({
                     children: recorder.isRecording ? /* @__PURE__ */ jsx7(Square, { className: "fill-current" }) : /* @__PURE__ */ jsx7(Mic, {})
                   }
                 ) : null,
-                isRunning ? /* @__PURE__ */ jsx7(
+                action === "stop" ? /* @__PURE__ */ jsx7(
                   Button,
                   {
                     size: "icon",
@@ -702,9 +714,9 @@ function ChatComposer({
                     children: isCancelling ? /* @__PURE__ */ jsx7(LoaderCircle, { className: "animate-spin" }) : /* @__PURE__ */ jsx7(Square, { className: "fill-current" })
                   }
                 ) : validationError ? /* @__PURE__ */ jsxs3(Tooltip, { children: [
-                  /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7("span", { tabIndex: 0, "aria-label": validationError, children: /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": "Send message", disabled: true, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) }) }) }),
+                  /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7("span", { tabIndex: 0, "aria-label": validationError, children: /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled: true, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) }) }) }),
                   /* @__PURE__ */ jsx7(TooltipContent, { children: validationError })
-                ] }) : /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": "Send message", disabled, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) })
+                ] }) : /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) })
               ] })
             ]
           }
@@ -727,7 +739,7 @@ function ChatComposer({
 }
 
 // scaffold/src/components/chat/chat-message.tsx
-import { AgentChatDefaultActions, AgentChatUserMessageActionRow, ChatAttachmentRows as ChatAttachmentRows2 } from "@agents24/chat-react/ui";
+import { AgentChatDefaultActions, AgentChatUserMessageActionRow, ChatAttachmentRows as ChatAttachmentRows2, useCompletionActionEntrance } from "@agents24/chat-react/ui";
 
 // scaffold/src/components/chat/message-parts.tsx
 import {
@@ -1128,6 +1140,7 @@ function MessageFooter({ className, ...props }) {
 // scaffold/src/components/chat/chat-message.tsx
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function ChatMessage({
+  animateCompletion,
   allowFeedback,
   getHitlActionState,
   isLoading,
@@ -1139,6 +1152,8 @@ function ChatMessage({
   Timeline
 }) {
   const isUser = message.role === "user";
+  const showCompletionActions = !isUser && message.isFinal !== false && !isLoading;
+  const animateCompletionActions = useCompletionActionEntrance(showCompletionActions, message.runId, animateCompletion);
   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,
@@ -1169,9 +1184,10 @@ function ChatMessage({
         message
       }
     ) }),
-    !isUser && message.isFinal !== false && /* @__PURE__ */ jsx14(MessageFooter, { className: "gap-1 opacity-70 transition-opacity group-hover/message:opacity-100", children: /* @__PURE__ */ jsx14(
+    showCompletionActions && /* @__PURE__ */ jsx14(MessageFooter, { className: "gap-1 opacity-70 transition-opacity group-hover/message:opacity-100", children: /* @__PURE__ */ jsx14(
       AgentChatDefaultActions,
       {
+        animateCompletion: animateCompletionActions,
         handlers: {
           feedback: message.feedback,
           onCopy: (content) => {
@@ -2012,117 +2028,12 @@ function isScaffoldTimelineLoading({
   return message.id === streamingMessageId || Boolean(message.runId && message.runId === activeRunId);
 }
 
-// scaffold/src/components/ui/message-scroller.tsx
+// scaffold/src/components/chat/chat-shell.tsx
 import {
-  MessageScroller as MessageScrollerPrimitive,
-  useMessageScroller,
-  useMessageScrollerScrollable,
-  useMessageScrollerVisibility
-} from "@shadcn/react/message-scroller";
-import { ArrowDownIcon } from "lucide-react";
+  LatestThreadScroller as LatestThreadScroller2,
+  latestThreadAnchorId
+} from "@agents24/chat-react";
 import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
-function MessageScrollerProvider(props) {
-  return /* @__PURE__ */ jsx24(MessageScrollerPrimitive.Provider, { ...props });
-}
-function MessageScroller({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx24(
-    MessageScrollerPrimitive.Root,
-    {
-      "data-slot": "message-scroller",
-      className: cn(
-        "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function MessageScrollerViewport({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx24(
-    MessageScrollerPrimitive.Viewport,
-    {
-      "data-slot": "message-scroller-viewport",
-      className: cn(
-        "size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function MessageScrollerContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx24(
-    MessageScrollerPrimitive.Content,
-    {
-      "data-slot": "message-scroller-content",
-      className: cn("flex h-max min-h-full flex-col gap-3", className),
-      ...props
-    }
-  );
-}
-function MessageScrollerItem({
-  className,
-  scrollAnchor = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx24(
-    MessageScrollerPrimitive.Item,
-    {
-      "data-slot": "message-scroller-item",
-      scrollAnchor,
-      className: cn(
-        "min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function MessageScrollerButton({
-  direction = "end",
-  className,
-  children,
-  render,
-  variant = "secondary",
-  size = "icon-sm",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx24(
-    MessageScrollerPrimitive.Button,
-    {
-      "data-slot": "message-scroller-button",
-      "data-direction": direction,
-      "data-variant": variant,
-      "data-size": size,
-      direction,
-      className: cn(
-        "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__ */ jsx24(Button, { variant, size }),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsxs14(Fragment3, { children: [
-        /* @__PURE__ */ jsx24(
-          ArrowDownIcon,
-          {}
-        ),
-        /* @__PURE__ */ jsx24("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
-      ] })
-    }
-  );
-}
-
-// scaffold/src/components/chat/chat-shell.tsx
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var LOADING_INPUT_CONTRACT = {
   version: "agents24.runtime-inputs.v2",
   modalities: {
@@ -2135,31 +2046,31 @@ var LOADING_INPUT_CONTRACT = {
   retention: { mode: "thread_lifetime" }
 };
 function PersistentSidebarTrigger() {
-  return /* @__PURE__ */ jsx25("div", { className: "pointer-events-none fixed start-3 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ jsx25(SidebarTrigger, { className: "pointer-events-auto [&_svg]:size-[18px]" }) });
+  return /* @__PURE__ */ jsx24("div", { className: "pointer-events-none fixed start-3 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ jsx24(SidebarTrigger, { className: "pointer-events-auto [&_svg]:size-[18px]" }) });
 }
 function CollapsedHeaderActions({ onNew }) {
   const { isMobile, openMobile, state } = useSidebar();
   const sidebarVisible = isMobile ? openMobile : state === "expanded";
   if (sidebarVisible) return null;
-  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, {}) }) })
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsx24("div", { className: "h-8 w-17 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx24("div", { className: "pointer-events-none fixed start-12 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ jsx24(Button, { className: "pointer-events-auto", variant: "ghost", size: "icon-sm", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ jsx24(SquarePen2, {}) }) })
   ] });
 }
 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__ */ 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(
+  return /* @__PURE__ */ jsx24("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4", children: /* @__PURE__ */ jsxs14("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__ */ jsx24(CircleAlert, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
+    /* @__PURE__ */ jsx24("span", { className: "min-w-0 flex-1 wrap-break-word", children: agentChatRuntimeErrorMessage(error) || "The chat could not complete that action." }),
+    /* @__PURE__ */ jsx24(
       Button,
       {
         "aria-label": "Dismiss error",
         onClick: runtime.operationError ? runtime.clearOperationError : runtime.controller.clearBackgroundError,
         size: "icon-xs",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx25(X, {})
+        children: /* @__PURE__ */ jsx24(X, {})
       }
     )
   ] }) });
@@ -2171,15 +2082,27 @@ function ChatShell({
   sidebar
 }) {
   const { controller } = runtime;
+  const isUploading = controller.runState === "uploading";
   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 wasLiveRun = useLiveCompletionRuns(controller.activeRunId, isRunning);
   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 latestAnchorId = latestThreadAnchorId(controller.messages);
   const composerOverlayRef = React8.useRef(null);
   const [composerOverlayHeight, setComposerOverlayHeight] = React8.useState(192);
-  React8.useEffect(() => {
+  const [restoredDraft, setRestoredDraft] = React8.useState(null);
+  const draftRevisionRef = React8.useRef(0);
+  const retractForEdit = React8.useCallback(async (message) => {
+    const draft = await controller.retractPendingMessage(message);
+    setRestoredDraft({
+      revision: ++draftRevisionRef.current,
+      text: draft.text,
+      files: queuedMessageComposerFiles(draft)
+    });
+  }, [controller]);
+  React8.useLayoutEffect(() => {
     const overlay = composerOverlayRef.current;
     if (!overlay || isEmptyState) return;
     const updateHeight = () => {
@@ -2190,15 +2113,15 @@ function ChatShell({
     resizeObserver.observe(overlay);
     return () => resizeObserver.disconnect();
   }, [isEmptyState]);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     SidebarProvider,
     {
       className: "h-svh min-h-0 overflow-hidden",
       "data-agents24-chat": "",
       "data-agents24-chat-layout": "",
       children: [
-        /* @__PURE__ */ jsx25(PersistentSidebarTrigger, {}),
-        sidebar || /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24(PersistentSidebarTrigger, {}),
+        sidebar || /* @__PURE__ */ jsx24(
           ThreadSidebar,
           {
             activeThreadId: controller.activeThreadId,
@@ -2213,171 +2136,147 @@ function ChatShell({
             onOpen: runtime.openThread
           }
         ),
-        /* @__PURE__ */ jsxs15(SidebarInset, { className: "h-svh min-h-0 overflow-hidden bg-background", children: [
-          /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs14(SidebarInset, { className: "h-svh min-h-0 overflow-hidden bg-background", children: [
+          /* @__PURE__ */ jsxs14(
             "header",
             {
               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 }),
-                /* @__PURE__ */ jsx25("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx25("h1", { className: "truncate text-sm font-medium", children: String(activeTitle || "New chat") }) }),
-                /* @__PURE__ */ jsx25(ThemeMenu, {})
+                /* @__PURE__ */ jsx24(CollapsedHeaderActions, { onNew: runtime.newThread }),
+                /* @__PURE__ */ jsx24("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx24("h1", { className: "truncate text-sm font-medium", children: String(activeTitle || "New chat") }) }),
+                /* @__PURE__ */ jsx24(ThemeMenu, {})
               ]
             }
           ),
-          /* @__PURE__ */ jsxs15(
+          /* @__PURE__ */ jsxs14(
             "section",
             {
               "aria-label": "Conversation",
               className: "relative flex min-h-0 flex-1 flex-col overflow-hidden",
               "data-agents24-chat-transcript": "",
               children: [
-                /* @__PURE__ */ jsx25(OperationErrorNotice, { runtime }),
-                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,
+                /* @__PURE__ */ jsx24(OperationErrorNotice, { runtime }),
+                /* @__PURE__ */ jsxs14(LatestThreadScroller2.Provider, { autoScroll: true, defaultScrollPosition: "last-anchor", scrollPreviousItemPeek: 64, children: [
+                  !isEmptyState && /* @__PURE__ */ jsxs14(LatestThreadScroller2.Root, { className: "relative min-h-0 flex-1", children: [
+                    /* @__PURE__ */ jsx24(LatestThreadScroller2.Viewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ jsxs14(
+                      LatestThreadScroller2.Content,
+                      {
+                        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__ */ jsxs14(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
+                            void controller.loadOlder().catch(() => void 0);
+                          }, children: [
+                            controller.isLoadingOlder && /* @__PURE__ */ jsx24(LoaderCircle3, { className: "animate-spin" }),
+                            " Load earlier messages"
+                          ] }),
+                          runtime.isBootstrapping && /* @__PURE__ */ jsx24("div", { "aria-label": "Loading conversation", className: "flex flex-1 items-center justify-center py-24 text-muted-foreground", role: "status", children: /* @__PURE__ */ jsx24(LoaderCircle3, { className: "size-4 animate-spin" }) }),
+                          hasBlockingError && /* @__PURE__ */ jsxs14("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center", children: [
+                            /* @__PURE__ */ jsx24(CircleAlert, { className: "size-5 text-destructive" }),
+                            /* @__PURE__ */ jsxs14("div", { children: [
+                              /* @__PURE__ */ jsx24("h2", { className: "font-medium", children: "Couldn\u2019t connect" }),
+                              /* @__PURE__ */ jsx24("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: runtime.errorMessage })
+                            ] }),
+                            /* @__PURE__ */ jsx24(Button, { variant: "outline", onClick: () => void runtime.retryBootstrap(), children: "Try again" })
+                          ] }),
+                          controller.messages.map((message) => /* @__PURE__ */ jsx24(
+                            LatestThreadScroller2.Item,
+                            {
+                              messageId: message.id,
+                              scrollAnchor: isRunning && message.id === latestAnchorId,
+                              className: "overflow-visible [content-visibility:visible]",
+                              children: /* @__PURE__ */ jsx24(
+                                ChatMessage,
+                                {
+                                  animateCompletion: wasLiveRun(message.runId),
+                                  allowFeedback: runtime.allowFeedback,
+                                  getHitlActionState: runtime.getHitlActionState,
+                                  isLoading: isScaffoldTimelineLoading({
+                                    activeRunId: controller.activeRunId,
+                                    message,
+                                    runState: controller.runState,
+                                    streamingMessageId: controller.streamingMessageId
+                                  }),
+                                  message,
+                                  onHitlAction: runtime.onHitlAction,
+                                  onRegenerate: () => controller.regenerate(message),
+                                  onSetFeedback: (input) => controller.setFeedback(message, input),
+                                  resolveAttachmentContent: runtime.resolveAttachmentContent,
+                                  Timeline: components?.Timeline
+                                }
+                              )
+                            },
+                            message.id
+                          ))
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx24(TurnOutline, { messages: controller.messages })
+                  ] }),
+                  /* @__PURE__ */ jsxs14(
+                    "div",
                     {
-                      inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
-                      contextWindow: runtime.contextWindow,
-                      disabled: runtime.isBootstrapping || runtime.isChangingAgent || isUploading,
-                      focusKey: controller.activeThreadId,
-                      forceExpanded: true,
-                      isCancelling,
-                      isRunning,
-                      agentId: runtime.agentId,
-                      agents: runtime.agents,
-                      onAgentChange: (agentId) => {
-                        void runtime.changeAgent(agentId);
+                      ref: composerOverlayRef,
+                      className: isEmptyState ? "pointer-events-none absolute inset-0 z-30 flex flex-col justify-center overflow-visible pb-20" : "pointer-events-none absolute inset-x-0 bottom-0 z-30 overflow-visible pt-10",
+                      style: isEmptyState ? void 0 : {
+                        background: "linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--background) 85%, transparent) 45%, var(--background) 65%, var(--background) 100%)"
                       },
-                      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
-                      })
+                      children: [
+                        isEmptyState ? /* @__PURE__ */ jsx24("div", { className: "mx-auto mb-8 w-full max-w-3xl px-4 text-center sm:px-6", children: /* @__PURE__ */ jsx24("h2", { className: "text-3xl font-semibold tracking-tight sm:text-4xl", children: "Ready when you are." }) }) : /* @__PURE__ */ jsx24("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ jsx24(LatestThreadScroller2.Button, { className: "!relative !inset-auto !translate-x-0 rtl:!translate-x-0" }) }),
+                        /* @__PURE__ */ jsxs14("div", { className: "pointer-events-auto mx-auto w-full max-w-3xl px-4 sm:px-6", children: [
+                          /* @__PURE__ */ jsx24(
+                            AgentChatQueue,
+                            {
+                              pending: controller.pendingMessages,
+                              queue: controller.messageQueue,
+                              canSteer: controller.runState === "streaming",
+                              onSteer: controller.steerPendingMessage,
+                              onRemove: controller.removePendingMessage,
+                              onEdit: retractForEdit,
+                              onResume: controller.resumeQueue
+                            }
+                          ),
+                          /* @__PURE__ */ jsx24(
+                            ChatComposer,
+                            {
+                              restoredDraft,
+                              inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
+                              contextWindow: runtime.contextWindow,
+                              disabled: runtime.isBootstrapping || runtime.isChangingAgent || isUploading || hasBlockingError,
+                              focusKey: controller.activeThreadId,
+                              forceExpanded: isEmptyState,
+                              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.filter((file) => file.source).map((file) => ({
+                                  data: file.source,
+                                  mediaType: file.mediaType,
+                                  name: file.filename
+                                })),
+                                attachmentIds: files.flatMap((file) => file.persistedAttachmentId ? [file.persistedAttachmentId] : []),
+                                attachments: files
+                              }),
+                              utilityRow: isEmptyState ? "inline" : "below"
+                            }
+                          )
+                        ] })
+                      ]
                     }
                   )
-                ] }) : /* @__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-3 px-4 pt-8 pb-0 sm:px-6 sm:pt-12",
-                            style: { paddingBottom: composerOverlayHeight + 72 },
-                            children: [
-                              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__ */ 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__ */ 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 })
-                                ] }),
-                                /* @__PURE__ */ jsx25(Button, { variant: "outline", onClick: () => void runtime.retryBootstrap(), children: "Try again" })
-                              ] }),
-                              controller.messages.map((message) => /* @__PURE__ */ jsx25(
-                                MessageScrollerItem,
-                                {
-                                  messageId: message.id,
-                                  scrollAnchor: message.role === "user",
-                                  className: "overflow-visible [content-visibility:visible]",
-                                  children: /* @__PURE__ */ jsx25(
-                                    ChatMessage,
-                                    {
-                                      allowFeedback: runtime.allowFeedback,
-                                      getHitlActionState: runtime.getHitlActionState,
-                                      isLoading: isScaffoldTimelineLoading({
-                                        activeRunId: controller.activeRunId,
-                                        message,
-                                        runState: controller.runState,
-                                        streamingMessageId: controller.streamingMessageId
-                                      }),
-                                      message,
-                                      onHitlAction: runtime.onHitlAction,
-                                      onRegenerate: () => controller.regenerate(message),
-                                      onSetFeedback: (input) => controller.setFeedback(message, input),
-                                      resolveAttachmentContent: runtime.resolveAttachmentContent,
-                                      Timeline: components?.Timeline
-                                    }
-                                  )
-                                },
-                                message.id
-                              ))
-                            ]
-                          }
-                        ) }),
-                        /* @__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"
-                              }
-                            ) })
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                ) })
+                ] })
               ]
             }
           )
@@ -2391,7 +2290,7 @@ function ChatShell({
 var GUEST_CHAT_IDENTITY = { state: "guest" };
 
 // scaffold/src/app.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var createBrowserAbortController = () => new AbortController();
 function RuntimeChat({
   components,
@@ -2402,17 +2301,17 @@ function RuntimeChat({
     ...props,
     mcpRedirectUri: props.mcpRedirectUri || (typeof window === "undefined" ? void 0 : window.location.href)
   });
-  return /* @__PURE__ */ jsx26(ChatShell, { components, identity, runtime, sidebar: props.sidebar });
+  return /* @__PURE__ */ jsx25(ChatShell, { components, identity, runtime, sidebar: props.sidebar });
 }
 function App(props) {
   const identity = props.identity || GUEST_CHAT_IDENTITY;
-  return /* @__PURE__ */ jsx26(Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, children: /* @__PURE__ */ jsx26(RuntimeChat, { ...props }, identity.state) });
+  return /* @__PURE__ */ jsx25(Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, children: /* @__PURE__ */ jsx25(RuntimeChat, { ...props }, identity.state) });
 }
 
 // scaffold/src/index.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function Agents24ChatScaffold({ appearanceController, theme, ...props }) {
-  return /* @__PURE__ */ jsx27(ThemeProvider, { controller: appearanceController, theme, children: /* @__PURE__ */ jsx27(TooltipProvider, { children: /* @__PURE__ */ jsx27(App, { ...props }) }) });
+  return /* @__PURE__ */ jsx26(ThemeProvider, { controller: appearanceController, theme, children: /* @__PURE__ */ jsx26(TooltipProvider, { children: /* @__PURE__ */ jsx26(App, { ...props }) }) });
 }
 export {
   Agents24ChatScaffold,