@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/components/McpServerPicker.js

@@ -1,227 +1,276 @@
-import { A as RefreshIcon, C as MinusIcon, L as WarningIcon, N as SpinnerIcon, a as CheckIcon, b as LinkIcon } from "../icons-Ba9THQKz.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { B as SpinnerIcon, O as MinusIcon, o as CheckIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import { buttonVariants } from "./Button.js";
+import { Dialog } from "./Dialog.js";
 import { Menu } from "./Menu.js";
-import { PromptInputActionMenuTrigger } from "./PromptInput.js";
-import { getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";
+import { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger } from "./PromptInput.js";
+import { getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";
+import { McpConnectorForm } from "./AgentConnection.js";
+import { Avatar } from "./Avatar.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/McpServerPicker.tsx
-/**
-* Prompt plus-menu picker for choosing an MCP server and handing connection
-* work back to the host app.
-*/
-function McpServerPicker({ servers, onConnect, mcp, onAuthorize, onDisconnect, onRefresh, onRetry, sideOffset = 80, triggerLabel = "Add server" }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "mcp-server-picker",
-		children: /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(PromptInputActionMenuTrigger, {
-			className: "mcp-server-picker__trigger",
-			"aria-label": triggerLabel
-		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-			side: "top",
-			align: "start",
-			sideOffset,
-			collisionPadding: 8,
-			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				tabIndex: 0,
-				"aria-label": "Servers",
-				className: "mcp-server-picker__popup",
-				children: /* @__PURE__ */ jsx(McpServerPickerItems, {
-					servers,
-					onConnect,
-					mcp,
-					onAuthorize,
-					onDisconnect,
-					onRefresh,
-					onRetry
-				})
-			})
-		}) })] })
+/** Manual MCP setup surface driven by the same catalog metadata as the picker. */
+function McpServerSetupDialog({ server, defaults, onOpenChange, onSubmit, redirectUrl, status }) {
+	const formDefaults = server ? {
+		...defaults,
+		name: server.id,
+		url: server.url
+	} : defaults;
+	function handleSubmit(values) {
+		if (!server?.url) return onSubmit(values);
+		return onSubmit({
+			...values,
+			name: server.id,
+			url: server.url
+		});
+	}
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: server !== null,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, { children: [
+			/* @__PURE__ */ jsxs(Dialog.Header, { children: [/* @__PURE__ */ jsx(Dialog.Title, { children: server ? `${server.name} MCP` : "MCP connectors" }), /* @__PURE__ */ jsx(Dialog.Description, { children: server?.manualSetup?.description ?? "Connect a remote MCP server the model can call." })] }),
+			server?.manualSetup?.links.length ? /* @__PURE__ */ jsx("div", {
+				className: "mcp-server-setup-dialog__links",
+				children: server.manualSetup.links.map((link) => /* @__PURE__ */ jsx("a", {
+					className: buttonVariants({
+						size: "sm",
+						variant: "link"
+					}),
+					href: link.url,
+					rel: "noreferrer",
+					target: "_blank",
+					children: link.label
+				}, link.url))
+			}) : null,
+			/* @__PURE__ */ jsx(McpConnectorForm, {
+				auth: server?.manualSetup?.auth,
+				defaults: formDefaults,
+				readOnlyServer: Boolean(server?.url),
+				redirectUrl,
+				status,
+				onSubmit: handleSubmit
+			}, server?.id ?? "custom"),
+			/* @__PURE__ */ jsx(Dialog.Footer, { children: /* @__PURE__ */ jsx(Dialog.Close, { children: "Close" }) })
+		] }) })] })
 	});
 }
-function McpServerPickerItems({ servers, onConnect, mcp, onAuthorize, onDisconnect, onRefresh, onRetry }) {
-	const [pendingAction, setPendingAction] = React.useState(null);
+/** Prompt plus-menu picker for connecting and removing MCP servers. */
+function McpServerPicker({ servers, onConnect, mcp, onDisconnect, sideOffset = 12, triggerLabel = "Add server" }) {
+	return /* @__PURE__ */ jsxs(PromptInputActionMenu, { children: [/* @__PURE__ */ jsx(PromptInputActionMenuTrigger, { "aria-label": triggerLabel }), /* @__PURE__ */ jsx(PromptInputActionMenuContent, {
+		tabIndex: -1,
+		"aria-label": "Servers",
+		align: "start",
+		className: "mcp-server-picker__popup",
+		collisionPadding: 8,
+		side: "top",
+		sideOffset,
+		children: /* @__PURE__ */ jsx(McpServerPickerItems, {
+			servers,
+			onConnect,
+			mcp,
+			onDisconnect
+		})
+	})] });
+}
+function McpServerPickerItems({ servers, onConnect, mcp, onDisconnect }) {
+	const [action, setAction] = React.useState(null);
 	const rows = getPickerRows(servers, mcp);
-	async function runAction(action, serverId, server, handler) {
-		if (!handler) return;
-		setPendingAction(`${action}:${serverId}`);
+	const pendingAction = action && "pending" in action ? action.pending : null;
+	const actionError = action && "error" in action ? action.error : null;
+	async function runAction(key, callback) {
+		if (pendingAction) return;
+		setAction({ pending: key });
 		try {
-			await handler(serverId, server);
-		} finally {
-			setPendingAction(null);
+			await callback();
+			setAction(null);
+		} catch (error) {
+			setAction({ error: error instanceof Error ? error.message : String(error) });
 		}
 	}
-	if (rows.length === 0) return /* @__PURE__ */ jsx(Menu.Item, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [actionError ? /* @__PURE__ */ jsxs(Menu.Item, {
+		"aria-atomic": "true",
+		"aria-live": "polite",
+		className: "mcp-server-picker__action-error",
+		closeOnClick: false,
+		disabled: true,
+		children: [/* @__PURE__ */ jsx(WarningIcon, { size: 14 }), /* @__PURE__ */ jsx("span", { children: actionError })]
+	}) : null, rows.length === 0 ? /* @__PURE__ */ jsx(Menu.Item, {
 		disabled: true,
 		className: "mcp-server-picker__empty",
 		children: "No servers available."
+	}) : groupPickerRows(rows).map(([label, groupRows]) => /* @__PURE__ */ jsx(McpServerPickerGroup, {
+		label,
+		children: groupRows.map((row) => /* @__PURE__ */ jsx(McpServerPickerRow, {
+			pendingAction,
+			row,
+			onConnect: onConnect ? (server) => runAction(`connect:${server.id}:${server.url}`, () => onConnect(server)) : void 0,
+			onDisconnect: onDisconnect ? (id) => runAction(`disconnect:${id}`, () => onDisconnect(id)) : void 0
+		}, `${row.server.id}:${row.server.url}`))
+	}, label))] });
+}
+function McpServerPickerGroup({ label, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.Group, {
+		className: cx("mcp-server-picker__group", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
+			className: "mcp-server-picker__group-label",
+			children: label
+		}), children]
+	});
+}
+function McpServerPickerAction({ icon, label, description, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.Item, {
+		className: cx("mcp-server-picker__row", "mcp-server-picker__custom-action", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "mcp-server-picker__icon",
+			children: icon
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "mcp-server-picker__copy",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "mcp-server-picker__name",
+				children: label
+			}), description ? /* @__PURE__ */ jsx("span", {
+				className: "mcp-server-picker__description",
+				children: description
+			}) : null]
+		})]
 	});
-	return /* @__PURE__ */ jsx(Fragment, { children: rows.map((server) => /* @__PURE__ */ jsx(McpServerPickerRow, {
-		mcp,
-		pendingAction,
-		server,
-		onAuthorize: (id, entry) => void runAction("authorize", id, entry, onAuthorize),
-		onConnect,
-		onDisconnect: (id, entry) => void runAction("disconnect", id, entry, onDisconnect),
-		onRefresh: (id, entry) => void runAction("refresh", id, entry, onRefresh),
-		onRetry: (id, entry) => void runAction("retry", id, entry, onRetry)
-	}, server.id)) });
 }
-function McpServerPickerRow({ server, mcp, onConnect, onAuthorize, onDisconnect, onRefresh, onRetry, pendingAction }) {
-	const descriptionId = React.useId();
-	const connected = getConnectedServerEntry(server, mcp);
-	const connectedServerId = connected?.[0];
-	const connectedServer = connected?.[1];
-	const derivedStatus = server.status ?? connectedServer?.state;
-	const statusText = server.statusLabel ?? getStatusLabel(derivedStatus);
-	const connectedState = derivedStatus === "ready" || derivedStatus === "connected";
-	const busy = derivedStatus === "connecting" || derivedStatus === "authenticating" || derivedStatus === "discovering";
-	const disabled = !onConnect || busy || Boolean(connectedServer) || derivedStatus === "ready" || derivedStatus === "connected";
-	const pending = (action) => Boolean(connectedServerId && pendingAction === `${action}:${connectedServerId}`);
-	const hasStatusIcon = connectedState || busy || derivedStatus === "failed" || derivedStatus === "needs-auth";
+function McpServerPickerRow({ row, onConnect, onDisconnect, pendingAction }) {
+	const { entry, server } = row;
+	const connectedServerId = entry?.[0];
+	const connectedServer = entry?.[1];
+	const state = connectedServer ? getMcpServerRuntimeState(connectedServer) : void 0;
+	const connectKey = `connect:${server.id}:${server.url}`;
+	const connecting = state === "connecting" || state === "discovering" || state === "connected" && !connectedServer?.error;
+	const reconnectable = state === "authenticating" || state === "failed" || state === "not-connected" || state === "connected" && Boolean(connectedServer?.error);
+	const pendingConnect = pendingAction === connectKey;
+	const statusText = pendingConnect ? "Connecting" : getStatusLabel(state, connectedServer?.error);
+	const disabled = !onConnect || !(!connectedServer || reconnectable) || connecting || state === "ready" || pendingAction !== null;
+	const description = connectedServer?.error || server.description;
+	const disconnectPending = pendingAction === `disconnect:${connectedServerId}`;
+	let disconnectLabel = state === "ready" ? `Disconnect ${server.name}` : `Remove ${server.name}`;
+	if (disconnectPending) disconnectLabel = state === "ready" ? `Disconnecting ${server.name}` : `Removing ${server.name}`;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mcp-server-picker__row-shell",
-		"data-connection": connectedState ? "connected" : "disconnected",
-		"data-status": derivedStatus,
+		"data-error": connectedServer?.error ? "" : void 0,
+		"data-status": state,
 		children: [/* @__PURE__ */ jsxs(Menu.Item, {
+			"aria-busy": connecting || pendingConnect || void 0,
 			className: "mcp-server-picker__row",
 			closeOnClick: false,
-			"data-status": derivedStatus,
+			"data-status": state,
 			disabled,
-			"aria-busy": busy || void 0,
-			"aria-describedby": server.description ? descriptionId : void 0,
 			onClick: disabled ? void 0 : () => void onConnect(server),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "mcp-server-picker__icon",
-				children: renderIcon(server)
-			}), /* @__PURE__ */ jsxs("span", {
-				className: "mcp-server-picker__copy",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "mcp-server-picker__name",
-					children: server.name
-				}), server.description ? /* @__PURE__ */ jsx("span", {
-					id: descriptionId,
-					className: "mcp-server-picker__description",
-					children: server.description
-				}) : null]
-			})]
-		}), hasStatusIcon || connectedServer ? /* @__PURE__ */ jsxs("div", {
-			className: "mcp-server-picker__row-actions",
 			children: [
-				hasStatusIcon ? /* @__PURE__ */ jsxs("span", {
-					className: "mcp-server-picker__row-status",
-					title: statusText,
-					children: [/* @__PURE__ */ jsx(StatusIcon, { status: derivedStatus }), /* @__PURE__ */ jsx("span", {
-						className: "mcp-server-picker__status-label",
-						children: statusText
-					})]
-				}) : null,
-				connectedServer?.state === "authenticating" && connectedServerId && onAuthorize ? /* @__PURE__ */ jsx(McpServerActionItem, {
-					disabled: pending("authorize"),
-					icon: /* @__PURE__ */ jsx(LinkIcon, {}),
-					label: pending("authorize") ? `Opening ${server.name}` : `Authorize ${server.name}`,
-					onClick: () => onAuthorize(connectedServerId, connectedServer)
-				}) : null,
-				connectedServer?.state === "authenticating" && connectedServerId && onDisconnect ? /* @__PURE__ */ jsx(McpServerActionItem, {
-					disabled: pending("disconnect"),
-					icon: /* @__PURE__ */ jsx(MinusIcon, {}),
-					label: pending("disconnect") ? `Cancelling ${server.name} authentication` : `Cancel ${server.name} authentication`,
-					onClick: () => onDisconnect(connectedServerId, connectedServer)
-				}) : null,
-				connectedServer?.state === "failed" && connectedServerId && onRetry ? /* @__PURE__ */ jsx(McpServerActionItem, {
-					disabled: pending("retry"),
-					icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
-					label: pending("retry") ? `Retrying ${server.name}` : `Retry ${server.name}`,
-					onClick: () => onRetry(connectedServerId, connectedServer)
-				}) : null,
-				(connectedServer?.state === "ready" || connectedServer?.state === "connected") && connectedServerId && onRefresh ? /* @__PURE__ */ jsx(McpServerActionItem, {
-					disabled: pending("refresh"),
-					icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
-					label: pending("refresh") ? `Reconnecting ${server.name}` : `Reconnect ${server.name}`,
-					onClick: () => onRefresh(connectedServerId, connectedServer)
-				}) : null,
-				(connectedServer?.state === "ready" || connectedServer?.state === "connected") && connectedServerId && onDisconnect ? /* @__PURE__ */ jsx(McpServerActionItem, {
-					disabled: pending("disconnect"),
-					icon: /* @__PURE__ */ jsx(MinusIcon, {}),
-					label: pending("disconnect") ? `Disconnecting ${server.name}` : `Disconnect ${server.name}`,
-					onClick: () => onDisconnect(connectedServerId, connectedServer)
+				/* @__PURE__ */ jsx("span", {
+					className: "mcp-server-picker__icon",
+					children: /* @__PURE__ */ jsx(McpServerIcon, { server })
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "mcp-server-picker__copy",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mcp-server-picker__name",
+						children: server.name
+					}), description ? /* @__PURE__ */ jsx("span", {
+						className: "mcp-server-picker__description",
+						children: description
+					}) : null]
+				}),
+				statusText ? /* @__PURE__ */ jsx("span", {
+					className: "mcp-server-picker__row-state",
+					children: statusText
 				}) : null
 			]
+		}), connectedServer ? /* @__PURE__ */ jsxs("div", {
+			className: "mcp-server-picker__row-actions",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "mcp-server-picker__row-status",
+				title: statusText,
+				children: /* @__PURE__ */ jsx(StatusIcon, {
+					error: connectedServer.error,
+					pending: pendingConnect,
+					state
+				})
+			}), connectedServerId && onDisconnect ? /* @__PURE__ */ jsxs(Menu.Item, {
+				className: "mcp-server-picker__action",
+				closeOnClick: false,
+				disabled: pendingAction !== null,
+				onClick: pendingAction !== null ? void 0 : () => void onDisconnect(connectedServerId),
+				title: disconnectLabel,
+				children: [/* @__PURE__ */ jsx(MinusIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "mcp-server-picker__status-label",
+					children: disconnectLabel
+				})]
+			}) : null]
 		}) : null]
 	});
 }
-function McpServerActionItem({ disabled, icon, label, onClick }) {
-	return /* @__PURE__ */ jsxs(Menu.Item, {
-		className: "mcp-server-picker__action",
-		closeOnClick: false,
-		disabled,
-		onClick: disabled ? void 0 : () => void onClick(),
-		children: [icon, /* @__PURE__ */ jsx("span", {
-			className: "mcp-server-picker__status-label",
-			children: label
-		})]
-	});
+function StatusIcon({ error, pending, state }) {
+	if (pending || state === "connecting" || state === "discovering" || state === "connected" && !error) return /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 });
+	if (state === "ready") return /* @__PURE__ */ jsx(CheckIcon, { size: 14 });
+	return /* @__PURE__ */ jsx(WarningIcon, { size: 14 });
 }
-function StatusIcon({ status }) {
-	if (status === "ready" || status === "connected") return /* @__PURE__ */ jsx(CheckIcon, { size: 14 });
-	if (status === "failed" || status === "needs-auth") return /* @__PURE__ */ jsx(WarningIcon, { size: 14 });
-	if (status === "connecting" || status === "authenticating" || status === "discovering") return /* @__PURE__ */ jsx(SpinnerIcon, {
-		className: "mcp-server-picker__spinner",
-		size: 14
-	});
-	return null;
-}
-function getStatusLabel(status) {
-	if (status === "ready") return "Connected";
-	if (status === "connected") return "Connected";
-	if (status === "failed") return "Failed";
-	if (status === "needs-auth") return "Authorize";
-	if (status === "authenticating") return "Authenticating";
-	if (status === "connecting") return "Connecting";
-	if (status === "discovering") return "Discovering";
+function getStatusLabel(state, error) {
+	if (state === "ready") return "Connected";
+	if (state === "connecting" || state === "discovering" || state === "connected" && !error) return "Connecting";
+	if (state === "authenticating") return "Reconnect to sign in";
+	if (state === "connected" || state === "failed" || state === "not-connected") return "Reconnect";
 	return "";
 }
-function getConnectedServerEntry(card, mcp) {
-	if (!mcp) return void 0;
-	return Object.entries(mcp.servers).find(([serverId, entry]) => serverId === card.id || entry.server_url === card.url);
-}
 function getPickerRows(servers, mcp) {
-	if (!mcp) return [...servers];
-	const upstreamRows = Object.entries(mcp.servers).filter(([serverId, entry]) => !servers.some((server) => server.id === serverId || server.url === entry.server_url)).map(([serverId, entry]) => ({
-		id: serverId,
-		name: entry.name,
-		url: entry.server_url
+	const catalogRows = servers.map((server) => ({
+		server,
+		entry: getMcpServerEntry(server, mcp)
 	}));
-	return [...servers, ...upstreamRows];
+	if (!mcp) return catalogRows;
+	const resolvedServerIds = new Set(catalogRows.flatMap((row) => row.entry ? [row.entry[0]] : []));
+	const upstreamRows = Object.entries(mcp.servers).filter(([serverId]) => !resolvedServerIds.has(serverId)).map(([serverId, entry]) => ({
+		entry: [serverId, entry],
+		server: {
+			id: serverId,
+			name: entry.name,
+			url: entry.server_url
+		}
+	}));
+	return [...catalogRows, ...upstreamRows];
 }
-function renderIcon(server) {
-	const src = getMcpServerIconSrc(server);
-	if (src) return /* @__PURE__ */ jsx(IconImage, {
-		src,
-		name: server.name
-	});
-	return /* @__PURE__ */ jsx("span", {
-		className: "mcp-server-picker__fallback-icon",
-		children: server.name.slice(0, 1)
-	});
+function groupPickerRows(rows) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		const key = (row.entry ? getMcpServerRuntimeState(row.entry[1]) : void 0) === "ready" ? "Connected" : row.server.category === "Auto" ? "MCP connectors" : row.server.category === "Manual" ? "Manual setup" : row.server.category ?? "Other";
+		const group = groups.get(key) ?? [];
+		group.push(row);
+		groups.set(key, group);
+	}
+	const order = [
+		"Connected",
+		"MCP connectors",
+		"Manual setup",
+		"Other"
+	];
+	return [...groups.entries()].sort(([left], [right]) => (order.indexOf(left) === -1 ? order.length : order.indexOf(left)) - (order.indexOf(right) === -1 ? order.length : order.indexOf(right)));
 }
-function IconImage({ src, name }) {
-	const [failed, setFailed] = React.useState(false);
-	React.useEffect(() => {
-		setFailed(false);
-	}, [src]);
-	if (failed) return /* @__PURE__ */ jsx("span", {
-		className: "mcp-server-picker__fallback-icon",
-		children: name.slice(0, 1)
-	});
-	return /* @__PURE__ */ jsx("img", {
-		src,
-		alt: "",
-		width: 20,
-		height: 20,
-		loading: "lazy",
-		decoding: "async",
-		referrerPolicy: "no-referrer",
-		onError: () => setFailed(true)
+function McpServerIcon({ server }) {
+	const src = getMcpServerIconSrc(server);
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		className: "mcp-server-picker__avatar",
+		"aria-hidden": "true",
+		children: [src ? /* @__PURE__ */ jsx(Avatar.Image, {
+			alt: "",
+			className: "mcp-server-picker__avatar-image",
+			decoding: "async",
+			loading: "lazy",
+			referrerPolicy: "no-referrer",
+			src
+		}, src) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
+			className: "mcp-server-picker__avatar-fallback",
+			children: server.name.slice(0, 1)
+		})]
 	});
 }
 //#endregion
-export { McpServerPicker, McpServerPickerItems };
+export { McpServerPicker, McpServerPickerAction, McpServerPickerGroup, McpServerPickerItems, McpServerSetupDialog };

package/dist/components/Menubar.js

@@ -1,4 +1,4 @@
-import { a as CheckIcon, u as DotIcon } from "../icons-Ba9THQKz.js";
+import { o as CheckIcon, p as DotIcon } from "../icons-CpfUer49.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";

package/dist/components/Message.d.ts

@@ -59,6 +59,7 @@ type MessageResponseProps = StreamdownProps;
 declare const MessageResponse: React.MemoExoticComponent<({
   className,
   components,
+  rehypePlugins,
   ...props
 }: MessageResponseProps) => React.JSX.Element>;
 interface MessageAttachmentProps extends Omit<React.HTMLAttributes<HTMLElement>, "color" | "part"> {