@agents24/chat-react 0.5.36 → 0.5.38

package/dist/ui/use-agent-chat-composer.d.ts

@@ -1,6 +1,21 @@
 import * as React from "react";
 import type { AgentChatInputContract } from "../runtime/input-contract";
 import { type AgentChatComposerFile } from "./composer-attachments";
+import { type RecordingCompletionContext } from "./use-audio-recorder";
+export type AgentChatComposerSubmission = {
+    text: string;
+    files: AgentChatComposerFile[];
+};
+export type AgentChatComposerTextOptions = {
+    /** Focus after the controlled textarea has committed the new text. Defaults to false. */
+    focus?: boolean;
+    /** UTF-16 offsets into the new text, clamped to its bounds. Does not imply focus. */
+    selection?: {
+        start: number;
+        end: number;
+        direction?: "forward" | "backward" | "none";
+    };
+};
 export type AgentChatComposerOptions = {
     inputContract?: AgentChatInputContract | null;
     recordingEnabled?: boolean;
@@ -10,6 +25,9 @@ export type AgentChatComposerOptions = {
     isCancelling?: boolean;
     forceExpanded?: boolean;
     focusKey?: string | null;
+    scopeKey?: string | null;
+    /** Replaces recorded-audio attachment creation; transport and policy remain host-owned. */
+    onRecordingComplete?: (file: File, context: RecordingCompletionContext) => void | Promise<void>;
     restoredDraft?: {
         revision: number;
         text: string;
@@ -21,12 +39,12 @@ export type AgentChatComposerOptions = {
 };
 export declare function useAgentChatComposer(options: AgentChatComposerOptions): {
     text: string;
-    setText: (value: string) => void;
+    setText: (value: string, interaction?: AgentChatComposerTextOptions) => boolean;
     files: AgentChatComposerFile[];
     addFiles: (selected: readonly File[]) => void;
     removeFile: (id: string) => void;
     textareaRef: React.RefObject<HTMLTextAreaElement | null>;
-    submit: () => Promise<void>;
+    submit: (submission?: AgentChatComposerSubmission) => Promise<boolean>;
     canSubmit: boolean;
     isSubmitting: boolean;
     attachmentError: string | null;
@@ -35,9 +53,16 @@ export declare function useAgentChatComposer(options: AgentChatComposerOptions):
     recorder: {
         error: string | null;
         isRecording: boolean;
-        start: () => Promise<void>;
+        isStarting: boolean;
+        isProcessing: boolean;
+        isCapturing: () => boolean;
+        start: (startOptions?: {
+            operationId?: string;
+        }) => Promise<void>;
         stop: () => void;
+        cancel: () => void;
     };
+    isProcessing: boolean;
     recordingAllowed: boolean;
     fileAccept: string;
     onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;

package/dist/ui/use-audio-recorder.d.ts

@@ -1,10 +1,23 @@
+export type RecordingCompletionContext = {
+    operationId: string;
+    signal: AbortSignal;
+};
 export type AudioRecorderOptions = {
     /** Subscribe to the recorder-owned stream; consumers must not stop its tracks. */
     onStreamChange?: (stream: MediaStream | null) => void;
+    /** Invalidates capture and completion work independently of focus. */
+    scopeKey?: string | null;
+    acceptedMimeTypes?: readonly string[];
 };
-export declare function useAudioRecorder(onRecorded: (file: File) => void, options?: AudioRecorderOptions): {
+export declare function useAudioRecorder(onRecorded: (file: File, context: RecordingCompletionContext) => void | Promise<void>, options?: AudioRecorderOptions): {
     error: string | null;
     isRecording: boolean;
-    start: () => Promise<void>;
+    isStarting: boolean;
+    isProcessing: boolean;
+    isCapturing: () => boolean;
+    start: (startOptions?: {
+        operationId?: string;
+    }) => Promise<void>;
     stop: () => void;
+    cancel: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.36",
+  "version": "0.5.38",
   "description": "Accessible web UI and complete default layout for Agents24 chat applications.",
   "license": "MIT",
   "repository": {
@@ -64,8 +64,8 @@
   },
   "dependencies": {
     "@untitledui/file-icons": "0.0.9",
-    "@agents24/client": "0.2.18",
-    "@agents24/react": "0.2.23",
+    "@agents24/client": "0.2.20",
+    "@agents24/react": "0.2.25",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/merriweather": "^5.3.0",

package/scaffold/src/app.tsx

@@ -10,6 +10,7 @@ import type { HitlActionState } from "@agents24/chat-react/ui"
 import {
   Agents24Provider,
   type ChatHitlPart,
+  type HitlSubmissionOptions,
   type ChatMessage,
   type ChatPart,
 } from "@agents24/react"
@@ -51,7 +52,7 @@ export type Agents24ChatTimelineSlotProps = {
   parts: readonly ChatPart[]
   isLoading: boolean
   getHitlActionState: (part: ChatHitlPart) => HitlActionState | undefined
-  onHitlAction: (part: ChatHitlPart, response: ChatHitlResponse) => void
+  onHitlAction: (part: ChatHitlPart, response: ChatHitlResponse, options?: HitlSubmissionOptions) => void
 }
 
 function RuntimeChat({

package/scaffold/src/components/chat/chat-composer.tsx

@@ -6,7 +6,7 @@ import {
   useAgentChatComposer,
   type AgentChatComposerFile,
 } from "@agents24/chat-react/ui"
-import { type AgentChatInputContract } from "@agents24/chat-react/runtime"
+import { attachmentFileAccept, type AgentChatInputContract } from "@agents24/chat-react/runtime"
 import type { ContextWindow } from "@agents24/client/protocol"
 
 import { Button } from "../ui/button"
@@ -25,6 +25,7 @@ export type Agents24ChatComposerProps = {
   inputContract: AgentChatInputContract
   disabled?: boolean
   contextWindow?: ContextWindow | null
+  scopeKey?: string | null
   focusKey?: string | null
   forceExpanded?: boolean
   isCancelling?: boolean
@@ -48,6 +49,7 @@ export function ChatComposer({
   disabled,
   contextWindow,
   focusKey,
+  scopeKey,
   forceExpanded = false,
   isCancelling = false,
   isRunning,
@@ -66,7 +68,7 @@ export function ChatComposer({
   const { text, setText, files, removeFile, addFiles, textareaRef, submit,
     attachmentError, attachmentMimeTypes, allowAttachments, recordingAllowed,
     recorder, isExpanded, validationError, action, canSubmit } = useAgentChatComposer({
-      inputContract, disabled, focusKey, forceExpanded, isCancelling, isRunning,
+      inputContract, disabled, scopeKey, focusKey, forceExpanded, isCancelling, isRunning,
       onSubmit, restoredDraft, onRecordingStreamChange,
     })
 
@@ -162,7 +164,7 @@ export function ChatComposer({
               className="sr-only"
               type="file"
               multiple
-              accept={attachmentMimeTypes.join(",")}
+              accept={attachmentFileAccept(attachmentMimeTypes)}
               onChange={(event) => {
                 addFiles(Array.from(event.target.files ?? []))
                 event.currentTarget.value = ""

package/scaffold/src/components/chat/chat-message.tsx

@@ -1,4 +1,4 @@
-import type { ChatHitlPart, ChatMessage as ChatMessageModel } from "@agents24/react"
+import type { ChatHitlPart, HitlSubmissionOptions, ChatMessage as ChatMessageModel } from "@agents24/react"
 import type { FeedbackReason, HitlResponse } from "@agents24/client"
 import type { AgentChatRuntimeHitlActionState } from "@agents24/chat-react/runtime"
 import { AgentChatDefaultActions, AgentChatUserMessageActionRow, ChatAttachmentRows, useCompletionActionEntrance, type ChatAttachmentContentResolver } from "@agents24/chat-react/ui"
@@ -14,7 +14,7 @@ type Props = {
   message: ChatMessageModel
   getHitlActionState: (part: ChatHitlPart) => AgentChatRuntimeHitlActionState | undefined
   isLoading: boolean
-  onHitlAction: (part: ChatHitlPart, response: HitlResponse) => Promise<void>
+  onHitlAction: (part: ChatHitlPart, response: HitlResponse, options?: HitlSubmissionOptions) => Promise<void>
   onRegenerate: () => Promise<void>
   allowFeedback: boolean
   onSetFeedback: (
@@ -71,7 +71,7 @@ export function ChatMessage({
           </AgentChatUserMessageActionRow>
         )}
         {showCompletionActions && (
-          <MessageFooter className="gap-1 opacity-70 transition-opacity group-hover/message:opacity-100">
+          <MessageFooter className="a24-chat-message-action-row--assistant gap-1">
             <AgentChatDefaultActions
               animateCompletion={animateCompletionActions}
               handlers={{

package/scaffold/src/components/chat/chat-shell.tsx

@@ -24,7 +24,7 @@ import {
 import { SidebarInset, SidebarProvider, SidebarTrigger, useSidebar } from "../ui/sidebar"
 
 const LOADING_INPUT_CONTRACT = {
-  version: "agents24.runtime-inputs.v2" as const,
+  version: "agents24.runtime-inputs.v3" as const,
   modalities: {
     text: { enabled: false, required: false },
     files: { enabled: false, required: false, allowed_mime_types: [] },
@@ -250,6 +250,7 @@ export function ChatShell({
                       inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
                       contextWindow={runtime.contextWindow}
                       disabled={runtime.isBootstrapping || runtime.isChangingAgent || isUploading || hasBlockingError}
+                      scopeKey={controller.activeThreadId}
                       focusKey={controller.activeThreadId}
                       forceExpanded={isEmptyState}
                       isCancelling={isCancelling}

package/scaffold/src/components/chat/message-parts.tsx

@@ -1,4 +1,4 @@
-import type { ChatHitlPart, ChatMessage } from "@agents24/react"
+import type { ChatHitlPart, HitlSubmissionOptions, ChatMessage } from "@agents24/react"
 import type { HitlResponse } from "@agents24/client"
 import {
   AgentChatPart,
@@ -39,7 +39,7 @@ export function MessageParts({
   message: ChatMessage
   getHitlActionState: (part: ChatHitlPart) => AgentChatRuntimeHitlActionState | undefined
   isLoading: boolean
-  onHitlAction: (part: ChatHitlPart, response: HitlResponse) => Promise<void>
+  onHitlAction: (part: ChatHitlPart, response: HitlResponse, options?: HitlSubmissionOptions) => Promise<void>
   Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
 }) {
   if (message.role === "assistant") {
@@ -48,8 +48,8 @@ export function MessageParts({
         getHitlActionState={getHitlActionState}
         isLoading={isLoading}
         message={message}
-        onHitlAction={(part, response) => {
-          void onHitlAction(part, response).catch(() => undefined)
+        onHitlAction={(part, response, options) => {
+          void onHitlAction(part, response, options).catch(() => undefined)
         }}
         parts={message.parts}
       />
@@ -71,8 +71,8 @@ export function MessageParts({
           getHitlActionState={getHitlActionState}
           key={part.id}
           message={message}
-          onHitlAction={(hitlPart, response) => {
-            void onHitlAction(hitlPart, response).catch(() => undefined)
+          onHitlAction={(hitlPart, response, options) => {
+            void onHitlAction(hitlPart, response, options).catch(() => undefined)
           }}
           part={part}
         />

package/dist/chunk-INO5DSSJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/runtime/input-contract.ts"],"sourcesContent":["import { normalizeAttachmentMimeType, SUPPORTED_ATTACHMENT_MIME_TYPES, type ClientInputFeature, type PortableUpload } from \"@agents24/client\";\nexport { attachmentFileAccept, normalizeAttachmentMimeType } from \"@agents24/client\";\n\nexport type AgentChatInputContract = ClientInputFeature;\n\nexport const SUPPORTED_INPUT_MIME_TYPES = SUPPORTED_ATTACHMENT_MIME_TYPES;\n\nexport type WorkflowInputRule = {\n  key: string;\n  enabled?: boolean;\n  required?: boolean;\n};\n\nexport function workflowInputRule(\n  inputs: readonly WorkflowInputRule[] | null | undefined,\n  key: string,\n): { enabled: boolean; required: boolean } {\n  const input = inputs?.find((candidate) => candidate.key === key);\n  return {\n    enabled: input?.enabled !== false,\n    required: input?.required === true,\n  };\n}\n\nexport function validateWorkflowInputSubmission(\n  inputs: readonly WorkflowInputRule[] | null | undefined,\n  text: string,\n  attachmentMimeTypes: readonly string[],\n): string | null {\n  const present = { files: false, images: false, audio: false };\n  if (text.trim() && !workflowInputRule(inputs, \"text\").enabled) {\n    return \"This workflow does not accept text input.\";\n  }\n  for (const rawMimeType of attachmentMimeTypes) {\n    const mimeType = canonicalInputMimeType(rawMimeType);\n    const modality = mimeType.startsWith(\"image/\") ? \"images\" : mimeType.startsWith(\"audio/\") ? \"audio\" : \"files\";\n    const supported = (SUPPORTED_INPUT_MIME_TYPES[modality] as readonly string[]).includes(mimeType);\n    if (!supported || !workflowInputRule(inputs, modality).enabled) {\n      return `The attachment type ${mimeType || \"unknown\"} is not accepted.`;\n    }\n    present[modality] = true;\n  }\n  if (workflowInputRule(inputs, \"text\").required && !text.trim()) return \"Text input is required.\";\n  for (const modality of [\"files\", \"images\", \"audio\"] as const) {\n    if (workflowInputRule(inputs, modality).required && !present[modality]) {\n      return `${modality[0].toUpperCase()}${modality.slice(1)} input is required.`;\n    }\n  }\n  return null;\n}\n\nexport const canonicalInputMimeType = normalizeAttachmentMimeType;\n\nfunction uploadByteSize(data: PortableUpload[\"data\"]): number {\n  if (data instanceof Uint8Array || data instanceof ArrayBuffer) return data.byteLength;\n  return data.size;\n}\n\nexport function inputMimeTypes(contract: AgentChatInputContract | null | undefined): string[] {\n  if (!contract) return [];\n  return [\n    ...contract.modalities.files.allowed_mime_types,\n    ...contract.modalities.images.allowed_mime_types,\n    ...contract.modalities.audio.allowed_mime_types,\n  ];\n}\n\nexport function validateAgentChatSubmission(\n  contract: AgentChatInputContract,\n  text: string,\n  files: readonly (Pick<PortableUpload, \"mediaType\" | \"data\"> & Partial<Pick<PortableUpload, \"name\">> & { byteSize?: number })[],\n): string | null {\n  const { modalities, limits } = contract;\n  const normalizedText = text.trim();\n  if (normalizedText && !modalities.text.enabled) return \"This agent does not accept text input.\";\n  if (modalities.text.required && !normalizedText) return \"Text input is required.\";\n  if (files.length > limits.max_attachments_per_turn) {\n    return `You can attach up to ${limits.max_attachments_per_turn} items per message.`;\n  }\n  let totalBytes = 0;\n  const present = { files: false, images: false, audio: false };\n  for (const file of files) {\n    const mediaType = normalizeAttachmentMimeType(file.mediaType, file.name);\n    const modality = mediaType.startsWith(\"image/\") ? \"images\" : mediaType.startsWith(\"audio/\") ? \"audio\" : \"files\";\n    const rule = modalities[modality];\n    if (!rule.enabled || !rule.allowed_mime_types.includes(mediaType)) {\n      return `The attachment type ${mediaType || \"unknown\"} is not accepted.`;\n    }\n    const byteSize = file.byteSize ?? uploadByteSize(file.data);\n    if (byteSize > limits.max_file_bytes) return \"An attachment exceeds the per-file size limit.\";\n    totalBytes += byteSize;\n    present[modality] = true;\n  }\n  if (totalBytes > limits.max_total_bytes) return \"Attachments exceed the total size limit.\";\n  for (const modality of [\"files\", \"images\", \"audio\"] as const) {\n    if (modalities[modality].required && !present[modality]) return `${modality[0].toUpperCase()}${modality.slice(1)} input is required.`;\n  }\n  return null;\n}\n"],"mappings":"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","names":["normalizeAttachmentMimeType"]}