@copilotkit/react-core 1.72.1-canary.sp-longthread-perf → 1.73.1

package/dist/v2/headless.cjs

@@ -543,10 +543,10 @@ function useAgent({ agentId, threadId, runtimeAgentId, updates, throttleMs } = {
 
 //#endregion
 //#region src/v2/hooks/use-frontend-tool.tsx
-const EMPTY_DEPS$1 = [];
+const EMPTY_DEPS$2 = [];
 function useFrontendTool(tool, deps) {
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
-	const extraDeps = deps ?? EMPTY_DEPS$1;
+	const extraDeps = deps ?? EMPTY_DEPS$2;
 	(0, react.useLayoutEffect)(() => {
 		const name = tool.name;
 		if (copilotkit.getTool({
@@ -575,6 +575,103 @@ function useFrontendTool(tool, deps) {
 	]);
 }
 
+//#endregion
+//#region src/v2/hooks/use-frontend-tools.tsx
+const EMPTY_DEPS$1 = [];
+const EMPTY_TOOLS = [];
+/**
+* Register a list of frontend tools whose length can change between renders.
+*
+* `useFrontendTool` registers exactly one tool per call, so it cannot be called
+* in a loop over a runtime-length list without breaking the rules of hooks.
+* This hook runs a single effect over the whole array instead, which makes it
+* safe to build the list from state, props, or a server response.
+*
+* Tools are keyed by `name` plus `agentId`, the same as `useFrontendTool`. A
+* tool that disappears from the array is unregistered on the next render, and
+* every tool is unregistered on unmount. Renderers stay registered after
+* unmount so past tool calls still render in the chat history.
+*
+* @param tools - The tools to register. May be empty and may change length.
+* @param deps - Extra dependencies that force re-registration, compared by
+* identity like the second argument of `useEffect`. Use this when a handler
+* closes over a value that is not part of the tool definition. Keep the array
+* a constant length across renders.
+*
+* @example
+* Register one tool per item in application state:
+* ```tsx
+* const [reports, setReports] = useState<Report[]>([]);
+*
+* useFrontendTools(
+*   reports.map((report) => ({
+*     name: `open_${report.id}`,
+*     description: `Open the ${report.title} report`,
+*     handler: async () => navigate(`/reports/${report.id}`),
+*   })),
+*   [navigate],
+* );
+* ```
+*
+* @example
+* Register tools described by the backend:
+* ```tsx
+* const { data } = useQuery(fetchToolDescriptors);
+*
+* useFrontendTools(
+*   (data ?? []).map((descriptor) => ({
+*     name: descriptor.name,
+*     description: descriptor.description,
+*     parameters: z.object({ query: z.string() }),
+*     handler: async ({ query }) => runDescriptor(descriptor.id, query),
+*   })),
+* );
+* ```
+*/
+function useFrontendTools(tools, deps) {
+	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
+	const toolList = tools ?? EMPTY_TOOLS;
+	const extraDeps = deps ?? EMPTY_DEPS$1;
+	(0, react.useLayoutEffect)(() => {
+		const deduped = /* @__PURE__ */ new Map();
+		for (const tool of toolList) {
+			const key = `${tool.agentId ?? ""}:${tool.name}`;
+			if (deduped.has(key)) console.warn(`Tool '${tool.name}' is listed more than once for agent '${tool.agentId || "global"}' in the same useFrontendTools call. Using the last entry.`);
+			deduped.set(key, tool);
+		}
+		const registered = [...deduped.values()];
+		for (const tool of registered) {
+			if (copilotkit.getTool({
+				toolName: tool.name,
+				agentId: tool.agentId
+			})) {
+				console.warn(`Tool '${tool.name}' already exists for agent '${tool.agentId || "global"}'. Overriding with latest registration.`);
+				copilotkit.removeTool(tool.name, tool.agentId);
+			}
+			copilotkit.addTool(tool);
+			if (tool.render) copilotkit.addHookRenderToolCall({
+				name: tool.name,
+				args: tool.parameters,
+				agentId: tool.agentId,
+				render: tool.render
+			});
+		}
+		return () => {
+			for (const tool of registered) copilotkit.removeTool(tool.name, tool.agentId);
+		};
+	}, [
+		JSON.stringify(toolList.map((tool) => [
+			tool.name,
+			tool.description ?? null,
+			tool.agentId ?? null,
+			tool.available ?? null,
+			tool.webmcp ?? null
+		])),
+		copilotkit,
+		...extraDeps
+	]);
+}
+
 //#endregion
 //#region src/v2/hooks/use-component.tsx
 /**
@@ -721,6 +818,7 @@ function useHumanInTheLoop(tool, deps) {
 	]);
 	useFrontendTool({
 		...tool,
+		type: "human-in-the-loop",
 		handler,
 		render: RenderComponent
 	}, deps);
@@ -1706,6 +1804,7 @@ Object.defineProperty(exports, 'useCopilotKit', {
   }
 });
 exports.useFrontendTool = useFrontendTool;
+exports.useFrontendTools = useFrontendTools;
 exports.useHumanInTheLoop = useHumanInTheLoop;
 exports.useInterrupt = useInterrupt;
 exports.useRenderTool = useRenderTool;