@mcp-b/react-components 0.9.0 → 0.10.0

package/dist/{ModelSelector-9G_-GooI.js → ModelSelector-DXtpcRmT.js}

@@ -3,7 +3,7 @@ import { A as SearchIcon, o as ChevronDownIcon } from "./icons-D2Q5n5C1.js";
 import { Button } from "./components/Button.js";
 import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./components/Dialog.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/provider-logos.tsx
 function Svg({ children, size = 16, ...props }) {
 	return /* @__PURE__ */ jsx("svg", {
@@ -77,6 +77,128 @@ function ProviderLogo({ provider, ...props }) {
 //#endregion
 //#region src/components/ModelSelector.tsx
 const ModelSelectorContext = React.createContext(null);
+const cloudflareModelProviderLabels = {
+	ai4bharat: "AI4Bharat",
+	aisingapore: "AI Singapore",
+	alibaba: "Alibaba",
+	anthropic: "Anthropic",
+	baai: "BAAI",
+	cohere: "Cohere",
+	deepseek: "DeepSeek",
+	"deepseek-ai": "DeepSeek",
+	google: "Google",
+	"google-vertex": "Google Vertex",
+	groq: "Groq",
+	ibm: "IBM",
+	"ibm-granite": "IBM",
+	meta: "Meta",
+	"meta-llama": "Meta",
+	microsoft: "Microsoft",
+	mistral: "Mistral AI",
+	mistralai: "Mistral AI",
+	minimax: "MiniMax",
+	moonshotai: "Moonshot AI",
+	nvidia: "NVIDIA",
+	openai: "OpenAI",
+	openrouter: "OpenRouter",
+	perplexity: "Perplexity",
+	qwen: "Qwen",
+	replicate: "Replicate",
+	together: "Together AI",
+	xai: "xAI",
+	"zai-org": "Zhipu AI"
+};
+function isCloudflareRunnableModelId(value) {
+	const modelId = value.trim();
+	return /^@(?:cf|hf)\/[^/\s]+\/\S+$/.test(modelId) || /^[a-z0-9][a-z0-9._-]*\/\S+$/i.test(modelId);
+}
+function readCatalogString(value) {
+	if (typeof value !== "string") return null;
+	const trimmed = value.trim();
+	return trimmed.length > 0 ? trimmed : null;
+}
+function readCatalogField(entry, field) {
+	if (typeof entry !== "object" || entry === null || !Object.hasOwn(entry, field)) return null;
+	return readCatalogString(entry[field]);
+}
+function readCatalogEntries(entry) {
+	if (Array.isArray(entry)) return entry;
+	if (typeof entry !== "object" || entry === null || !Object.hasOwn(entry, "data")) return null;
+	const data = entry.data;
+	return Array.isArray(data) ? data : null;
+}
+function readCloudflareModelId(entry) {
+	if (typeof entry === "string") {
+		const modelId = readCatalogString(entry);
+		return modelId && isCloudflareRunnableModelId(modelId) ? modelId : null;
+	}
+	for (const field of ["name", "id"]) {
+		const modelId = readCatalogField(entry, field);
+		if (modelId && isCloudflareRunnableModelId(modelId)) return modelId;
+	}
+	return null;
+}
+function getCloudflareModelProvider(modelId) {
+	const [, hostedProvider] = /^@(?:cf|hf)\/([^/]+)/.exec(modelId) ?? [];
+	if (hostedProvider) return hostedProvider;
+	return modelId.split("/", 1)[0] || "other";
+}
+function formatCloudflareModelProvider(provider) {
+	const normalized = provider.trim().toLowerCase();
+	if (cloudflareModelProviderLabels[normalized]) return cloudflareModelProviderLabels[normalized];
+	return normalized.split(/[-_]/).filter(Boolean).map((word) => word[0].toUpperCase() + word.slice(1)).join(" ");
+}
+function normalizeCloudflareModelSelectorModels(models) {
+	const seen = /* @__PURE__ */ new Set();
+	const options = [];
+	const appendOption = (entry) => {
+		const entries = readCatalogEntries(entry);
+		if (entries) {
+			for (const nestedEntry of entries) appendOption(nestedEntry);
+			return;
+		}
+		const id = readCloudflareModelId(entry);
+		if (!id || seen.has(id)) return;
+		seen.add(id);
+		const provider = getCloudflareModelProvider(id);
+		options.push({
+			id,
+			provider,
+			providerLabel: formatCloudflareModelProvider(provider),
+			source: id.startsWith("@") ? "workers-ai" : "ai-gateway",
+			description: readCatalogField(entry, "description")
+		});
+	};
+	for (const entry of models) appendOption(entry);
+	return options;
+}
+async function listCloudflareModelSelectorOptions(client, params) {
+	const models = [];
+	for await (const model of client.ai.models.list(params)) models.push(model);
+	if (params.format !== "openrouter") for await (const model of client.ai.models.list({
+		...params,
+		format: "openrouter"
+	})) models.push(model);
+	return normalizeCloudflareModelSelectorModels(models);
+}
+function groupCloudflareModelOptions(options) {
+	const groups = [];
+	const groupsByLabel = /* @__PURE__ */ new Map();
+	for (const option of options) {
+		const group = groupsByLabel.get(option.providerLabel);
+		if (group) {
+			group.push(option);
+			continue;
+		}
+		const nextGroup = [option];
+		groupsByLabel.set(option.providerLabel, nextGroup);
+		groups.push({
+			providerLabel: option.providerLabel,
+			options: nextGroup
+		});
+	}
+	return groups;
+}
 function useModelSelectorContext() {
 	const ctx = React.useContext(ModelSelectorContext);
 	if (!ctx) throw new Error("ModelSelector subcomponents must be used inside <ModelSelector>.");
@@ -154,6 +276,67 @@ function ModelSelector({ open, defaultOpen = false, onOpenChange, children, clas
 		})
 	});
 }
+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 }) {
+	const [query, setQuery] = React.useState("");
+	const options = React.useMemo(() => normalizeCloudflareModelSelectorModels(models), [models]);
+	const groups = React.useMemo(() => groupCloudflareModelOptions(options), [options]);
+	const optionIds = React.useMemo(() => new Set(options.map((option) => option.id)), [options]);
+	const selectedOption = selectedModelId ? options.find((option) => option.id === selectedModelId) ?? {
+		id: selectedModelId,
+		provider: getCloudflareModelProvider(selectedModelId),
+		providerLabel: formatCloudflareModelProvider(getCloudflareModelProvider(selectedModelId)),
+		source: selectedModelId.startsWith("@") ? "workers-ai" : "ai-gateway",
+		description: null
+	} : null;
+	const typedModelId = query.trim();
+	const showTypedModel = allowTypedModel && isCloudflareRunnableModelId(typedModelId) && typedModelId !== selectedModelId && !optionIds.has(typedModelId);
+	return /* @__PURE__ */ jsxs(ModelSelector, {
+		onOpenChange: React.useCallback((nextOpen) => {
+			if (!nextOpen) setQuery("");
+			onOpenChange?.(nextOpen);
+		}, [onOpenChange]),
+		...props,
+		children: [/* @__PURE__ */ jsx(ModelSelectorTrigger, {
+			disabled,
+			children: selectedOption ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: selectedOption.provider }), /* @__PURE__ */ jsx(ModelSelectorName, { children: selectedOption.id })] }) : /* @__PURE__ */ jsx(ModelSelectorName, { children: triggerLabel })
+		}), /* @__PURE__ */ jsx(ModelSelectorContent, {
+			title: "Cloudflare model selector",
+			children: /* @__PURE__ */ jsxs(ModelSelectorDialog, { children: [/* @__PURE__ */ jsx(ModelSelectorInput, {
+				"aria-label": "Search Cloudflare AI models",
+				placeholder,
+				onInput: (event) => setQuery(event.currentTarget.value)
+			}), /* @__PURE__ */ jsxs(ModelSelectorList, { children: [
+				showTypedModel ? /* @__PURE__ */ jsx(ModelSelectorGroup, {
+					label: "AI Gateway",
+					children: /* @__PURE__ */ jsxs(ModelSelectorItem, {
+						value: typedModelId,
+						onSelect: onSelectModel,
+						children: [
+							/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: getCloudflareModelProvider(typedModelId) }),
+							/* @__PURE__ */ jsx(ModelSelectorName, { children: typedModelId }),
+							/* @__PURE__ */ jsx(ModelSelectorShortcut, { children: "Use" })
+						]
+					})
+				}) : null,
+				groups.map((group) => /* @__PURE__ */ jsx(ModelSelectorGroup, {
+					label: group.providerLabel,
+					children: group.options.map((option) => /* @__PURE__ */ jsxs(ModelSelectorItem, {
+						value: option.id,
+						keywords: `${option.provider} ${option.providerLabel} ${option.source} ${option.description ?? ""}`,
+						selected: option.id === selectedModelId,
+						onSelect: onSelectModel,
+						children: [
+							/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: option.provider }),
+							/* @__PURE__ */ jsx(ModelSelectorName, { children: option.id }),
+							/* @__PURE__ */ jsx(ModelSelectorShortcut, { children: option.source === "workers-ai" ? "Workers AI" : "Gateway" })
+						]
+					}, option.id))
+				}, group.providerLabel)),
+				/* @__PURE__ */ jsx(ModelSelectorEmpty, { children: emptyLabel })
+			] })] })
+		})]
+	});
+}
 function ModelSelectorTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(DialogTrigger, { render: /* @__PURE__ */ jsxs(Button, {
 		variant: "outline",
@@ -303,4 +486,4 @@ function ModelSelectorShortcut({ className, children, ref, ...props }) {
 	});
 }
 //#endregion
-export { ModelSelectorGroup as a, ModelSelectorList as c, ModelSelectorName as d, ModelSelectorSeparator as f, ModelSelectorEmpty as i, ModelSelectorLogo as l, ModelSelectorTrigger as m, ModelSelectorContent as n, ModelSelectorInput as o, ModelSelectorShortcut as p, ModelSelectorDialog as r, ModelSelectorItem as s, ModelSelector as t, ModelSelectorLogoGroup as u };
+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, ModelSelectorShortcut 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 };

package/dist/components/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
 import { M as SpinnerIcon } from "../icons-D2Q5n5C1.js";
 import { Button } from "./Button.js";
-import { l as ModelSelectorLogo } from "../ModelSelector-9G_-GooI.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-DXtpcRmT.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx

package/dist/components/ModelSelector.d.ts

@@ -1,7 +1,41 @@
 import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
 import * as React from "react";
+import Cloudflare from "cloudflare";
+import { AiModelsSearchObject } from "@cloudflare/workers-types";
 
 //#region src/components/ModelSelector.d.ts
+type CloudflareModelSelectorModels = readonly Cloudflare.AI.ModelListResponse[] | readonly AiModelsSearchObject[] | readonly string[];
+interface CloudflareModelSelectorOption {
+  readonly id: string;
+  readonly provider: string;
+  readonly providerLabel: string;
+  readonly source: "ai-gateway" | "workers-ai";
+  readonly description: string | null;
+}
+interface CloudflareModelSelectorProps extends Omit<ModelSelectorProps, "children"> {
+  /** Raw `client.ai.models.list()` entries, `env.AI.models()` entries, or model ids. */
+  models: CloudflareModelSelectorModels;
+  /** Current runnable model id, such as `@cf/meta/llama...` or `openai/gpt-5.5`. */
+  selectedModelId?: string | null;
+  /** Called with a runnable Workers AI or AI Gateway model id. */
+  onSelectModel: (modelId: string) => void;
+  /** Disables the trigger while the caller is loading or saving. */
+  disabled?: boolean;
+  /** Search input placeholder. */
+  placeholder?: string;
+  /** Trigger fallback when no model is selected. */
+  triggerLabel?: React.ReactNode;
+  /** Empty state copy. */
+  emptyLabel?: React.ReactNode;
+  /** Whether a pasted `provider/model` id can be selected when absent from the catalog. */
+  allowTypedModel?: boolean;
+}
+declare function isCloudflareRunnableModelId(value: string): boolean;
+declare function readCloudflareModelId(entry: unknown): string | null;
+declare function getCloudflareModelProvider(modelId: string): string;
+declare function formatCloudflareModelProvider(provider: string): string;
+declare function normalizeCloudflareModelSelectorModels(models: CloudflareModelSelectorModels): CloudflareModelSelectorOption[];
+declare function listCloudflareModelSelectorOptions(client: Cloudflare, params: Cloudflare.AI.ModelListParams): Promise<CloudflareModelSelectorOption[]>;
 interface ModelSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Controlled dialog open state. */
   open?: boolean;
@@ -65,6 +99,18 @@ declare function ModelSelector({
 }: ModelSelectorProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+declare function CloudflareModelSelector({
+  models,
+  selectedModelId,
+  onSelectModel,
+  disabled,
+  placeholder,
+  triggerLabel,
+  emptyLabel,
+  allowTypedModel,
+  onOpenChange,
+  ...props
+}: CloudflareModelSelectorProps): React.JSX.Element;
 interface ModelSelectorTriggerProps extends Omit<ButtonProps, "variant" | "color" | "className"> {
   className?: string;
 }
@@ -195,4 +241,4 @@ declare function ModelSelectorShortcut({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorShortcut, ModelSelectorShortcutProps, ModelSelectorTrigger, ModelSelectorTriggerProps };
+export { CloudflareModelSelector, CloudflareModelSelectorModels, CloudflareModelSelectorOption, CloudflareModelSelectorProps, ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorShortcut, ModelSelectorShortcutProps, ModelSelectorTrigger, ModelSelectorTriggerProps, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/dist/components/ModelSelector.js

@@ -1,2 +1,2 @@
-import { a as ModelSelectorGroup, c as ModelSelectorList, d as ModelSelectorName, f as ModelSelectorSeparator, i as ModelSelectorEmpty, l as ModelSelectorLogo, m as ModelSelectorTrigger, n as ModelSelectorContent, o as ModelSelectorInput, p as ModelSelectorShortcut, r as ModelSelectorDialog, s as ModelSelectorItem, t as ModelSelector, u as ModelSelectorLogoGroup } from "../ModelSelector-9G_-GooI.js";
-export { ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger };
+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-DXtpcRmT.js";
+export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -41,6 +41,7 @@
   "dependencies": {
     "@base-ui/react": "~1.6.0",
     "@cloudflare/codemode": "^0.4.2",
+    "@cloudflare/workers-types": "^4.20260702.1",
     "@rrweb/replay": "^2.1.0",
     "@shadcn/react": "^0.2.0",
     "@streamdown/cjk": "^1.0.3",
@@ -48,15 +49,15 @@
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "anser": "^2.3.5",
+    "cloudflare": "^6.5.0",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.9.0"
+    "@mcp-b/design-tokens": "0.10.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",
     "@cloudflare/shell": "^0.4.1",
     "@cloudflare/think": "^0.12.1",
-    "@cloudflare/workers-types": "^4.20260702.1",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-vitest": "^10.4.6",