@agents24/chat-react 0.5.35 → 0.5.37

package/dist/styles.css

@@ -235,12 +235,19 @@ 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-message-action-row--assistant { opacity: 1; pointer-events: auto; transition: opacity 150ms ease; }
+@media (hover: hover) and (pointer: fine) {
+  .a24-chat-message-action-row--assistant { opacity: 0; pointer-events: none; }
+  [data-slot="message"]:is(:hover, :focus-within) .a24-chat-message-action-row--assistant,
+  .a24-chat-message-action-row--assistant:has([data-state="open"]) { opacity: 1; pointer-events: auto; }
+}
 .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-message-action-row--assistant { transition: none; }
   .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; }
@@ -284,6 +291,54 @@ button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); out
 .a24-message-response > :last-child { margin-bottom: 0; }
 .a24-message-response :is(pre, table) { max-width: 100%; overflow-x: auto; }
 .a24-message-response :is(p, li, blockquote, code) { overflow-wrap: anywhere; }
+/* shadcn/ui Code Block: package-owned styles, independent of host Tailwind scanning. */
+.a24-inline-code { background: var(--a24-surface); border-radius: .25rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: .875em; padding: .125rem .375rem; }
+.a24-code-block { --a24-code-inset: 1rem; background: color-mix(in srgb, var(--a24-text) 4%, var(--a24-background)); border: 0; border-radius: 1.25rem; box-sizing: border-box; color: var(--a24-text); display: flex; flex-direction: column; font-size: .8125rem; margin-block: 1rem; max-width: 100%; min-width: 0; overflow: hidden; position: relative; width: 100%; }
+.a24-code-block[data-size="sm"] { --a24-code-inset: .625rem; font-size: .75rem; }
+.a24-code-block--destructive { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a24-danger) 35%, transparent); color: var(--a24-danger); }
+.a24-code-block__header, .a24-code-block__footer { align-items: center; color: var(--a24-muted); display: flex; flex-shrink: 0; gap: .5rem; min-width: 0; padding: var(--a24-code-inset); }
+.a24-code-block__header { padding-bottom: 0; }
+.a24-code-block__footer { padding-top: 0; }
+.a24-code-block__title { align-items: center; display: flex; gap: .375rem; color: var(--a24-text); font-family: var(--font-sans, system-ui, sans-serif); font-size: inherit; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a24-code-block__title > svg { flex-shrink: 0; height: .875rem; width: .875rem; }
+.a24-code-block__title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.a24-code-block__actions { align-items: center; display: flex; flex-shrink: 0; gap: .25rem; margin-block: -.25rem; margin-inline-start: auto; }
+.a24-code-block > .a24-code-block__actions { background: var(--a24-background); border-radius: .375rem; inset-inline-end: .5rem; margin: 0; opacity: 0; position: absolute; top: .5rem; z-index: 1; }
+.a24-code-block:hover > .a24-code-block__actions, .a24-code-block:focus-within > .a24-code-block__actions { opacity: 1; }
+.a24-code-block__action { align-items: center; appearance: none; background: transparent; border: 0; border-radius: .375rem; color: color-mix(in srgb, var(--a24-muted) 70%, transparent); cursor: pointer; display: inline-flex; flex-shrink: 0; height: 1.5rem; justify-content: center; padding: 0; width: 1.5rem; }
+.a24-code-block__action:hover, .a24-code-block__action:focus-visible { background: var(--a24-surface-hover); color: var(--a24-text); }
+.a24-code-block__action:focus-visible { outline: 2px solid var(--a24-focus); outline-offset: -2px; }
+.a24-code-block__action[aria-pressed="true"] { background: var(--a24-surface-hover); color: var(--a24-text); }
+.a24-code-block__action:disabled { cursor: default; opacity: .5; }
+.a24-code-block__action svg { flex-shrink: 0; height: .75rem; pointer-events: none; width: .75rem; }
+.a24-code-block__announcement { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
+.a24-code-block .a24-code-block__content { background: transparent; border: 0; border-radius: 0; color: inherit; font-family: var(--font-mono, ui-monospace, monospace); font-size: inherit; line-height: 1.65; margin: 0; max-height: 32rem; max-width: 100%; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: var(--a24-code-inset); scrollbar-width: thin; text-align: start; white-space: pre; }
+.a24-code-block__content:focus-visible { outline: 2px solid var(--a24-focus); outline-offset: -2px; }
+.a24-code-block .a24-code-block__content { scrollbar-color: color-mix(in srgb, var(--a24-muted) 40%, transparent) transparent; }
+.a24-code-block__content::-webkit-scrollbar { display: block; height: 6px; width: 6px; background: transparent; }
+.a24-code-block__content::-webkit-scrollbar-track, .a24-code-block__content::-webkit-scrollbar-corner { background: transparent; border: 0; box-shadow: none; }
+.a24-code-block__content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--a24-muted) 40%, transparent); border: 0; border-radius: 999px; }
+.a24-code-block__content::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--a24-muted) 60%, transparent); }
+.a24-code-block__content::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
+.a24-code-block:has(> .a24-code-block__header) .a24-code-block__content { padding-top: .5rem; }
+.a24-code-block .a24-code-block__code { background: transparent; border: 0; border-radius: 0; color: inherit; content-visibility: visible; display: grid; font: inherit; min-height: 1lh; min-width: max-content; overflow-wrap: normal; padding: 0; }
+.a24-code-block__content[data-numbered] .a24-code-block__code { grid-template-columns: auto minmax(0, 1fr); }
+.a24-code-block__content[data-wrap] { overflow-wrap: anywhere; white-space: pre-wrap; }
+.a24-code-block__content[data-wrap] .a24-code-block__code { min-width: 0; overflow-wrap: anywhere; }
+.a24-code-block__line { display: block; min-height: 1lh; position: relative; }
+.a24-code-block__line-content { min-width: 0; }
+.a24-code-block__content[data-numbered] .a24-code-block__line { column-gap: 1rem; counter-increment: line; display: grid; grid-column: span 2; grid-template-columns: subgrid; }
+.a24-code-block__content[data-numbered] .a24-code-block__line::before { color: var(--a24-muted); content: counter(line); min-width: 1.5rem; text-align: end; user-select: none; }
+@supports (content: counter(line) / "") { .a24-code-block__content[data-numbered] .a24-code-block__line::before { content: counter(line) / ""; } }
+.a24-code-block__line--added, .a24-code-block__line--highlighted { background: var(--a24-surface-hover); }
+.a24-code-block__line--removed { background: color-mix(in srgb, var(--a24-danger) 10%, transparent); }
+.a24-code-block__line--added::after, .a24-code-block__line--removed::after { inset-inline-start: 0; position: absolute; user-select: none; }
+.a24-code-block__line--added::after { content: "+"; }
+.a24-code-block__line--removed::after { color: var(--a24-danger); content: "−"; }
+.a24-code-token { color: var(--shiki-light); }
+:root.dark .a24-code-token, [data-agents24-color-mode="dark"] .a24-code-token, [data-agents24-theme-root].dark .a24-code-token { color: var(--shiki-dark); }
+@media (prefers-color-scheme: dark) { :root:not(.light):not([data-agents24-color-mode="light"]):not(:has([data-agents24-color-mode="light"])) .a24-code-token { color: var(--shiki-dark); } }
+@media (pointer: coarse) { .a24-code-block > .a24-code-block__actions { opacity: 1; } }
 .a24-source-link,
 .a24-citation { color: #075f9a; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
 .a24-output-attachment { background: var(--a24-surface); border: 1px solid var(--a24-border); border-radius: .5rem; display: inline-flex; font-size: .8rem; padding: .45rem .65rem; }

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

@@ -20,6 +20,7 @@ export type AgentChatComposerProps = {
     disabled?: boolean;
     forceExpanded?: boolean;
     focusKey?: string | null;
+    scopeKey?: string | null;
     inputToolbarContent?: React.ReactNode;
     isRunning?: boolean;
     isCancelling?: boolean;
@@ -34,4 +35,4 @@ export type AgentChatComposerProps = {
     } | null;
     textareaRef?: React.Ref<HTMLTextAreaElement>;
 };
-export declare function AgentChatComposer({ inputContract, recordingEnabled, contextWindow, accept, allowAttachments, className, disabled, forceExpanded, focusKey, inputToolbarContent, isRunning, isCancelling, onAttachmentCountChange, onStop, onSubmit, placeholder, restoredDraft, textareaRef, }: AgentChatComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentChatComposer({ inputContract, recordingEnabled, contextWindow, accept, allowAttachments, className, disabled, forceExpanded, focusKey, scopeKey, inputToolbarContent, isRunning, isCancelling, onAttachmentCountChange, onStop, onSubmit, placeholder, restoredDraft, textareaRef, }: AgentChatComposerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,5 @@
+import type { HitlSubmissionOptions } from "@agents24/react";
+import type { HitlSubmissionLabels } from "./hitl-submission-status";
 import * as React from "react";
 import type { ChatHitlPart, ChatHitlResponse, ChatMessage } from "../types";
 import { type ChatAttachmentContentResolver } from "./adapters";
@@ -19,10 +21,12 @@ export type AgentChatMessageProps = {
     className?: string;
     contentClassName?: string;
     dir?: "ltr" | "rtl";
+    hitlLabels?: Partial<HitlSubmissionLabels>;
+    onHitlPaint?: (durationMs: number) => void;
     getHitlActionState?: (part: ChatHitlPart) => AgentChatPartActionState | undefined;
     message: ChatMessage;
     nodeActivityMode?: "default" | "all" | "hidden";
-    onHitlAction?: (part: ChatHitlPart, response: ChatHitlResponse) => void;
+    onHitlAction?: (part: ChatHitlPart, response: ChatHitlResponse, options?: HitlSubmissionOptions) => void;
     Timeline?: AgentChatTimelineComponent;
     renderAssistantContent?: (input: {
         isStreaming: boolean;
@@ -45,4 +49,4 @@ export declare function AgentChatUserMessageActionRow({ children, className, }:
     children: React.ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function AgentChatMessage({ actionHandlers, additionalActions, actions, actionsClassName, attachmentContentResolver, className, contentClassName, dir, getHitlActionState, message, nodeActivityMode, onHitlAction, Timeline, renderAssistantContent, renderUserContent, showAssistantAttachments, streamingMessageId, userMessageCollapsedLines, userMessageContent, userMessageCollapseThreshold, userMessageShowLessLabel, userMessageShowMoreLabel, }: AgentChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentChatMessage({ actionHandlers, additionalActions, actions, actionsClassName, attachmentContentResolver, className, contentClassName, dir, getHitlActionState, hitlLabels, onHitlPaint, message, nodeActivityMode, onHitlAction, Timeline, renderAssistantContent, renderUserContent, showAssistantAttachments, streamingMessageId, userMessageCollapsedLines, userMessageContent, userMessageCollapseThreshold, userMessageShowLessLabel, userMessageShowMoreLabel, }: AgentChatMessageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,5 @@
+import type { HitlSubmissionOptions } from "@agents24/react";
+import { type HitlSubmissionLabels } from "./hitl-submission-status";
 import * as React from "react";
 import type { ChatHitlPart, ChatHitlResponse, ChatMessage, ChatNodeActivityPart, ChatPart, ChatToolPart, ChatUiBlocksPart } from "../types";
 import type { McpConnectRequiredStatus } from "./mcp-connect-required-card";
@@ -6,14 +8,18 @@ import { type AgentChatToolSlots, type AgentChatToolViewMode } from "./tool-sess
 export type AgentChatPartActionState = {
     status?: McpConnectRequiredStatus | string;
     error?: string | null;
+    action?: string;
+    retry?: () => Promise<void>;
 };
 export type HitlActionState = AgentChatPartActionState;
 export type AgentResponseTimelineProps = {
+    hitlLabels?: Partial<HitlSubmissionLabels>;
+    onHitlPaint?: (durationMs: number) => void;
     getHitlActionState?: (part: ChatHitlPart) => AgentChatPartActionState | undefined;
     isLoading?: boolean;
     message: ChatMessage;
     nodeActivityMode?: "default" | "all" | "hidden";
-    onHitlAction?: (part: ChatHitlPart, response: ChatHitlResponse) => void;
+    onHitlAction?: (part: ChatHitlPart, response: ChatHitlResponse, options?: HitlSubmissionOptions) => void;
     onNodeSelect?: (part: ChatNodeActivityPart) => void;
     parts?: readonly ChatPart[];
     renderUiBlocks?: (part: ChatUiBlocksPart) => React.ReactNode;
@@ -36,6 +42,8 @@ export declare function AgentChatToolGroup({ activeToolId, parts, }: {
 export type AgentChatPartProps = {
     activeToolId?: string | null;
     getHitlActionState?: AgentResponseTimelineProps["getHitlActionState"];
+    hitlLabels?: AgentResponseTimelineProps["hitlLabels"];
+    onHitlPaint?: AgentResponseTimelineProps["onHitlPaint"];
     isLoading?: boolean;
     isTextStreaming?: boolean;
     message: ChatMessage;
@@ -44,5 +52,5 @@ export type AgentChatPartProps = {
     responseProps?: AgentResponseTimelineProps["responseProps"];
     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, onNodeSelect, parts: displayParts, renderUiBlocks, responseProps, toolSlots, toolViewMode, }: AgentResponseTimelineProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentChatPart({ activeToolId, getHitlActionState, hitlLabels, onHitlPaint, isLoading, isTextStreaming, message, onHitlAction, part, responseProps, toolSlots, }: AgentChatPartProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AgentResponseTimeline({ getHitlActionState, hitlLabels, onHitlPaint, isLoading, message, nodeActivityMode, onHitlAction, onNodeSelect, parts: displayParts, renderUiBlocks, responseProps, toolSlots, toolViewMode, }: AgentResponseTimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/ask-user-interaction.d.ts

@@ -1,8 +1,12 @@
+import { type HitlSubmissionLabels, type HitlSubmissionPresentation } from "./hitl-submission-status";
 import type { ChatHitlAnswer, ChatHitlPart } from "../types";
 export type AskUserInteractionProps = {
     error?: string | null;
+    submission?: HitlSubmissionPresentation;
+    submissionLabels?: Partial<HitlSubmissionLabels>;
+    onSubmissionPaint?: (durationMs: number) => void;
     isBusy?: boolean;
     onSubmit?: (answers: ChatHitlAnswer[]) => void;
     part: ChatHitlPart;
 };
-export declare function AskUserInteraction({ error, isBusy, onSubmit, part, }: AskUserInteractionProps): import("react/jsx-runtime").JSX.Element;
+export declare function AskUserInteraction({ error, submission, submissionLabels, onSubmissionPaint, isBusy, onSubmit, part, }: AskUserInteractionProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/bubble.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-    variant?: "default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
     align?: "start" | "end";

package/dist/ui/code-block.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const codeBlockVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CodeBlock({ className, variant, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof codeBlockVariants> & {
+    size?: "default" | "sm";
+}): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockActions({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockCopyButton({ value, className, onClick, ...props }: React.ComponentProps<"button"> & {
+    value: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockWrapButton({ wrap, onWrapChange, className, onClick, ...props }: React.ComponentProps<"button"> & {
+    wrap: boolean;
+    onWrapChange: (wrap: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockDownloadButton({ value, filename, className, onClick, ...props }: React.ComponentProps<"button"> & {
+    value: string;
+    filename?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockContent({ className, children, style, wrap, lineNumbers, startLine, ...props }: React.ComponentProps<"pre"> & {
+    wrap?: boolean;
+    lineNumbers?: boolean;
+    startLine?: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare const codeBlockLineVariants: (props?: ({
+    variant?: "default" | "added" | "removed" | "highlighted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CodeBlockLine({ className, variant, children, ...props }: React.ComponentProps<"span"> & VariantProps<typeof codeBlockLineVariants>): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { CodeBlock, CodeBlockHeader, CodeBlockTitle, CodeBlockActions, CodeBlockCopyButton, CodeBlockWrapButton, CodeBlockDownloadButton, CodeBlockContent, CodeBlockLine, CodeBlockFooter, };

package/dist/ui/code-highlighter.d.ts

@@ -0,0 +1,8 @@
+import { type GrammarState } from "shiki/core";
+export declare function loadHighlighter(language: string): Promise<{
+    highlight(code: string, state?: GrammarState): {
+        lines: import("react/jsx-runtime").JSX.Element[][];
+        state: GrammarState | undefined;
+    };
+} | null>;
+export declare function highlightCode(code: string, language: string): Promise<import("react/jsx-runtime").JSX.Element[][] | null>;

package/dist/ui/hitl-submission-status.d.ts

@@ -0,0 +1,22 @@
+export type HitlSubmissionLabels = {
+    submitting: string;
+    checking: string;
+    uncertain: string;
+    retry: string;
+    accepted: string;
+    approved: string;
+    rejected: string;
+};
+export declare const defaultHitlSubmissionLabels: HitlSubmissionLabels;
+export type HitlSubmissionPresentation = {
+    status?: string;
+    action?: string;
+    retry?: () => Promise<void>;
+};
+export declare function isHitlSubmissionCompact(state?: HitlSubmissionPresentation): boolean;
+/** Also available to host-owned approval cards; keeps their decision feedback consistent. */
+export declare function HitlSubmissionStatus({ state, labels: overrides, onPaint }: {
+    state: HitlSubmissionPresentation;
+    labels?: Partial<HitlSubmissionLabels>;
+    onPaint?: (durationMs: number) => void;
+}): import("react/jsx-runtime").JSX.Element;