@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/AgentActivity-BNUNrP9O.d.ts

@@ -0,0 +1,36 @@
+import { n as WorkspaceDestination } from "./WorkspaceLink-DK1DWMHe.js";
+import * as React from "react";
+
+//#region src/components/AgentActivity.d.ts
+type AgentActivityMode = "working" | "approval";
+type AgentActivityIconKind = "thought" | "read" | "edit" | "search" | "web" | "command" | "browser" | "tool" | "approval";
+/** Safe, serializable presentation state suitable for an Agents SDK state object. */
+interface AgentActivitySummary<CustomIcon extends string = never> {
+  mode: AgentActivityMode;
+  label: string;
+  iconKind: AgentActivityIconKind | CustomIcon;
+  /** Optional presentation hint. Consumers decide whether exposing or fetching it is safe. */
+  url?: string;
+  /** Optional file target. Hosts validate it against their workspace before navigation. */
+  workspaceDestination?: Extract<WorkspaceDestination, {
+    kind: "file";
+  }>;
+}
+interface AgentActivityIconProps {
+  kind: string;
+}
+/** Built-in icon vocabulary shared by AI SDK activity and Agents SDK state summaries. */
+declare function AgentActivityIcon({
+  kind
+}: AgentActivityIconProps): React.JSX.Element;
+interface AgentActivityFaviconProps {
+  url: string;
+  fallbackKind?: AgentActivityIconKind;
+}
+/** Site favicon for URL-backed activity, with the shared icon vocabulary as fallback. */
+declare function AgentActivityFavicon({
+  fallbackKind,
+  url
+}: AgentActivityFaviconProps): React.JSX.Element;
+//#endregion
+export { AgentActivityIconProps as a, AgentActivityIconKind as i, AgentActivityFaviconProps as n, AgentActivityMode as o, AgentActivityIcon as r, AgentActivitySummary as s, AgentActivityFavicon as t };

package/dist/{AgentChat-DQkqt82e.d.ts → AgentChat-CrlpbvQJ.d.ts}

@@ -1,4 +1,4 @@
-import { W as PromptInputDictationProps, tt as PromptInputMessage } from "./PromptInput-ClNqBiIw.js";
+import { Z as PromptInputContextSelectorProps, _t as PromptInputReference, dt as PromptInputMessage, et as PromptInputDictationProps, j as PromptInputCommandDefinition, r as PermissionMode } from "./PromptInput-BWTuXMOD.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
 import { PendingApproval, Think } from "@cloudflare/think";
@@ -81,12 +81,41 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   showComposer?: boolean;
   /** Called when the user hits stop while `status` is streaming/submitted. */
   onStop?: () => void;
+  /**
+   * Let a composed follow-up submit while a response is active. The single
+   * trailing action remains Stop until the draft contains content, then
+   * becomes Queue. The transport remains the queue owner.
+   */
+  allowSubmitWhileBusy?: boolean;
+  /**
+   * Authoritative user messages waiting behind the active turn. Their ids are
+   * excluded from the transcript and rendered as queued cards above the composer.
+   */
+  queuedMessages?: readonly MessageT[];
+  /** Promote a queued message into the host's steering flow. */
+  onSteerQueuedMessage?: (message: MessageT) => void;
+  /** Remove a queued message through the host-owned queue transport. */
+  onRemoveQueuedMessage?: (message: MessageT) => void;
   placeholder?: string;
   disabled?: boolean;
   /** Rendered in place of the transcript while `messages` is empty. */
   emptyState?: React.ReactNode;
   /** Extra controls rendered in the composer toolbar. */
   composerTools?: React.ReactNode;
+  /** Controlled slash-command catalog and host-owned selection policy. */
+  slashCommands?: {
+    items: readonly PromptInputCommandDefinition[];
+    onSelect?: (command: PromptInputCommandDefinition, draft: AgentChatComposerDraft) => void;
+  };
+  /** Controlled MCP catalog revealed by `@`; selections become composer references. */
+  mentionCommands?: {
+    items: readonly PromptInputCommandDefinition[];
+    onSelect?: (command: PromptInputCommandDefinition, draft: AgentChatComposerDraft) => void;
+  };
+  /** Controlled folder or working-context picker rendered beside permission controls. */
+  contextSelector?: PromptInputContextSelectorProps;
+  /** Extra controls rendered at the trailing edge, before dictation and submit. */
+  composerEndTools?: React.ReactNode;
   /** Whole upstream voice-input hook result used by the built-in dictation recorder. */
   voiceInput?: UseVoiceInputReturn;
   /** Host prerequisite run before the built-in recorder calls `voiceInput.start()`. */
@@ -132,6 +161,8 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   onApprovalResponse?: ChatAddToolApproveResponseFunction;
   /** Whole upstream Think stub used to resolve paused and durable execution approvals. */
   thinkStub?: AgentStub<Think>;
+  /** Parent-owned approval policy. Omit to keep AgentChat's session-local mode. */
+  permissionModeControl?: PermissionModeControl;
   /** Called after a Think approve/reject RPC settles, including when it rejects. */
   onExecutionSettled?: () => void | Promise<void>;
   /** Think durable-pause approvals from `pendingApprovals()`, rendered when `thinkStub` is set. */
@@ -154,10 +185,10 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
    * `isTextUIPart`, `isReasoningUIPart`, `isFileUIPart`, `isToolUIPart`,
    * `getToolName`, and Think's `getToolPartState`/input/output accessors. It
    * also renders native AI SDK `source-url`/`source-document` parts as a single
-   * grouped `Sources` block when they appear consecutively, and native
-   * `step-start` parts as step separators. App-defined `data-*` parts stay
-   * whole and should be narrowed with AI SDK's `isDataUIPart` inside this
-   * callback. If you override source rendering,
+   * grouped `Sources` block when they appear consecutively, consolidates native
+   * reasoning parts into one disclosure, and treats `step-start` as a silent
+   * structural boundary. App-defined `data-*` parts stay whole and should be
+   * narrowed with AI SDK's `isDataUIPart` inside this callback. If you override source rendering,
    * return a React node for every source part you want to show; returning
    * `undefined` lets `AgentChat` keep the upstream-shaped source-run grouping.
    */
@@ -165,6 +196,18 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   /** Rendered after each message's parts — for actions, citations, and the like. */
   renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;
 }
+interface AgentChatComposerDraft {
+  value: string;
+  references: readonly PromptInputReference[];
+  setValue: (value: string) => void;
+  clear: () => void;
+  addReference: (reference: PromptInputReference) => void;
+  removeReference: (reference: PromptInputReference) => void;
+}
+interface PermissionModeControl {
+  value: PermissionMode;
+  onChange: (mode: PermissionMode) => void | Promise<void>;
+}
 /**
  * Low-level transcript/composer surface used by `ThinkChat`: props in, no
  * transport. Product code that talks to a Cloudflare Think agent should render
@@ -173,15 +216,23 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
 declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   className,
   messages,
+  queuedMessages,
+  onSteerQueuedMessage,
+  onRemoveQueuedMessage,
   status,
   onSubmit,
   showComposer,
   onStop,
+  allowSubmitWhileBusy,
   placeholder,
   disabled,
   emptyState,
   composerHeader,
   composerTools,
+  slashCommands,
+  mentionCommands,
+  contextSelector,
+  composerEndTools,
   voiceInput,
   beforeVoiceStart,
   composerAddMenuItems,
@@ -190,6 +241,7 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   onEditAndResend,
   onApprovalResponse,
   thinkStub,
+  permissionModeControl,
   onExecutionSettled,
   pendingApprovals: durableApprovals,
   contextWindow,
@@ -200,4 +252,4 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { AgentChatRenderPartContext as a, AgentChatRenderMessageContext as i, AgentChatPart as n, AgentChatProps as r, AgentChat as t };
+export { AgentChatRenderMessageContext as a, AgentChatProps as i, AgentChatComposerDraft as n, AgentChatRenderPartContext as o, AgentChatPart as r, PermissionModeControl as s, AgentChat as t };

package/dist/{CodeBlock-DUh9WOGo.d.ts → CodeBlock-BRajW4QU.d.ts}

@@ -1,4 +1,4 @@
-import { p as SelectProps, t as Select } from "./Select-Dl_vF_Bt.js";
+import { m as SelectProps, t as Select } from "./Select-BeEsefzh.js";
 import { t as CopyButtonProps } from "./copy-button-DtPMgN7e.js";
 import * as React from "react";
 import { BundledLanguage, ThemedToken } from "shiki";

package/dist/{CodeBlock-BUFXG8HW.js → CodeBlock-BmB4Xaqq.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
 import { Select } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-DUMLYdsk.js";
+import { t as CopyButton } from "./copy-button-Dejn5heL.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";
@@ -308,18 +308,29 @@ function CodeBlockContainer({ className, children, ref, ...props }) {
 function CodeBlockContent({ className, ref, ...props }) {
 	const { code, language, showLineNumbers, isStreaming } = useCodeBlockContext();
 	const [html, setHtml] = React.useState(null);
-	const [theme, setTheme] = React.useState(() => typeof document !== "undefined" && document.documentElement.dataset.theme === "dark" ? "github-dark-high-contrast" : "github-light-high-contrast");
+	const [theme, setTheme] = React.useState(() => {
+		if (typeof document === "undefined") return "github-light-high-contrast";
+		const preference = document.documentElement.dataset.theme;
+		return preference === "dark" || preference === void 0 && window.matchMedia("(prefers-color-scheme: dark)").matches ? "github-dark-high-contrast" : "github-light-high-contrast";
+	});
 	React.useEffect(() => {
 		if (typeof document === "undefined") return;
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 		const update = () => {
-			setTheme(document.documentElement.dataset.theme === "dark" ? "github-dark-high-contrast" : "github-light-high-contrast");
+			const preference = document.documentElement.dataset.theme;
+			const dark = preference === "dark" || preference === void 0 && mediaQuery.matches;
+			setTheme(dark ? "github-dark-high-contrast" : "github-light-high-contrast");
 		};
 		const observer = new MutationObserver(update);
 		observer.observe(document.documentElement, {
 			attributes: true,
 			attributeFilter: ["data-theme"]
 		});
-		return () => observer.disconnect();
+		mediaQuery.addEventListener("change", update);
+		return () => {
+			observer.disconnect();
+			mediaQuery.removeEventListener("change", update);
+		};
 	}, []);
 	React.useEffect(() => {
 		if (isStreaming) return;

package/dist/{FileTree-mpEIcfzA.js → FileTree-CkVbIMWV.js}

@@ -1,5 +1,5 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
-import { _ as FolderOpenIcon, c as ChevronRightIcon, g as FolderIcon, h as FileIcon } from "./icons-Ba9THQKz.js";
+import { b as FolderOpenIcon, l as ChevronRightIcon, v as FileIcon, y as FolderIcon } from "./icons-CpfUer49.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/use-file-tree-nav.ts
@@ -10,41 +10,11 @@ function useFileTreeContext() {
 	return ctx;
 }
 /**
-* Builds a FileTreeContextValue that tracks registered nodes and dispatches
-* keyboard navigation per the WAI-ARIA Tree Pattern.
-*
-* Call `register` from every FileTreeFolder/FileTreeFile during render. The
-* hook resets its internal list on each render pass so removed nodes don't
-* leave stale entries.
+* Builds a FileTreeContextValue that dispatches keyboard navigation per the
+* WAI-ARIA Tree Pattern.
 */
-function useFileTreeNav({ expanded, selectedPath, onSelect, onExpandedChange }) {
-	const [focusedPath, setFocusedPath] = React.useState(null);
-	const nodesRef = React.useRef([]);
-	nodesRef.current = [];
-	const register = React.useCallback((path, kind, parentExpanded) => {
-		nodesRef.current.push({
-			path,
-			kind,
-			visible: parentExpanded
-		});
-	}, []);
-	const visibleNodes = () => nodesRef.current.filter((n) => n.visible);
-	const moveFocus = React.useCallback((direction, from) => {
-		const visible = visibleNodes();
-		const idx = visible.findIndex((n) => n.path === from);
-		if (idx < 0) return;
-		const next = visible[Math.max(0, Math.min(visible.length - 1, idx + direction))];
-		if (next) setFocusedPath(next.path);
-	}, []);
-	const focusFirstVisibleNode = React.useCallback(() => {
-		const first = visibleNodes()[0];
-		if (first) setFocusedPath(first.path);
-	}, []);
-	const focusLastVisibleNode = React.useCallback(() => {
-		const visible = visibleNodes();
-		const last = visible[visible.length - 1];
-		if (last) setFocusedPath(last.path);
-	}, []);
+function useFileTreeNav({ expanded, initialFocusedPath, selectedPath, onSelect, onExpandedChange }) {
+	const [focusedPath, setFocusedPath] = React.useState(initialFocusedPath);
 	const setFolderExpanded = React.useCallback((path, nextExpanded) => {
 		const next = new Set(expanded);
 		if (nextExpanded) next.add(path);
@@ -54,54 +24,52 @@ function useFileTreeNav({ expanded, selectedPath, onSelect, onExpandedChange })
 	const toggleFolderExpanded = React.useCallback((path) => {
 		setFolderExpanded(path, !expanded.has(path));
 	}, [expanded, setFolderExpanded]);
-	const keyHandlers = React.useMemo(() => ({
-		ArrowDown(path) {
-			moveFocus(1, path);
-		},
-		ArrowUp(path) {
-			moveFocus(-1, path);
-		},
-		ArrowRight(path, kind) {
-			if (!(kind === "folder")) return;
-			if (expanded.has(path)) moveFocus(1, path);
-			else setFolderExpanded(path, true);
-		},
-		ArrowLeft(path, kind) {
-			if (kind === "folder" && expanded.has(path)) setFolderExpanded(path, false);
-		},
-		Enter(path, kind) {
-			if (kind === "folder") {
-				onSelect(path);
-				toggleFolderExpanded(path);
-			} else onSelect(path);
-		},
-		" "(path, kind) {
-			if (kind === "folder") {
+	const handleKeyDown = React.useCallback((event, path, kind) => {
+		const tree = event.currentTarget.closest("[role=\"tree\"]");
+		const nodes = tree ? [...tree.querySelectorAll(".file-tree__node")] : [];
+		const currentIndex = nodes.indexOf(event.currentTarget);
+		const focusAt = (index) => nodes[index]?.focus();
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				focusAt(Math.min(nodes.length - 1, currentIndex + 1));
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				focusAt(Math.max(0, currentIndex - 1));
+				break;
+			case "ArrowRight":
+				if (kind !== "folder") return;
+				event.preventDefault();
+				if (expanded.has(path)) focusAt(currentIndex + 1);
+				else setFolderExpanded(path, true);
+				break;
+			case "ArrowLeft":
+				if (kind !== "folder" || !expanded.has(path)) return;
+				event.preventDefault();
+				setFolderExpanded(path, false);
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
 				onSelect(path);
-				toggleFolderExpanded(path);
-			} else onSelect(path);
-		},
-		Home() {
-			focusFirstVisibleNode();
-		},
-		End() {
-			focusLastVisibleNode();
+				if (kind === "folder") toggleFolderExpanded(path);
+				break;
+			case "Home":
+				event.preventDefault();
+				focusAt(0);
+				break;
+			case "End":
+				event.preventDefault();
+				focusAt(nodes.length - 1);
+				break;
 		}
-	}), [
+	}, [
 		expanded,
-		focusFirstVisibleNode,
-		focusLastVisibleNode,
-		moveFocus,
 		onSelect,
 		setFolderExpanded,
 		toggleFolderExpanded
 	]);
-	const handleKeyDown = React.useCallback((event, path, kind) => {
-		const keyHandler = keyHandlers[event.key];
-		if (!keyHandler) return;
-		event.preventDefault();
-		keyHandler(path, kind);
-	}, [keyHandlers]);
 	return {
 		focusedPath,
 		selectedPath,
@@ -113,12 +81,23 @@ function useFileTreeNav({ expanded, selectedPath, onSelect, onExpandedChange })
 		onExpandedChange: React.useCallback((path, next) => {
 			setFolderExpanded(path, next);
 		}, [setFolderExpanded]),
-		register,
 		handleKeyDown
 	};
 }
 //#endregion
 //#region src/components/FileTree.tsx
+function getFirstFileTreePath(children) {
+	let firstPath = null;
+	React.Children.forEach(children, (child) => {
+		if (firstPath || !React.isValidElement(child)) return;
+		if (child.type === FileTreeFolder || child.type === FileTreeFile) {
+			firstPath = child.props.path;
+			return;
+		}
+		if (child.type === React.Fragment) firstPath = getFirstFileTreePath(child.props.children);
+	});
+	return firstPath;
+}
 /**
 * A keyboard-accessible hierarchical file browser. Compose with
 * FileTreeFolder and FileTreeFile children.
@@ -146,14 +125,28 @@ function FileTree({ className, "aria-label": ariaLabel = "File tree", expanded,
 		if (!isControlled) setInternalExpanded(next);
 		onExpandedChange?.(next);
 	}, [isControlled, onExpandedChange]);
+	const handleSelect = React.useCallback((path) => {
+		onSelect?.(path);
+	}, [onSelect]);
 	const ctx = useFileTreeNav({
 		expanded: currentExpanded,
+		initialFocusedPath: getFirstFileTreePath(children),
 		selectedPath,
-		onSelect: React.useCallback((path) => {
-			onSelect?.(path);
-		}, [onSelect]),
+		onSelect: handleSelect,
 		onExpandedChange: handleExpandedChange
 	});
+	const treeRef = React.useRef(null);
+	React.useLayoutEffect(() => {
+		const nodes = [...treeRef.current?.querySelectorAll(".file-tree__node") ?? []];
+		if (nodes.length === 0) return;
+		if (nodes.some((node) => node.dataset.workspacePath === ctx.focusedPath)) return;
+		const firstPath = nodes[0]?.dataset.workspacePath;
+		if (firstPath) ctx.onFocus(firstPath);
+	}, [
+		children,
+		ctx.focusedPath,
+		ctx.onFocus
+	]);
 	return /* @__PURE__ */ jsx(FileTreeContext.Provider, {
 		value: ctx,
 		children: /* @__PURE__ */ jsx("div", {
@@ -161,10 +154,10 @@ function FileTree({ className, "aria-label": ariaLabel = "File tree", expanded,
 			className: cx("file-tree", className),
 			...props,
 			children: /* @__PURE__ */ jsx("ul", {
+				ref: treeRef,
 				className: "file-tree__list",
 				role: "tree",
 				"aria-label": ariaLabel,
-				tabIndex: 0,
 				children
 			})
 		})
@@ -177,18 +170,17 @@ function renderNestedFileTreeChild(child, level) {
 function dataFlag(enabled) {
 	return enabled ? "" : void 0;
 }
-function getFileTreeNodeTabIndex(focusedPath, path, level) {
-	return focusedPath === path || !focusedPath && level === 0 ? 0 : -1;
+function getFileTreeNodeTabIndex(focusedPath, path) {
+	return focusedPath === path ? 0 : -1;
 }
 function getFileTreeNodeIndent(level, offset) {
 	return `${level * 1.125 + offset}rem`;
 }
 function FileTreeFolder({ className, path, name, level = 0, children, ref, ...props }) {
-	const { expanded, focusedPath, selectedPath, onFocus, onSelect, register, handleKeyDown, onExpandedChange } = useFileTreeContext();
+	const { expanded, focusedPath, selectedPath, onFocus, onSelect, handleKeyDown, onExpandedChange } = useFileTreeContext();
 	const isExpanded = expanded.has(path);
 	const isFocused = focusedPath === path;
 	const isSelected = selectedPath === path;
-	register(path, "folder", true);
 	const toggle = React.useCallback(() => {
 		onExpandedChange(path, !isExpanded);
 	}, [
@@ -216,7 +208,8 @@ function FileTreeFolder({ className, path, name, level = 0, children, ref, ...pr
 			className: "file-tree__node file-tree__node--folder",
 			"data-focused": dataFlag(isFocused),
 			"data-selected": dataFlag(isSelected),
-			tabIndex: getFileTreeNodeTabIndex(focusedPath, path, level),
+			"data-workspace-path": path,
+			tabIndex: getFileTreeNodeTabIndex(focusedPath, path),
 			onClick: handleClick,
 			onFocus: () => onFocus(path),
 			onKeyDown: (e) => handleKeyDown(e, path, "folder"),
@@ -245,10 +238,9 @@ function FileTreeFolder({ className, path, name, level = 0, children, ref, ...pr
 	});
 }
 function FileTreeFile({ className, path, name, icon, level = 0, ref, ...props }) {
-	const { selectedPath, focusedPath, onFocus, onSelect, register, handleKeyDown } = useFileTreeContext();
+	const { selectedPath, focusedPath, onFocus, onSelect, handleKeyDown } = useFileTreeContext();
 	const isSelected = selectedPath === path;
 	const isFocused = focusedPath === path;
-	register(path, "file", true);
 	return /* @__PURE__ */ jsx("li", {
 		ref,
 		role: "treeitem",
@@ -260,7 +252,8 @@ function FileTreeFile({ className, path, name, icon, level = 0, ref, ...props })
 			className: "file-tree__node file-tree__node--file",
 			"data-selected": dataFlag(isSelected),
 			"data-focused": dataFlag(isFocused),
-			tabIndex: getFileTreeNodeTabIndex(focusedPath, path, level),
+			"data-workspace-path": path,
+			tabIndex: getFileTreeNodeTabIndex(focusedPath, path),
 			onClick: () => onSelect(path),
 			onFocus: () => onFocus(path),
 			onKeyDown: (e) => handleKeyDown(e, path, "file"),