@mcp-b/react-components 0.5.5 → 0.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { Icon } from "@modelcontextprotocol/sdk/types.js";
|
|
3
2
|
|
|
4
3
|
//#region src/components/McpServerPicker.d.ts
|
|
5
4
|
type McpServerPickerStatus = "connecting" | "needs-auth" | "authenticating" | "ready" | "failed";
|
|
5
|
+
interface McpServerCardIcon {
|
|
6
|
+
src: string;
|
|
7
|
+
}
|
|
6
8
|
interface McpServerCard {
|
|
7
9
|
id: string;
|
|
8
10
|
name: string;
|
|
9
11
|
url: string;
|
|
10
12
|
description?: string;
|
|
11
13
|
category?: string;
|
|
12
|
-
icon?:
|
|
14
|
+
icon?: string | McpServerCardIcon;
|
|
13
15
|
status?: McpServerPickerStatus;
|
|
14
16
|
statusLabel?: string;
|
|
15
17
|
}
|
|
@@ -36,4 +38,4 @@ declare function McpServerPickerItems({
|
|
|
36
38
|
onConnect
|
|
37
39
|
}: McpServerPickerItemsProps): React.JSX.Element | React.JSX.Element[];
|
|
38
40
|
//#endregion
|
|
39
|
-
export { McpServerCard, McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps, McpServerPickerStatus };
|
|
41
|
+
export { McpServerCard, McpServerCardIcon, McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps, McpServerPickerStatus };
|
|
@@ -53,12 +53,15 @@ function McpServerPickerRow({ server, onConnect }) {
|
|
|
53
53
|
const descriptionId = React.useId();
|
|
54
54
|
const statusText = server.statusLabel ?? getStatusLabel(server.status);
|
|
55
55
|
const busy = server.status === "connecting" || server.status === "authenticating";
|
|
56
|
+
const disabled = busy || server.status === "ready";
|
|
56
57
|
return /* @__PURE__ */ jsxs(MenuItem, {
|
|
57
58
|
className: "mcp-server-picker__row",
|
|
59
|
+
closeOnClick: false,
|
|
58
60
|
"data-status": server.status,
|
|
61
|
+
disabled,
|
|
59
62
|
"aria-busy": busy || void 0,
|
|
60
63
|
"aria-describedby": server.description ? descriptionId : void 0,
|
|
61
|
-
onClick: () => void onConnect(server),
|
|
64
|
+
onClick: disabled ? void 0 : () => void onConnect(server),
|
|
62
65
|
children: [
|
|
63
66
|
/* @__PURE__ */ jsx("span", {
|
|
64
67
|
className: "mcp-server-picker__icon",
|
|
@@ -100,9 +103,8 @@ function getStatusLabel(status) {
|
|
|
100
103
|
return "";
|
|
101
104
|
}
|
|
102
105
|
function renderIcon(icon, name) {
|
|
103
|
-
if (React.isValidElement(icon)) return icon;
|
|
104
106
|
if (typeof icon === "string") return /* @__PURE__ */ jsx(IconImage, { src: icon });
|
|
105
|
-
if (
|
|
107
|
+
if (icon) return /* @__PURE__ */ jsx(IconImage, { src: icon.src });
|
|
106
108
|
return /* @__PURE__ */ jsx("span", {
|
|
107
109
|
className: "mcp-server-picker__fallback-icon",
|
|
108
110
|
children: name.slice(0, 1)
|
|
@@ -117,9 +119,6 @@ function IconImage({ src }) {
|
|
|
117
119
|
referrerPolicy: "no-referrer"
|
|
118
120
|
});
|
|
119
121
|
}
|
|
120
|
-
function isMcpIcon(icon) {
|
|
121
|
-
return Boolean(icon && typeof icon === "object" && "src" in icon && typeof icon.src === "string");
|
|
122
|
-
}
|
|
123
122
|
function groupServers(servers) {
|
|
124
123
|
const groups = [];
|
|
125
124
|
for (const server of servers) {
|
|
@@ -108,6 +108,12 @@
|
|
|
108
108
|
animation: mcp-server-picker-spin 900ms linear infinite;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
+
@media (prefers-reduced-motion: reduce) {
|
|
112
|
+
.mcp-server-picker__spinner {
|
|
113
|
+
animation: none;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
111
117
|
.mcp-server-picker__empty {
|
|
112
118
|
padding-block: 0.5rem;
|
|
113
119
|
padding-inline: 0.75rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mcp-b/react-components",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.6",
|
|
4
4
|
"description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
|
|
5
5
|
"homepage": "https://design-system.sigvelo.com",
|
|
6
6
|
"bugs": {
|
|
@@ -49,14 +49,13 @@
|
|
|
49
49
|
"anser": "^2.3.5",
|
|
50
50
|
"shiki": "^3.23.0",
|
|
51
51
|
"streamdown": "^2.5.0",
|
|
52
|
-
"@mcp-b/design-tokens": "0.5.
|
|
52
|
+
"@mcp-b/design-tokens": "0.5.6"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@ai-sdk/react": "^3.0.194",
|
|
56
56
|
"@cloudflare/shell": "^0.4.1",
|
|
57
57
|
"@cloudflare/think": "^0.12.1",
|
|
58
58
|
"@cloudflare/workers-types": "^4.20260630.1",
|
|
59
|
-
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
60
59
|
"@storybook/addon-a11y": "^10.4.6",
|
|
61
60
|
"@storybook/addon-docs": "^10.4.6",
|
|
62
61
|
"@storybook/addon-mcp": "^0.6.0",
|
|
@@ -84,7 +83,6 @@
|
|
|
84
83
|
"@ai-sdk/react": "^3.0.194",
|
|
85
84
|
"@cloudflare/shell": "^0.4.1",
|
|
86
85
|
"@cloudflare/think": "^0.12.1",
|
|
87
|
-
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
88
86
|
"agents": "^0.17.3",
|
|
89
87
|
"ai": "^6.0.182",
|
|
90
88
|
"react": "^19.0.0",
|
|
@@ -100,9 +98,6 @@
|
|
|
100
98
|
"@cloudflare/think": {
|
|
101
99
|
"optional": true
|
|
102
100
|
},
|
|
103
|
-
"@modelcontextprotocol/sdk": {
|
|
104
|
-
"optional": true
|
|
105
|
-
},
|
|
106
101
|
"agents": {
|
|
107
102
|
"optional": true
|
|
108
103
|
},
|