@mcp-b/react-components 0.34.0 → 0.34.1
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.
|
@@ -10,8 +10,13 @@ import { AgentToolRunState } from "agents/agent-tools";
|
|
|
10
10
|
interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
|
|
11
11
|
/** Whole retained run selected from the parent `useAgentToolEvents` result. */
|
|
12
12
|
run: AgentToolRunState<MessageT["parts"][number]>;
|
|
13
|
-
/**
|
|
14
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Whole child Think chat hook result; it owns the stored child transcript.
|
|
15
|
+
* Optional because the run's chrome is parent-side data: while the child
|
|
16
|
+
* transcript is still loading, the detail renders without it and the chat
|
|
17
|
+
* region shows a loading status instead.
|
|
18
|
+
*/
|
|
19
|
+
chat?: ThinkChatValue<State, MessageT>;
|
|
15
20
|
messages?: ThinkChatMessagesProps<MessageT>;
|
|
16
21
|
/** App-authored TanStack Router Link to the parent conversation. */
|
|
17
22
|
backLink?: React.ReactElement;
|
|
@@ -57,7 +62,12 @@ interface SelectedAgentToolChildProps<ParentAgentT extends ThinkAgent<ParentStat
|
|
|
57
62
|
messages?: ThinkChatMessagesProps<MessageT>;
|
|
58
63
|
/** App-authored TanStack Router Link to the parent conversation. */
|
|
59
64
|
backLink?: React.ReactElement;
|
|
60
|
-
/**
|
|
65
|
+
/**
|
|
66
|
+
* Replaces the whole detail while the child transcript loads. Defaults to
|
|
67
|
+
* the detail surface itself with a loading chat region, so the run's chrome
|
|
68
|
+
* — back link, run state, and pinned actions such as cancel — is available
|
|
69
|
+
* the moment the route opens.
|
|
70
|
+
*/
|
|
61
71
|
fallback?: React.ReactNode;
|
|
62
72
|
/** Route-owned run controls, forwarded to `AgentToolDetail`'s pinned actions bar. */
|
|
63
73
|
actions?: React.ReactNode;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as cx } from "../../class-names-BiMDVpUo.js";
|
|
2
|
-
import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
|
|
2
|
+
import { J as SpinnerIcon, r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
|
|
3
3
|
import { TransitionSurface } from "../foundations/TransitionSurface.js";
|
|
4
4
|
import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
|
|
5
5
|
import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
|
|
@@ -69,12 +69,17 @@ function AgentToolDetail({ actions, backLink, chat, className, messages, ref, ru
|
|
|
69
69
|
}) : null,
|
|
70
70
|
/* @__PURE__ */ jsx("div", {
|
|
71
71
|
className: "agent-tool-detail__chat",
|
|
72
|
-
children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
|
|
72
|
+
children: chat ? /* @__PURE__ */ jsx(ThinkChat.Provider, {
|
|
73
73
|
chat,
|
|
74
74
|
children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
|
|
75
75
|
...messages,
|
|
76
76
|
showComposer: false
|
|
77
77
|
})
|
|
78
|
+
}) : /* @__PURE__ */ jsx("div", {
|
|
79
|
+
className: "agent-tool-detail__chat-loading",
|
|
80
|
+
role: "status",
|
|
81
|
+
"aria-label": `${name} transcript loading`,
|
|
82
|
+
children: /* @__PURE__ */ jsx(SpinnerIcon, {})
|
|
78
83
|
})
|
|
79
84
|
}),
|
|
80
85
|
actions ? /* @__PURE__ */ jsx(SubagentRunActions, { children: actions }) : null
|
|
@@ -109,7 +114,12 @@ function selectedAgentToolChildOptions(parentAgent, run, connectionOptions) {
|
|
|
109
114
|
function SelectedAgentToolChild({ actions, backLink, connectionOptions, fallback, getInitialMessages, messages, parentAgent, run }) {
|
|
110
115
|
const childAgent = useAgent(selectedAgentToolChildOptions(parentAgent, run, connectionOptions));
|
|
111
116
|
return /* @__PURE__ */ jsx(React.Suspense, {
|
|
112
|
-
fallback: fallback ??
|
|
117
|
+
fallback: fallback ?? /* @__PURE__ */ jsx(AgentToolDetail, {
|
|
118
|
+
run,
|
|
119
|
+
messages,
|
|
120
|
+
backLink,
|
|
121
|
+
actions
|
|
122
|
+
}),
|
|
113
123
|
children: /* @__PURE__ */ jsx(SelectedAgentToolChildChat, {
|
|
114
124
|
actions,
|
|
115
125
|
backLink,
|
|
@@ -47,6 +47,13 @@
|
|
|
47
47
|
block-size: 100%;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
.agent-tool-detail__chat-loading {
|
|
51
|
+
display: grid;
|
|
52
|
+
place-items: center;
|
|
53
|
+
block-size: 100%;
|
|
54
|
+
color: var(--sigvelo-color-text-muted);
|
|
55
|
+
}
|
|
56
|
+
|
|
50
57
|
.agent-tool-detail > .subagent-run__actions {
|
|
51
58
|
grid-row: 4;
|
|
52
59
|
display: flex;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mcp-b/react-components",
|
|
3
|
-
"version": "0.34.
|
|
3
|
+
"version": "0.34.1",
|
|
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": {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"streamdown": "^2.5.0",
|
|
59
59
|
"unist-util-visit": "^5.1.0",
|
|
60
60
|
"yet-another-react-lightbox": "^3.32.1",
|
|
61
|
-
"@mcp-b/design-tokens": "0.34.
|
|
61
|
+
"@mcp-b/design-tokens": "0.34.1"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@ai-sdk/react": "^3.0.230",
|