@mcp-b/react-components 0.11.0 → 0.12.0

package/dist/{AgentChat-B9LD_WF1.d.ts → AgentChat-CRmsKg9B.d.ts}

@@ -1,7 +1,8 @@
-import { et as PromptInputMessage, n as ExecutionApprovals } from "./PromptInput-D6-G24p7.js";
+import { $ as PromptInputMessage } from "./PromptInput-IyM6ZETj.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
-import { PendingApproval } from "@cloudflare/think";
+import { PendingApproval, Think } from "@cloudflare/think";
+import { AgentStub } from "agents/client";
 
 //#region src/components/AgentChat.d.ts
 type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
@@ -103,9 +104,11 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
    * confirmation.
    */
   onApprovalResponse?: ChatAddToolApproveResponseFunction;
-  /** Resolves Think execution approvals. See {@link ExecutionApprovals}. */
-  executionApprovals?: ExecutionApprovals;
-  /** Think durable-pause approvals from `pendingApprovals()`, rendered when `executionApprovals` is set. */
+  /** Whole upstream Think stub used to resolve paused and durable execution approvals. */
+  thinkStub?: AgentStub<Think>;
+  /** Called after a Think approve/reject RPC settles, including when it rejects. */
+  onExecutionSettled?: () => void | Promise<void>;
+  /** Think durable-pause approvals from `pendingApprovals()`, rendered when `thinkStub` is set. */
   pendingApprovals?: readonly PendingApproval[];
   /**
    * When set, a Context ring in the composer footer shows how much of the
@@ -153,7 +156,8 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   notice,
   onRegenerate,
   onApprovalResponse,
-  executionApprovals,
+  thinkStub,
+  onExecutionSettled,
   pendingApprovals: durableApprovals,
   contextWindow,
   renderPart,

package/dist/{BrowserLiveView-ZktFZiMD.d.ts → BrowserLiveView-BV5qgFgI.d.ts}

@@ -1,11 +1,12 @@
 import * as React from "react";
+import { BrowserLiveViewUrl } from "agents/browser";
 
 //#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;
+  /** Complete upstream value returned by `cdp.getLiveViewUrl()`. */
+  source: BrowserLiveViewUrl;
+  /** Epoch ms when `source` was received. Defaults to its first render. */
+  receivedAt?: number;
   /** The page the session was showing — used for the ended-state text. */
   pageTitle?: string;
   /**
@@ -18,8 +19,8 @@ interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * 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
+ * `fallback` (e.g. the last screenshot) once `source.expiresInMs` 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.
  *
@@ -35,13 +36,13 @@ interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
  * 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,
+declare function BrowserLiveView$1({
+  source,
+  receivedAt,
   pageTitle,
   fallback,
   className,
   ...props
 }: BrowserLiveViewProps): React.JSX.Element;
 //#endregion
-export { BrowserLiveViewProps as n, BrowserLiveView as t };
+export { BrowserLiveViewProps as n, BrowserLiveView$1 as t };

package/dist/{BrowserReplay-6G-mnwcn.d.ts → BrowserReplay-xWvRjRAC.d.ts}

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { BrowserRecording } from "agents/browser";
 
 //#region src/components/BrowserReplay.d.ts
 interface BrowserReplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
@@ -6,7 +7,7 @@ interface BrowserReplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    * rrweb events for one tab, e.g. one
    * `BrowserRecording.events[targetId]` entry from Cloudflare Browser Run.
    */
-  events: unknown[];
+  events: BrowserRecording["events"][string];
   /** Start playing on mount. */
   autoPlay?: boolean;
 }

package/dist/{Menu-B5vDqZe_.d.ts → Menu-BLhnNnRK.d.ts}

@@ -12,6 +12,8 @@ interface MenuProps extends React.ComponentPropsWithoutRef<typeof Menu.Root> {}
 interface MenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Trigger>, "className"> {
   /** Additional CSS class names */
   className?: string;
+  /** Keep Base UI trigger behavior without the default menu trigger chrome. */
+  unstyled?: boolean;
 }
 /**
  * Props for the Menu.Portal component.
@@ -145,6 +147,7 @@ declare const MenuRoot: (props: MenuProps) => React.JSX.Element;
  */
 declare function MenuTrigger({
   className,
+  unstyled,
   ref,
   ...props
 }: MenuTriggerProps & {

package/dist/{ModelSelector-DXtpcRmT.js → ModelSelector-BB-xB-Es.js}

@@ -1,7 +1,9 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
 import { A as SearchIcon, o as ChevronDownIcon } from "./icons-D2Q5n5C1.js";
+import { Separator } from "./components/Separator.js";
 import { Button } from "./components/Button.js";
 import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./components/Dialog.js";
+import { Input } from "./components/Input.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/provider-logos.tsx
@@ -213,13 +215,13 @@ function useModelSelectorContext() {
 * 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
+* children locally, and maps provider logos plus button-list 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.
+* The dialog owns focus while open, and options are native buttons in grouped
+* sections. Styling consumes surface, border, spacing, radius, focus, and
+* typography tokens. Add provider/item affordances here when they need to be
+* shared.
 *
 * @example
 * ```tsx
@@ -375,7 +377,7 @@ function ModelSelectorInput({ className, placeholder = "Search models…", ref,
 			className: "model-selector__search-icon",
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ jsx(SearchIcon, {})
-		}), /* @__PURE__ */ jsx("input", {
+		}), /* @__PURE__ */ jsx(Input, {
 			ref,
 			type: "search",
 			value: query,
@@ -390,7 +392,6 @@ function ModelSelectorInput({ className, placeholder = "Search models…", ref,
 function ModelSelectorList({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		role: "listbox",
 		className: cx("model-selector__list", className),
 		...props,
 		children
@@ -398,6 +399,7 @@ function ModelSelectorList({ className, children, ref, ...props }) {
 }
 function ModelSelectorGroup({ className, label, children, ref, ...props }) {
 	const { query } = useModelSelectorContext();
+	const labelId = React.useId();
 	const childArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));
 	const q = query.trim().toLowerCase();
 	const filtered = q ? childArray.filter((child) => {
@@ -409,10 +411,11 @@ function ModelSelectorGroup({ className, label, children, ref, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		role: "group",
-		"aria-label": label,
+		"aria-labelledby": labelId,
 		className: cx("model-selector__group", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
+			id: labelId,
 			className: "model-selector__group-label",
 			children: label
 		}), filtered]
@@ -425,11 +428,11 @@ function ModelSelectorItem({ className, value, keywords, selected, onSelect, chi
 		onSelectItem();
 		onClick?.(e);
 	};
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsx(Button, {
 		ref,
-		type: "button",
-		role: "option",
-		"aria-selected": selected,
+		variant: "ghost",
+		color: "neutral",
+		"aria-current": selected ? "true" : void 0,
 		"data-selected": selected ? "" : void 0,
 		className: cx("model-selector__item", className),
 		onClick: handleClick,
@@ -446,7 +449,7 @@ function ModelSelectorEmpty({ className, children = "No models found", ref, ...p
 	});
 }
 function ModelSelectorSeparator({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("hr", {
+	return /* @__PURE__ */ jsx(Separator, {
 		ref,
 		className: cx("model-selector__separator", className),
 		...props

package/dist/{PromptInput-D6-G24p7.d.ts → PromptInput-IyM6ZETj.d.ts}

@@ -1,19 +1,14 @@
 import { A as SelectTriggerProps, M as SelectValueProps, S as SelectProps, f as SelectOption, j as SelectValue, r as SelectContentProps, s as SelectItemProps, t as Select } from "./Select-CRsKCJ9x.js";
 import { c as ComboboxGroup, d as ComboboxLabel, f as ComboboxList, g as ComboboxTrigger, h as ComboboxSeparator, l as ComboboxInput, m as ComboboxPositioner, p as ComboboxPopup, s as ComboboxEmpty, t as Combobox, u as ComboboxItem } from "./Combobox-D9anamNr.js";
-import { h as MenuItemProps, l as MenuContentProps, w as MenuProps } from "./Menu-B5vDqZe_.js";
+import { h as MenuItemProps, l as MenuContentProps, w as MenuProps } from "./Menu-BLhnNnRK.js";
 import { c as TabsList, n as TabPanel, t as Tab } from "./Tabs-D9EAq09D.js";
 import { r as ButtonProps } from "./Button-Ct5I6aTu.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, DynamicToolUIPart, FileUIPart, ToolUIPart, UIMessage } from "ai";
-import { PendingApproval } from "@cloudflare/think";
+import { PendingApproval, Think } from "@cloudflare/think";
+import { AgentStub } from "agents/client";
 
 //#region src/components/PromptInput.d.ts
-interface PromptInputReferencedSource {
-  id?: string;
-  title?: string;
-  url?: string;
-  [key: string]: unknown;
-}
 /** The payload produced when the prompt input is submitted. */
 interface PromptInputMessage {
   text: string;
@@ -39,18 +34,9 @@ interface PromptInputControllerProps {
   attachments: AttachmentsContext;
   __registerFileInput: (ref: React.RefObject<HTMLInputElement | null>, open: () => void) => void;
 }
-interface ReferencedSourcesContext {
-  sources: Array<PromptInputReferencedSource & {
-    id: string;
-  }>;
-  add: (sources: PromptInputReferencedSource[] | PromptInputReferencedSource) => void;
-  remove: (id: string) => void;
-  clear: () => void;
-}
 declare function usePromptInputController(): PromptInputControllerProps;
 declare function useProviderAttachments(): AttachmentsContext;
 declare function usePromptInputAttachments(): AttachmentsContext;
-declare function usePromptInputReferencedSources(): ReferencedSourcesContext;
 interface PromptInputProviderProps extends React.PropsWithChildren {
   initialInput?: string;
 }
@@ -86,8 +72,8 @@ interface PromptInputProps extends Omit<React.FormHTMLAttributes<HTMLFormElement
  *
  * Use for assistant/chat submit forms. Do not use it as a generic textarea or
  * non-chat form. Sigvelo changes: uses shared Menu, Select, Combobox, Tabs,
- * Button, and Tooltip components; maps styles to CSS tokens; adds local
- * attachment and referenced-source helpers.
+ * Button, and Tooltip components; maps styles to CSS tokens; and adds local
+ * attachment helpers.
  *
  * The form handles Enter-to-submit while multiline editing remains in the
  * textarea. Attachment controls need accessible labels through their buttons
@@ -121,7 +107,6 @@ declare function PromptInput({
   onError,
   onSubmit,
   children,
-  id,
   ref,
   ...props
 }: PromptInputProps & {
@@ -258,6 +243,7 @@ type PromptInputActionMenuContentProps = MenuContentProps;
 declare function PromptInputActionMenuContent({
   className,
   children,
+  tabIndex,
   ...props
 }: PromptInputActionMenuContentProps): React.JSX.Element;
 type PromptInputActionMenuItemProps = MenuItemProps;
@@ -324,27 +310,6 @@ declare function PromptInputSubmit({
 }: PromptInputSubmitProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-/**
- * Resolve Think execution approvals that do not use the AI SDK
- * `approval-requested` part: paused codemode executions and durable-pause
- * approvals from `pendingApprovals()`. Wire to the Think agent's
- * client-callable RPCs:
- *
- * ```tsx
- * executionApprovals={{
- *   approve: (id) => agent.stub.approveExecution(id),
- *   reject: (id, reason) => agent.stub.rejectExecution(id, reason),
- * }}
- * ```
- *
- * On approve, upstream resumes or runs the parked execution and auto-continues
- * the chat. Both RPCs are idempotent, so a stale click resolves to "already
- * handled".
- */
-interface ExecutionApprovals {
-  approve: (executionId: string) => unknown;
-  reject: (executionId: string, reason?: string) => unknown;
-}
 /** The id a response must carry: the approval id, or the paused run's executionId. */
 declare function getApprovalRequestId(part: ToolUIPart | DynamicToolUIPart): string | undefined;
 /** Component-local identity: paused executions can ask for multiple approvals. */
@@ -371,8 +336,10 @@ interface PromptInputApprovalProps extends Omit<React.HTMLAttributes<HTMLDivElem
   approval?: PendingApproval;
   /** Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly. */
   onRespond?: ChatAddToolApproveResponseFunction;
-  /** Resolves Think execution approvals instead of `onRespond`. See {@link ExecutionApprovals}. */
-  executionApprovals?: ExecutionApprovals;
+  /** Whole upstream Think stub used to resolve execution approvals instead of `onRespond`. */
+  thinkStub?: AgentStub<Think>;
+  /** Called after a Think approve/reject RPC settles, including when it rejects. */
+  onExecutionSettled?: () => void | Promise<void>;
   /**
    * Renders a Skip action that dismisses the confirmation without responding —
    * the approval stays pending upstream.
@@ -394,7 +361,8 @@ declare function PromptInputApproval({
   part,
   approval: durableApproval,
   onRespond,
-  executionApprovals,
+  thinkStub,
+  onExecutionSettled,
   onSkip,
   question,
   count,
@@ -525,4 +493,4 @@ declare const PromptInputCommandItem: typeof ComboboxItem;
 type PromptInputCommandSeparatorProps = React.ComponentPropsWithoutRef<typeof ComboboxSeparator>;
 declare const PromptInputCommandSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { PromptInputHoverCardTriggerProps as $, PromptInputCommandEmpty as A, PromptInputTextareaProps as At, PromptInputCommandProps as B, usePromptInputAttachments as Bt, PromptInputAttachmentsProps as C, PromptInputTabItemProps as Ct, PromptInputButtonProps as D, PromptInputTabsList as Dt, PromptInputButton as E, PromptInputTabProps as Et, PromptInputCommandInputProps as F, TextInputContext as Ft, PromptInputFooterProps as G, PromptInputCommandSeparatorProps as H, usePromptInputReferencedSources as Ht, PromptInputCommandItem as I, TooltipSide as It, PromptInputHoverCard as J, PromptInputHeader as K, PromptInputCommandItemProps as L, getApprovalRequestId as Lt, PromptInputCommandGroup as M, PromptInputToolsProps as Mt, PromptInputCommandGroupProps as N, PromptInputTooltipConfig as Nt, PromptInputButtonTooltip as O, PromptInputTabsListProps as Ot, PromptInputCommandInput as P, ReferencedSourcesContext as Pt, PromptInputHoverCardTrigger as Q, PromptInputCommandList as R, getApprovalStateKey as Rt, PromptInputAttachments as S, PromptInputTabItem as St, PromptInputBodyProps as T, PromptInputTabLabelProps as Tt, PromptInputControllerProps as U, useProviderAttachments as Ut, PromptInputCommandSeparator as V, usePromptInputController as Vt, PromptInputFooter as W, PromptInputHoverCardContentProps as X, PromptInputHoverCardContent as Y, PromptInputHoverCardProps as Z, PromptInputActionMenuTriggerProps as _, PromptInputSubmit as _t, PromptInput as a, PromptInputProviderProps as at, PromptInputAttachment as b, PromptInputTabBody as bt, PromptInputActionAddScreenshot as c, PromptInputSelectContent as ct, PromptInputActionMenuContent as d, PromptInputSelectItemProps as dt, PromptInputMessage as et, PromptInputActionMenuContentProps as f, PromptInputSelectProps as ft, PromptInputActionMenuTrigger as g, PromptInputSelectValueProps as gt, PromptInputActionMenuProps as h, PromptInputSelectValue as ht, PermissionMode as i, PromptInputProvider as it, PromptInputCommandEmptyProps as j, PromptInputTools as jt, PromptInputCommand as k, PromptInputTextarea as kt, PromptInputActionAddScreenshotProps as l, PromptInputSelectContentProps as lt, PromptInputActionMenuItemProps as m, PromptInputSelectTriggerProps as mt, ExecutionApprovals as n, PromptInputPermissionSelectorProps as nt, PromptInputActionAddAttachments as o, PromptInputReferencedSource as ot, PromptInputActionMenuItem as p, PromptInputSelectTrigger as pt, PromptInputHeaderProps as q, PendingToolApproval as r, PromptInputProps as rt, PromptInputActionAddAttachmentsProps as s, PromptInputSelect as st, AttachmentsContext as t, PromptInputPermissionSelector as tt, PromptInputActionMenu as u, PromptInputSelectItem as ut, PromptInputApproval as v, PromptInputSubmitProps as vt, PromptInputBody as w, PromptInputTabLabel as wt, PromptInputAttachmentProps as x, PromptInputTabBodyProps as xt, PromptInputApprovalProps as y, PromptInputTab as yt, PromptInputCommandListProps as z, getPendingToolApprovals as zt };
+export { PromptInputMessage as $, PromptInputCommandEmptyProps as A, PromptInputToolsProps as At, PromptInputCommandSeparator as B, PromptInputBody as C, PromptInputTabLabelProps as Ct, PromptInputButtonTooltip as D, PromptInputTextarea as Dt, PromptInputButtonProps as E, PromptInputTabsListProps as Et, PromptInputCommandItem as F, getApprovalStateKey as Ft, PromptInputHeader as G, PromptInputControllerProps as H, PromptInputCommandItemProps as I, getPendingToolApprovals as It, PromptInputHoverCardContent as J, PromptInputHeaderProps as K, PromptInputCommandList as L, usePromptInputAttachments as Lt, PromptInputCommandGroupProps as M, TextInputContext as Mt, PromptInputCommandInput as N, TooltipSide as Nt, PromptInputCommand as O, PromptInputTextareaProps as Ot, PromptInputCommandInputProps as P, getApprovalRequestId as Pt, PromptInputHoverCardTriggerProps as Q, PromptInputCommandListProps as R, usePromptInputController as Rt, PromptInputAttachmentsProps as S, PromptInputTabLabel as St, PromptInputButton as T, PromptInputTabsList as Tt, PromptInputFooter as U, PromptInputCommandSeparatorProps as V, PromptInputFooterProps as W, PromptInputHoverCardProps as X, PromptInputHoverCardContentProps as Y, PromptInputHoverCardTrigger as Z, PromptInputApproval as _, PromptInputTab as _t, PromptInputActionAddAttachments as a, PromptInputSelect as at, PromptInputAttachmentProps as b, PromptInputTabItem as bt, PromptInputActionAddScreenshotProps as c, PromptInputSelectItem as ct, PromptInputActionMenuContentProps as d, PromptInputSelectTrigger as dt, PromptInputPermissionSelector as et, PromptInputActionMenuItem as f, PromptInputSelectTriggerProps as ft, PromptInputActionMenuTriggerProps as g, PromptInputSubmitProps as gt, PromptInputActionMenuTrigger as h, PromptInputSubmit as ht, PromptInput as i, PromptInputProviderProps as it, PromptInputCommandGroup as j, PromptInputTooltipConfig as jt, PromptInputCommandEmpty as k, PromptInputTools as kt, PromptInputActionMenu as l, PromptInputSelectItemProps as lt, PromptInputActionMenuProps as m, PromptInputSelectValueProps as mt, PendingToolApproval as n, PromptInputProps as nt, PromptInputActionAddAttachmentsProps as o, PromptInputSelectContent as ot, PromptInputActionMenuItemProps as p, PromptInputSelectValue as pt, PromptInputHoverCard as q, PermissionMode as r, PromptInputProvider as rt, PromptInputActionAddScreenshot as s, PromptInputSelectContentProps as st, AttachmentsContext as t, PromptInputPermissionSelectorProps as tt, PromptInputActionMenuContent as u, PromptInputSelectProps as ut, PromptInputApprovalProps as v, PromptInputTabBody as vt, PromptInputBodyProps as w, PromptInputTabProps as wt, PromptInputAttachments as x, PromptInputTabItemProps as xt, PromptInputAttachment as y, PromptInputTabBodyProps as yt, PromptInputCommandProps as z, useProviderAttachments as zt };

package/dist/ThinkChat-B3wYahor.js

@@ -0,0 +1,190 @@
+import { AgentChat } from "./components/AgentChat.js";
+import { ThinkChatContext, useThinkChatContext } from "./components/ThinkChatContext.js";
+import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/ThinkChatActivity.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAgentChat } from "@cloudflare/think/react";
+import { useAgent } from "agents/react";
+//#region src/components/_internal/think-approvals.ts
+/**
+* Ambient approvals belong to their stub. An explicit different stub may only
+* use approval state and settlement handlers supplied alongside that override.
+*/
+function resolveThinkApprovalProps(overrides, ambient) {
+	const inheritsAmbient = overrides.thinkStub === void 0 || overrides.thinkStub === ambient?.thinkStub;
+	return {
+		thinkStub: overrides.thinkStub ?? ambient?.thinkStub,
+		pendingApprovals: overrides.pendingApprovals ?? (inheritsAmbient ? ambient?.pendingApprovals : void 0),
+		onExecutionSettled: overrides.onExecutionSettled ?? (inheritsAmbient ? ambient?.onExecutionSettled : void 0)
+	};
+}
+//#endregion
+//#region src/components/ThinkChat.tsx
+function toAgentChatStatus(chat) {
+	if (chat.status === "submitted") return "submitted";
+	if (chat.isStreaming || chat.isRecovering) return "streaming";
+	return chat.status ?? "ready";
+}
+function useThinkPendingApprovals(stub, refreshKey) {
+	const requestIdRef = React.useRef(0);
+	const [state, setState] = React.useState(() => ({
+		source: stub,
+		pendingApprovals: []
+	}));
+	const refresh = React.useCallback(async () => {
+		const requestId = ++requestIdRef.current;
+		try {
+			const pendingApprovals = await stub.pendingApprovals();
+			if (requestId !== requestIdRef.current) return;
+			setState({
+				source: stub,
+				pendingApprovals
+			});
+		} catch {
+			if (requestId !== requestIdRef.current) return;
+			setState({
+				source: stub,
+				pendingApprovals: []
+			});
+		}
+	}, [stub]);
+	React.useEffect(() => {
+		requestIdRef.current += 1;
+		setState((current) => current.source === stub ? current : {
+			source: stub,
+			pendingApprovals: []
+		});
+		refresh();
+		return () => {
+			requestIdRef.current += 1;
+		};
+	}, [
+		refresh,
+		refreshKey,
+		stub
+	]);
+	const pendingApprovals = state.source === stub ? state.pendingApprovals : [];
+	return React.useMemo(() => ({
+		pendingApprovals,
+		refreshPendingApprovals: refresh
+	}), [pendingApprovals, refresh]);
+}
+/**
+* Chat UI for Cloudflare Think agents. Provide a `useAgentChat` value (or let
+* `ThinkChat.Root` create one) and `ThinkChat.Messages` renders the message
+* stream with agent work folded into collapsed Activity blocks.
+*/
+function ThinkChatProvider({ chat, children }) {
+	return /* @__PURE__ */ jsx(ThinkChatContext.Provider, {
+		value: chat,
+		children
+	});
+}
+/**
+* Batteries-included root: connects to the named Think agent (upstream's
+* `useAgent` + `useAgentChat`) and provides the live chat to everything
+* inside. If the app already owns the chat hook, use `ThinkChat.Provider`.
+*
+* @example
+* ```tsx
+* <ThinkChat.Root agent="my-agent" name="session-1">
+*   <ThinkChat.Messages />
+* </ThinkChat.Root>
+* ```
+*/
+function ThinkChatRoot({ agent: agentOption, name, children }) {
+	const agent = useAgent(typeof agentOption === "string" ? {
+		agent: agentOption,
+		name
+	} : {
+		...agentOption,
+		name: name ?? agentOption.name
+	});
+	const chat = useAgentChat({ agent });
+	const approvals = useThinkPendingApprovals(agent.stub, `${chat.messages.length}:${chat.status}`);
+	return /* @__PURE__ */ jsx(ThinkChatContext.Provider, {
+		value: chat,
+		children: /* @__PURE__ */ jsx(ThinkChatApprovalsContext.Provider, {
+			value: {
+				...approvals,
+				thinkStub: agent.stub
+			},
+			children
+		})
+	});
+}
+const ThinkChatApprovalsContext = React.createContext(null);
+/**
+* The full conversation surface — message list plus composer — with the
+* activity renderer as the default `renderPart`: runs of reasoning/tool parts
+* fold into one collapsed Activity block with derived labels and per-tool
+* panels. Extend for app-specific tools with `toolRenderers` (label/panel
+* inside the log) or `excludeTools` + your own `renderPart` (standalone
+* card) — see README "App-specific tools" and the Custom Tool Panel story.
+*/
+function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, thinkStub, onExecutionSettled, pendingApprovals, notice, ...props }) {
+	const chat = useThinkChatContext("ThinkChat.Messages");
+	const approvals = React.useContext(ThinkChatApprovalsContext);
+	const status = toAgentChatStatus(chat);
+	const resolvedApprovals = resolveThinkApprovalProps({
+		thinkStub,
+		pendingApprovals,
+		onExecutionSettled
+	}, approvals && {
+		thinkStub: approvals.thinkStub,
+		pendingApprovals: approvals.pendingApprovals,
+		onExecutionSettled: approvals.refreshPendingApprovals
+	});
+	const defaultRenderPart = React.useMemo(() => createThinkChatActivityRenderer({
+		excludeTools,
+		toolRenderers
+	}), [excludeTools, toolRenderers]);
+	const connectionNotice = chat.isRecovering ? /* @__PURE__ */ jsx(Fragment, { children: "Reconnecting to the agent…" }) : chat.connectionError ? /* @__PURE__ */ jsxs("span", {
+		"data-tone": "danger",
+		children: ["Connection lost", chat.connectionError.reason ? ` — ${chat.connectionError.reason}` : ""]
+	}) : void 0;
+	return /* @__PURE__ */ jsx(AgentChat, {
+		...props,
+		renderPart: renderPart ?? defaultRenderPart,
+		messages: chat.messages,
+		status,
+		onStop: chat.stop,
+		onApprovalResponse: chat.addToolApprovalResponse,
+		thinkStub: resolvedApprovals.thinkStub,
+		onExecutionSettled: resolvedApprovals.onExecutionSettled,
+		pendingApprovals: resolvedApprovals.pendingApprovals,
+		notice: notice ?? connectionNotice,
+		onRegenerate: (messageId) => void chat.regenerate({ messageId }),
+		onSubmit: ({ text, files }) => {
+			const trimmed = text.trim();
+			if (trimmed || files.length) chat.sendMessage({
+				text: trimmed,
+				files
+			});
+		}
+	});
+}
+/**
+* The ambient chat value from `ThinkChat.Root`/`Provider` — for custom tool
+* panels, cards, or composer actions that need `messages`, `status`, or
+* `sendMessage`. Throws outside a provider.
+*/
+function useThinkChat() {
+	return useThinkChatContext("useThinkChat");
+}
+/**
+* Namespace entry point. `Root` + `Messages` is the standard surface;
+* `Provider` + `useThinkChat` when the app owns the chat hook; `Activity`,
+* `renderActivityPart`, and `createActivityRenderer` for custom layouts and
+* app-specific tools.
+*/
+const ThinkChat = {
+	Provider: ThinkChatProvider,
+	Root: ThinkChatRoot,
+	Messages: ThinkChatMessages,
+	Activity: ThinkChatActivity,
+	renderActivityPart: renderThinkChatActivityPart,
+	createActivityRenderer: createThinkChatActivityRenderer
+};
+//#endregion
+export { useThinkChat as a, ThinkChatRoot as i, ThinkChatMessages as n, useThinkPendingApprovals as o, ThinkChatProvider as r, resolveThinkApprovalProps as s, ThinkChat as t };

package/dist/{ThinkChatActivity-B2UD95My.d.ts → ThinkChatActivity-F4KFPcJA.d.ts}

@@ -1,5 +1,5 @@
-import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-B9LD_WF1.js";
-import { s as ThinkChatPart } from "./ThinkChatToolParts-DnUiZgCC.js";
+import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-CRmsKg9B.js";
+import { s as ThinkChatPart } from "./ThinkChatToolParts-Cv4o7j6F.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
 
@@ -63,10 +63,10 @@ declare function ThinkChatActivity({
  * 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({
+declare function createThinkChatActivityRenderer<MessageT extends UIMessage = UIMessage>({
   excludeTools,
   toolRenderers
-}?: ThinkChatActivityRendererOptions): NonNullable<AgentChatProps["renderPart"]>;
+}?: ThinkChatActivityRendererOptions): NonNullable<AgentChatProps<MessageT>["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

package/dist/ThinkChatContext-C3Eb1Xpi.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { useAgentChat } from "@cloudflare/think/react";
+import { UIMessage } from "ai";
+
+//#region src/components/ThinkChatContext.d.ts
+/** The complete upstream Think chat hook value, preserving app state and message extensions. */
+type ThinkChatValue<State = unknown, MessageT extends UIMessage = UIMessage> = ReturnType<typeof useAgentChat<State, MessageT>>;
+/**
+ * React contexts cannot bind provider-specific generics. Keep the stored value
+ * opaque and restore the complete upstream hook type through the typed accessors.
+ */
+declare const ThinkChatContext: React.Context<unknown>;
+declare function useOptionalThinkChatContext<State = unknown, MessageT extends UIMessage = UIMessage>(): ThinkChatValue<State, MessageT> | null;
+declare function useThinkChatContext<State = unknown, MessageT extends UIMessage = UIMessage>(component: string): ThinkChatValue<State, MessageT>;
+//#endregion
+export { useThinkChatContext as i, ThinkChatValue as n, useOptionalThinkChatContext as r, ThinkChatContext as t };

package/dist/{ThinkChatToolParts-DnUiZgCC.d.ts → ThinkChatToolParts-Cv4o7j6F.d.ts}

@@ -1,7 +1,7 @@
 import { InferUITools, ToolUIPart, UIMessage } from "ai";
 import { ProxyToolInput, ProxyToolOutput } from "@cloudflare/codemode";
 import { QuickActionExtractInput, QuickActionPage, QuickActionScrapeInput, QuickActionToolName } from "@cloudflare/think/tools/browser";
-import { FetchResult } from "@cloudflare/think/tools/fetch";
+import { FetchResponseMode, FetchResult } from "@cloudflare/think/tools/fetch";
 import { WorkspaceTools } from "@cloudflare/think/tools/workspace";
 
 //#region src/components/ThinkChatToolParts.d.ts
@@ -39,11 +39,19 @@ type SkillUITools = {
 };
 type SkillToolPart = ToolUIPart<SkillUITools>;
 declare function isSkillToolPart(part: ThinkChatPart): part is SkillToolPart;
+type FetchToolInput = {
+  url: string;
+  path?: never;
+  response?: FetchResponseMode;
+  headers?: Record<string, string>;
+} | {
+  path: string;
+  url?: never;
+  response?: FetchResponseMode;
+  headers?: Record<string, string>;
+};
 type FetchToolPart = ToolUIPart<Record<string, {
-  input: {
-    url?: string;
-    path?: string;
-  };
+  input: FetchToolInput;
   output: FetchResult;
 }>>;
 declare function isFetchToolPart(part: ThinkChatPart): part is FetchToolPart;

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as AgentChatRenderPartContext, i as AgentChatRenderMessageContext, n as AgentChatPart, r as AgentChatProps, t as AgentChat } from "../AgentChat-B9LD_WF1.js";
+import { a as AgentChatRenderPartContext, i as AgentChatRenderMessageContext, n as AgentChatPart, r as AgentChatProps, t as AgentChat } from "../AgentChat-CRmsKg9B.js";
 export { AgentChat, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };