@mcp-b/react-components 0.14.2 → 0.16.1

package/dist/components/IconButton.js

@@ -0,0 +1,27 @@
+import { Button } from "./Button.js";
+import { Tooltip } from "./Tooltip.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/IconButton.tsx
+/**
+* A square, icon-only button with a required accessible name and matching
+* tooltip. Use text buttons for actions whose consequence an icon cannot make
+* clear on its own.
+*/
+function IconButton({ children, label, size = "icon-sm", tooltip = label, tooltipSide = "top", type = "button", ...props }) {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			type,
+			size,
+			"aria-label": label,
+			...props
+		}),
+		children
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: tooltipSide,
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltip })
+	}) })] });
+}
+//#endregion
+export { IconButton };

package/dist/components/McpConnectionRequest.d.ts

@@ -0,0 +1,44 @@
+import { McpServerCard } from "../utils/mcp-server-catalog.js";
+import * as React from "react";
+import { DynamicToolUIPart, ToolUIPart } from "ai";
+import { MCPServersState } from "agents";
+
+//#region src/components/McpConnectionRequest.d.ts
+type McpConnectionRequestOutcome = "connected" | "declined" | "failed";
+interface McpConnectionRequestProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "part"> {
+  /** Whole upstream AI SDK tool part whose lifecycle this card renders. */
+  part: ToolUIPart | DynamicToolUIPart;
+  /** Canonical catalog/custom display data after the host validates the request. */
+  server: McpServerCard;
+  /** Plain-language detail supplied by the app's validated tool input or failed output. */
+  reason: React.ReactNode;
+  /** Whole upstream Agents MCP state, kept separate from the tool lifecycle. */
+  mcp?: MCPServersState;
+  /** App-validated meaning of an available tool output. */
+  outcome?: McpConnectionRequestOutcome;
+  /** Starts a new connection or replaces a stale non-ready upstream entry. */
+  onConnect?: (server: McpServerCard) => void | Promise<void>;
+  /** Declines the request. The host may remove any existing non-ready entry. */
+  onDecline?: () => void | Promise<void>;
+}
+/**
+ * In-chat MCP connection request backed by the AI SDK tool part and Agents MCP
+ * state. Failed and interrupted connections deliberately restart through the
+ * same `onConnect` seam instead of introducing recovery operations.
+ */
+declare function McpConnectionRequest({
+  part,
+  server,
+  reason,
+  mcp,
+  outcome,
+  onConnect,
+  onDecline,
+  className,
+  ref,
+  ...props
+}: McpConnectionRequestProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { McpConnectionRequest, McpConnectionRequestOutcome, McpConnectionRequestProps };

package/dist/components/McpConnectionRequest.js

@@ -0,0 +1,122 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { B as SpinnerIcon, T as McpIcon, o as CheckIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import { Button } from "./Button.js";
+import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "./AgentAttention.js";
+import { getMcpServerEntry, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";
+import { DescriptionList } from "./DescriptionList.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getToolPartState } from "@cloudflare/think/react";
+//#region src/components/McpConnectionRequest.tsx
+/**
+* In-chat MCP connection request backed by the AI SDK tool part and Agents MCP
+* state. Failed and interrupted connections deliberately restart through the
+* same `onConnect` seam instead of introducing recovery operations.
+*/
+function McpConnectionRequest({ part, server, reason, mcp, outcome, onConnect, onDecline, className, ref, ...props }) {
+	const [action, setAction] = React.useState(null);
+	const connectedServer = getMcpServerEntry(server, mcp)?.[1];
+	const serverState = connectedServer ? getMcpServerRuntimeState(connectedServer) : void 0;
+	const pendingAction = action && "pending" in action ? action.pending : null;
+	const actionError = action && "error" in action ? action.error : null;
+	const toolState = part.state === "output-available" && part.preliminary === true ? "streaming" : getToolPartState(part);
+	const settled = toolState === "complete" || toolState === "error" || toolState === "denied";
+	const preparing = !settled && (toolState === "streaming" || toolState === "waiting-approval" || toolState === "approved");
+	const connecting = pendingAction === "connect" || serverState === "connecting" || serverState === "discovering" || serverState === "connected" && !connectedServer?.error;
+	const reconnect = Boolean(actionError) || serverState === "authenticating" || serverState === "failed" || serverState === "not-connected" || serverState === "connected" && Boolean(connectedServer?.error);
+	const connectionError = actionError ?? connectedServer?.error ?? (serverState === "failed" ? "Connection failed. Reconnect to try again." : void 0);
+	async function runAction(kind, callback) {
+		if (pendingAction) return;
+		setAction({ pending: kind });
+		try {
+			await callback();
+			setAction(null);
+		} catch (error) {
+			setAction({ error: error instanceof Error ? error.message : String(error) });
+		}
+	}
+	if (settled) {
+		const failed = toolState === "error" || outcome === "failed";
+		const declined = toolState === "denied" || outcome === "declined";
+		const error = toolState === "error" && part.state === "output-error" ? part.errorText : outcome === "failed" ? reason : void 0;
+		return /* @__PURE__ */ jsxs(AgentAttention, {
+			ref,
+			...props,
+			"aria-atomic": "true",
+			className: cx("mcp-connection-request", "mcp-connection-request--settled", className),
+			"data-state": failed ? "failed" : declined ? "declined" : "connected",
+			role: failed ? "alert" : "status",
+			tone: failed ? "warning" : "neutral",
+			children: [/* @__PURE__ */ jsx(AgentAttentionHeader, {
+				icon: failed ? /* @__PURE__ */ jsx(WarningIcon, {}) : outcome === "connected" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(McpIcon, {}),
+				title: failed ? `Couldn’t connect ${server.name}` : declined ? `Skipped connecting ${server.name}` : outcome === "connected" ? `Connected to ${server.name}` : `Connection request completed for ${server.name}`
+			}), error ? /* @__PURE__ */ jsx(AgentAttentionBody, { children: /* @__PURE__ */ jsx("div", {
+				className: "mcp-connection-request__error",
+				children: error
+			}) }) : null]
+		});
+	}
+	const ready = serverState === "ready";
+	const title = preparing ? "Preparing connection request" : connecting ? `Connecting ${server.name}` : ready ? `Connected to ${server.name}` : reconnect ? `Reconnect ${server.name}` : `Connect ${server.name}`;
+	const description = preparing ? "Reading assistant request" : connecting ? "Setting up connection" : ready ? "Connection is ready" : reconnect ? "The previous connection needs attention" : "Assistant requested access";
+	const connectLabel = pendingAction === "connect" ? "Connecting…" : ready ? "Continue" : reconnect ? `Reconnect ${server.name}` : `Connect ${server.name}`;
+	return /* @__PURE__ */ jsxs(AgentAttention, {
+		ref,
+		...props,
+		busy: preparing || connecting,
+		className: cx("mcp-connection-request", className),
+		"data-state": serverState ?? (preparing ? "preparing" : "idle"),
+		tone: connectionError ? "warning" : "neutral",
+		children: [
+			/* @__PURE__ */ jsx(AgentAttentionHeader, {
+				description,
+				icon: preparing || connecting ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : ready ? /* @__PURE__ */ jsx(CheckIcon, {}) : reconnect ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(McpIcon, {}),
+				title
+			}),
+			/* @__PURE__ */ jsxs(AgentAttentionBody, {
+				className: "mcp-connection-request__body",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "mcp-connection-request__reason",
+						children: reason
+					}),
+					/* @__PURE__ */ jsx(DescriptionList.Root, {
+						className: "mcp-connection-request__endpoint",
+						children: /* @__PURE__ */ jsxs(DescriptionList.Item, {
+							className: "mcp-connection-request__endpoint-item",
+							children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: "Server" }), /* @__PURE__ */ jsx(DescriptionList.Details, {
+								className: "mcp-connection-request__endpoint-details",
+								title: server.url,
+								children: server.url
+							})]
+						})
+					}),
+					connectionError ? /* @__PURE__ */ jsxs("div", {
+						className: "mcp-connection-request__error",
+						role: "alert",
+						children: [/* @__PURE__ */ jsx(WarningIcon, {}), /* @__PURE__ */ jsx("span", { children: connectionError })]
+					}) : null
+				]
+			}),
+			onConnect || onDecline ? /* @__PURE__ */ jsxs(AgentAttentionActions, { children: [onConnect ? /* @__PURE__ */ jsx(Button, {
+				disabled: preparing || connecting || pendingAction !== null,
+				focusableWhenDisabled: preparing || connecting,
+				onClick: () => void runAction("connect", () => onConnect(server)),
+				size: "sm",
+				type: "button",
+				children: preparing ? "Preparing…" : connecting ? "Connecting…" : connectLabel
+			}) : null, onDecline ? /* @__PURE__ */ jsx(Button, {
+				color: "neutral",
+				disabled: preparing || pendingAction !== null,
+				focusableWhenDisabled: pendingAction === "decline",
+				onClick: () => void runAction("decline", onDecline),
+				size: "sm",
+				type: "button",
+				variant: "ghost",
+				children: pendingAction === "decline" ? "Skipping…" : "Not now"
+			}) : null] }) : null
+		]
+	});
+}
+//#endregion
+export { McpConnectionRequest };

package/dist/components/McpServerPicker.d.ts

@@ -1,42 +1,57 @@
+import { s as MenuItemProps, t as Menu } from "../Menu-Bgu-ufb5.js";
 import { McpServerCard } from "../utils/mcp-server-catalog.js";
+import { McpConnectorFormProps } from "./AgentConnection.js";
+import { DialogProps } from "./Dialog.js";
 import * as React from "react";
-import { MCPServer, MCPServersState } from "agents";
+import { MCPServersState } from "agents";
 
 //#region src/components/McpServerPicker.d.ts
 interface McpServerPickerProps {
   /** MCP servers to show in the plus-menu picker. */
   servers: readonly McpServerCard[];
-  /** Called when the user chooses a server; hosts own OAuth and connection state. */
+  /** Called for a new or non-ready server. Hosts should replace stale entries before adding it. */
   onConnect?: (server: McpServerCard) => void | Promise<void>;
   /** Upstream Agents SDK MCP state from `getMcpServers()` or `useAgent({ onMcpUpdate })`. */
   mcp?: MCPServersState;
-  /** Called when an OAuth server needs user authorization. */
-  onAuthorize?: McpServerConnectionAction;
-  /** Called when a failed server should retry through an app-owned Agent RPC. */
-  onRetry?: McpServerConnectionAction;
-  /** Called when a ready/connected server should refresh discovery through an app-owned Agent RPC. */
-  onRefresh?: McpServerConnectionAction;
-  /** Called when an authenticating or connected server should be removed or disconnected. */
-  onDisconnect?: McpServerConnectionAction;
+  /** Called when an upstream server entry should be removed. */
+  onDisconnect?: (serverId: string) => void | Promise<void>;
   /** Offset from the plus trigger to the menu, useful for prompt composers. */
   sideOffset?: number;
   /** Accessible name for the plus trigger. */
   triggerLabel?: string;
 }
-type McpServerConnectionAction = (serverId: string, server: MCPServer) => void | Promise<void>;
 type McpServerPickerItemsProps = Omit<McpServerPickerProps, "sideOffset" | "triggerLabel">;
-/**
- * Prompt plus-menu picker for choosing an MCP server and handing connection
- * work back to the host app.
- */
+interface McpServerPickerGroupProps extends Omit<React.ComponentProps<typeof Menu.Group>, "children" | "label"> {
+  /** Quiet visible heading for a related set of picker actions. */
+  label: React.ReactNode;
+  children: React.ReactNode;
+}
+interface McpServerPickerActionProps extends Omit<MenuItemProps, "children" | "label"> {
+  icon?: React.ReactNode;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+}
+interface McpServerSetupDialogProps extends Pick<McpConnectorFormProps, "defaults" | "onSubmit" | "redirectUrl" | "status"> {
+  /** Selected catalog entry. Passing null closes the dialog. */
+  server: McpServerCard | null;
+  /** Called when the user dismisses the dialog. */
+  onOpenChange: NonNullable<DialogProps["onOpenChange"]>;
+}
+/** Manual MCP setup surface driven by the same catalog metadata as the picker. */
+declare function McpServerSetupDialog({
+  server,
+  defaults,
+  onOpenChange,
+  onSubmit,
+  redirectUrl,
+  status
+}: McpServerSetupDialogProps): React.JSX.Element;
+/** Prompt plus-menu picker for connecting and removing MCP servers. */
 declare function McpServerPicker({
   servers,
   onConnect,
   mcp,
-  onAuthorize,
   onDisconnect,
-  onRefresh,
-  onRetry,
   sideOffset,
   triggerLabel
 }: McpServerPickerProps): React.JSX.Element;
@@ -44,10 +59,20 @@ declare function McpServerPickerItems({
   servers,
   onConnect,
   mcp,
-  onAuthorize,
-  onDisconnect,
-  onRefresh,
-  onRetry
+  onDisconnect
 }: McpServerPickerItemsProps): React.JSX.Element;
+declare function McpServerPickerGroup({
+  label,
+  children,
+  className,
+  ...props
+}: McpServerPickerGroupProps): React.JSX.Element;
+declare function McpServerPickerAction({
+  icon,
+  label,
+  description,
+  className,
+  ...props
+}: McpServerPickerActionProps): React.JSX.Element;
 //#endregion
-export { McpServerConnectionAction, McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps };
+export { McpServerPicker, McpServerPickerAction, McpServerPickerActionProps, McpServerPickerGroup, McpServerPickerGroupProps, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps, McpServerSetupDialog, McpServerSetupDialogProps };