@copilotkit/react-core 1.9.2-next.9 → 1.9.3-next.0

package/src/components/copilot-provider/copilotkit.tsx

@@ -272,26 +272,29 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     headers,
     credentials: copilotApiConfig.credentials,
     showDevConsole: props.showDevConsole ?? false,
-    onTrace: props.onTrace,
+    onError: props.onError,
   });
 
   const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = useState<{
     [key: string]: CopilotChatSuggestionConfiguration;
   }>({});
 
-  const addChatSuggestionConfiguration = (
-    id: string,
-    suggestion: CopilotChatSuggestionConfiguration,
-  ) => {
-    setChatSuggestionConfiguration((prev) => ({ ...prev, [id]: suggestion }));
-  };
+  const addChatSuggestionConfiguration = useCallback(
+    (id: string, suggestion: CopilotChatSuggestionConfiguration) => {
+      setChatSuggestionConfiguration((prev) => ({ ...prev, [id]: suggestion }));
+    },
+    [setChatSuggestionConfiguration],
+  );
 
-  const removeChatSuggestionConfiguration = (id: string) => {
-    setChatSuggestionConfiguration((prev) => {
-      const { [id]: _, ...rest } = prev;
-      return rest;
-    });
-  };
+  const removeChatSuggestionConfiguration = useCallback(
+    (id: string) => {
+      setChatSuggestionConfiguration((prev) => {
+        const { [id]: _, ...rest } = prev;
+        return rest;
+      });
+    },
+    [setChatSuggestionConfiguration],
+  );
 
   const [availableAgents, setAvailableAgents] = useState<Agent[]>([]);
   const [coagentStates, setCoagentStates] = useState<Record<string, CoagentState>>({});
@@ -389,6 +392,45 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
 
   const memoizedChildren = useMemo(() => children, [children]);
 
+  const agentLock = useMemo(() => props.agent ?? null, [props.agent]);
+
+  const forwardedParameters = useMemo(
+    () => props.forwardedParameters ?? {},
+    [props.forwardedParameters],
+  );
+
+  const updateExtensions = useCallback(
+    (newExtensions: SetStateAction<ExtensionsInput>) => {
+      setExtensions((prev: ExtensionsInput) => {
+        const resolved = typeof newExtensions === "function" ? newExtensions(prev) : newExtensions;
+        const isSameLength = Object.keys(resolved).length === Object.keys(prev).length;
+        const isEqual =
+          isSameLength &&
+          // @ts-ignore
+          Object.entries(resolved).every(([key, value]) => prev[key] === value);
+
+        return isEqual ? prev : resolved;
+      });
+    },
+    [setExtensions],
+  );
+
+  const updateAuthStates = useCallback(
+    (newAuthStates: SetStateAction<Record<string, AuthState>>) => {
+      setAuthStates((prev) => {
+        const resolved = typeof newAuthStates === "function" ? newAuthStates(prev) : newAuthStates;
+        const isSameLength = Object.keys(resolved).length === Object.keys(prev).length;
+        const isEqual =
+          isSameLength &&
+          // @ts-ignore
+          Object.entries(resolved).every(([key, value]) => prev[key] === value);
+
+        return isEqual ? prev : resolved;
+      });
+    },
+    [setAuthStates],
+  );
+
   return (
     <CopilotContext.Provider
       value={{
@@ -425,8 +467,8 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
         agentSession,
         setAgentSession,
         runtimeClient,
-        forwardedParameters: props.forwardedParameters || {},
-        agentLock: props.agent || null,
+        forwardedParameters,
+        agentLock,
         threadId: internalThreadId,
         setThreadId,
         runId,
@@ -435,13 +477,13 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
         availableAgents,
         authConfig_c: props.authConfig_c,
         authStates_c: authStates,
-        setAuthStates_c: setAuthStates,
+        setAuthStates_c: updateAuthStates,
         extensions,
-        setExtensions,
+        setExtensions: updateExtensions,
         langGraphInterruptAction,
         setLangGraphInterruptAction,
         removeLangGraphInterruptAction,
-        onTrace: props.onTrace,
+        onError: props.onError,
       }}
     >
       <CopilotMessages>{memoizedChildren}</CopilotMessages>
@@ -452,7 +494,7 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
 export const defaultCopilotContextCategories = ["global"];
 
 function entryPointsToFunctionCallHandler(actions: FrontendAction<any>[]): FunctionCallHandler {
-  return async ({ name, args }) => {
+  return async ({ name, args }: { name: string; args: Record<string, any> }) => {
     let actionsByFunctionName: Record<string, FrontendAction<any>> = {};
     for (let action of actions) {
       actionsByFunctionName[action.name] = action;

package/src/context/copilot-context.tsx

@@ -1,4 +1,4 @@
-import { CopilotCloudConfig, FunctionCallHandler, CopilotTraceHandler } from "@copilotkit/shared";
+import { CopilotCloudConfig, FunctionCallHandler, CopilotErrorHandler } from "@copilotkit/shared";
 import {
   ActionRenderProps,
   CatchAllActionRenderProps,
@@ -195,7 +195,7 @@ export interface CopilotContextParams {
   /**
    * The forwarded parameters to use for the task.
    */
-  forwardedParameters?: Pick<ForwardedParametersInput, "temperature">;
+  forwardedParameters?: Partial<Pick<ForwardedParametersInput, "temperature">>;
   availableAgents: Agent[];
 
   /**
@@ -222,7 +222,7 @@ export interface CopilotContextParams {
   /**
    * Optional trace handler for comprehensive debugging and observability.
    */
-  onTrace?: CopilotTraceHandler;
+  onError?: CopilotErrorHandler;
 }
 
 const emptyCopilotContext: CopilotContextParams = {
@@ -293,7 +293,7 @@ const emptyCopilotContext: CopilotContextParams = {
   langGraphInterruptAction: null,
   setLangGraphInterruptAction: () => null,
   removeLangGraphInterruptAction: () => null,
-  onTrace: undefined,
+  onError: undefined,
 };
 
 export const CopilotContext = React.createContext<CopilotContextParams>(emptyCopilotContext);

package/src/hooks/__tests__/use-coagent-config.test.ts

@@ -0,0 +1,284 @@
+import { renderHook } from "@testing-library/react";
+import { useCoAgent } from "../use-coagent";
+
+// Mock the dependencies
+const mockSetCoagentStatesWithRef = jest.fn();
+const mockAppendMessage = jest.fn();
+const mockRunChatCompletion = jest.fn();
+
+jest.mock("../use-copilot-chat", () => ({
+  useCopilotChat: () => ({
+    appendMessage: mockAppendMessage,
+    runChatCompletion: mockRunChatCompletion,
+  }),
+}));
+
+jest.mock("../use-copilot-runtime-client", () => ({
+  useCopilotRuntimeClient: () => ({
+    loadAgentState: jest.fn().mockResolvedValue({
+      data: { loadAgentState: { state: "{}", threadExists: false } },
+      error: null,
+    }),
+  }),
+}));
+
+jest.mock("../../context", () => ({
+  useCopilotContext: () => ({
+    availableAgents: [],
+    coagentStates: {},
+    coagentStatesRef: { current: {} },
+    setCoagentStatesWithRef: mockSetCoagentStatesWithRef,
+    threadId: "test-thread",
+    copilotApiConfig: {
+      headers: {},
+      chatApiEndpoint: "test-endpoint",
+      publicApiKey: "test-key",
+    },
+    showDevConsole: false,
+  }),
+  useCopilotMessagesContext: () => ({
+    messages: [],
+  }),
+}));
+
+jest.mock("../../components/toast/toast-provider", () => ({
+  useToast: () => ({
+    setBannerError: jest.fn(),
+  }),
+}));
+
+jest.mock("../../components/error-boundary/error-utils", () => ({
+  useAsyncCallback: (fn: any) => fn,
+}));
+
+describe("useCoAgent config synchronization", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockSetCoagentStatesWithRef.mockImplementation((updater) => {
+      if (typeof updater === "function") {
+        updater({});
+      }
+    });
+  });
+
+  it("should call setCoagentStatesWithRef when config changes", () => {
+    const { rerender } = renderHook(
+      ({ config }) =>
+        useCoAgent({
+          name: "test-agent",
+          initialState: { count: 0 },
+          config,
+        }),
+      {
+        initialProps: { config: { configurable: { model: "gpt-4" } } },
+      },
+    );
+
+    // Clear the initial calls
+    mockSetCoagentStatesWithRef.mockClear();
+
+    // Change config
+    rerender({ config: { configurable: { model: "gpt-4o" } } });
+
+    // Should have called setCoagentStatesWithRef with new config
+    expect(mockSetCoagentStatesWithRef).toHaveBeenCalledWith(expect.any(Function));
+  });
+
+  it("should not call setCoagentStatesWithRef when config is unchanged", () => {
+    const config = { configurable: { model: "gpt-4" } };
+
+    const { rerender } = renderHook(
+      ({ config }) =>
+        useCoAgent({
+          name: "test-agent",
+          initialState: { count: 0 },
+          config,
+        }),
+      {
+        initialProps: { config },
+      },
+    );
+
+    // Clear the initial calls
+    mockSetCoagentStatesWithRef.mockClear();
+
+    // Re-render with same config
+    rerender({ config });
+
+    // Should not have called setCoagentStatesWithRef
+    expect(mockSetCoagentStatesWithRef).not.toHaveBeenCalled();
+  });
+
+  it("should handle backward compatibility with configurable prop", () => {
+    const { rerender } = renderHook(
+      ({ configurable }) =>
+        useCoAgent({
+          name: "test-agent",
+          initialState: { count: 0 },
+          configurable,
+        }),
+      {
+        initialProps: { configurable: { model: "gpt-4" } },
+      },
+    );
+
+    // Clear the initial calls
+    mockSetCoagentStatesWithRef.mockClear();
+
+    // Change configurable prop
+    rerender({ configurable: { model: "gpt-4o" } });
+
+    // Should have called setCoagentStatesWithRef
+    expect(mockSetCoagentStatesWithRef).toHaveBeenCalledWith(expect.any(Function));
+  });
+
+  it("should update config while preserving other state properties", () => {
+    let capturedUpdater: any = null;
+
+    mockSetCoagentStatesWithRef.mockImplementation((updater) => {
+      capturedUpdater = updater;
+      return updater;
+    });
+
+    const { rerender } = renderHook(
+      ({ config }) =>
+        useCoAgent({
+          name: "test-agent",
+          initialState: { count: 0 },
+          config,
+        }),
+      {
+        initialProps: { config: { configurable: { model: "gpt-4" } } },
+      },
+    );
+
+    // Clear the initial calls and reset captured updater
+    mockSetCoagentStatesWithRef.mockClear();
+    capturedUpdater = null;
+
+    // Change config
+    rerender({ config: { configurable: { model: "gpt-4o" } } });
+
+    // Should have called setCoagentStatesWithRef
+    expect(mockSetCoagentStatesWithRef).toHaveBeenCalledWith(expect.any(Function));
+    expect(capturedUpdater).toBeTruthy();
+
+    // Test the updater function behavior
+    const prevState = {
+      "test-agent": {
+        name: "test-agent",
+        state: { count: 5 },
+        config: { configurable: { model: "gpt-4" } },
+        running: true,
+        active: true,
+        threadId: "thread-123",
+        nodeName: "test-node",
+        runId: "run-456",
+      },
+    };
+
+    const newState = capturedUpdater(prevState);
+
+    // Verify the state is updated correctly
+    expect(newState).toEqual({
+      "test-agent": {
+        name: "test-agent",
+        state: { count: 5 }, // State preserved
+        config: { configurable: { model: "gpt-4o" } }, // Config updated
+        running: true, // Other properties preserved
+        active: true,
+        threadId: "thread-123",
+        nodeName: "test-node",
+        runId: "run-456",
+      },
+    });
+  });
+
+  it("should create new agent state when agent doesn't exist", () => {
+    let capturedUpdater: any = null;
+
+    mockSetCoagentStatesWithRef.mockImplementation((updater) => {
+      capturedUpdater = updater;
+      return updater;
+    });
+
+    const { rerender } = renderHook(
+      ({ config }) =>
+        useCoAgent({
+          name: "test-agent",
+          initialState: { count: 0 },
+          config,
+        }),
+      {
+        initialProps: { config: { configurable: { model: "gpt-4" } } },
+      },
+    );
+
+    // Clear the initial calls and reset captured updater
+    mockSetCoagentStatesWithRef.mockClear();
+    capturedUpdater = null;
+
+    // Change config
+    rerender({ config: { configurable: { model: "gpt-4o" } } });
+
+    // Should have called setCoagentStatesWithRef
+    expect(mockSetCoagentStatesWithRef).toHaveBeenCalledWith(expect.any(Function));
+    expect(capturedUpdater).toBeTruthy();
+
+    // Test the updater function behavior with empty previous state
+    const prevState = {}; // No existing agent state
+
+    const newState = capturedUpdater(prevState);
+
+    // Verify the state creates a new agent state with default values
+    expect(newState).toEqual({
+      "test-agent": {
+        name: "test-agent",
+        state: { count: 0 }, // Uses initialState
+        config: { configurable: { model: "gpt-4o" } }, // New config
+        running: false, // Default values
+        active: false,
+        threadId: undefined,
+        nodeName: undefined,
+        runId: undefined,
+      },
+    });
+  });
+
+  it("should handle deeply nested config changes", () => {
+    const { rerender } = renderHook(
+      ({ config }) =>
+        useCoAgent({
+          name: "test-agent",
+          initialState: { count: 0 },
+          config,
+        }),
+      {
+        initialProps: {
+          config: {
+            configurable: {
+              model: "gpt-4",
+              settings: { temperature: 0.5 },
+            },
+          },
+        },
+      },
+    );
+
+    // Clear the initial calls
+    mockSetCoagentStatesWithRef.mockClear();
+
+    // Change nested config
+    rerender({
+      config: {
+        configurable: {
+          model: "gpt-4",
+          settings: { temperature: 0.7 }, // Only nested property changed
+        },
+      },
+    });
+
+    // Should detect the nested change
+    expect(mockSetCoagentStatesWithRef).toHaveBeenCalledWith(expect.any(Function));
+  });
+});