@agents24/chat-react 0.5.6 → 0.5.7

package/dist/scaffold/index.js

@@ -11,6 +11,7 @@ import {
   agentChatRuntimeErrorMessage
 } from "@agents24/chat-react/runtime";
 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 } from "lucide-react";
@@ -726,7 +727,7 @@ function ChatComposer({
 }
 
 // scaffold/src/components/chat/chat-message.tsx
-import { AgentChatDefaultActions, ChatAttachmentRows as ChatAttachmentRows2 } from "@agents24/chat-react/ui";
+import { AgentChatDefaultActions, AgentChatUserMessageActionRow, ChatAttachmentRows as ChatAttachmentRows2 } from "@agents24/chat-react/ui";
 
 // scaffold/src/components/chat/message-parts.tsx
 import {
@@ -1116,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
@@ -1138,7 +1139,7 @@ function ChatMessage({
   Timeline
 }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx14(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ jsxs8(MessageContent, { children: [
+  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,
       {
@@ -1157,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,
       {
@@ -1559,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,
@@ -1958,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 {
@@ -1968,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",
@@ -1992,7 +2044,7 @@ function MessageScrollerViewport({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MessageScrollerPrimitive.Viewport,
     {
       "data-slot": "message-scroller-viewport",
@@ -2008,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
     }
   );
@@ -2022,7 +2074,7 @@ function MessageScrollerItem({
   scrollAnchor = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MessageScrollerPrimitive.Item,
     {
       "data-slot": "message-scroller-item",
@@ -2044,7 +2096,7 @@ function MessageScrollerButton({
   size = "icon-sm",
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MessageScrollerPrimitive.Button,
     {
       "data-slot": "message-scroller-button",
@@ -2056,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: {
@@ -2156,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, {}) }) })
   ] });
@@ -2164,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(
@@ -2192,7 +2177,20 @@ function ChatShell({
   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",
@@ -2215,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 }),
@@ -2228,7 +2226,7 @@ function ChatShell({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsxs15(
             "section",
             {
               "aria-label": "Conversation",
@@ -2236,7 +2234,7 @@ 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,
@@ -2270,29 +2268,30 @@ function ChatShell({
                       })
                     }
                   )
-                ] }) : /* @__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 })
                                 ] }),
@@ -2329,44 +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 || 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"
-                    }
-                  ) })
-                ] })
+                        /* @__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"
+                              }
+                            ) })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ) })
               ]
             }
           )