@mcp-b/react-components 0.34.1 → 0.36.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-CV-GuYA6.d.ts → AgentChat-CVO7xyLC.d.ts} +22 -3
- package/dist/{CodeBlock-CM5gfmdq.js → CodeBlock-Bk4nn7l-.js} +4 -3
- package/dist/{CodeBlock-DzGhYyNe.d.ts → CodeBlock-C380GD5t.d.ts} +2 -5
- package/dist/{Dialog-DeOSJ0Oy.d.ts → Dialog-B_FhRWaz.d.ts} +22 -37
- package/dist/{Menu-DVmjBIuM.d.ts → Menu-yb6QXWA3.d.ts} +64 -75
- package/dist/{PromptInput-DOyee1kM.d.ts → PromptInput-BRX7FhjH.d.ts} +7 -272
- package/dist/ResponsiveSidebarShell-DWjULskY.d.ts +68 -0
- package/dist/{Select-D96d09ww.d.ts → Select-RrceeEIe.d.ts} +17 -52
- package/dist/{ThinkChat-en0UbkVv.js → ThinkChat-ByR-QT_D.js} +19 -12
- package/dist/{ThinkChatActivity-CgqpROz_.d.ts → ThinkChatActivity-Dkmm2pIj.d.ts} +1 -1
- package/dist/{ToggleGroup-CSBWfPXo.d.ts → ToggleGroup-BrQZOQn_.d.ts} +4 -6
- package/dist/{WorkspaceFile-C8Riev9j.d.ts → WorkspaceFile-BLaFmMrt.d.ts} +18 -2
- package/dist/{WorkspaceFileView-BtzVKAed.js → WorkspaceFileView-DTHJLKW_.js} +11 -17
- package/dist/components/agents-sdk/AgentChat.d.ts +2 -2
- package/dist/components/agents-sdk/AgentChat.js +47 -26
- package/dist/components/agents-sdk/BrowserLiveView.d.ts +47 -1
- package/dist/components/agents-sdk/BrowserReplay.d.ts +40 -1
- package/dist/components/agents-sdk/BrowserReplay.js +1 -1
- package/dist/components/agents-sdk/McpConnectionRequest.js +14 -15
- package/dist/components/agents-sdk/McpConnectorForm.js +1 -1
- package/dist/components/agents-sdk/McpPluginCatalog.d.ts +1 -1
- package/dist/components/agents-sdk/McpPluginCatalog.js +17 -24
- package/dist/components/agents-sdk/McpServerPicker.d.ts +2 -2
- package/dist/components/agents-sdk/McpServerPicker.js +19 -17
- package/dist/components/agents-sdk/ModelSelector.d.ts +9 -9
- package/dist/components/agents-sdk/ModelSelector.js +504 -1
- package/dist/components/agents-sdk/PromptInputCommands.d.ts +1 -1
- package/dist/components/agents-sdk/SubagentRunDetails.js +1 -1
- package/dist/components/agents-sdk/ThinkChat.d.ts +18 -95
- package/dist/components/agents-sdk/ThinkChat.js +2 -12
- package/dist/components/agents-sdk/ThinkChatActivity.d.ts +2 -4
- package/dist/components/agents-sdk/ThinkChatActivity.js +1 -1
- package/dist/components/agents-sdk/ThinkChatActivitySummary.js +1 -1
- package/dist/components/agents-sdk/ThinkChatToolPanels.js +3 -8
- package/dist/components/agents-sdk/ThinkExecutionDetail.js +5 -3
- package/dist/components/agents-sdk/ThinkExecutionRun.js +1 -1
- package/dist/components/agents-sdk/ThinkExecutionWorkbench.js +2 -2
- package/dist/components/agents-sdk/ThinkFullApp.d.ts +4 -4
- package/dist/components/agents-sdk/ThinkFullApp.js +12 -14
- package/dist/components/agents-sdk/ThinkFullAppViewSwitch.d.ts +1 -1
- package/dist/components/agents-sdk/ThinkPendingApproval.js +3 -3
- package/dist/components/agents-sdk/ThinkRoutineBrowser.js +5 -4
- package/dist/components/agents-sdk/ThinkRoutineForm.js +1 -1
- package/dist/components/agents-sdk/ThinkRoutineLibrary.d.ts +2 -3
- package/dist/components/agents-sdk/ThinkRoutineLibrary.js +11 -15
- package/dist/components/agents-sdk/ThinkThreadPicker.js +3 -4
- package/dist/components/agents-sdk/ThinkThreadShell.d.ts +1 -1
- package/dist/components/agents-sdk/Workspace.d.ts +140 -2
- package/dist/components/agents-sdk/Workspace.js +1 -1
- package/dist/components/agents-sdk/WorkspaceBrowser.d.ts +1 -1
- package/dist/components/agents-sdk/WorkspaceExplorer.d.ts +32 -5
- package/dist/components/agents-sdk/WorkspaceExplorer.js +3 -5
- package/dist/components/agents-sdk/WorkspaceFile.d.ts +2 -2
- package/dist/components/agents-sdk/WorkspaceFile.js +41 -4
- package/dist/components/agents-sdk/WorkspaceFileView.d.ts +1 -1
- package/dist/components/agents-sdk/WorkspaceFileView.js +1 -1
- package/dist/components/ai-sdk/Activity.d.ts +5 -0
- package/dist/components/ai-sdk/Activity.js +33 -13
- package/dist/components/ai-sdk/Approval.d.ts +1 -2
- package/dist/components/ai-sdk/Approval.js +4 -7
- package/dist/components/ai-sdk/CodeBlock.d.ts +1 -1
- package/dist/components/ai-sdk/CodeBlock.js +1 -1
- package/dist/components/ai-sdk/Context.js +1 -1
- package/dist/components/ai-sdk/Goal.js +1 -1
- package/dist/components/ai-sdk/Message.js +2 -6
- package/dist/components/ai-sdk/MessageScroller.d.ts +5 -0
- package/dist/components/ai-sdk/MessageScroller.js +18 -12
- package/dist/components/ai-sdk/MessageScrollerVirtual.js +18 -10
- package/dist/components/ai-sdk/Plan.js +1 -1
- package/dist/components/ai-sdk/PromptInput.d.ts +2 -2
- package/dist/components/ai-sdk/PromptInput.js +124 -127
- package/dist/components/ai-sdk/Queue.js +1 -1
- package/dist/components/ai-sdk/Reasoning.d.ts +3 -4
- package/dist/components/ai-sdk/Reasoning.js +29 -13
- package/dist/components/ai-sdk/ToolInvocation.d.ts +3 -5
- package/dist/components/ai-sdk/ToolInvocation.js +2 -2
- package/dist/components/extension/ChatGptSignInScreen.js +2 -2
- package/dist/components/extension/CodexModelSelector.d.ts +1 -1
- package/dist/components/extension/CodexModelSelector.js +1 -1
- package/dist/components/extension/ConversationTabPicker.js +1 -1
- package/dist/components/foundations/Accordion.d.ts +1 -3
- package/dist/components/foundations/Accordion.js +1 -3
- package/dist/components/foundations/AlertDialog.d.ts +16 -36
- package/dist/components/foundations/Autocomplete.d.ts +12 -33
- package/dist/components/foundations/Autocomplete.js +2 -1
- package/dist/components/foundations/Combobox.d.ts +119 -2
- package/dist/components/foundations/Combobox.js +6 -23
- package/dist/components/foundations/ContextMenu.d.ts +50 -57
- package/dist/components/foundations/ContextMenu.js +4 -28
- package/dist/components/foundations/DescriptionList.d.ts +34 -2
- package/dist/components/foundations/DescriptionList.js +33 -2
- package/dist/components/foundations/Dialog.d.ts +1 -1
- package/dist/components/foundations/Dialog.js +2 -1
- package/dist/components/foundations/EmptyState.d.ts +5 -2
- package/dist/components/foundations/EmptyState.js +11 -7
- package/dist/components/foundations/Menu.d.ts +1 -1
- package/dist/components/foundations/Menu.js +3 -21
- package/dist/components/foundations/Menubar.d.ts +35 -64
- package/dist/components/foundations/Menubar.js +3 -22
- package/dist/components/foundations/Popover.d.ts +8 -21
- package/dist/components/foundations/Popover.js +3 -48
- package/dist/components/foundations/PreviewCard.d.ts +44 -29
- package/dist/components/foundations/PreviewCard.js +3 -6
- package/dist/components/foundations/RadioGroup.d.ts +4 -6
- package/dist/components/foundations/Select.d.ts +1 -1
- package/dist/components/foundations/Select.js +7 -21
- package/dist/components/foundations/Slider.d.ts +31 -44
- package/dist/components/foundations/Slider.js +26 -25
- package/dist/components/foundations/Stepper.d.ts +3 -3
- package/dist/components/foundations/Stepper.js +5 -6
- package/dist/components/foundations/ToggleGroup.d.ts +1 -1
- package/dist/components/foundations/Tooltip.d.ts +6 -8
- package/dist/components/foundations/Tooltip.js +4 -3
- package/dist/components/general-purpose/Commit.js +1 -1
- package/dist/components/general-purpose/EnvironmentVariables.js +1 -1
- package/dist/components/general-purpose/PricingBillingToggle.d.ts +2 -3
- package/dist/components/general-purpose/PricingBillingToggle.js +4 -22
- package/dist/components/general-purpose/PricingPage.d.ts +3 -4
- package/dist/components/general-purpose/ResizableSidePanel.js +1 -1
- package/dist/components/general-purpose/ResponsiveSidebarShell.d.ts +1 -67
- package/dist/components/general-purpose/ResponsiveSidebarShell.js +1 -1
- package/dist/components/general-purpose/SettingsFormDialog.d.ts +7 -2
- package/dist/components/general-purpose/SettingsFormDialog.js +18 -3
- package/dist/components/general-purpose/Terminal.js +3 -3
- package/dist/components/general-purpose/ThemeModeControl.js +1 -1
- package/dist/components/general-purpose/WebPreview.js +4 -4
- package/dist/components/nanites/AgentConnection.js +16 -11
- package/dist/components/nanites/AgentToolDetail.js +6 -7
- package/dist/{format-CmopcfqJ.js → format-DB2mX9DA.js} +16 -1
- package/dist/{mcp-server-U71zhxFF.js → mcp-server-SD_S-IpB.js} +18 -2
- package/dist/message-scroller-C8cplcQO.js +32 -0
- package/dist/{progress-ring-Dz_ztrW2.js → progress-ring-BEocM1e3.js} +1 -1
- package/dist/provider-logos-zjZycgV6.js +74 -0
- package/dist/styles/agent-chat.css +25 -0
- package/dist/styles/agent-connection.css +4 -31
- package/dist/styles/agent-tool-detail.css +0 -7
- package/dist/styles/alert-dialog.css +0 -2
- package/dist/styles/base-ui-motion.css +7 -5
- package/dist/styles/chatgpt-sign-in-screen.css +5 -3
- package/dist/styles/dialog.css +0 -2
- package/dist/styles/field.css +2 -2
- package/dist/styles/model-selector.css +30 -12
- package/dist/styles/popover.css +0 -1
- package/dist/styles/preview-card.css +0 -4
- package/dist/styles/pricing-page.css +1 -13
- package/dist/styles/prompt-input.css +12 -10
- package/dist/styles/recipes.css +22 -14
- package/dist/styles/slider.css +2 -2
- package/dist/styles/think-execution-workbench.css +9 -13
- package/dist/styles/think-routine-library.css +2 -30
- package/dist/styles/tooltip.css +0 -1
- package/dist/utils/structured-code.d.ts +1 -1
- package/package.json +17 -7
- package/dist/BrowserLiveView-tJTWkoyu.d.ts +0 -48
- package/dist/BrowserReplay-B0BQZr-N.d.ts +0 -41
- package/dist/Combobox-WrrDDaEv.d.ts +0 -154
- package/dist/ModelSelector-DzdEs2fX.js +0 -504
- package/dist/Workspace-EhvvlHOB.d.ts +0 -278
- package/dist/WorkspaceExplorer-DygQnEyi.d.ts +0 -32
- package/dist/components/foundations/DescriptionListParts.d.ts +0 -37
- package/dist/components/foundations/DescriptionListParts.js +0 -35
|
@@ -1,504 +0,0 @@
|
|
|
1
|
-
import { t as cx } from "./class-names-BiMDVpUo.js";
|
|
2
|
-
import { G as SearchIcon, f as ChevronDownIcon } from "./icons-B1Qw05te.js";
|
|
3
|
-
import { Button } from "./components/foundations/Button.js";
|
|
4
|
-
import { Dialog } from "./components/foundations/Dialog.js";
|
|
5
|
-
import { a as titleCase } from "./format-CmopcfqJ.js";
|
|
6
|
-
import { Separator } from "./components/foundations/Separator.js";
|
|
7
|
-
import { EmptyState } from "./components/foundations/EmptyState.js";
|
|
8
|
-
import { Input } from "./components/foundations/Input.js";
|
|
9
|
-
import * as React from "react";
|
|
10
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
//#region src/components/_internal/provider-logos.tsx
|
|
12
|
-
function Svg({ children, size = 16, ...props }) {
|
|
13
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
14
|
-
width: size,
|
|
15
|
-
height: size,
|
|
16
|
-
viewBox: "0 0 24 24",
|
|
17
|
-
fill: "currentColor",
|
|
18
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
19
|
-
"aria-hidden": "true",
|
|
20
|
-
focusable: "false",
|
|
21
|
-
...props,
|
|
22
|
-
children
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
const OpenAILogo = (props) => /* @__PURE__ */ jsx(Svg, {
|
|
26
|
-
...props,
|
|
27
|
-
children: /* @__PURE__ */ jsx("path", { d: "M22.28 9.81a5.99 5.99 0 0 0-.52-4.91 6.05 6.05 0 0 0-6.52-2.9A6.05 6.05 0 0 0 10.58 0a6.05 6.05 0 0 0-5.77 4.18 5.99 5.99 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.09 5.99 5.99 0 0 0 .52 4.91 6.05 6.05 0 0 0 6.52 2.9A5.99 5.99 0 0 0 13.25 24a6.05 6.05 0 0 0 5.77-4.19 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.1ZM13.25 22.44a4.48 4.48 0 0 1-2.88-1.04l.14-.08 4.79-2.76a.78.78 0 0 0 .39-.68v-6.75l2.02 1.17c.02 0 .04.03.04.05v5.58a4.5 4.5 0 0 1-4.5 4.5ZM3.57 18.3a4.5 4.5 0 0 1-.54-3.03l.14.09 4.79 2.76a.78.78 0 0 0 .78 0l5.85-3.37v2.33c0 .02 0 .04-.03.06L9.72 19.94a4.5 4.5 0 0 1-6.15-1.64ZM2.31 7.88a4.48 4.48 0 0 1 2.35-1.97v5.69a.78.78 0 0 0 .39.67l5.83 3.36-2.02 1.17a.07.07 0 0 1-.07 0l-4.83-2.8A4.5 4.5 0 0 1 2.3 7.9Zm16.64 3.87L13.1 8.37l2.02-1.17c.02 0 .05-.01.07 0l4.83 2.8a4.5 4.5 0 0 1-.67 8.11V12.4a.77.77 0 0 0-.4-.66Zm2-3.03-.14-.09-4.78-2.78a.78.78 0 0 0-.79 0L9.4 9.25V6.92c0-.02 0-.04.02-.05l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66Zm-12.68 4.17-2.02-1.17a.07.07 0 0 1-.04-.06V6.1a4.5 4.5 0 0 1 7.38-3.45l-.14.08L8.66 5.5a.78.78 0 0 0-.4.68v6.74Zm1.1-2.36 2.6-1.5 2.61 1.5v3l-2.6 1.5-2.6-1.5Z" })
|
|
28
|
-
});
|
|
29
|
-
const AnthropicLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
|
|
30
|
-
...props,
|
|
31
|
-
children: [/* @__PURE__ */ jsx("path", { d: "M13.83 4H17.3L24 20h-3.47l-1.37-3.52h-7L10.82 20H7.36ZM13.25 13.58h4.8l-2.4-6.15Z" }), /* @__PURE__ */ jsx("path", { d: "M0 4h3.47l6.7 16H6.7Z" })]
|
|
32
|
-
});
|
|
33
|
-
const GoogleLogo = (props) => /* @__PURE__ */ jsx(Svg, {
|
|
34
|
-
...props,
|
|
35
|
-
children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 0 1 5.34 2.05l-2.2 2.2A5 5 0 1 0 17 12.6h-5v-2.6h7.9A8 8 0 0 1 12 20 8 8 0 0 1 12 4Z" })
|
|
36
|
-
});
|
|
37
|
-
const MetaLogo = (props) => /* @__PURE__ */ jsx(Svg, {
|
|
38
|
-
...props,
|
|
39
|
-
children: /* @__PURE__ */ jsx("path", { d: "M2 12.5c0-3.5 1.8-6.5 4.4-6.5 1.8 0 3.2 1.3 4.9 3.8 2.2 3.2 3.3 5 4.6 5 1 0 1.5-.8 1.5-2.3 0-2.1-1-4.3-2.7-4.3-1 0-2 .6-3.2 2l-1.3-1.7C11.5 6.8 12.9 6 14.5 6c3 0 5.5 3.3 5.5 7 0 3.3-1.6 5-3.8 5-2.3 0-3.6-1.6-6-5.3C8.9 10.4 8 9.2 6.8 9.2 5.4 9.2 4.3 10.6 4.3 13c0 1.8.5 3 1.3 3 .6 0 1.1-.3 1.8-1.1l1.3 1.7C7.6 17.6 6.3 18 5.3 18 3.3 18 2 16 2 12.5Z" })
|
|
40
|
-
});
|
|
41
|
-
const KimiLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
|
|
42
|
-
...props,
|
|
43
|
-
children: [/* @__PURE__ */ jsx("circle", {
|
|
44
|
-
cx: "12",
|
|
45
|
-
cy: "12",
|
|
46
|
-
r: "9.5",
|
|
47
|
-
fill: "none",
|
|
48
|
-
stroke: "currentColor",
|
|
49
|
-
strokeWidth: "1.5"
|
|
50
|
-
}), /* @__PURE__ */ jsx("path", {
|
|
51
|
-
d: "M8 7.5v9M8 12l4.5-4.5M8 12l5 4.5M14 7.5h2.5v9H14z",
|
|
52
|
-
fill: "none",
|
|
53
|
-
stroke: "currentColor",
|
|
54
|
-
strokeWidth: "1.5",
|
|
55
|
-
strokeLinecap: "round",
|
|
56
|
-
strokeLinejoin: "round"
|
|
57
|
-
})]
|
|
58
|
-
});
|
|
59
|
-
const FallbackLogo = (props) => /* @__PURE__ */ jsx(Svg, {
|
|
60
|
-
...props,
|
|
61
|
-
children: /* @__PURE__ */ jsx("circle", {
|
|
62
|
-
cx: "12",
|
|
63
|
-
cy: "12",
|
|
64
|
-
r: "3"
|
|
65
|
-
})
|
|
66
|
-
});
|
|
67
|
-
/**
|
|
68
|
-
* Resolves a provider string to its logo component.
|
|
69
|
-
* Unknown providers get a neutral dot fallback.
|
|
70
|
-
*/
|
|
71
|
-
function ProviderLogo({ provider, ...props }) {
|
|
72
|
-
switch (provider.toLowerCase()) {
|
|
73
|
-
case "openai": return /* @__PURE__ */ jsx(OpenAILogo, { ...props });
|
|
74
|
-
case "anthropic": return /* @__PURE__ */ jsx(AnthropicLogo, { ...props });
|
|
75
|
-
case "google": return /* @__PURE__ */ jsx(GoogleLogo, { ...props });
|
|
76
|
-
case "meta": return /* @__PURE__ */ jsx(MetaLogo, { ...props });
|
|
77
|
-
case "kimi": return /* @__PURE__ */ jsx(KimiLogo, { ...props });
|
|
78
|
-
default: return /* @__PURE__ */ jsx(FallbackLogo, { ...props });
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
//#endregion
|
|
82
|
-
//#region src/components/agents-sdk/ModelSelector.tsx
|
|
83
|
-
const ModelSelectorContext = React.createContext(null);
|
|
84
|
-
const cloudflareModelProviderLabels = {
|
|
85
|
-
ai4bharat: "AI4Bharat",
|
|
86
|
-
aisingapore: "AI Singapore",
|
|
87
|
-
alibaba: "Alibaba",
|
|
88
|
-
anthropic: "Anthropic",
|
|
89
|
-
baai: "BAAI",
|
|
90
|
-
cohere: "Cohere",
|
|
91
|
-
deepseek: "DeepSeek",
|
|
92
|
-
"deepseek-ai": "DeepSeek",
|
|
93
|
-
google: "Google",
|
|
94
|
-
"google-vertex": "Google Vertex",
|
|
95
|
-
groq: "Groq",
|
|
96
|
-
ibm: "IBM",
|
|
97
|
-
"ibm-granite": "IBM",
|
|
98
|
-
meta: "Meta",
|
|
99
|
-
"meta-llama": "Meta",
|
|
100
|
-
microsoft: "Microsoft",
|
|
101
|
-
mistral: "Mistral AI",
|
|
102
|
-
mistralai: "Mistral AI",
|
|
103
|
-
minimax: "MiniMax",
|
|
104
|
-
moonshotai: "Moonshot AI",
|
|
105
|
-
nvidia: "NVIDIA",
|
|
106
|
-
openai: "OpenAI",
|
|
107
|
-
openrouter: "OpenRouter",
|
|
108
|
-
perplexity: "Perplexity",
|
|
109
|
-
qwen: "Qwen",
|
|
110
|
-
replicate: "Replicate",
|
|
111
|
-
together: "Together AI",
|
|
112
|
-
xai: "xAI",
|
|
113
|
-
"zai-org": "Zhipu AI"
|
|
114
|
-
};
|
|
115
|
-
function isCloudflareRunnableModelId(value) {
|
|
116
|
-
const modelId = value.trim();
|
|
117
|
-
return /^@(?:cf|hf)\/[^/\s]+\/\S+$/.test(modelId) || /^[a-z0-9][a-z0-9._-]*\/\S+$/i.test(modelId);
|
|
118
|
-
}
|
|
119
|
-
function readCatalogString(value) {
|
|
120
|
-
if (typeof value !== "string") return null;
|
|
121
|
-
const trimmed = value.trim();
|
|
122
|
-
return trimmed.length > 0 ? trimmed : null;
|
|
123
|
-
}
|
|
124
|
-
function readCatalogField(entry, field) {
|
|
125
|
-
if (typeof entry !== "object" || entry === null || !Object.hasOwn(entry, field)) return null;
|
|
126
|
-
return readCatalogString(entry[field]);
|
|
127
|
-
}
|
|
128
|
-
function readCatalogEntries(entry) {
|
|
129
|
-
if (Array.isArray(entry)) return entry;
|
|
130
|
-
if (typeof entry !== "object" || entry === null || !Object.hasOwn(entry, "data")) return null;
|
|
131
|
-
const data = entry.data;
|
|
132
|
-
return Array.isArray(data) ? data : null;
|
|
133
|
-
}
|
|
134
|
-
function readCloudflareModelId(entry) {
|
|
135
|
-
if (typeof entry === "string") {
|
|
136
|
-
const modelId = readCatalogString(entry);
|
|
137
|
-
return modelId && isCloudflareRunnableModelId(modelId) ? modelId : null;
|
|
138
|
-
}
|
|
139
|
-
for (const field of [
|
|
140
|
-
"model_id",
|
|
141
|
-
"name",
|
|
142
|
-
"id"
|
|
143
|
-
]) {
|
|
144
|
-
const modelId = readCatalogField(entry, field);
|
|
145
|
-
if (modelId && isCloudflareRunnableModelId(modelId)) return modelId;
|
|
146
|
-
}
|
|
147
|
-
return null;
|
|
148
|
-
}
|
|
149
|
-
function getCloudflareModelProvider(modelId) {
|
|
150
|
-
const [, hostedProvider] = /^@(?:cf|hf)\/([^/]+)/.exec(modelId) ?? [];
|
|
151
|
-
if (hostedProvider) return hostedProvider;
|
|
152
|
-
return modelId.split("/", 1)[0] || "other";
|
|
153
|
-
}
|
|
154
|
-
function formatCloudflareModelProvider(provider) {
|
|
155
|
-
const normalized = provider.trim().toLowerCase();
|
|
156
|
-
if (cloudflareModelProviderLabels[normalized]) return cloudflareModelProviderLabels[normalized];
|
|
157
|
-
return titleCase(normalized);
|
|
158
|
-
}
|
|
159
|
-
function normalizeCloudflareModelSelectorModels(models) {
|
|
160
|
-
const seen = /* @__PURE__ */ new Set();
|
|
161
|
-
const options = [];
|
|
162
|
-
const appendOption = (entry) => {
|
|
163
|
-
const entries = readCatalogEntries(entry);
|
|
164
|
-
if (entries) {
|
|
165
|
-
for (const nestedEntry of entries) appendOption(nestedEntry);
|
|
166
|
-
return;
|
|
167
|
-
}
|
|
168
|
-
const id = readCloudflareModelId(entry);
|
|
169
|
-
if (!id || seen.has(id)) return;
|
|
170
|
-
seen.add(id);
|
|
171
|
-
const provider = getCloudflareModelProvider(id);
|
|
172
|
-
options.push({
|
|
173
|
-
id,
|
|
174
|
-
provider,
|
|
175
|
-
providerLabel: formatCloudflareModelProvider(provider),
|
|
176
|
-
source: id.startsWith("@") ? "workers-ai" : "ai-gateway",
|
|
177
|
-
description: readCatalogField(entry, "description")
|
|
178
|
-
});
|
|
179
|
-
};
|
|
180
|
-
for (const entry of models) appendOption(entry);
|
|
181
|
-
return options;
|
|
182
|
-
}
|
|
183
|
-
async function listCloudflareModelSelectorOptions(client, params) {
|
|
184
|
-
const { account_id, task, per_page = 100 } = params;
|
|
185
|
-
const models = [];
|
|
186
|
-
for (let page = 1;; page += 1) {
|
|
187
|
-
const response = await client.get(`/accounts/${account_id}/ai/catalog/models`, { query: {
|
|
188
|
-
page,
|
|
189
|
-
per_page
|
|
190
|
-
} });
|
|
191
|
-
const pageModels = response.result.filter((model) => !model.private && (!task || model.task === task));
|
|
192
|
-
models.push(...pageModels);
|
|
193
|
-
if (response.result.length < per_page) break;
|
|
194
|
-
}
|
|
195
|
-
return normalizeCloudflareModelSelectorModels(models);
|
|
196
|
-
}
|
|
197
|
-
function groupCloudflareModelOptions(options) {
|
|
198
|
-
const groups = [];
|
|
199
|
-
const groupsByLabel = /* @__PURE__ */ new Map();
|
|
200
|
-
for (const option of options) {
|
|
201
|
-
const group = groupsByLabel.get(option.providerLabel);
|
|
202
|
-
if (group) {
|
|
203
|
-
group.push(option);
|
|
204
|
-
continue;
|
|
205
|
-
}
|
|
206
|
-
const nextGroup = [option];
|
|
207
|
-
groupsByLabel.set(option.providerLabel, nextGroup);
|
|
208
|
-
groups.push({
|
|
209
|
-
providerLabel: option.providerLabel,
|
|
210
|
-
options: nextGroup
|
|
211
|
-
});
|
|
212
|
-
}
|
|
213
|
-
return groups;
|
|
214
|
-
}
|
|
215
|
-
function useModelSelectorContext() {
|
|
216
|
-
const ctx = React.useContext(ModelSelectorContext);
|
|
217
|
-
if (!ctx) throw new Error("ModelSelector subcomponents must be used inside <ModelSelector>.");
|
|
218
|
-
return ctx;
|
|
219
|
-
}
|
|
220
|
-
/**
|
|
221
|
-
* A searchable model picker. Click the trigger to open a dialog containing a
|
|
222
|
-
* search input and a grouped list of available models.
|
|
223
|
-
*
|
|
224
|
-
* Built internally for AI model selection. Use it when users choose one model
|
|
225
|
-
* from a grouped provider list. Do not use it as a general command palette or
|
|
226
|
-
* multiselect; use Combobox or a dedicated component for that.
|
|
227
|
-
*
|
|
228
|
-
* Sigvelo changes: composes the design-system Dialog and Button, filters item
|
|
229
|
-
* children locally, and maps provider logos plus button-list styling to Sigvelo
|
|
230
|
-
* CSS tokens.
|
|
231
|
-
*
|
|
232
|
-
* The dialog owns focus while open, and options are native buttons in grouped
|
|
233
|
-
* sections. Styling consumes surface, border, spacing, radius, focus, and
|
|
234
|
-
* typography tokens. Add provider/item affordances here when they need to be
|
|
235
|
-
* shared.
|
|
236
|
-
*
|
|
237
|
-
* @example
|
|
238
|
-
* ```tsx
|
|
239
|
-
* <ModelSelector>
|
|
240
|
-
* <ModelSelectorTrigger>
|
|
241
|
-
* <ModelSelectorLogo provider="anthropic" />
|
|
242
|
-
* <ModelSelectorName>Claude Opus 4.6</ModelSelectorName>
|
|
243
|
-
* </ModelSelectorTrigger>
|
|
244
|
-
* <ModelSelectorContent>
|
|
245
|
-
* <ModelSelectorDialog>
|
|
246
|
-
* <ModelSelectorInput placeholder="Search models…" />
|
|
247
|
-
* <ModelSelectorList>
|
|
248
|
-
* <ModelSelectorGroup label="Anthropic">
|
|
249
|
-
* <ModelSelectorItem value="claude-opus-4-6" onSelect={…}>
|
|
250
|
-
* <ModelSelectorLogo provider="anthropic" />
|
|
251
|
-
* <ModelSelectorName>Claude Opus 4.6</ModelSelectorName>
|
|
252
|
-
* </ModelSelectorItem>
|
|
253
|
-
* </ModelSelectorGroup>
|
|
254
|
-
* </ModelSelectorList>
|
|
255
|
-
* </ModelSelectorDialog>
|
|
256
|
-
* </ModelSelectorContent>
|
|
257
|
-
* </ModelSelector>
|
|
258
|
-
* ```
|
|
259
|
-
*/
|
|
260
|
-
function ModelSelector({ open, defaultOpen = false, onOpenChange, children, className, ref, ...props }) {
|
|
261
|
-
const [query, setQuery] = React.useState("");
|
|
262
|
-
const handleOpenChange = React.useCallback((...args) => {
|
|
263
|
-
const [next] = args;
|
|
264
|
-
onOpenChange?.(...args);
|
|
265
|
-
if (!next) setQuery("");
|
|
266
|
-
}, [onOpenChange]);
|
|
267
|
-
const ctxValue = React.useMemo(() => ({
|
|
268
|
-
query,
|
|
269
|
-
setQuery
|
|
270
|
-
}), [query]);
|
|
271
|
-
return /* @__PURE__ */ jsx(ModelSelectorContext.Provider, {
|
|
272
|
-
value: ctxValue,
|
|
273
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
274
|
-
ref,
|
|
275
|
-
className: cx("model-selector", className),
|
|
276
|
-
...props,
|
|
277
|
-
children: /* @__PURE__ */ jsx(Dialog.Root, {
|
|
278
|
-
open,
|
|
279
|
-
defaultOpen,
|
|
280
|
-
onOpenChange: handleOpenChange,
|
|
281
|
-
children
|
|
282
|
-
})
|
|
283
|
-
})
|
|
284
|
-
});
|
|
285
|
-
}
|
|
286
|
-
function CloudflareModelSelector({ models, selectedModelId = null, onSelectModel, disabled = false, placeholder = "Search or paste an AI Gateway model id...", triggerLabel = "Select a model", emptyLabel = "No models found", allowTypedModel = true, onOpenChange, ...props }) {
|
|
287
|
-
const options = React.useMemo(() => normalizeCloudflareModelSelectorModels(models), [models]);
|
|
288
|
-
const groups = React.useMemo(() => groupCloudflareModelOptions(options), [options]);
|
|
289
|
-
const selectedOption = selectedModelId ? options.find((option) => option.id === selectedModelId) ?? {
|
|
290
|
-
id: selectedModelId,
|
|
291
|
-
provider: getCloudflareModelProvider(selectedModelId),
|
|
292
|
-
providerLabel: formatCloudflareModelProvider(getCloudflareModelProvider(selectedModelId)),
|
|
293
|
-
source: selectedModelId.startsWith("@") ? "workers-ai" : "ai-gateway",
|
|
294
|
-
description: null
|
|
295
|
-
} : null;
|
|
296
|
-
return /* @__PURE__ */ jsxs(ModelSelector, {
|
|
297
|
-
onOpenChange,
|
|
298
|
-
...props,
|
|
299
|
-
children: [/* @__PURE__ */ jsx(ModelSelectorTrigger, {
|
|
300
|
-
disabled,
|
|
301
|
-
children: selectedOption ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: selectedOption.provider }), /* @__PURE__ */ jsx(ModelSelectorName, { children: selectedOption.id })] }) : /* @__PURE__ */ jsx(ModelSelectorName, { children: triggerLabel })
|
|
302
|
-
}), /* @__PURE__ */ jsx(ModelSelectorContent, {
|
|
303
|
-
title: "Cloudflare model selector",
|
|
304
|
-
children: /* @__PURE__ */ jsxs(ModelSelectorDialog, { children: [/* @__PURE__ */ jsx(ModelSelectorInput, {
|
|
305
|
-
"aria-label": "Search Cloudflare AI models",
|
|
306
|
-
placeholder
|
|
307
|
-
}), /* @__PURE__ */ jsxs(ModelSelectorList, { children: [
|
|
308
|
-
/* @__PURE__ */ jsx(CloudflareTypedModelOption, {
|
|
309
|
-
allowTypedModel,
|
|
310
|
-
onSelectModel,
|
|
311
|
-
options,
|
|
312
|
-
selectedModelId
|
|
313
|
-
}),
|
|
314
|
-
groups.map((group) => /* @__PURE__ */ jsx(ModelSelectorGroup, {
|
|
315
|
-
label: group.providerLabel,
|
|
316
|
-
children: group.options.map((option) => /* @__PURE__ */ jsxs(ModelSelectorItem, {
|
|
317
|
-
value: option.id,
|
|
318
|
-
keywords: `${option.provider} ${option.providerLabel} ${option.source} ${option.description ?? ""}`,
|
|
319
|
-
selected: option.id === selectedModelId,
|
|
320
|
-
onSelect: onSelectModel,
|
|
321
|
-
children: [
|
|
322
|
-
/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: option.provider }),
|
|
323
|
-
/* @__PURE__ */ jsx(ModelSelectorName, { children: option.id }),
|
|
324
|
-
/* @__PURE__ */ jsx(ModelSelectorSource, { children: option.source === "workers-ai" ? "Workers AI" : "Gateway" })
|
|
325
|
-
]
|
|
326
|
-
}, option.id))
|
|
327
|
-
}, group.providerLabel)),
|
|
328
|
-
/* @__PURE__ */ jsx(ModelSelectorEmpty, { children: emptyLabel })
|
|
329
|
-
] })] })
|
|
330
|
-
})]
|
|
331
|
-
});
|
|
332
|
-
}
|
|
333
|
-
function CloudflareTypedModelOption({ allowTypedModel, onSelectModel, options, selectedModelId }) {
|
|
334
|
-
const { query } = useModelSelectorContext();
|
|
335
|
-
const typedModelId = query.trim();
|
|
336
|
-
if (!allowTypedModel || !isCloudflareRunnableModelId(typedModelId) || typedModelId === selectedModelId || options.some((option) => option.id === typedModelId)) return null;
|
|
337
|
-
return /* @__PURE__ */ jsx(ModelSelectorGroup, {
|
|
338
|
-
label: "AI Gateway",
|
|
339
|
-
children: /* @__PURE__ */ jsxs(ModelSelectorItem, {
|
|
340
|
-
value: typedModelId,
|
|
341
|
-
onSelect: onSelectModel,
|
|
342
|
-
children: [
|
|
343
|
-
/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: getCloudflareModelProvider(typedModelId) }),
|
|
344
|
-
/* @__PURE__ */ jsx(ModelSelectorName, { children: typedModelId }),
|
|
345
|
-
/* @__PURE__ */ jsx(ModelSelectorSource, { children: "Use" })
|
|
346
|
-
]
|
|
347
|
-
})
|
|
348
|
-
});
|
|
349
|
-
}
|
|
350
|
-
function ModelSelectorTrigger({ className, children, ...props }) {
|
|
351
|
-
return /* @__PURE__ */ jsx(Dialog.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
|
|
352
|
-
variant: "outline",
|
|
353
|
-
color: "neutral",
|
|
354
|
-
className: cx("model-selector__trigger", className),
|
|
355
|
-
...props,
|
|
356
|
-
children: [children, /* @__PURE__ */ jsx("span", {
|
|
357
|
-
className: "model-selector__trigger-chevron",
|
|
358
|
-
"aria-hidden": "true",
|
|
359
|
-
children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
360
|
-
})]
|
|
361
|
-
}) });
|
|
362
|
-
}
|
|
363
|
-
function ModelSelectorContent({ children, title = "Model Selector", ...props }) {
|
|
364
|
-
return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
|
|
365
|
-
...props,
|
|
366
|
-
children: [/* @__PURE__ */ jsx(Dialog.Title, {
|
|
367
|
-
className: "model-selector__title sigvelo-visually-hidden",
|
|
368
|
-
children: title
|
|
369
|
-
}), children]
|
|
370
|
-
}) })] });
|
|
371
|
-
}
|
|
372
|
-
function ModelSelectorDialog({ className, children, ref, ...props }) {
|
|
373
|
-
return /* @__PURE__ */ jsx("div", {
|
|
374
|
-
ref,
|
|
375
|
-
className: cx("model-selector__dialog", className),
|
|
376
|
-
...props,
|
|
377
|
-
children
|
|
378
|
-
});
|
|
379
|
-
}
|
|
380
|
-
function ModelSelectorInput({ className, placeholder = "Search models…", ref, ...props }) {
|
|
381
|
-
const { query, setQuery } = useModelSelectorContext();
|
|
382
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
383
|
-
className: "model-selector__search",
|
|
384
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
385
|
-
className: "model-selector__search-icon",
|
|
386
|
-
"aria-hidden": "true",
|
|
387
|
-
children: /* @__PURE__ */ jsx(SearchIcon, {})
|
|
388
|
-
}), /* @__PURE__ */ jsx(Input, {
|
|
389
|
-
ref,
|
|
390
|
-
type: "search",
|
|
391
|
-
value: query,
|
|
392
|
-
onChange: (e) => setQuery(e.target.value),
|
|
393
|
-
placeholder,
|
|
394
|
-
className: cx("model-selector__input", className),
|
|
395
|
-
autoFocus: true,
|
|
396
|
-
...props
|
|
397
|
-
})]
|
|
398
|
-
});
|
|
399
|
-
}
|
|
400
|
-
function ModelSelectorList({ className, children, ref, ...props }) {
|
|
401
|
-
return /* @__PURE__ */ jsx("div", {
|
|
402
|
-
ref,
|
|
403
|
-
className: cx("model-selector__list", className),
|
|
404
|
-
...props,
|
|
405
|
-
children
|
|
406
|
-
});
|
|
407
|
-
}
|
|
408
|
-
function ModelSelectorGroup({ className, label, children, ref, ...props }) {
|
|
409
|
-
const { query } = useModelSelectorContext();
|
|
410
|
-
const labelId = React.useId();
|
|
411
|
-
const childArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));
|
|
412
|
-
const q = query.trim().toLowerCase();
|
|
413
|
-
const filtered = q ? childArray.filter((child) => {
|
|
414
|
-
const value = String(child.props.value ?? "").toLowerCase();
|
|
415
|
-
const keywords = String(child.props.keywords ?? "").toLowerCase();
|
|
416
|
-
return value.includes(q) || keywords.includes(q);
|
|
417
|
-
}) : childArray;
|
|
418
|
-
if (filtered.length === 0) return null;
|
|
419
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
420
|
-
ref,
|
|
421
|
-
role: "group",
|
|
422
|
-
"aria-labelledby": labelId,
|
|
423
|
-
className: cx("model-selector__group", className),
|
|
424
|
-
...props,
|
|
425
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
426
|
-
id: labelId,
|
|
427
|
-
className: "model-selector__group-label",
|
|
428
|
-
children: label
|
|
429
|
-
}), filtered]
|
|
430
|
-
});
|
|
431
|
-
}
|
|
432
|
-
function ModelSelectorItem({ className, value, keywords, selected, onSelect, children, onClick, ref, ...props }) {
|
|
433
|
-
const handleClick = (e) => {
|
|
434
|
-
onSelect?.(value);
|
|
435
|
-
onClick?.(e);
|
|
436
|
-
};
|
|
437
|
-
return /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(Button, {
|
|
438
|
-
ref,
|
|
439
|
-
variant: "ghost",
|
|
440
|
-
color: "neutral",
|
|
441
|
-
"aria-current": selected ? "true" : void 0,
|
|
442
|
-
"data-selected": selected ? "" : void 0,
|
|
443
|
-
className: cx("model-selector__item", className),
|
|
444
|
-
onClick: handleClick,
|
|
445
|
-
...props,
|
|
446
|
-
children
|
|
447
|
-
}) });
|
|
448
|
-
}
|
|
449
|
-
function ModelSelectorEmpty({ className, children = "No models found", ref, ...props }) {
|
|
450
|
-
return /* @__PURE__ */ jsx(EmptyState, {
|
|
451
|
-
ref,
|
|
452
|
-
className: cx("model-selector__empty", className),
|
|
453
|
-
...props,
|
|
454
|
-
children
|
|
455
|
-
});
|
|
456
|
-
}
|
|
457
|
-
function ModelSelectorSeparator({ className, ref, ...props }) {
|
|
458
|
-
return /* @__PURE__ */ jsx(Separator, {
|
|
459
|
-
ref,
|
|
460
|
-
className: cx("model-selector__separator", className),
|
|
461
|
-
...props
|
|
462
|
-
});
|
|
463
|
-
}
|
|
464
|
-
function ModelSelectorLogo({ className, provider, ...props }) {
|
|
465
|
-
return /* @__PURE__ */ jsx("span", {
|
|
466
|
-
className: cx("model-selector__logo", className),
|
|
467
|
-
children: /* @__PURE__ */ jsx(ProviderLogo, {
|
|
468
|
-
provider,
|
|
469
|
-
...props
|
|
470
|
-
})
|
|
471
|
-
});
|
|
472
|
-
}
|
|
473
|
-
function ModelSelectorLogoGroup({ className, children, ref, ...props }) {
|
|
474
|
-
return /* @__PURE__ */ jsx("div", {
|
|
475
|
-
ref,
|
|
476
|
-
className: cx("model-selector__logo-group", className),
|
|
477
|
-
...props,
|
|
478
|
-
children
|
|
479
|
-
});
|
|
480
|
-
}
|
|
481
|
-
function ModelSelectorName({ className, children, ref, ...props }) {
|
|
482
|
-
return /* @__PURE__ */ jsx("span", {
|
|
483
|
-
ref,
|
|
484
|
-
className: cx("model-selector__name", "sigvelo-truncate", "sigvelo-truncate-grow", className),
|
|
485
|
-
...props,
|
|
486
|
-
children
|
|
487
|
-
});
|
|
488
|
-
}
|
|
489
|
-
/**
|
|
490
|
-
* Where a model comes from — "Workers AI", "Gateway" — shown at the end of its
|
|
491
|
-
* row. This was a `<kbd>` named `ModelSelectorSource`, which announced
|
|
492
|
-
* "Workers AI" to a screen reader as keyboard input and offered a shortcut
|
|
493
|
-
* that does not exist.
|
|
494
|
-
*/
|
|
495
|
-
function ModelSelectorSource({ className, children, ref, ...props }) {
|
|
496
|
-
return /* @__PURE__ */ jsx("span", {
|
|
497
|
-
ref,
|
|
498
|
-
className: cx("model-selector__source", className),
|
|
499
|
-
...props,
|
|
500
|
-
children
|
|
501
|
-
});
|
|
502
|
-
}
|
|
503
|
-
//#endregion
|
|
504
|
-
export { getCloudflareModelProvider as _, ModelSelectorEmpty as a, normalizeCloudflareModelSelectorModels as b, ModelSelectorItem as c, ModelSelectorLogoGroup as d, ModelSelectorName as f, formatCloudflareModelProvider as g, ModelSelectorTrigger as h, ModelSelectorDialog as i, ModelSelectorList as l, ModelSelectorSource as m, ModelSelector as n, ModelSelectorGroup as o, ModelSelectorSeparator as p, ModelSelectorContent as r, ModelSelectorInput as s, CloudflareModelSelector as t, ModelSelectorLogo as u, isCloudflareRunnableModelId as v, readCloudflareModelId as x, listCloudflareModelSelectorOptions as y };
|