@mcp-b/react-components 0.7.0 → 0.8.0

package/dist/AgentChat-403mckDG.d.ts

@@ -0,0 +1,101 @@
+import { et as PromptInputMessage, n as ExecutionApprovals } from "./PromptInput-D6-G24p7.js";
+import * as React from "react";
+import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
+import { PendingApproval } from "@cloudflare/think";
+
+//#region src/components/AgentChat.d.ts
+type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
+interface AgentChatRenderPartContext<MessageT extends UIMessage = UIMessage> {
+  message: MessageT;
+  part: AgentChatPart<MessageT>;
+  partIndex: number;
+  defaultRender: () => React.ReactNode;
+}
+interface AgentChatRenderMessageContext<MessageT extends UIMessage = UIMessage> {
+  message: MessageT;
+  messageIndex: number;
+}
+interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
+  className?: string;
+  /** AI SDK `UIMessage`s to render, oldest first. */
+  messages: readonly MessageT[];
+  /** Drives the composer's send/stop affordance and streaming indicators. */
+  status?: ChatStatus;
+  /** Called with the composed message when the user submits. Omit for a read-only transcript. */
+  onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
+  /** Called when the user hits stop while `status` is streaming/submitted. */
+  onStop?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Rendered in place of the transcript while `messages` is empty. */
+  emptyState?: React.ReactNode;
+  /** Extra controls rendered in the composer toolbar. */
+  composerTools?: React.ReactNode;
+  /** Extra rows rendered in the built-in plus menu after files. */
+  composerAddMenuItems?: React.ReactNode;
+  /**
+   * Transient status rendered between the transcript and the composer —
+   * e.g. a "Reconnecting…" pill. `ThinkChat.Messages` fills this from the
+   * hook's `isRecovering`/`connectionError` automatically.
+   */
+  notice?: React.ReactNode;
+  /**
+   * When set, the last assistant message gets a Retry action that calls this
+   * with its message id — pass to the AI SDK's `regenerate({ messageId })`.
+   */
+  onRegenerate?: (messageId: string) => void;
+  /**
+   * Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly.
+   * When set and a tool call awaits approval, the composer becomes the
+   * confirmation.
+   */
+  onApprovalResponse?: ChatAddToolApproveResponseFunction;
+  /** Resolves Think execution approvals. See {@link ExecutionApprovals}. */
+  executionApprovals?: ExecutionApprovals;
+  /** Think durable-pause approvals from `pendingApprovals()`, rendered when `executionApprovals` is set. */
+  pendingApprovals?: readonly PendingApproval[];
+  /**
+   * When set, a Context ring in the composer footer shows how much of the
+   * model's window the conversation occupies. Used tokens come from the
+   * newest message carrying `metadata.usage` (the AI SDK `messageMetadata`
+   * convention; Think merges it into message metadata as turns finish).
+   */
+  contextWindow?: {
+    maxTokens: number;
+    modelId?: string;
+  };
+  /** Override rendering per part; return `undefined` to fall back to the default part UI. */
+  renderPart?: (context: AgentChatRenderPartContext<MessageT>) => React.ReactNode | undefined;
+  /** Rendered after each message's parts — for actions, citations, and the like. */
+  renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;
+}
+/**
+ * Low-level transcript/composer surface used by `ThinkChat`: props in, no
+ * transport. Product code that talks to a Cloudflare Think agent should render
+ * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
+ */
+declare function AgentChat<MessageT extends UIMessage = UIMessage>({
+  className,
+  messages,
+  status,
+  onSubmit,
+  onStop,
+  placeholder,
+  disabled,
+  emptyState,
+  composerTools,
+  composerAddMenuItems,
+  notice,
+  onRegenerate,
+  onApprovalResponse,
+  executionApprovals,
+  pendingApprovals: durableApprovals,
+  contextWindow,
+  renderPart,
+  renderMessageAfter,
+  ref
+}: AgentChatProps<MessageT> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { AgentChatRenderPartContext as a, AgentChatRenderMessageContext as i, AgentChatPart as n, AgentChatProps as r, AgentChat as t };

package/dist/BrowserLiveView-ZktFZiMD.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+//#region src/components/BrowserLiveView.d.ts
+interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Live View URL (Browser Run `devtoolsFrontendUrl`, e.g. live.browser.run). */
+  url: string;
+  /** Epoch ms after which the URL is dead (Browser Run mints ~5-minute links). */
+  expiresAt?: number;
+  /** The page the session was showing — used for the ended-state text. */
+  pageTitle?: string;
+  /**
+   * Shown once the link expires — pass the last screenshot the agent took
+   * (`<img>`) to keep the final frame on screen. Defaults to a quiet
+   * "Live view ended" state.
+   */
+  fallback?: React.ReactNode;
+}
+/**
+ * Embeds a Browser Run Live View — a real-time, interactive view of the
+ * agent's browser session. Links expire (~5 minutes), so the iframe swaps to
+ * `fallback` (e.g. the last screenshot) once `expiresAt` passes. While the
+ * hosted viewer connects, a quiet loading overlay hides the frame; if it
+ * never loads, the view degrades to `fallback` or an unavailable state. An
+ * expand button opens the same view in a fullscreen dialog.
+ *
+ * Where URLs come from (upstream: `agents/browser` in
+ * github.com/cloudflare/agents — `BrowserLiveViewUrl`): the model calls
+ * `cdp.getLiveViewUrl()` inside a `browser_execute` tool run, or the host
+ * calls `connector.liveView()`/`sessionInfo()`. This package's chat rendering
+ * derives the component automatically from links found in tool results.
+ *
+ * Styling rides `@mcp-b/react-components/styles` (browser-live-view.css),
+ * which think-chat consumers load anyway.
+ *
+ * The iframe is unsandboxed by design: the hosted Live View UI needs scripts
+ * and its own origin to stream the session. Only pass trusted Live View URLs.
+ */
+declare function BrowserLiveView({
+  url,
+  expiresAt,
+  pageTitle,
+  fallback,
+  className,
+  ...props
+}: BrowserLiveViewProps): React.JSX.Element;
+//#endregion
+export { BrowserLiveViewProps as n, BrowserLiveView as t };

package/dist/BrowserReplay-6G-mnwcn.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+//#region src/components/BrowserReplay.d.ts
+interface BrowserReplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * rrweb events for one tab, e.g. one
+   * `BrowserRecording.events[targetId]` entry from Cloudflare Browser Run.
+   */
+  events: unknown[];
+  /** Start playing on mount. */
+  autoPlay?: boolean;
+}
+/**
+ * Replays a completed Cloudflare Browser Run recording locally with rrweb.
+ *
+ * This is intentionally not derived from Think chat message parts. Live view
+ * links and screenshots ride the `browser_execute` stream and belong to
+ * `BrowserLiveView`; replay events are fetched after a session closes with
+ * Browser Run's `getBrowserRecording()`. Upstream currently shapes those
+ * recordings as `Record<targetId, unknown[]>`, where each array is plain rrweb
+ * JSON for one tab. Playback happens in the viewer's browser through
+ * `@rrweb/replay`; no replay service is contacted at playback time.
+ *
+ * Styling rides `@mcp-b/react-components/styles` (browser-replay.css), which
+ * think-chat consumers load anyway.
+ *
+ * @see https://github.com/cloudflare/agents/tree/main/packages/agents/src/browser
+ * @see https://github.com/rrweb-io/rrweb/tree/main/packages/%40rrweb/replay
+ */
+declare function BrowserReplay({
+  className,
+  events,
+  autoPlay,
+  ref,
+  ...props
+}: BrowserReplayProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { BrowserReplayProps as n, BrowserReplay as t };

package/dist/{CodeBlock-BK0sOAbV.js → CodeBlock-XNQOupQ3.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
 import { Select, SelectContent, SelectItem, SelectList, SelectTrigger, SelectValue } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-CB2MWcau.js";
+import { t as CopyButton } from "./copy-button-C6JSKtFE.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/{FileTree-BWQZ0FSi.js → FileTree-wMyZhhHO.js}

@@ -1,5 +1,5 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon, g as FolderOpenIcon, h as FolderIcon, m as FileIcon } from "./icons-BCNawx-T.js";
+import { _ as FolderOpenIcon, c as ChevronRightIcon, g as FolderIcon, h as FileIcon } from "./icons-D2Q5n5C1.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/use-file-tree-nav.ts

package/dist/ModelSelector-9G_-GooI.js

@@ -0,0 +1,306 @@
+import { t as cx } from "./class-names-9UtZwb0J.js";
+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";
+//#region src/components/_internal/provider-logos.tsx
+function Svg({ children, size = 16, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		focusable: "false",
+		...props,
+		children
+	});
+}
+const OpenAILogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	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" })
+});
+const AnthropicLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	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" })]
+});
+const GoogleLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	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" })
+});
+const MetaLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	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" })
+});
+const KimiLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "9.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M8 7.5v9M8 12l4.5-4.5M8 12l5 4.5M14 7.5h2.5v9H14z",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})]
+});
+const FallbackLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "3"
+	})
+});
+/**
+* Resolves a provider string to its logo component.
+* Unknown providers get a neutral dot fallback.
+*/
+function ProviderLogo({ provider, ...props }) {
+	switch (provider.toLowerCase()) {
+		case "openai": return /* @__PURE__ */ jsx(OpenAILogo, { ...props });
+		case "anthropic": return /* @__PURE__ */ jsx(AnthropicLogo, { ...props });
+		case "google": return /* @__PURE__ */ jsx(GoogleLogo, { ...props });
+		case "meta": return /* @__PURE__ */ jsx(MetaLogo, { ...props });
+		case "kimi": return /* @__PURE__ */ jsx(KimiLogo, { ...props });
+		default: return /* @__PURE__ */ jsx(FallbackLogo, { ...props });
+	}
+}
+//#endregion
+//#region src/components/ModelSelector.tsx
+const ModelSelectorContext = React.createContext(null);
+function useModelSelectorContext() {
+	const ctx = React.useContext(ModelSelectorContext);
+	if (!ctx) throw new Error("ModelSelector subcomponents must be used inside <ModelSelector>.");
+	return ctx;
+}
+/**
+* A searchable model picker. Click the trigger to open a dialog containing a
+* search input and a grouped list of available models.
+*
+* Built internally for AI model selection. Use it when users choose one model
+* from a grouped provider list. Do not use it as a general command palette or
+* multiselect; use Combobox or a dedicated component for that.
+*
+* Sigvelo changes: composes the design-system Dialog and Button, filters item
+* children locally, and maps provider logos plus listbox styling to Sigvelo
+* CSS tokens.
+*
+* The dialog owns focus while open, the list uses `role="listbox"`, and items
+* use `role="option"` with `aria-selected`. Styling consumes surface, border,
+* spacing, radius, focus, and typography tokens. Add provider/item affordances
+* here when they need to be shared.
+*
+* @example
+* ```tsx
+* <ModelSelector>
+*   <ModelSelectorTrigger>
+*     <ModelSelectorLogo provider="anthropic" />
+*     <ModelSelectorName>Claude Opus 4.6</ModelSelectorName>
+*   </ModelSelectorTrigger>
+*   <ModelSelectorContent>
+*     <ModelSelectorDialog>
+*       <ModelSelectorInput placeholder="Search models…" />
+*       <ModelSelectorList>
+*         <ModelSelectorGroup label="Anthropic">
+*           <ModelSelectorItem value="claude-opus-4-6" onSelect={…}>
+*             <ModelSelectorLogo provider="anthropic" />
+*             <ModelSelectorName>Claude Opus 4.6</ModelSelectorName>
+*           </ModelSelectorItem>
+*         </ModelSelectorGroup>
+*       </ModelSelectorList>
+*     </ModelSelectorDialog>
+*   </ModelSelectorContent>
+* </ModelSelector>
+* ```
+*/
+function ModelSelector({ open, defaultOpen = false, onOpenChange, children, className, ref, ...props }) {
+	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+	const [query, setQuery] = React.useState("");
+	const isControlled = open !== void 0;
+	const currentOpen = isControlled ? open : internalOpen;
+	const handleOpenChange = React.useCallback((next) => {
+		if (!isControlled) setInternalOpen(next);
+		onOpenChange?.(next);
+		if (!next) setQuery("");
+	}, [isControlled, onOpenChange]);
+	const onSelectItem = React.useCallback(() => {
+		handleOpenChange(false);
+	}, [handleOpenChange]);
+	const ctxValue = React.useMemo(() => ({
+		query,
+		setQuery,
+		onSelectItem
+	}), [query, onSelectItem]);
+	return /* @__PURE__ */ jsx(ModelSelectorContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("model-selector", className),
+			...props,
+			children: /* @__PURE__ */ jsx(Dialog, {
+				open: currentOpen,
+				onOpenChange: handleOpenChange,
+				children
+			})
+		})
+	});
+}
+function ModelSelectorTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(DialogTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		color: "neutral",
+		className: cx("model-selector__trigger", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "model-selector__trigger-chevron",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+		})]
+	}) });
+}
+function ModelSelectorContent({ children, title = "Model Selector", ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsxs(DialogPopup, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DialogTitle, {
+			className: "model-selector__title",
+			children: title
+		}), children]
+	})] });
+}
+function ModelSelectorDialog({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("model-selector__dialog", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorInput({ className, placeholder = "Search models…", ref, ...props }) {
+	const { query, setQuery } = useModelSelectorContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "model-selector__search",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "model-selector__search-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(SearchIcon, {})
+		}), /* @__PURE__ */ jsx("input", {
+			ref,
+			type: "search",
+			value: query,
+			onChange: (e) => setQuery(e.target.value),
+			placeholder,
+			className: cx("model-selector__input", className),
+			autoFocus: true,
+			...props
+		})]
+	});
+}
+function ModelSelectorList({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "listbox",
+		className: cx("model-selector__list", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorGroup({ className, label, children, ref, ...props }) {
+	const { query } = useModelSelectorContext();
+	const childArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));
+	const q = query.trim().toLowerCase();
+	const filtered = q ? childArray.filter((child) => {
+		const value = String(child.props.value ?? "").toLowerCase();
+		const keywords = String(child.props.keywords ?? "").toLowerCase();
+		return value.includes(q) || keywords.includes(q);
+	}) : childArray;
+	if (filtered.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		className: cx("model-selector__group", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "model-selector__group-label",
+			children: label
+		}), filtered]
+	});
+}
+function ModelSelectorItem({ className, value, keywords, selected, onSelect, children, onClick, ref, ...props }) {
+	const { onSelectItem } = useModelSelectorContext();
+	const handleClick = (e) => {
+		onSelect?.(value);
+		onSelectItem();
+		onClick?.(e);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		role: "option",
+		"aria-selected": selected,
+		"data-selected": selected ? "" : void 0,
+		className: cx("model-selector__item", className),
+		onClick: handleClick,
+		...props,
+		children
+	});
+}
+function ModelSelectorEmpty({ className, children = "No models found", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("model-selector__empty", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorSeparator({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		ref,
+		className: cx("model-selector__separator", className),
+		...props
+	});
+}
+function ModelSelectorLogo({ className, provider, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("model-selector__logo", className),
+		children: /* @__PURE__ */ jsx(ProviderLogo, {
+			provider,
+			...props
+		})
+	});
+}
+function ModelSelectorLogoGroup({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("model-selector__logo-group", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorName({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("model-selector__name", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorShortcut({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		ref,
+		className: cx("model-selector__shortcut", className),
+		...props,
+		children
+	});
+}
+//#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 };

package/dist/ThinkChatActivity-CeHzk6-K.d.ts

@@ -0,0 +1,73 @@
+import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-403mckDG.js";
+import { s as ThinkChatPart } from "./ThinkChatToolParts-DnUiZgCC.js";
+import * as React from "react";
+import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
+
+//#region src/components/ThinkChatActivity.d.ts
+/**
+ * Bespoke rendering for one tool inside the activity log. Both hooks fall
+ * through to the built-in families when they return `undefined`, so an
+ * override can adjust just the label or just the panel.
+ */
+interface ThinkChatToolRenderer {
+  /** One-line step label. `null` hides the step from the log. */
+  describe?: (part: ToolUIPart | DynamicToolUIPart) => string | null | undefined;
+  /** Expanded detail under the step. `null` keeps the step a plain row. */
+  panel?: (part: ToolUIPart | DynamicToolUIPart) => React.ReactNode;
+}
+type ThinkChatToolRenderers = Record<string, ThinkChatToolRenderer>;
+interface ThinkChatActivityRendererOptions {
+  /**
+   * Tool names to keep out of activity folding entirely — the run splits
+   * around them and they fall through to your own renderPart / AgentChat's
+   * generic standalone activity row. For tools that should stay in the log
+   * with custom UI, use `toolRenderers` instead.
+   */
+  excludeTools?: readonly string[];
+  /** Per-tool label/panel overrides inside the activity log, keyed by tool name. */
+  toolRenderers?: ThinkChatToolRenderers;
+}
+/**
+ * One-line natural-language label for an activity part ("Ran vp test",
+ * "Fetched developers.cloudflare.com/agents/"); `null` for boundaries that
+ * aren't steps (step-start). Exported so a custom `renderPart` can reuse the
+ * built-in labels for tools it doesn't override.
+ */
+declare function describeThinkChatActivityPart(part: ThinkChatPart, toolRenderers?: ThinkChatToolRenderers): string | null;
+interface ThinkChatActivityProps {
+  /** Render with the log expanded. */
+  defaultOpen?: boolean;
+  parts: readonly ThinkChatPart[];
+  /** Defaults to deriving from part states (reasoning streaming, tool awaiting output). */
+  isStreaming?: boolean;
+  /** Per-tool label/panel overrides, keyed by tool name. */
+  toolRenderers?: ThinkChatToolRenderers;
+}
+/**
+ * One run of agent work as a collapsed Activity block: while streaming the
+ * label shimmers with the live step; settled, it becomes a short summary
+ * ("Thought, read 2 files and ran a command") over an expandable step log
+ * with per-tool panels. Normally reached through `ThinkChat.Messages`;
+ * exported for apps that lay out messages themselves.
+ */
+declare function ThinkChatActivity({
+  parts,
+  defaultOpen,
+  isStreaming,
+  toolRenderers
+}: ThinkChatActivityProps): React.JSX.Element | null;
+/**
+ * Builds a renderPart handler that folds every run of consecutive activity
+ * parts (reasoning + tool calls) into one collapsed Activity box. Everything
+ * is derived from the UIMessage stream: part order, tool states, reasoning
+ * state. Excluded tools split the run and return undefined so your own
+ * renderPart (or AgentChat's generic activity row) takes over for them.
+ */
+declare function createThinkChatActivityRenderer({
+  excludeTools,
+  toolRenderers
+}?: ThinkChatActivityRendererOptions): NonNullable<AgentChatProps["renderPart"]>;
+/** Default activity renderer — `createThinkChatActivityRenderer()` with no overrides. */
+declare const renderThinkChatActivityPart: (context: AgentChatRenderPartContext<UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>) => React.ReactNode | undefined;
+//#endregion
+export { ThinkChatToolRenderers as a, renderThinkChatActivityPart as c, ThinkChatToolRenderer as i, ThinkChatActivityProps as n, createThinkChatActivityRenderer as o, ThinkChatActivityRendererOptions as r, describeThinkChatActivityPart as s, ThinkChatActivity as t };

package/dist/ThinkChatContext-BLAAb8J5.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { useAgentChat } from "@cloudflare/think/react";
+import { UIMessage } from "ai";
+
+//#region src/components/ThinkChatContext.d.ts
+type ThinkChatValue = ReturnType<typeof useAgentChat<unknown, UIMessage>>;
+declare const ThinkChatContext: React.Context<(Omit<import("@ai-sdk/react").UseChatHelpers<UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>, "addToolOutput"> & {
+  clearHistory: () => void;
+  addToolOutput: (opts: {
+    toolCallId: string;
+    toolName?: string;
+    output?: unknown;
+    state?: "output-available" | "output-error";
+    errorText?: string;
+  }) => void;
+  isServerStreaming: boolean;
+  isStreaming: boolean;
+  isRecovering: boolean;
+  isToolContinuation: boolean;
+  connectionError: (Error & {
+    code: number;
+    reason: string;
+    wasClean: boolean;
+  }) | null;
+}) | null>;
+declare function useThinkChatContext(component: string): ThinkChatValue;
+//#endregion
+export { ThinkChatValue as n, useThinkChatContext as r, ThinkChatContext as t };

package/dist/components/Activity.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon } from "../icons-BCNawx-T.js";
+import { c as ChevronRightIcon } from "../icons-D2Q5n5C1.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx