@copilotkitnext/react 1.52.0-next.6 → 1.52.0-next.7

package/dist/index.umd.js

@@ -1798,6 +1798,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			_defineProperty(this, "_renderToolCalls", []);
 			_defineProperty(this, "_renderCustomMessages", []);
 			_defineProperty(this, "_renderActivityMessages", []);
+			_defineProperty(this, "_interruptElement", null);
 			this._renderToolCalls = (_config$renderToolCal = config.renderToolCalls) !== null && _config$renderToolCal !== void 0 ? _config$renderToolCal : [];
 			this._renderCustomMessages = (_config$renderCustomM = config.renderCustomMessages) !== null && _config$renderCustomM !== void 0 ? _config$renderCustomM : [];
 			this._renderActivityMessages = (_config$renderActivit = config.renderActivityMessages) !== null && _config$renderActivit !== void 0 ? _config$renderActivit : [];
@@ -1821,6 +1822,20 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				});
 			}, "Subscriber onRenderToolCallsChanged error:");
 		}
+		get interruptElement() {
+			return this._interruptElement;
+		}
+		setInterruptElement(element) {
+			this._interruptElement = element;
+			this.notifySubscribers((subscriber) => {
+				var _reactSubscriber$onIn;
+				const reactSubscriber = subscriber;
+				(_reactSubscriber$onIn = reactSubscriber.onInterruptElementChanged) === null || _reactSubscriber$onIn === void 0 || _reactSubscriber$onIn.call(reactSubscriber, {
+					copilotkit: this,
+					interruptElement: this._interruptElement
+				});
+			}, "Subscriber onInterruptElementChanged error:");
+		}
 		subscribe(subscriber) {
 			return super.subscribe(subscriber);
 		}
@@ -2956,6 +2971,170 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 	}
 
+//#endregion
+//#region src/hooks/use-interrupt.tsx
+	const INTERRUPT_EVENT_NAME = "on_interrupt";
+	function isPromiseLike(value) {
+		return (typeof value === "object" || typeof value === "function") && value !== null && typeof Reflect.get(value, "then") === "function";
+	}
+	/**
+	* Handles agent interrupts (`on_interrupt`) with optional filtering, preprocessing, and resume behavior.
+	*
+	* The hook listens to custom events on the active agent, stores interrupt payloads per run,
+	* and surfaces a render callback once the run finalizes. Call `resolve` from your UI to resume
+	* execution with user-provided data.
+	*
+	* - `renderInChat: true` (default): the element is published into `<CopilotChat>` and this hook returns `void`.
+	* - `renderInChat: false`: the hook returns the interrupt element so you can place it anywhere in your component tree.
+	*
+	* `event.value` is typed as `any` since the interrupt payload shape depends on your agent.
+	* Type-narrow it in your callbacks (e.g. `handler`, `enabled`, `render`) as needed.
+	*
+	* @typeParam TResult - Inferred from `handler` return type. Exposed as `result` in `render`.
+	* @param config - Interrupt configuration (renderer, optional handler/filter, and render mode).
+	* @returns When `renderInChat` is `false`, returns the interrupt element (or `null` when idle).
+	* Otherwise returns `void` and publishes the element into chat. In `render`, `result` is always
+	* either the handler's resolved return value or `null` (including when no handler is provided,
+	* when filtering skips the interrupt, or when handler execution fails).
+	*
+	* @example
+	* ```tsx
+	* import { useInterrupt } from "@copilotkitnext/react";
+	*
+	* function InterruptUI() {
+	*   useInterrupt({
+	*     render: ({ event, resolve }) => (
+	*       <div>
+	*         <p>{event.value.question}</p>
+	*         <button onClick={() => resolve({ approved: true })}>Approve</button>
+	*         <button onClick={() => resolve({ approved: false })}>Reject</button>
+	*       </div>
+	*     ),
+	*   });
+	*
+	*   return null;
+	* }
+	* ```
+	*
+	* @example
+	* ```tsx
+	* import { useInterrupt } from "@copilotkitnext/react";
+	*
+	* function CustomPanel() {
+	*   const interruptElement = useInterrupt({
+	*     renderInChat: false,
+	*     enabled: (event) => event.value.startsWith("approval:"),
+	*     handler: async ({ event }) => ({ label: event.value.toUpperCase() }),
+	*     render: ({ event, result, resolve }) => (
+	*       <aside>
+	*         <strong>{result?.label ?? ""}</strong>
+	*         <button onClick={() => resolve({ value: event.value })}>Continue</button>
+	*       </aside>
+	*     ),
+	*   });
+	*
+	*   return <>{interruptElement}</>;
+	* }
+	* ```
+	*/
+	function useInterrupt(config) {
+		const { copilotkit } = useCopilotKit();
+		const { agent } = useAgent({ agentId: config.agentId });
+		const [pendingEvent, setPendingEvent] = (0, react.useState)(null);
+		const [handlerResult, setHandlerResult] = (0, react.useState)(null);
+		(0, react.useEffect)(() => {
+			let localInterrupt = null;
+			const subscription = agent.subscribe({
+				onCustomEvent: ({ event }) => {
+					if (event.name === INTERRUPT_EVENT_NAME) localInterrupt = {
+						name: event.name,
+						value: event.value
+					};
+				},
+				onRunStartedEvent: () => {
+					localInterrupt = null;
+					setPendingEvent(null);
+				},
+				onRunFinalized: () => {
+					if (localInterrupt) {
+						setPendingEvent(localInterrupt);
+						localInterrupt = null;
+					}
+				},
+				onRunFailed: () => {
+					localInterrupt = null;
+				}
+			});
+			return () => subscription.unsubscribe();
+		}, [agent]);
+		const resolve = (0, react.useCallback)((response) => {
+			setPendingEvent(null);
+			copilotkit.runAgent({
+				agent,
+				forwardedProps: { command: { resume: response } }
+			});
+		}, [agent, copilotkit]);
+		(0, react.useEffect)(() => {
+			if (!pendingEvent) {
+				setHandlerResult(null);
+				return;
+			}
+			if (config.enabled && !config.enabled(pendingEvent)) {
+				setHandlerResult(null);
+				return;
+			}
+			const handler = config.handler;
+			if (!handler) {
+				setHandlerResult(null);
+				return;
+			}
+			let cancelled = false;
+			const maybePromise = handler({
+				event: pendingEvent,
+				resolve
+			});
+			if (isPromiseLike(maybePromise)) Promise.resolve(maybePromise).then((resolved) => {
+				if (!cancelled) setHandlerResult(resolved);
+			}).catch(() => {
+				if (!cancelled) setHandlerResult(null);
+			});
+			else setHandlerResult(maybePromise);
+			return () => {
+				cancelled = true;
+			};
+		}, [
+			pendingEvent,
+			config.enabled,
+			config.handler,
+			resolve
+		]);
+		const element = (0, react.useMemo)(() => {
+			if (!pendingEvent) return null;
+			if (config.enabled && !config.enabled(pendingEvent)) return null;
+			return config.render({
+				event: pendingEvent,
+				result: handlerResult,
+				resolve
+			});
+		}, [
+			pendingEvent,
+			handlerResult,
+			config.enabled,
+			config.render,
+			resolve
+		]);
+		(0, react.useEffect)(() => {
+			if (config.renderInChat === false) return;
+			copilotkit.setInterruptElement(element);
+			return () => copilotkit.setInterruptElement(null);
+		}, [
+			element,
+			config.renderInChat,
+			copilotkit
+		]);
+		if (config.renderInChat === false) return element;
+	}
+
 //#endregion
 //#region src/components/chat/CopilotChatToolCallsView.tsx
 	function CopilotChatToolCallsView({ message, messages = [] }) {
@@ -3645,6 +3824,14 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			copilotkit,
 			forceUpdate
 		]);
+		const [interruptElement, setInterruptElement] = (0, react.useState)(null);
+		(0, react.useEffect)(() => {
+			setInterruptElement(copilotkit.interruptElement);
+			const subscription = copilotkit.subscribe({ onInterruptElementChanged: ({ interruptElement }) => {
+				setInterruptElement(interruptElement);
+			} });
+			return () => subscription.unsubscribe();
+		}, [copilotkit]);
 		const getStateSnapshotForMessage = (messageId) => {
 			var _copilotkit$getRunIdF;
 			if (!config) return void 0;
@@ -3719,7 +3906,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			children: children({
 				messageElements,
 				messages,
-				isRunning
+				isRunning,
+				interruptElement
 			})
 		});
 		const lastMessage = messages[messages.length - 1];
@@ -3728,10 +3916,14 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			"data-copilotkit": true,
 			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:flex-col", className),
 			...props,
-			children: [messageElements, showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:mt-2",
-				children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
-			})]
+			children: [
+				messageElements,
+				interruptElement,
+				showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:mt-2",
+					children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+				})
+			]
 		});
 	}
 	CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
@@ -4952,6 +5144,7 @@ exports.useCopilotKit = useCopilotKit;
 exports.useDefaultRenderTool = useDefaultRenderTool;
 exports.useFrontendTool = useFrontendTool;
 exports.useHumanInTheLoop = useHumanInTheLoop;
+exports.useInterrupt = useInterrupt;
 exports.useRenderActivityMessage = useRenderActivityMessage;
 exports.useRenderCustomMessages = useRenderCustomMessages;
 exports.useRenderTool = useRenderTool;