@agents24/chat-react 0.5.16 → 0.5.18

package/dist/styles.css

@@ -45,6 +45,26 @@
   }
 }
 
+.a24-queue { position: relative; z-index: 0; margin-inline: 2rem; margin-bottom: -.5rem; padding-bottom: .5rem; overflow: visible; border: 1px solid var(--a24-border); border-bottom: 0; border-radius: .75rem .75rem 0 0; background: var(--a24-background); }
+@media (max-width: 640px) { .a24-queue { margin-inline: 1.75rem; } }
+.a24-queue__row { min-width: 0; border-bottom: 1px solid var(--a24-border); }
+.a24-queue__row:last-child { border-bottom: 0; }
+.a24-queue__row-content { display: flex; min-height: 2.25rem; align-items: center; gap: .5rem; padding: 0 .75rem; font-size: .875rem; }
+.a24-queue__row-content > svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--a24-muted); }
+.a24-queue__text { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--a24-text); }
+.a24-queue__steer, .a24-queue__icon { display: inline-flex; height: 2rem; align-items: center; justify-content: center; flex-shrink: 0; color: var(--a24-muted); background: transparent; border: 0; cursor: pointer; }
+.a24-queue__steer { gap: .375rem; padding: 0 .375rem; }
+.a24-queue__icon { width: 2rem; padding: 0; }
+.a24-queue__steer svg, .a24-queue__icon svg { width: 1rem; height: 1rem; }
+.a24-queue__steer:hover:not(:disabled), .a24-queue__icon:hover:not(:disabled) { color: var(--a24-text); }
+.a24-queue button:disabled { opacity: .5; cursor: default; }
+.a24-queue__menu { position: relative; }
+.a24-queue__menu summary { list-style: none; cursor: pointer; }
+.a24-queue__menu summary::-webkit-details-marker { display: none; }
+.a24-queue__menu-content { position: absolute; right: 0; bottom: 100%; z-index: 30; min-width: 7rem; margin-bottom: .25rem; padding: .25rem; border: 1px solid var(--a24-border); border-radius: .375rem; background: var(--a24-background); box-shadow: 0 4px 12px rgb(0 0 0 / 10%); }
+.a24-queue__menu-content button { width: 100%; padding: .25rem .5rem; border: 0; border-radius: .25rem; background: transparent; color: var(--a24-text); text-align: left; cursor: pointer; }
+.a24-queue__menu-content button:hover { background: var(--a24-surface); }
+
 .a24-scroller {
   display: flex;
   flex: 1;
@@ -155,18 +175,23 @@
 .a24-context-status__sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
 .a24-tool-disclosure { min-width: 0; width: 100%; }
 .a24-tool-trigger-row { align-items: center; display: flex; gap: .35rem; min-width: 0; }
+.a24-tool-trigger-row--root { background: transparent; border: 1px solid color-mix(in srgb, var(--a24-border) 55%, var(--a24-background)); border-radius: 9999px; max-width: 100%; padding: .3rem .5rem; width: fit-content; }
 .a24-tool-trigger { align-items: center; appearance: none; background: transparent; border: 0; color: var(--a24-muted); display: flex; font: inherit; font-size: .875rem; gap: .35rem; line-height: 1.35; min-width: 0; padding: .125rem 0; text-align: start; }
 button.a24-tool-trigger { border-radius: .5rem; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
 button.a24-tool-trigger:hover { color: var(--a24-text); }
-.a24-tool-trigger--root { background: transparent; border: 1px solid color-mix(in srgb, var(--a24-border) 55%, var(--a24-background)); border-radius: 9999px; padding: .3rem .5rem; }
+.a24-tool-trigger--root { background: transparent; border: 0; padding: 0; }
 button.a24-tool-trigger--root { border-radius: 9999px; }
 button.a24-tool-trigger--root:hover { background: transparent; }
 .a24-tool-trigger--without-orb { padding-inline-start: .625rem; }
+.a24-tool-trigger--root.a24-tool-trigger--without-orb { padding-inline-start: 0; }
 button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); outline-offset: 2px; }
 .a24-tool-trigger--error { color: var(--a24-danger); }
 .a24-tool-orb { align-items: center; display: inline-flex; flex: 0 0 auto; height: 1.25rem; justify-content: center; width: 1.25rem; }
 .a24-tool-orb canvas { display: block; }
 .a24-tool-trigger__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a24-tool-resource-action { appearance: none; background: transparent; border: 0; border-radius: .375rem; color: var(--a24-text); cursor: pointer; flex: 0 1 auto; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .75rem; max-width: 16rem; min-width: 0; overflow: hidden; padding: .125rem .25rem; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-overflow: ellipsis; text-underline-offset: .18em; white-space: nowrap; }
+.a24-tool-resource-action:hover { background: var(--a24-surface-hover); text-decoration-color: currentColor; }
+.a24-tool-resource-action:focus-visible { outline: 2px solid var(--a24-focus); outline-offset: 2px; }
 .a24-tool-trigger__chevron { flex: 0 0 auto; height: .75rem; opacity: 0; transition: opacity 140ms ease; width: .75rem; }
 .a24-tool-trigger:hover .a24-tool-trigger__chevron,
 .a24-tool-trigger:focus-visible .a24-tool-trigger__chevron { opacity: .7; }
@@ -210,6 +235,14 @@ button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); out
 .a24-chat-message { display: flex; flex-direction: column; min-width: 0; width: 100%; }
 .a24-chat-message--user { gap: 0; max-width: 100%; }
 .a24-chat-message--assistant { gap: .5rem; max-width: 100%; }
+.a24-chat-completion-actions { animation: a24-chat-completion-actions-in 200ms cubic-bezier(.2, 0, 0, 1) both; }
+@keyframes a24-chat-completion-actions-in {
+  from { filter: blur(4px); opacity: 0; transform: translateY(4px); }
+  to { filter: blur(0); opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .a24-chat-completion-actions { animation: none; }
+}
 .a24-chat-message-action-row--user { align-items: center; align-self: flex-start; display: flex; gap: .5rem; height: 2rem; margin-left: auto; margin-top: .25rem; padding-inline: .25rem; transition: opacity 150ms ease; width: auto; }
 .a24-user-message-actions { color: var(--a24-muted); font-family: inherit; font-size: .75rem; font-weight: 400; gap: .5rem; }
 .a24-user-message-actions time { white-space: nowrap; }

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import type { HitlAction, HitlResponse } from "@agents24/client";
 export type * from "@agents24/react";
-export type { ChatAttachment, ChatHitlPart, ChatMessage, ChatModelTurnPart, ChatNodeActivityPart, ChatPart, ChatToolPart, } from "@agents24/react";
+export type { ChatAttachment, ChatHitlPart, ChatMessage, ChatModelTurnPart, ChatNodeActivityPart, ChatPart, ChatToolPart, ChatComputerResourceTarget, } from "@agents24/react";
 export type ChatHitlAction = HitlAction;
 export type ChatHitlResponse = HitlResponse;
 export type ChatMcpOauthCompletion = {

package/dist/ui/agent-chat-actions.d.ts

@@ -15,8 +15,11 @@ export type AgentChatMessageActionHandlers = {
 };
 export type AgentChatDefaultActionsProps = {
     additionalActions?: React.ReactNode;
+    animateCompletion?: boolean;
     dir?: "ltr" | "rtl";
     handlers?: AgentChatMessageActionHandlers;
     message: ChatMessage;
 };
-export declare function AgentChatDefaultActions({ additionalActions, dir, handlers, message, }: AgentChatDefaultActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function useLiveCompletionRuns(runId: string | null | undefined, isRunning: boolean): (candidate: string | null | undefined) => boolean;
+export declare function useCompletionActionEntrance(isComplete: boolean, runId?: string | null, wasLive?: boolean): boolean;
+export declare function AgentChatDefaultActions({ additionalActions, animateCompletion, dir, handlers, message, }: AgentChatDefaultActionsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -4,6 +4,7 @@ export type { AgentChatComposerFile } from "./composer-attachments";
 export type AgentChatComposerSubmit = {
     text: string;
     files: AgentChatComposerFile[];
+    attachmentIds?: string[];
 };
 export type AgentChatComposerProps = {
     accept?: string;
@@ -12,12 +13,19 @@ export type AgentChatComposerProps = {
     className?: string;
     disabled?: boolean;
     forceExpanded?: boolean;
+    focusKey?: string | null;
     inputToolbarContent?: React.ReactNode;
     isRunning?: boolean;
+    isCancelling?: boolean;
     onAttachmentCountChange?: (count: number) => void;
     onStop?: () => void;
     onSubmit: (message: AgentChatComposerSubmit) => Promise<void> | void;
     placeholder?: string;
+    restoredDraft?: {
+        revision: number;
+        text: string;
+        files: AgentChatComposerFile[];
+    } | null;
     textareaRef?: React.Ref<HTMLTextAreaElement>;
 };
-export declare function AgentChatComposer({ accept, allowAttachments, attachmentLayout, className, disabled, forceExpanded, inputToolbarContent, isRunning, onAttachmentCountChange, onStop, onSubmit, placeholder, textareaRef, }: AgentChatComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentChatComposer({ accept, allowAttachments, attachmentLayout, className, disabled, forceExpanded, focusKey, inputToolbarContent, isRunning, isCancelling, onAttachmentCountChange, onStop, onSubmit, placeholder, restoredDraft, textareaRef, }: AgentChatComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/agent-chat-queue.d.ts

@@ -0,0 +1,12 @@
+import type { ThreadMessage, ThreadMessageQueueState } from "@agents24/client";
+export type AgentChatQueueProps = {
+    pending: readonly ThreadMessage[];
+    queue: ThreadMessageQueueState | null;
+    canSteer: boolean;
+    onSteer(message: ThreadMessage): Promise<void>;
+    onRemove(message: ThreadMessage): Promise<void>;
+    onEdit(message: ThreadMessage): Promise<void>;
+    onResume(): Promise<void>;
+    className?: string;
+};
+export declare function AgentChatQueue({ pending, queue, onRemove, onEdit, onResume, className }: AgentChatQueueProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/agent-response-timeline.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ChatHitlPart, ChatHitlResponse, ChatMessage, ChatPart, ChatToolPart } from "../types";
+import type { ChatHitlPart, ChatHitlResponse, ChatMessage, ChatNodeActivityPart, ChatPart, ChatToolPart, ChatUiBlocksPart } from "../types";
 import type { McpConnectRequiredStatus } from "./mcp-connect-required-card";
 import { type MessageResponseProps } from "./message-response";
 import { type AgentChatToolSlots, type AgentChatToolViewMode } from "./tool-sessions";
@@ -14,7 +14,9 @@ export type AgentResponseTimelineProps = {
     message: ChatMessage;
     nodeActivityMode?: "default" | "all" | "hidden";
     onHitlAction?: (part: ChatHitlPart, response: ChatHitlResponse) => void;
+    onNodeSelect?: (part: ChatNodeActivityPart) => void;
     parts?: readonly ChatPart[];
+    renderUiBlocks?: (part: ChatUiBlocksPart) => React.ReactNode;
     responseProps?: Omit<MessageResponseProps, "children" | "streaming" | "streamingId">;
     toolSlots?: AgentChatToolSlots;
     toolViewMode?: AgentChatToolViewMode;
@@ -43,4 +45,4 @@ export type AgentChatPartProps = {
     toolSlots?: AgentChatToolSlots;
 };
 export declare function AgentChatPart({ activeToolId, getHitlActionState, isLoading, isTextStreaming, message, onHitlAction, part, responseProps, toolSlots, }: AgentChatPartProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function AgentResponseTimeline({ getHitlActionState, isLoading, message, nodeActivityMode, onHitlAction, parts: displayParts, responseProps, toolSlots, toolViewMode, }: AgentResponseTimelineProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentResponseTimeline({ getHitlActionState, isLoading, message, nodeActivityMode, onHitlAction, onNodeSelect, parts: displayParts, renderUiBlocks, responseProps, toolSlots, toolViewMode, }: AgentResponseTimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/composer-attachments.d.ts

@@ -1,11 +1,15 @@
 import type { ChatAttachment } from "../types";
+import type { ThreadMessage } from "@agents24/client";
 export type AgentChatComposerFile = ChatAttachment & {
     id: string;
     type: "file";
     url: string;
     filename: string;
     mediaType: string;
-    source: File;
+    source?: File;
+    persistedAttachmentId?: string;
+    byteSize?: number;
 };
 export declare function createAgentChatComposerFile(file: File): AgentChatComposerFile;
 export declare function revokeAgentChatComposerFiles(files: readonly AgentChatComposerFile[]): void;
+export declare function queuedMessageComposerFiles(message: Pick<ThreadMessage, "attachment_ids" | "attachments">): AgentChatComposerFile[];

package/dist/ui/composer-interactions.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export declare function chatComposerAction({ hasDraft, isRunning, isCancelling }: {
+    hasDraft: boolean;
+    isRunning: boolean;
+    isCancelling: boolean;
+}): "stop" | "send";
+export declare function useChatComposerFocus<TDraft>({ textareaRef, disabled, focusKey, restoredDraft, onRestore }: {
+    textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+    disabled: boolean;
+    focusKey?: string | null;
+    restoredDraft?: (TDraft & {
+        revision: number;
+    }) | null;
+    onRestore: (draft: TDraft & {
+        revision: number;
+    }) => void;
+}): () => void;