@copilotkit/react-core 1.10.7-next.0 → 1.50.0-beta.1

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

@@ -63,6 +63,7 @@
  */
 import { useEffect, useRef } from "react";
 import { useCopilotContext } from "../context/copilot-context";
+import { useAgentContext } from "@copilotkitnext/react";
 
 /**
  * Options for the useCopilotReadable hook.
@@ -106,32 +107,11 @@ function convertToJSON(description: string, value: any): string {
  * Adds the given information to the Copilot context to make it readable by Copilot.
  */
 export function useCopilotReadable(
-  {
+  { description, value }: UseCopilotReadableOptions,
+  dependencies?: any[],
+): void {
+  useAgentContext({
     description,
     value,
-    parentId,
-    categories,
-    convert,
-    available = "enabled",
-  }: UseCopilotReadableOptions,
-  dependencies?: any[],
-): string | undefined {
-  const { addContext, removeContext } = useCopilotContext();
-  const idRef = useRef<string>();
-  convert = convert || convertToJSON;
-
-  const information = convert(description, value);
-
-  useEffect(() => {
-    if (available === "disabled") return;
-
-    const id = addContext(information, parentId, categories);
-    idRef.current = id;
-
-    return () => {
-      removeContext(id);
-    };
-  }, [available, information, parentId, addContext, removeContext, ...(dependencies || [])]);
-
-  return idRef.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,77 @@
-import { useCopilotAction } from "./use-copilot-action";
-import { FrontendAction } from "../types/frontend-action";
-import { Parameter } from "@copilotkit/shared";
+import React 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"];
+  })();
+
+  useFrontendToolVNext<MappedParameterTypes<T>>({
+    name,
+    description,
+    parameters: zodParameters,
+    handler: tool.handler,
+    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,8 @@
 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";
 
 type InterruptProps = {
   event: any;
@@ -17,52 +19,100 @@ 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,
+    removeInterruptEvent,
+  } = useCopilotContext();
 
-  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;
+    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(JSON.stringify(eventData), "interruptEvents");
+          addInterruptEvent({
+            eventId,
+            threadId,
+            event: eventData,
+          });
+        }
+      },
+    };
+
+    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,
+          },
+        },
+      });
+      removeInterruptEvent(threadId, eventId);
     },
-    [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) 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,
+      });
+    });
+
+    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,7 @@
 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 { useCopilotChatInternal } from "./use-copilot-chat_internal";
 import { useToast } from "../components/toast/toast-provider";
 import { dataToUUID } from "@copilotkit/shared";
 
@@ -9,58 +9,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]);
 
   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(threadId, { ...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);

package/src/hooks/use-render-tool-call.ts

@@ -1,20 +1,80 @@
-import { useCopilotAction } from "./use-copilot-action";
-import { FrontendAction, FrontendActionAvailability } from "../types";
-import { Parameter } from "@copilotkit/shared";
+import {
+  ActionRenderProps,
+  ActionRenderPropsNoArgs,
+  ActionRenderPropsWait,
+  FrontendAction,
+} from "../types";
+import { Parameter, getZodParameters } from "@copilotkit/shared";
+import React, { useEffect, useRef } from "react";
+import { defineToolCallRenderer, useCopilotKit } from "@copilotkitnext/react";
+import { parseJson } from "@copilotkit/shared";
 
-type UseToolCallArgs<T extends Parameter[] | [] = []> = {
+type ToolCallRendererDefinition = Parameters<typeof defineToolCallRenderer>[0];
+
+export type UseRenderToolCallArgs<T extends Parameter[] | [] = []> = Pick<
+  FrontendAction<T>,
+  "name" | "description" | "parameters"
+> & {
   available?: "disabled" | "enabled";
-} & Pick<FrontendAction<T>, "name" | "description" | "parameters" | "render">;
+  render: T extends []
+    ? (props: ActionRenderPropsNoArgs<T>) => React.ReactElement
+    : (props: ActionRenderProps<T>) => React.ReactElement;
+};
 
 export function useRenderToolCall<const T extends Parameter[] | [] = []>(
-  tool: UseToolCallArgs<T>,
+  tool: UseRenderToolCallArgs<T>,
   dependencies?: any[],
 ) {
-  useCopilotAction<T>(
-    {
-      ...tool,
-      available: tool.available === "disabled" ? tool.available : "frontend",
-    },
-    dependencies,
-  );
+  const { copilotkit } = useCopilotKit();
+
+  // Track whether we've already added this renderer to avoid duplicates
+  const hasAddedRef = useRef(false);
+
+  useEffect(() => {
+    const { name, parameters, render } = tool;
+    const zodParameters = getZodParameters(parameters);
+
+    const renderToolCall =
+      name === "*"
+        ? defineToolCallRenderer({
+            name: "*",
+            render: ((args) => {
+              return render({
+                ...args,
+                result: args.result ? parseJson(args.result, args.result) : args.result,
+              });
+            }) as ToolCallRendererDefinition["render"],
+          })
+        : defineToolCallRenderer({
+            name,
+            args: zodParameters,
+            render: ((args) => {
+              return render({
+                ...args,
+                result: args.result ? parseJson(args.result, args.result) : args.result,
+              });
+            }) as ToolCallRendererDefinition["render"],
+          });
+
+    // Remove any existing renderer with the same name
+    const existingIndex = copilotkit.renderToolCalls.findIndex((r) => r.name === name);
+    if (existingIndex !== -1) {
+      copilotkit.renderToolCalls.splice(existingIndex, 1);
+    }
+
+    // Add the new renderer
+    copilotkit.renderToolCalls.push(renderToolCall);
+    hasAddedRef.current = true;
+
+    // Cleanup: remove this renderer when the component unmounts or tool changes
+    return () => {
+      if (hasAddedRef.current) {
+        const index = copilotkit.renderToolCalls.findIndex((r) => r.name === name);
+        if (index !== -1) {
+          copilotkit.renderToolCalls.splice(index, 1);
+        }
+        hasAddedRef.current = false;
+      }
+    };
+  }, [tool, ...(dependencies ?? [])]);
 }

package/src/types/index.ts

@@ -14,3 +14,4 @@ export type {
 
 export type { CopilotChatSuggestionConfiguration } from "./chat-suggestion-configuration";
 export * from "./crew";
+export * from "./interrupt-action";