@mcp-b/react-components 0.24.0 → 0.25.0

package/dist/{AgentChat-Bm1qYbOo.d.ts → AgentChat-DHxdTjwF.d.ts}

@@ -94,6 +94,15 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
     items: readonly PromptInputCommandDefinition[];
     onSelect?: (command: PromptInputCommandDefinition, draft: AgentChatComposerDraft) => void;
   };
+  /**
+   * Manual session compaction. When set, a built-in `/compact` entry always
+   * leads the slash menu; selecting it runs this action immediately — no
+   * reference chip, no submitted text — bypassing `slashCommands.onSelect`.
+   * A rejection renders in the composer's status notice region. The status
+   * half (live "compacting" phase, post-compaction transcript reload) is
+   * `useSessionCompaction` in `SessionCompaction` — wire both for full HITL.
+   */
+  onCompact?: () => Promise<unknown>;
   /** Controlled MCP catalog revealed by `@`; selections become composer references. */
   mentionCommands?: {
     items: readonly PromptInputCommandDefinition[];
@@ -190,12 +199,6 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
    * its actions, while preserving a hidden model-visible text companion.
    */
   showAssistantActions?: (context: AgentChatRenderMessageContext<MessageT>) => boolean;
-  /**
-   * Selects transcript rows that should anchor at the top when they appear.
-   * Defaults to user messages; large deterministic assistant guides can opt in
-   * so their introduction is visible instead of their final action.
-   */
-  isMessageScrollAnchor?: (context: AgentChatRenderMessageContext<MessageT>) => boolean;
 }
 interface AgentChatComposerDraft {
   value: string;
@@ -213,6 +216,30 @@ interface PermissionModeControl {
  * Low-level transcript/composer surface used by `ThinkChat`: props in, no
  * transport. Product code that talks to a Cloudflare Think agent should render
  * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
+ *
+ * The transcript is always windowed with TanStack Virtual (end-anchored,
+ * follow-on-append): only the visible rows exist in the DOM, so hours-long
+ * runs stay cheap. Consequences and the host-side contract:
+ * - Every message needs a stable `id`; keys must survive prepends and stream
+ *   growth.
+ * - Keep unchanged message objects referentially stable across updates.
+ *   Structured-cloning the array per delta over a worker/extension boundary
+ *   rebuilds every identity and defeats row memoization — clone once per
+ *   throttled batch instead.
+ * - Throttle stream deltas before React state (AI SDK
+ *   `experimental_throttle: 50` or equivalent).
+ * - Bound the data itself: windowing caps DOM size, not JS memory. Truncate
+ *   stored tool output at the buffer (~20k chars) and keep history
+ *   compaction on.
+ * - Unmount the transcript to hide it; don't `display: none` it — hidden
+ *   rows measure 0 and corrupt the virtualizer's cached heights.
+ * - Rows unmount off-screen: find-in-page only searches the window;
+ *   disclosure state persists via the built-in `ExpansionStateProvider`
+ *   (pass your own store via a wrapper to survive route remounts), but the
+ *   default `Reasoning` disclosure resets.
+ * - The transcript is not a screen-reader live region (windowing would
+ *   announce re-inserted old rows as new); announce new messages from a
+ *   host-owned live region if that matters.
  */
 declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   className,
@@ -228,6 +255,7 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   composerHeader,
   composerTools,
   slashCommands,
+  onCompact,
   mentionCommands,
   contextSelector,
   composerEndTools,
@@ -247,7 +275,6 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   renderPart,
   renderMessageAfter,
   showAssistantActions,
-  isMessageScrollAnchor,
   ref
 }: AgentChatProps<MessageT> & {
   ref?: React.Ref<HTMLDivElement>;

package/dist/{CodeBlock-Cp67Njo3.js → CodeBlock-B3RLU3ez.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
 import { Select } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-TWq8nZhc.js";
+import { t as CopyButton } from "./copy-button-Buxmtmp9.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/{FileTree-DW60q1w7.js → FileTree-CYr5og0q.js}

@@ -1,5 +1,5 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { C as FileIcon, T as FolderOpenIcon, m as ChevronRightIcon, w as FolderIcon } from "./icons-ua6f_GH3.js";
+import { C as FileIcon, T as FolderOpenIcon, m as ChevronRightIcon, w as FolderIcon } from "./icons-w5PpKGRz.js";
 import { t as NavigationLink } from "./navigation-link-Cob7KBlM.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{Message-_-bEYLAO.js → Message-KlK8tlBZ.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
 import { Button } from "./components/Button.js";
-import { C as FileIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "./icons-ua6f_GH3.js";
+import { C as FileIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "./icons-w5PpKGRz.js";
 import { IconButton } from "./components/IconButton.js";
 import { c as useWorkspaceNavigationContext, r as resolveWorkspaceLink, t as WorkspaceFileLink } from "./WorkspaceLink-BYYeTQLf.js";
 import { t as AttachmentPreview } from "./attachment-preview-DIs50Q0h.js";

package/dist/{ModelSelector-Brvj9Cab.js → ModelSelector-YTlqkIjs.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
 import { Button } from "./components/Button.js";
-import { G as SearchIcon, f as ChevronDownIcon } from "./icons-ua6f_GH3.js";
+import { G as SearchIcon, f as ChevronDownIcon } from "./icons-w5PpKGRz.js";
 import { Dialog } from "./components/Dialog.js";
 import { i as titleCase } from "./format-S6uWyoSb.js";
 import { Separator } from "./components/Separator.js";

package/dist/{ThinkChat-E_HrfH76.js → ThinkChat-DVhCEjq-.js}

@@ -1,7 +1,7 @@
 import { AgentChat } from "./components/AgentChat.js";
 import { AgentToolRunsProvider, useOptionalAgentToolRuns } from "./components/AgentToolRunsContext.js";
 import { SubagentRunList } from "./components/SubagentRunList.js";
-import { ThinkChatContext, useThinkChatContext } from "./components/ThinkChatContext.js";
+import { ThinkChatContext, ThinkChatLiveContext, useThinkChatContext } from "./components/ThinkChatContext.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/ThinkChatActivity.js";
 import { ThinkRecoveryNotice } from "./components/ThinkRecoveryNotice.js";
 import * as React from "react";
@@ -103,9 +103,18 @@ function useThinkPendingExecutionApprovals(stub, sourceKey, refreshSignal, enabl
 * stream with agent work folded into collapsed Activity blocks.
 */
 function ThinkChatProvider({ agentTools, chat, children }) {
+	const isStreaming = Boolean(chat.isStreaming);
+	const lastMessageId = chat.messages.at(-1)?.id;
+	const live = React.useMemo(() => ({
+		isStreaming,
+		lastMessageId
+	}), [isStreaming, lastMessageId]);
 	const chatProvider = /* @__PURE__ */ jsx(ThinkChatContext.Provider, {
 		value: chat,
-		children
+		children: /* @__PURE__ */ jsx(ThinkChatLiveContext.Provider, {
+			value: live,
+			children
+		})
 	});
 	return agentTools ? /* @__PURE__ */ jsx(AgentToolRunsProvider, {
 		agentTools,

package/dist/{ThinkChatActivity-2BobmuvR.d.ts → ThinkChatActivity-DMTHKWrI.d.ts}

@@ -1,5 +1,5 @@
 import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
-import { r as AgentChatProps } from "./AgentChat-Bm1qYbOo.js";
+import { r as AgentChatProps } from "./AgentChat-DHxdTjwF.js";
 import { l as ThinkChatPart } from "./ThinkChatToolParts-CSzVwMXf.js";
 import { t as ThinkChatActivityDescription } from "./ThinkChatActivitySummary-kr5fE0wg.js";
 import * as React from "react";
@@ -40,19 +40,21 @@ interface ThinkChatActivityProps {
   isStreaming?: boolean;
   /** Per-tool action/panel overrides, keyed by tool name. */
   toolRenderers?: ThinkChatToolRenderers;
+  /**
+   * Uniquely identifies this run across the whole transcript for persisted
+   * disclosure state (the activity renderer passes `${message.id}:${runStart}`).
+   * Without it, the first step's key is the scope — unique for tool-led runs
+   * (toolCallId) but shared by reasoning-led runs in different messages, whose
+   * open/closed state then bleeds together across virtualization remounts.
+   */
+  stateKey?: string;
 }
-/**
- * One run of agent work as a collapsed Activity block: while streaming the
- * action shimmers with the live step; settled, it becomes a short summary
- * ("Thought, read 2 files and ran a command") over an expandable step log
- * with per-tool panels. Normally reached through `ThinkChat.Messages`;
- * exported for apps that lay out messages themselves.
- */
 declare function ThinkChatActivity({
   parts,
   defaultOpen,
   isStreaming,
-  toolRenderers
+  toolRenderers,
+  stateKey
 }: ThinkChatActivityProps): React.JSX.Element | null;
 /**
  * Builds a renderPart handler that folds every run of consecutive activity

package/dist/{ThinkChatContext-DrsZqdaO.d.ts → ThinkChatContext-B-Nk84Wi.d.ts}

@@ -12,5 +12,17 @@ type ThinkChatValue<State = unknown, MessageT extends UIMessage = UIMessage> = R
 declare const ThinkChatContext: React.Context<unknown>;
 declare function useOptionalThinkChatContext<State = unknown, MessageT extends UIMessage = UIMessage>(): ThinkChatValue<State, MessageT> | null;
 declare function useThinkChatContext<State = unknown, MessageT extends UIMessage = UIMessage>(component: string): ThinkChatValue<State, MessageT>;
+/**
+ * The two live-chat facts transcript rows actually need. Kept separate from
+ * the full chat value (whose identity changes every stream delta) so memoized
+ * rows subscribed here only re-render when the run starts, ends, or moves to
+ * a new message.
+ */
+interface ThinkChatLiveValue {
+  isStreaming: boolean;
+  lastMessageId: string | undefined;
+}
+declare const ThinkChatLiveContext: React.Context<ThinkChatLiveValue | null>;
+declare function useOptionalThinkChatLive(): ThinkChatLiveValue | null;
 //#endregion
-export { useThinkChatContext as i, ThinkChatValue as n, useOptionalThinkChatContext as r, ThinkChatContext as t };
+export { useOptionalThinkChatContext as a, ThinkChatValue as i, ThinkChatLiveContext as n, useOptionalThinkChatLive as o, ThinkChatLiveValue as r, useThinkChatContext as s, ThinkChatContext as t };

package/dist/{ThinkRecoveryNotice-DFIcG9UX.d.ts → ThinkRecoveryNotice-D6gYcBbr.d.ts}

@@ -1,4 +1,4 @@
-import { n as ThinkChatValue } from "./ThinkChatContext-DrsZqdaO.js";
+import { i as ThinkChatValue } from "./ThinkChatContext-B-Nk84Wi.js";
 import { UIMessage } from "ai";
 
 //#region src/components/ThinkRecoveryNotice.d.ts

package/dist/{WorkspaceFileView-rUEN2iox.js → WorkspaceFileView-CuMjXYQn.js}

@@ -1,10 +1,10 @@
 import { buttonVariants } from "./components/Button.js";
-import { $ as WarningIcon, A as MaximizeIcon, d as CheckIcon, h as CodeIcon, tt as XIcon, x as EyeIcon, y as DownloadIcon } from "./icons-ua6f_GH3.js";
+import { A as MaximizeIcon, d as CheckIcon, et as WarningIcon, h as CodeIcon, nt as XIcon, x as EyeIcon, y as DownloadIcon } from "./icons-w5PpKGRz.js";
 import { t as NavigationLink } from "./navigation-link-Cob7KBlM.js";
 import { c as useWorkspaceNavigationContext, s as useWorkspaceNavigationRestoration } from "./WorkspaceLink-BYYeTQLf.js";
 import { r as formatClock } from "./format-S6uWyoSb.js";
-import { f as MessageResponse, m as createWorkspaceRehypePlugins } from "./Message-_-bEYLAO.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-Cp67Njo3.js";
+import { f as MessageResponse, m as createWorkspaceRehypePlugins } from "./Message-KlK8tlBZ.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-B3RLU3ez.js";
 import { AppTopBar } from "./components/AppTopBar.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./components/WorkspaceFile.js";
 import { WorkspaceHeader } from "./components/WorkspaceHeader.js";

package/dist/components/Activity.d.ts

@@ -5,6 +5,13 @@ import * as React from "react";
 interface ActivityProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {
   /** While true, the trigger action shimmers. */
   isStreaming?: boolean;
+  /**
+   * Stable id (tool call id, part key) that persists the open state in the
+   * surrounding `ExpansionStateProvider`, so a virtualized transcript restores
+   * the disclosure after the row unmounts and remounts. Without a provider or
+   * a key the disclosure stays plain uncontrolled local state.
+   */
+  stateKey?: string;
 }
 /**
  * A collapsible activity line that aggregates agent activity (tool calls,
@@ -30,6 +37,7 @@ declare function Activity({
   className,
   isStreaming,
   defaultOpen,
+  stateKey,
   ref,
   ...props
 }: ActivityProps & {
@@ -108,6 +116,8 @@ interface ActivityItemGroupProps extends Omit<React.ComponentProps<typeof Collap
   detail?: React.ReactNode;
   /** Optional leading icon for the row. */
   icon?: React.ReactNode;
+  /** Persist the open state under this id in the ExpansionStateProvider. See Activity. */
+  stateKey?: string;
 }
 /**
  * An expandable activity row — the second collapse level. The trigger reads
@@ -120,6 +130,7 @@ declare function ActivityItemGroup({
   detail,
   icon,
   children,
+  stateKey,
   ref,
   ...props
 }: ActivityItemGroupProps & {

package/dist/components/Activity.js

@@ -1,6 +1,7 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { m as ChevronRightIcon } from "../icons-ua6f_GH3.js";
+import { useExpansionState } from "./ExpansionState.js";
+import { m as ChevronRightIcon } from "../icons-w5PpKGRz.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx
@@ -24,12 +25,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * </Activity>
 * ```
 */
-function Activity({ className, isStreaming = false, defaultOpen = false, ref, ...props }) {
+function Activity({ className, isStreaming = false, defaultOpen = false, stateKey, ref, ...props }) {
+	const [open, setOpen] = useExpansionState(stateKey, defaultOpen);
+	const openProps = stateKey !== void 0 ? {
+		open,
+		onOpenChange: setOpen
+	} : { defaultOpen };
 	return /* @__PURE__ */ jsx(Collapsible.Root, {
 		ref,
 		className: cx("activity", className),
-		defaultOpen,
 		"data-streaming": isStreaming || void 0,
+		...openProps,
 		...props,
 		unstyled: true
 	});
@@ -104,10 +110,16 @@ function ActivityContent({ className, children, ref, ...props }) {
 * like a plain ActivityItem; expanding reveals chrome-free detail (a Terminal,
 * a thought trace) flush inside the outer Activity log.
 */
-function ActivityItemGroup({ className, action, detail, icon, children, ref, ...props }) {
+function ActivityItemGroup({ className, action, detail, icon, children, stateKey, ref, ...props }) {
+	const [open, setOpen] = useExpansionState(stateKey, false);
+	const openProps = stateKey !== void 0 ? {
+		open,
+		onOpenChange: setOpen
+	} : void 0;
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		ref,
 		className: cx("activity__group", className),
+		...openProps,
 		...props,
 		unstyled: true,
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {

package/dist/components/AgentActivity.js

@@ -1,4 +1,4 @@
-import { $ as WarningIcon, B as PencilIcon, C as FileIcon, F as MonitorIcon, G as SearchIcon, O as InfoIcon, Z as TerminalIcon, et as WrenchIcon, k as LinkIcon } from "../icons-ua6f_GH3.js";
+import { B as PencilIcon, C as FileIcon, F as MonitorIcon, G as SearchIcon, O as InfoIcon, Q as TerminalIcon, et as WarningIcon, k as LinkIcon, tt as WrenchIcon } from "../icons-w5PpKGRz.js";
 import { inferFaviconUrl } from "../utils/favicon.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/AgentActivityPreview.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { $ as WarningIcon, C as FileIcon, j as McpIcon, q as SpinnerIcon, tt as XIcon } from "../icons-ua6f_GH3.js";
+import { C as FileIcon, et as WarningIcon, j as McpIcon, nt as XIcon, q as SpinnerIcon } from "../icons-w5PpKGRz.js";
 import { ActivityHeader } from "./Activity.js";
 import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-Bm1qYbOo.js";
+import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-DHxdTjwF.js";
 export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };