@copilotkit/react-core 2.0.0-next.1 → 2.0.0-rc.0

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

@@ -1,136 +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]);
-}

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

@@ -1,36 +0,0 @@
-import { useContext, useEffect, useMemo } from "react";
-import { CopilotContext } from "../context/copilot-context";
-import { LangGraphInterruptRender } from "../types/interrupt-action";
-import { useToast } from "../components/toast/toast-provider";
-import { dataToUUID } from "@copilotkit/shared";
-
-export function useLangGraphInterrupt<TEventValue = any>(
-  action: Omit<LangGraphInterruptRender<TEventValue>, "id">,
-  dependencies?: any[],
-) {
-  const { setInterruptAction, removeInterruptAction, interruptActions, 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, threadId, actionId, ...(dependencies || [])]);
-}

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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useCopilotContext } from "../context/copilot-context";
-import { DocumentPointer } from "../types";
-
-/**
- * Makes a document readable by Copilot.
- * @param document The document to make readable.
- * @param categories The categories to associate with the document.
- * @param dependencies The dependencies to use for the effect.
- * @returns The id of the document.
- */
-export function useMakeCopilotDocumentReadable(
-  document: DocumentPointer,
-  categories?: string[],
-  dependencies: any[] = [],
-): string | undefined {
-  const { addDocumentContext, removeDocumentContext } = useCopilotContext();
-  const idRef = useRef<string>(undefined!);
-
-  useEffect(() => {
-    const id = addDocumentContext(document, categories);
-    idRef.current = id;
-
-    return () => {
-      removeDocumentContext(id);
-    };
-  }, [addDocumentContext, removeDocumentContext, ...dependencies]);
-
-  return idRef.current;
-}

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

@@ -1,80 +0,0 @@
-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 ToolCallRendererDefinition = Parameters<typeof defineToolCallRenderer>[0];
-
-export type UseRenderToolCallArgs<T extends Parameter[] | [] = []> = Pick<
-  FrontendAction<T>,
-  "name" | "description" | "parameters"
-> & {
-  available?: "disabled" | "enabled";
-  render: T extends []
-    ? (props: ActionRenderPropsNoArgs<T>) => React.ReactElement
-    : (props: ActionRenderProps<T>) => React.ReactElement;
-};
-
-export function useRenderToolCall<const T extends Parameter[] | [] = []>(
-  tool: UseRenderToolCallArgs<T>,
-  dependencies?: any[],
-) {
-  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/hooks/use-tree.ts

@@ -1,207 +0,0 @@
-import { randomId } from "@copilotkit/shared";
-import { useCallback, useReducer } from "react";
-
-export type TreeNodeId = string;
-
-export interface TreeNode {
-  id: TreeNodeId;
-  value: string;
-  children: TreeNode[];
-  parentId?: TreeNodeId;
-  categories: Set<string>;
-}
-
-export type Tree = TreeNode[];
-
-export interface UseTreeReturn {
-  tree: Tree;
-  addElement: (value: string, categories: string[], parentId?: TreeNodeId) => TreeNodeId;
-  printTree: (categories: string[]) => string;
-  removeElement: (id: TreeNodeId) => void;
-  getAllElements: () => Tree;
-}
-
-const findNode = (nodes: Tree, id: TreeNodeId): TreeNode | undefined => {
-  for (const node of nodes) {
-    if (node.id === id) {
-      return node;
-    }
-    const result = findNode(node.children, id);
-    if (result) {
-      return result;
-    }
-  }
-  return undefined;
-};
-
-const removeNode = (nodes: Tree, id: TreeNodeId): Tree => {
-  return nodes.reduce((result: Tree, node) => {
-    if (node.id !== id) {
-      const newNode = { ...node, children: removeNode(node.children, id) };
-      result.push(newNode);
-    }
-    return result;
-  }, []);
-};
-
-const addNode = (nodes: Tree, newNode: TreeNode, parentId?: TreeNodeId): Tree => {
-  if (!parentId) {
-    return [...nodes, newNode];
-  }
-  return nodes.map((node) => {
-    if (node.id === parentId) {
-      return { ...node, children: [...node.children, newNode] };
-    } else if (node.children.length) {
-      return { ...node, children: addNode(node.children, newNode, parentId) };
-    }
-    return node;
-  });
-};
-
-const treeIndentationRepresentation = (index: number, indentLevel: number): string => {
-  if (indentLevel === 0) {
-    return (index + 1).toString();
-  } else if (indentLevel === 1) {
-    return String.fromCharCode(65 + index); // 65 is the ASCII value for 'A'
-  } else if (indentLevel === 2) {
-    return String.fromCharCode(97 + index); // 97 is the ASCII value for 'a'
-  } else {
-    return "-";
-  }
-};
-
-const printNode = (node: TreeNode, prefix = "", indentLevel = 0): string => {
-  const indent = " ".repeat(3).repeat(indentLevel);
-
-  const prefixPlusIndentLength = prefix.length + indent.length;
-  const subsequentLinesPrefix = " ".repeat(prefixPlusIndentLength);
-
-  const valueLines = node.value.split("\n");
-
-  const outputFirstLine = `${indent}${prefix}${valueLines[0]}`;
-  const outputSubsequentLines = valueLines
-    .slice(1)
-    .map((line) => `${subsequentLinesPrefix}${line}`)
-    .join("\n");
-
-  let output = `${outputFirstLine}\n`;
-  if (outputSubsequentLines) {
-    output += `${outputSubsequentLines}\n`;
-  }
-
-  const childPrePrefix = " ".repeat(prefix.length);
-
-  node.children.forEach(
-    (child, index) =>
-      (output += printNode(
-        child,
-        `${childPrePrefix}${treeIndentationRepresentation(index, indentLevel + 1)}. `,
-        indentLevel + 1,
-      )),
-  );
-  return output;
-};
-
-// Action types
-type Action =
-  | {
-      type: "ADD_NODE";
-      value: string;
-      parentId?: string;
-      id: string;
-      categories: string[];
-    }
-  | { type: "REMOVE_NODE"; id: string };
-
-// Reducer function
-function treeReducer(state: Tree, action: Action): Tree {
-  switch (action.type) {
-    case "ADD_NODE": {
-      const { value, parentId, id: newNodeId } = action;
-      const newNode: TreeNode = {
-        id: newNodeId,
-        value,
-        children: [],
-        categories: new Set(action.categories),
-      };
-
-      try {
-        return addNode(state, newNode, parentId);
-      } catch (error) {
-        console.error(`Error while adding node with id ${newNodeId}: ${error}`);
-        return state;
-      }
-    }
-    case "REMOVE_NODE":
-      return removeNode(state, action.id);
-    default:
-      return state;
-  }
-}
-
-// useTree hook
-const useTree = (): UseTreeReturn => {
-  const [tree, dispatch] = useReducer(treeReducer, []);
-
-  const addElement = useCallback(
-    (value: string, categories: string[], parentId?: string): TreeNodeId => {
-      const newNodeId = randomId(); // Generate new ID outside of dispatch
-      dispatch({
-        type: "ADD_NODE",
-        value,
-        parentId,
-        id: newNodeId,
-        categories: categories,
-      });
-      return newNodeId; // Return the new ID
-    },
-    [],
-  );
-
-  const removeElement = useCallback((id: TreeNodeId): void => {
-    dispatch({ type: "REMOVE_NODE", id });
-  }, []);
-
-  const getAllElements = useCallback(() => {
-    return tree;
-  }, [tree]);
-
-  const printTree = useCallback(
-    (categories: string[]): string => {
-      const categoriesSet = new Set(categories);
-
-      let output = "";
-      tree.forEach((node, index) => {
-        // if the node does not have any of the desired categories, continue to the next node
-        if (!setsHaveIntersection(categoriesSet, node.categories)) {
-          return;
-        }
-
-        // add a new line before each node except the first one
-        if (index !== 0) {
-          output += "\n";
-        }
-
-        output += printNode(node, `${treeIndentationRepresentation(index, 0)}. `);
-      });
-      return output;
-    },
-    [tree],
-  );
-
-  return { tree, addElement, printTree, removeElement, getAllElements };
-};
-
-export default useTree;
-
-function setsHaveIntersection<T>(setA: Set<T>, setB: Set<T>): boolean {
-  const [smallerSet, largerSet] = setA.size <= setB.size ? [setA, setB] : [setB, setA];
-
-  for (let item of smallerSet) {
-    if (largerSet.has(item)) {
-      return true;
-    }
-  }
-
-  return false;
-}

package/src/index.tsx

@@ -1,7 +0,0 @@
-"use client";
-export * from "./components";
-export * from "./context";
-export * from "./hooks";
-export * from "./types";
-export * from "./lib";
-export * from "./utils";