@copilotkit/react-core 1.63.0 → 1.63.2-canary.1784918757

package/dist/v2/headless.mjs

@@ -1,13 +1,12 @@
-import { CopilotKitCoreReact, useCopilotKit } from "@copilotkit/react-core/v2/context";
+import { CopilotKitCoreReact, useCopilotKit, useCopilotKit as useCopilotKit$1 } from "@copilotkit/react-core/v2/context";
 import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
-import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkit/shared";
-import { twMerge } from "tailwind-merge";
+import { DEFAULT_AGENT_ID, partialJSONParse, randomUUID } from "@copilotkit/shared";
 import { jsx } from "react/jsx-runtime";
-import { HttpAgent, buildResumeArray, isInterruptExpired, randomUUID as randomUUID$1 } from "@ag-ui/client";
-import { CopilotKitCoreRuntimeConnectionStatus, ProxiedCopilotRuntimeAgent, ToolCallStatus, ɵcreateThreadStore, ɵselectFetchMoreError, ɵselectHasNextPage, ɵselectIsFetchingNextPage, ɵselectIsMutating, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
+import { HttpAgent, randomUUID as randomUUID$1 } from "@ag-ui/client";
+import { CopilotKitCoreRuntimeConnectionStatus, ProxiedCopilotRuntimeAgent, ToolCallStatus, ɵInterruptState, ɵcreateThreadStore, ɵselectFetchMoreError, ɵselectHasNextPage, ɵselectIsFetchingNextPage, ɵselectIsMutating, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
 import { z } from "zod";
 
-//#region src/v2/lib/slots.tsx
+//#region src/v2/lib/shallow-stable-ref.ts
 /**
 * Shallow equality comparison for objects.
 */
@@ -47,49 +46,6 @@ function useShallowStableRef(value) {
 	ref.current = value;
 	return ref.current;
 }
-/**
-* Check if a value is a React component type (function, class, forwardRef, memo, etc.)
-*/
-function isReactComponentType(value) {
-	if (typeof value === "function") return true;
-	if (value && typeof value === "object" && "$$typeof" in value && !React.isValidElement(value)) return true;
-	return false;
-}
-/**
-* Internal function to render a slot value as a React element (non-memoized).
-*/
-function renderSlotElement(slot, DefaultComponent, props) {
-	if (typeof slot === "string") {
-		const existingClassName = props.className;
-		return React.createElement(DefaultComponent, {
-			...props,
-			className: twMerge(existingClassName, slot)
-		});
-	}
-	if (isReactComponentType(slot)) return React.createElement(slot, props);
-	if (slot && typeof slot === "object" && !React.isValidElement(slot)) return React.createElement(DefaultComponent, {
-		...props,
-		...slot
-	});
-	return React.createElement(DefaultComponent, props);
-}
-/**
-* Internal memoized wrapper component for renderSlot.
-* Uses forwardRef to support ref forwarding.
-*/
-const MemoizedSlotWrapper = React.memo(React.forwardRef(function MemoizedSlotWrapper(props, ref) {
-	const { $slot, $component, ...rest } = props;
-	return renderSlotElement($slot, $component, ref !== null ? {
-		...rest,
-		ref
-	} : rest);
-}), (prev, next) => {
-	if (prev.$slot !== next.$slot) return false;
-	if (prev.$component !== next.$component) return false;
-	const { $slot: _ps, $component: _pc, ...prevRest } = prev;
-	const { $slot: _ns, $component: _nc, ...nextRest } = next;
-	return shallowEqual(prevRest, nextRest);
-});
 
 //#endregion
 //#region src/v2/providers/CopilotChatConfigurationProvider.tsx
@@ -311,16 +267,19 @@ const ALL_UPDATES = [
 function useAgent({ agentId, updates, throttleMs } = {}) {
 	const chatConfig = useCopilotChatConfiguration();
 	const resolvedAgentId = agentId ?? chatConfig?.agentId ?? DEFAULT_AGENT_ID;
-	const { copilotkit } = useCopilotKit();
+	const { copilotkit } = useCopilotKit$1();
 	const providerThrottleMs = copilotkit.defaultThrottleMs;
 	const [, forceUpdate] = useReducer((x) => x + 1, 0);
 	const updateFlags = useMemo(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
 	const provisionalAgentCache = useRef(/* @__PURE__ */ new Map());
-	const agent = useMemo(() => {
+	const { agent, isReady } = useMemo(() => {
 		const existing = copilotkit.getAgent(resolvedAgentId);
 		if (existing) {
 			provisionalAgentCache.current.delete(resolvedAgentId);
-			return existing;
+			return {
+				agent: existing,
+				isReady: true
+			};
 		}
 		const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
 		const status = copilotkit.runtimeConnectionStatus;
@@ -328,7 +287,10 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 			const cached = provisionalAgentCache.current.get(resolvedAgentId);
 			if (cached) {
 				copilotkit.applyHeadersToAgent(cached);
-				return cached;
+				return {
+					agent: cached,
+					isReady: false
+				};
 			}
 			const provisional = new ProxiedCopilotRuntimeAgent({
 				runtimeUrl: copilotkit.runtimeUrl,
@@ -338,13 +300,19 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 			});
 			copilotkit.applyHeadersToAgent(provisional);
 			provisionalAgentCache.current.set(resolvedAgentId, provisional);
-			return provisional;
+			return {
+				agent: provisional,
+				isReady: false
+			};
 		}
 		if (isRuntimeConfigured && status === CopilotKitCoreRuntimeConnectionStatus.Error) {
 			const cached = provisionalAgentCache.current.get(resolvedAgentId);
 			if (cached) {
 				copilotkit.applyHeadersToAgent(cached);
-				return cached;
+				return {
+					agent: cached,
+					isReady: false
+				};
 			}
 			const provisional = new ProxiedCopilotRuntimeAgent({
 				runtimeUrl: copilotkit.runtimeUrl,
@@ -354,7 +322,10 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 			});
 			copilotkit.applyHeadersToAgent(provisional);
 			provisionalAgentCache.current.set(resolvedAgentId, provisional);
-			return provisional;
+			return {
+				agent: provisional,
+				isReady: false
+			};
 		}
 		const knownAgents = Object.keys(copilotkit.agents ?? {});
 		const runtimePart = isRuntimeConfigured ? `runtimeUrl=${copilotkit.runtimeUrl}` : "no runtimeUrl";
@@ -415,14 +386,17 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 		configThreadId,
 		configHasExplicitThreadId
 	]);
-	return { agent };
+	return {
+		agent,
+		isReady
+	};
 }
 
 //#endregion
 //#region src/v2/hooks/use-frontend-tool.tsx
 const EMPTY_DEPS$1 = [];
 function useFrontendTool(tool, deps) {
-	const { copilotkit } = useCopilotKit();
+	const { copilotkit } = useCopilotKit$1();
 	const extraDeps = deps ?? EMPTY_DEPS$1;
 	useEffect(() => {
 		const name = tool.name;
@@ -522,7 +496,7 @@ function useComponent(config, deps) {
 //#endregion
 //#region src/v2/hooks/use-human-in-the-loop.tsx
 function useHumanInTheLoop(tool, deps) {
-	const { copilotkit } = useCopilotKit();
+	const { copilotkit } = useCopilotKit$1();
 	const resolvePromiseRef = useRef(null);
 	const cleanupAbortRef = useRef(null);
 	const respond = useCallback(async (result) => {
@@ -650,14 +624,15 @@ function toLegacyEvent(pending) {
 * ```
 */
 function useInterrupt(config) {
-	const { copilotkit } = useCopilotKit();
+	const { copilotkit } = useCopilotKit$1();
 	const { agent } = useAgent({ agentId: config.agentId });
 	const [pending, setPending] = useState(null);
 	const pendingRef = useRef(pending);
 	pendingRef.current = pending;
 	const [handlerResult, setHandlerResult] = useState(null);
-	const responsesRef = useRef({});
+	const interruptStateRef = useRef(new ɵInterruptState());
 	useEffect(() => {
+		const interruptState = interruptStateRef.current;
 		let localLegacy = null;
 		let localStandard = null;
 		const subscription = agent.subscribe({
@@ -673,106 +648,111 @@ function useInterrupt(config) {
 			onRunStartedEvent: () => {
 				localLegacy = null;
 				localStandard = null;
-				responsesRef.current = {};
+				interruptState.clear();
 				setPending(null);
 			},
 			onRunFinalized: () => {
-				if (localStandard && localStandard.length > 0) setPending({
-					kind: "standard",
-					interrupts: localStandard
-				});
-				else if (localLegacy) setPending({
-					kind: "legacy",
-					event: localLegacy
-				});
+				if (localStandard && localStandard.length > 0) {
+					interruptState.setStandard(localStandard);
+					setPending(interruptState.pending);
+				} else if (localLegacy) {
+					interruptState.setLegacy(localLegacy);
+					setPending(interruptState.pending);
+				}
 				localLegacy = null;
 				localStandard = null;
 			},
 			onRunFailed: () => {
 				localLegacy = null;
 				localStandard = null;
-				responsesRef.current = {};
+				interruptState.clear();
 				setPending(null);
 			}
 		});
-		return () => subscription.unsubscribe();
+		return () => {
+			subscription.unsubscribe();
+			interruptState.clear();
+		};
 	}, [agent]);
-	const submitStandardIfComplete = useCallback(async (interrupts) => {
-		if (!interrupts.every((i) => responsesRef.current[i.id])) return;
-		const expired = interrupts.find((i) => isInterruptExpired(i));
-		if (expired) {
-			console.error(`[CopilotKit] useInterrupt: interrupt ${expired.id} expired at ${expired.expiresAt}; not resuming.`);
-			responsesRef.current = {};
-			setPending(null);
-			return;
-		}
-		const resume = buildResumeArray(interrupts, responsesRef.current);
-		for (const i of interrupts) {
-			if (!i.toolCallId) continue;
-			const response = responsesRef.current[i.id];
-			const content = response.status === "cancelled" ? { status: "cancelled" } : response.payload ?? { status: "resolved" };
-			agent.addMessage({
-				id: randomUUID$1(),
-				role: "tool",
-				toolCallId: i.toolCallId,
-				content: JSON.stringify(content)
-			});
-		}
-		responsesRef.current = {};
-		try {
+	const resolve = useCallback(async (payload, interruptId) => {
+		const current = pendingRef.current;
+		if (!current) return;
+		if (current.kind === "standard" && current.interrupts.length > 1 && interruptId === void 0) console.warn(`[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`);
+		const decision = interruptStateRef.current.resolve(payload, interruptId);
+		if (decision.kind === "legacy-resume") try {
 			return await copilotkit.runAgent({
 				agent,
-				resume
+				forwardedProps: { command: {
+					resume: decision.payload,
+					interruptEvent: decision.interruptValue
+				} }
 			});
 		} catch (err) {
 			console.error("[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing", err);
 			setPending(null);
 			throw err;
 		}
-	}, [agent, copilotkit]);
-	const resolve = useCallback(async (payload, interruptId) => {
-		const current = pendingRef.current;
-		if (!current) return;
-		if (current.kind === "legacy") try {
+		if (decision.kind === "expired") {
+			console.error(`[CopilotKit] useInterrupt: interrupt ${decision.interrupt.id} expired at ${decision.interrupt.expiresAt}; not resuming.`);
+			interruptStateRef.current.clear();
+			setPending(null);
+			return;
+		}
+		if (decision.kind !== "resume") return;
+		for (const toolResult of decision.toolResults) agent.addMessage({
+			id: randomUUID$1(),
+			role: "tool",
+			toolCallId: toolResult.toolCallId,
+			content: toolResult.content
+		});
+		try {
 			return await copilotkit.runAgent({
 				agent,
-				forwardedProps: { command: {
-					resume: payload,
-					interruptEvent: current.event.value
-				} }
+				resume: decision.resume
 			});
 		} catch (err) {
 			console.error("[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing", err);
+			interruptStateRef.current.clear();
 			setPending(null);
 			throw err;
 		}
-		if (current.interrupts.length > 1 && interruptId === void 0) console.warn(`[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`);
-		const id = interruptId ?? current.interrupts[0]?.id;
-		if (!id) return;
-		responsesRef.current[id] = {
-			status: "resolved",
-			payload
-		};
-		return submitStandardIfComplete(current.interrupts);
-	}, [
-		agent,
-		copilotkit,
-		submitStandardIfComplete
-	]);
+	}, [agent, copilotkit]);
 	const cancel = useCallback(async (interruptId) => {
 		const current = pendingRef.current;
 		if (!current) return;
-		if (current.kind === "legacy") {
+		if (current.kind === "standard" && current.interrupts.length > 1 && interruptId === void 0) console.warn(`[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`);
+		const decision = interruptStateRef.current.cancel(interruptId);
+		if (decision.kind === "dismiss") {
 			console.warn("[CopilotKit] useInterrupt: cancel() is not supported for legacy on_interrupt interrupts; dismissing.");
+			interruptStateRef.current.clear();
+			setPending(null);
+			return;
+		}
+		if (decision.kind === "expired") {
+			console.error(`[CopilotKit] useInterrupt: interrupt ${decision.interrupt.id} expired at ${decision.interrupt.expiresAt}; not resuming.`);
+			interruptStateRef.current.clear();
 			setPending(null);
 			return;
 		}
-		if (current.interrupts.length > 1 && interruptId === void 0) console.warn(`[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`);
-		const id = interruptId ?? current.interrupts[0]?.id;
-		if (!id) return;
-		responsesRef.current[id] = { status: "cancelled" };
-		return submitStandardIfComplete(current.interrupts);
-	}, [submitStandardIfComplete]);
+		if (decision.kind !== "resume") return;
+		for (const toolResult of decision.toolResults) agent.addMessage({
+			id: randomUUID$1(),
+			role: "tool",
+			toolCallId: toolResult.toolCallId,
+			content: toolResult.content
+		});
+		try {
+			return await copilotkit.runAgent({
+				agent,
+				resume: decision.resume
+			});
+		} catch (err) {
+			console.error("[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing", err);
+			interruptStateRef.current.clear();
+			setPending(null);
+			throw err;
+		}
+	}, [agent, copilotkit]);
 	const renderRef = useRef(config.render);
 	renderRef.current = config.render;
 	const enabledRef = useRef(config.enabled);
@@ -814,7 +794,7 @@ function useInterrupt(config) {
 			maybePromise = handler({
 				event: legacyEvent,
 				interrupt: pending.kind === "standard" ? pending.interrupts[0] : null,
-				interrupts: pending.kind === "standard" ? pending.interrupts : [],
+				interrupts: pending.kind === "standard" ? [...pending.interrupts] : [],
 				resolve: resolveRef.current,
 				cancel: cancelRef.current
 			});
@@ -843,7 +823,7 @@ function useInterrupt(config) {
 		return renderRef.current({
 			event: legacyEvent,
 			interrupt: pending.kind === "standard" ? pending.interrupts[0] : null,
-			interrupts: pending.kind === "standard" ? pending.interrupts : [],
+			interrupts: pending.kind === "standard" ? [...pending.interrupts] : [],
 			result: handlerResult,
 			resolve,
 			cancel
@@ -874,7 +854,7 @@ function useInterrupt(config) {
 //#endregion
 //#region src/v2/hooks/use-suggestions.tsx
 function useSuggestions({ agentId } = {}) {
-	const { copilotkit } = useCopilotKit();
+	const { copilotkit } = useCopilotKit$1();
 	const config = useCopilotChatConfiguration();
 	const resolvedAgentId = useMemo(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID, [agentId, config?.agentId]);
 	const [suggestions, setSuggestions] = useState(() => {
@@ -927,7 +907,7 @@ function useSuggestions({ agentId } = {}) {
 //#endregion
 //#region src/v2/hooks/use-configure-suggestions.tsx
 function useConfigureSuggestions(config, deps) {
-	const { copilotkit } = useCopilotKit();
+	const { copilotkit } = useCopilotKit$1();
 	const chatConfig = useCopilotChatConfiguration();
 	const extraDeps = deps ?? [];
 	const resolvedConsumerAgentId = useMemo(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID, [chatConfig?.agentId]);
@@ -1087,7 +1067,7 @@ function normalizeStaticSuggestions(suggestions) {
 //#region src/v2/hooks/use-agent-context.tsx
 function useAgentContext(context) {
 	const { description, value } = context;
-	const { copilotkit } = useCopilotKit();
+	const { copilotkit } = useCopilotKit$1();
 	const stringValue = useMemo(() => {
 		if (typeof value === "string") return value;
 		return JSON.stringify(value);
@@ -1158,7 +1138,7 @@ function useThreadStoreSelector(store, selector) {
 * ```
 */
 function useThreads({ agentId, includeArchived, limit, enabled = true }) {
-	const { copilotkit } = useCopilotKit();
+	const { copilotkit } = useCopilotKit$1();
 	const [store] = useState(() => ɵcreateThreadStore({ fetch: globalThis.fetch }));
 	const coreThreads = useThreadStoreSelector(store, ɵselectThreads);
 	const threads = useMemo(() => coreThreads.map(({ id, agentId, name, archived, createdAt, updatedAt, lastRunAt }) => ({
@@ -1352,7 +1332,7 @@ const EMPTY_DEPS = [];
 * ```
 */
 function useRenderTool(config, deps) {
-	const { copilotkit } = useCopilotKit();
+	const { copilotkit } = useCopilotKit$1();
 	const extraDeps = deps ?? EMPTY_DEPS;
 	useEffect(() => {
 		const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
@@ -1389,6 +1369,76 @@ function useRenderTool(config, deps) {
 	]);
 }
 
+//#endregion
+//#region src/v2/hooks/use-render-tool-call.tsx
+/**
+* Memoized component that renders a single tool call.
+* This prevents unnecessary re-renders when parent components update
+* but the tool call data hasn't changed.
+*/
+const ToolCallRenderer = React.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
+	const args = useMemo(() => partialJSONParse(toolCall.function.arguments), [toolCall.function.arguments]);
+	const toolName = toolCall.function.name;
+	if (toolMessage) return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: ToolCallStatus.Complete,
+		result: toolMessage.content
+	});
+	else if (isExecuting) return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: ToolCallStatus.Executing,
+		result: void 0
+	});
+	else return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: ToolCallStatus.InProgress,
+		result: void 0
+	});
+}, (prevProps, nextProps) => {
+	if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
+	if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
+	if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
+	if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
+	if (prevProps.isExecuting !== nextProps.isExecuting) return false;
+	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
+	return true;
+});
+/**
+* Hook that returns a function to render tool calls based on the render functions
+* defined in CopilotKitProvider.
+*
+* @returns A function that takes a tool call and optional tool message and returns the rendered component
+*/
+function useRenderToolCall() {
+	const { copilotkit, executingToolCallIds } = useCopilotKit$1();
+	const agentId = useCopilotChatConfiguration()?.agentId ?? DEFAULT_AGENT_ID;
+	const renderToolCalls = useSyncExternalStore((callback) => {
+		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
+	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
+	return useCallback(({ toolCall, toolMessage }) => {
+		const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
+		const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
+		if (!renderConfig) return null;
+		const RenderComponent = renderConfig.render;
+		return /* @__PURE__ */ jsx(ToolCallRenderer, {
+			toolCall,
+			toolMessage,
+			RenderComponent,
+			isExecuting: executingToolCallIds.has(toolCall.id)
+		}, toolCall.id);
+	}, [
+		renderToolCalls,
+		executingToolCallIds,
+		agentId
+	]);
+}
+
 //#endregion
 //#region src/v2/hooks/use-capabilities.tsx
 /**
@@ -1410,5 +1460,5 @@ function useCapabilities(agentId) {
 }
 
 //#endregion
-export { CopilotChatConfigurationProvider, CopilotChatDefaultLabels, CopilotKitCoreReact, defineToolCallRenderer, useAgent, useAgentContext, useCapabilities, useComponent, useConfigureSuggestions, useCopilotChatConfiguration, useFrontendTool, useHumanInTheLoop, useInterrupt, useRenderTool, useSuggestions, useThreads };
+export { CopilotChatConfigurationProvider, CopilotChatDefaultLabels, CopilotKitCoreReact, UseAgentUpdate, defineToolCallRenderer, useAgent, useAgentContext, useCapabilities, useComponent, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useFrontendTool, useHumanInTheLoop, useInterrupt, useRenderTool, useRenderToolCall, useSuggestions, useThreads };
 //# sourceMappingURL=headless.mjs.map