@agents24/chat-react 0.5.28 → 0.5.30

package/dist/scaffold/index.d.ts

@@ -12,3 +12,5 @@ export type { Agents24ChatAppearance, Agents24ChatAppearanceController, Agents24
 export type { Agents24ChatIdentity, Agents24ChatIdentityState } from "./identity";
 export type { ChatHitlResponse, Agents24ChatScaffoldComponents, Agents24ChatTimelineSlotProps, } from "./app";
 export { TooltipProvider as Agents24ChatTooltipProvider };
+export { ChatComposer as Agents24ChatComposer } from "./components/chat/chat-composer";
+export type { Agents24ChatComposerProps } from "./components/chat/chat-composer";

package/dist/scaffold/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // scaffold/src/app.tsx
 import { createBrowserVisibility } from "@agents24/client/browser";
 import {
@@ -21,13 +23,8 @@ import * as React2 from "react";
 import {
   AgentChatContextStatus,
   ChatAttachmentRows,
-  chatComposerAction,
-  createAgentChatComposerFile,
-  revokeAgentChatComposerFiles,
-  useAudioRecorder,
-  useChatComposerFocus
+  useAgentChatComposer
 } from "@agents24/chat-react/ui";
-import { canonicalInputMimeType, inputMimeTypes, validateAgentChatSubmission } from "@agents24/chat-react/runtime";
 
 // scaffold/src/components/ui/button.tsx
 import { cva } from "class-variance-authority";
@@ -119,11 +116,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
@@ -131,8 +128,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;
@@ -142,12 +140,12 @@ function ThemeProvider({
     } catch {
     }
     setInternalAppearance(next);
-  }, [controller]);
-  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value: { appearance, portalContainer, setAppearance: change }, children: /* @__PURE__ */ jsx2(
+  }, [controller, theme]);
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value: { appearance, inherited: theme === "inherit", portalContainer, setAppearance: change }, children: /* @__PURE__ */ jsx2(
     "div",
     {
       ref: setPortalContainer,
-      className: `${resolvedAppearance} size-full`,
+      className: theme === "inherit" ? "size-full" : `${resolvedAppearance} size-full`,
       "data-agents24-theme": theme,
       "data-agents24-theme-root": "",
       children
@@ -498,49 +496,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 = inputMimeTypes(inputContract);
-  const allowAttachments = attachmentMimeTypes.length > 0;
-  const recordingAllowed = inputContract.modalities.audio.recording_enabled;
-  React2.useEffect(() => {
-    filesRef.current = files;
-  }, [files]);
-  React2.useEffect(() => () => {
-    revokeAgentChatComposerFiles(filesRef.current);
-    revokeAgentChatComposerFiles(inFlightFilesRef.current);
-  }, []);
-  const focusComposer = useChatComposerFocus({
-    textareaRef,
-    disabled: Boolean(disabled),
+  const composer = useAgentChatComposer({
+    inputContract,
+    disabled,
+    isRunning,
+    isCancelling,
     focusKey,
     restoredDraft,
-    onRestore: (draft) => {
-      draftRevisionRef.current += 1;
-      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, createAgentChatComposerFile(file)]);
-  }, []);
-  const recorder = useAudioRecorder(addRecording);
-  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
-  const validationError = validateAgentChatSubmission(
-    inputContract,
+  const {
     text,
-    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType }))
-  );
-  const action = 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__ */ jsx7("div", { className: "w-fit max-w-40", children: /* @__PURE__ */ jsxs3(Select, { disabled: disabled || isRunning, onValueChange: onModelChange, value: modelId || void 0, children: [
@@ -580,35 +560,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);
-      revokeAgentChatComposerFiles(selectedFiles);
-      inFlightFilesRef.current = [];
-    } catch {
-      if (draftRevisionRef.current === clearedRevision) {
-        draftRevisionRef.current += 1;
-        setText(value);
-        setFiles(selectedFiles);
-        inFlightFilesRef.current = [];
-      } else {
-        revokeAgentChatComposerFiles(selectedFiles);
-        inFlightFilesRef.current = [];
-      }
-    } finally {
-      submittingRef.current = false;
-    }
-  };
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -620,13 +571,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) revokeAgentChatComposerFiles([removed]);
-                return current.filter((file) => file.id !== attachment.id);
-              });
+              if (attachment.id) composer.removeFile(attachment.id);
             }
           }
         ) }),
@@ -648,15 +593,9 @@ function ChatComposer({
                     className: "sr-only",
                     type: "file",
                     multiple: true,
-                    accept: attachmentMimeTypes.join(","),
+                    accept: composer.fileAccept,
                     onChange: (event) => {
-                      const selected = Array.from(event.target.files ?? []);
-                      const accepted = selected.filter((file) => attachmentMimeTypes.includes(canonicalInputMimeType(file.type)));
-                      draftRevisionRef.current += 1;
-                      setFiles((current) => [...current, ...accepted.map(createAgentChatComposerFile)]);
-                      setAttachmentError(
-                        accepted.length === selected.length ? null : "One or more selected file types are not supported by this Agent."
-                      );
+                      composer.addFiles(Array.from(event.target.files ?? []));
                       event.currentTarget.value = "";
                     }
                   }
@@ -676,16 +615,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__ */ jsxs3("div", { className: "agents24-composer-actions flex items-center gap-1", children: [
@@ -717,7 +648,7 @@ function ChatComposer({
                 ) : validationError ? /* @__PURE__ */ jsxs3(Tooltip, { children: [
                   /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7("span", { tabIndex: 0, "aria-label": validationError, children: /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled: true, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) }) }) }),
                   /* @__PURE__ */ jsx7(TooltipContent, { children: validationError })
-                ] }) : /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) })
+                ] }) : /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled: disabled || !composer.canSubmit, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) })
               ] })
             ]
           }
@@ -1213,7 +1144,7 @@ var options = [
   { value: "dark", label: "Dark", icon: 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);
@@ -1235,6 +1166,7 @@ function ThemeMenu() {
       document.removeEventListener("keydown", closeOnEscape);
     };
   }, [open]);
+  if (inherited) return null;
   const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark";
   return /* @__PURE__ */ jsxs9("div", { ref: rootRef, className: "relative", children: [
     /* @__PURE__ */ jsx15(
@@ -2082,6 +2014,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";
@@ -2239,7 +2172,7 @@ function ChatShell({
                             }
                           ),
                           /* @__PURE__ */ jsx24(
-                            ChatComposer,
+                            Composer,
                             {
                               restoredDraft,
                               inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
@@ -2316,6 +2249,7 @@ function Agents24ChatScaffold({ appearanceController, theme, ...props }) {
   return /* @__PURE__ */ jsx26(ThemeProvider, { controller: appearanceController, theme, children: /* @__PURE__ */ jsx26(TooltipProvider, { children: /* @__PURE__ */ jsx26(App, { ...props }) }) });
 }
 export {
+  ChatComposer as Agents24ChatComposer,
   Agents24ChatScaffold,
   App as Agents24ChatScaffoldApp,
   ThemeProvider as Agents24ChatThemeProvider,