@mcp-b/react-components 0.11.0 → 0.12.0

package/dist/components/PromptInput.js

@@ -12,16 +12,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getToolApproval, getToolInput, getToolOutput } from "@cloudflare/think/react";
 import { getToolName, isToolUIPart } from "ai";
 //#region src/components/PromptInput.tsx
-const PromptInputContext = React.createContext(null);
 const PromptInputController = React.createContext(null);
-const ProviderAttachmentsContext = React.createContext(null);
 const LocalAttachmentsContext = React.createContext(null);
-const LocalReferencedSourcesContext = React.createContext(null);
-function usePromptInputContext(component) {
-	const ctx = React.useContext(PromptInputContext);
-	if (!ctx) throw new Error(`${component} must be used inside a <PromptInput>.`);
-	return ctx;
-}
 function usePromptInputController() {
 	const ctx = React.useContext(PromptInputController);
 	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use usePromptInputController().");
@@ -31,24 +23,16 @@ function useOptionalPromptInputController() {
 	return React.useContext(PromptInputController);
 }
 function useProviderAttachments() {
-	const ctx = React.useContext(ProviderAttachmentsContext);
-	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use useProviderAttachments().");
-	return ctx;
-}
-function useOptionalProviderAttachments() {
-	return React.useContext(ProviderAttachmentsContext);
+	const controller = useOptionalPromptInputController();
+	if (!controller) throw new Error("Wrap your component inside <PromptInputProvider> to use useProviderAttachments().");
+	return controller.attachments;
 }
 function usePromptInputAttachments() {
-	const provider = useOptionalProviderAttachments();
-	const context = React.useContext(LocalAttachmentsContext) ?? provider;
+	const controller = useOptionalPromptInputController();
+	const context = React.useContext(LocalAttachmentsContext) ?? controller?.attachments;
 	if (!context) throw new Error("usePromptInputAttachments must be used within a PromptInput or PromptInputProvider.");
 	return context;
 }
-function usePromptInputReferencedSources() {
-	const ctx = React.useContext(LocalReferencedSourcesContext);
-	if (!ctx) throw new Error("usePromptInputReferencedSources must be used within a PromptInput.");
-	return ctx;
-}
 function PromptInputProvider({ initialInput = "", children }) {
 	const [textInput, setTextInput] = React.useState(initialInput);
 	const [attachmentFiles, setAttachmentFiles] = React.useState([]);
@@ -103,10 +87,7 @@ function PromptInputProvider({ initialInput = "", children }) {
 	}), [attachments, textInput]);
 	return /* @__PURE__ */ jsx(PromptInputController.Provider, {
 		value: controller,
-		children: /* @__PURE__ */ jsx(ProviderAttachmentsContext.Provider, {
-			value: attachments,
-			children
-		})
+		children
 	});
 }
 /**
@@ -116,8 +97,8 @@ function PromptInputProvider({ initialInput = "", children }) {
 *
 * 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
@@ -140,15 +121,12 @@ function PromptInputProvider({ initialInput = "", children }) {
 *
 * @see {@link https://elements.ai-sdk.dev/components/prompt-input | AI Elements Prompt Input}
 */
-function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, id, ref, ...props }) {
-	const generatedId = React.useId();
-	const formId = id ?? generatedId;
+function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ref, ...props }) {
 	const controller = useOptionalPromptInputController();
 	const usingProvider = Boolean(controller);
 	const formRef = React.useRef(null);
 	const inputRef = React.useRef(null);
 	const [localFiles, setLocalFiles] = React.useState([]);
-	const [referencedSources, setReferencedSources] = React.useState([]);
 	const files = controller?.attachments.files ?? localFiles;
 	const filesRef = React.useRef(files);
 	filesRef.current = files;
@@ -215,11 +193,6 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 			return [];
 		});
 	}, [controller]);
-	const clearReferencedSources = React.useCallback(() => setReferencedSources([]), []);
-	const clear = React.useCallback(() => {
-		clearAttachments();
-		clearReferencedSources();
-	}, [clearAttachments, clearReferencedSources]);
 	const openFileDialog = React.useCallback(() => inputRef.current?.click(), []);
 	React.useEffect(() => {
 		if (!controller) return;
@@ -261,25 +234,6 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 		openFileDialog,
 		remove
 	]);
-	const referencedSourcesCtx = React.useMemo(() => ({
-		add: (incoming) => {
-			const array = Array.isArray(incoming) ? incoming : [incoming];
-			setReferencedSources((prev) => [...prev, ...array.map((source) => ({
-				...source,
-				id: source.id ?? createId()
-			}))]);
-		},
-		clear: clearReferencedSources,
-		remove: (sourceId) => setReferencedSources((prev) => prev.filter((source) => source.id !== sourceId)),
-		sources: referencedSources
-	}), [clearReferencedSources, referencedSources]);
-	const submit = React.useCallback(() => {
-		formRef.current?.requestSubmit();
-	}, []);
-	const ctx = React.useMemo(() => ({
-		formId,
-		submit
-	}), [formId, submit]);
 	const handleSubmit = React.useCallback(async (event) => {
 		event.preventDefault();
 		const textarea = event.currentTarget.querySelector("textarea[data-prompt-input-textarea=\"true\"]");
@@ -295,42 +249,35 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 				textarea.dispatchEvent(new Event("input", { bubbles: true }));
 			}
 			controller?.textInput.clear();
-			clear();
+			clearAttachments();
 		} catch {}
 	}, [
-		clear,
+		clearAttachments,
 		controller,
 		files,
 		onSubmit
 	]);
-	return /* @__PURE__ */ jsx(PromptInputContext.Provider, {
-		value: ctx,
-		children: /* @__PURE__ */ jsx(LocalAttachmentsContext.Provider, {
-			value: attachmentsCtx,
-			children: /* @__PURE__ */ jsxs(LocalReferencedSourcesContext.Provider, {
-				value: referencedSourcesCtx,
-				children: [/* @__PURE__ */ jsx("input", {
-					ref: inputRef,
-					accept,
-					"aria-label": "Upload files",
-					className: "prompt-input__file-input",
-					multiple,
-					onChange: (event) => {
-						if (event.currentTarget.files?.length) add(event.currentTarget.files);
-						event.currentTarget.value = "";
-					},
-					tabIndex: -1,
-					type: "file"
-				}), /* @__PURE__ */ jsx("form", {
-					ref: formRef,
-					id: formId,
-					className: cx("prompt-input", className),
-					onSubmit: handleSubmit,
-					...props,
-					children
-				})]
-			})
-		})
+	return /* @__PURE__ */ jsxs(LocalAttachmentsContext.Provider, {
+		value: attachmentsCtx,
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			accept,
+			"aria-label": "Upload files",
+			className: "prompt-input__file-input",
+			multiple,
+			onChange: (event) => {
+				if (event.currentTarget.files?.length) add(event.currentTarget.files);
+				event.currentTarget.value = "";
+			},
+			tabIndex: -1,
+			type: "file"
+		}), /* @__PURE__ */ jsx("form", {
+			ref: formRef,
+			className: cx("prompt-input", className),
+			onSubmit: handleSubmit,
+			...props,
+			children
+		})]
 	});
 }
 function PromptInputHeader({ className, children, ref, ...props }) {
@@ -421,7 +368,6 @@ function PromptInputTools({ className, children, ref, ...props }) {
 const MIN_TEXTAREA_HEIGHT_PX = 24;
 const MAX_TEXTAREA_HEIGHT_PX = 240;
 function PromptInputTextarea({ className, placeholder = "How can I help?", rows = 1, minHeight = MIN_TEXTAREA_HEIGHT_PX, maxHeight = MAX_TEXTAREA_HEIGHT_PX, onChange, onCompositionEnd, onCompositionStart, onKeyDown, onInput, onPaste, ref, ...props }) {
-	const { submit } = usePromptInputContext("PromptInputTextarea");
 	const controller = useOptionalPromptInputController();
 	const attachments = usePromptInputAttachments();
 	const innerRef = React.useRef(null);
@@ -470,7 +416,7 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 			if (event.defaultPrevented) return;
 			if (event.key === "Enter" && !event.shiftKey && !isComposing && !event.nativeEvent.isComposing) {
 				event.preventDefault();
-				submit();
+				event.currentTarget.form?.requestSubmit();
 			}
 			if (event.key === "Backspace" && event.currentTarget.value === "" && attachments.files.length > 0) {
 				event.preventDefault();
@@ -532,14 +478,18 @@ function PromptInputActionMenu(props) {
 	return /* @__PURE__ */ jsx(MenuRoot, { ...props });
 }
 function PromptInputActionMenuTrigger({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(PromptInputButton, {
-		className,
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
-	}) });
+	return /* @__PURE__ */ jsx(MenuTrigger, {
+		unstyled: true,
+		render: /* @__PURE__ */ jsx(PromptInputButton, {
+			className: cx("prompt-input__action-menu-trigger", className),
+			...props,
+			children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+		})
+	});
 }
-function PromptInputActionMenuContent({ className, children, ...props }) {
+function PromptInputActionMenuContent({ className, children, tabIndex = 0, ...props }) {
 	return /* @__PURE__ */ jsx(MenuContent, {
+		tabIndex,
 		className: cx("prompt-input__action-menu", className),
 		...props,
 		children
@@ -702,7 +652,7 @@ function formatApprovalValue(value) {
 * sends the text as the native approval `reason`. Submit (or Enter) sends the
 * current selection — approve by default.
 */
-function PromptInputApproval({ part, approval: durableApproval, onRespond, executionApprovals, onSkip, question, count, className, ref, ...props }) {
+function PromptInputApproval({ part, approval: durableApproval, onRespond, thinkStub, onExecutionSettled, onSkip, question, count, className, ref, ...props }) {
 	const [selected, setSelected] = React.useState("approve");
 	const [reason, setReason] = React.useState("");
 	const [busy, setBusy] = React.useState(false);
@@ -717,7 +667,7 @@ function PromptInputApproval({ part, approval: durableApproval, onRespond, execu
 		setBusy(false);
 	}, [approvalId]);
 	if (!part && !durableApproval) return null;
-	if (approval ? !onRespond : !(executionApprovals && (paused || durableApproval))) return null;
+	if (approval ? !onRespond : !(thinkStub && (paused || durableApproval))) return null;
 	const toolName = durableApproval?.descriptor.action ?? (part ? getToolName(part) : "action");
 	const respond = async (approved) => {
 		if (busy) return;
@@ -730,10 +680,11 @@ function PromptInputApproval({ part, approval: durableApproval, onRespond, execu
 				approved,
 				reason: denyReason
 			});
-			else if (paused) await (approved ? executionApprovals?.approve(paused.executionId) : executionApprovals?.reject(paused.executionId, denyReason));
-			else if (durableApproval) await (approved ? executionApprovals?.approve(durableApproval.executionId) : executionApprovals?.reject(durableApproval.executionId, denyReason));
+			else if (paused && thinkStub) await (approved ? thinkStub.approveExecution(paused.executionId) : thinkStub.rejectExecution(paused.executionId, denyReason));
+			else if (durableApproval && thinkStub) await (approved ? thinkStub.approveExecution(durableApproval.executionId) : thinkStub.rejectExecution(durableApproval.executionId, denyReason));
 		} finally {
 			setBusy(false);
+			if (!approval) onExecutionSettled?.();
 		}
 	};
 	const submit = () => void respond(selected === "approve");
@@ -1066,4 +1017,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

package/dist/components/Queue.d.ts

@@ -4,17 +4,6 @@ import { ScrollAreaRootProps } from "./ScrollArea.js";
 import * as React from "react";
 
 //#region src/components/Queue.d.ts
-interface QueueMessagePart {
-  type: string;
-  text?: string;
-  url?: string;
-  filename?: string;
-  mediaType?: string;
-}
-interface QueueMessage {
-  id: string;
-  parts: QueueMessagePart[];
-}
 interface QueueTodo {
   id: string;
   title: string;
@@ -238,4 +227,4 @@ declare function QueueItemFile({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { Queue, QueueItem, QueueItemAction, QueueItemActionProps, QueueItemActions, QueueItemActionsProps, QueueItemAttachment, QueueItemAttachmentProps, QueueItemContent, QueueItemContentProps, QueueItemDescription, QueueItemDescriptionProps, QueueItemFile, QueueItemFileProps, QueueItemImage, QueueItemImageProps, QueueItemIndicator, QueueItemIndicatorProps, QueueItemProps, QueueItemStatus, QueueList, QueueListProps, QueueMessage, QueueMessagePart, QueueProps, QueueSection, QueueSectionContent, QueueSectionContentProps, QueueSectionLabel, QueueSectionLabelProps, QueueSectionProps, QueueSectionTrigger, QueueSectionTriggerProps, QueueTodo };
+export { Queue, QueueItem, QueueItemAction, QueueItemActionProps, QueueItemActions, QueueItemActionsProps, QueueItemAttachment, QueueItemAttachmentProps, QueueItemContent, QueueItemContentProps, QueueItemDescription, QueueItemDescriptionProps, QueueItemFile, QueueItemFileProps, QueueItemImage, QueueItemImageProps, QueueItemIndicator, QueueItemIndicatorProps, QueueItemProps, QueueItemStatus, QueueList, QueueListProps, QueueProps, QueueSection, QueueSectionContent, QueueSectionContentProps, QueueSectionLabel, QueueSectionLabelProps, QueueSectionProps, QueueSectionTrigger, QueueSectionTriggerProps, QueueTodo };

package/dist/components/Reasoning.js

@@ -1,13 +1,9 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
 import { c as ChevronRightIcon } from "../icons-D2Q5n5C1.js";
+import { MessageResponse } from "./Message.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
-import { Streamdown } from "streamdown";
 //#region src/components/Reasoning.tsx
 const ReasoningContext = React.createContext(null);
 const AUTO_CLOSE_DELAY_MS = 1e3;
@@ -150,12 +146,6 @@ function ReasoningTrigger({ className, children, getThinkingMessage = defaultGet
 		})]
 	});
 }
-const streamdownPlugins = {
-	cjk,
-	code,
-	math,
-	mermaid
-};
 /**
 * The reasoning text panel. Accepts any React node but is optimized for
 * long-form text; a muted left border visually distinguishes the block.
@@ -168,10 +158,7 @@ function ReasoningContent({ className, children, ref, ...props }) {
 		unstyled: true,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "reasoning__text",
-			children: typeof children === "string" ? /* @__PURE__ */ jsx(Streamdown, {
-				plugins: streamdownPlugins,
-				children
-			}) : children
+			children: typeof children === "string" ? /* @__PURE__ */ jsx(MessageResponse, { children }) : children
 		})
 	});
 }

package/dist/components/Stepper.js

@@ -1,5 +1,6 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
 import { M as SpinnerIcon, a as CheckIcon } from "../icons-D2Q5n5C1.js";
+import { t as assignRef } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Stepper.tsx
@@ -304,12 +305,5 @@ function getIndicatorContent({ children, indicators, isLoading, state, step }) {
 	if (state === "completed") return /* @__PURE__ */ jsx(CheckIcon, {});
 	return step;
 }
-function assignRef(ref, value) {
-	if (typeof ref === "function") {
-		ref(value);
-		return;
-	}
-	if (ref) ref.current = value;
-}
 //#endregion
 export { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTitle, StepperTrigger, useStepItem, useStepper };

package/dist/components/ThinkChat.d.ts

@@ -1,10 +1,9 @@
-import { n as ExecutionApprovals } from "../PromptInput-D6-G24p7.js";
-import { a as AgentChatRenderPartContext, r as AgentChatProps } from "../AgentChat-B9LD_WF1.js";
-import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-ZktFZiMD.js";
-import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-6G-mnwcn.js";
-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 { n as ThinkChatValue } from "../ThinkChatContext-BLAAb8J5.js";
+import { a as AgentChatRenderPartContext, r as AgentChatProps } from "../AgentChat-CRmsKg9B.js";
+import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-BV5qgFgI.js";
+import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-xWvRjRAC.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-F4KFPcJA.js";
+import { n as ThinkChatValue } from "../ThinkChatContext-C3Eb1Xpi.js";
 import { FileInfo, UseWorkspaceOptions, WorkspaceExplorer, WorkspaceExplorerProps, WorkspaceFileState, WorkspaceInfo, WorkspaceSource, WorkspaceState, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";
 import * as React from "react";
 import { UIMessage } from "ai";
@@ -13,11 +12,9 @@ import { PendingApproval, Think } from "@cloudflare/think";
 import { AgentStub } from "agents/client";
 
 //#region src/components/ThinkChat.d.ts
-type ThinkAgent<State> = Think<object, State>;
-type ThinkApprovalStub<State = unknown> = AgentStub<ThinkAgent<State>>;
-interface ThinkChatProviderProps {
+interface ThinkChatProviderProps<State = unknown, MessageT extends UIMessage = UIMessage> {
   /** The `useAgentChat` value from `@cloudflare/think/react` that descendants read. */
-  chat: ThinkChatValue;
+  chat: ThinkChatValue<State, MessageT>;
   children: React.ReactNode;
 }
 interface ThinkChatRootProps<State = unknown> {
@@ -27,7 +24,7 @@ interface ThinkChatRootProps<State = unknown> {
   name?: string;
   children: React.ReactNode;
 }
-interface ThinkChatMessagesProps extends ThinkChatActivityRendererOptions {
+interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends ThinkChatActivityRendererOptions {
   className?: string;
   /** Disable the composer (e.g. while the agent is unreachable). */
   disabled?: boolean;
@@ -36,42 +33,44 @@ interface ThinkChatMessagesProps extends ThinkChatActivityRendererOptions {
   /** Extra controls rendered inside the composer, next to the send button. */
   composerTools?: React.ReactNode;
   /** Extra rows rendered in the built-in plus menu after files. */
-  composerAddMenuItems?: AgentChatProps["composerAddMenuItems"];
+  composerAddMenuItems?: AgentChatProps<MessageT>["composerAddMenuItems"];
   /** Composer placeholder text. */
   placeholder?: string;
   /** Rendered after each message (e.g. per-message actions). */
-  renderMessageAfter?: AgentChatProps["renderMessageAfter"];
+  renderMessageAfter?: AgentChatProps<MessageT>["renderMessageAfter"];
   /**
    * Overrides the built-in connection notice (derived from the hook's
    * `isRecovering`/`connectionError`) shown between transcript and composer.
    */
-  notice?: AgentChatProps["notice"];
+  notice?: AgentChatProps<MessageT>["notice"];
   /** Full replacement for part rendering; wins over excludeTools/toolRenderers. */
-  renderPart?: AgentChatProps["renderPart"];
-  /** Resolves Think execution approvals. `ThinkChat.Root` wires this automatically. */
-  executionApprovals?: ExecutionApprovals;
+  renderPart?: AgentChatProps<MessageT>["renderPart"];
+  /** Whole upstream Think stub. `ThinkChat.Root` wires `agent.stub` automatically. */
+  thinkStub?: AgentStub<Think>;
+  /** Called after a Think approve/reject RPC settles. Root uses this to refresh approvals. */
+  onExecutionSettled?: AgentChatProps<MessageT>["onExecutionSettled"];
   /** Think durable-pause approvals from `pendingApprovals()`. */
-  pendingApprovals?: AgentChatProps["pendingApprovals"];
+  pendingApprovals?: AgentChatProps<MessageT>["pendingApprovals"];
   /**
    * Shows a Context ring in the composer footer — how much of the model's
    * window the conversation occupies, from `metadata.usage` on the newest
    * message that reports it.
    */
-  contextWindow?: AgentChatProps["contextWindow"];
+  contextWindow?: AgentChatProps<MessageT>["contextWindow"];
 }
-declare function useThinkPendingApprovals(stub: ThinkApprovalStub, refreshKey: unknown): {
+declare function useThinkPendingApprovals(stub: AgentStub<Think>, refreshKey: unknown): {
   pendingApprovals: readonly PendingApproval[];
-  executionApprovals: ExecutionApprovals;
+  refreshPendingApprovals: () => Promise<void>;
 };
 /**
  * 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.
  */
-declare function ThinkChatProvider({
+declare function ThinkChatProvider<State = unknown, MessageT extends UIMessage = UIMessage>({
   chat,
   children
-}: ThinkChatProviderProps): React.JSX.Element;
+}: ThinkChatProviderProps<State, MessageT>): React.JSX.Element;
 /**
  * Batteries-included root: connects to the named Think agent (upstream's
  * `useAgent` + `useAgentChat`) and provides the live chat to everything
@@ -84,7 +83,7 @@ declare function ThinkChatProvider({
  * </ThinkChat.Root>
  * ```
  */
-declare function ThinkChatRoot<State = unknown>({
+declare function ThinkChatRoot<State = unknown, MessageT extends UIMessage = UIMessage>({
   agent: agentOption,
   name,
   children
@@ -97,21 +96,22 @@ declare function ThinkChatRoot<State = unknown>({
  * inside the log) or `excludeTools` + your own `renderPart` (standalone
  * card) — see README "App-specific tools" and the Custom Tool Panel story.
  */
-declare function ThinkChatMessages({
+declare function ThinkChatMessages<State = unknown, MessageT extends UIMessage = UIMessage>({
   renderPart,
   excludeTools,
   toolRenderers,
-  executionApprovals,
+  thinkStub,
+  onExecutionSettled,
   pendingApprovals,
   notice,
   ...props
-}: ThinkChatMessagesProps): React.JSX.Element;
+}: ThinkChatMessagesProps<MessageT>): React.JSX.Element;
 /**
  * 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.
  */
-declare function useThinkChat(): Omit<import("@ai-sdk/react").UseChatHelpers<UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>, "addToolOutput"> & {
+declare function useThinkChat<State = unknown, MessageT extends UIMessage = UIMessage>(): Omit<import("@ai-sdk/react").UseChatHelpers<MessageT>, "addToolOutput"> & {
   clearHistory: () => void;
   addToolOutput: (opts: {
     toolCallId: string;
@@ -145,4 +145,4 @@ declare const ThinkChat: {
   createActivityRenderer: typeof createThinkChatActivityRenderer;
 };
 //#endregion
-export { BrowserLiveView, type BrowserLiveViewProps, BrowserReplay, type BrowserReplayProps, type ExecutionApprovals, type FileInfo, ThinkApprovalStub, ThinkChat, ThinkChatActivity, type ThinkChatActivityProps, type ThinkChatActivityRendererOptions, ThinkChatMessages, ThinkChatMessagesProps, ThinkChatProvider, ThinkChatProviderProps, ThinkChatRoot, ThinkChatRootProps, type ThinkChatToolRenderer, type ThinkChatToolRenderers, type UseWorkspaceOptions, WorkspaceExplorer, type WorkspaceExplorerProps, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceSource, type WorkspaceState, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useThinkPendingApprovals, useWorkspace };
+export { BrowserLiveView, type BrowserLiveViewProps, BrowserReplay, type BrowserReplayProps, type FileInfo, ThinkChat, ThinkChatActivity, type ThinkChatActivityProps, type ThinkChatActivityRendererOptions, ThinkChatMessages, ThinkChatMessagesProps, ThinkChatProvider, ThinkChatProviderProps, ThinkChatRoot, ThinkChatRootProps, type ThinkChatToolRenderer, type ThinkChatToolRenderers, type UseWorkspaceOptions, WorkspaceExplorer, type WorkspaceExplorerProps, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceSource, type WorkspaceState, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useThinkPendingApprovals, useWorkspace };

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-B3wYahor.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 };