@agents24/chat-react 0.1.8 → 0.1.10

package/dist/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/templates/agent-chat-shell.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport {\n  LatestThreadScroller,\n  type LatestThreadScrollerOutlineItem,\n} from \"../latest-thread-scroller\";\nimport type { ChatMessage } from \"../types\";\nimport { cn } from \"../ui/utils\";\n\nexport type AgentChatShellMessage = Pick<ChatMessage, \"id\" | \"role\" | \"content\"> & {\n  [key: string]: unknown;\n};\n\nexport type AgentChatShellProps<TMessage extends AgentChatShellMessage> = {\n  className?: string;\n  contentClassName?: string;\n  composer?: React.ReactNode;\n  composerOverlayClassName?: string;\n  composerOverlayHeight?: number;\n  defaultComposerOverlayHeight?: number;\n  dir?: \"ltr\" | \"rtl\";\n  hideComposer?: boolean;\n  isLoadingOlder?: boolean;\n  messages: TMessage[];\n  onLoadOlder?: (() => Promise<unknown> | unknown) | null;\n  outlineItems?: LatestThreadScrollerOutlineItem[];\n  outlineSide?: \"left\" | \"right\";\n  renderMessage: (message: TMessage, index: number) => React.ReactNode;\n  renderOlderLoader?: () => React.ReactNode;\n};\n\nconst defaultOutlineLabel = (content: unknown, index: number) => {\n  const label = String(content || \"\").replace(/\\s+/g, \" \").trim();\n  return label || `Turn ${index + 1}`;\n};\n\nconst defaultOutlinePreview = (content: unknown) =>\n  String(content || \"\").replace(/\\s+/g, \" \").trim();\n\nexport function buildAgentChatOutlineItems<TMessage extends AgentChatShellMessage>(\n  messages: TMessage[],\n  getLabel: (message: TMessage, index: number) => string = (message, index) =>\n    defaultOutlineLabel(message.content, index),\n  getResponsePreview: (message: TMessage) => string = (message) =>\n    defaultOutlinePreview(message.content)\n): LatestThreadScrollerOutlineItem[] {\n  return messages.reduce((items, message) => {\n    if (message.role === \"user\") {\n      items.push({\n        id: message.id,\n        label: getLabel(message, items.length),\n        messageIds: [message.id],\n      });\n      return items;\n    }\n    const currentItem = items[items.length - 1];\n    currentItem?.messageIds?.push(message.id);\n    if (\n      currentItem &&\n      !currentItem.responsePreview &&\n      message.role === \"assistant\"\n    ) {\n      currentItem.responsePreview = getResponsePreview(message);\n    }\n    return items;\n  }, [] as LatestThreadScrollerOutlineItem[]);\n}\n\nexport function AgentChatShell<TMessage extends AgentChatShellMessage>({\n  className,\n  composer,\n  composerOverlayClassName,\n  composerOverlayHeight,\n  contentClassName,\n  defaultComposerOverlayHeight = 192,\n  dir = \"ltr\",\n  hideComposer = false,\n  isLoadingOlder = false,\n  messages,\n  onLoadOlder,\n  outlineItems,\n  outlineSide = \"left\",\n  renderMessage,\n  renderOlderLoader,\n}: AgentChatShellProps<TMessage>) {\n  const overlayRef = React.useRef<HTMLDivElement | null>(null);\n  const [measuredOverlayHeight, setMeasuredOverlayHeight] = React.useState(\n    defaultComposerOverlayHeight\n  );\n  const olderPageRequestRef = React.useRef(false);\n  const items = React.useMemo(\n    () => outlineItems || buildAgentChatOutlineItems(messages),\n    [messages, outlineItems]\n  );\n\n  React.useEffect(() => {\n    const overlay = overlayRef.current;\n    if (!overlay || hideComposer) return;\n    const updateHeight = () => {\n      setMeasuredOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height));\n    };\n    updateHeight();\n    const observer = new ResizeObserver(updateHeight);\n    observer.observe(overlay);\n    return () => observer.disconnect();\n  }, [hideComposer]);\n\n  const handleScroll = React.useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      if (\n        !onLoadOlder ||\n        isLoadingOlder ||\n        olderPageRequestRef.current ||\n        event.currentTarget.scrollTop > 48\n      ) {\n        return;\n      }\n      olderPageRequestRef.current = true;\n      void Promise.resolve(onLoadOlder()).finally(() => {\n        olderPageRequestRef.current = false;\n      });\n    },\n    [isLoadingOlder, onLoadOlder]\n  );\n\n  const bottomPadding = hideComposer\n    ? 32\n    : (composerOverlayHeight ?? measuredOverlayHeight) + 72;\n\n  return (\n    <div className={cn(\"relative flex h-full min-h-0 w-full flex-col\", className)} dir={dir}>\n      <LatestThreadScroller.Provider>\n        <LatestThreadScroller.Root>\n          <LatestThreadScroller.Viewport onScroll={handleScroll}>\n            <LatestThreadScroller.Content\n              className={cn(\n                \"mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 pt-12\",\n                contentClassName\n              )}\n              style={{ paddingBottom: bottomPadding }}\n            >\n              {isLoadingOlder ? renderOlderLoader?.() : null}\n              {messages.map((message, index) => (\n                <LatestThreadScroller.Item\n                  key={message.id}\n                  messageId={message.id}\n                  scrollAnchor={message.role === \"user\"}\n                >\n                  {renderMessage(message, index)}\n                </LatestThreadScroller.Item>\n              ))}\n            </LatestThreadScroller.Content>\n          </LatestThreadScroller.Viewport>\n          <LatestThreadScroller.Outline\n            dir={dir}\n            items={items}\n            side={outlineSide}\n          />\n        </LatestThreadScroller.Root>\n\n        {!hideComposer && composer ? (\n          <div\n            ref={overlayRef}\n            className={cn(\n              \"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-visible px-4 pb-4 pt-10\",\n              composerOverlayClassName\n            )}\n            style={{\n              background:\n                \"linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--chat-background, var(--background)) 85%, transparent) 45%, var(--chat-background, var(--background)) 65%, var(--chat-background, var(--background)) 100%)\",\n            }}\n          >\n            <div className=\"pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3\">\n              <LatestThreadScroller.Button />\n            </div>\n            <div className=\"pointer-events-auto mx-auto w-full max-w-3xl\">\n              {composer}\n            </div>\n          </div>\n        ) : null}\n      </LatestThreadScroller.Provider>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/templates/agent-chat-shell.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport {\n  LatestThreadScroller,\n  type LatestThreadScrollerOutlineItem,\n} from \"../latest-thread-scroller\";\nimport type { ChatMessage } from \"../types\";\nimport { cn } from \"../ui/utils\";\n\nexport type AgentChatShellMessage = Pick<ChatMessage, \"id\" | \"role\" | \"content\"> & {\n  [key: string]: unknown;\n};\n\nexport type AgentChatShellScrollState = {\n  canScroll: boolean;\n  isScrolled: boolean;\n};\n\nexport type AgentChatShellProps<TMessage extends AgentChatShellMessage> = {\n  className?: string;\n  contentClassName?: string;\n  composer?: React.ReactNode;\n  composerOverlayClassName?: string;\n  composerOverlayHeight?: number;\n  defaultComposerOverlayHeight?: number;\n  dir?: \"ltr\" | \"rtl\";\n  emptyInputAttachmentCount?: number;\n  emptyTitle?: string;\n  hideComposer?: boolean;\n  isLoadingOlder?: boolean;\n  messages: TMessage[];\n  onLoadOlder?: (() => Promise<unknown> | unknown) | null;\n  onScrollStateChange?: (state: AgentChatShellScrollState) => void;\n  outlineItems?: LatestThreadScrollerOutlineItem[];\n  outlineSide?: \"left\" | \"right\";\n  renderEmptyState?: (input: { composer?: React.ReactNode; title: string }) => React.ReactNode;\n  renderMessage: (message: TMessage, index: number) => React.ReactNode;\n  renderOlderLoader?: () => React.ReactNode;\n};\n\nexport function getAgentChatShellScrollState(\n  viewport: Pick<HTMLElement, \"clientHeight\" | \"scrollHeight\" | \"scrollTop\">\n): AgentChatShellScrollState {\n  const canScroll = viewport.scrollHeight - viewport.clientHeight > 1;\n  return {\n    canScroll,\n    isScrolled: canScroll && viewport.scrollTop > 4,\n  };\n}\n\nconst defaultOutlineLabel = (content: unknown, index: number) => {\n  const label = String(content || \"\").replace(/\\s+/g, \" \").trim();\n  return label || `Turn ${index + 1}`;\n};\n\nconst defaultOutlinePreview = (content: unknown) =>\n  String(content || \"\").replace(/\\s+/g, \" \").trim();\n\nexport function buildAgentChatOutlineItems<TMessage extends AgentChatShellMessage>(\n  messages: TMessage[],\n  getLabel: (message: TMessage, index: number) => string = (message, index) =>\n    defaultOutlineLabel(message.content, index),\n  getResponsePreview: (message: TMessage) => string = (message) =>\n    defaultOutlinePreview(message.content)\n): LatestThreadScrollerOutlineItem[] {\n  return messages.reduce((items, message) => {\n    if (message.role === \"user\") {\n      items.push({\n        id: message.id,\n        label: getLabel(message, items.length),\n        messageIds: [message.id],\n      });\n      return items;\n    }\n    const currentItem = items[items.length - 1];\n    currentItem?.messageIds?.push(message.id);\n    if (\n      currentItem &&\n      !currentItem.responsePreview &&\n      message.role === \"assistant\"\n    ) {\n      currentItem.responsePreview = getResponsePreview(message);\n    }\n    return items;\n  }, [] as LatestThreadScrollerOutlineItem[]);\n}\n\nexport function AgentChatShell<TMessage extends AgentChatShellMessage>({\n  className,\n  composer,\n  composerOverlayClassName,\n  composerOverlayHeight,\n  contentClassName,\n  defaultComposerOverlayHeight = 192,\n  dir = \"ltr\",\n  emptyInputAttachmentCount = 0,\n  emptyTitle = \"Ready when you are.\",\n  hideComposer = false,\n  isLoadingOlder = false,\n  messages,\n  onLoadOlder,\n  onScrollStateChange,\n  outlineItems,\n  outlineSide = \"left\",\n  renderEmptyState,\n  renderMessage,\n  renderOlderLoader,\n}: AgentChatShellProps<TMessage>) {\n  const overlayRef = React.useRef<HTMLDivElement | null>(null);\n  const viewportRef = React.useRef<HTMLElement | null>(null);\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  const lastScrollStateRef = React.useRef<AgentChatShellScrollState | null>(null);\n  const [measuredOverlayHeight, setMeasuredOverlayHeight] = React.useState(\n    defaultComposerOverlayHeight\n  );\n  const olderPageRequestRef = React.useRef(false);\n  const items = React.useMemo(\n    () => outlineItems || buildAgentChatOutlineItems(messages),\n    [messages, outlineItems]\n  );\n\n  const updateScrollState = React.useCallback(() => {\n    const viewport = viewportRef.current;\n    if (!viewport || !onScrollStateChange) return;\n    const next = getAgentChatShellScrollState(viewport);\n    const previous = lastScrollStateRef.current;\n    if (\n      previous &&\n      previous.canScroll === next.canScroll &&\n      previous.isScrolled === next.isScrolled\n    ) {\n      return;\n    }\n    lastScrollStateRef.current = next;\n    onScrollStateChange(next);\n  }, [onScrollStateChange]);\n\n  React.useEffect(() => {\n    const overlay = overlayRef.current;\n    if (!overlay || hideComposer) return;\n    const updateHeight = () => {\n      setMeasuredOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height));\n    };\n    updateHeight();\n    const observer = new ResizeObserver(updateHeight);\n    observer.observe(overlay);\n    return () => observer.disconnect();\n  }, [hideComposer]);\n\n  React.useEffect(() => {\n    if (!onScrollStateChange) return;\n    updateScrollState();\n    const viewport = viewportRef.current;\n    const content = contentRef.current;\n    if (!viewport || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(viewport);\n    if (content) observer.observe(content);\n    return () => observer.disconnect();\n  }, [messages, onScrollStateChange, updateScrollState]);\n\n  const handleScroll = React.useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      updateScrollState();\n      if (\n        !onLoadOlder ||\n        isLoadingOlder ||\n        olderPageRequestRef.current ||\n        event.currentTarget.scrollTop > 48\n      ) {\n        return;\n      }\n      olderPageRequestRef.current = true;\n      void Promise.resolve(onLoadOlder()).finally(() => {\n        olderPageRequestRef.current = false;\n      });\n    },\n    [isLoadingOlder, onLoadOlder, updateScrollState]\n  );\n\n  const bottomPadding = hideComposer\n    ? 32\n    : (composerOverlayHeight ?? measuredOverlayHeight) + 72;\n  const isEmptyState = messages.length === 0;\n\n  if (isEmptyState) {\n    return (\n      <div className={cn(\"relative flex h-full min-h-0 w-full flex-col overflow-visible px-4\", className)} dir={dir}>\n        {renderEmptyState ? (\n          renderEmptyState({ composer: hideComposer ? undefined : composer, title: emptyTitle })\n        ) : (\n          <div className=\"relative z-10 flex h-full flex-1 flex-col justify-center p-0 pt-13\">\n            <div className=\"flex w-full flex-col items-center pb-34 text-center animate-in fade-in slide-in-from-bottom-4 duration-500\">\n              <p\n                className={cn(\n                  \"pb-6 text-3xl font-semibold transition-transform duration-200\",\n                  emptyInputAttachmentCount > 0 && \"-translate-y-12\"\n                )}\n              >\n                {emptyTitle}\n              </p>\n              {!hideComposer && composer ? (\n                <div className=\"mx-auto w-full max-w-3xl px-4\">{composer}</div>\n              ) : null}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"relative flex h-full min-h-0 w-full flex-col\", className)} dir={dir}>\n      <LatestThreadScroller.Provider>\n        <LatestThreadScroller.Root>\n          <LatestThreadScroller.Viewport\n            onScroll={handleScroll}\n            onViewportChange={(node) => {\n              viewportRef.current = node;\n              updateScrollState();\n            }}\n          >\n            <LatestThreadScroller.Content\n              ref={contentRef}\n              className={cn(\n                \"mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 pt-12\",\n                contentClassName\n              )}\n              style={{ paddingBottom: bottomPadding }}\n            >\n              {isLoadingOlder ? renderOlderLoader?.() : null}\n              {messages.map((message, index) => (\n                <LatestThreadScroller.Item\n                  key={message.id}\n                  messageId={message.id}\n                  scrollAnchor={message.role === \"user\"}\n                >\n                  {renderMessage(message, index)}\n                </LatestThreadScroller.Item>\n              ))}\n            </LatestThreadScroller.Content>\n          </LatestThreadScroller.Viewport>\n          <LatestThreadScroller.Outline\n            dir={dir}\n            items={items}\n            side={outlineSide}\n          />\n        </LatestThreadScroller.Root>\n\n        {!hideComposer && composer ? (\n          <div\n            ref={overlayRef}\n            className={cn(\n              \"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-visible px-4 pb-4 pt-10\",\n              composerOverlayClassName\n            )}\n            style={{\n              background:\n                \"linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--chat-background, var(--background)) 85%, transparent) 45%, var(--chat-background, var(--background)) 65%, var(--chat-background, var(--background)) 100%)\",\n            }}\n          >\n            <div className=\"pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3\">\n              <LatestThreadScroller.Button />\n            </div>\n            <div className=\"pointer-events-auto mx-auto w-full max-w-3xl px-4\">\n              {composer}\n            </div>\n          </div>\n        ) : null}\n      </LatestThreadScroller.Provider>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/transport.d.ts

@@ -18,6 +18,16 @@ export type FetchChatTransportRoutes = {
     deleteThread?: (input: {
         threadId: string;
     }) => string;
+    threadEvents?: (input: {
+        cursor?: number | null;
+    }) => string;
+    resumeRun?: (input: {
+        runId: string;
+    }) => string;
+    startMcpAuth?: (input: {
+        runId: string;
+        serverId: string;
+    }) => string;
 };
 export type FetchChatTransportOptions = {
     routes: FetchChatTransportRoutes;
@@ -25,5 +35,9 @@ export type FetchChatTransportOptions = {
     headers?: () => MaybePromise<HeadersInit>;
     streamBody?: (input: ChatSubmitInput) => unknown;
 };
+export declare class ChatTransportError extends Error {
+    status: number;
+    constructor(message: string, status: number);
+}
 export declare const createFetchChatTransport: ({ routes, fetchImpl, headers, streamBody, }: FetchChatTransportOptions) => ChatTransport;
 export {};

package/dist/types.d.ts

@@ -80,10 +80,13 @@ export type ChatUiBlocksPart = {
     errorText?: string | null;
     raw: Record<string, unknown>;
 };
-export type ChatApprovalPart = {
+export type ChatHitlPart = {
     id: string;
-    type: "approval";
-    kind: "approval";
+    type: "hitl";
+    kind: "hitl";
+    hitl: Record<string, unknown>;
+    interruptId?: string | null;
+    hitlKind?: string | null;
     raw: Record<string, unknown>;
 };
 export type ChatErrorPart = {
@@ -101,7 +104,7 @@ export type ChatDataPart = {
     data: Record<string, unknown>;
     raw: Record<string, unknown>;
 };
-export type ChatPart = ChatTextPart | ChatToolPart | ChatReasoningPart | ChatUiBlocksPart | ChatApprovalPart | ChatErrorPart | ChatDataPart;
+export type ChatPart = ChatTextPart | ChatToolPart | ChatReasoningPart | ChatUiBlocksPart | ChatHitlPart | ChatErrorPart | ChatDataPart;
 export type ToolRenderer = (props: {
     part: ChatToolPart;
     message: ChatMessage;
@@ -173,6 +176,22 @@ export type ChatThreadSummary = {
     isRunning?: boolean;
     [key: string]: unknown;
 };
+export type ChatThreadSummaryEvent = {
+    schema_version?: string;
+    event: "thread.summary.updated";
+    cursor?: number;
+    thread: ChatThreadSummary;
+} | {
+    schema_version?: string;
+    event: "thread.deleted";
+    cursor?: number;
+    thread_id: string;
+} | {
+    schema_version?: string;
+    event: "snapshot_required";
+    cursor?: number;
+    reason?: string;
+};
 export type ChatThreadTurn = {
     id?: string;
     run_id?: string;
@@ -216,6 +235,32 @@ export type ChatSubmitMessage = {
     state?: Record<string, unknown>;
     [key: string]: unknown;
 };
+export type ChatHitlDecisionType = "approve" | "edit" | "reject" | "respond" | "connect" | string;
+export type ChatHitlResumeDecision = {
+    type: ChatHitlDecisionType;
+    action_id?: string | null;
+    message?: string;
+    response?: string;
+    edited_action?: Record<string, unknown>;
+    [key: string]: unknown;
+};
+export type ChatHitlResumeInput = {
+    runId: string;
+    interruptId: string;
+    decisions: ChatHitlResumeDecision[];
+    client?: Record<string, unknown>;
+};
+export type ChatMcpAuthStartInput = {
+    runId: string;
+    interruptId?: string | null;
+    serverId: string;
+    principalType?: string | null;
+    principalId?: string | null;
+    client?: Record<string, unknown>;
+};
+export type ChatMcpAuthStartResult = {
+    authorization_url: string;
+};
 export type ChatTransport = {
     listThreads: (input?: {
         signal?: AbortSignal;
@@ -251,6 +296,16 @@ export type ChatTransport = {
         file: File;
         signal?: AbortSignal;
     }) => Promise<ChatAttachment>;
+    resumeHitl?: (input: ChatHitlResumeInput) => Promise<{
+        run_id?: string;
+        status?: string;
+        thread_id?: string | null;
+    }>;
+    startMcpAuth?: (input: ChatMcpAuthStartInput) => Promise<ChatMcpAuthStartResult>;
+    subscribeThreadEvents?: (input: {
+        cursor?: number | null;
+        signal?: AbortSignal;
+    }, onEvent: (event: ChatThreadSummaryEvent) => void | Promise<void>) => Promise<void>;
 };
 export type ChatStreamResult = {
     threadId?: string | null;
@@ -284,6 +339,7 @@ export type ChatController = {
     isLoadingHistory: boolean;
     isLoadingOlder: boolean;
     isRefreshingThreads: boolean;
+    isSelectingThread: boolean;
     hasOlderTurns: boolean;
     liked: Record<string, boolean>;
     disliked: Record<string, boolean>;
@@ -291,6 +347,7 @@ export type ChatController = {
     lastThinkingDurationMs: number | null;
     activeRunId: string | null;
     handleSubmit: (message: ChatSubmitMessage) => Promise<void>;
+    attachRun: (runId: string, threadId?: string | null) => Promise<void>;
     handleStop: () => void;
     handleCopy: (content: string, messageId: string) => void;
     handleLike: (msg: ChatMessage) => Promise<void>;

package/dist/ui/adapters.d.ts

@@ -1,7 +1,6 @@
 import * as React from "react";
 import type { ChatAttachment as Agents24ChatAttachment, ChatMessage as Agents24ChatMessage } from "../types";
 import { Attachment, AttachmentGroup } from "./attachment";
-import { BubbleContent } from "./bubble";
 import { Message } from "./message";
 export type ChatMessageRole = Agents24ChatMessage["role"] | "system" | "data";
 export type ChatMessageProps = Omit<React.ComponentProps<typeof Message>, "align"> & {
@@ -9,7 +8,7 @@ export type ChatMessageProps = Omit<React.ComponentProps<typeof Message>, "align
     align?: "start" | "end";
 };
 export declare function ChatMessage(input: ChatMessageProps): React.ReactElement;
-export type ChatMessageContentProps = React.ComponentProps<typeof BubbleContent> & {
+export type ChatMessageContentProps = React.ComponentProps<"div"> & {
     from?: ChatMessageRole;
 };
 export declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): React.ReactElement;

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { ChatMessage } from "../types";
+export type AgentChatMessageActionHandlers = {
+    copied?: boolean;
+    disliked?: boolean;
+    liked?: boolean;
+    onCopy?: (content: string, messageId: string) => void;
+    onDislike?: (message: ChatMessage) => void | Promise<void>;
+    onLike?: (message: ChatMessage) => void | Promise<void>;
+    onRetry?: (message: ChatMessage) => void | Promise<void>;
+};
+export type AgentChatDefaultActionsProps = {
+    handlers?: AgentChatMessageActionHandlers;
+    message: ChatMessage;
+};
+export declare function AgentChatDefaultActions({ handlers, message, }: AgentChatDefaultActionsProps): React.JSX.Element | null;

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { ChatAttachment } from "../types";
+export type AgentChatComposerFile = ChatAttachment & {
+    id: string;
+    type: "file";
+    url: string;
+    filename: string;
+    mediaType: string;
+};
+export type AgentChatComposerSubmit = {
+    text: string;
+    files: AgentChatComposerFile[];
+};
+export type AgentChatComposerProps = {
+    accept?: string;
+    allowAttachments?: boolean;
+    attachmentLayout?: "flow" | "overlay";
+    className?: string;
+    disabled?: boolean;
+    inputToolbarContent?: React.ReactNode;
+    isRunning?: boolean;
+    onAttachmentCountChange?: (count: number) => void;
+    onStop?: () => void;
+    onSubmit: (message: AgentChatComposerSubmit) => Promise<void> | void;
+    placeholder?: string;
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+};
+export declare function AgentChatComposer({ accept, allowAttachments, attachmentLayout, className, disabled, inputToolbarContent, isRunning, onAttachmentCountChange, onStop, onSubmit, placeholder, textareaRef, }: AgentChatComposerProps): React.JSX.Element;

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import type { ChatHitlPart, ChatMessage, ChatPart } from "../types";
+import { type AgentChatMessageActionHandlers } from "./agent-chat-actions";
+import { type AgentChatPartActionState } from "./agent-response-timeline";
+export type AgentChatUserMessageContentProps = {
+    collapsedLines?: number;
+    collapseThreshold?: number | null;
+    content: string;
+    showLessLabel?: string;
+    showMoreLabel?: string;
+};
+export type AgentChatMessageProps = {
+    actionHandlers?: AgentChatMessageActionHandlers;
+    actions?: React.ReactNode;
+    actionsClassName?: string;
+    className?: string;
+    contentClassName?: string;
+    dir?: "ltr" | "rtl";
+    getHitlActionState?: (part: ChatHitlPart) => AgentChatPartActionState | undefined;
+    message: ChatMessage;
+    onHitlAction?: (part: ChatHitlPart, decision: string) => void;
+    renderAssistantContent?: (input: {
+        isStreaming: boolean;
+        message: ChatMessage;
+    }) => React.ReactNode;
+    renderPart?: (part: ChatPart, message: ChatMessage) => React.ReactNode;
+    renderUserContent?: (input: {
+        message: ChatMessage;
+    }) => React.ReactNode;
+    showAssistantAttachments?: boolean;
+    streamingMessageId?: string | null;
+    userMessageCollapsedLines?: number;
+    userMessageContent?: string;
+    userMessageCollapseThreshold?: number | null;
+    userMessageShowLessLabel?: string;
+    userMessageShowMoreLabel?: string;
+};
+export declare function shouldCollapseUserMessage(content: string, threshold?: number | null | undefined): boolean;
+export declare function AgentChatUserMessageContent({ collapsedLines, collapseThreshold, content, showLessLabel, showMoreLabel, }: AgentChatUserMessageContentProps): React.JSX.Element;
+export declare function AgentChatMessage({ actionHandlers, actions, actionsClassName, className, contentClassName, dir, getHitlActionState, message, onHitlAction, renderAssistantContent, renderPart, renderUserContent, showAssistantAttachments, streamingMessageId, userMessageCollapsedLines, userMessageContent, userMessageCollapseThreshold, userMessageShowLessLabel, userMessageShowMoreLabel, }: AgentChatMessageProps): React.JSX.Element;

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { ChatHitlPart, ChatMessage, ChatPart } from "../types";
+import { type McpConnectRequiredStatus } from "./mcp-connect-required-card";
+export type AgentChatPartActionState = {
+    status?: McpConnectRequiredStatus | string;
+    error?: string | null;
+};
+export type AgentResponseTimelineProps = {
+    getHitlActionState?: (part: ChatHitlPart) => AgentChatPartActionState | undefined;
+    isLoading?: boolean;
+    message: ChatMessage;
+    onHitlAction?: (part: ChatHitlPart, decision: string) => void;
+    renderPart?: (part: ChatPart, message: ChatMessage) => React.ReactNode;
+};
+declare function DefaultPartRow({ activeToolId, getHitlActionState, isLoading, message, onHitlAction, part, }: {
+    activeToolId?: string | null;
+    getHitlActionState?: AgentResponseTimelineProps["getHitlActionState"];
+    isLoading?: boolean;
+    message: ChatMessage;
+    onHitlAction?: AgentResponseTimelineProps["onHitlAction"];
+    part: ChatPart;
+}): React.JSX.Element | null;
+export declare function AgentResponseTimeline({ getHitlActionState, isLoading, message, onHitlAction, renderPart, }: AgentResponseTimelineProps): React.JSX.Element;
+export { DefaultPartRow as AgentChatPartRow };