@mcp-b/react-components 0.5.4 → 0.5.6

package/dist/components/AgentChat.d.ts

@@ -30,6 +30,8 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   emptyState?: React.ReactNode;
   /** Extra controls rendered in the composer toolbar. */
   composerTools?: React.ReactNode;
+  /** Extra rows rendered in the built-in plus menu after files. */
+  composerAddMenuItems?: React.ReactNode;
   /**
    * Transient status rendered between the transcript and the composer —
    * e.g. a "Reconnecting…" pill. `ThinkChat.Messages` fills this from the
@@ -86,6 +88,7 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   disabled,
   emptyState,
   composerTools,
+  composerAddMenuItems,
   notice,
   onRegenerate,
   onApprovalResponse,

package/dist/components/AgentChat.js

@@ -4,7 +4,7 @@ import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Act
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
 import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
-import { PromptInput, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -18,6 +18,17 @@ function AgentChatAttachButton() {
 		children: /* @__PURE__ */ jsx(PlusIcon, {})
 	});
 }
+function AgentChatAddMenu({ children }) {
+	if (!children) return /* @__PURE__ */ jsx(AgentChatAttachButton, {});
+	return /* @__PURE__ */ jsxs(PromptInputActionMenu, { children: [/* @__PURE__ */ jsx(PromptInputActionMenuTrigger, { "aria-label": "Add context" }), /* @__PURE__ */ jsxs(PromptInputActionMenuContent, {
+		side: "top",
+		align: "start",
+		sideOffset: 12,
+		collisionPadding: 8,
+		className: "agent-chat__add-menu",
+		children: [/* @__PURE__ */ jsx(PromptInputActionAddAttachments, {}), children]
+	})] });
+}
 function isCompactedPart(message, part, partIndex) {
 	const metadata = message.metadata;
 	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
@@ -88,7 +99,7 @@ function renderDefaultPart(part) {
 * transport. Use it directly with plain AI SDK `useChat` or a read-only
 * transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, notice, onRegenerate, onApprovalResponse, executionApprovals, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, executionApprovals, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
@@ -194,7 +205,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 						disabled
 					}) }),
 					/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
-						/* @__PURE__ */ jsx(AgentChatAttachButton, {}),
+						/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
 						approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
 							value: permissionMode,
 							onValueChange: setPermissionMode

package/dist/components/McpServerPicker.d.ts

@@ -1,15 +1,17 @@
 import * as React from "react";
-import { Icon } from "@modelcontextprotocol/sdk/types.js";
 
 //#region src/components/McpServerPicker.d.ts
 type McpServerPickerStatus = "connecting" | "needs-auth" | "authenticating" | "ready" | "failed";
+interface McpServerCardIcon {
+  src: string;
+}
 interface McpServerCard {
   id: string;
   name: string;
   url: string;
   description?: string;
   category?: string;
-  icon?: React.ReactNode | string | Icon;
+  icon?: string | McpServerCardIcon;
   status?: McpServerPickerStatus;
   statusLabel?: string;
 }
@@ -21,6 +23,7 @@ interface McpServerPickerProps {
   /** Offset from the plus trigger to the menu, useful for prompt composers. */
   sideOffset?: number;
 }
+type McpServerPickerItemsProps = Pick<McpServerPickerProps, "servers" | "onConnect">;
 /**
  * Prompt plus-menu picker for choosing an MCP server and handing connection
  * work back to the host app.
@@ -30,5 +33,9 @@ declare function McpServerPicker({
   onConnect,
   sideOffset
 }: McpServerPickerProps): React.JSX.Element;
+declare function McpServerPickerItems({
+  servers,
+  onConnect
+}: McpServerPickerItemsProps): React.JSX.Element | React.JSX.Element[];
 //#endregion
-export { McpServerCard, McpServerPicker, McpServerPickerProps, McpServerPickerStatus };
+export { McpServerCard, McpServerCardIcon, McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps, McpServerPickerStatus };

package/dist/components/McpServerPicker.js

@@ -9,8 +9,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * work back to the host app.
 */
 function McpServerPicker({ servers, onConnect, sideOffset = 80 }) {
-	const groups = groupServers(servers);
-	const showHeadings = groups.some((group) => group.category);
 	return /* @__PURE__ */ jsx("div", {
 		className: "mcp-server-picker",
 		children: /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
@@ -28,30 +26,42 @@ function McpServerPicker({ servers, onConnect, sideOffset = 80 }) {
 			collisionPadding: 8,
 			"aria-label": "MCP servers",
 			className: "mcp-server-picker__popup",
-			children: servers.length === 0 ? /* @__PURE__ */ jsx(MenuItem, {
-				disabled: true,
-				className: "mcp-server-picker__empty",
-				children: "No MCP servers available."
-			}) : groups.map((group) => /* @__PURE__ */ jsxs(MenuGroup, {
-				className: "mcp-server-picker__group",
-				children: [showHeadings ? /* @__PURE__ */ jsx(MenuGroupLabel, { children: group.category || "Servers" }) : null, group.servers.map((server) => /* @__PURE__ */ jsx(McpServerPickerRow, {
-					server,
-					onConnect
-				}, server.id))]
-			}, group.category))
+			children: /* @__PURE__ */ jsx(McpServerPickerItems, {
+				servers,
+				onConnect
+			})
 		})] })
 	});
 }
+function McpServerPickerItems({ servers, onConnect }) {
+	const groups = groupServers(servers);
+	const showHeadings = groups.some((group) => group.category);
+	if (servers.length === 0) return /* @__PURE__ */ jsx(MenuItem, {
+		disabled: true,
+		className: "mcp-server-picker__empty",
+		children: "No MCP servers available."
+	});
+	return groups.map((group) => /* @__PURE__ */ jsxs(MenuGroup, {
+		className: "mcp-server-picker__group",
+		children: [showHeadings ? /* @__PURE__ */ jsx(MenuGroupLabel, { children: group.category || "Servers" }) : null, group.servers.map((server) => /* @__PURE__ */ jsx(McpServerPickerRow, {
+			server,
+			onConnect
+		}, server.id))]
+	}, group.category));
+}
 function McpServerPickerRow({ server, onConnect }) {
 	const descriptionId = React.useId();
 	const statusText = server.statusLabel ?? getStatusLabel(server.status);
 	const busy = server.status === "connecting" || server.status === "authenticating";
+	const disabled = busy || server.status === "ready";
 	return /* @__PURE__ */ jsxs(MenuItem, {
 		className: "mcp-server-picker__row",
+		closeOnClick: false,
 		"data-status": server.status,
+		disabled,
 		"aria-busy": busy || void 0,
 		"aria-describedby": server.description ? descriptionId : void 0,
-		onClick: () => void onConnect(server),
+		onClick: disabled ? void 0 : () => void onConnect(server),
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "mcp-server-picker__icon",
@@ -93,9 +103,8 @@ function getStatusLabel(status) {
 	return "";
 }
 function renderIcon(icon, name) {
-	if (React.isValidElement(icon)) return icon;
 	if (typeof icon === "string") return /* @__PURE__ */ jsx(IconImage, { src: icon });
-	if (isMcpIcon(icon)) return /* @__PURE__ */ jsx(IconImage, { src: icon.src });
+	if (icon) return /* @__PURE__ */ jsx(IconImage, { src: icon.src });
 	return /* @__PURE__ */ jsx("span", {
 		className: "mcp-server-picker__fallback-icon",
 		children: name.slice(0, 1)
@@ -110,9 +119,6 @@ function IconImage({ src }) {
 		referrerPolicy: "no-referrer"
 	});
 }
-function isMcpIcon(icon) {
-	return Boolean(icon && typeof icon === "object" && "src" in icon && typeof icon.src === "string");
-}
 function groupServers(servers) {
 	const groups = [];
 	for (const server of servers) {
@@ -130,4 +136,4 @@ function groupServers(servers) {
 	return groups;
 }
 //#endregion
-export { McpServerPicker };
+export { McpServerPicker, McpServerPickerItems };

package/dist/components/PromptInput.d.ts

@@ -1,6 +1,6 @@
 import { A as SelectTriggerProps, M as SelectValueProps, S as SelectProps, f as SelectOption, j as SelectValue, r as SelectContentProps, s as SelectItemProps, t as Select } from "../Select-CRsKCJ9x.js";
 import { c as ComboboxGroup, d as ComboboxLabel, f as ComboboxList, g as ComboboxTrigger, h as ComboboxSeparator, l as ComboboxInput, m as ComboboxPositioner, p as ComboboxPopup, s as ComboboxEmpty, t as Combobox, u as ComboboxItem } from "../Combobox-D9anamNr.js";
-import { h as MenuItemProps, w as MenuProps, y as MenuPopupProps } from "../Menu-B5vDqZe_.js";
+import { h as MenuItemProps, l as MenuContentProps, w as MenuProps } from "../Menu-B5vDqZe_.js";
 import { c as TabsList, n as TabPanel, t as Tab } from "../Tabs-D9EAq09D.js";
 import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
 import * as React from "react";
@@ -261,7 +261,7 @@ declare function PromptInputActionMenuTrigger({
   children,
   ...props
 }: PromptInputActionMenuTriggerProps): React.JSX.Element;
-type PromptInputActionMenuContentProps = MenuPopupProps;
+type PromptInputActionMenuContentProps = MenuContentProps;
 declare function PromptInputActionMenuContent({
   className,
   children,

package/dist/components/PromptInput.js

@@ -4,7 +4,7 @@ import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { t as AttachmentPreview } from "../attachment-preview-ChtC3HiU.js";
 import { Combobox, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator } from "./Combobox.js";
-import { MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuTrigger } from "./Menu.js";
+import { MenuContent, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuTrigger } from "./Menu.js";
 import { Select, SelectContent, SelectItem, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from "./Select.js";
 import { Tab, TabPanel, TabsList } from "./Tabs.js";
 import * as React from "react";
@@ -538,11 +538,11 @@ function PromptInputActionMenuTrigger({ className, children, ...props }) {
 	}) });
 }
 function PromptInputActionMenuContent({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { children: /* @__PURE__ */ jsx(MenuPopup, {
+	return /* @__PURE__ */ jsx(MenuContent, {
 		className: cx("prompt-input__action-menu", className),
 		...props,
 		children
-	}) }) });
+	});
 }
 function PromptInputActionMenuItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(MenuItem, {

package/dist/components/ThinkChat.d.ts

@@ -31,6 +31,8 @@ interface ThinkChatMessagesProps extends ThinkChatActivityRendererOptions {
   emptyState?: React.ReactNode;
   /** Extra controls rendered inside the composer, next to the send button. */
   composerTools?: React.ReactNode;
+  /** Extra rows rendered in the built-in plus menu after files. */
+  composerAddMenuItems?: AgentChatProps["composerAddMenuItems"];
   /** Composer placeholder text. */
   placeholder?: string;
   /** Rendered after each message (e.g. per-message actions). */

package/dist/styles/agent-chat.css

@@ -43,6 +43,14 @@
   margin-inline: auto;
 }
 
+.agent-chat__add-menu {
+  inline-size: min(32rem, calc(100dvw - 1rem));
+  max-block-size: min(28rem, calc(100dvh - 2rem));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
 /* Transient status pill between transcript and composer (recovery, errors). */
 .agent-chat__notice {
   display: flex;

package/dist/styles/mcp-server-picker.css

@@ -108,6 +108,12 @@
   animation: mcp-server-picker-spin 900ms linear infinite;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .mcp-server-picker__spinner {
+    animation: none;
+  }
+}
+
 .mcp-server-picker__empty {
   padding-block: 0.5rem;
   padding-inline: 0.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -49,14 +49,13 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.5.4"
+    "@mcp-b/design-tokens": "0.5.6"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",
     "@cloudflare/shell": "^0.4.1",
     "@cloudflare/think": "^0.12.1",
     "@cloudflare/workers-types": "^4.20260630.1",
-    "@modelcontextprotocol/sdk": "^1.29.0",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-mcp": "^0.6.0",
@@ -84,7 +83,6 @@
     "@ai-sdk/react": "^3.0.194",
     "@cloudflare/shell": "^0.4.1",
     "@cloudflare/think": "^0.12.1",
-    "@modelcontextprotocol/sdk": "^1.29.0",
     "agents": "^0.17.3",
     "ai": "^6.0.182",
     "react": "^19.0.0",
@@ -100,9 +98,6 @@
     "@cloudflare/think": {
       "optional": true
     },
-    "@modelcontextprotocol/sdk": {
-      "optional": true
-    },
     "agents": {
       "optional": true
     },