@agents24/chat-react 0.4.0 → 0.5.1

package/dist/scaffold/index.cjs

@@ -0,0 +1,2270 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// scaffold/src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Agents24ChatScaffold: () => Agents24ChatScaffold,
+  Agents24ChatScaffoldApp: () => App,
+  Agents24ChatThemeProvider: () => ThemeProvider,
+  Agents24ChatTooltipProvider: () => TooltipProvider
+});
+module.exports = __toCommonJS(src_exports);
+
+// scaffold/src/app.tsx
+var import_runtime3 = require("@agents24/chat-react/runtime");
+var import_react3 = require("@agents24/react");
+
+// scaffold/src/components/chat/chat-shell.tsx
+var import_runtime2 = require("@agents24/chat-react/runtime");
+var import_lucide_react12 = require("lucide-react");
+
+// scaffold/src/components/chat/chat-composer.tsx
+var import_lucide_react2 = 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");
+
+// scaffold/src/components/ui/button.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+
+// scaffold/src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent dark:hover:bg-input/30",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui.Slot.Root : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// scaffold/src/components/ui/select.tsx
+var import_lucide_react = require("lucide-react");
+var import_radix_ui2 = require("radix-ui");
+
+// scaffold/src/components/theme-provider.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ThemeContext = React.createContext(null);
+var storageKey = "agents24-chat-appearance";
+function storedAppearance() {
+  try {
+    const stored = window.localStorage.getItem(storageKey);
+    return stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
+  } catch {
+    return "system";
+  }
+}
+function ThemeProvider({
+  children,
+  controller,
+  theme = "soft"
+}) {
+  const [internalAppearance, setInternalAppearance] = React.useState("system");
+  const [resolvedAppearance, setResolvedAppearance] = React.useState("light");
+  const [mounted, setMounted] = React.useState(false);
+  const [portalContainer, setPortalContainer] = React.useState(null);
+  const appearance = controller?.appearance ?? internalAppearance;
+  React.useEffect(() => {
+    if (!controller) setInternalAppearance(storedAppearance());
+    setMounted(true);
+  }, [controller]);
+  React.useEffect(() => {
+    if (!mounted || typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => setResolvedAppearance(
+      appearance === "system" ? media.matches ? "dark" : "light" : appearance
+    );
+    apply();
+    media.addEventListener("change", apply);
+    return () => media.removeEventListener("change", apply);
+  }, [appearance, mounted]);
+  const change = React.useCallback((next) => {
+    if (controller) {
+      controller.setAppearance(next);
+      return;
+    }
+    try {
+      window.localStorage.setItem(storageKey, next);
+    } catch {
+    }
+    setInternalAppearance(next);
+  }, [controller]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value: { appearance, portalContainer, setAppearance: change }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: setPortalContainer,
+      className: `${resolvedAppearance} size-full`,
+      "data-agents24-theme": theme,
+      "data-agents24-theme-root": "",
+      children
+    }
+  ) });
+}
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) throw new Error("useTheme must be used inside ThemeProvider");
+  return context;
+}
+function useThemePortalContainer() {
+  return useTheme().portalContainer;
+}
+
+// scaffold/src/components/ui/select.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Select(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.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 });
+}
+function SelectTrigger({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_radix_ui2.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",
+        className
+      ),
+      "data-slot": "select-trigger",
+      ...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" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  align = "start",
+  children,
+  className,
+  sideOffset = 4,
+  ...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,
+    {
+      align,
+      className: cn(
+        "z-50 max-h-64 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-xl border border-border/50 bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:animate-in data-[side=bottom]:fade-in-0 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:animate-in data-[side=top]:fade-in-0 data-[side=top]:slide-in-from-bottom-1",
+        className
+      ),
+      "data-slot": "select-content",
+      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 })
+    }
+  ) });
+}
+function SelectItem({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_radix_ui2.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",
+        className
+      ),
+      "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" }) }) })
+      ]
+    }
+  );
+}
+
+// scaffold/src/components/ui/textarea.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-2xl border border-transparent bg-input/50 px-3 py-3 text-base transition-[color,box-shadow,background-color] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// scaffold/src/components/ui/tooltip.tsx
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function TooltipProvider({ children }) {
+  return children;
+}
+function Tooltip({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      "data-slot": "tooltip",
+      className: cn("group/tooltip relative inline-flex", className),
+      ...props
+    }
+  );
+}
+function TooltipTrigger({
+  asChild: _asChild,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui3.Slot.Root, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  align: _align,
+  side = "top",
+  sideOffset: _sideOffset,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      role: "tooltip",
+      "data-side": side,
+      "data-slot": "tooltip-content",
+      className: cn(
+        "pointer-events-none absolute z-50 hidden w-max max-w-xs items-center gap-1.5 rounded-xl bg-foreground px-3 py-1.5 text-xs text-background group-hover/tooltip:inline-flex group-focus-within/tooltip:inline-flex",
+        "data-[side=top]:bottom-full data-[side=top]:left-1/2 data-[side=top]:mb-2 data-[side=top]:-translate-x-1/2",
+        "data-[side=bottom]:top-full data-[side=bottom]:left-1/2 data-[side=bottom]:mt-2 data-[side=bottom]:-translate-x-1/2",
+        "data-[side=left]:end-full data-[side=left]:top-1/2 data-[side=left]:me-2 data-[side=left]:-translate-y-1/2",
+        "data-[side=right]:start-full data-[side=right]:top-1/2 data-[side=right]:ms-2 data-[side=right]:-translate-y-1/2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// scaffold/src/components/chat/chat-composer.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ChatComposer({
+  inputContract,
+  disabled,
+  contextWindow,
+  forceExpanded = false,
+  isCancelling = false,
+  isRunning,
+  modelId,
+  models,
+  onModelChange,
+  onStop,
+  onSubmit,
+  utilityRow = "inline"
+}) {
+  const [text, setText] = React2.useState("");
+  const [files, setFiles] = React2.useState([]);
+  const [attachmentError, setAttachmentError] = React2.useState(null);
+  const inputRef = React2.useRef(null);
+  const textareaRef = React2.useRef(null);
+  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;
+  const addRecording = React2.useCallback((file) => {
+    draftRevisionRef.current += 1;
+    setFiles((current) => [...current, 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 }))
+  );
+  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 hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0;
+  const showUtilityRow = utilityRow === "below";
+  const submit = async () => {
+    if (disabled || isRunning || submittingRef.current || validationError) return;
+    const value = text;
+    const selectedFiles = files;
+    const clearedRevision = draftRevisionRef.current + 1;
+    draftRevisionRef.current = clearedRevision;
+    submittingRef.current = true;
+    setText("");
+    setFiles([]);
+    textareaRef.current?.focus();
+    try {
+      await onSubmit(value, selectedFiles);
+    } catch {
+      if (draftRevisionRef.current === clearedRevision) {
+        draftRevisionRef.current += 1;
+        setText(value);
+        setFiles(selectedFiles);
+      }
+    } finally {
+      submittingRef.current = false;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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)(
+          "div",
+          {
+            "data-expanded": isExpanded || void 0,
+            className: cn(
+              "agents24-composer-grid grid min-w-0 items-center gap-2 rounded-xl border bg-background shadow-sm",
+              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)(
+                  "input",
+                  {
+                    ref: inputRef,
+                    className: "sr-only",
+                    type: "file",
+                    multiple: true,
+                    accept: attachmentMimeTypes.join(","),
+                    onChange: (event) => {
+                      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]);
+                      setAttachmentError(
+                        accepted.length === selected.length ? null : "One or more selected file types are not supported by this Agent."
+                      );
+                      event.currentTarget.value = "";
+                    }
+                  }
+                ),
+                /* @__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)(
+                Textarea,
+                {
+                  ref: textareaRef,
+                  value: text,
+                  rows: 1,
+                  placeholder: "Message the agent",
+                  "aria-label": "Message",
+                  disabled,
+                  className: cn(
+                    "agents24-composer-textarea max-h-56 min-h-9 field-sizing-content resize-none overflow-y-auto border-0 bg-transparent px-2 shadow-none focus-visible:ring-0 dark:bg-transparent",
+                    isExpanded ? "py-2" : "h-9 py-2"
+                  ),
+                  onChange: (event) => {
+                    draftRevisionRef.current += 1;
+                    setText(event.target.value);
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                      event.preventDefault();
+                      void submit();
+                    }
+                  }
+                }
+              ),
+              /* @__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)(
+                  Button,
+                  {
+                    variant: recorder.isRecording ? "default" : "ghost",
+                    size: "icon",
+                    "aria-label": recorder.isRecording ? "Stop recording" : "Record audio",
+                    disabled: disabled || isRunning,
+                    onClick: () => {
+                      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, {})
+                  }
+                ) : null,
+                isRunning ? /* @__PURE__ */ (0, import_jsx_runtime6.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" })
+                  }
+                ) : 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, {}) })
+              ] })
+            ]
+          }
+        ),
+        showUtilityRow ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            "aria-hidden": !modelSelector && !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 })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// scaffold/src/components/chat/chat-message.tsx
+var import_ui3 = require("@agents24/chat-react/ui");
+
+// scaffold/src/components/chat/message-parts.tsx
+var import_ui2 = require("@agents24/chat-react/ui");
+
+// scaffold/src/components/chat/collapsible-user-message.tsx
+var import_lucide_react3 = require("lucide-react");
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = 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)(
+      "div",
+      {
+        id: contentId,
+        className: `max-w-none min-w-0 text-[15px] leading-7 whitespace-pre-wrap wrap-break-word ${collapsible && !expanded ? "agents24-user-message-collapsed" : ""}`,
+        children: content
+      }
+    ),
+    collapsible && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        type: "button",
+        "aria-controls": contentId,
+        "aria-expanded": expanded,
+        className: "h-auto w-fit px-0 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground",
+        onClick: () => setExpanded((value) => !value),
+        children: [
+          expanded ? "Show less" : "Show more",
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, {})
+        ]
+      }
+    )
+  ] });
+}
+
+// scaffold/src/components/chat/external-link-dialog.tsx
+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");
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.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 });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_radix_ui4.Dialog.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 isolate z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  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,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-popover p-6 text-sm text-popover-foreground shadow-xl ring-1 ring-foreground/5 duration-100 outline-none sm:max-w-md 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,
+        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)(
+            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_runtime8.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-1.5", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...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" }) })
+      ]
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_radix_ui4.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_radix_ui4.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// scaffold/src/components/chat/external-link-dialog.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }) {
+  const [copied, setCopied] = React4.useState(false);
+  React4.useEffect(() => {
+    if (!isOpen) setCopied(false);
+  }, [isOpen]);
+  const copyUrl = async () => {
+    await navigator.clipboard.writeText(url);
+    setCopied(true);
+  };
+  const openUrl = () => {
+    onConfirm();
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.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." })
+    ] }),
+    /* @__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" })
+    ] })
+  ] }) });
+}
+
+// scaffold/src/components/chat/message-parts.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var linkSafety = {
+  enabled: true,
+  renderModal: (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ExternalLinkDialog, { ...props })
+};
+function ScaffoldTimeline(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_ui2.AgentResponseTimeline,
+    {
+      ...props,
+      responseProps: {
+        className: "text-[15px] leading-7",
+        linkSafety
+      }
+    }
+  );
+}
+function MessageParts({
+  message,
+  getHitlActionState,
+  isLoading,
+  onHitlAction,
+  Timeline = ScaffoldTimeline
+}) {
+  if (message.role === "assistant") {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Timeline,
+      {
+        getHitlActionState,
+        isLoading,
+        message,
+        onHitlAction: (part, response) => {
+          void onHitlAction(part, response).catch(() => void 0);
+        },
+        parts: message.parts
+      }
+    );
+  }
+  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)(
+      import_ui2.AgentChatPart,
+      {
+        getHitlActionState,
+        message,
+        onHitlAction: (hitlPart, response) => {
+          void onHitlAction(hitlPart, response).catch(() => void 0);
+        },
+        part
+      },
+      part.id
+    )),
+    text ? /* @__PURE__ */ (0, import_jsx_runtime10.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 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",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BubbleContent({
+  asChild = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui5.Slot.Root : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Comp,
+    {
+      "data-slot": "bubble-content",
+      className: cn(
+        "w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-3.5 py-2.5 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/30",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var bubbleReactionsVariants = (0, import_class_variance_authority2.cva)(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
+    }
+  }
+);
+
+// scaffold/src/components/ui/message.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Message({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      "data-slot": "message",
+      "data-align": align,
+      className: cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      "data-slot": "message-content",
+      className: cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      "data-slot": "message-footer",
+      className: cn(
+        "flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// scaffold/src/components/chat/chat-message.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ChatMessage({
+  allowFeedback,
+  getHitlActionState,
+  isLoading,
+  message,
+  onHitlAction,
+  onRegenerate,
+  onSetFeedback,
+  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,
+      {
+        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)(
+      MessageParts,
+      {
+        getHitlActionState,
+        isLoading,
+        message,
+        onHitlAction,
+        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)(
+      import_ui3.AgentChatDefaultActions,
+      {
+        handlers: {
+          feedback: message.feedback,
+          onCopy: (content) => {
+            void navigator.clipboard.writeText(content).catch(() => void 0);
+          },
+          onRetry: () => onRegenerate(),
+          onSetFeedback: allowFeedback ? (_message, input) => onSetFeedback(input) : void 0
+        },
+        message
+      }
+    ) })
+  ] }) });
+}
+
+// scaffold/src/components/chat/theme-menu.tsx
+var import_lucide_react5 = require("lucide-react");
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = 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 }
+];
+function ThemeMenu() {
+  const { appearance, setAppearance } = useTheme();
+  const [open, setOpen] = React5.useState(false);
+  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;
+  React5.useEffect(() => {
+    if (!open) return;
+    firstItemRef.current?.focus();
+    const closeOnOutsidePointer = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", closeOnOutsidePointer);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsidePointer);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [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)(
+      Button,
+      {
+        "aria-controls": menuId,
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "aria-label": `Appearance: ${label}`,
+        onClick: () => setOpen((value) => !value),
+        size: "icon-sm",
+        variant: "ghost",
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActiveIcon, {})
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime14.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)(
+          Button,
+          {
+            ref: index === 0 ? firstItemRef : void 0,
+            "aria-current": appearance === value ? "true" : void 0,
+            className: "w-full justify-start",
+            onClick: () => {
+              setAppearance(value);
+              setOpen(false);
+            },
+            role: "menuitem",
+            size: "sm",
+            variant: "ghost",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, {}),
+              " ",
+              optionLabel
+            ]
+          },
+          value
+        ))
+      }
+    ) : null
+  ] });
+}
+
+// scaffold/src/components/chat/thread-sidebar.tsx
+var import_react = require("@agents24/react");
+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");
+var import_radix_ui9 = require("radix-ui");
+
+// scaffold/src/hooks/use-mobile.ts
+var React6 = __toESM(require("react"), 1);
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React6.useState(void 0);
+  React6.useEffect(() => {
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    if (typeof window.matchMedia !== "function") {
+      onChange();
+      window.addEventListener("resize", onChange);
+      return () => window.removeEventListener("resize", onChange);
+    }
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    mql.addEventListener("change", onChange);
+    onChange();
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+
+// scaffold/src/components/ui/input.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// scaffold/src/components/ui/separator.tsx
+var import_radix_ui7 = require("radix-ui");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// scaffold/src/components/ui/sheet.tsx
+var import_radix_ui8 = require("radix-ui");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui8.Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({
+  container,
+  ...props
+}) {
+  const themeContainer = useThemePortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui8.Dialog.Portal, { container: container || themeContainer || void 0, "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_radix_ui8.Dialog.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      import_radix_ui8.Dialog.Content,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-xl transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui8.Dialog.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            Button,
+            {
+              variant: "ghost",
+              className: "absolute top-4 right-4 bg-secondary",
+              size: "icon-sm",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  import_lucide_react7.XIcon,
+                  {}
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-6", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_radix_ui8.Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_radix_ui8.Dialog.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// scaffold/src/components/ui/skeleton.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// scaffold/src/components/ui/sidebar.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var SidebarContext = React7.createContext(null);
+function useSidebar() {
+  const context = React7.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React7.useState(false);
+  const [_open, _setOpen] = React7.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React7.useCallback(
+    (value) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = React7.useCallback(() => {
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [isMobile, setOpen, setOpenMobile]);
+  React7.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React7.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      className: cn(
+        "group/sidebar-wrapper flex min-h-svh w-full [--sidebar-width:16rem] [--sidebar-width-icon:3rem] has-data-[variant=inset]:bg-sidebar",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        "data-slot": "sidebar",
+        className: cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      SheetContent,
+      {
+        dir,
+        "data-sidebar": "sidebar",
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [--sidebar-width:18rem] [&>button]:hidden",
+        side,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: "group peer hidden text-sidebar-foreground md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            "data-side": side,
+            className: cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              // Adjust the padding for floating and inset variants.
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    Button,
+    {
+      "data-sidebar": "trigger",
+      "data-slot": "sidebar-trigger",
+      variant: "ghost",
+      size: "icon-sm",
+      className: cn(className),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.PanelLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "button",
+    {
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Toggle Sidebar",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle Sidebar",
+      className: cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn(
+        "flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:var(--radius-xl)] group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-0.5", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", 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",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
+      },
+      size: {
+        default: "h-9 text-sm",
+        sm: "h-8 text-xs",
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui9.Slot.Root : "button";
+  const { isMobile, state } = useSidebar();
+  const button = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      TooltipContent,
+      {
+        side: "right",
+        align: "center",
+        hidden: state !== "collapsed" || isMobile,
+        ...tooltip
+      }
+    )
+  ] });
+}
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui9.Slot.Root : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-action",
+      "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// scaffold/src/components/chat/identity-control.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function identityLabel(identity) {
+  if (identity.displayName) return identity.displayName;
+  if (identity.state === "authenticated") return "Signed in";
+  if (identity.state === "loading") return "Loading identity";
+  if (identity.state === "error") return "Identity unavailable";
+  if (identity.state === "signed_out") return "Sign in";
+  return "Guest";
+}
+function IdentityAvatar({ identity }) {
+  const label = identityLabel(identity);
+  if (identity.avatarUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { alt: "", className: "size-6 rounded-full object-cover", src: identity.avatarUrl });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex size-6 items-center justify-center rounded-full bg-sidebar-accent text-[10px] font-semibold", "aria-hidden": "true", children: identity.displayName ? identity.displayName.slice(0, 1).toUpperCase() : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.UserRound, { className: "size-3.5" }) });
+}
+function IdentityControl({ identity }) {
+  const label = identityLabel(identity);
+  const canSignOut = identity.state === "authenticated" && Boolean(identity.onSignOut);
+  const canSignIn = (identity.state === "guest" || identity.state === "signed_out" || identity.state === "error") && Boolean(identity.onSignIn);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SidebarMenu, { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SidebarMenuItem, { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      SidebarMenuButton,
+      {
+        size: "lg",
+        "aria-label": `Account: ${label}`,
+        className: "w-full min-w-0 justify-start",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IdentityAvatar, { identity }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "min-w-0 flex-1 overflow-hidden text-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "block truncate text-sm font-medium", children: label }),
+            identity.secondaryText ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: identity.secondaryText }) : null
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuContent, { align: "start", side: "top", sideOffset: 8, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuLabel, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "block truncate", children: label }),
+        identity.secondaryText ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "mt-0.5 block truncate text-xs font-normal text-muted-foreground", children: identity.secondaryText }) : null
+      ] }),
+      canSignIn || canSignOut ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuSeparator, {}) : null,
+      canSignIn ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuItem, { onSelect: () => identity.onSignIn?.(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.LogIn, {}),
+        "Sign in"
+      ] }) : null,
+      canSignOut ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuItem, { onSelect: () => identity.onSignOut?.(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.LogOut, {}),
+        "Sign out"
+      ] }) : null
+    ] })
+  ] }) }) });
+}
+
+// scaffold/src/components/chat/thread-sidebar.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function ThreadStatus({ thread }) {
+  const activity = (0, import_react.getThreadActivity)(thread);
+  if (!activity.isSpinning) return null;
+  const label = activity.status === "cancelling" ? "Cancelling" : activity.status === "queued" ? "Queued" : "Running";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "span",
+    {
+      className: "pointer-events-none absolute end-1 top-1/2 hidden size-5 -translate-y-1/2 items-center justify-center text-muted-foreground transition-opacity group-hover/menu-item:opacity-0 md:flex",
+      role: "status",
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.LoaderCircle, { className: "size-3.5 animate-spin" })
+    }
+  );
+}
+function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoadingMore, onDelete, onLoadMore, onNew, onOpen, threads }) {
+  const { setOpenMobile } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    Sidebar,
+    {
+      "aria-label": "Conversations",
+      collapsible: "offcanvas",
+      "data-agents24-chat-sidebar": "",
+      role: "navigation",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidebarHeader, { className: "gap-1 p-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-8 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Button, { className: "w-full justify-start", variant: "ghost", onClick: () => {
+            onNew();
+            setOpenMobile(false);
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.SquarePen, {}),
+            " New chat"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidebarGroupContent, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarMenu, { children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidebarMenuItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              SidebarMenuButton,
+              {
+                className: "pr-8 pl-3",
+                isActive: thread.id === activeThreadId,
+                title: String(thread.title || "New conversation"),
+                onClick: () => {
+                  void onOpen(thread.id).catch(() => void 0);
+                  setOpenMobile(false);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 truncate", children: String(thread.title || "New conversation") })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ThreadStatus, { thread }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              SidebarMenuAction,
+              {
+                showOnHover: true,
+                className: "group-focus-within/menu-item:opacity-0 group-hover/menu-item:opacity-100",
+                "aria-label": `Delete ${String(thread.title || "conversation")}`,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  if (window.confirm("Delete this conversation?")) void onDelete(thread.id).catch(() => void 0);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Trash2, {})
+              }
+            )
+          ] }, thread.id)) }),
+          !isLoading && threads.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "px-2 py-8 text-center text-xs text-muted-foreground", children: "No conversations" }),
+          hasMore && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            Button,
+            {
+              className: "mt-2 w-full",
+              disabled: isLoadingMore,
+              size: "sm",
+              variant: "ghost",
+              onClick: () => void onLoadMore().catch(() => void 0),
+              children: [
+                isLoadingMore && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.LoaderCircle, { className: "animate-spin" }),
+                "Load more"
+              ]
+            }
+          )
+        ] }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarFooter, { className: "w-full min-w-0 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IdentityControl, { identity }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarRail, {})
+      ]
+    }
+  );
+}
+
+// scaffold/src/components/chat/turn-outline.tsx
+var import_react2 = require("react");
+
+// scaffold/src/components/ui/message-scroller.tsx
+var import_message_scroller = require("@shadcn/react/message-scroller");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function MessageScrollerProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_message_scroller.MessageScroller.Provider, { ...props });
+}
+function MessageScroller({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_message_scroller.MessageScroller.Root,
+    {
+      "data-slot": "message-scroller",
+      className: cn(
+        "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerViewport({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_message_scroller.MessageScroller.Viewport,
+    {
+      "data-slot": "message-scroller-viewport",
+      className: cn(
+        "size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_message_scroller.MessageScroller.Content,
+    {
+      "data-slot": "message-scroller-content",
+      className: cn("flex h-max min-h-full flex-col gap-8", className),
+      ...props
+    }
+  );
+}
+function MessageScrollerItem({
+  className,
+  scrollAnchor = false,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_message_scroller.MessageScroller.Item,
+    {
+      "data-slot": "message-scroller-item",
+      scrollAnchor,
+      className: cn(
+        "min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerButton({
+  direction = "end",
+  className,
+  children,
+  render,
+  variant = "secondary",
+  size = "icon-sm",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_message_scroller.MessageScroller.Button,
+    {
+      "data-slot": "message-scroller-button",
+      "data-direction": direction,
+      "data-variant": variant,
+      "data-size": size,
+      direction,
+      className: cn(
+        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+        className
+      ),
+      render: render ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { variant, size }),
+      ...props,
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_lucide_react11.ArrowDownIcon,
+          {}
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
+      ] })
+    }
+  );
+}
+
+// scaffold/src/components/chat/turn-outline.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function turnsFromMessages(messages) {
+  return messages.reduce((turns, message) => {
+    if (message.role === "user") {
+      turns.push({ id: message.id, label: message.content.trim() || `Turn ${turns.length + 1}`, messageIds: [message.id], response: "" });
+    } else if (turns.length) {
+      const turn = turns[turns.length - 1];
+      turn.messageIds.push(message.id);
+      if (!turn.response) turn.response = message.content.trim();
+    }
+    return turns;
+  }, []);
+}
+function TurnOutline({ messages }) {
+  const turns = turnsFromMessages(messages);
+  const { scrollToMessage } = (0, import_message_scroller.useMessageScroller)();
+  const { currentAnchorId, visibleMessageIds } = (0, import_message_scroller.useMessageScrollerVisibility)();
+  const visible = new Set(visibleMessageIds);
+  const [hoveredIndex, setHoveredIndex] = (0, import_react2.useState)(null);
+  const focusIndex = hoveredIndex ?? -1;
+  if (turns.length < 2) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { "aria-label": "Transcript outline", className: "pointer-events-none absolute end-2 top-1/2 z-20 hidden max-h-72 w-14 -translate-y-1/2 md:block xl:end-5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pointer-events-auto flex flex-col items-end gap-0.5 py-2", children: turns.map((turn, index) => {
+    const active = turn.messageIds.some((id) => visible.has(id) || currentAnchorId === id);
+    const distance = focusIndex >= 0 ? Math.abs(index - focusIndex) : Number.POSITIVE_INFINITY;
+    const barWidth = focusIndex < 0 ? 12 : distance === 0 ? 50 : distance === 1 ? 36 : distance === 2 ? 23 : 10;
+    const barOpacity = focusIndex < 0 ? active ? 1 : 0.4 : distance === 0 ? 1 : distance === 1 ? 0.78 : distance === 2 ? 0.58 : 0.36;
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Jump to ${turn.label}`,
+          className: "group relative flex h-2 w-14 items-center justify-end outline-none after:pointer-events-auto after:absolute after:-inset-y-0.5 after:inset-x-0 after:content-['']",
+          onBlur: () => setHoveredIndex(null),
+          onFocus: () => setHoveredIndex(index),
+          onMouseEnter: () => setHoveredIndex(index),
+          onMouseLeave: () => setHoveredIndex(null),
+          onClick: () => scrollToMessage(turn.id, { align: "start", behavior: "smooth" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "span",
+            {
+              className: cn("h-0.5 rounded-full bg-muted-foreground/40 transition-[width,background-color,opacity] duration-150 ease-out group-hover:bg-foreground group-focus-visible:bg-foreground", active && "bg-foreground"),
+              style: { opacity: barOpacity, width: barWidth }
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(TooltipContent, { side: "left", className: "w-64 flex-col items-stretch gap-0 overflow-hidden p-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "line-clamp-2 max-w-full wrap-break-word text-sm font-medium", children: turn.label }),
+        turn.response && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "mt-1 line-clamp-2 max-w-full wrap-break-word text-xs opacity-70", children: turn.response })
+      ] })
+    ] }, turn.id);
+  }) }) });
+}
+
+// scaffold/src/components/chat/timeline-loading.ts
+function isScaffoldTimelineLoading({
+  activeRunId,
+  message,
+  runState,
+  streamingMessageId
+}) {
+  if (runState !== "streaming" && runState !== "reconnecting") return false;
+  return message.id === streamingMessageId || Boolean(message.runId && message.runId === activeRunId);
+}
+
+// scaffold/src/components/chat/chat-shell.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var LOADING_INPUT_CONTRACT = {
+  version: "agents24.runtime-inputs.v2",
+  modalities: {
+    text: { enabled: false, required: false },
+    files: { enabled: false, required: false, allowed_mime_types: [] },
+    images: { enabled: false, required: false, allowed_mime_types: [] },
+    audio: { enabled: false, required: false, allowed_mime_types: [], recording_enabled: false }
+  },
+  limits: { max_attachments_per_turn: 0, max_file_bytes: 0, max_total_bytes: 0 },
+  retention: { mode: "thread_lifetime" }
+};
+function PersistentSidebarTrigger() {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none fixed start-3 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SidebarTrigger, { className: "pointer-events-auto [&_svg]:size-[18px]" }) });
+}
+function CollapsedHeaderActions({ onNew }) {
+  const { isMobile, openMobile, state } = useSidebar();
+  const sidebarVisible = isMobile ? openMobile : state === "expanded";
+  if (sidebarVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-8 w-17 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none fixed start-12 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { className: "pointer-events-auto", variant: "ghost", size: "icon-sm", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.SquarePen, {}) }) })
+  ] });
+}
+function OperationErrorNotice({ runtime }) {
+  const error = runtime.operationError || runtime.backgroundError;
+  if (!error) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pointer-events-auto flex max-w-lg items-start gap-2 rounded-lg border border-destructive/20 bg-background px-3 py-2 text-sm shadow-md", role: "alert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.CircleAlert, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "min-w-0 flex-1 wrap-break-word", children: (0, import_runtime2.agentChatRuntimeErrorMessage)(error) || "The chat could not complete that action." }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      Button,
+      {
+        "aria-label": "Dismiss error",
+        onClick: runtime.operationError ? runtime.clearOperationError : runtime.controller.clearBackgroundError,
+        size: "icon-xs",
+        variant: "ghost",
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.X, {})
+      }
+    )
+  ] }) });
+}
+function ChatShell({
+  components,
+  identity,
+  runtime
+}) {
+  const { controller } = runtime;
+  const isRunning = controller.runState === "streaming" || controller.runState === "reconnecting" || controller.runState === "paused" || controller.runState === "cancelling" || runtime.isSubmitting;
+  const isCancelling = controller.runState === "cancelling";
+  const activeTitle = controller.threads.find((thread) => thread.id === controller.activeThreadId)?.title;
+  const hasBlockingError = Boolean(runtime.fatalError && controller.messages.length === 0);
+  const isEmptyState = controller.activeThreadId === null && controller.messages.length === 0 && !hasBlockingError;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    SidebarProvider,
+    {
+      className: "h-svh min-h-0 overflow-hidden",
+      "data-agents24-chat": "",
+      "data-agents24-chat-layout": "",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PersistentSidebarTrigger, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          ThreadSidebar,
+          {
+            activeThreadId: controller.activeThreadId,
+            hasMore: controller.hasMoreThreads,
+            identity,
+            isLoading: controller.isLoadingThreads,
+            isLoadingMore: controller.isLoadingMoreThreads,
+            threads: controller.threads,
+            onDelete: runtime.deleteThread,
+            onLoadMore: controller.loadMoreThreads,
+            onNew: runtime.newThread,
+            onOpen: runtime.openThread
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(SidebarInset, { className: "h-svh min-h-0 overflow-hidden bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            "header",
+            {
+              className: "flex h-12 shrink-0 items-center gap-2 border-b border-border/30 px-3 sm:px-4",
+              "data-agents24-chat-header": "",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CollapsedHeaderActions, { onNew: runtime.newThread }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: "truncate text-sm font-medium", children: String(activeTitle || "New chat") }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ThemeMenu, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            "section",
+            {
+              "aria-label": "Conversation",
+              className: "relative flex min-h-0 flex-1 flex-col overflow-hidden",
+              "data-agents24-chat-transcript": "",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OperationErrorNotice, { runtime }),
+                isEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "absolute inset-0 flex min-h-0 flex-col justify-center pb-20", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mx-auto mb-8 w-full max-w-3xl px-4 text-center sm:px-6", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "text-3xl font-semibold tracking-tight sm:text-4xl", children: "Ready when you are." }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    ChatComposer,
+                    {
+                      inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
+                      contextWindow: runtime.contextWindow,
+                      disabled: runtime.isBootstrapping,
+                      forceExpanded: true,
+                      isCancelling,
+                      isRunning,
+                      onStop: () => {
+                        void controller.cancelRun().catch(() => void 0);
+                      },
+                      modelId: runtime.modelId,
+                      models: runtime.models,
+                      onModelChange: runtime.changeModel,
+                      onSubmit: (text, files) => runtime.submit({
+                        text,
+                        files: files.map((file) => ({
+                          data: file,
+                          mediaType: file.type || "application/octet-stream",
+                          name: file.name
+                        }))
+                      })
+                    }
+                  )
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    MessageScrollerProvider,
+                    {
+                      autoScroll: true,
+                      defaultScrollPosition: "last-anchor",
+                      scrollPreviousItemPeek: 64,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MessageScroller, { className: "relative min-h-0 flex-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageScrollerViewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                          MessageScrollerContent,
+                          {
+                            className: "mx-auto w-full max-w-3xl gap-7 px-4 pt-8 pb-16 sm:px-6 sm:pt-12",
+                            children: [
+                              controller.hasOlderTurns && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
+                                void controller.loadOlder().catch(() => void 0);
+                              }, children: [
+                                controller.isLoadingOlder && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.LoaderCircle, { className: "animate-spin" }),
+                                " Load earlier messages"
+                              ] }),
+                              runtime.isBootstrapping && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "aria-label": "Loading conversation", className: "flex flex-1 items-center justify-center py-24 text-muted-foreground", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.LoaderCircle, { className: "size-4 animate-spin" }) }),
+                              hasBlockingError && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.CircleAlert, { className: "size-5 text-destructive" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "font-medium", children: "Couldn\u2019t connect" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: runtime.errorMessage })
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { variant: "outline", onClick: () => void runtime.retryBootstrap(), children: "Try again" })
+                              ] }),
+                              controller.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                                MessageScrollerItem,
+                                {
+                                  messageId: message.id,
+                                  scrollAnchor: message.role === "user",
+                                  className: "overflow-visible [content-visibility:visible]",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                                    ChatMessage,
+                                    {
+                                      allowFeedback: runtime.allowFeedback,
+                                      getHitlActionState: runtime.getHitlActionState,
+                                      isLoading: isScaffoldTimelineLoading({
+                                        activeRunId: controller.activeRunId,
+                                        message,
+                                        runState: controller.runState,
+                                        streamingMessageId: controller.streamingMessageId
+                                      }),
+                                      message,
+                                      onHitlAction: runtime.onHitlAction,
+                                      onRegenerate: () => controller.regenerate(message),
+                                      onSetFeedback: (input) => controller.setFeedback(message, input),
+                                      Timeline: components?.Timeline
+                                    }
+                                  )
+                                },
+                                message.id
+                              ))
+                            ]
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TurnOutline, { messages: controller.messages }),
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageScrollerButton, {})
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "relative z-30 shrink-0 bg-background pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    ChatComposer,
+                    {
+                      inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
+                      contextWindow: runtime.contextWindow,
+                      disabled: runtime.isBootstrapping || hasBlockingError,
+                      isCancelling,
+                      isRunning,
+                      onStop: () => {
+                        void controller.cancelRun().catch(() => void 0);
+                      },
+                      modelId: runtime.modelId,
+                      models: runtime.models,
+                      onModelChange: runtime.changeModel,
+                      onSubmit: (text, files) => runtime.submit({
+                        text,
+                        files: files.map((file) => ({
+                          data: file,
+                          mediaType: file.type || "application/octet-stream",
+                          name: file.name
+                        }))
+                      }),
+                      utilityRow: "below"
+                    }
+                  ) })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// scaffold/src/identity.ts
+var GUEST_CHAT_IDENTITY = { state: "guest" };
+
+// scaffold/src/app.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var createBrowserAbortController = () => new AbortController();
+function RuntimeChat({
+  components,
+  identity = GUEST_CHAT_IDENTITY,
+  ...props
+}) {
+  const runtime = (0, import_runtime3.useAgentChatRuntime)({
+    ...props,
+    mcpRedirectUri: props.mcpRedirectUri || (typeof window === "undefined" ? void 0 : window.location.href)
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChatShell, { components, identity, runtime });
+}
+function App(props) {
+  const identity = props.identity || GUEST_CHAT_IDENTITY;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react3.Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RuntimeChat, { ...props }, identity.state) });
+}
+
+// scaffold/src/index.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Agents24ChatScaffold({ appearanceController, theme, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ThemeProvider, { controller: appearanceController, theme, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(App, { ...props }) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Agents24ChatScaffold,
+  Agents24ChatScaffoldApp,
+  Agents24ChatThemeProvider,
+  Agents24ChatTooltipProvider
+});
+//# sourceMappingURL=index.cjs.map