@copilotkit/react-core 0.0.0-fix-debug-infosys-20251107162427 → 0.0.0-fix-restore-handle-method-node-http-20251222114321

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

@@ -61,8 +61,8 @@
  * }
  * ```
  */
+import { useCopilotKit } from "@copilotkitnext/react";
 import { useEffect, useRef } from "react";
-import { useCopilotContext } from "../context/copilot-context";
 
 /**
  * Options for the useCopilotReadable hook.
@@ -98,40 +98,38 @@ export interface UseCopilotReadableOptions {
   convert?: (description: string, value: any) => string;
 }
 
-function convertToJSON(description: string, value: any): string {
-  return `${description}: ${typeof value === "string" ? value : JSON.stringify(value)}`;
-}
-
 /**
  * Adds the given information to the Copilot context to make it readable by Copilot.
  */
 export function useCopilotReadable(
-  {
-    description,
-    value,
-    parentId,
-    categories,
-    convert,
-    available = "enabled",
-  }: UseCopilotReadableOptions,
+  { description, value, convert, available }: UseCopilotReadableOptions,
   dependencies?: any[],
 ): string | undefined {
-  const { addContext, removeContext } = useCopilotContext();
-  const idRef = useRef<string>();
-  convert = convert || convertToJSON;
-
-  const information = convert(description, value);
-
+  const { copilotkit } = useCopilotKit();
+  const ctxIdRef = useRef<string | undefined>(undefined);
   useEffect(() => {
-    if (available === "disabled") return;
+    if (!copilotkit) return;
+
+    const found = Object.entries(copilotkit.context).find(([id, ctxItem]) => {
+      return JSON.stringify({ description, value }) == JSON.stringify(ctxItem);
+    });
+    if (found) {
+      ctxIdRef.current = found[0];
+      if (available === "disabled") copilotkit.removeContext(ctxIdRef.current);
+      return;
+    }
+    if (!found && available === "disabled") return;
 
-    const id = addContext(information, parentId, categories);
-    idRef.current = id;
+    ctxIdRef.current = copilotkit.addContext({
+      description,
+      value: (convert ?? JSON.stringify)(value),
+    });
 
     return () => {
-      removeContext(id);
+      if (!ctxIdRef.current) return;
+      copilotkit.removeContext(ctxIdRef.current);
     };
-  }, [available, information, parentId, addContext, removeContext, ...(dependencies || [])]);
+  }, [description, value, convert]);
 
-  return idRef.current;
+  return ctxIdRef.current;
 }

package/src/hooks/use-flat-category-store.ts

@@ -16,9 +16,10 @@ interface FlatCategoryStoreElement<T> {
 }
 
 const useFlatCategoryStore = <T>(): UseFlatCategoryStoreReturn<T> => {
-  const [elements, dispatch] = useReducer<
-    React.Reducer<Map<FlatCategoryStoreId, FlatCategoryStoreElement<T>>, Action<T>>
-  >(flatCategoryStoreReducer, new Map<FlatCategoryStoreId, FlatCategoryStoreElement<T>>());
+  const [elements, dispatch] = useReducer(
+    flatCategoryStoreReducer<T>,
+    new Map<FlatCategoryStoreId, FlatCategoryStoreElement<T>>(),
+  );
 
   const addElement = useCallback((value: T, categories: string[]): FlatCategoryStoreId => {
     const newId = randomId();

package/src/hooks/use-frontend-tool.ts

@@ -1,18 +1,96 @@
-import { useCopilotAction } from "./use-copilot-action";
-import { FrontendAction } from "../types/frontend-action";
-import { Parameter } from "@copilotkit/shared";
+import React, { useEffect, useRef } from "react";
+import { ActionRenderProps, FrontendAction } from "../types/frontend-action";
+import { Parameter, getZodParameters, MappedParameterTypes } from "@copilotkit/shared";
+import { parseJson } from "@copilotkit/shared";
+import { ToolCallStatus } from "@copilotkitnext/core";
+import {
+  type ReactFrontendTool,
+  useFrontendTool as useFrontendToolVNext,
+} from "@copilotkitnext/react";
 
-type UseToolCallArgs<T extends Parameter[] | [] = []> = {
+type FrontendToolOptions<T extends Parameter[] | []> = ReactFrontendTool<MappedParameterTypes<T>>;
+type FrontendToolRenderArgs<T extends Parameter[] | []> =
+  | {
+      name: string;
+      args: Partial<MappedParameterTypes<T>>;
+      status: ToolCallStatus.InProgress;
+      result: undefined;
+    }
+  | {
+      name: string;
+      args: MappedParameterTypes<T>;
+      status: ToolCallStatus.Executing;
+      result: undefined;
+    }
+  | {
+      name: string;
+      args: MappedParameterTypes<T>;
+      status: ToolCallStatus.Complete;
+      result: string;
+    };
+
+export type UseFrontendToolArgs<T extends Parameter[] | [] = []> = {
   available?: "disabled" | "enabled";
 } & Pick<
   FrontendAction<T>,
   "name" | "description" | "parameters" | "handler" | "followUp" | "render"
 >;
 
-export function useFrontendTool<const T extends Parameter[] | [] = []>(
-  tool: UseToolCallArgs<T>,
+export function useFrontendTool<const T extends Parameter[] = []>(
+  tool: UseFrontendToolArgs<T>,
   dependencies?: any[],
 ) {
-  // Use the existing useCopilotAction hook
-  useCopilotAction<T>(tool, dependencies);
+  const { name, description, parameters, render, followUp } = tool;
+  const zodParameters = getZodParameters(parameters);
+
+  const normalizedRender: FrontendToolOptions<T>["render"] | undefined = (() => {
+    if (typeof render === "undefined") {
+      return undefined;
+    }
+
+    if (typeof render === "string") {
+      const staticRender = render;
+      return (() =>
+        React.createElement(
+          React.Fragment,
+          null,
+          staticRender,
+        )) as FrontendToolOptions<T>["render"];
+    }
+
+    return ((args: FrontendToolRenderArgs<T>) => {
+      const renderArgs = {
+        ...args,
+        result: typeof args.result === "string" ? parseJson(args.result, args.result) : args.result,
+      } as ActionRenderProps<T>;
+
+      const rendered = render(renderArgs);
+
+      if (typeof rendered === "string") {
+        return React.createElement(React.Fragment, null, rendered);
+      }
+
+      return rendered ?? null;
+    }) as FrontendToolOptions<T>["render"];
+  })();
+
+  // Handler ref to avoid stale closures
+  const handlerRef = useRef<typeof tool.handler>(tool.handler);
+
+  useEffect(() => {
+    handlerRef.current = tool.handler;
+  }, [tool.handler, ...(dependencies ?? [])]);
+
+  const normalizedHandler = tool.handler
+    ? (args: MappedParameterTypes<T>) => handlerRef.current?.(args)
+    : undefined;
+
+  useFrontendToolVNext<MappedParameterTypes<T>>({
+    name,
+    description,
+    parameters: zodParameters,
+    handler: normalizedHandler,
+    followUp,
+    render: normalizedRender,
+  });
 }

package/src/hooks/use-human-in-the-loop.ts

@@ -1,24 +1,122 @@
-import { useCopilotAction } from "./use-copilot-action";
-import { FrontendAction } from "../types";
-import { Parameter } from "@copilotkit/shared";
+import { ActionRenderProps, ActionRenderPropsWait, FrontendAction } from "../types";
+import {
+  CopilotKitError,
+  CopilotKitErrorCode,
+  MappedParameterTypes,
+  Parameter,
+  getZodParameters,
+  parseJson,
+} from "@copilotkit/shared";
+import { useHumanInTheLoop as useHumanInTheLoopVNext } from "@copilotkitnext/react";
+import { ToolCallStatus } from "@copilotkitnext/core";
+import React, { ComponentType, FunctionComponent, useEffect, useRef } from "react";
 
-type UseToolCallArgs<T extends Parameter[] | [] = []> = {
+type HumanInTheLoopOptions = Parameters<typeof useHumanInTheLoopVNext>[0];
+type HumanInTheLoopRender = HumanInTheLoopOptions["render"];
+type HumanInTheLoopRenderArgs = HumanInTheLoopRender extends (props: infer P) => any ? P : never;
+
+export type UseHumanInTheLoopArgs<T extends Parameter[] | [] = []> = {
   available?: "disabled" | "enabled";
   render: FrontendAction<T>["renderAndWaitForResponse"];
+  followUp?: FrontendAction<T>["followUp"];
 } & Pick<FrontendAction<T>, "name" | "description" | "parameters">;
 
+type HitlRendererArgs =
+  | {
+      name: string;
+      description: string;
+      args: Partial<Record<string, unknown>>;
+      status: ToolCallStatus.InProgress;
+      result: undefined;
+      respond: undefined;
+    }
+  | {
+      name: string;
+      description: string;
+      args: Record<string, unknown>;
+      status: ToolCallStatus.Executing;
+      result: undefined;
+      respond: (result: unknown) => Promise<void>;
+    }
+  | {
+      name: string;
+      description: string;
+      args: Record<string, unknown>;
+      status: ToolCallStatus.Complete;
+      result: string;
+      respond: undefined;
+    };
+type HitlRenderer = FunctionComponent<HitlRendererArgs>;
+
 export function useHumanInTheLoop<const T extends Parameter[] | [] = []>(
-  tool: UseToolCallArgs<T>,
+  tool: UseHumanInTheLoopArgs<T>,
   dependencies?: any[],
 ) {
   const { render, ...toolRest } = tool;
+  const { name, description, parameters, followUp } = toolRest;
+  const zodParameters = getZodParameters(parameters);
+  const renderRef = useRef<HitlRenderer | null>(null);
+
+  useEffect(() => {
+    renderRef.current = (args: HitlRendererArgs): React.ReactElement | null => {
+      if (typeof render === "string") {
+        return React.createElement(React.Fragment, null, render);
+      }
+
+      if (!render) {
+        return null;
+      }
+
+      const renderProps: ActionRenderPropsWait<T> = (() => {
+        const mappedArgs = args.args as unknown as MappedParameterTypes<T>;
+
+        switch (args.status) {
+          case ToolCallStatus.InProgress:
+            return {
+              args: mappedArgs,
+              respond: args.respond,
+              status: args.status,
+              handler: undefined,
+            };
+          case ToolCallStatus.Executing:
+            return {
+              args: mappedArgs,
+              respond: args.respond,
+              status: args.status,
+              handler: () => {},
+            };
+          case ToolCallStatus.Complete:
+            return {
+              args: mappedArgs,
+              respond: args.respond,
+              status: args.status,
+              result: args.result ? parseJson(args.result, args.result) : args.result,
+              handler: undefined,
+            };
+          default:
+            throw new CopilotKitError({
+              code: CopilotKitErrorCode.UNKNOWN,
+              message: `Invalid tool call status: ${(args as unknown as { status: string }).status}`,
+            });
+        }
+      })();
+
+      const rendered = render(renderProps);
+
+      if (typeof rendered === "string") {
+        return React.createElement(React.Fragment, null, rendered);
+      }
+
+      return rendered ?? null;
+    };
+  }, [render, ...(dependencies ?? [])]);
 
-  useCopilotAction(
-    {
-      ...toolRest,
-      available: tool.available === "disabled" ? tool.available : "remote",
-      renderAndWaitForResponse: render,
-    },
-    dependencies,
-  );
+  useHumanInTheLoopVNext({
+    name,
+    description,
+    followUp,
+    parameters: zodParameters,
+    render: ((args: HumanInTheLoopRenderArgs) =>
+      renderRef.current?.(args as HitlRendererArgs) ?? null) as HumanInTheLoopOptions["render"],
+  });
 }

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

@@ -1,6 +1,10 @@
 import { useCopilotContext } from "../context";
-import React, { useCallback } from "react";
-import { executeConditions } from "@copilotkit/shared";
+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;
@@ -17,52 +21,116 @@ const InterruptRenderer: React.FC<InterruptProps> = ({ event, result, render, re
   return render({ event, result, resolve });
 };
 
-export function useLangGraphInterruptRender(): string | React.ReactElement | null {
-  const { langGraphInterruptAction, setLangGraphInterruptAction, agentSession, threadId } =
-    useCopilotContext();
+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);
 
-  const responseRef = React.useRef<string>();
-  const resolveInterrupt = useCallback(
-    (response: string) => {
-      responseRef.current = response;
-      // Use setTimeout to defer the state update to next tick
-      setTimeout(() => {
-        setLangGraphInterruptAction(threadId, { event: { response } });
-      }, 0);
+  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 ?? "");
     },
-    [setLangGraphInterruptAction, threadId],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [agent, threadId],
   );
 
-  if (
-    !langGraphInterruptAction ||
-    !langGraphInterruptAction.event ||
-    !langGraphInterruptAction.render
-  )
-    return null;
+  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, event, enabled } = langGraphInterruptAction;
+    const { render, handler } = matchingAction;
 
-  const conditionsMet =
-    !agentSession || !enabled
-      ? true
-      : enabled({ eventValue: event.value, agentMetadata: agentSession });
+    const resolveInterrupt = (response: string) => {
+      handleResolve(currentQueuedEvent.eventId, response);
+    };
 
-  if (!conditionsMet) {
-    return null;
-  }
+    let result = null;
+    if (handler) {
+      result = handler({
+        event: currentQueuedEvent.event,
+        resolve: resolveInterrupt,
+      });
+    }
 
-  let result = null;
-  if (handler) {
-    result = handler({
-      event,
+    if (!render) return null;
+
+    return React.createElement(InterruptRenderer, {
+      event: currentQueuedEvent.event,
+      result,
+      render,
       resolve: resolveInterrupt,
     });
-  }
-
-  return React.createElement(InterruptRenderer, {
-    event,
-    result,
-    render,
-    resolve: resolveInterrupt,
-  });
+  }, [interruptActions, interruptEventQueue, threadId, agentSession, handleResolve]);
 }

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

@@ -1,7 +1,6 @@
 import { useContext, useEffect, useMemo } from "react";
 import { CopilotContext } from "../context/copilot-context";
 import { LangGraphInterruptRender } from "../types/interrupt-action";
-import { useCopilotChat } from "./use-copilot-chat_internal";
 import { useToast } from "../components/toast/toast-provider";
 import { dataToUUID } from "@copilotkit/shared";
 
@@ -9,58 +8,29 @@ export function useLangGraphInterrupt<TEventValue = any>(
   action: Omit<LangGraphInterruptRender<TEventValue>, "id">,
   dependencies?: any[],
 ) {
-  const {
-    setLangGraphInterruptAction,
-    removeLangGraphInterruptAction,
-    langGraphInterruptAction,
-    threadId,
-  } = useContext(CopilotContext);
-  const { runChatCompletion } = useCopilotChat();
+  const { setInterruptAction, removeInterruptAction, interruptActions, threadId } =
+    useContext(CopilotContext);
   const { addToast } = useToast();
 
-  const actionId = dataToUUID(JSON.stringify(action), "lgAction");
-  // We only consider action to be defined once the ID is there
-  const hasAction = useMemo(
-    () => Boolean(langGraphInterruptAction?.id),
-    [langGraphInterruptAction],
-  );
-
-  const isCurrentAction = useMemo(
-    () => langGraphInterruptAction?.id && langGraphInterruptAction?.id === actionId,
-    [langGraphInterruptAction],
-  );
-
-  // Run chat completion to submit a response event. Only if it's the current action
-  useEffect(() => {
-    if (hasAction && isCurrentAction && langGraphInterruptAction?.event?.response) {
-      runChatCompletion();
-    }
-  }, [langGraphInterruptAction?.event?.response, runChatCompletion, hasAction, isCurrentAction]);
+  const actionId = dataToUUID(action, "lgAction");
 
   useEffect(() => {
     if (!action) return;
-    // An action was already set, with no conditions and it's not the action we're using right now.
-    // Show a warning, as this action will not be executed
-    if (hasAction && !isCurrentAction && !action.enabled) {
-      addToast({
-        type: "warning",
-        message: "An action is already registered for the interrupt event",
-      });
-      return;
-    }
 
-    if (hasAction && isCurrentAction) {
-      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 });
 
-    setLangGraphInterruptAction(threadId, { ...action, id: actionId });
-  }, [
-    action,
-    hasAction,
-    isCurrentAction,
-    setLangGraphInterruptAction,
-    removeLangGraphInterruptAction,
-    threadId,
-    ...(dependencies || []),
-  ]);
+    // Cleanup: remove action on unmount
+    return () => {
+      removeInterruptAction(actionId);
+    };
+  }, [setInterruptAction, removeInterruptAction, threadId, actionId, ...(dependencies || [])]);
 }

package/src/hooks/use-lazy-tool-renderer.tsx

@@ -0,0 +1,30 @@
+import { useRenderToolCall } from "@copilotkitnext/react";
+import { AIMessage, Message, ToolResult } from "@copilotkit/shared";
+import React, { useCallback } from "react";
+
+export function useLazyToolRenderer(): (
+  message?: AIMessage,
+  messages?: Message[],
+) => null | (() => ReturnType<ReturnType<typeof useRenderToolCall>> | null) {
+  const renderToolCall = useRenderToolCall();
+
+  return useCallback(
+    (message?: AIMessage, messages?: Message[]) => {
+      if (!message?.toolCalls?.length) return null;
+
+      const toolCall = message.toolCalls[0];
+      if (!toolCall) return null;
+
+      const toolMessage = messages?.find(
+        (m) => m.role === "tool" && m.toolCallId === toolCall.id,
+      ) as ToolResult;
+
+      return () =>
+        renderToolCall({
+          toolCall,
+          toolMessage,
+        });
+    },
+    [renderToolCall],
+  );
+}

package/src/hooks/use-make-copilot-document-readable.ts

@@ -15,7 +15,7 @@ export function useMakeCopilotDocumentReadable(
   dependencies: any[] = [],
 ): string | undefined {
   const { addDocumentContext, removeDocumentContext } = useCopilotContext();
-  const idRef = useRef<string>();
+  const idRef = useRef<string>(undefined!);
 
   useEffect(() => {
     const id = addDocumentContext(document, categories);