@agents24/chat-react 0.5.29 → 0.5.30

package/dist/runtime/input-contract.d.ts

@@ -18,4 +18,6 @@ export declare function workflowInputRule(inputs: readonly WorkflowInputRule[] |
 export declare function validateWorkflowInputSubmission(inputs: readonly WorkflowInputRule[] | null | undefined, text: string, attachmentMimeTypes: readonly string[]): string | null;
 export declare const canonicalInputMimeType: typeof normalizeAttachmentMimeType;
 export declare function inputMimeTypes(contract: AgentChatInputContract | null | undefined): string[];
-export declare function validateAgentChatSubmission(contract: AgentChatInputContract, text: string, files: readonly (Pick<PortableUpload, "mediaType" | "data"> & Partial<Pick<PortableUpload, "name">>)[]): string | null;
+export declare function validateAgentChatSubmission(contract: AgentChatInputContract, text: string, files: readonly (Pick<PortableUpload, "mediaType" | "data"> & Partial<Pick<PortableUpload, "name">> & {
+    byteSize?: number;
+})[]): string | null;

package/dist/scaffold/app.d.ts

@@ -3,6 +3,7 @@ import { type AgentChatActiveThreadChangeHandler, type AgentChatMcpAuthorization
 import type { HitlActionState } from "@agents24/chat-react/ui";
 import { type ChatHitlPart, type ChatMessage, type ChatPart } from "@agents24/react";
 import * as React from "react";
+import type { Agents24ChatComposerProps } from "./components/chat/chat-composer";
 import { type Agents24ChatIdentity } from "./identity";
 export type Agents24ChatAppProps = {
     activeThreadId?: string | null;
@@ -19,6 +20,7 @@ export type Agents24ChatAppProps = {
 };
 export type Agents24ChatScaffoldComponents = {
     Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>;
+    Composer?: React.ComponentType<Agents24ChatComposerProps>;
 };
 export type ChatHitlResponse = HitlResponse;
 export type Agents24ChatTimelineSlotProps = {

package/dist/scaffold/components/chat/chat-composer.d.ts

@@ -1,7 +1,7 @@
 import { type AgentChatComposerFile } from "@agents24/chat-react/ui";
 import { type AgentChatInputContract } from "@agents24/chat-react/runtime";
 import type { ContextWindow } from "@agents24/client/protocol";
-type ChatComposerProps = {
+export type Agents24ChatComposerProps = {
     inputContract: AgentChatInputContract;
     disabled?: boolean;
     contextWindow?: ContextWindow | null;
@@ -30,5 +30,4 @@ type ChatComposerProps = {
     } | null;
     utilityRow?: "inline" | "below";
 };
-export declare function ChatComposer({ inputContract, disabled, contextWindow, focusKey, forceExpanded, isCancelling, isRunning, agentId, agents, modelId, models, onModelChange, onAgentChange, onStop, onSubmit, restoredDraft, utilityRow, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ChatComposer({ inputContract, disabled, contextWindow, focusKey, forceExpanded, isCancelling, isRunning, agentId, agents, modelId, models, onModelChange, onAgentChange, onStop, onSubmit, restoredDraft, utilityRow, }: Agents24ChatComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/scaffold/components/chat/theme-menu.d.ts

@@ -1 +1 @@
-export declare function ThemeMenu(): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeMenu(): import("react/jsx-runtime").JSX.Element | null;

package/dist/scaffold/components/theme-provider.d.ts

@@ -1,12 +1,13 @@
 import * as React from "react";
 export type Agents24ChatAppearance = "system" | "light" | "dark";
-export type Agents24ChatTheme = "soft" | "sharp";
+export type Agents24ChatTheme = "soft" | "sharp" | "inherit";
 export type Agents24ChatAppearanceController = {
     appearance: Agents24ChatAppearance;
     setAppearance: (appearance: Agents24ChatAppearance) => void;
 };
 type ThemeContextValue = {
     appearance: Agents24ChatAppearance;
+    inherited: boolean;
     portalContainer: HTMLElement | null;
     setAppearance: (appearance: Agents24ChatAppearance) => void;
 };

package/dist/scaffold/index.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // scaffold/src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  Agents24ChatComposer: () => ChatComposer,
   Agents24ChatScaffold: () => Agents24ChatScaffold,
   Agents24ChatScaffoldApp: () => App,
   Agents24ChatThemeProvider: () => ThemeProvider,
@@ -39,11 +41,11 @@ module.exports = __toCommonJS(src_exports);
 
 // scaffold/src/app.tsx
 var import_browser = require("@agents24/client/browser");
-var import_runtime3 = require("@agents24/chat-react/runtime");
+var import_runtime2 = require("@agents24/chat-react/runtime");
 var import_react2 = require("@agents24/react");
 
 // scaffold/src/components/chat/chat-shell.tsx
-var import_runtime2 = require("@agents24/chat-react/runtime");
+var import_runtime = require("@agents24/chat-react/runtime");
 var import_ui4 = require("@agents24/chat-react/ui");
 var import_lucide_react11 = require("lucide-react");
 var React8 = __toESM(require("react"), 1);
@@ -52,7 +54,6 @@ var React8 = __toESM(require("react"), 1);
 var import_lucide_react3 = require("lucide-react");
 var React2 = __toESM(require("react"), 1);
 var import_ui = require("@agents24/chat-react/ui");
-var import_runtime = require("@agents24/chat-react/runtime");
 
 // scaffold/src/components/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
@@ -144,11 +145,11 @@ function ThemeProvider({
   const [portalContainer, setPortalContainer] = React.useState(null);
   const appearance = controller?.appearance ?? internalAppearance;
   React.useEffect(() => {
-    if (!controller) setInternalAppearance(storedAppearance());
+    if (theme !== "inherit" && !controller) setInternalAppearance(storedAppearance());
     setMounted(true);
-  }, [controller]);
+  }, [controller, theme]);
   React.useEffect(() => {
-    if (!mounted || typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    if (theme === "inherit" || !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
@@ -156,8 +157,9 @@ function ThemeProvider({
     apply();
     media.addEventListener("change", apply);
     return () => media.removeEventListener("change", apply);
-  }, [appearance, mounted]);
+  }, [appearance, mounted, theme]);
   const change = React.useCallback((next) => {
+    if (theme === "inherit") return;
     if (controller) {
       controller.setAppearance(next);
       return;
@@ -167,12 +169,12 @@ function ThemeProvider({
     } 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)(
+  }, [controller, theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value: { appearance, inherited: theme === "inherit", portalContainer, setAppearance: change }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       ref: setPortalContainer,
-      className: `${resolvedAppearance} size-full`,
+      className: theme === "inherit" ? "size-full" : `${resolvedAppearance} size-full`,
       "data-agents24-theme": theme,
       "data-agents24-theme-root": "",
       children
@@ -523,49 +525,31 @@ function ChatComposer({
   restoredDraft,
   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 filesRef = React2.useRef([]);
-  const inFlightFilesRef = React2.useRef([]);
-  const submittingRef = React2.useRef(false);
-  const draftRevisionRef = React2.useRef(0);
-  const attachmentMimeTypes = (0, import_runtime.inputMimeTypes)(inputContract);
-  const allowAttachments = attachmentMimeTypes.length > 0;
-  const recordingAllowed = inputContract.modalities.audio.recording_enabled;
-  React2.useEffect(() => {
-    filesRef.current = files;
-  }, [files]);
-  React2.useEffect(() => () => {
-    (0, import_ui.revokeAgentChatComposerFiles)(filesRef.current);
-    (0, import_ui.revokeAgentChatComposerFiles)(inFlightFilesRef.current);
-  }, []);
-  const focusComposer = (0, import_ui.useChatComposerFocus)({
-    textareaRef,
-    disabled: Boolean(disabled),
+  const composer = (0, import_ui.useAgentChatComposer)({
+    inputContract,
+    disabled,
+    isRunning,
+    isCancelling,
     focusKey,
     restoredDraft,
-    onRestore: (draft) => {
-      draftRevisionRef.current += 1;
-      (0, import_ui.revokeAgentChatComposerFiles)(filesRef.current);
-      setText(draft.text);
-      setFiles(draft.files);
-    }
+    textareaRef,
+    onSubmit: ({ text: text2, files: files2 }) => onSubmit(text2, files2)
   });
-  const addRecording = React2.useCallback((file) => {
-    draftRevisionRef.current += 1;
-    setFiles((current) => [...current, (0, import_ui.createAgentChatComposerFile)(file)]);
-  }, []);
-  const recorder = (0, import_ui.useAudioRecorder)(addRecording);
-  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
-  const validationError = (0, import_runtime.validateAgentChatSubmission)(
-    inputContract,
+  const {
     text,
-    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType }))
-  );
-  const action = (0, import_ui.chatComposerAction)({ hasDraft: Boolean(text.trim() || files.length), isRunning, isCancelling });
+    files,
+    setText,
+    validationError,
+    attachmentError,
+    recorder,
+    recordingAllowed,
+    allowAttachments,
+    action,
+    submit
+  } = composer;
+  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
   const selectedAgent = agents.find((item) => item.id === agentId);
   const selectedModel = models.find((item) => item.id === modelId);
   const modelSelector = models.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-fit max-w-40", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Select, { disabled: disabled || isRunning, onValueChange: onModelChange, value: modelId || void 0, children: [
@@ -605,35 +589,6 @@ function ChatComposer({
   ] }) : modelSelector;
   const hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0;
   const showUtilityRow = utilityRow === "below";
-  const submit = async () => {
-    if (disabled || isCancelling || submittingRef.current || validationError) return;
-    const value = text;
-    const selectedFiles = files;
-    const clearedRevision = draftRevisionRef.current + 1;
-    draftRevisionRef.current = clearedRevision;
-    submittingRef.current = true;
-    inFlightFilesRef.current = selectedFiles;
-    setText("");
-    setFiles([]);
-    focusComposer();
-    try {
-      await onSubmit(value, selectedFiles);
-      (0, import_ui.revokeAgentChatComposerFiles)(selectedFiles);
-      inFlightFilesRef.current = [];
-    } catch {
-      if (draftRevisionRef.current === clearedRevision) {
-        draftRevisionRef.current += 1;
-        setText(value);
-        setFiles(selectedFiles);
-        inFlightFilesRef.current = [];
-      } else {
-        (0, import_ui.revokeAgentChatComposerFiles)(selectedFiles);
-        inFlightFilesRef.current = [];
-      }
-    } finally {
-      submittingRef.current = false;
-    }
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
@@ -645,13 +600,7 @@ function ChatComposer({
           {
             attachments: files,
             onRemove: (attachment) => {
-              if (!attachment.id) return;
-              draftRevisionRef.current += 1;
-              setFiles((current) => {
-                const removed = current.find((file) => file.id === attachment.id);
-                if (removed) (0, import_ui.revokeAgentChatComposerFiles)([removed]);
-                return current.filter((file) => file.id !== attachment.id);
-              });
+              if (attachment.id) composer.removeFile(attachment.id);
             }
           }
         ) }),
@@ -673,11 +622,9 @@ function ChatComposer({
                     className: "sr-only",
                     type: "file",
                     multiple: true,
-                    accept: (0, import_runtime.attachmentFileAccept)(attachmentMimeTypes),
+                    accept: composer.fileAccept,
                     onChange: (event) => {
-                      const selected = Array.from(event.target.files ?? []);
-                      setFiles((current) => [...current, ...selected.map(import_ui.createAgentChatComposerFile)]);
-                      setAttachmentError(null);
+                      composer.addFiles(Array.from(event.target.files ?? []));
                       event.currentTarget.value = "";
                     }
                   }
@@ -697,16 +644,8 @@ function ChatComposer({
                     "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();
-                    }
-                  }
+                  onChange: (event) => setText(event.target.value),
+                  onKeyDown: composer.onKeyDown
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "agents24-composer-actions flex items-center gap-1", children: [
@@ -738,7 +677,7 @@ function ChatComposer({
                 ) : validationError ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Tooltip, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { tabIndex: 0, "aria-label": validationError, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled: true, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ArrowUp, {}) }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipContent, { children: validationError })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ArrowUp, {}) })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled: disabled || !composer.canSubmit, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ArrowUp, {}) })
               ] })
             ]
           }
@@ -1231,7 +1170,7 @@ var options = [
   { value: "dark", label: "Dark", icon: import_lucide_react6.Moon }
 ];
 function ThemeMenu() {
-  const { appearance, setAppearance } = useTheme();
+  const { appearance, setAppearance, inherited } = useTheme();
   const [open, setOpen] = React5.useState(false);
   const rootRef = React5.useRef(null);
   const firstItemRef = React5.useRef(null);
@@ -1253,6 +1192,7 @@ function ThemeMenu() {
       document.removeEventListener("keydown", closeOnEscape);
     };
   }, [open]);
+  if (inherited) return null;
   const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark";
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -2078,7 +2018,7 @@ function OperationErrorNotice({ runtime }) {
   if (!error) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(import_lucide_react11.CircleAlert, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)("span", { className: "min-w-0 flex-1 wrap-break-word", children: (0, import_runtime.agentChatRuntimeErrorMessage)(error) || "The chat could not complete that action." }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Button,
       {
@@ -2097,6 +2037,7 @@ function ChatShell({
   runtime,
   sidebar
 }) {
+  const Composer = components?.Composer || ChatComposer;
   const { controller } = runtime;
   const isUploading = controller.runState === "uploading";
   const isRunning = controller.runState === "streaming" || controller.runState === "reconnecting" || controller.runState === "paused" || controller.runState === "cancelling";
@@ -2254,7 +2195,7 @@ function ChatShell({
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                            ChatComposer,
+                            Composer,
                             {
                               restoredDraft,
                               inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
@@ -2314,7 +2255,7 @@ function RuntimeChat({
   identity = GUEST_CHAT_IDENTITY,
   ...props
 }) {
-  const runtime = (0, import_runtime3.useAgentChatRuntime)({
+  const runtime = (0, import_runtime2.useAgentChatRuntime)({
     ...props,
     mcpRedirectUri: props.mcpRedirectUri || (typeof window === "undefined" ? void 0 : window.location.href)
   });
@@ -2332,6 +2273,7 @@ function Agents24ChatScaffold({ appearanceController, theme, ...props }) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Agents24ChatComposer,
   Agents24ChatScaffold,
   Agents24ChatScaffoldApp,
   Agents24ChatThemeProvider,