@copilotkit/react-core 0.0.0-0.0.0-max-changeset-10101010101010-20260109191632

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

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

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

@@ -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

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

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

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

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