@mcp-b/react-components 0.11.0 → 0.12.0
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.
- package/dist/{AgentChat-B9LD_WF1.d.ts → AgentChat-CRmsKg9B.d.ts} +10 -6
- package/dist/{BrowserLiveView-ZktFZiMD.d.ts → BrowserLiveView-BV5qgFgI.d.ts} +11 -10
- package/dist/{BrowserReplay-6G-mnwcn.d.ts → BrowserReplay-xWvRjRAC.d.ts} +2 -1
- package/dist/{Menu-B5vDqZe_.d.ts → Menu-BLhnNnRK.d.ts} +3 -0
- package/dist/{ModelSelector-DXtpcRmT.js → ModelSelector-BB-xB-Es.js} +16 -13
- package/dist/{PromptInput-D6-G24p7.d.ts → PromptInput-IyM6ZETj.d.ts} +13 -45
- package/dist/ThinkChat-B3wYahor.js +190 -0
- package/dist/{ThinkChatActivity-B2UD95My.d.ts → ThinkChatActivity-F4KFPcJA.d.ts} +4 -4
- package/dist/ThinkChatContext-C3Eb1Xpi.d.ts +16 -0
- package/dist/{ThinkChatToolParts-DnUiZgCC.d.ts → ThinkChatToolParts-Cv4o7j6F.d.ts} +13 -5
- package/dist/components/AgentChat.d.ts +1 -1
- package/dist/components/AgentChat.js +57 -23
- package/dist/components/AgentConnection.js +4 -20
- package/dist/components/Badge.js +1 -15
- package/dist/components/BrowserLiveView.d.ts +1 -1
- package/dist/components/BrowserLiveView.js +14 -10
- package/dist/components/BrowserReplay.d.ts +1 -1
- package/dist/components/BrowserRunPanel.js +91 -55
- package/dist/components/ChatGptSignInScreen.js +1 -1
- package/dist/components/CodexModelSelector.d.ts +63 -0
- package/dist/components/CodexModelSelector.js +148 -0
- package/dist/components/Commit.d.ts +2 -2
- package/dist/components/Commit.js +10 -22
- package/dist/components/Conversation.d.ts +2 -6
- package/dist/components/Conversation.js +2 -3
- package/dist/components/EnvironmentVariables.d.ts +2 -7
- package/dist/components/EnvironmentVariables.js +10 -33
- package/dist/components/Marker.js +1 -15
- package/dist/components/McpServerPicker.d.ts +31 -6
- package/dist/components/McpServerPicker.js +129 -67
- package/dist/components/Menu.d.ts +1 -1
- package/dist/components/Menu.js +2 -2
- package/dist/components/Message.d.ts +3 -2
- package/dist/components/Message.js +10 -3
- package/dist/components/ModelSelector.d.ts +11 -8
- package/dist/components/ModelSelector.js +1 -1
- package/dist/components/PromptInput.d.ts +2 -2
- package/dist/components/PromptInput.js +49 -98
- package/dist/components/Queue.d.ts +1 -12
- package/dist/components/Reasoning.js +2 -15
- package/dist/components/Stepper.js +1 -7
- package/dist/components/ThinkChat.d.ts +30 -30
- package/dist/components/ThinkChat.js +1 -152
- package/dist/components/ThinkChatActivity.d.ts +2 -2
- package/dist/components/ThinkChatActivity.js +3 -10
- package/dist/components/ThinkChatContext.d.ts +2 -2
- package/dist/components/ThinkChatContext.js +9 -2
- package/dist/components/ThinkChatToolPanels.d.ts +1 -1
- package/dist/components/ThinkChatToolPanels.js +19 -7
- package/dist/components/ThinkChatToolParts.d.ts +1 -1
- package/dist/components/ThinkExecutionWorkbench.d.ts +10 -7
- package/dist/components/ThinkExecutionWorkbench.js +382 -359
- package/dist/components/ThinkFullApp.d.ts +16 -13
- package/dist/components/ThinkFullApp.js +28 -18
- package/dist/components/ThinkThreadPicker.d.ts +1 -31
- package/dist/components/ThinkThreadPicker.js +32 -171
- package/dist/components/ThinkThreadShell.d.ts +35 -0
- package/dist/components/ThinkThreadShell.js +146 -0
- package/dist/components/WorkspaceExplorer.js +3 -1
- package/dist/merge-refs-DF_7w2x_.js +18 -0
- package/dist/styles/agent-chat.css +4 -1
- package/dist/styles/browser-run-panel.css +57 -110
- package/dist/styles/codex-model-selector.css +197 -0
- package/dist/styles/index.css +4 -1
- package/dist/styles/mcp-server-picker.css +62 -15
- package/dist/styles/message.css +1 -1
- package/dist/styles/model-selector.css +20 -8
- package/dist/styles/prompt-input.css +5 -0
- package/dist/styles/streamdown.css +2 -48
- package/dist/styles/think-execution-workbench.css +337 -0
- package/dist/styles/think-full-app.css +15 -390
- package/dist/styles/think-resize-handle.css +33 -0
- package/dist/styles/think-thread-picker.css +0 -238
- package/dist/styles/think-thread-shell.css +219 -0
- package/dist/styles/workspace-explorer.css +8 -2
- package/dist/summarize-tool-input-BUJsENSn.js +12 -0
- package/package.json +2 -2
- package/dist/ThinkChatContext-BLAAb8J5.d.ts +0 -28
- package/dist/components/McpServerConnections.d.ts +0 -41
- package/dist/components/McpServerConnections.js +0 -188
- package/dist/components/useStickToBottom.d.ts +0 -33
- package/dist/components/useStickToBottom.js +0 -107
- package/dist/styles/mcp-server-connections.css +0 -145
|
@@ -1,74 +1,96 @@
|
|
|
1
|
-
import { F as WarningIcon, M as SpinnerIcon,
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { F as WarningIcon, M as SpinnerIcon, S as MinusIcon, a as CheckIcon, b as LinkIcon, k as RefreshIcon } from "../icons-D2Q5n5C1.js";
|
|
2
|
+
import { MenuContent, MenuItem, MenuRoot } from "./Menu.js";
|
|
3
|
+
import { PromptInputActionMenuTrigger } from "./PromptInput.js";
|
|
4
4
|
import { getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";
|
|
5
5
|
import * as React from "react";
|
|
6
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/McpServerPicker.tsx
|
|
8
8
|
/**
|
|
9
9
|
* Prompt plus-menu picker for choosing an MCP server and handing connection
|
|
10
10
|
* work back to the host app.
|
|
11
11
|
*/
|
|
12
|
-
function McpServerPicker({ servers, onConnect, sideOffset = 80 }) {
|
|
12
|
+
function McpServerPicker({ servers, onConnect, mcp, onAuthorize, onDisconnect, onRefresh, onRetry, sideOffset = 80, triggerLabel = "Add server" }) {
|
|
13
13
|
return /* @__PURE__ */ jsx("div", {
|
|
14
14
|
className: "mcp-server-picker",
|
|
15
|
-
children: /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(
|
|
16
|
-
type: "button",
|
|
17
|
-
variant: "ghost",
|
|
18
|
-
color: "neutral",
|
|
19
|
-
size: "icon-xs",
|
|
15
|
+
children: /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(PromptInputActionMenuTrigger, {
|
|
20
16
|
className: "mcp-server-picker__trigger",
|
|
21
|
-
"aria-label":
|
|
22
|
-
|
|
23
|
-
}) }), /* @__PURE__ */ jsx(MenuContent, {
|
|
17
|
+
"aria-label": triggerLabel
|
|
18
|
+
}), /* @__PURE__ */ jsx(MenuContent, {
|
|
24
19
|
side: "top",
|
|
25
20
|
align: "start",
|
|
26
21
|
sideOffset,
|
|
27
22
|
collisionPadding: 8,
|
|
23
|
+
tabIndex: 0,
|
|
28
24
|
"aria-label": "Servers",
|
|
29
25
|
className: "mcp-server-picker__popup",
|
|
30
26
|
children: /* @__PURE__ */ jsx(McpServerPickerItems, {
|
|
31
27
|
servers,
|
|
32
|
-
onConnect
|
|
28
|
+
onConnect,
|
|
29
|
+
mcp,
|
|
30
|
+
onAuthorize,
|
|
31
|
+
onDisconnect,
|
|
32
|
+
onRefresh,
|
|
33
|
+
onRetry
|
|
33
34
|
})
|
|
34
35
|
})] })
|
|
35
36
|
});
|
|
36
37
|
}
|
|
37
|
-
function McpServerPickerItems({ servers, onConnect }) {
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
|
|
38
|
+
function McpServerPickerItems({ servers, onConnect, mcp, onAuthorize, onDisconnect, onRefresh, onRetry }) {
|
|
39
|
+
const [pendingAction, setPendingAction] = React.useState(null);
|
|
40
|
+
const rows = getPickerRows(servers, mcp);
|
|
41
|
+
async function runAction(action, serverId, server, handler) {
|
|
42
|
+
if (!handler) return;
|
|
43
|
+
setPendingAction(`${action}:${serverId}`);
|
|
44
|
+
try {
|
|
45
|
+
await handler(serverId, server);
|
|
46
|
+
} finally {
|
|
47
|
+
setPendingAction(null);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
if (rows.length === 0) return /* @__PURE__ */ jsx(MenuItem, {
|
|
41
51
|
disabled: true,
|
|
42
52
|
className: "mcp-server-picker__empty",
|
|
43
53
|
children: "No servers available."
|
|
44
54
|
});
|
|
45
|
-
return
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
55
|
+
return /* @__PURE__ */ jsx(Fragment, { children: rows.map((server) => /* @__PURE__ */ jsx(McpServerPickerRow, {
|
|
56
|
+
mcp,
|
|
57
|
+
pendingAction,
|
|
58
|
+
server,
|
|
59
|
+
onAuthorize: (id, entry) => void runAction("authorize", id, entry, onAuthorize),
|
|
60
|
+
onConnect,
|
|
61
|
+
onDisconnect: (id, entry) => void runAction("disconnect", id, entry, onDisconnect),
|
|
62
|
+
onRefresh: (id, entry) => void runAction("refresh", id, entry, onRefresh),
|
|
63
|
+
onRetry: (id, entry) => void runAction("retry", id, entry, onRetry)
|
|
64
|
+
}, server.id)) });
|
|
52
65
|
}
|
|
53
|
-
function McpServerPickerRow({ server, onConnect }) {
|
|
66
|
+
function McpServerPickerRow({ server, mcp, onConnect, onAuthorize, onDisconnect, onRefresh, onRetry, pendingAction }) {
|
|
54
67
|
const descriptionId = React.useId();
|
|
55
|
-
const
|
|
56
|
-
const
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
+
const connected = getConnectedServerEntry(server, mcp);
|
|
69
|
+
const connectedServerId = connected?.[0];
|
|
70
|
+
const connectedServer = connected?.[1];
|
|
71
|
+
const derivedStatus = server.status ?? connectedServer?.state;
|
|
72
|
+
const statusText = server.statusLabel ?? getStatusLabel(derivedStatus);
|
|
73
|
+
const connectedState = derivedStatus === "ready" || derivedStatus === "connected";
|
|
74
|
+
const busy = derivedStatus === "connecting" || derivedStatus === "authenticating" || derivedStatus === "discovering";
|
|
75
|
+
const disabled = !onConnect || busy || Boolean(connectedServer) || derivedStatus === "ready" || derivedStatus === "connected";
|
|
76
|
+
const pending = (action) => Boolean(connectedServerId && pendingAction === `${action}:${connectedServerId}`);
|
|
77
|
+
const hasStatusIcon = connectedState || busy || derivedStatus === "failed" || derivedStatus === "needs-auth";
|
|
78
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
79
|
+
className: "mcp-server-picker__row-shell",
|
|
80
|
+
"data-connection": connectedState ? "connected" : "disconnected",
|
|
81
|
+
"data-status": derivedStatus,
|
|
82
|
+
children: [/* @__PURE__ */ jsxs(MenuItem, {
|
|
83
|
+
className: "mcp-server-picker__row",
|
|
84
|
+
closeOnClick: false,
|
|
85
|
+
"data-status": derivedStatus,
|
|
86
|
+
disabled,
|
|
87
|
+
"aria-busy": busy || void 0,
|
|
88
|
+
"aria-describedby": server.description ? descriptionId : void 0,
|
|
89
|
+
onClick: disabled ? void 0 : () => void onConnect(server),
|
|
90
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
68
91
|
className: "mcp-server-picker__icon",
|
|
69
92
|
children: renderIcon(server)
|
|
70
|
-
}),
|
|
71
|
-
/* @__PURE__ */ jsxs("span", {
|
|
93
|
+
}), /* @__PURE__ */ jsxs("span", {
|
|
72
94
|
className: "mcp-server-picker__copy",
|
|
73
95
|
children: [/* @__PURE__ */ jsx("span", {
|
|
74
96
|
className: "mcp-server-picker__name",
|
|
@@ -78,16 +100,56 @@ function McpServerPickerRow({ server, onConnect }) {
|
|
|
78
100
|
className: "mcp-server-picker__description",
|
|
79
101
|
children: server.description
|
|
80
102
|
}) : null]
|
|
81
|
-
})
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
className: "mcp-server-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
103
|
+
})]
|
|
104
|
+
}), hasStatusIcon || connectedServer ? /* @__PURE__ */ jsxs("div", {
|
|
105
|
+
className: "mcp-server-picker__row-actions",
|
|
106
|
+
children: [
|
|
107
|
+
hasStatusIcon ? /* @__PURE__ */ jsxs("span", {
|
|
108
|
+
className: "mcp-server-picker__row-status",
|
|
109
|
+
title: statusText,
|
|
110
|
+
children: [/* @__PURE__ */ jsx(StatusIcon, { status: derivedStatus }), /* @__PURE__ */ jsx("span", {
|
|
111
|
+
className: "mcp-server-picker__status-label",
|
|
112
|
+
children: statusText
|
|
113
|
+
})]
|
|
114
|
+
}) : null,
|
|
115
|
+
connectedServer?.state === "authenticating" && connectedServerId && onAuthorize ? /* @__PURE__ */ jsx(McpServerActionItem, {
|
|
116
|
+
disabled: pending("authorize"),
|
|
117
|
+
icon: /* @__PURE__ */ jsx(LinkIcon, {}),
|
|
118
|
+
label: pending("authorize") ? `Opening ${server.name}` : `Authorize ${server.name}`,
|
|
119
|
+
onClick: () => onAuthorize(connectedServerId, connectedServer)
|
|
120
|
+
}) : null,
|
|
121
|
+
connectedServer?.state === "failed" && connectedServerId && onRetry ? /* @__PURE__ */ jsx(McpServerActionItem, {
|
|
122
|
+
disabled: pending("retry"),
|
|
123
|
+
icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
|
|
124
|
+
label: pending("retry") ? `Retrying ${server.name}` : `Retry ${server.name}`,
|
|
125
|
+
onClick: () => onRetry(connectedServerId, connectedServer)
|
|
126
|
+
}) : null,
|
|
127
|
+
(connectedServer?.state === "ready" || connectedServer?.state === "connected") && connectedServerId && onRefresh ? /* @__PURE__ */ jsx(McpServerActionItem, {
|
|
128
|
+
disabled: pending("refresh"),
|
|
129
|
+
icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
|
|
130
|
+
label: pending("refresh") ? `Reconnecting ${server.name}` : `Reconnect ${server.name}`,
|
|
131
|
+
onClick: () => onRefresh(connectedServerId, connectedServer)
|
|
132
|
+
}) : null,
|
|
133
|
+
(connectedServer?.state === "ready" || connectedServer?.state === "connected") && connectedServerId && onDisconnect ? /* @__PURE__ */ jsx(McpServerActionItem, {
|
|
134
|
+
disabled: pending("disconnect"),
|
|
135
|
+
icon: /* @__PURE__ */ jsx(MinusIcon, {}),
|
|
136
|
+
label: pending("disconnect") ? `Disconnecting ${server.name}` : `Disconnect ${server.name}`,
|
|
137
|
+
onClick: () => onDisconnect(connectedServerId, connectedServer)
|
|
138
|
+
}) : null
|
|
139
|
+
]
|
|
140
|
+
}) : null]
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
function McpServerActionItem({ disabled, icon, label, onClick }) {
|
|
144
|
+
return /* @__PURE__ */ jsxs(MenuItem, {
|
|
145
|
+
className: "mcp-server-picker__action",
|
|
146
|
+
closeOnClick: false,
|
|
147
|
+
disabled,
|
|
148
|
+
onClick: disabled ? void 0 : () => void onClick(),
|
|
149
|
+
children: [icon, /* @__PURE__ */ jsx("span", {
|
|
150
|
+
className: "mcp-server-picker__status-label",
|
|
151
|
+
children: label
|
|
152
|
+
})]
|
|
91
153
|
});
|
|
92
154
|
}
|
|
93
155
|
function StatusIcon({ status }) {
|
|
@@ -109,6 +171,19 @@ function getStatusLabel(status) {
|
|
|
109
171
|
if (status === "discovering") return "Discovering";
|
|
110
172
|
return "";
|
|
111
173
|
}
|
|
174
|
+
function getConnectedServerEntry(card, mcp) {
|
|
175
|
+
if (!mcp) return void 0;
|
|
176
|
+
return Object.entries(mcp.servers).find(([serverId, entry]) => serverId === card.id || entry.server_url === card.url);
|
|
177
|
+
}
|
|
178
|
+
function getPickerRows(servers, mcp) {
|
|
179
|
+
if (!mcp) return [...servers];
|
|
180
|
+
const upstreamRows = Object.entries(mcp.servers).filter(([serverId, entry]) => !servers.some((server) => server.id === serverId || server.url === entry.server_url)).map(([serverId, entry]) => ({
|
|
181
|
+
id: serverId,
|
|
182
|
+
name: entry.name,
|
|
183
|
+
url: entry.server_url
|
|
184
|
+
}));
|
|
185
|
+
return [...servers, ...upstreamRows];
|
|
186
|
+
}
|
|
112
187
|
function renderIcon(server) {
|
|
113
188
|
const src = getMcpServerIconSrc(server);
|
|
114
189
|
if (src) return /* @__PURE__ */ jsx(IconImage, {
|
|
@@ -122,6 +197,9 @@ function renderIcon(server) {
|
|
|
122
197
|
}
|
|
123
198
|
function IconImage({ src, name }) {
|
|
124
199
|
const [failed, setFailed] = React.useState(false);
|
|
200
|
+
React.useEffect(() => {
|
|
201
|
+
setFailed(false);
|
|
202
|
+
}, [src]);
|
|
125
203
|
if (failed) return /* @__PURE__ */ jsx("span", {
|
|
126
204
|
className: "mcp-server-picker__fallback-icon",
|
|
127
205
|
children: name.slice(0, 1)
|
|
@@ -137,21 +215,5 @@ function IconImage({ src, name }) {
|
|
|
137
215
|
onError: () => setFailed(true)
|
|
138
216
|
});
|
|
139
217
|
}
|
|
140
|
-
function groupServers(servers) {
|
|
141
|
-
const groups = [];
|
|
142
|
-
for (const server of servers) {
|
|
143
|
-
const category = server.category ?? "";
|
|
144
|
-
let group = groups.find((candidate) => candidate.category === category);
|
|
145
|
-
if (!group) {
|
|
146
|
-
group = {
|
|
147
|
-
category,
|
|
148
|
-
servers: []
|
|
149
|
-
};
|
|
150
|
-
groups.push(group);
|
|
151
|
-
}
|
|
152
|
-
group.servers.push(server);
|
|
153
|
-
}
|
|
154
|
-
return groups;
|
|
155
|
-
}
|
|
156
218
|
//#endregion
|
|
157
219
|
export { McpServerPicker, McpServerPickerItems };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { A as MenuRadioItemProps, B as MenuSubTrigger, C as MenuPositionerProps, D as MenuRadioItem, E as MenuRadioGroupProps, F as MenuShortcutProps, G as MenuTriggerProps, H as MenuSubmenuTrigger, I as MenuSub, L as MenuSubContent, M as MenuSeparator, N as MenuSeparatorProps, O as MenuRadioItemIndicator, P as MenuShortcut, R as MenuSubContentProps, S as MenuPositioner, T as MenuRadioGroup, U as MenuSubmenuTriggerProps, V as MenuSubTriggerProps, W as MenuTrigger, _ as MenuLabelProps, a as MenuCheckboxItemIndicator, b as MenuPortal, c as MenuContent, d as MenuGroupLabel, f as MenuGroupLabelProps, g as MenuLabel, h as MenuItemProps, i as MenuCheckboxItem, j as MenuRoot, k as MenuRadioItemIndicatorProps, l as MenuContentProps, m as MenuItem, n as MenuArrow, o as MenuCheckboxItemIndicatorProps, p as MenuGroupProps, r as MenuArrowProps, s as MenuCheckboxItemProps, t as Menu, u as MenuGroup, v as MenuPopup, w as MenuProps, x as MenuPortalProps, y as MenuPopupProps, z as MenuSubProps } from "../Menu-
|
|
1
|
+
import { A as MenuRadioItemProps, B as MenuSubTrigger, C as MenuPositionerProps, D as MenuRadioItem, E as MenuRadioGroupProps, F as MenuShortcutProps, G as MenuTriggerProps, H as MenuSubmenuTrigger, I as MenuSub, L as MenuSubContent, M as MenuSeparator, N as MenuSeparatorProps, O as MenuRadioItemIndicator, P as MenuShortcut, R as MenuSubContentProps, S as MenuPositioner, T as MenuRadioGroup, U as MenuSubmenuTriggerProps, V as MenuSubTriggerProps, W as MenuTrigger, _ as MenuLabelProps, a as MenuCheckboxItemIndicator, b as MenuPortal, c as MenuContent, d as MenuGroupLabel, f as MenuGroupLabelProps, g as MenuLabel, h as MenuItemProps, i as MenuCheckboxItem, j as MenuRoot, k as MenuRadioItemIndicatorProps, l as MenuContentProps, m as MenuItem, n as MenuArrow, o as MenuCheckboxItemIndicatorProps, p as MenuGroupProps, r as MenuArrowProps, s as MenuCheckboxItemProps, t as Menu, u as MenuGroup, v as MenuPopup, w as MenuProps, x as MenuPortalProps, y as MenuPopupProps, z as MenuSubProps } from "../Menu-BLhnNnRK.js";
|
|
2
2
|
export { Menu, MenuArrow, MenuArrowProps, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuCheckboxItemIndicatorProps, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLabel, MenuLabelProps, MenuPopup, MenuPopupProps, MenuPortal, MenuPortalProps, MenuPositioner, MenuPositionerProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemIndicator, MenuRadioItemIndicatorProps, MenuRadioItemProps, MenuRoot, MenuSeparator, MenuSeparatorProps, MenuShortcut, MenuShortcutProps, MenuSub, MenuSubContent, MenuSubContentProps, MenuSubProps, MenuSubTrigger, MenuSubTriggerProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps };
|
package/dist/components/Menu.js
CHANGED
|
@@ -31,8 +31,8 @@ const MenuRoot = (props) => {
|
|
|
31
31
|
/**
|
|
32
32
|
* Button that toggles the menu visibility.
|
|
33
33
|
*/
|
|
34
|
-
function MenuTrigger({ className = "", ref, ...props }) {
|
|
35
|
-
const classes = ["menu__trigger", className].filter(Boolean).join(" ");
|
|
34
|
+
function MenuTrigger({ className = "", unstyled = false, ref, ...props }) {
|
|
35
|
+
const classes = [!unstyled && "menu__trigger", className].filter(Boolean).join(" ");
|
|
36
36
|
return /* @__PURE__ */ jsx(Menu$1.Trigger, {
|
|
37
37
|
ref,
|
|
38
38
|
"data-slot": "dropdown-menu-trigger",
|
|
@@ -4,7 +4,7 @@ import { FileUIPart, UIMessage } from "ai";
|
|
|
4
4
|
import { StreamdownProps } from "streamdown";
|
|
5
5
|
|
|
6
6
|
//#region src/components/Message.d.ts
|
|
7
|
-
type MessageRole = UIMessage["role"]
|
|
7
|
+
type MessageRole = UIMessage["role"];
|
|
8
8
|
interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
9
9
|
/**
|
|
10
10
|
* The originating role of the message. Controls alignment and styling via
|
|
@@ -58,9 +58,10 @@ declare function MessageContent({
|
|
|
58
58
|
type MessageResponseProps = StreamdownProps;
|
|
59
59
|
declare const MessageResponse: React.MemoExoticComponent<({
|
|
60
60
|
className,
|
|
61
|
+
components,
|
|
61
62
|
...props
|
|
62
63
|
}: MessageResponseProps) => React.JSX.Element>;
|
|
63
|
-
interface MessageAttachmentProps extends Omit<React.HTMLAttributes<HTMLElement>, "part"> {
|
|
64
|
+
interface MessageAttachmentProps extends Omit<React.HTMLAttributes<HTMLElement>, "color" | "part"> {
|
|
64
65
|
/** The AI SDK `file` part, taken whole. */
|
|
65
66
|
part: FileUIPart;
|
|
66
67
|
}
|
|
@@ -59,9 +59,15 @@ const streamdownPlugins = {
|
|
|
59
59
|
math,
|
|
60
60
|
mermaid
|
|
61
61
|
};
|
|
62
|
-
const
|
|
62
|
+
const messageResponseComponents = { img: "img" };
|
|
63
|
+
const MessageResponse = React.memo(function MessageResponse({ className, components, ...props }) {
|
|
64
|
+
const mergedComponents = components ? {
|
|
65
|
+
...messageResponseComponents,
|
|
66
|
+
...components
|
|
67
|
+
} : messageResponseComponents;
|
|
63
68
|
return /* @__PURE__ */ jsx(Streamdown, {
|
|
64
69
|
className: cx("message__response", className),
|
|
70
|
+
components: mergedComponents,
|
|
65
71
|
plugins: streamdownPlugins,
|
|
66
72
|
...props
|
|
67
73
|
});
|
|
@@ -76,8 +82,9 @@ function MessageAttachment({ part, className, ...props }) {
|
|
|
76
82
|
if (part.mediaType.startsWith("image/")) return /* @__PURE__ */ jsx(AttachmentPreview, {
|
|
77
83
|
url: part.url,
|
|
78
84
|
filename: part.filename,
|
|
79
|
-
children: /* @__PURE__ */ jsx(
|
|
80
|
-
|
|
85
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
86
|
+
variant: "ghost",
|
|
87
|
+
color: "neutral",
|
|
81
88
|
className: cx("message__attachment-zoom", className),
|
|
82
89
|
"aria-label": `Preview ${name}`,
|
|
83
90
|
...props,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
|
|
2
|
+
import { SeparatorProps } from "./Separator.js";
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import Cloudflare from "cloudflare";
|
|
4
5
|
import { AiModelsSearchObject } from "@cloudflare/workers-types";
|
|
@@ -57,13 +58,13 @@ interface ModelSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
57
58
|
* multiselect; use Combobox or a dedicated component for that.
|
|
58
59
|
*
|
|
59
60
|
* Sigvelo changes: composes the design-system Dialog and Button, filters item
|
|
60
|
-
* children locally, and maps provider logos plus
|
|
61
|
+
* children locally, and maps provider logos plus button-list styling to Sigvelo
|
|
61
62
|
* CSS tokens.
|
|
62
63
|
*
|
|
63
|
-
* The dialog owns focus while open,
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
64
|
+
* The dialog owns focus while open, and options are native buttons in grouped
|
|
65
|
+
* sections. Styling consumes surface, border, spacing, radius, focus, and
|
|
66
|
+
* typography tokens. Add provider/item affordances here when they need to be
|
|
67
|
+
* shared.
|
|
67
68
|
*
|
|
68
69
|
* @example
|
|
69
70
|
* ```tsx
|
|
@@ -166,7 +167,7 @@ declare function ModelSelectorGroup({
|
|
|
166
167
|
}: ModelSelectorGroupProps & {
|
|
167
168
|
ref?: React.Ref<HTMLDivElement>;
|
|
168
169
|
}): React.JSX.Element | null;
|
|
169
|
-
interface ModelSelectorItemProps extends Omit<React.
|
|
170
|
+
interface ModelSelectorItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "onSelect" | "type"> {
|
|
170
171
|
value: string;
|
|
171
172
|
/** Extra keywords for search matching. */
|
|
172
173
|
keywords?: string;
|
|
@@ -197,13 +198,15 @@ declare function ModelSelectorEmpty({
|
|
|
197
198
|
}: ModelSelectorEmptyProps & {
|
|
198
199
|
ref?: React.Ref<HTMLDivElement>;
|
|
199
200
|
}): React.JSX.Element;
|
|
200
|
-
interface ModelSelectorSeparatorProps extends
|
|
201
|
+
interface ModelSelectorSeparatorProps extends Omit<SeparatorProps, "className"> {
|
|
202
|
+
className?: string;
|
|
203
|
+
}
|
|
201
204
|
declare function ModelSelectorSeparator({
|
|
202
205
|
className,
|
|
203
206
|
ref,
|
|
204
207
|
...props
|
|
205
208
|
}: ModelSelectorSeparatorProps & {
|
|
206
|
-
ref?: React.Ref<
|
|
209
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
207
210
|
}): React.JSX.Element;
|
|
208
211
|
interface ModelSelectorLogoProps extends React.SVGAttributes<SVGSVGElement> {
|
|
209
212
|
provider: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-
|
|
1
|
+
import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-BB-xB-Es.js";
|
|
2
2
|
export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { $ as
|
|
2
|
-
export { AttachmentsContext,
|
|
1
|
+
import { $ as PromptInputMessage, A as PromptInputCommandEmptyProps, At as PromptInputToolsProps, B as PromptInputCommandSeparator, C as PromptInputBody, Ct as PromptInputTabLabelProps, D as PromptInputButtonTooltip, Dt as PromptInputTextarea, E as PromptInputButtonProps, Et as PromptInputTabsListProps, F as PromptInputCommandItem, Ft as getApprovalStateKey, G as PromptInputHeader, H as PromptInputControllerProps, I as PromptInputCommandItemProps, It as getPendingToolApprovals, J as PromptInputHoverCardContent, K as PromptInputHeaderProps, L as PromptInputCommandList, Lt as usePromptInputAttachments, M as PromptInputCommandGroupProps, Mt as TextInputContext, N as PromptInputCommandInput, Nt as TooltipSide, O as PromptInputCommand, Ot as PromptInputTextareaProps, P as PromptInputCommandInputProps, Pt as getApprovalRequestId, Q as PromptInputHoverCardTriggerProps, R as PromptInputCommandListProps, Rt as usePromptInputController, S as PromptInputAttachmentsProps, St as PromptInputTabLabel, T as PromptInputButton, Tt as PromptInputTabsList, U as PromptInputFooter, V as PromptInputCommandSeparatorProps, W as PromptInputFooterProps, X as PromptInputHoverCardProps, Y as PromptInputHoverCardContentProps, Z as PromptInputHoverCardTrigger, _ as PromptInputApproval, _t as PromptInputTab, a as PromptInputActionAddAttachments, at as PromptInputSelect, b as PromptInputAttachmentProps, bt as PromptInputTabItem, c as PromptInputActionAddScreenshotProps, ct as PromptInputSelectItem, d as PromptInputActionMenuContentProps, dt as PromptInputSelectTrigger, et as PromptInputPermissionSelector, f as PromptInputActionMenuItem, ft as PromptInputSelectTriggerProps, g as PromptInputActionMenuTriggerProps, gt as PromptInputSubmitProps, h as PromptInputActionMenuTrigger, ht as PromptInputSubmit, i as PromptInput, it as PromptInputProviderProps, j as PromptInputCommandGroup, jt as PromptInputTooltipConfig, k as PromptInputCommandEmpty, kt as PromptInputTools, l as PromptInputActionMenu, lt as PromptInputSelectItemProps, m as PromptInputActionMenuProps, mt as PromptInputSelectValueProps, n as PendingToolApproval, nt as PromptInputProps, o as PromptInputActionAddAttachmentsProps, ot as PromptInputSelectContent, p as PromptInputActionMenuItemProps, pt as PromptInputSelectValue, q as PromptInputHoverCard, r as PermissionMode, rt as PromptInputProvider, s as PromptInputActionAddScreenshot, st as PromptInputSelectContentProps, t as AttachmentsContext, tt as PromptInputPermissionSelectorProps, u as PromptInputActionMenuContent, ut as PromptInputSelectProps, v as PromptInputApprovalProps, vt as PromptInputTabBody, w as PromptInputBodyProps, wt as PromptInputTabProps, x as PromptInputAttachments, xt as PromptInputTabItemProps, y as PromptInputAttachment, yt as PromptInputTabBodyProps, z as PromptInputCommandProps, zt as useProviderAttachments } from "../PromptInput-IyM6ZETj.js";
|
|
2
|
+
export { AttachmentsContext, PendingToolApproval, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputApproval, PromptInputApprovalProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputSelect, PromptInputSelectContent, PromptInputSelectContentProps, PromptInputSelectItem, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTrigger, PromptInputSelectTriggerProps, PromptInputSelectValue, PromptInputSelectValueProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, TextInputContext, TooltipSide, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
|