@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/components/ThinkChat.js

@@ -1,158 +1,7 @@
-import { AgentChat } from "./AgentChat.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
 import { BrowserReplay } from "./BrowserReplay.js";
-import { ThinkChatContext, useThinkChatContext } from "./ThinkChatContext.js";
 import { isThinkChatActivityPart } from "./ThinkChatToolParts.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, describeThinkChatActivityPart, renderThinkChatActivityPart } from "./ThinkChatActivity.js";
+import { a as useThinkChat, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkPendingApprovals, r as ThinkChatProvider, t as ThinkChat } from "../ThinkChat-7DQ2CogF.js";
 import { WorkspaceExplorer, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.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/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 [pendingApprovals, setPendingApprovals] = React.useState([]);
-	const refresh = React.useCallback(async () => {
-		try {
-			setPendingApprovals(await stub.pendingApprovals());
-		} catch {
-			setPendingApprovals([]);
-		}
-	}, [stub]);
-	React.useEffect(() => {
-		refresh();
-	}, [refresh, refreshKey]);
-	const executionApprovals = React.useMemo(() => ({
-		approve: async (id) => {
-			try {
-				return await stub.approveExecution(id);
-			} finally {
-				refresh();
-			}
-		},
-		reject: async (id, reason) => {
-			try {
-				return await stub.rejectExecution(id, reason);
-			} finally {
-				refresh();
-			}
-		}
-	}), [stub, refresh]);
-	return React.useMemo(() => ({
-		pendingApprovals,
-		executionApprovals
-	}), [pendingApprovals, executionApprovals]);
-}
-/**
-* 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,
-			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, executionApprovals, pendingApprovals, notice, ...props }) {
-	const chat = useThinkChatContext("ThinkChat.Messages");
-	const approvals = React.useContext(ThinkChatApprovalsContext);
-	const status = toAgentChatStatus(chat);
-	const resolvedExecutionApprovals = executionApprovals ?? approvals?.executionApprovals;
-	const resolvedPendingApprovals = pendingApprovals ?? approvals?.pendingApprovals;
-	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,
-		executionApprovals: resolvedExecutionApprovals,
-		pendingApprovals: resolvedPendingApprovals,
-		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 { BrowserLiveView, BrowserReplay, ThinkChat, ThinkChatActivity, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, WorkspaceExplorer, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useThinkPendingApprovals, useWorkspace };

package/dist/components/ThinkChatActivity.d.ts

@@ -1,3 +1,3 @@
-import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-DnUiZgCC.js";
-import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-B2UD95My.js";
+import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-Cv4o7j6F.js";
+import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-Cuk28Js_.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };

package/dist/components/ThinkChatActivity.js

@@ -1,6 +1,7 @@
-import { A as SearchIcon, C as MonitorIcon, E as PencilIcon, F as WarningIcon, I as WrenchIcon, P as TerminalIcon, b as LinkIcon, h as FileIcon, y as InfoIcon } from "../icons-D2Q5n5C1.js";
+import { D as PencilIcon, I as TerminalIcon, L as WarningIcon, R as WrenchIcon, b as LinkIcon, h as FileIcon, j as SearchIcon, w as MonitorIcon, y as InfoIcon } from "../icons-Ba9THQKz.js";
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityText, ActivityTrigger } from "./Activity.js";
-import { ThinkChatContext } from "./ThinkChatContext.js";
+import { t as summarizeToolInput } from "../summarize-tool-input-BUJsENSn.js";
+import { useOptionalThinkChatContext } from "./ThinkChatContext.js";
 import { displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
 import { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel } from "./ThinkChatToolPanels.js";
 import * as React from "react";
@@ -8,14 +9,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { getToolInput, getToolOutput } from "@cloudflare/think/react";
 import { getToolName, isReasoningUIPart, isToolUIPart } from "ai";
 //#region src/components/ThinkChatActivity.tsx
-function summarizeToolInput(input) {
-	if (!input || typeof input !== "object") return null;
-	for (const value of Object.values(input)) if (typeof value === "string" && value.trim()) {
-		const line = value.trim().split("\n", 1)[0] ?? "";
-		return line.length > 64 ? `${line.slice(0, 64)}…` : line;
-	}
-	return null;
-}
 const HTTP_URL_PATTERN = /https?:\/\/[^\s"'<>)}\]]+/i;
 function firstHttpUrl(value) {
 	const text = typeof value === "string" ? value : JSON.stringify(value) ?? "";
@@ -390,7 +383,7 @@ function ThinkChatActivityStep({ text, part, toolRenderers }) {
 	});
 }
 function ThinkChatActivityGroup({ message, parts, isTrailing, toolRenderers }) {
-	const chat = React.useContext(ThinkChatContext);
+	const chat = useOptionalThinkChatContext();
 	const chatStillWorking = isTrailing && Boolean(chat?.isStreaming) && chat?.messages.at(-1)?.id === message.id;
 	return /* @__PURE__ */ jsx(ThinkChatActivity, {
 		parts,

package/dist/components/ThinkChatContext.d.ts

@@ -1,2 +1,2 @@
-import { n as ThinkChatValue, r as useThinkChatContext, t as ThinkChatContext } from "../ThinkChatContext-BLAAb8J5.js";
-export { ThinkChatContext, ThinkChatValue, useThinkChatContext };
+import { i as useThinkChatContext, n as ThinkChatValue, r as useOptionalThinkChatContext, t as ThinkChatContext } from "../ThinkChatContext-C3Eb1Xpi.js";
+export { ThinkChatContext, ThinkChatValue, useOptionalThinkChatContext, useThinkChatContext };

package/dist/components/ThinkChatContext.js

@@ -1,10 +1,17 @@
 import * as React from "react";
 //#region src/components/ThinkChatContext.ts
+/**
+* React contexts cannot bind provider-specific generics. Keep the stored value
+* opaque and restore the complete upstream hook type through the typed accessors.
+*/
 const ThinkChatContext = React.createContext(null);
+function useOptionalThinkChatContext() {
+	return React.useContext(ThinkChatContext);
+}
 function useThinkChatContext(component) {
-	const context = React.useContext(ThinkChatContext);
+	const context = useOptionalThinkChatContext();
 	if (!context) throw new Error(`${component} must be used inside <ThinkChat.Provider> or <ThinkChat.Root>.`);
 	return context;
 }
 //#endregion
-export { ThinkChatContext, useThinkChatContext };
+export { ThinkChatContext, useOptionalThinkChatContext, useThinkChatContext };

package/dist/components/ThinkChatToolPanels.d.ts

@@ -1,4 +1,4 @@
-import { i as SkillToolPart, l as WorkspaceToolPart, n as ExecuteToolPart, r as FetchToolPart, t as BrowserToolPart } from "../ThinkChatToolParts-DnUiZgCC.js";
+import { i as SkillToolPart, l as WorkspaceToolPart, n as ExecuteToolPart, r as FetchToolPart, t as BrowserToolPart } from "../ThinkChatToolParts-Cv4o7j6F.js";
 import * as React from "react";
 
 //#region src/components/ThinkChatToolPanels.d.ts

package/dist/components/ThinkChatToolPanels.js

@@ -1,6 +1,6 @@
 import { ActivityOutput, ActivityPanel } from "./Activity.js";
-import { Tab, TabPanel, Tabs, TabsList } from "./Tabs.js";
-import { t as CodeBlock } from "../CodeBlock-XNQOupQ3.js";
+import { Tabs } from "./Tabs.js";
+import { t as CodeBlock } from "../CodeBlock-BUFXG8HW.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
 import { displayUrl } from "./ThinkChatToolParts.js";
 import * as React from "react";
@@ -176,13 +176,22 @@ function ThinkChatFetchPanel({ part }) {
 		status: `${output.status} · ${output.bytes} bytes${output.truncated ? " (truncated)" : ""}`
 	});
 }
+function isBrowserLiveViewUrl(value) {
+	if (!value || typeof value !== "object") return false;
+	const source = value;
+	if (typeof source.url !== "string" || typeof source.targetId !== "string" || typeof source.expiresInMs !== "number" || !Number.isFinite(source.expiresInMs)) return false;
+	try {
+		return new URL(source.url).origin === "https://live.browser.run";
+	} catch {
+		return false;
+	}
+}
 function findBrowserResultMedia(value, depth = 0) {
 	const media = {};
 	const visit = (node, level) => {
 		if (level > 4 || node === null) return;
 		if (typeof node === "string") {
-			if (!media.liveViewUrl && node.includes("live.browser.run")) media.liveViewUrl = node;
-			else if (!media.screenshot && node.startsWith("data:image/")) media.screenshot = node;
+			if (!media.screenshot && node.startsWith("data:image/")) media.screenshot = node;
 			return;
 		}
 		if (Array.isArray(node)) {
@@ -190,8 +199,11 @@ function findBrowserResultMedia(value, depth = 0) {
 			return;
 		}
 		if (typeof node === "object") {
+			if (!media.liveView && isBrowserLiveViewUrl(node)) {
+				media.liveView = node;
+				return;
+			}
 			const record = node;
-			if (media.expiresInMs === void 0 && typeof record.url === "string" && typeof record.expiresInMs === "number") media.expiresInMs = record.expiresInMs;
 			for (const item of Object.values(record)) visit(item, level + 1);
 		}
 	};
@@ -255,10 +267,10 @@ function ThinkChatBrowserPanel({ part }) {
 		const output = part.state === "output-available" ? part.output : void 0;
 		const code = part.input?.code ?? "";
 		const media = output?.status === "completed" ? findBrowserResultMedia(output.result) : {};
-		const hasMedia = Boolean(media.liveViewUrl || media.screenshot);
-		const browserView = media.liveViewUrl ? /* @__PURE__ */ jsx(BrowserLiveView, {
-			url: media.liveViewUrl,
-			expiresAt: seenAt + (media.expiresInMs ?? 300 * 1e3),
+		const hasMedia = Boolean(media.liveView || media.screenshot);
+		const browserView = media.liveView ? /* @__PURE__ */ jsx(BrowserLiveView, {
+			source: media.liveView,
+			receivedAt: seenAt,
 			fallback: media.screenshot ? /* @__PURE__ */ jsx("img", {
 				src: media.screenshot,
 				alt: "Last browser state"
@@ -277,25 +289,25 @@ function ThinkChatBrowserPanel({ part }) {
 			label: "Browser",
 			status: executeStatusText(output),
 			error: output?.status === "error",
-			children: browserView && code ? /* @__PURE__ */ jsxs(Tabs, {
+			children: browserView && code ? /* @__PURE__ */ jsxs(Tabs.Root, {
 				className: "activity__browser-tabs",
 				defaultValue: "browser",
 				children: [
-					/* @__PURE__ */ jsxs(TabsList, {
+					/* @__PURE__ */ jsxs(Tabs.List, {
 						variant: "line",
-						children: [/* @__PURE__ */ jsx(Tab, {
+						children: [/* @__PURE__ */ jsx(Tabs.Tab, {
 							value: "browser",
 							children: "Preview"
-						}), /* @__PURE__ */ jsx(Tab, {
+						}), /* @__PURE__ */ jsx(Tabs.Tab, {
 							value: "code",
 							children: "Code"
 						})]
 					}),
-					/* @__PURE__ */ jsx(TabPanel, {
+					/* @__PURE__ */ jsx(Tabs.Panel, {
 						value: "browser",
 						children: browserView
 					}),
-					/* @__PURE__ */ jsx(TabPanel, {
+					/* @__PURE__ */ jsx(Tabs.Panel, {
 						value: "code",
 						children: codeView
 					})

package/dist/components/ThinkChatToolParts.d.ts

@@ -1,2 +1,2 @@
-import { _ as isThinkChatActivityPart, a as ThinkBashToolOutput, c as ThinkWorkspaceToolName, d as isBrowserToolPart, f as isExecuteToolPart, g as isSkillToolPart, h as isPartWorking, i as SkillToolPart, l as WorkspaceToolPart, m as isPartFailed, n as ExecuteToolPart, o as ThinkBashToolPart, p as isFetchToolPart, r as FetchToolPart, s as ThinkChatPart, t as BrowserToolPart, u as displayUrl, v as isWorkspaceToolPart } from "../ThinkChatToolParts-DnUiZgCC.js";
+import { _ as isThinkChatActivityPart, a as ThinkBashToolOutput, c as ThinkWorkspaceToolName, d as isBrowserToolPart, f as isExecuteToolPart, g as isSkillToolPart, h as isPartWorking, i as SkillToolPart, l as WorkspaceToolPart, m as isPartFailed, n as ExecuteToolPart, o as ThinkBashToolPart, p as isFetchToolPart, r as FetchToolPart, s as ThinkChatPart, t as BrowserToolPart, u as displayUrl, v as isWorkspaceToolPart } from "../ThinkChatToolParts-Cv4o7j6F.js";
 export { BrowserToolPart, ExecuteToolPart, FetchToolPart, SkillToolPart, ThinkBashToolOutput, ThinkBashToolPart, ThinkChatPart, ThinkWorkspaceToolName, WorkspaceToolPart, displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart };

package/dist/components/ThinkExecutionWorkbench.d.ts

@@ -3,16 +3,19 @@ import { Think } from "@cloudflare/think";
 import { AgentStub } from "agents/client";
 
 //#region src/components/ThinkExecutionWorkbench.d.ts
-type ThinkExecutionAgent<State = unknown> = Think<object, State>;
-type ThinkExecutionWorkbenchSource<State = unknown> = AgentStub<ThinkExecutionAgent<State>>;
-interface ThinkExecutionWorkbenchProps<State = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+interface ThinkExecutionWorkbenchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   /** Agents SDK client stub for a Think agent; this UI calls native submission/workflow methods. */
-  source: ThinkExecutionWorkbenchSource<State>;
+  source: AgentStub<Think>;
   title?: React.ReactNode;
   backButton?: React.ReactNode;
   pageSize?: number;
 }
-declare function ThinkExecutionWorkbench<State = unknown>({
+/**
+ * Unified execution history for native Think submissions and Agents workflows.
+ * The workbench reads and acts through the whole upstream agent stub; it does
+ * not normalize execution records or own workflow authoring.
+ */
+declare function ThinkExecutionWorkbench({
   backButton,
   className,
   pageSize,
@@ -20,8 +23,8 @@ declare function ThinkExecutionWorkbench<State = unknown>({
   source,
   title,
   ...props
-}: ThinkExecutionWorkbenchProps<State> & {
+}: ThinkExecutionWorkbenchProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ThinkExecutionAgent, ThinkExecutionWorkbench, ThinkExecutionWorkbenchProps, ThinkExecutionWorkbenchSource };
+export { ThinkExecutionWorkbench, ThinkExecutionWorkbenchProps };