@agents24/chat-react 0.5.4 → 0.5.6

package/dist/scaffold/index.cjs

@@ -46,7 +46,7 @@ var import_runtime2 = require("@agents24/chat-react/runtime");
 var import_lucide_react12 = require("lucide-react");
 
 // scaffold/src/components/chat/chat-composer.tsx
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 var React2 = __toESM(require("react"), 1);
 var import_ui = require("@agents24/chat-react/ui");
 var import_runtime = require("@agents24/chat-react/runtime");
@@ -65,7 +65,7 @@ function cn(...inputs) {
 // scaffold/src/components/ui/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.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: {
@@ -113,9 +113,9 @@ function Button({
   );
 }
 
-// scaffold/src/components/ui/select.tsx
-var import_lucide_react = require("lucide-react");
+// scaffold/src/components/ui/dropdown-menu.tsx
 var import_radix_ui2 = require("radix-ui");
+var import_lucide_react = require("lucide-react");
 
 // scaffold/src/components/theme-provider.tsx
 var React = __toESM(require("react"), 1);
@@ -185,21 +185,196 @@ function useThemePortalContainer() {
   return useTheme().portalContainer;
 }
 
-// scaffold/src/components/ui/select.tsx
+// scaffold/src/components/ui/dropdown-menu.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_radix_ui2.DropdownMenu.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  const themeContainer = useThemePortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.DropdownMenu.Portal, { container: themeContainer || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_radix_ui2.DropdownMenu.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__ */ (0, import_jsx_runtime3.jsx)(
+    import_radix_ui2.DropdownMenu.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__ */ (0, import_jsx_runtime3.jsx)(
+    import_radix_ui2.DropdownMenu.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_radix_ui2.DropdownMenu.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__ */ (0, import_jsx_runtime3.jsx)(
+          "span",
+          {
+            className: "pointer-events-none absolute right-2 flex items-center justify-center",
+            "data-slot": "dropdown-menu-radio-item-indicator",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_lucide_react.CheckIcon,
+              {}
+            ) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_radix_ui2.DropdownMenu.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__ */ (0, import_jsx_runtime3.jsx)(
+    import_radix_ui2.DropdownMenu.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__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.DropdownMenu.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_radix_ui2.DropdownMenu.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__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronRightIcon, { className: "ml-auto" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_radix_ui2.DropdownMenu.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
+var import_lucide_react2 = require("lucide-react");
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Select(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Select.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui3.Select.Root, { "data-slot": "select", ...props });
 }
 function SelectValue(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Select.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui3.Select.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   children,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_radix_ui2.Select.Trigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_radix_ui3.Select.Trigger,
     {
       className: cn(
         "flex h-8 w-full items-center justify-between gap-2 rounded-lg bg-transparent px-2.5 text-xs text-foreground outline-none transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:truncate",
@@ -209,7 +384,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronDownIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui3.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ChevronDownIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }) })
       ]
     }
   );
@@ -222,8 +397,8 @@ function SelectContent({
   ...props
 }) {
   const container = useThemePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Select.Portal, { container: container || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_radix_ui2.Select.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui3.Select.Portal, { container: container || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui3.Select.Content,
     {
       align,
       className: cn(
@@ -234,7 +409,7 @@ function SelectContent({
       position: "popper",
       sideOffset,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Select.Viewport, { className: "max-h-60 overflow-y-auto p-0.5", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui3.Select.Viewport, { className: "max-h-60 overflow-y-auto p-0.5", children })
     }
   ) });
 }
@@ -243,8 +418,8 @@ function SelectItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_radix_ui2.Select.Item,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_radix_ui3.Select.Item,
     {
       className: cn(
         "relative flex cursor-default select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -253,17 +428,17 @@ function SelectItem({
       "data-slot": "select-item",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Select.ItemText, { className: "min-w-0 truncate", children }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.CheckIcon, { className: "size-3.5" }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui3.Select.ItemText, { className: "min-w-0 truncate", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui3.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5" }) }) })
       ]
     }
   );
 }
 
 // scaffold/src/components/ui/textarea.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "textarea",
     {
       "data-slot": "textarea",
@@ -277,13 +452,13 @@ function Textarea({ className, ...props }) {
 }
 
 // scaffold/src/components/ui/tooltip.tsx
-var import_radix_ui3 = require("radix-ui");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_radix_ui4 = require("radix-ui");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function TooltipProvider({ children }) {
   return children;
 }
 function Tooltip({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "span",
     {
       "data-slot": "tooltip",
@@ -296,7 +471,7 @@ function TooltipTrigger({
   asChild: _asChild,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui3.Slot.Root, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui4.Slot.Root, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -305,7 +480,7 @@ function TooltipContent({
   sideOffset: _sideOffset,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "span",
     {
       role: "tooltip",
@@ -325,17 +500,21 @@ function TooltipContent({
 }
 
 // scaffold/src/components/chat/chat-composer.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ChatComposer({
   inputContract,
   disabled,
   contextWindow,
+  focusKey,
   forceExpanded = false,
   isCancelling = false,
   isRunning,
+  agentId,
+  agents,
   modelId,
   models,
   onModelChange,
+  onAgentChange,
   onStop,
   onSubmit,
   utilityRow = "inline"
@@ -345,34 +524,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 = (0, import_runtime.inputMimeTypes)(inputContract);
   const allowAttachments = attachmentMimeTypes.length > 0;
   const recordingAllowed = inputContract.modalities.audio.recording_enabled;
+  React2.useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+  React2.useEffect(() => () => {
+    (0, import_ui.revokeAgentChatComposerFiles)(filesRef.current);
+    (0, import_ui.revokeAgentChatComposerFiles)(inFlightFilesRef.current);
+  }, []);
+  React2.useEffect(() => {
+    if (disabled || isRunning) return;
+    const frame = window.requestAnimationFrame(() => textareaRef.current?.focus({ preventScroll: true }));
+    return () => window.cancelAnimationFrame(frame);
+  }, [disabled, focusKey, isRunning]);
   const addRecording = React2.useCallback((file) => {
     draftRevisionRef.current += 1;
-    setFiles((current) => [...current, file]);
+    setFiles((current) => [...current, (0, import_ui.createAgentChatComposerFile)(file)]);
   }, []);
   const recorder = (0, import_ui.useAudioRecorder)(addRecording);
   const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
   const validationError = (0, import_runtime.validateAgentChatSubmission)(
     inputContract,
     text,
-    files.map((file) => ({ data: file, mediaType: file.type }))
+    files.map((file) => ({ data: file.source, mediaType: file.mediaType }))
   );
-  const modelSelector = models.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-fit max-w-40", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    Select,
-    {
-      disabled: disabled || isRunning,
-      onValueChange: onModelChange,
-      value: modelId || void 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectTrigger, { "aria-label": "Runtime model", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectValue, { placeholder: "Model" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectContent, { align: "start", children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-fit max-w-40", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Select, { disabled: disabled || isRunning, onValueChange: onModelChange, value: modelId || void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectTrigger, { "aria-label": "Runtime model", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectValue, { placeholder: "Model" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContent, { align: "start", children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectItem, { value: model.id, children: model.label }, model.id)) })
+  ] }) }) : null;
+  const runtimeSelector = agents.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      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__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: [selectedAgent?.label, selectedModel?.label].filter(Boolean).join(" \xB7 ") || "Runtime" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ChevronDown, { className: "size-3.5 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenuContent, { align: "start", className: "w-64 rounded-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenuSub, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenuSubTrigger, { className: "rounded-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Agent" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-auto max-w-32 truncate text-muted-foreground", children: selectedAgent?.label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuSubContent, { className: "w-56 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuRadioGroup, { value: agentId || void 0, onValueChange: onAgentChange, children: agents.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuRadioItem, { className: "rounded-lg", value: agent.id, children: agent.label }, agent.id)) }) })
+      ] }),
+      models.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenuSub, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenuSubTrigger, { className: "rounded-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Model" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-auto max-w-32 truncate text-muted-foreground", children: selectedModel?.label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuSubContent, { className: "max-h-64 w-56 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuRadioGroup, { value: modelId || void 0, onValueChange: onModelChange, children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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 () => {
@@ -382,36 +600,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);
+      (0, import_ui.revokeAgentChatComposerFiles)(selectedFiles);
+      inFlightFilesRef.current = [];
     } catch {
       if (draftRevisionRef.current === clearedRevision) {
         draftRevisionRef.current += 1;
         setText(value);
         setFiles(selectedFiles);
+        inFlightFilesRef.current = [];
+      } else {
+        (0, import_ui.revokeAgentChatComposerFiles)(selectedFiles);
+        inFlightFilesRef.current = [];
       }
     } finally {
       submittingRef.current = false;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mb-2 flex min-w-0 gap-2 overflow-x-auto", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex max-w-48 items-center gap-2 border bg-card px-2 py-1 text-xs", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: file.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { variant: "ghost", size: "icon-xs", "aria-label": `Remove ${file.name}`, onClick: () => {
-            draftRevisionRef.current += 1;
-            setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index));
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.X, {}) })
-        ] }, `${file.name}-${index}`)) }),
-        attachmentError || recorder.error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mb-2 text-xs text-destructive", role: "alert", children: attachmentError || recorder.error }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        allowAttachments && files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mb-2 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_ui.ChatAttachmentRows,
+          {
+            attachments: files,
+            onRemove: (attachment) => {
+              if (!attachment.id) return;
+              draftRevisionRef.current += 1;
+              setFiles((current) => {
+                const removed = current.find((file) => file.id === attachment.id);
+                if (removed) (0, import_ui.revokeAgentChatComposerFiles)([removed]);
+                return current.filter((file) => file.id !== attachment.id);
+              });
+            }
+          }
+        ) }),
+        attachmentError || recorder.error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mb-2 text-xs text-destructive", role: "alert", children: attachmentError || recorder.error }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             "data-expanded": isExpanded || void 0,
@@ -420,8 +653,8 @@ function ChatComposer({
               isExpanded ? "p-2" : "p-1.5"
             ),
             children: [
-              allowAttachments ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              allowAttachments ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "input",
                   {
                     ref: inputRef,
@@ -433,7 +666,7 @@ function ChatComposer({
                       const selected = Array.from(event.target.files ?? []);
                       const accepted = selected.filter((file) => attachmentMimeTypes.includes((0, import_runtime.canonicalInputMimeType)(file.type)));
                       draftRevisionRef.current += 1;
-                      setFiles((current) => [...current, ...accepted]);
+                      setFiles((current) => [...current, ...accepted.map(import_ui.createAgentChatComposerFile)]);
                       setAttachmentError(
                         accepted.length === selected.length ? null : "One or more selected file types are not supported by this Agent."
                       );
@@ -441,9 +674,9 @@ function ChatComposer({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "agents24-composer-attach flex min-w-0 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(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__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": true, children: "+" }) }) })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", className: "agents24-composer-attach" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "agents24-composer-attach flex min-w-0 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, children: "+" }) }) })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "agents24-composer-attach" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 Textarea,
                 {
                   ref: textareaRef,
@@ -468,10 +701,10 @@ function ChatComposer({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "agents24-composer-actions flex items-center gap-1", children: [
-                utilityRow === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui.AgentChatContextStatus, { contextWindow }) : null,
-                utilityRow === "inline" ? modelSelector : null,
-                recordingAllowed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "agents24-composer-actions flex items-center gap-1", children: [
+                utilityRow === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ui.AgentChatContextStatus, { contextWindow }) : null,
+                utilityRow === "inline" ? runtimeSelector : null,
+                recordingAllowed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   Button,
                   {
                     variant: recorder.isRecording ? "default" : "ghost",
@@ -482,35 +715,35 @@ function ChatComposer({
                       if (recorder.isRecording) recorder.stop();
                       else void recorder.start();
                     },
-                    children: recorder.isRecording ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Square, { className: "fill-current" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Mic, {})
+                    children: recorder.isRecording ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Square, { className: "fill-current" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Mic, {})
                   }
                 ) : null,
-                isRunning ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                isRunning ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   Button,
                   {
                     size: "icon",
                     "aria-label": isCancelling ? "Cancelling response" : "Stop response",
                     disabled: disabled || isCancelling,
                     onClick: onStop,
-                    children: isCancelling ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.LoaderCircle, { className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Square, { className: "fill-current" })
+                    children: isCancelling ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.LoaderCircle, { className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Square, { className: "fill-current" })
                   }
-                ) : validationError ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Tooltip, { tabIndex: 0, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { size: "icon", "aria-label": "Send message", disabled: true, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ArrowUp, {}) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipContent, { children: validationError })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { size: "icon", "aria-label": "Send message", disabled, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ArrowUp, {}) })
+                ) : validationError ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Tooltip, { tabIndex: 0, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { size: "icon", "aria-label": "Send message", disabled: true, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ArrowUp, {}) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipContent, { children: validationError })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { size: "icon", "aria-label": "Send message", disabled, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ArrowUp, {}) })
               ] })
             ]
           }
         ),
-        showUtilityRow ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        showUtilityRow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-w-0", children: modelSelector }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui.AgentChatContextStatus, { contextWindow })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-w-0", children: runtimeSelector }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ui.AgentChatContextStatus, { contextWindow })
             ]
           }
         ) : null
@@ -526,17 +759,17 @@ var import_ui3 = require("@agents24/chat-react/ui");
 var import_ui2 = require("@agents24/chat-react/ui");
 
 // scaffold/src/components/chat/collapsible-user-message.tsx
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("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 ? import_lucide_react3.ChevronUp : import_lucide_react3.ChevronDown;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const Icon = expanded ? import_lucide_react4.ChevronUp : import_lucide_react4.ChevronDown;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         id: contentId,
@@ -544,7 +777,7 @@ function CollapsibleUserMessage({ content }) {
         children: content
       }
     ),
-    collapsible && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    collapsible && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       Button,
       {
         variant: "ghost",
@@ -556,7 +789,7 @@ function CollapsibleUserMessage({ content }) {
         onClick: () => setExpanded((value) => !value),
         children: [
           expanded ? "Show less" : "Show more",
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, {})
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, {})
         ]
       }
     )
@@ -567,27 +800,27 @@ function CollapsibleUserMessage({ content }) {
 var React4 = __toESM(require("react"), 1);
 
 // scaffold/src/components/ui/dialog.tsx
-var import_radix_ui4 = require("radix-ui");
-var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_radix_ui5 = require("radix-ui");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Dialog.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   container,
   ...props
 }) {
   const themeContainer = useThemePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Dialog.Portal, { container: container || themeContainer || void 0, "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Dialog.Portal, { container: container || themeContainer || void 0, "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_radix_ui4.Dialog.Overlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_radix_ui5.Dialog.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -604,10 +837,10 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DialogPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      import_radix_ui4.Dialog.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      import_radix_ui5.Dialog.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -617,18 +850,18 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Dialog.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Dialog.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             Button,
             {
               variant: "ghost",
               className: "absolute top-4 right-4 bg-secondary",
               size: "icon-sm",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  import_lucide_react4.XIcon,
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_lucide_react5.XIcon,
                   {}
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           ) })
@@ -638,7 +871,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       "data-slot": "dialog-header",
@@ -653,7 +886,7 @@ function DialogFooter({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -664,7 +897,7 @@ function DialogFooter({
       ...props,
       children: [
         children,
-        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { variant: "outline", children: "Close" }) })
+        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { variant: "outline", children: "Close" }) })
       ]
     }
   );
@@ -673,8 +906,8 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_radix_ui4.Dialog.Title,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_radix_ui5.Dialog.Title,
     {
       "data-slot": "dialog-title",
       className: cn(
@@ -689,8 +922,8 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_radix_ui4.Dialog.Description,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_radix_ui5.Dialog.Description,
     {
       "data-slot": "dialog-description",
       className: cn(
@@ -703,7 +936,7 @@ function DialogDescription({
 }
 
 // scaffold/src/components/chat/external-link-dialog.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }) {
   const [copied, setCopied] = React4.useState(false);
   React4.useEffect(() => {
@@ -717,29 +950,29 @@ function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }) {
     onConfirm();
     onClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { open: isOpen, onOpenChange: (open) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dialog, { open: isOpen, onOpenChange: (open) => {
     if (!open) onClose();
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogContent, { className: "max-h-[calc(100dvh-2rem)] min-w-0 overflow-hidden sm:max-w-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogTitle, { children: "Open external link?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogDescription, { children: "You\u2019re about to visit an external website." })
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogContent, { className: "max-h-[calc(100dvh-2rem)] min-w-0 overflow-hidden sm:max-w-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogTitle, { children: "Open external link?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogDescription, { children: "You\u2019re about to visit an external website." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-h-32 overflow-auto rounded-md bg-muted p-3 font-mono text-xs wrap-break-word", children: url }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { variant: "outline", onClick: () => void copyUrl(), children: copied ? "Copied" : "Copy link" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { onClick: openUrl, children: "Open link" })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-h-32 overflow-auto rounded-md bg-muted p-3 font-mono text-xs wrap-break-word", children: url }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { variant: "outline", onClick: () => void copyUrl(), children: copied ? "Copied" : "Copy link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { onClick: openUrl, children: "Open link" })
     ] })
   ] }) });
 }
 
 // scaffold/src/components/chat/message-parts.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var linkSafety = {
   enabled: true,
-  renderModal: (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ExternalLinkDialog, { ...props })
+  renderModal: (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ExternalLinkDialog, { ...props })
 };
 function ScaffoldTimeline(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_ui2.AgentResponseTimeline,
     {
       ...props,
@@ -758,7 +991,7 @@ function MessageParts({
   Timeline = ScaffoldTimeline
 }) {
   if (message.role === "assistant") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Timeline,
       {
         getHitlActionState,
@@ -773,8 +1006,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__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    supportingParts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    supportingParts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_ui2.AgentChatPart,
       {
         getHitlActionState,
@@ -786,14 +1019,14 @@ function MessageParts({
       },
       part.id
     )),
-    text ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CollapsibleUserMessage, { content: text }) : null
+    text ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CollapsibleUserMessage, { content: text }) : null
   ] });
 }
 
 // scaffold/src/components/ui/bubble.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_radix_ui5 = require("radix-ui");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_radix_ui6 = require("radix-ui");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var bubbleVariants = (0, import_class_variance_authority2.cva)(
   "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",
   {
@@ -819,7 +1052,7 @@ function Bubble({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       "data-slot": "bubble",
@@ -835,8 +1068,8 @@ function BubbleContent({
   className,
   ...props
 }) {
-  const Comp = asChild ? import_radix_ui5.Slot.Root : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const Comp = asChild ? import_radix_ui6.Slot.Root : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Comp,
     {
       "data-slot": "bubble-content",
@@ -869,13 +1102,13 @@ var bubbleReactionsVariants = (0, import_class_variance_authority2.cva)(
 );
 
 // scaffold/src/components/ui/message.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Message({
   className,
   align = "start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       "data-slot": "message",
@@ -889,7 +1122,7 @@ function Message({
   );
 }
 function MessageContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       "data-slot": "message-content",
@@ -902,7 +1135,7 @@ function MessageContent({ className, ...props }) {
   );
 }
 function MessageFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       "data-slot": "message-footer",
@@ -916,7 +1149,7 @@ function MessageFooter({ className, ...props }) {
 }
 
 // scaffold/src/components/chat/chat-message.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ChatMessage({
   allowFeedback,
   getHitlActionState,
@@ -925,18 +1158,20 @@ function ChatMessage({
   onHitlAction,
   onRegenerate,
   onSetFeedback,
+  resolveAttachmentContent,
   Timeline
 }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(MessageContent, { children: [
-    isUser && message.attachments?.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui3.ChatAttachments, { className: "mb-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_ui3.ChatAttachment,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MessageContent, { children: [
+    isUser && message.attachments?.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_ui3.ChatAttachmentRows,
       {
-        data: attachment
-      },
-      String(attachment.id || attachment.url || attachment.filename || index)
-    )) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Bubble, { variant: isUser ? "secondary" : "ghost", align: isUser ? "end" : "start", className: isUser ? "max-w-[min(75%,42rem)]" : "max-w-full overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BubbleContent, { className: isUser ? "px-4 py-2.5" : "w-full overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        attachments: message.attachments,
+        className: "mb-2",
+        resolveContent: resolveAttachmentContent
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Bubble, { variant: isUser ? "secondary" : "ghost", align: isUser ? "end" : "start", className: isUser ? "max-w-[min(75%,42rem)]" : "max-w-full overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BubbleContent, { className: isUser ? "px-4 py-2.5" : "w-full overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       MessageParts,
       {
         getHitlActionState,
@@ -946,7 +1181,7 @@ function ChatMessage({
         Timeline
       }
     ) }) }),
-    !isUser && message.isFinal !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageFooter, { className: "gap-1 opacity-70 transition-opacity group-hover/message:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    !isUser && message.isFinal !== false && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageFooter, { className: "gap-1 opacity-70 transition-opacity group-hover/message:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_ui3.AgentChatDefaultActions,
       {
         handlers: {
@@ -964,13 +1199,13 @@ function ChatMessage({
 }
 
 // scaffold/src/components/chat/theme-menu.tsx
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var options = [
-  { value: "system", label: "System", icon: import_lucide_react5.Laptop },
-  { value: "light", label: "Light", icon: import_lucide_react5.Sun },
-  { value: "dark", label: "Dark", icon: import_lucide_react5.Moon }
+  { value: "system", label: "System", icon: import_lucide_react6.Laptop },
+  { value: "light", label: "Light", icon: import_lucide_react6.Sun },
+  { value: "dark", label: "Dark", icon: import_lucide_react6.Moon }
 ];
 function ThemeMenu() {
   const { appearance, setAppearance } = useTheme();
@@ -978,7 +1213,7 @@ function ThemeMenu() {
   const rootRef = React5.useRef(null);
   const firstItemRef = React5.useRef(null);
   const menuId = React5.useId();
-  const ActiveIcon = options.find((item) => item.value === appearance)?.icon ?? import_lucide_react5.Laptop;
+  const ActiveIcon = options.find((item) => item.value === appearance)?.icon ?? import_lucide_react6.Laptop;
   React5.useEffect(() => {
     if (!open) return;
     firstItemRef.current?.focus();
@@ -996,8 +1231,8 @@ function ThemeMenu() {
     };
   }, [open]);
   const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: rootRef, className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Button,
       {
         "aria-controls": menuId,
@@ -1007,16 +1242,16 @@ function ThemeMenu() {
         onClick: () => setOpen((value) => !value),
         size: "icon-sm",
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActiveIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ActiveIcon, {})
       }
     ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "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__ */ (0, import_jsx_runtime14.jsxs)(
+        children: options.map(({ value, label: optionLabel, icon: Icon }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           Button,
           {
             ref: index === 0 ? firstItemRef : void 0,
@@ -1030,7 +1265,7 @@ function ThemeMenu() {
             size: "sm",
             variant: "ghost",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, {}),
               " ",
               optionLabel
             ]
@@ -1049,96 +1284,6 @@ var import_lucide_react10 = require("lucide-react");
 // scaffold/src/components/chat/identity-control.tsx
 var import_lucide_react9 = require("lucide-react");
 
-// scaffold/src/components/ui/dropdown-menu.tsx
-var import_radix_ui6 = require("radix-ui");
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui6.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_radix_ui6.DropdownMenu.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...props
-    }
-  );
-}
-function DropdownMenuContent({
-  className,
-  align = "start",
-  sideOffset = 4,
-  ...props
-}) {
-  const themeContainer = useThemePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui6.DropdownMenu.Portal, { container: themeContainer || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_radix_ui6.DropdownMenu.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__ */ (0, import_jsx_runtime15.jsx)(
-    import_radix_ui6.DropdownMenu.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__ */ (0, import_jsx_runtime15.jsx)(
-    import_radix_ui6.DropdownMenu.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__ */ (0, import_jsx_runtime15.jsx)(
-    import_radix_ui6.DropdownMenu.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
 var React7 = __toESM(require("react"), 1);
 var import_class_variance_authority3 = require("class-variance-authority");
@@ -1607,7 +1752,7 @@ function SidebarMenuItem({ className, ...props }) {
   );
 }
 var sidebarMenuButtonVariants = (0, import_class_variance_authority3.cva)(
-  "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: {
@@ -1683,7 +1828,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
@@ -2056,10 +2201,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);
@@ -2072,7 +2219,7 @@ function ChatShell({
       "data-agents24-chat-layout": "",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PersistentSidebarTrigger, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        sidebar || /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           ThreadSidebar,
           {
             activeThreadId: controller.activeThreadId,
@@ -2115,10 +2262,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);
                       },
@@ -2128,10 +2281,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
                       })
                     }
                   )
@@ -2184,6 +2338,7 @@ function ChatShell({
                                       onHitlAction: runtime.onHitlAction,
                                       onRegenerate: () => controller.regenerate(message),
                                       onSetFeedback: (input) => controller.setFeedback(message, input),
+                                      resolveAttachmentContent: runtime.resolveAttachmentContent,
                                       Timeline: components?.Timeline
                                     }
                                   )
@@ -2203,9 +2358,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);
                       },
@@ -2215,10 +2376,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"
                     }
@@ -2248,7 +2410,7 @@ function RuntimeChat({
     ...props,
     mcpRedirectUri: props.mcpRedirectUri || (typeof window === "undefined" ? void 0 : window.location.href)
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChatShell, { components, identity, runtime });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChatShell, { components, identity, runtime, sidebar: props.sidebar });
 }
 function App(props) {
   const identity = props.identity || GUEST_CHAT_IDENTITY;