@mcp-b/react-components 0.11.0 → 0.12.0

package/dist/components/CodexModelSelector.js

@@ -0,0 +1,148 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { a as CheckIcon, c as ChevronRightIcon, k as RefreshIcon, o as ChevronDownIcon } from "../icons-D2Q5n5C1.js";
+import { MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubmenuTrigger, MenuTrigger } from "./Menu.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CodexModelSelector.tsx
+/**
+* A compact Codex-style response settings picker: model, reasoning effort,
+* response speed, and reset are kept in one cascading menu.
+*
+* The consuming app supplies every selectable value. This component only
+* renders those values and never guesses model ids or account entitlements.
+*/
+function CodexModelSelector({ models, selectedModelId = null, onSelectModel, effortOptions = [], selectedEffortId = null, onSelectEffort, speedOptions = [], selectedSpeedId = null, onSelectSpeed, onReset, disabled = false, className, open, defaultOpen, onOpenChange, "aria-label": ariaLabel = "Codex response settings" }) {
+	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+	const selectedModel = models.find((model) => model.id === selectedModelId);
+	const selectedEffort = effortOptions.find((option) => option.id === selectedEffortId);
+	const selectedSpeed = speedOptions.find((option) => option.id === selectedSpeedId);
+	const currentOpen = open ?? internalOpen;
+	const handleOpenChange = React.useCallback((nextOpen) => {
+		if (open === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [onOpenChange, open]);
+	const handleSelectModel = React.useCallback((modelId) => {
+		onSelectModel(modelId);
+		handleOpenChange(false);
+	}, [handleOpenChange, onSelectModel]);
+	const handleSelectEffort = React.useCallback((effortId) => {
+		onSelectEffort?.(effortId);
+		handleOpenChange(false);
+	}, [handleOpenChange, onSelectEffort]);
+	const handleSelectSpeed = React.useCallback((speedId) => {
+		onSelectSpeed?.(speedId);
+		handleOpenChange(false);
+	}, [handleOpenChange, onSelectSpeed]);
+	const handleReset = React.useCallback(() => {
+		onReset?.();
+		handleOpenChange(false);
+	}, [handleOpenChange, onReset]);
+	return /* @__PURE__ */ jsxs(MenuRoot, {
+		open: currentOpen,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+			unstyled: true,
+			className: cx("codex-model-selector__trigger", className),
+			disabled,
+			"aria-label": ariaLabel,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "codex-model-selector__summary",
+				children: [/* @__PURE__ */ jsx("span", { children: selectedModel?.label ?? "Select model" }), selectedEffort ? /* @__PURE__ */ jsx("span", {
+					className: cx("codex-model-selector__summary-effort", selectedEffort.id === "ultra" && "codex-model-selector__summary-effort--ultra"),
+					children: selectedEffort.label
+				}) : null]
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "codex-model-selector__trigger-icon" })]
+		}), /* @__PURE__ */ jsxs(MenuContent, {
+			className: "codex-model-selector__menu",
+			side: "top",
+			align: "end",
+			children: [
+				/* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
+					label: "Model",
+					value: selectedModel?.label ?? "Select",
+					disabled: models.length === 0,
+					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+						value: selectedModelId ?? void 0,
+						onValueChange: handleSelectModel,
+						children: models.map((model) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
+							value: model.id,
+							description: model.description,
+							children: model.label
+						}, model.id))
+					})
+				}),
+				effortOptions.length > 0 && onSelectEffort ? /* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
+					label: "Effort",
+					value: selectedEffort?.label ?? "Select",
+					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+						value: selectedEffortId ?? void 0,
+						onValueChange: handleSelectEffort,
+						children: effortOptions.map((option) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
+							value: option.id,
+							description: option.description,
+							children: option.label
+						}, option.id))
+					})
+				}) : null,
+				speedOptions.length > 0 && onSelectSpeed ? /* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
+					label: "Speed",
+					value: selectedSpeed?.label ?? "Select",
+					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+						value: selectedSpeedId ?? void 0,
+						onValueChange: handleSelectSpeed,
+						children: speedOptions.map((option) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
+							value: option.id,
+							description: option.description,
+							children: option.label
+						}, option.id))
+					})
+				}) : null,
+				onReset ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsxs(MenuItem, {
+					className: "codex-model-selector__reset",
+					onClick: handleReset,
+					children: ["Reset to default", /* @__PURE__ */ jsx(RefreshIcon, { className: "codex-model-selector__reset-icon" })]
+				})] }) : null
+			]
+		})]
+	});
+}
+function CodexModelSelectorSubmenu({ label, value, disabled = false, children }) {
+	return /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsxs(MenuSubmenuTrigger, {
+		className: "codex-model-selector__submenu-trigger",
+		disabled,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: label }),
+			/* @__PURE__ */ jsx("span", {
+				className: "codex-model-selector__submenu-value",
+				children: value
+			}),
+			/* @__PURE__ */ jsx(ChevronRightIcon, { className: "codex-model-selector__submenu-icon" })
+		]
+	}), /* @__PURE__ */ jsx(MenuSubContent, {
+		className: cx("codex-model-selector__submenu", `codex-model-selector__submenu--${label.toLowerCase()}`),
+		side: "right",
+		align: "start",
+		children: /* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, {
+			className: "codex-model-selector__submenu-title",
+			children: label
+		}), children] })
+	})] });
+}
+function CodexModelSelectorRadioItem({ children, description, ...props }) {
+	return /* @__PURE__ */ jsxs(MenuRadioItem, {
+		className: "codex-model-selector__option",
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "codex-model-selector__option-label",
+			children
+		}), description ? /* @__PURE__ */ jsx("span", {
+			className: "codex-model-selector__option-description",
+			children: description
+		}) : null] }), /* @__PURE__ */ jsx(MenuRadioItemIndicator, {
+			className: "codex-model-selector__option-indicator",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})]
+	});
+}
+//#endregion
+export { CodexModelSelector };

package/dist/components/Commit.d.ts

@@ -1,5 +1,5 @@
 import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import { t as CopyButtonProps } from "../copy-button-BKXqGiNm.js";
 import * as React from "react";
 
 //#region src/components/Commit.d.ts
@@ -133,7 +133,7 @@ declare function CommitHash({
 }: CommitHashProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
-interface CommitCopyButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className" | "onClick"> {
+interface CommitCopyButtonProps extends Omit<CopyButtonProps, "label" | "stopPropagation" | "text"> {
   hash: string;
   label?: string;
   className?: string;

package/dist/components/Commit.js

@@ -1,11 +1,10 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, c as ChevronRightIcon, h as FileIcon, l as CopyIcon } from "../icons-D2Q5n5C1.js";
-import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { c as ChevronRightIcon, h as FileIcon } from "../icons-D2Q5n5C1.js";
+import { t as CopyButton } from "../copy-button-C6JSKtFE.js";
 import { Avatar } from "./Avatar.js";
 import { Badge } from "./Badge.js";
-import * as React from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Commit.tsx
 const FILE_STATUS_COLOR = {
@@ -141,25 +140,14 @@ function CommitHash({ className, children, hash, ref, ...props }) {
 	});
 }
 function CommitCopyButton({ className, hash, label = "Copy hash", onClick, ...props }) {
-	const [copied, setCopied] = React.useState(false);
-	const handleClick = React.useCallback(async (e) => {
-		e.stopPropagation();
-		try {
-			await navigator.clipboard.writeText(hash);
-			setCopied(true);
-			window.setTimeout(() => setCopied(false), 1500);
-		} catch {}
-		onClick?.(e);
-	}, [hash, onClick]);
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
-		variant: "ghost",
-		size: "icon",
-		"aria-label": label,
-		className: cx("commit__copy", className),
+	return /* @__PURE__ */ jsx(CopyButton, {
 		...props,
-		onClick: handleClick,
-		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
-	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: copied ? "Copied" : label }) }) })] });
+		text: hash,
+		label,
+		stopPropagation: true,
+		className: cx("commit__copy", className),
+		onClick
+	});
 }
 function CommitTimestamp({ className, children, date, ref, ...props }) {
 	return /* @__PURE__ */ jsx("time", {

package/dist/components/Conversation.d.ts

@@ -4,12 +4,8 @@ import * as React from "react";
 import { UIMessage } from "ai";
 
 //#region src/components/Conversation.d.ts
-/** AI SDK `UIMessage`, or a plain text fallback for non-chat exports. */
-type ConversationMessage = UIMessage | {
-  id?: string;
-  role: string;
-  content?: string;
-};
+/** Whole AI SDK message accepted by transcript export helpers. */
+type ConversationMessage = UIMessage;
 interface ConversationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** Additional class names for layout only; do not override scroll behavior from apps. */
   className?: string;

package/dist/components/Conversation.js

@@ -133,11 +133,10 @@ function ConversationScrollButton({ className, variant = "outline", color = "neu
 const ROLE_HEADING = {
 	user: "### User",
 	assistant: "### Assistant",
-	system: "### System",
-	tool: "### Tool"
+	system: "### System"
 };
 function defaultFormatMessage(message) {
-	return `${ROLE_HEADING[message.role] ?? `### ${message.role}`}\n\n${("parts" in message ? message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("") : message.content ?? "").trim()}`;
+	return `${ROLE_HEADING[message.role]}\n\n${message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("").trim()}`;
 }
 /**
 * Converts a conversation to a Markdown document with a heading per message.

package/dist/components/EnvironmentVariables.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import { t as CopyButtonProps } from "../copy-button-BKXqGiNm.js";
 import * as React from "react";
 
 //#region src/components/EnvironmentVariables.d.ts
@@ -142,15 +142,10 @@ declare function EnvironmentVariableValue({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 type EnvironmentVariableCopyFormat = "name" | "value" | "export";
-interface EnvironmentVariableCopyButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className" | "onClick" | "onError"> {
+interface EnvironmentVariableCopyButtonProps extends Omit<CopyButtonProps, "label" | "stopPropagation" | "text"> {
   format?: EnvironmentVariableCopyFormat;
   copyFormat?: EnvironmentVariableCopyFormat;
   label?: string;
-  className?: string;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onCopy?: () => void;
-  onError?: (error: Error) => void;
-  timeout?: number;
 }
 declare function EnvironmentVariableCopyButton({
   className,

package/dist/components/EnvironmentVariables.js

@@ -1,7 +1,6 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, l as CopyIcon, m as EyeOffIcon, p as EyeIcon } from "../icons-D2Q5n5C1.js";
-import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { m as EyeOffIcon, p as EyeIcon } from "../icons-D2Q5n5C1.js";
+import { t as CopyButton } from "../copy-button-C6JSKtFE.js";
 import { Badge } from "./Badge.js";
 import { Switch, SwitchThumb } from "./Switch.js";
 import * as React from "react";
@@ -171,41 +170,19 @@ function EnvironmentVariableValue({ className, children, ref, ...props }) {
 }
 function EnvironmentVariableCopyButton({ className, format = "value", copyFormat, label, onClick, onCopy, onError, timeout = 1500, ...props }) {
 	const { name, value } = useVariableContext();
-	const [copied, setCopied] = React.useState(false);
-	const timeoutRef = React.useRef(null);
 	const resolvedFormat = copyFormat ?? format;
 	const text = resolvedFormat === "name" ? name : resolvedFormat === "export" ? `export ${name}="${value}"` : value;
 	const buttonLabel = label ?? `Copy ${resolvedFormat}`;
-	const handleClick = React.useCallback(async (e) => {
-		try {
-			await navigator.clipboard.writeText(text);
-			setCopied(true);
-			onCopy?.();
-			if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
-			timeoutRef.current = window.setTimeout(() => setCopied(false), timeout);
-		} catch (error) {
-			onError?.(error);
-		}
-		onClick?.(e);
-	}, [
-		onClick,
-		onCopy,
-		onError,
+	return /* @__PURE__ */ jsx(CopyButton, {
+		...props,
 		text,
-		timeout
-	]);
-	React.useEffect(() => () => {
-		if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
-	}, []);
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
-		variant: "ghost",
-		size: "icon",
-		"aria-label": buttonLabel,
+		label: buttonLabel,
+		timeout,
 		className: cx("environment-variables__copy", className),
-		...props,
-		onClick: handleClick,
-		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
-	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: copied ? "Copied" : buttonLabel }) }) })] });
+		onCopy,
+		onError,
+		onClick
+	});
 }
 function EnvironmentVariableRequired({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Badge, {

package/dist/components/Marker.js

@@ -1,25 +1,11 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Marker.tsx
 function markerVariants({ variant = "default", className } = {}) {
 	return cx("marker", `marker--${variant ?? "default"}`, className);
 }
-function assignRef(ref, value) {
-	if (!ref) return;
-	if (typeof ref === "function") {
-		ref(value);
-		return;
-	}
-	ref.current = value;
-}
-function mergeRefs(...refs) {
-	const activeRefs = refs.filter(Boolean);
-	if (activeRefs.length === 0) return void 0;
-	return (value) => {
-		for (const activeRef of activeRefs) assignRef(activeRef, value);
-	};
-}
 function isEventHandler(propName, value) {
 	return /^on[A-Z]/.test(propName) && typeof value === "function";
 }

package/dist/components/McpServerPicker.d.ts

@@ -1,16 +1,30 @@
 import { McpServerCard } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
+import { MCPServer, 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. */
-  onConnect: (server: McpServerCard) => void | Promise<void>;
+  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 a server transport should close but the stored config should remain. */
+  onDisconnect?: McpServerConnectionAction;
   /** Offset from the plus trigger to the menu, useful for prompt composers. */
   sideOffset?: number;
+  /** Accessible name for the plus trigger. */
+  triggerLabel?: string;
 }
-type McpServerPickerItemsProps = Pick<McpServerPickerProps, "servers" | "onConnect">;
+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.
@@ -18,11 +32,22 @@ type McpServerPickerItemsProps = Pick<McpServerPickerProps, "servers" | "onConne
 declare function McpServerPicker({
   servers,
   onConnect,
-  sideOffset
+  mcp,
+  onAuthorize,
+  onDisconnect,
+  onRefresh,
+  onRetry,
+  sideOffset,
+  triggerLabel
 }: McpServerPickerProps): React.JSX.Element;
 declare function McpServerPickerItems({
   servers,
-  onConnect
-}: McpServerPickerItemsProps): React.JSX.Element | React.JSX.Element[];
+  onConnect,
+  mcp,
+  onAuthorize,
+  onDisconnect,
+  onRefresh,
+  onRetry
+}: McpServerPickerItemsProps): React.JSX.Element;
 //#endregion
-export { McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps };
+export { McpServerConnectionAction, McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps };