@mcp-b/react-components 0.46.0 → 0.46.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.
@@ -15,9 +15,9 @@ import { t as CopyButton } from "../../copy-button-D7ySsRRo.js";
15
15
  import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "../ai-sdk/Context.js";
16
16
  import { VirtualMessageScroller } from "../ai-sdk/MessageScrollerVirtual.js";
17
17
  import { QueueItem, QueueItemActions, QueueItemContent } from "../ai-sdk/Queue.js";
18
+ import { AgentEventRow, getAgentEvent } from "./AgentEvent.js";
18
19
  import { EmptyState } from "../foundations/EmptyState.js";
19
20
  import { TransitionSurface } from "../foundations/TransitionSurface.js";
20
- import { AgentEventRow, getAgentEvent } from "./AgentEvent.js";
21
21
  import { PromptInputApproval, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals } from "./PromptInputApproval.js";
22
22
  import * as React from "react";
23
23
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -2,8 +2,8 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
2
2
  import { B as PlayIcon, R as PauseIcon } from "../../icons-BNEY4gO5.js";
3
3
  import { IconButton } from "../foundations/IconButton.js";
4
4
  import { i as formatClock } from "../../format-COCyV98Z.js";
5
- import { EmptyState } from "../foundations/EmptyState.js";
6
5
  import { Slider } from "../foundations/Slider.js";
6
+ import { EmptyState } from "../foundations/EmptyState.js";
7
7
  import * as React from "react";
8
8
  import { jsx, jsxs } from "react/jsx-runtime";
9
9
  import { Replayer } from "@rrweb/replay";
@@ -10,11 +10,11 @@ import { Avatar } from "../foundations/Avatar.js";
10
10
  import { AppIcon } from "../foundations/AppIcon.js";
11
11
  import { n as findCatalogMcpServerCard } from "../../mcp-server-7NR24ASj.js";
12
12
  import { Select } from "../foundations/Select.js";
13
+ import { AppTopBar } from "../general-purpose/AppTopBar.js";
14
+ import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
13
15
  import { EmptyState } from "../foundations/EmptyState.js";
14
16
  import { LinkButton } from "../foundations/LinkButton.js";
15
17
  import "../foundations/icons.js";
16
- import { AppTopBar } from "../general-purpose/AppTopBar.js";
17
- import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
18
18
  import * as React from "react";
19
19
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
20
20
  //#region src/components/_internal/chrome-profile-colors.ts
@@ -1,2 +1,2 @@
1
- import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-qztQ6Clo.js";
1
+ import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-CV0xWmL4.js";
2
2
  export { ThinkChat, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, thinkPendingExecutionApprovalsQueryOptions, useThinkChat, useThinkPendingExecutionApprovals };
@@ -5,8 +5,8 @@ import { IconButton } from "../foundations/IconButton.js";
5
5
  import { Menu } from "../foundations/Menu.js";
6
6
  import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
7
7
  import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
8
- import { EmptyState } from "../foundations/EmptyState.js";
9
8
  import { AppTopBar } from "../general-purpose/AppTopBar.js";
9
+ import { EmptyState } from "../foundations/EmptyState.js";
10
10
  import { getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
11
11
  import { ThinkExecutionRunSummary } from "./ThinkExecutionStatus.js";
12
12
  import { ThinkExecutionDetail } from "./ThinkExecutionDetail.js";
@@ -6,7 +6,7 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
6
6
  import { ResizableSidePanel } from "../general-purpose/ResizableSidePanel.js";
7
7
  import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
8
8
  import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-DtH66bAY.js";
9
- import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-qztQ6Clo.js";
9
+ import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-CV0xWmL4.js";
10
10
  import { McpPluginCatalog } from "./McpPluginCatalog.js";
11
11
  import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
12
12
  import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
@@ -1,6 +1,6 @@
1
1
  import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
2
- import { ToggleGroup } from "../foundations/ToggleGroup.js";
3
2
  import { AppTopBar } from "../general-purpose/AppTopBar.js";
3
+ import { ToggleGroup } from "../foundations/ToggleGroup.js";
4
4
  import "react";
5
5
  import { jsx } from "react/jsx-runtime";
6
6
  //#region src/components/agents-sdk/ThinkFullAppViewSwitch.tsx
@@ -4,9 +4,9 @@ import { buttonVariants } from "../foundations/Button.js";
4
4
  import { Tooltip } from "../foundations/Tooltip.js";
5
5
  import { t as capitalize } from "../../format-COCyV98Z.js";
6
6
  import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
7
+ import { ToggleGroup } from "../foundations/ToggleGroup.js";
7
8
  import { EmptyState } from "../foundations/EmptyState.js";
8
9
  import { SearchField } from "../foundations/SearchField.js";
9
- import { ToggleGroup } from "../foundations/ToggleGroup.js";
10
10
  import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
11
11
  import * as React from "react";
12
12
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -6,12 +6,12 @@ import { Form } from "../foundations/Form.js";
6
6
  import { Textarea } from "../foundations/Textarea.js";
7
7
  import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
8
8
  import { Select } from "../foundations/Select.js";
9
+ import { AppTopBar } from "../general-purpose/AppTopBar.js";
9
10
  import { Checkbox } from "../foundations/Checkbox.js";
11
+ import { Fieldset } from "../foundations/Fieldset.js";
10
12
  import { CheckboxGroup } from "../foundations/CheckboxGroup.js";
11
13
  import { Combobox } from "../foundations/Combobox.js";
12
- import { Fieldset } from "../foundations/Fieldset.js";
13
14
  import { NumberField } from "../foundations/NumberField.js";
14
- import { AppTopBar } from "../general-purpose/AppTopBar.js";
15
15
  import * as React from "react";
16
16
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
17
17
  //#region src/components/agents-sdk/ThinkRoutineForm.tsx
@@ -3,10 +3,10 @@ import { $ as TrashIcon, B as PlayIcon, q as SpinnerIcon, z as PencilIcon } from
3
3
  import { buttonVariants } from "../foundations/Button.js";
4
4
  import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
5
5
  import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
6
- import { AlertDialog } from "../foundations/AlertDialog.js";
7
- import { EmptyState } from "../foundations/EmptyState.js";
8
6
  import { AppTopBar } from "../general-purpose/AppTopBar.js";
7
+ import { AlertDialog } from "../foundations/AlertDialog.js";
9
8
  import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
9
+ import { EmptyState } from "../foundations/EmptyState.js";
10
10
  import { ThinkRoutineBrowser } from "./ThinkRoutineBrowser.js";
11
11
  import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";
12
12
  import * as React from "react";
@@ -9,15 +9,15 @@ import { AppIcon } from "../foundations/AppIcon.js";
9
9
  import { n as findCatalogMcpServerCard, t as McpServerIcon } from "../../mcp-server-7NR24ASj.js";
10
10
  import { DescriptionList } from "../foundations/DescriptionList.js";
11
11
  import { ChatGptSignInScreen } from "../extension/ChatGptSignInScreen.js";
12
- import { EmptyState } from "../foundations/EmptyState.js";
13
- import { Switch } from "../foundations/Switch.js";
14
- import { useTheme } from "../foundations/ThemeProvider.js";
15
- import "../foundations/icons.js";
16
12
  import { ActionGuide } from "../general-purpose/ActionGuide.js";
17
13
  import { AppTopBar } from "../general-purpose/AppTopBar.js";
14
+ import { Switch } from "../foundations/Switch.js";
18
15
  import { t as SetupChecklistAction } from "../../SetupChecklist-DyPZWzK2.js";
16
+ import { useTheme } from "../foundations/ThemeProvider.js";
19
17
  import { NaniteMark } from "../nanites/NaniteScene.js";
20
18
  import { SubagentRunLabel } from "./SubagentRunIndicator.js";
19
+ import { EmptyState } from "../foundations/EmptyState.js";
20
+ import "../foundations/icons.js";
21
21
  import { McpServerPickerAction, McpServerPickerItems } from "./McpServerPicker.js";
22
22
  import { getThinkExecutionRunId } from "./ThinkExecutionRun.js";
23
23
  import { ThinkThreadPicker, summarizeThinkThreads } from "./ThinkThreadPicker.js";
@@ -1,5 +1,5 @@
1
- import { SearchField } from "../foundations/SearchField.js";
2
1
  import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../../FileTree-CAXWXH63.js";
2
+ import { SearchField } from "../foundations/SearchField.js";
3
3
  import { WorkspaceHeader } from "./WorkspaceHeader.js";
4
4
  import * as React from "react";
5
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -2,8 +2,8 @@ import { L as PaperclipIcon } from "../../icons-BNEY4gO5.js";
2
2
  import { Button } from "../foundations/Button.js";
3
3
  import { Card, CardFooter, CardHeader, CardTitle } from "../foundations/Card.js";
4
4
  import { Popover } from "../foundations/Popover.js";
5
- import { EmptyState } from "../foundations/EmptyState.js";
6
5
  import { AppTopBar } from "../general-purpose/AppTopBar.js";
6
+ import { EmptyState } from "../foundations/EmptyState.js";
7
7
  import "react";
8
8
  import { jsx, jsxs } from "react/jsx-runtime";
9
9
  //#region src/components/agents-sdk/WorkspaceMountManager.tsx
@@ -1026,6 +1026,7 @@ function composerLinksToReferences(text) {
1026
1026
  */
1027
1027
  function PromptInputCommandComposer({ commands, mentionCommands, value, onValueChange, onCommandSelect, emptyMessage = "No commands found.", mentionEmptyMessage = "No MCP servers found.", onKeyDown, ref, placeholder, disabled, className, minHeight, maxHeight, "aria-label": ariaLabel }) {
1028
1028
  const inputRef = React.useRef(null);
1029
+ const highlightedCommandRef = React.useRef(void 0);
1029
1030
  const [dismissedValue, setDismissedValue] = React.useState(null);
1030
1031
  React.useImperativeHandle(ref, () => inputRef.current, []);
1031
1032
  const match = composerTriggerMatch(value);
@@ -1061,6 +1062,9 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
1061
1062
  open,
1062
1063
  autoHighlight: true,
1063
1064
  itemToStringValue: (command) => command.value,
1065
+ onItemHighlighted: (command) => {
1066
+ highlightedCommandRef.current = command;
1067
+ },
1064
1068
  onValueChange: (next, { reason }) => {
1065
1069
  if (reason !== "input-change") return;
1066
1070
  setDismissedValue(null);
@@ -1076,7 +1080,16 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
1076
1080
  setDismissedValue(null);
1077
1081
  onValueChange(next);
1078
1082
  },
1079
- onKeyDown,
1083
+ onKeyDown: (event) => {
1084
+ onKeyDown?.(event);
1085
+ if (event.defaultPrevented || event.key !== "Enter" || !open) return;
1086
+ const highlightedCommand = highlightedCommandRef.current;
1087
+ if (highlightedCommand && !highlightedCommand.disabled && filtered.includes(highlightedCommand)) return;
1088
+ const command = filtered.find((candidate) => !candidate.disabled);
1089
+ if (!command) return;
1090
+ event.preventDefault();
1091
+ selectCommand(command);
1092
+ },
1080
1093
  placeholder,
1081
1094
  disabled,
1082
1095
  className,
@@ -1,7 +1,7 @@
1
1
  import { r as ToggleVariantsOptions } from "../../Toggle-DLrIf5YH.js";
2
2
  import * as React from "react";
3
- import { Toggle } from "@base-ui/react/toggle";
4
3
  import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
4
+ import { Toggle } from "@base-ui/react/toggle";
5
5
 
6
6
  //#region src/components/foundations/ToggleGroup.d.ts
7
7
  type ToggleGroupSize = ToggleVariantsOptions["size"];
@@ -3,8 +3,8 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
3
3
  import { toggleVariants } from "./Toggle.js";
4
4
  import * as React from "react";
5
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
- import { Toggle } from "@base-ui/react/toggle";
7
6
  import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
7
+ import { Toggle } from "@base-ui/react/toggle";
8
8
  //#region src/components/foundations/ToggleGroup.tsx
9
9
  /**
10
10
  * Tracks the pressed item's box so the segmented thumb can slide to it instead
@@ -1,6 +1,6 @@
1
1
  import { Button } from "../foundations/Button.js";
2
- import { AlertDialog } from "../foundations/AlertDialog.js";
3
2
  import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
3
+ import { AlertDialog } from "../foundations/AlertDialog.js";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  //#region src/components/general-purpose/PricingConfirmationDialog.tsx
6
6
  function getActionLabel(action) {
@@ -1,9 +1,9 @@
1
1
  import { t as cx } from "../../class-names-BiMDVpUo.js";
2
2
  import { Card } from "../foundations/Card.js";
3
3
  import { Separator } from "../foundations/Separator.js";
4
+ import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
4
5
  import { Progress } from "../foundations/Progress.js";
5
6
  import { Slider } from "../foundations/Slider.js";
6
- import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
7
7
  import * as React from "react";
8
8
  import { jsx, jsxs } from "react/jsx-runtime";
9
9
  //#region src/components/general-purpose/PricingUsageCalculator.tsx
@@ -1,11 +1,11 @@
1
1
  import { t as cx } from "../../class-names-BiMDVpUo.js";
2
2
  import { r as ArrowLeftIcon } from "../../icons-BNEY4gO5.js";
3
- import { TransitionSurface } from "../foundations/TransitionSurface.js";
4
3
  import { AppTopBar } from "../general-purpose/AppTopBar.js";
5
4
  import { NaniteMark } from "./NaniteScene.js";
6
5
  import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
7
6
  import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
8
- import { t as ThinkChat } from "../../ThinkChat-qztQ6Clo.js";
7
+ import { TransitionSurface } from "../foundations/TransitionSurface.js";
8
+ import { t as ThinkChat } from "../../ThinkChat-CV0xWmL4.js";
9
9
  import * as React from "react";
10
10
  import { jsx, jsxs } from "react/jsx-runtime";
11
11
  import { useAgentChat } from "@cloudflare/think/react";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-b/react-components",
3
- "version": "0.46.0",
3
+ "version": "0.46.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": {
@@ -53,7 +53,7 @@
53
53
  "streamdown": "^2.5.0",
54
54
  "unist-util-visit": "^5.1.0",
55
55
  "yet-another-react-lightbox": "^3.32.2",
56
- "@mcp-b/design-tokens": "0.46.0"
56
+ "@mcp-b/design-tokens": "0.46.1"
57
57
  },
58
58
  "devDependencies": {
59
59
  "@ai-sdk/react": "^3.0.249",
@@ -1,6 +1,6 @@
1
1
  import { composerDraftToPrompt, parseComposerLinks } from "./utils/composer-link.js";
2
- import { TransitionSurface } from "./components/foundations/TransitionSurface.js";
3
2
  import { AgentToolRunsProvider, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
3
+ import { TransitionSurface } from "./components/foundations/TransitionSurface.js";
4
4
  import { AgentChat, compactingNotice } from "./components/agents-sdk/AgentChat.js";
5
5
  import { ThinkChatContext, ThinkChatLiveContext, useOptionalThinkChatContext, useThinkChatContext } from "./components/agents-sdk/ThinkChatContext.js";
6
6
  import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/agents-sdk/ThinkChatActivity.js";