cortena-ui 1.6.0 → 1.7.0

package/src/components/agent-chat.tsx

@@ -44,8 +44,9 @@ import { Spinner } from "@/components/spinner";
 import { Textarea } from "@/components/textarea";
 import { isHiddenMessage, STORED_TEXT_LIMIT } from "@/agent-chat/session";
 import { isGenericLabel, truncate } from "@/agent-chat/step-label";
-import { type AgentToolEntry, useAgentChat } from "@/agent-chat/store";
+import { type AgentToolEntry, useAgentChat, type UseAgentChatResult } from "@/agent-chat/store";
 import type {
+  AgentApprovalDecision,
   AgentApprovalRequest,
   AgentChatClient,
   AgentChatMessage,
@@ -58,6 +59,14 @@ import { cn } from "@/lib/cn";
 
 /* ── stick to bottom ─────────────────────────────────────────────────────── */
 
+/**
+ * `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?
  *
@@ -620,19 +629,129 @@ export interface AgentToolRenderContext {
   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. */
+/* ── the slots a host may fill ───────────────────────────────────────────── */
+
+/**
+ * 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;
   /**
-   * 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 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.
    */
-  storageScope: string;
-  /** Do not read or write `sessionStorage`; for a guide or a test. */
-  ephemeral?: boolean;
-  thinking?: "low" | "medium" | "high";
+  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>;
+  /**
+   * 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.
+   */
+  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;
   /**
@@ -643,31 +762,154 @@ 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;
+}
+
+/**
+ * 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;
 }
 
-function AgentChat({
+/**
+ * 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.
+ */
+function AgentChat(props: AgentChatProps) {
+  if (props.chat) {
+    const { chat, client: _client, storageScope: _scope, ephemeral: _e, thinking: _t, ...rest } =
+      props;
+    return <AgentChatSurface {...rest} chat={chat} />;
+  }
+  return <AgentChatOwned {...props} />;
+}
+
+function AgentChatOwned({
   client,
-  agentName,
   storageScope,
   ephemeral,
   thinking,
-  attachmentsSlot,
-  renderToolCall,
-  headerSlot,
-  className,
-  ...props
-}: AgentChatProps) {
+  chat: _chat,
+  ...rest
+}: AgentChatOwnedProps) {
   const chat = useAgentChat({
     client,
     storageScope,
     ...(ephemeral === undefined ? {} : { ephemeral }),
     ...(thinking === undefined ? {} : { thinking }),
   });
+  return <AgentChatSurface {...rest} chat={chat} />;
+}
+
+/** The default at the top of the transcript: a button, when there is more. */
+function DefaultLoadOlder({ hasMore, loading, onLoad }: AgentChatLoadOlderSlotProps) {
+  if (!hasMore) {
+    return null;
+  }
+  return (
+    <div className="flex justify-center">
+      <Button
+        size="sm"
+        variant="ghost"
+        data-slot="agent-chat-load-older"
+        disabled={loading}
+        onClick={onLoad}
+      >
+        {loading ? "Loading…" : "Load older messages"}
+      </Button>
+    </div>
+  );
+}
+
+/** 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
+}: AgentChatBaseProps & { chat: UseAgentChatResult }) {
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const [value, setValue] = React.useState("");
   const scrollRef = React.useRef<HTMLDivElement>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
+  const sentinelRef = React.useRef<HTMLDivElement>(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;
+  // The transcript region is replaced whole by a host's Empty while there is
+  // nothing to show — a skeleton wants the height the scroller would have had,
+  // and a paragraph inside the column cannot take it.
+  // Not while there is an error, either: with a host's Empty holding the region
+  // the banner would have nowhere to be drawn, and the failure would be hidden
+  // behind a welcome screen.
+  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.
@@ -677,6 +919,10 @@ function AgentChat({
    *
    * 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;
@@ -685,6 +931,15 @@ function AgentChat({
       return;
     }
     const observer = new ResizeObserver(() => {
+      if (holdRef.current) {
+        // The growth was a prepend, and the layout effect below has already
+        // put the reader back where they were. Judging it against the height
+        // before the page landed would read as "the reader is near the
+        // bottom" and undo the hold.
+        holdRef.current = false;
+        prevHeightRef.current = scrollEl.scrollHeight;
+        return;
+      }
       const { scrollTop, scrollHeight, clientHeight } = scrollEl;
       const stick = shouldStickToBottom({
         prevScrollHeight: prevHeightRef.current,
@@ -698,8 +953,111 @@ function AgentChat({
     });
     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.
+   */
+  // Keyed on the METHOD, not on `chat`. The hook returns a fresh result object
+  // every render, so depending on `chat` re-created this callback — and
+  // re-attached the observer below — on every keystroke of a stream.
+  const loadOlderChat = chat.loadOlder;
+  const loadOlder = React.useCallback(() => {
+    const scrollEl = scrollRef.current;
+    // Measured BEFORE the call, and kept only when a load really started. The
+    // store declines while one is in flight, when there is no more and when
+    // there is no session; a height saved on a declined call was restored
+    // against the next thing that grew the transcript — a new message — and
+    // shoved the reader up by its height.
+    const height = scrollEl?.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;
+        }
+        // Armed only once the scroller overflows. Before that the sentinel is
+        // simply always in view, and "in view" means nothing about the reader
+        // having gone looking for what came before.
+        if (scrollEl.scrollHeight <= scrollEl.clientHeight) {
+          return;
+        }
+        if (chat.hasMoreHistory && !chat.loadingHistory) {
+          loadOlder();
+        }
+      },
+      { root: scrollEl, threshold: 0.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) {
+      // The load that saved this height is over — with a page, or without
+      // one (a failure, or the store declining after all). Either way the
+      // height is spent; it must not be restored against a later append.
+      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) {
+      // jsdom has no `scrollTo` on elements, and a host's page test renders
+      // this surface under jsdom; the jump is the honest fallback there.
+      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();
@@ -739,7 +1097,12 @@ function AgentChat({
   // in — one that disappeared the instant the agent stopped talking would be no
   // use to anybody. The next run clears it.
   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 (
     <div
@@ -747,41 +1110,44 @@ function AgentChat({
       className={cn("flex h-full min-h-0 w-full flex-col bg-[var(--ds-background)]", className)}
       {...props}
     >
-      <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",
-        )}
-      >
-        <Button
-          size="sm"
-          variant="ghost"
-          data-slot="agent-chat-sessions-trigger"
-          aria-expanded={drawerOpen}
-          onClick={() => {
-            setDrawerOpen((open) => !open);
-            chat.refreshSessions();
-          }}
-        >
-          {chat.sessions.length === 1 ? "1 session" : `${chat.sessions.length} sessions`}
-        </Button>
-        <Button
-          size="sm"
-          variant="ghost"
-          data-slot="agent-chat-new-session"
-          aria-label="New session"
-          onClick={() => {
-            chat.newSession();
-            setDrawerOpen(false);
-          }}
+      {hideHeader ? null : (
+        <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",
+            classNames?.header,
+          )}
         >
-          <MessageSquarePlus aria-hidden />
-          New
-        </Button>
-        <div className="ml-auto flex items-center gap-1">{headerSlot}</div>
-      </div>
+          <Button
+            size="sm"
+            variant="ghost"
+            data-slot="agent-chat-sessions-trigger"
+            aria-expanded={drawerOpen}
+            onClick={() => {
+              setDrawerOpen((open) => !open);
+              chat.refreshSessions();
+            }}
+          >
+            {chat.sessions.length === 1 ? "1 session" : `${chat.sessions.length} sessions`}
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            data-slot="agent-chat-new-session"
+            aria-label="New session"
+            onClick={() => {
+              chat.newSession();
+              setDrawerOpen(false);
+            }}
+          >
+            <MessageSquarePlus aria-hidden />
+            New
+          </Button>
+          <div className="ml-auto flex items-center gap-1">{headerSlot}</div>
+        </div>
+      )}
 
-      {drawerOpen ? (
+      {drawerOpen && !hideHeader ? (
         <AgentSessionDrawer
           sessions={chat.sessions}
           current={chat.sessionKey}
@@ -793,76 +1159,125 @@ function AgentChat({
         />
       ) : null}
 
-      <div
-        ref={scrollRef}
-        data-slot="agent-chat-scroll"
-        className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto"
-      >
+      {showTranscript ? (
         <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"
+          ref={scrollRef}
+          data-slot="agent-chat-scroll"
+          // `overflow-anchor: none`: the layout effect above owns the reader's
+          // place across a prepend. Chrome anchors by itself and the two
+          // together shoved the reader up by a page; Safari does not anchor at
+          // all. One rule, ours, in every browser.
+          className={cn(
+            "min-h-0 flex-1 overflow-x-hidden overflow-y-auto [overflow-anchor:none]",
+            classNames?.scroll,
+          )}
         >
-          {chat.error ? (
-            <ErrorBanner message={chat.error} />
-          ) : null}
+          <div
+            ref={contentRef}
+            role="log"
+            aria-live="polite"
+            aria-label={`${agentName} chat`}
+            className={cn(
+              "relative flex min-w-0 flex-col",
+              classNames?.transcript ?? "gap-5 px-4 py-4",
+            )}
+          >
+            {/* The history sentinel: first, so reaching it means reaching the top. */}
+            <div
+              ref={sentinelRef}
+              data-slot="agent-chat-sentinel"
+              className={classNames?.sentinel ?? "absolute inset-x-0 top-0 h-px"}
+            />
 
-          {chat.hasMoreHistory ? (
-            <div className="flex justify-center">
-              <Button
-                size="sm"
-                variant="ghost"
-                data-slot="agent-chat-load-older"
-                disabled={chat.loadingHistory}
-                onClick={chat.loadOlder}
-              >
-                {chat.loadingHistory ? "Loading…" : "Load older messages"}
-              </Button>
-            </div>
-          ) : null}
+            {chat.error ? (
+              <ErrorBanner message={chat.error} />
+            ) : null}
 
-          {visible.length === 0 && !chat.streaming ? (
-            <p
-              data-slot="agent-chat-empty"
-              className="text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]"
-            >
-              Ask {agentName} anything about this screen.
-            </p>
-          ) : null}
+            {chat.hasMoreHistory || chat.loadingHistory ? (
+              <LoadOlder
+                hasMore={chat.hasMoreHistory}
+                loading={chat.loadingHistory}
+                onLoad={loadOlder}
+              />
+            ) : null}
 
-          {visible.map((message) => (
-            <AgentMessageBubble
-              key={message.id}
-              message={message}
-              agentName={agentName}
-              streaming={chat.streaming}
-              onAction={chat.sendAction}
-            />
-          ))}
+            {showEmpty ? (
+              <p
+                data-slot="agent-chat-empty"
+                className="text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]"
+              >
+                Ask {agentName} anything about this screen.
+              </p>
+            ) : null}
 
-          {chat.streaming ? (
-            <AgentStreamingBubble
-              agentName={agentName}
-              text={chat.streamText}
-              thinkingText={chat.streamThinkingText}
-              a2ui={chat.streamA2ui}
-              steps={chat.steps}
-            />
-          ) : chat.steps.length > 0 ? (
-            // The turn is over but its steps are the record of what was done to
-            // answer it, and they stay until the next run replaces them — the
-            // same rule the tool strip below follows.
-            <AgentSteps steps={chat.steps} />
-          ) : null}
+            {visible.map((message, index) =>
+              Message ? (
+                <Message
+                  key={message.id}
+                  message={message}
+                  index={index}
+                  messages={visible}
+                  agentName={agentName}
+                  sessionKey={chat.sessionKey}
+                  streaming={chat.streaming}
+                  onAction={chat.sendAction}
+                />
+              ) : (
+                <AgentMessageBubble
+                  key={message.id}
+                  message={message}
+                  agentName={agentName}
+                  streaming={chat.streaming}
+                  onAction={chat.sendAction}
+                />
+              ),
+            )}
+
+            {chat.streaming ? (
+              Streaming ? (
+                <Streaming
+                  agentName={agentName}
+                  text={chat.streamText}
+                  thinkingText={chat.streamThinkingText}
+                  a2ui={chat.streamA2ui}
+                  steps={chat.steps}
+                />
+              ) : (
+                <AgentStreamingBubble
+                  agentName={agentName}
+                  text={chat.streamText}
+                  thinkingText={chat.streamThinkingText}
+                  a2ui={chat.streamA2ui}
+                  steps={chat.steps}
+                />
+              )
+            ) : chat.steps.length > 0 ? (
+              // The turn is over but its steps are the record of what was done to
+              // answer it, and they stay until the next run replaces them — the
+              // same rule the tool strip below follows.
+              <AgentSteps steps={chat.steps} />
+            ) : null}
+          </div>
         </div>
-      </div>
+      ) : Empty ? (
+        <Empty agentName={agentName} loadingHistory={chat.loadingHistory} />
+      ) : null}
 
-      {showTools ? (
+      {Tools ? (
+        <Tools
+          entries={toolEntries}
+          approvals={chat.approvals}
+          streaming={chat.streaming}
+          renderToolCall={renderToolCall}
+          onResolveApproval={chat.resolveApproval}
+        />
+      ) : showTools ? (
         <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,
+          )}
         >
           {toolEntries.length > 0 ? (
             <Badge variant="neutral" className="w-fit">
@@ -896,42 +1311,54 @@ function AgentChat({
         </div>
       ) : null}
 
-      <div
-        data-slot="agent-chat-composer"
-        className="flex shrink-0 items-end gap-2 border-t border-[var(--ds-border-subtle)] p-3"
-      >
-        <Textarea
-          data-slot="agent-chat-input"
-          aria-label={`Message ${agentName}`}
-          placeholder={`Message ${agentName}…`}
-          rows={1}
-          className="max-h-40 min-h-9 resize-none"
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          onKeyDown={onKeyDown}
+      {Composer ? (
+        <Composer
+          agentName={agentName}
+          streaming={chat.streaming}
+          send={chat.send}
+          abort={chat.abort}
         />
-        {chat.streaming ? (
-          <Button
-            size="icon"
-            variant="outline"
-            data-slot="agent-chat-stop"
-            aria-label="Stop the run"
-            onClick={chat.abort}
-          >
-            <Square aria-hidden />
-          </Button>
-        ) : (
-          <Button
-            size="icon"
-            data-slot="agent-chat-send"
-            aria-label="Send"
-            disabled={!value.trim()}
-            onClick={submit}
-          >
-            <Send aria-hidden />
-          </Button>
-        )}
-      </div>
+      ) : (
+        <div
+          data-slot="agent-chat-composer"
+          className={cn(
+            "flex shrink-0 items-end gap-2 border-t border-[var(--ds-border-subtle)] p-3",
+            classNames?.composer,
+          )}
+        >
+          <Textarea
+            data-slot="agent-chat-input"
+            aria-label={`Message ${agentName}`}
+            placeholder={`Message ${agentName}…`}
+            rows={1}
+            className="max-h-40 min-h-9 resize-none"
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            onKeyDown={onKeyDown}
+          />
+          {chat.streaming ? (
+            <Button
+              size="icon"
+              variant="outline"
+              data-slot="agent-chat-stop"
+              aria-label="Stop the run"
+              onClick={chat.abort}
+            >
+              <Square aria-hidden />
+            </Button>
+          ) : (
+            <Button
+              size="icon"
+              data-slot="agent-chat-send"
+              aria-label="Send"
+              disabled={!value.trim()}
+              onClick={submit}
+            >
+              <Send aria-hidden />
+            </Button>
+          )}
+        </div>
+      )}
     </div>
   );
 }