@agents24/chat-react 0.5.4 → 0.5.6

package/dist/scaffold/index.js

@@ -10,12 +10,18 @@ import {
 import {
   agentChatRuntimeErrorMessage
 } from "@agents24/chat-react/runtime";
-import { CircleAlert, LoaderCircle as LoaderCircle3, SquarePen as SquarePen2, X as X2 } from "lucide-react";
+import { CircleAlert, LoaderCircle as LoaderCircle3, SquarePen as SquarePen2, X } from "lucide-react";
 
 // scaffold/src/components/chat/chat-composer.tsx
-import { ArrowUp, LoaderCircle, Mic, Square, X } from "lucide-react";
+import { ArrowUp, ChevronDown, LoaderCircle, Mic, Square } from "lucide-react";
 import * as React2 from "react";
-import { AgentChatContextStatus, useAudioRecorder } from "@agents24/chat-react/ui";
+import {
+  AgentChatContextStatus,
+  ChatAttachmentRows,
+  createAgentChatComposerFile,
+  revokeAgentChatComposerFiles,
+  useAudioRecorder
+} from "@agents24/chat-react/ui";
 import { canonicalInputMimeType, inputMimeTypes, validateAgentChatSubmission } from "@agents24/chat-react/runtime";
 
 // scaffold/src/components/ui/button.tsx
@@ -32,7 +38,7 @@ function cn(...inputs) {
 // scaffold/src/components/ui/button.tsx
 import { jsx } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -80,9 +86,9 @@ function Button({
   );
 }
 
-// scaffold/src/components/ui/select.tsx
-import { CheckIcon, ChevronDownIcon } from "lucide-react";
-import { Select as SelectPrimitive } from "radix-ui";
+// scaffold/src/components/ui/dropdown-menu.tsx
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
 
 // scaffold/src/components/theme-provider.tsx
 import * as React from "react";
@@ -152,20 +158,195 @@ function useThemePortalContainer() {
   return useTheme().portalContainer;
 }
 
-// scaffold/src/components/ui/select.tsx
+// scaffold/src/components/ui/dropdown-menu.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  const themeContainer = useThemePortalContainer();
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, { container: themeContainer || void 0, children: /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      align,
+      className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      "data-inset": inset,
+      className: cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: "pointer-events-none absolute right-2 flex items-center justify-center",
+            "data-slot": "dropdown-menu-radio-item-indicator",
+            children: /* @__PURE__ */ jsx3(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(
+              CheckIcon,
+              {}
+            ) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1.5 my-1.5 h-px bg-border/50", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "flex cursor-default items-center gap-2 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx3(ChevronRightIcon, { className: "ml-auto" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+      ...props
+    }
+  );
+}
+
+// scaffold/src/components/ui/select.tsx
+import { CheckIcon as CheckIcon2, ChevronDownIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function Select(props) {
-  return /* @__PURE__ */ jsx3(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx4(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectValue(props) {
-  return /* @__PURE__ */ jsx3(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx4(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   children,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     SelectPrimitive.Trigger,
     {
       className: cn(
@@ -176,7 +357,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx3(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }) })
+        /* @__PURE__ */ jsx4(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }) })
       ]
     }
   );
@@ -189,7 +370,7 @@ function SelectContent({
   ...props
 }) {
   const container = useThemePortalContainer();
-  return /* @__PURE__ */ jsx3(SelectPrimitive.Portal, { container: container || void 0, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(SelectPrimitive.Portal, { container: container || void 0, children: /* @__PURE__ */ jsx4(
     SelectPrimitive.Content,
     {
       align,
@@ -201,7 +382,7 @@ function SelectContent({
       position: "popper",
       sideOffset,
       ...props,
-      children: /* @__PURE__ */ jsx3(SelectPrimitive.Viewport, { className: "max-h-60 overflow-y-auto p-0.5", children })
+      children: /* @__PURE__ */ jsx4(SelectPrimitive.Viewport, { className: "max-h-60 overflow-y-auto p-0.5", children })
     }
   ) });
 }
@@ -210,7 +391,7 @@ function SelectItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     SelectPrimitive.Item,
     {
       className: cn(
@@ -220,17 +401,17 @@ function SelectItem({
       "data-slot": "select-item",
       ...props,
       children: [
-        /* @__PURE__ */ jsx3(SelectPrimitive.ItemText, { className: "min-w-0 truncate", children }),
-        /* @__PURE__ */ jsx3("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx3(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(CheckIcon, { className: "size-3.5" }) }) })
+        /* @__PURE__ */ jsx4(SelectPrimitive.ItemText, { className: "min-w-0 truncate", children }),
+        /* @__PURE__ */ jsx4("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx4(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx4(CheckIcon2, { className: "size-3.5" }) }) })
       ]
     }
   );
 }
 
 // scaffold/src/components/ui/textarea.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "textarea",
     {
       "data-slot": "textarea",
@@ -245,12 +426,12 @@ function Textarea({ className, ...props }) {
 
 // scaffold/src/components/ui/tooltip.tsx
 import { Slot as Slot2 } from "radix-ui";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function TooltipProvider({ children }) {
   return children;
 }
 function Tooltip({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "span",
     {
       "data-slot": "tooltip",
@@ -263,7 +444,7 @@ function TooltipTrigger({
   asChild: _asChild,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(Slot2.Root, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx6(Slot2.Root, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -272,7 +453,7 @@ function TooltipContent({
   sideOffset: _sideOffset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "span",
     {
       role: "tooltip",
@@ -292,17 +473,21 @@ function TooltipContent({
 }
 
 // scaffold/src/components/chat/chat-composer.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChatComposer({
   inputContract,
   disabled,
   contextWindow,
+  focusKey,
   forceExpanded = false,
   isCancelling = false,
   isRunning,
+  agentId,
+  agents,
   modelId,
   models,
   onModelChange,
+  onAgentChange,
   onStop,
   onSubmit,
   utilityRow = "inline"
@@ -312,34 +497,73 @@ function ChatComposer({
   const [attachmentError, setAttachmentError] = React2.useState(null);
   const inputRef = React2.useRef(null);
   const textareaRef = React2.useRef(null);
+  const filesRef = React2.useRef([]);
+  const inFlightFilesRef = React2.useRef([]);
   const submittingRef = React2.useRef(false);
   const draftRevisionRef = React2.useRef(0);
   const attachmentMimeTypes = inputMimeTypes(inputContract);
   const allowAttachments = attachmentMimeTypes.length > 0;
   const recordingAllowed = inputContract.modalities.audio.recording_enabled;
+  React2.useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+  React2.useEffect(() => () => {
+    revokeAgentChatComposerFiles(filesRef.current);
+    revokeAgentChatComposerFiles(inFlightFilesRef.current);
+  }, []);
+  React2.useEffect(() => {
+    if (disabled || isRunning) return;
+    const frame = window.requestAnimationFrame(() => textareaRef.current?.focus({ preventScroll: true }));
+    return () => window.cancelAnimationFrame(frame);
+  }, [disabled, focusKey, isRunning]);
   const addRecording = React2.useCallback((file) => {
     draftRevisionRef.current += 1;
-    setFiles((current) => [...current, file]);
+    setFiles((current) => [...current, createAgentChatComposerFile(file)]);
   }, []);
   const recorder = useAudioRecorder(addRecording);
   const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
   const validationError = validateAgentChatSubmission(
     inputContract,
     text,
-    files.map((file) => ({ data: file, mediaType: file.type }))
+    files.map((file) => ({ data: file.source, mediaType: file.mediaType }))
   );
-  const modelSelector = models.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "w-fit max-w-40", children: /* @__PURE__ */ jsxs2(
-    Select,
-    {
-      disabled: disabled || isRunning,
-      onValueChange: onModelChange,
-      value: modelId || void 0,
-      children: [
-        /* @__PURE__ */ jsx6(SelectTrigger, { "aria-label": "Runtime model", children: /* @__PURE__ */ jsx6(SelectValue, { placeholder: "Model" }) }),
-        /* @__PURE__ */ jsx6(SelectContent, { align: "start", children: models.map((model) => /* @__PURE__ */ jsx6(SelectItem, { value: model.id, children: model.label }, model.id)) })
-      ]
-    }
-  ) }) : null;
+  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: [
+    /* @__PURE__ */ jsx7(SelectTrigger, { "aria-label": "Runtime model", children: /* @__PURE__ */ jsx7(SelectValue, { placeholder: "Model" }) }),
+    /* @__PURE__ */ jsx7(SelectContent, { align: "start", children: models.map((model) => /* @__PURE__ */ jsx7(SelectItem, { value: model.id, children: model.label }, model.id)) })
+  ] }) }) : null;
+  const runtimeSelector = agents.length > 1 ? /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx7(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+      Button,
+      {
+        variant: "ghost",
+        className: "h-8 max-w-64 gap-1.5 bg-transparent px-2.5 text-xs font-normal hover:bg-muted/40 disabled:opacity-100",
+        disabled: disabled || isRunning,
+        "aria-label": "Runtime configuration",
+        children: [
+          /* @__PURE__ */ jsx7("span", { className: "truncate", children: [selectedAgent?.label, selectedModel?.label].filter(Boolean).join(" \xB7 ") || "Runtime" }),
+          /* @__PURE__ */ jsx7(ChevronDown, { className: "size-3.5 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs3(DropdownMenuContent, { align: "start", className: "w-64 rounded-lg", children: [
+      /* @__PURE__ */ jsxs3(DropdownMenuSub, { children: [
+        /* @__PURE__ */ jsxs3(DropdownMenuSubTrigger, { className: "rounded-lg", children: [
+          /* @__PURE__ */ jsx7("span", { children: "Agent" }),
+          /* @__PURE__ */ jsx7("span", { className: "ml-auto max-w-32 truncate text-muted-foreground", children: selectedAgent?.label })
+        ] }),
+        /* @__PURE__ */ jsx7(DropdownMenuSubContent, { className: "w-56 rounded-lg", children: /* @__PURE__ */ jsx7(DropdownMenuRadioGroup, { value: agentId || void 0, onValueChange: onAgentChange, children: agents.map((agent) => /* @__PURE__ */ jsx7(DropdownMenuRadioItem, { className: "rounded-lg", value: agent.id, children: agent.label }, agent.id)) }) })
+      ] }),
+      models.length > 0 ? /* @__PURE__ */ jsxs3(DropdownMenuSub, { children: [
+        /* @__PURE__ */ jsxs3(DropdownMenuSubTrigger, { className: "rounded-lg", children: [
+          /* @__PURE__ */ jsx7("span", { children: "Model" }),
+          /* @__PURE__ */ jsx7("span", { className: "ml-auto max-w-32 truncate text-muted-foreground", children: selectedModel?.label })
+        ] }),
+        /* @__PURE__ */ jsx7(DropdownMenuSubContent, { className: "max-h-64 w-56 rounded-lg", children: /* @__PURE__ */ jsx7(DropdownMenuRadioGroup, { value: modelId || void 0, onValueChange: onModelChange, children: models.map((model) => /* @__PURE__ */ jsx7(DropdownMenuRadioItem, { className: "rounded-lg", value: model.id, children: model.label }, model.id)) }) })
+      ] }) : null
+    ] })
+  ] }) : modelSelector;
   const hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0;
   const showUtilityRow = utilityRow === "below";
   const submit = async () => {
@@ -349,36 +573,51 @@ function ChatComposer({
     const clearedRevision = draftRevisionRef.current + 1;
     draftRevisionRef.current = clearedRevision;
     submittingRef.current = true;
+    inFlightFilesRef.current = selectedFiles;
     setText("");
     setFiles([]);
     textareaRef.current?.focus();
     try {
       await onSubmit(value, selectedFiles);
+      revokeAgentChatComposerFiles(selectedFiles);
+      inFlightFilesRef.current = [];
     } catch {
       if (draftRevisionRef.current === clearedRevision) {
         draftRevisionRef.current += 1;
         setText(value);
         setFiles(selectedFiles);
+        inFlightFilesRef.current = [];
+      } else {
+        revokeAgentChatComposerFiles(selectedFiles);
+        inFlightFilesRef.current = [];
       }
     } finally {
       submittingRef.current = false;
     }
   };
-  return /* @__PURE__ */ jsxs2(
+  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",
       "data-agents24-chat-composer": "",
       children: [
-        allowAttachments && files.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mb-2 flex min-w-0 gap-2 overflow-x-auto", children: files.map((file, index) => /* @__PURE__ */ jsxs2("div", { className: "flex max-w-48 items-center gap-2 border bg-card px-2 py-1 text-xs", children: [
-          /* @__PURE__ */ jsx6("span", { className: "truncate", children: file.name }),
-          /* @__PURE__ */ jsx6(Button, { variant: "ghost", size: "icon-xs", "aria-label": `Remove ${file.name}`, onClick: () => {
-            draftRevisionRef.current += 1;
-            setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index));
-          }, children: /* @__PURE__ */ jsx6(X, {}) })
-        ] }, `${file.name}-${index}`)) }),
-        attachmentError || recorder.error ? /* @__PURE__ */ jsx6("p", { className: "mb-2 text-xs text-destructive", role: "alert", children: attachmentError || recorder.error }) : null,
-        /* @__PURE__ */ jsxs2(
+        allowAttachments && files.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mb-2 min-w-0", children: /* @__PURE__ */ jsx7(
+          ChatAttachmentRows,
+          {
+            attachments: files,
+            onRemove: (attachment) => {
+              if (!attachment.id) return;
+              draftRevisionRef.current += 1;
+              setFiles((current) => {
+                const removed = current.find((file) => file.id === attachment.id);
+                if (removed) revokeAgentChatComposerFiles([removed]);
+                return current.filter((file) => file.id !== attachment.id);
+              });
+            }
+          }
+        ) }),
+        attachmentError || recorder.error ? /* @__PURE__ */ jsx7("p", { className: "mb-2 text-xs text-destructive", role: "alert", children: attachmentError || recorder.error }) : null,
+        /* @__PURE__ */ jsxs3(
           "div",
           {
             "data-expanded": isExpanded || void 0,
@@ -387,8 +626,8 @@ function ChatComposer({
               isExpanded ? "p-2" : "p-1.5"
             ),
             children: [
-              allowAttachments ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-                /* @__PURE__ */ jsx6(
+              allowAttachments ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+                /* @__PURE__ */ jsx7(
                   "input",
                   {
                     ref: inputRef,
@@ -400,7 +639,7 @@ function ChatComposer({
                       const selected = Array.from(event.target.files ?? []);
                       const accepted = selected.filter((file) => attachmentMimeTypes.includes(canonicalInputMimeType(file.type)));
                       draftRevisionRef.current += 1;
-                      setFiles((current) => [...current, ...accepted]);
+                      setFiles((current) => [...current, ...accepted.map(createAgentChatComposerFile)]);
                       setAttachmentError(
                         accepted.length === selected.length ? null : "One or more selected file types are not supported by this Agent."
                       );
@@ -408,9 +647,9 @@ function ChatComposer({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx6("div", { className: "agents24-composer-attach flex min-w-0 items-center", children: /* @__PURE__ */ jsx6(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__ */ jsx6("span", { "aria-hidden": true, children: "+" }) }) })
-              ] }) : /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "agents24-composer-attach" }),
-              /* @__PURE__ */ jsx6(
+                /* @__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("span", { "aria-hidden": "true", className: "agents24-composer-attach" }),
+              /* @__PURE__ */ jsx7(
                 Textarea,
                 {
                   ref: textareaRef,
@@ -435,10 +674,10 @@ function ChatComposer({
                   }
                 }
               ),
-              /* @__PURE__ */ jsxs2("div", { className: "agents24-composer-actions flex items-center gap-1", children: [
-                utilityRow === "inline" ? /* @__PURE__ */ jsx6(AgentChatContextStatus, { contextWindow }) : null,
-                utilityRow === "inline" ? modelSelector : null,
-                recordingAllowed ? /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsxs3("div", { className: "agents24-composer-actions flex items-center gap-1", children: [
+                utilityRow === "inline" ? /* @__PURE__ */ jsx7(AgentChatContextStatus, { contextWindow }) : null,
+                utilityRow === "inline" ? runtimeSelector : null,
+                recordingAllowed ? /* @__PURE__ */ jsx7(
                   Button,
                   {
                     variant: recorder.isRecording ? "default" : "ghost",
@@ -449,35 +688,35 @@ function ChatComposer({
                       if (recorder.isRecording) recorder.stop();
                       else void recorder.start();
                     },
-                    children: recorder.isRecording ? /* @__PURE__ */ jsx6(Square, { className: "fill-current" }) : /* @__PURE__ */ jsx6(Mic, {})
+                    children: recorder.isRecording ? /* @__PURE__ */ jsx7(Square, { className: "fill-current" }) : /* @__PURE__ */ jsx7(Mic, {})
                   }
                 ) : null,
-                isRunning ? /* @__PURE__ */ jsx6(
+                isRunning ? /* @__PURE__ */ jsx7(
                   Button,
                   {
                     size: "icon",
                     "aria-label": isCancelling ? "Cancelling response" : "Stop response",
                     disabled: disabled || isCancelling,
                     onClick: onStop,
-                    children: isCancelling ? /* @__PURE__ */ jsx6(LoaderCircle, { className: "animate-spin" }) : /* @__PURE__ */ jsx6(Square, { className: "fill-current" })
+                    children: isCancelling ? /* @__PURE__ */ jsx7(LoaderCircle, { className: "animate-spin" }) : /* @__PURE__ */ jsx7(Square, { className: "fill-current" })
                   }
-                ) : validationError ? /* @__PURE__ */ jsxs2(Tooltip, { tabIndex: 0, children: [
-                  /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx6(Button, { size: "icon", "aria-label": "Send message", disabled: true, onClick: () => void submit(), children: /* @__PURE__ */ jsx6(ArrowUp, {}) }) }),
-                  /* @__PURE__ */ jsx6(TooltipContent, { children: validationError })
-                ] }) : /* @__PURE__ */ jsx6(Button, { size: "icon", "aria-label": "Send message", disabled, onClick: () => void submit(), children: /* @__PURE__ */ jsx6(ArrowUp, {}) })
+                ) : validationError ? /* @__PURE__ */ jsxs3(Tooltip, { tabIndex: 0, children: [
+                  /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": "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, {}) })
               ] })
             ]
           }
         ),
-        showUtilityRow ? /* @__PURE__ */ jsxs2(
+        showUtilityRow ? /* @__PURE__ */ jsxs3(
           "div",
           {
-            "aria-hidden": !modelSelector && !hasContextWindow ? "true" : void 0,
+            "aria-hidden": !runtimeSelector && !hasContextWindow ? "true" : void 0,
             className: "mt-2 flex min-h-8 items-center justify-between gap-2 px-1",
             "data-agents24-chat-composer-utility": "",
             children: [
-              /* @__PURE__ */ jsx6("div", { className: "min-w-0", children: modelSelector }),
-              /* @__PURE__ */ jsx6(AgentChatContextStatus, { contextWindow })
+              /* @__PURE__ */ jsx7("div", { className: "min-w-0", children: runtimeSelector }),
+              /* @__PURE__ */ jsx7(AgentChatContextStatus, { contextWindow })
             ]
           }
         ) : null
@@ -487,7 +726,7 @@ function ChatComposer({
 }
 
 // scaffold/src/components/chat/chat-message.tsx
-import { AgentChatDefaultActions, ChatAttachment, ChatAttachments } from "@agents24/chat-react/ui";
+import { AgentChatDefaultActions, ChatAttachmentRows as ChatAttachmentRows2 } from "@agents24/chat-react/ui";
 
 // scaffold/src/components/chat/message-parts.tsx
 import {
@@ -496,17 +735,17 @@ import {
 } from "@agents24/chat-react/ui";
 
 // scaffold/src/components/chat/collapsible-user-message.tsx
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
 import * as React3 from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var collapseThreshold = 360;
 function CollapsibleUserMessage({ content }) {
   const [expanded, setExpanded] = React3.useState(false);
   const contentId = React3.useId();
   const collapsible = content.length > collapseThreshold;
-  const Icon = expanded ? ChevronUp : ChevronDown;
-  return /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-2", children: [
-    /* @__PURE__ */ jsx7(
+  const Icon = expanded ? ChevronUp : ChevronDown2;
+  return /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col gap-2", children: [
+    /* @__PURE__ */ jsx8(
       "div",
       {
         id: contentId,
@@ -514,7 +753,7 @@ function CollapsibleUserMessage({ content }) {
         children: content
       }
     ),
-    collapsible && /* @__PURE__ */ jsxs3(
+    collapsible && /* @__PURE__ */ jsxs4(
       Button,
       {
         variant: "ghost",
@@ -526,7 +765,7 @@ function CollapsibleUserMessage({ content }) {
         onClick: () => setExpanded((value) => !value),
         children: [
           expanded ? "Show less" : "Show more",
-          /* @__PURE__ */ jsx7(Icon, {})
+          /* @__PURE__ */ jsx8(Icon, {})
         ]
       }
     )
@@ -539,24 +778,24 @@ import * as React4 from "react";
 // scaffold/src/components/ui/dialog.tsx
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { XIcon } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx9(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   container,
   ...props
 }) {
   const themeContainer = useThemePortalContainer();
-  return /* @__PURE__ */ jsx8(DialogPrimitive.Portal, { container: container || themeContainer || void 0, "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx9(DialogPrimitive.Portal, { container: container || themeContainer || void 0, "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -574,9 +813,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(DialogPortal, { children: [
-    /* @__PURE__ */ jsx8(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(DialogPortal, { children: [
+    /* @__PURE__ */ jsx9(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs5(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -587,18 +826,18 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsx8(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs4(
+          showCloseButton && /* @__PURE__ */ jsx9(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs5(
             Button,
             {
               variant: "ghost",
               className: "absolute top-4 right-4 bg-secondary",
               size: "icon-sm",
               children: [
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   XIcon,
                   {}
                 ),
-                /* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Close" })
               ]
             }
           ) })
@@ -608,7 +847,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-slot": "dialog-header",
@@ -623,7 +862,7 @@ function DialogFooter({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -634,7 +873,7 @@ function DialogFooter({
       ...props,
       children: [
         children,
-        showCloseButton && /* @__PURE__ */ jsx8(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { variant: "outline", children: "Close" }) })
+        showCloseButton && /* @__PURE__ */ jsx9(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx9(Button, { variant: "outline", children: "Close" }) })
       ]
     }
   );
@@ -643,7 +882,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -659,7 +898,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -673,7 +912,7 @@ function DialogDescription({
 }
 
 // scaffold/src/components/chat/external-link-dialog.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }) {
   const [copied, setCopied] = React4.useState(false);
   React4.useEffect(() => {
@@ -687,29 +926,29 @@ function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }) {
     onConfirm();
     onClose();
   };
-  return /* @__PURE__ */ jsx9(Dialog, { open: isOpen, onOpenChange: (open) => {
+  return /* @__PURE__ */ jsx10(Dialog, { open: isOpen, onOpenChange: (open) => {
     if (!open) onClose();
-  }, children: /* @__PURE__ */ jsxs5(DialogContent, { className: "max-h-[calc(100dvh-2rem)] min-w-0 overflow-hidden sm:max-w-md", children: [
-    /* @__PURE__ */ jsxs5(DialogHeader, { children: [
-      /* @__PURE__ */ jsx9(DialogTitle, { children: "Open external link?" }),
-      /* @__PURE__ */ jsx9(DialogDescription, { children: "You\u2019re about to visit an external website." })
+  }, children: /* @__PURE__ */ jsxs6(DialogContent, { className: "max-h-[calc(100dvh-2rem)] min-w-0 overflow-hidden sm:max-w-md", children: [
+    /* @__PURE__ */ jsxs6(DialogHeader, { children: [
+      /* @__PURE__ */ jsx10(DialogTitle, { children: "Open external link?" }),
+      /* @__PURE__ */ jsx10(DialogDescription, { children: "You\u2019re about to visit an external website." })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "max-h-32 overflow-auto rounded-md bg-muted p-3 font-mono text-xs wrap-break-word", children: url }),
-    /* @__PURE__ */ jsxs5(DialogFooter, { children: [
-      /* @__PURE__ */ jsx9(Button, { variant: "outline", onClick: () => void copyUrl(), children: copied ? "Copied" : "Copy link" }),
-      /* @__PURE__ */ jsx9(Button, { onClick: openUrl, children: "Open link" })
+    /* @__PURE__ */ jsx10("div", { className: "max-h-32 overflow-auto rounded-md bg-muted p-3 font-mono text-xs wrap-break-word", children: url }),
+    /* @__PURE__ */ jsxs6(DialogFooter, { children: [
+      /* @__PURE__ */ jsx10(Button, { variant: "outline", onClick: () => void copyUrl(), children: copied ? "Copied" : "Copy link" }),
+      /* @__PURE__ */ jsx10(Button, { onClick: openUrl, children: "Open link" })
     ] })
   ] }) });
 }
 
 // scaffold/src/components/chat/message-parts.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var linkSafety = {
   enabled: true,
-  renderModal: (props) => /* @__PURE__ */ jsx10(ExternalLinkDialog, { ...props })
+  renderModal: (props) => /* @__PURE__ */ jsx11(ExternalLinkDialog, { ...props })
 };
 function ScaffoldTimeline(props) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AgentResponseTimeline,
     {
       ...props,
@@ -728,7 +967,7 @@ function MessageParts({
   Timeline = ScaffoldTimeline
 }) {
   if (message.role === "assistant") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       Timeline,
       {
         getHitlActionState,
@@ -743,8 +982,8 @@ function MessageParts({
   }
   const text = message.parts.filter((part) => part.kind === "text").map((part) => part.kind === "text" ? part.text : "").join("") || message.content;
   const supportingParts = message.parts.filter((part) => part.kind !== "text" && part.kind !== "data");
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    supportingParts.map((part) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    supportingParts.map((part) => /* @__PURE__ */ jsx11(
       AgentChatPart,
       {
         getHitlActionState,
@@ -756,14 +995,14 @@ function MessageParts({
       },
       part.id
     )),
-    text ? /* @__PURE__ */ jsx10(CollapsibleUserMessage, { content: text }) : null
+    text ? /* @__PURE__ */ jsx11(CollapsibleUserMessage, { content: text }) : null
   ] });
 }
 
 // scaffold/src/components/ui/bubble.tsx
 import { cva as cva2 } from "class-variance-authority";
 import { Slot as Slot3 } from "radix-ui";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var bubbleVariants = cva2(
   "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
   {
@@ -789,7 +1028,7 @@ function Bubble({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       "data-slot": "bubble",
@@ -806,7 +1045,7 @@ function BubbleContent({
   ...props
 }) {
   const Comp = asChild ? Slot3.Root : "div";
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Comp,
     {
       "data-slot": "bubble-content",
@@ -839,13 +1078,13 @@ var bubbleReactionsVariants = cva2(
 );
 
 // scaffold/src/components/ui/message.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Message({
   className,
   align = "start",
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       "data-slot": "message",
@@ -859,7 +1098,7 @@ function Message({
   );
 }
 function MessageContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       "data-slot": "message-content",
@@ -872,7 +1111,7 @@ function MessageContent({ className, ...props }) {
   );
 }
 function MessageFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       "data-slot": "message-footer",
@@ -886,7 +1125,7 @@ function MessageFooter({ className, ...props }) {
 }
 
 // scaffold/src/components/chat/chat-message.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function ChatMessage({
   allowFeedback,
   getHitlActionState,
@@ -895,18 +1134,20 @@ function ChatMessage({
   onHitlAction,
   onRegenerate,
   onSetFeedback,
+  resolveAttachmentContent,
   Timeline
 }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx13(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ jsxs7(MessageContent, { children: [
-    isUser && message.attachments?.length ? /* @__PURE__ */ jsx13(ChatAttachments, { className: "mb-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx13(
-      ChatAttachment,
+  return /* @__PURE__ */ jsx14(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ jsxs8(MessageContent, { children: [
+    isUser && message.attachments?.length ? /* @__PURE__ */ jsx14(
+      ChatAttachmentRows2,
       {
-        data: attachment
-      },
-      String(attachment.id || attachment.url || attachment.filename || index)
-    )) }) : null,
-    /* @__PURE__ */ jsx13(Bubble, { variant: isUser ? "secondary" : "ghost", align: isUser ? "end" : "start", className: isUser ? "max-w-[min(75%,42rem)]" : "max-w-full overflow-visible", children: /* @__PURE__ */ jsx13(BubbleContent, { className: isUser ? "px-4 py-2.5" : "w-full overflow-visible", children: /* @__PURE__ */ jsx13(
+        attachments: message.attachments,
+        className: "mb-2",
+        resolveContent: resolveAttachmentContent
+      }
+    ) : null,
+    /* @__PURE__ */ jsx14(Bubble, { variant: isUser ? "secondary" : "ghost", align: isUser ? "end" : "start", className: isUser ? "max-w-[min(75%,42rem)]" : "max-w-full overflow-visible", children: /* @__PURE__ */ jsx14(BubbleContent, { className: isUser ? "px-4 py-2.5" : "w-full overflow-visible", children: /* @__PURE__ */ jsx14(
       MessageParts,
       {
         getHitlActionState,
@@ -916,7 +1157,7 @@ function ChatMessage({
         Timeline
       }
     ) }) }),
-    !isUser && message.isFinal !== false && /* @__PURE__ */ jsx13(MessageFooter, { className: "gap-1 opacity-70 transition-opacity group-hover/message:opacity-100", children: /* @__PURE__ */ jsx13(
+    !isUser && message.isFinal !== false && /* @__PURE__ */ jsx14(MessageFooter, { className: "gap-1 opacity-70 transition-opacity group-hover/message:opacity-100", children: /* @__PURE__ */ jsx14(
       AgentChatDefaultActions,
       {
         handlers: {
@@ -936,7 +1177,7 @@ function ChatMessage({
 // scaffold/src/components/chat/theme-menu.tsx
 import { Laptop, Moon, Sun } from "lucide-react";
 import * as React5 from "react";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var options = [
   { value: "system", label: "System", icon: Laptop },
   { value: "light", label: "Light", icon: Sun },
@@ -966,8 +1207,8 @@ function ThemeMenu() {
     };
   }, [open]);
   const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark";
-  return /* @__PURE__ */ jsxs8("div", { ref: rootRef, className: "relative", children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs9("div", { ref: rootRef, className: "relative", children: [
+    /* @__PURE__ */ jsx15(
       Button,
       {
         "aria-controls": menuId,
@@ -977,16 +1218,16 @@ function ThemeMenu() {
         onClick: () => setOpen((value) => !value),
         size: "icon-sm",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx14(ActiveIcon, {})
+        children: /* @__PURE__ */ jsx15(ActiveIcon, {})
       }
     ),
-    open ? /* @__PURE__ */ jsx14(
+    open ? /* @__PURE__ */ jsx15(
       "div",
       {
         id: menuId,
         className: "absolute end-0 top-full z-50 mt-1 flex min-w-44 flex-col rounded-xl border bg-popover p-1 text-popover-foreground shadow-md",
         role: "menu",
-        children: options.map(({ value, label: optionLabel, icon: Icon }, index) => /* @__PURE__ */ jsxs8(
+        children: options.map(({ value, label: optionLabel, icon: Icon }, index) => /* @__PURE__ */ jsxs9(
           Button,
           {
             ref: index === 0 ? firstItemRef : void 0,
@@ -1000,7 +1241,7 @@ function ThemeMenu() {
             size: "sm",
             variant: "ghost",
             children: [
-              /* @__PURE__ */ jsx14(Icon, {}),
+              /* @__PURE__ */ jsx15(Icon, {}),
               " ",
               optionLabel
             ]
@@ -1019,96 +1260,6 @@ import { LoaderCircle as LoaderCircle2, SquarePen, Trash2 } from "lucide-react";
 // scaffold/src/components/chat/identity-control.tsx
 import { LogIn, LogOut, UserRound } from "lucide-react";
 
-// scaffold/src/components/ui/dropdown-menu.tsx
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { CheckIcon as CheckIcon2, ChevronRightIcon } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-function DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx15(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx15(
-    DropdownMenuPrimitive.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...props
-    }
-  );
-}
-function DropdownMenuContent({
-  className,
-  align = "start",
-  sideOffset = 4,
-  ...props
-}) {
-  const themeContainer = useThemePortalContainer();
-  return /* @__PURE__ */ jsx15(DropdownMenuPrimitive.Portal, { container: themeContainer || void 0, children: /* @__PURE__ */ jsx15(
-    DropdownMenuPrimitive.Content,
-    {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      align,
-      className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
-      ...props
-    }
-  ) });
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx15(
-    DropdownMenuPrimitive.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx15(
-    DropdownMenuPrimitive.Label,
-    {
-      "data-slot": "dropdown-menu-label",
-      "data-inset": inset,
-      className: cn(
-        "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DropdownMenuSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx15(
-    DropdownMenuPrimitive.Separator,
-    {
-      "data-slot": "dropdown-menu-separator",
-      className: cn("-mx-1.5 my-1.5 h-px bg-border/50", className),
-      ...props
-    }
-  );
-}
-
 // scaffold/src/components/ui/sidebar.tsx
 import * as React7 from "react";
 import { cva as cva3 } from "class-variance-authority";
@@ -1577,7 +1728,7 @@ function SidebarMenuItem({ className, ...props }) {
   );
 }
 var sidebarMenuButtonVariants = cva3(
-  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-xl px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-xl px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
@@ -1653,7 +1804,7 @@ function SidebarMenuAction({
       "data-sidebar": "menu-action",
       className: cn(
         "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-xl p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
-        showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+        showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
         className
       ),
       ...props
@@ -2023,7 +2174,7 @@ function OperationErrorNotice({ runtime }) {
         onClick: runtime.operationError ? runtime.clearOperationError : runtime.controller.clearBackgroundError,
         size: "icon-xs",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx25(X2, {})
+        children: /* @__PURE__ */ jsx25(X, {})
       }
     )
   ] }) });
@@ -2031,10 +2182,12 @@ function OperationErrorNotice({ runtime }) {
 function ChatShell({
   components,
   identity,
-  runtime
+  runtime,
+  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);
@@ -2047,7 +2200,7 @@ function ChatShell({
       "data-agents24-chat-layout": "",
       children: [
         /* @__PURE__ */ jsx25(PersistentSidebarTrigger, {}),
-        /* @__PURE__ */ jsx25(
+        sidebar || /* @__PURE__ */ jsx25(
           ThreadSidebar,
           {
             activeThreadId: controller.activeThreadId,
@@ -2090,10 +2243,16 @@ function ChatShell({
                     {
                       inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
                       contextWindow: runtime.contextWindow,
-                      disabled: runtime.isBootstrapping,
+                      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);
+                      },
                       onStop: () => {
                         void controller.cancelRun().catch(() => void 0);
                       },
@@ -2103,10 +2262,11 @@ 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
                       })
                     }
                   )
@@ -2159,6 +2319,7 @@ function ChatShell({
                                       onHitlAction: runtime.onHitlAction,
                                       onRegenerate: () => controller.regenerate(message),
                                       onSetFeedback: (input) => controller.setFeedback(message, input),
+                                      resolveAttachmentContent: runtime.resolveAttachmentContent,
                                       Timeline: components?.Timeline
                                     }
                                   )
@@ -2178,9 +2339,15 @@ function ChatShell({
                     {
                       inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
                       contextWindow: runtime.contextWindow,
-                      disabled: runtime.isBootstrapping || hasBlockingError,
+                      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);
                       },
@@ -2190,10 +2357,11 @@ 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
                       }),
                       utilityRow: "below"
                     }
@@ -2223,7 +2391,7 @@ function RuntimeChat({
     ...props,
     mcpRedirectUri: props.mcpRedirectUri || (typeof window === "undefined" ? void 0 : window.location.href)
   });
-  return /* @__PURE__ */ jsx26(ChatShell, { components, identity, runtime });
+  return /* @__PURE__ */ jsx26(ChatShell, { components, identity, runtime, sidebar: props.sidebar });
 }
 function App(props) {
   const identity = props.identity || GUEST_CHAT_IDENTITY;