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

package/package.json

@@ -10,7 +10,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.52.0-next.6",
+  "version": "1.52.0-next.7",
   "sideEffects": [
     "**/*.css"
   ],
@@ -59,10 +59,10 @@
     "@scarf/scarf": "^1.3.0",
     "react-markdown": "^8.0.7",
     "untruncate-json": "^0.0.1",
-    "@copilotkit/runtime-client-gql": "1.52.0-next.6",
-    "@copilotkit/shared": "1.52.0-next.6",
-    "@copilotkitnext/core": "1.52.0-next.6",
-    "@copilotkitnext/react": "1.52.0-next.6"
+    "@copilotkit/shared": "1.52.0-next.7",
+    "@copilotkit/runtime-client-gql": "1.52.0-next.7",
+    "@copilotkitnext/core": "1.52.0-next.7",
+    "@copilotkitnext/react": "1.52.0-next.7"
   },
   "keywords": [
     "copilotkit",

package/src/hooks/__tests__/use-coagent-state-render.e2e.test.tsx

@@ -49,6 +49,8 @@ vi.mock("@copilotkitnext/react", () => ({
       clearSuggestions: vi.fn(),
       addSuggestionsConfig: vi.fn(),
       reloadSuggestions: vi.fn(),
+      interruptElement: null,
+      subscribe: vi.fn(() => ({ unsubscribe: vi.fn() })),
     },
   })),
   useCopilotChatConfiguration: vi.fn(() => ({ agentId: "test-agent" })),
@@ -67,10 +69,6 @@ vi.mock("../../components/error-boundary/error-utils", () => ({
   useAsyncCallback: <T extends (...args: unknown[]) => unknown>(fn: T) => fn,
 }));
 
-vi.mock("../use-langgraph-interrupt-render", () => ({
-  useLangGraphInterruptRender: vi.fn(() => null),
-}));
-
 vi.mock("../use-lazy-tool-renderer", () => ({
   useLazyToolRenderer: vi.fn(() => () => null),
 }));

package/src/hooks/index.ts

@@ -20,7 +20,6 @@ export { useCoAgent, type HintFunction } from "./use-coagent";
 export { useCopilotRuntimeClient } from "./use-copilot-runtime-client";
 export { useCopilotAuthenticatedAction_c } from "./use-copilot-authenticated-action";
 export { useLangGraphInterrupt } from "./use-langgraph-interrupt";
-export { useLangGraphInterruptRender } from "./use-langgraph-interrupt-render";
 export { useCopilotAdditionalInstructions } from "./use-copilot-additional-instructions";
 export type { Tree, TreeNode } from "./use-tree";
 export { useFrontendTool } from "./use-frontend-tool";

package/src/hooks/use-copilot-chat_internal.ts

@@ -1,4 +1,4 @@
-import {
+import React, {
   useRef,
   useEffect,
   useCallback,
@@ -14,7 +14,6 @@ import {
   gqlToAGUI,
   Message as DeprecatedGqlMessage,
 } from "@copilotkit/runtime-client-gql";
-import { useLangGraphInterruptRender } from "./use-langgraph-interrupt-render";
 import {
   useAgent,
   useCopilotChatConfiguration,
@@ -363,7 +362,19 @@ export function useCopilotChatInternal({
     onInProgress?.(Boolean(agent?.isRunning));
   }, [agent?.isRunning, onInProgress]);
 
-  const interrupt = useLangGraphInterruptRender(agent);
+  // Subscribe to copilotkit.interruptElement so the v1 return type stays
+  // reactive. The element is published by useInterrupt (v2) when user code
+  // calls useLangGraphInterrupt({ render, ... }).
+  const [interrupt, setInterrupt] = useState<React.ReactElement | null>(null);
+  useEffect(() => {
+    setInterrupt(copilotkit.interruptElement);
+    const subscription = copilotkit.subscribe({
+      onInterruptElementChanged: ({ interruptElement }) => {
+        setInterrupt(interruptElement);
+      },
+    });
+    return () => subscription.unsubscribe();
+  }, [copilotkit]);
 
   const reset = () => {
     agent?.setMessages([]);

package/src/hooks/use-langgraph-interrupt.ts

@@ -1,46 +1,105 @@
-import { useContext, useEffect, useMemo } from "react";
-import { CopilotContext } from "../context/copilot-context";
+import React, { useCallback, useRef } from "react";
 import { LangGraphInterruptRender } from "../types/interrupt-action";
-import { useToast } from "../components/toast/toast-provider";
-import { dataToUUID } from "@copilotkit/shared";
+import {
+  useInterrupt,
+  useCopilotChatConfiguration,
+} from "@copilotkitnext/react";
+import type {
+  InterruptEvent,
+  InterruptRenderProps,
+  InterruptHandlerProps,
+} from "@copilotkitnext/react";
+import { MetaEventName } from "@copilotkit/runtime-client-gql";
+import { parseJson } from "@copilotkit/shared";
+import { useAgentNodeName } from "./use-agent-nodename";
+import type { AgentSession } from "../context/copilot-context";
+
+/**
+ * Transforms a v2 InterruptEvent into the v1 LangGraphInterruptEvent shape
+ * expected by existing useLangGraphInterrupt callbacks.
+ */
+function toV1Event<TEventValue>(event: InterruptEvent<TEventValue>) {
+  const value =
+    typeof event.value === "string"
+      ? parseJson(event.value, event.value)
+      : event.value;
+  return {
+    name: MetaEventName.LangGraphInterruptEvent,
+    type: "MetaEvent" as const,
+    value,
+  };
+}
 
 export function useLangGraphInterrupt<TEventValue = any>(
   action: Omit<LangGraphInterruptRender<TEventValue>, "id">,
-  dependencies?: any[],
+  _dependencies?: any[],
 ) {
-  const {
-    setInterruptAction,
-    removeInterruptAction,
-    interruptActions,
+  const actionRef = useRef(action);
+  // Update ref synchronously during render so it's always current
+  // when callbacks read from it (useEffect would be one tick late).
+  actionRef.current = action;
+
+  const existingConfig = useCopilotChatConfiguration();
+  const resolvedAgentId = existingConfig?.agentId ?? "default";
+  const threadId = existingConfig?.threadId;
+  const nodeName = useAgentNodeName(resolvedAgentId);
+
+  // Keep agentMetadata in a ref so stable callbacks always see current values.
+  const metadataRef = useRef<AgentSession>({
+    agentName: resolvedAgentId,
     threadId,
-  } = useContext(CopilotContext);
-  const { addToast } = useToast();
-
-  const actionId = dataToUUID(action, "lgAction");
-
-  useEffect(() => {
-    if (!action) return;
-
-    // if (!action.enabled) {
-    // TODO: if there are any other actions registered, we need to warn the user that a current action without "enabled" might render for everything
-    //   addToast({
-    //     type: "warning",
-    //     message: "An action is already registered for the interrupt event",
-    //   });
-    //   return;
-    // }
-
-    setInterruptAction({ ...action, id: actionId });
-
-    // Cleanup: remove action on unmount
-    return () => {
-      removeInterruptAction(actionId);
-    };
-  }, [
-    setInterruptAction,
-    removeInterruptAction,
+    nodeName,
+  });
+  metadataRef.current = {
+    agentName: resolvedAgentId,
     threadId,
-    actionId,
-    ...(dependencies || []),
-  ]);
+    nodeName,
+  };
+
+  // Stable callback references that always read the latest action from the ref.
+  // This prevents useInterrupt's internal useMemo/useEffect from seeing new
+  // function identities on every render, which would cause an infinite loop.
+  const render = useCallback(
+    ({ event, result, resolve }: InterruptRenderProps<TEventValue>) => {
+      const renderFn = actionRef.current.render;
+      if (!renderFn) return React.createElement(React.Fragment);
+      const rendered = renderFn({
+        event: toV1Event(event) as any,
+        result,
+        resolve: (r) => resolve(r),
+      });
+      if (typeof rendered === "string") {
+        return React.createElement(React.Fragment, null, rendered);
+      }
+      return rendered;
+    },
+    [],
+  );
+
+  // Handler always delegates to the ref — if no handler is set at call time,
+  // the optional chaining returns undefined which useInterrupt treats as null.
+  const handler = useCallback(
+    ({ event, resolve }: InterruptHandlerProps<TEventValue>) => {
+      return actionRef.current.handler?.({
+        event: toV1Event(event) as any,
+        resolve: (r) => resolve(r),
+      });
+    },
+    [],
+  );
+
+  const enabled = useCallback((event: InterruptEvent<TEventValue>) => {
+    if (!actionRef.current.enabled) return true;
+    return actionRef.current.enabled({
+      eventValue: toV1Event(event).value,
+      agentMetadata: metadataRef.current,
+    });
+  }, []);
+
+  useInterrupt({
+    render,
+    handler,
+    enabled,
+    agentId: resolvedAgentId,
+  });
 }

package/src/hooks/use-langgraph-interrupt-render.ts

@@ -1,147 +0,0 @@
-import { useCopilotContext } from "../context";
-import React, { useCallback, useEffect, useMemo } from "react";
-import type { AbstractAgent, AgentSubscriber } from "@ag-ui/client";
-import { MetaEventName } from "@copilotkit/runtime-client-gql";
-import { dataToUUID, parseJson } from "@copilotkit/shared";
-import { useAgentNodeName } from "./use-agent-nodename";
-import { useCopilotChatConfiguration } from "@copilotkitnext/react";
-
-type InterruptProps = {
-  event: any;
-  result: any;
-  render: (props: {
-    event: any;
-    result: any;
-    resolve: (response: string) => void;
-  }) => string | React.ReactElement;
-  resolve: (response: string) => void;
-};
-
-const InterruptRenderer: React.FC<InterruptProps> = ({
-  event,
-  result,
-  render,
-  resolve,
-}) => {
-  return render({ event, result, resolve });
-};
-
-export function useLangGraphInterruptRender(
-  agent: AbstractAgent,
-): string | React.ReactElement | null {
-  const {
-    interruptActions,
-    agentSession,
-    threadId,
-    interruptEventQueue,
-    addInterruptEvent,
-    resolveInterruptEvent,
-  } = useCopilotContext();
-  const existingConfig = useCopilotChatConfiguration();
-  const resolvedAgentId = existingConfig?.agentId ?? "default";
-  const nodeName = useAgentNodeName(resolvedAgentId);
-
-  useEffect(() => {
-    if (!agent) return;
-    let localInterrupt: any = null;
-    const subscriber: AgentSubscriber = {
-      onCustomEvent: ({ event }) => {
-        if (event.name === "on_interrupt") {
-          const eventData = {
-            name: MetaEventName.LangGraphInterruptEvent,
-            type: event.type,
-            value: parseJson(event.value, event.value),
-          };
-          const eventId = dataToUUID(eventData, "interruptEvents");
-          localInterrupt = {
-            eventId,
-            threadId,
-            event: eventData,
-          };
-        }
-      },
-      onRunStartedEvent: () => {
-        localInterrupt = null;
-      },
-      onRunFinalized: () => {
-        if (localInterrupt) {
-          addInterruptEvent(localInterrupt);
-          localInterrupt = null;
-        }
-      },
-    };
-
-    const { unsubscribe } = agent.subscribe(subscriber);
-    return () => {
-      unsubscribe();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [agent, threadId]);
-
-  const handleResolve = useCallback(
-    (eventId: string, response?: string) => {
-      agent?.runAgent({
-        forwardedProps: {
-          command: {
-            resume: response,
-          },
-        },
-      });
-      resolveInterruptEvent(threadId, eventId, response ?? "");
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [agent, threadId],
-  );
-
-  return useMemo(() => {
-    // Get the queue for this thread and find the first unresponded event
-    const eventQueue = interruptEventQueue[threadId] || [];
-    const currentQueuedEvent = eventQueue.find((qe) => !qe.event.response);
-
-    if (!currentQueuedEvent || !agentSession) return null;
-
-    // Find the first matching action from all registered actions
-    const allActions = Object.values(interruptActions);
-    const matchingAction = allActions.find((action) => {
-      if (!action.enabled) return true; // No filter = match all
-      return action.enabled({
-        eventValue: currentQueuedEvent.event.value,
-        agentMetadata: {
-          ...agentSession,
-          nodeName,
-        },
-      });
-    });
-
-    if (!matchingAction) return null;
-
-    const { render, handler } = matchingAction;
-
-    const resolveInterrupt = (response: string) => {
-      handleResolve(currentQueuedEvent.eventId, response);
-    };
-
-    let result = null;
-    if (handler) {
-      result = handler({
-        event: currentQueuedEvent.event,
-        resolve: resolveInterrupt,
-      });
-    }
-
-    if (!render) return null;
-
-    return React.createElement(InterruptRenderer, {
-      event: currentQueuedEvent.event,
-      result,
-      render,
-      resolve: resolveInterrupt,
-    });
-  }, [
-    interruptActions,
-    interruptEventQueue,
-    threadId,
-    agentSession,
-    handleResolve,
-  ]);
-}