@copilotkit/react-core 1.52.0-next.5 → 1.52.0-next.7

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # ui
 
+## 1.52.0-next.7
+
+### Patch Changes
+
+- d77f347: Added in the useInterrupt hook
+- Updated dependencies [d77f347]
+  - @copilotkitnext/react@1.52.0-next.7
+  - @copilotkitnext/core@1.52.0-next.7
+  - @copilotkit/runtime-client-gql@1.52.0-next.7
+  - @copilotkit/shared@1.52.0-next.7
+
+## 1.52.0-next.6
+
+### Patch Changes
+
+- 2007f8b: feat: useComponent improvements
+- 5f941db: Prevent CPK styles from polluting user app
+- Updated dependencies [2007f8b]
+  - @copilotkitnext/react@1.52.0-next.6
+  - @copilotkit/runtime-client-gql@1.52.0-next.6
+  - @copilotkit/shared@1.52.0-next.6
+  - @copilotkitnext/core@1.52.0-next.6
+
 ## 1.52.0-next.5
 
 ### Minor Changes

package/dist/index.cjs

@@ -2021,118 +2021,6 @@ function validateProps(props) {
 	if (cloudFeatures.length > 0 && !hasApiKey) throw new _copilotkit_shared.MissingPublicApiKeyError(`Missing required prop: 'publicApiKey' or 'publicLicenseKey' to use cloud features: ${cloudFeatures.map(formatFeatureName).join(", ")}`);
 }
 
-//#endregion
-//#region src/hooks/use-agent-nodename.ts
-function useAgentNodeName(agentName) {
-	const { agent } = (0, _copilotkitnext_react.useAgent)({ agentId: agentName });
-	const nodeNameRef = (0, react.useRef)("start");
-	(0, react.useEffect)(() => {
-		if (!agent) return;
-		const subscription = agent.subscribe({
-			onStepStartedEvent: ({ event }) => {
-				nodeNameRef.current = event.stepName;
-			},
-			onRunStartedEvent: () => {
-				nodeNameRef.current = "start";
-			},
-			onRunFinishedEvent: () => {
-				nodeNameRef.current = "end";
-			}
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [agent]);
-	return nodeNameRef.current;
-}
-
-//#endregion
-//#region src/hooks/use-langgraph-interrupt-render.ts
-const InterruptRenderer = ({ event, result, render, resolve }) => {
-	return render({
-		event,
-		result,
-		resolve
-	});
-};
-function useLangGraphInterruptRender(agent) {
-	const { interruptActions, agentSession, threadId, interruptEventQueue, addInterruptEvent, resolveInterruptEvent } = useCopilotContext();
-	const nodeName = useAgentNodeName((0, _copilotkitnext_react.useCopilotChatConfiguration)()?.agentId ?? "default");
-	(0, react.useEffect)(() => {
-		if (!agent) return;
-		let localInterrupt = null;
-		const { unsubscribe } = agent.subscribe({
-			onCustomEvent: ({ event }) => {
-				if (event.name === "on_interrupt") {
-					const eventData = {
-						name: _copilotkit_runtime_client_gql.MetaEventName.LangGraphInterruptEvent,
-						type: event.type,
-						value: (0, _copilotkit_shared.parseJson)(event.value, event.value)
-					};
-					localInterrupt = {
-						eventId: (0, _copilotkit_shared.dataToUUID)(eventData, "interruptEvents"),
-						threadId,
-						event: eventData
-					};
-				}
-			},
-			onRunStartedEvent: () => {
-				localInterrupt = null;
-			},
-			onRunFinalized: () => {
-				if (localInterrupt) {
-					addInterruptEvent(localInterrupt);
-					localInterrupt = null;
-				}
-			}
-		});
-		return () => {
-			unsubscribe();
-		};
-	}, [agent, threadId]);
-	const handleResolve = (0, react.useCallback)((eventId, response) => {
-		agent?.runAgent({ forwardedProps: { command: { resume: response } } });
-		resolveInterruptEvent(threadId, eventId, response ?? "");
-	}, [agent, threadId]);
-	return (0, react.useMemo)(() => {
-		const currentQueuedEvent = (interruptEventQueue[threadId] || []).find((qe) => !qe.event.response);
-		if (!currentQueuedEvent || !agentSession) return null;
-		const matchingAction = Object.values(interruptActions).find((action) => {
-			if (!action.enabled) return true;
-			return action.enabled({
-				eventValue: currentQueuedEvent.event.value,
-				agentMetadata: {
-					...agentSession,
-					nodeName
-				}
-			});
-		});
-		if (!matchingAction) return null;
-		const { render, handler } = matchingAction;
-		const resolveInterrupt = (response) => {
-			handleResolve(currentQueuedEvent.eventId, response);
-		};
-		let result = null;
-		if (handler) result = handler({
-			event: currentQueuedEvent.event,
-			resolve: resolveInterrupt
-		});
-		if (!render) return null;
-		return react.default.createElement(InterruptRenderer, {
-			event: currentQueuedEvent.event,
-			result,
-			render,
-			resolve: resolveInterrupt
-		});
-	}, [
-		interruptActions,
-		interruptEventQueue,
-		threadId,
-		agentSession,
-		handleResolve
-	]);
-}
-
 //#endregion
 //#region src/hooks/use-lazy-tool-renderer.tsx
 function useLazyToolRenderer() {
@@ -2182,7 +2070,14 @@ function useCopilotChatInternal({ suggestions, onInProgress, onSubmitMessage, on
 	(0, react.useEffect)(() => {
 		onInProgress?.(Boolean(agent?.isRunning));
 	}, [agent?.isRunning, onInProgress]);
-	const interrupt = useLangGraphInterruptRender(agent);
+	const [interrupt, setInterrupt] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		setInterrupt(copilotkit.interruptElement);
+		const subscription = copilotkit.subscribe({ onInterruptElementChanged: ({ interruptElement }) => {
+			setInterrupt(interruptElement);
+		} });
+		return () => subscription.unsubscribe();
+	}, [copilotkit]);
 	const reset = () => {
 		agent?.setMessages([]);
 		agent?.setState(null);
@@ -3311,6 +3206,31 @@ function useCopilotReadable({ description, value, convert, available }, dependen
 	return ctxIdRef.current;
 }
 
+//#endregion
+//#region src/hooks/use-agent-nodename.ts
+function useAgentNodeName(agentName) {
+	const { agent } = (0, _copilotkitnext_react.useAgent)({ agentId: agentName });
+	const nodeNameRef = (0, react.useRef)("start");
+	(0, react.useEffect)(() => {
+		if (!agent) return;
+		const subscription = agent.subscribe({
+			onStepStartedEvent: ({ event }) => {
+				nodeNameRef.current = event.stepName;
+			},
+			onRunStartedEvent: () => {
+				nodeNameRef.current = "start";
+			},
+			onRunFinishedEvent: () => {
+				nodeNameRef.current = "end";
+			}
+		});
+		return () => {
+			subscription.unsubscribe();
+		};
+	}, [agent]);
+	return nodeNameRef.current;
+}
+
 //#endregion
 //#region src/hooks/use-coagent.ts
 /**
@@ -3666,26 +3586,62 @@ function useCopilotAuthenticatedAction_c(action, dependencies) {
 
 //#endregion
 //#region src/hooks/use-langgraph-interrupt.ts
-function useLangGraphInterrupt(action, dependencies) {
-	const { setInterruptAction, removeInterruptAction, interruptActions, threadId } = (0, react.useContext)(CopilotContext);
-	const { addToast } = useToast();
-	const actionId = (0, _copilotkit_shared.dataToUUID)(action, "lgAction");
-	(0, react.useEffect)(() => {
-		if (!action) return;
-		setInterruptAction({
-			...action,
-			id: actionId
-		});
-		return () => {
-			removeInterruptAction(actionId);
-		};
-	}, [
-		setInterruptAction,
-		removeInterruptAction,
+/**
+* Transforms a v2 InterruptEvent into the v1 LangGraphInterruptEvent shape
+* expected by existing useLangGraphInterrupt callbacks.
+*/
+function toV1Event(event) {
+	const value = typeof event.value === "string" ? (0, _copilotkit_shared.parseJson)(event.value, event.value) : event.value;
+	return {
+		name: _copilotkit_runtime_client_gql.MetaEventName.LangGraphInterruptEvent,
+		type: "MetaEvent",
+		value
+	};
+}
+function useLangGraphInterrupt(action, _dependencies) {
+	const actionRef = (0, react.useRef)(action);
+	actionRef.current = action;
+	const existingConfig = (0, _copilotkitnext_react.useCopilotChatConfiguration)();
+	const resolvedAgentId = existingConfig?.agentId ?? "default";
+	const threadId = existingConfig?.threadId;
+	const nodeName = useAgentNodeName(resolvedAgentId);
+	const metadataRef = (0, react.useRef)({
+		agentName: resolvedAgentId,
 		threadId,
-		actionId,
-		...dependencies || []
-	]);
+		nodeName
+	});
+	metadataRef.current = {
+		agentName: resolvedAgentId,
+		threadId,
+		nodeName
+	};
+	(0, _copilotkitnext_react.useInterrupt)({
+		render: (0, react.useCallback)(({ event, result, resolve }) => {
+			const renderFn = actionRef.current.render;
+			if (!renderFn) return react.default.createElement(react.default.Fragment);
+			const rendered = renderFn({
+				event: toV1Event(event),
+				result,
+				resolve: (r) => resolve(r)
+			});
+			if (typeof rendered === "string") return react.default.createElement(react.default.Fragment, null, rendered);
+			return rendered;
+		}, []),
+		handler: (0, react.useCallback)(({ event, resolve }) => {
+			return actionRef.current.handler?.({
+				event: toV1Event(event),
+				resolve: (r) => resolve(r)
+			});
+		}, []),
+		enabled: (0, react.useCallback)((event) => {
+			if (!actionRef.current.enabled) return true;
+			return actionRef.current.enabled({
+				eventValue: toV1Event(event).value,
+				agentMetadata: metadataRef.current
+			});
+		}, []),
+		agentId: resolvedAgentId
+	});
 }
 
 //#endregion
@@ -4002,7 +3958,6 @@ exports.useDefaultTool = useDefaultTool;
 exports.useFrontendTool = useFrontendTool;
 exports.useHumanInTheLoop = useHumanInTheLoop;
 exports.useLangGraphInterrupt = useLangGraphInterrupt;
-exports.useLangGraphInterruptRender = useLangGraphInterruptRender;
 exports.useLazyToolRenderer = useLazyToolRenderer;
 exports.useMakeCopilotDocumentReadable = useMakeCopilotDocumentReadable;
 exports.useRenderToolCall = useRenderToolCall;