cortena-ui 1.6.0 → 1.7.0

package/dist/components/agent-chat.d.ts

@@ -1,8 +1,8 @@
 "use client";
 import { A2UIAction } from "../a2ui/message.js";
 import { A2UIChatBlock } from "../agent-chat/a2ui-block.js";
-import { AgentApprovalRequest, AgentChatClient, AgentChatMessage, AgentChatStep, AgentSession } from "../agent-chat/types.js";
-import { AgentToolEntry } from "../agent-chat/store.js";
+import { AgentApprovalDecision, AgentApprovalRequest, AgentChatClient, AgentChatMessage, AgentChatStep, AgentSession } from "../agent-chat/types.js";
+import { AgentToolEntry, UseAgentChatResult } from "../agent-chat/store.js";
 import * as React from "react";
 //#region src/components/agent-chat.d.ts
 /**
@@ -118,19 +118,118 @@ export interface AgentToolRenderContext {
   /** The `ui://` resource this result carries, when it carries one. */
   mcpAppUri: string | null;
 }
-export interface AgentChatProps extends Omit<React.ComponentProps<"div">, "children" | "onError"> {
-  /** The transport. `createAguiAgentChatClient` is the AG-UI implementation. */
-  client: AgentChatClient;
-  /** The extension name, shown on each assistant turn. */
+/**
+ * What a host's own message bubble receives. `index` and `messages` are over
+ * the VISIBLE messages — the filter chain has already run — so
+ * `messages[index - 1]` is the turn before this one, which a feedback control
+ * or a transcript export wants.
+ */
+export interface AgentChatMessageSlotProps {
+  message: AgentChatMessage;
+  index: number;
+  messages: readonly AgentChatMessage[];
+  agentName: string;
+  sessionKey: string | null;
+  /** True while a run is live; every A2UI surface goes read-only. */
+  streaming: boolean;
+  onAction: (action: A2UIAction) => void;
+}
+export interface AgentChatStreamingSlotProps {
+  agentName: string;
+  text: string;
+  thinkingText: string;
+  a2ui: readonly A2UIChatBlock[];
+  /** The turn's tool calls in plain words; the default draws them under the name. */
+  steps: readonly AgentChatStep[];
+}
+export interface AgentChatEmptySlotProps {
+  agentName: string;
+  /** A history load is in flight for this session; a skeleton fits here. */
+  loadingHistory: boolean;
+}
+export interface AgentChatLoadOlderSlotProps {
+  hasMore: boolean;
+  loading: boolean;
+  onLoad: () => void;
+}
+export interface AgentChatToolsSlotProps {
+  entries: readonly AgentToolEntry[];
+  approvals: readonly AgentApprovalRequest[];
+  streaming: boolean;
+  /**
+   * The host's `renderToolCall`, as it was passed: `undefined` for a call the
+   * host declines, so the slot can draw its own line for those and still mount
+   * an MCP App through the one seam the component defines.
+   */
+  renderToolCall: ((context: AgentToolRenderContext) => React.ReactNode | undefined) | undefined;
+  onResolveApproval: (id: string, decision: AgentApprovalDecision) => void;
+}
+export interface AgentChatComposerSlotProps {
   agentName: string;
+  streaming: boolean;
+  send: UseAgentChatResult["send"];
+  abort: () => void;
+}
+/**
+ * Renders a host may substitute for the component's own, one region each.
+ *
+ * The surface — its state, the order of its regions, the scroller that stays
+ * pinned to the bottom, the sentinel that pages history, the steps and the
+ * tool-card seam — is shared; what each region LOOKS like need not be. This is
+ * how cortenaweb draws its own bubble (Shiki, KaTeX, feedback controls, a
+ * timestamp chip) and its own composer (attachments, agent and model
+ * selectors) on the shared surface instead of keeping a second chat
+ * (PLATFORM-64).
+ *
+ * A component given here replaces its region whole, wrapper included; nothing
+ * of the default is drawn around it.
+ */
+export interface AgentChatComponents {
+  Message: React.ComponentType<AgentChatMessageSlotProps>;
   /**
-   * Names the `sessionStorage` slot this window's session key lives in. Scope
-   * it to the extension id; two chats with different scopes never share a key.
+   * The live bubble. It is handed `steps` because the default draws the
+   * progress steps INSIDE the streaming bubble; a host's own bubble draws them
+   * itself, or not at all — nothing else draws them while a run is live.
    */
-  storageScope: string;
-  /** Do not read or write `sessionStorage`; for a guide or a test. */
-  ephemeral?: boolean;
-  thinking?: "low" | "medium" | "high";
+  Streaming: React.ComponentType<AgentChatStreamingSlotProps>;
+  /**
+   * Replaces the whole transcript region while there is nothing to show. Not
+   * while there is an error: the transcript then mounts with the error banner
+   * in it, so a failure before the first message is not hidden behind the
+   * host's welcome screen.
+   */
+  Empty: React.ComponentType<AgentChatEmptySlotProps>;
+  /** Drawn at the top of the transcript while there is, or may be, more. */
+  LoadOlder: React.ComponentType<AgentChatLoadOlderSlotProps>;
+  /** Replaces the tool strip and the approval cards at the foot. */
+  Tools: React.ComponentType<AgentChatToolsSlotProps>;
+  Composer: React.ComponentType<AgentChatComposerSlotProps>;
+}
+/**
+ * Class names for the wrappers a host cannot otherwise reach.
+ *
+ * `transcript` REPLACES the default spacing (`gap-5 px-4 py-4`) rather than
+ * merging with it: a reading column sets its own gutter through a class, and a
+ * utility left on the element would fight it. The structural classes — flex,
+ * min-width — stay in either case.
+ */
+export interface AgentChatClassNames {
+  header?: string;
+  scroll?: string;
+  transcript?: string;
+  /**
+   * The history sentinel at the top of the transcript. Out of the flow by
+   * default (`absolute inset-x-0 top-0 h-px`), so it adds no space; a host
+   * whose column already reserved a row for it passes an in-flow class.
+   */
+  sentinel?: string;
+  tools?: string;
+  composer?: string;
+}
+/** What every `AgentChat` takes, however its state is owned. */
+export interface AgentChatBaseProps extends Omit<React.ComponentProps<"div">, "children" | "onError"> {
+  /** The extension name, shown on each assistant turn. */
+  agentName: string;
   /** Rendered between the tool strip and the composer — an attachment picker. */
   attachmentsSlot?: React.ReactNode;
   /**
@@ -141,8 +240,65 @@ export interface AgentChatProps extends Omit<React.ComponentProps<"div">, "child
   renderToolCall?: (context: AgentToolRenderContext) => React.ReactNode | undefined;
   /** Header content, e.g. the pop-up's own window controls. */
   headerSlot?: React.ReactNode;
+  /** No header at all — for a host with its own session list and New button. */
+  hideHeader?: boolean;
+  /** The host's own renders for each region. See `AgentChatComponents`. */
+  components?: Partial<AgentChatComponents>;
+  /** Classes for the wrappers. See `AgentChatClassNames`. */
+  classNames?: AgentChatClassNames;
+  /**
+   * Page older history from the sentinel at the top of the transcript as the
+   * reader reaches it, not only from the `LoadOlder` button. Off by default —
+   * the pop-up pages on a click. When on, it is armed only once the scroller
+   * overflows: a transcript shorter than its viewport has its sentinel
+   * permanently in view, and paging on that pulled every page the server had
+   * into a chat with three messages in it.
+   */
+  autoLoadOlder?: boolean;
 }
-declare function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attachmentsSlot, renderToolCall, headerSlot, className, ...props }: AgentChatProps): React.JSX.Element;
+/**
+ * The surface owning its own state: it calls `useAgentChat` on the client it is
+ * given. This is what `AgentChatPopup` mounts.
+ */
+export interface AgentChatOwnedProps extends AgentChatBaseProps {
+  /** The transport. `createAguiAgentChatClient` is the AG-UI implementation. */
+  client: AgentChatClient;
+  /**
+   * Names the `sessionStorage` slot this window's session key lives in. Scope
+   * it to the extension id; two chats with different scopes never share a key.
+   */
+  storageScope: string;
+  /** Do not read or write `sessionStorage`; for a guide or a test. */
+  ephemeral?: boolean;
+  thinking?: "low" | "medium" | "high";
+  chat?: undefined;
+}
+/**
+ * The surface drawing state the host owns.
+ *
+ * A host that needs the state OUTSIDE the surface — a sidebar that lists
+ * sessions, a shortcut that stops the run, a page that routes on the session
+ * key — holds it itself and passes a `UseAgentChatResult` here; the surface
+ * then draws that state instead of holding its own. The result may come from
+ * `useAgentChat`, or from a store of the host's own projected onto the same
+ * shape, which is how cortenaweb drives this surface from the zustand stores
+ * the rest of its shell reads (PLATFORM-64). No client, no storage: the host
+ * owns both.
+ */
+export interface AgentChatHostedProps extends AgentChatBaseProps {
+  chat: UseAgentChatResult;
+  client?: undefined;
+  storageScope?: undefined;
+  ephemeral?: undefined;
+  thinking?: undefined;
+}
+export type AgentChatProps = AgentChatOwnedProps | AgentChatHostedProps;
+/**
+ * Two ways in, one surface. The hook is called in a component of its own so
+ * a host that hands over `chat` never calls it — and so a mount that switches
+ * from one mode to the other remounts rather than changing its hook order.
+ */
+declare function AgentChat(props: AgentChatProps): React.JSX.Element;
 export interface AgentSessionDrawerProps {
   sessions: readonly AgentSession[];
   current: string | null;

package/dist/components/agent-chat.js

@@ -37,6 +37,13 @@ import * as React from "react";
 * and it replaces the card, return nothing and the default card is drawn.
 */
 /**
+* `useLayoutEffect` in a browser, `useEffect` on a server render, where React
+* warns about the former. The scroll restore after a prepend has to run
+* before the paint: an effect after it shows one frame at the old `scrollTop`,
+* with the page that just landed pushing the reader's place off the screen.
+*/
+const useLayoutEffectSafe = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+/**
 * Should the list jump back to the bottom after its content grew?
 *
 * Judged against the height BEFORE the growth. Measuring afterwards asks "is
@@ -420,18 +427,68 @@ function AgentApprovalCard({ request, onResolve }) {
 		]
 	});
 }
-function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attachmentsSlot, renderToolCall, headerSlot, className, ...props }) {
+/**
+* Two ways in, one surface. The hook is called in a component of its own so
+* a host that hands over `chat` never calls it — and so a mount that switches
+* from one mode to the other remounts rather than changing its hook order.
+*/
+function AgentChat(props) {
+	if (props.chat) {
+		const { chat, client: _client, storageScope: _scope, ephemeral: _e, thinking: _t, ...rest } = props;
+		return /* @__PURE__ */ jsx(AgentChatSurface, {
+			...rest,
+			chat
+		});
+	}
+	return /* @__PURE__ */ jsx(AgentChatOwned, { ...props });
+}
+function AgentChatOwned({ client, storageScope, ephemeral, thinking, chat: _chat, ...rest }) {
 	const chat = useAgentChat({
 		client,
 		storageScope,
 		...ephemeral === void 0 ? {} : { ephemeral },
 		...thinking === void 0 ? {} : { thinking }
 	});
+	return /* @__PURE__ */ jsx(AgentChatSurface, {
+		...rest,
+		chat
+	});
+}
+/** The default at the top of the transcript: a button, when there is more. */
+function DefaultLoadOlder({ hasMore, loading, onLoad }) {
+	if (!hasMore) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center",
+		children: /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			"data-slot": "agent-chat-load-older",
+			disabled: loading,
+			onClick: onLoad,
+			children: loading ? "Loading…" : "Load older messages"
+		})
+	});
+}
+/** Distance from the bottom, in pixels, within which new content re-pins the view. */
+const NEAR_BOTTOM_PX = 100;
+function AgentChatSurface({ chat, agentName, attachmentsSlot, renderToolCall, headerSlot, hideHeader, components, classNames, autoLoadOlder = false, className, ...props }) {
 	const [drawerOpen, setDrawerOpen] = React.useState(false);
 	const [value, setValue] = React.useState("");
 	const scrollRef = React.useRef(null);
 	const contentRef = React.useRef(null);
+	const sentinelRef = React.useRef(null);
 	const prevHeightRef = React.useRef(0);
+	/** Whether the reader was at the bottom at the last scroll; the smooth re-pin reads it. */
+	const nearBottomRef = React.useRef(true);
+	/** The scroll height saved before a page of older history is prepended; 0 when none is in flight. */
+	const prependHeightRef = React.useRef(0);
+	/** Set by a prepend restore; the resize observer sits out the one notification the prepend produces. */
+	const holdRef = React.useRef(false);
+	const prevMessageCountRef = React.useRef(0);
+	const visible = chat.messages.filter((message) => !isHiddenMessage(message));
+	const Empty = components?.Empty;
+	const showEmpty = visible.length === 0 && !chat.streaming && !chat.error;
+	const showTranscript = !(showEmpty && Empty);
 	/**
 	* Re-pin to the bottom whenever the content grows or the viewport shrinks.
 	* A message keeps growing after it mounts — markdown settles, the tool strip
@@ -440,12 +497,21 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 	*
 	* Jumping rather than smooth-scrolling: this fires many times a second during
 	* streaming, and queued smooth animations fight each other and lose.
+	*
+	* Keyed on `showTranscript`: the scroller is unmounted while a host's Empty
+	* holds the region, and the observer has to attach to the one that mounts
+	* when the first message arrives.
 	*/
 	React.useEffect(() => {
 		const scrollEl = scrollRef.current;
 		const contentEl = contentRef.current;
 		if (!scrollEl || !contentEl || typeof ResizeObserver === "undefined") return;
 		const observer = new ResizeObserver(() => {
+			if (holdRef.current) {
+				holdRef.current = false;
+				prevHeightRef.current = scrollEl.scrollHeight;
+				return;
+			}
 			const { scrollTop, scrollHeight, clientHeight } = scrollEl;
 			const stick = shouldStickToBottom({
 				prevScrollHeight: prevHeightRef.current,
@@ -457,8 +523,84 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 		});
 		observer.observe(contentEl);
 		observer.observe(scrollEl);
+		const onScroll = () => {
+			nearBottomRef.current = scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < NEAR_BOTTOM_PX;
+		};
+		scrollEl.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			observer.disconnect();
+			scrollEl.removeEventListener("scroll", onScroll);
+		};
+	}, [showTranscript]);
+	/**
+	* Page older history as the reader reaches the top, not only on a click —
+	* when the host asks for it with `autoLoadOlder`. The sentinel is the first
+	* child of the transcript; when it scrolls into the viewport and there is
+	* more, the next page is asked for.
+	*/
+	const loadOlderChat = chat.loadOlder;
+	const loadOlder = React.useCallback(() => {
+		const height = scrollRef.current?.scrollHeight ?? 0;
+		if (loadOlderChat() === true && height > 0) prependHeightRef.current = height;
+	}, [loadOlderChat]);
+	React.useEffect(() => {
+		const sentinel = sentinelRef.current;
+		const scrollEl = scrollRef.current;
+		if (!autoLoadOlder || !sentinel || !scrollEl || typeof IntersectionObserver === "undefined") return;
+		const observer = new IntersectionObserver((entries) => {
+			if (!entries[0]?.isIntersecting) return;
+			if (scrollEl.scrollHeight <= scrollEl.clientHeight) return;
+			if (chat.hasMoreHistory && !chat.loadingHistory) loadOlder();
+		}, {
+			root: scrollEl,
+			threshold: .1
+		});
+		observer.observe(sentinel);
 		return () => observer.disconnect();
-	}, []);
+	}, [
+		autoLoadOlder,
+		chat.hasMoreHistory,
+		chat.loadingHistory,
+		loadOlder,
+		showTranscript
+	]);
+	/**
+	* After a prepend, put the reader back where they were; after an append,
+	* follow the newest message — smoothly, once per message rather than per
+	* resize, which is why this is separate from the observer above and why it
+	* is NOT keyed on the stream text: growth during a run is the observer's,
+	* and a smooth scroll queued per delta fought it and lost.
+	*
+	* A layout effect, so the restore lands before the paint; an effect after
+	* it drew one frame at the old `scrollTop` with the new page on top.
+	*/
+	useLayoutEffectSafe(() => {
+		const scrollEl = scrollRef.current;
+		if (!scrollEl) return;
+		const prevCount = prevMessageCountRef.current;
+		const count = chat.messages.length;
+		prevMessageCountRef.current = count;
+		const saved = prependHeightRef.current;
+		if (saved > 0 && !chat.loadingHistory) {
+			prependHeightRef.current = 0;
+			if (count > prevCount && prevCount > 0) {
+				const delta = scrollEl.scrollHeight - saved;
+				if (delta > 0) {
+					scrollEl.scrollTop += delta;
+					prevHeightRef.current = scrollEl.scrollHeight;
+					holdRef.current = true;
+					return;
+				}
+			}
+		}
+		if (count !== prevCount && nearBottomRef.current) {
+			if (typeof scrollEl.scrollTo === "function") scrollEl.scrollTo({
+				top: scrollEl.scrollHeight,
+				behavior: "smooth"
+			});
+			else scrollEl.scrollTop = scrollEl.scrollHeight;
+		}
+	}, [chat.messages, chat.loadingHistory]);
 	const submit = React.useCallback(() => {
 		const trimmed = value.trim();
 		if (!trimmed || chat.streaming) return;
@@ -479,15 +621,19 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 	}, [chat, submit]);
 	const toolEntries = chat.toolOrder.map((id) => chat.tools[id]).filter((entry) => entry !== void 0);
 	const showTools = toolEntries.length > 0 || chat.approvals.length > 0;
-	const visible = chat.messages.filter((message) => !isHiddenMessage(message));
+	const Message = components?.Message;
+	const Streaming = components?.Streaming;
+	const LoadOlder = components?.LoadOlder ?? DefaultLoadOlder;
+	const Tools = components?.Tools;
+	const Composer = components?.Composer;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "agent-chat",
 		className: cn("flex h-full min-h-0 w-full flex-col bg-[var(--ds-background)]", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
+			hideHeader ? null : /* @__PURE__ */ jsxs("div", {
 				"data-slot": "agent-chat-header",
-				className: cn("flex shrink-0 items-center gap-2 border-b border-[var(--ds-border-subtle)] px-3 py-2"),
+				className: cn("flex shrink-0 items-center gap-2 border-b border-[var(--ds-border-subtle)] px-3 py-2", classNames?.header),
 				children: [
 					/* @__PURE__ */ jsx(Button, {
 						size: "sm",
@@ -517,7 +663,7 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 					})
 				]
 			}),
-			drawerOpen ? /* @__PURE__ */ jsx(AgentSessionDrawer, {
+			drawerOpen && !hideHeader ? /* @__PURE__ */ jsx(AgentSessionDrawer, {
 				sessions: chat.sessions,
 				current: chat.sessionKey,
 				loading: chat.loadingSessions,
@@ -526,30 +672,29 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 					setDrawerOpen(false);
 				}
 			}) : null,
-			/* @__PURE__ */ jsx("div", {
+			showTranscript ? /* @__PURE__ */ jsx("div", {
 				ref: scrollRef,
 				"data-slot": "agent-chat-scroll",
-				className: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+				className: cn("min-h-0 flex-1 overflow-x-hidden overflow-y-auto [overflow-anchor:none]", classNames?.scroll),
 				children: /* @__PURE__ */ jsxs("div", {
 					ref: contentRef,
 					role: "log",
 					"aria-live": "polite",
 					"aria-label": `${agentName} chat`,
-					className: "flex min-w-0 flex-col gap-5 px-4 py-4",
+					className: cn("relative flex min-w-0 flex-col", classNames?.transcript ?? "gap-5 px-4 py-4"),
 					children: [
+						/* @__PURE__ */ jsx("div", {
+							ref: sentinelRef,
+							"data-slot": "agent-chat-sentinel",
+							className: classNames?.sentinel ?? "absolute inset-x-0 top-0 h-px"
+						}),
 						chat.error ? /* @__PURE__ */ jsx(ErrorBanner, { message: chat.error }) : null,
-						chat.hasMoreHistory ? /* @__PURE__ */ jsx("div", {
-							className: "flex justify-center",
-							children: /* @__PURE__ */ jsx(Button, {
-								size: "sm",
-								variant: "ghost",
-								"data-slot": "agent-chat-load-older",
-								disabled: chat.loadingHistory,
-								onClick: chat.loadOlder,
-								children: chat.loadingHistory ? "Loading…" : "Load older messages"
-							})
+						chat.hasMoreHistory || chat.loadingHistory ? /* @__PURE__ */ jsx(LoadOlder, {
+							hasMore: chat.hasMoreHistory,
+							loading: chat.loadingHistory,
+							onLoad: loadOlder
 						}) : null,
-						visible.length === 0 && !chat.streaming ? /* @__PURE__ */ jsxs("p", {
+						showEmpty ? /* @__PURE__ */ jsxs("p", {
 							"data-slot": "agent-chat-empty",
 							className: "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]",
 							children: [
@@ -558,13 +703,27 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 								" anything about this screen."
 							]
 						}) : null,
-						visible.map((message) => /* @__PURE__ */ jsx(AgentMessageBubble, {
+						visible.map((message, index) => Message ? /* @__PURE__ */ jsx(Message, {
+							message,
+							index,
+							messages: visible,
+							agentName,
+							sessionKey: chat.sessionKey,
+							streaming: chat.streaming,
+							onAction: chat.sendAction
+						}, message.id) : /* @__PURE__ */ jsx(AgentMessageBubble, {
 							message,
 							agentName,
 							streaming: chat.streaming,
 							onAction: chat.sendAction
 						}, message.id)),
-						chat.streaming ? /* @__PURE__ */ jsx(AgentStreamingBubble, {
+						chat.streaming ? Streaming ? /* @__PURE__ */ jsx(Streaming, {
+							agentName,
+							text: chat.streamText,
+							thinkingText: chat.streamThinkingText,
+							a2ui: chat.streamA2ui,
+							steps: chat.steps
+						}) : /* @__PURE__ */ jsx(AgentStreamingBubble, {
 							agentName,
 							text: chat.streamText,
 							thinkingText: chat.streamThinkingText,
@@ -573,10 +732,19 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 						}) : chat.steps.length > 0 ? /* @__PURE__ */ jsx(AgentSteps, { steps: chat.steps }) : null
 					]
 				})
-			}),
-			showTools ? /* @__PURE__ */ jsxs("div", {
+			}) : Empty ? /* @__PURE__ */ jsx(Empty, {
+				agentName,
+				loadingHistory: chat.loadingHistory
+			}) : null,
+			Tools ? /* @__PURE__ */ jsx(Tools, {
+				entries: toolEntries,
+				approvals: chat.approvals,
+				streaming: chat.streaming,
+				renderToolCall,
+				onResolveApproval: chat.resolveApproval
+			}) : showTools ? /* @__PURE__ */ jsxs("div", {
 				"data-slot": "agent-chat-tools",
-				className: "flex shrink-0 flex-col gap-1.5 border-t border-[var(--ds-border-subtle)] px-3 py-2",
+				className: cn("flex shrink-0 flex-col gap-1.5 border-t border-[var(--ds-border-subtle)] px-3 py-2", classNames?.tools),
 				children: [
 					toolEntries.length > 0 ? /* @__PURE__ */ jsx(Badge, {
 						variant: "neutral",
@@ -601,9 +769,14 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 				className: "shrink-0 px-3",
 				children: attachmentsSlot
 			}) : null,
-			/* @__PURE__ */ jsxs("div", {
+			Composer ? /* @__PURE__ */ jsx(Composer, {
+				agentName,
+				streaming: chat.streaming,
+				send: chat.send,
+				abort: chat.abort
+			}) : /* @__PURE__ */ jsxs("div", {
 				"data-slot": "agent-chat-composer",
-				className: "flex shrink-0 items-end gap-2 border-t border-[var(--ds-border-subtle)] p-3",
+				className: cn("flex shrink-0 items-end gap-2 border-t border-[var(--ds-border-subtle)] p-3", classNames?.composer),
 				children: [/* @__PURE__ */ jsx(Textarea, {
 					"data-slot": "agent-chat-input",
 					"aria-label": `Message ${agentName}`,