@copilotkit/react-core 1.50.0-beta.1 → 1.50.0-beta.2

package/dist/types/interrupt-action.d.ts

@@ -1,5 +1,5 @@
 import '@copilotkit/runtime-client-gql';
-export { f as LangGraphInterruptAction, h as LangGraphInterruptActionSetter, g as LangGraphInterruptActionSetterArgs, e as LangGraphInterruptRender, L as LangGraphInterruptRenderHandlerProps, d as LangGraphInterruptRenderProps, Q as QueuedInterruptEvent } from '../copilot-context-1cd70a3f.js';
+export { f as LangGraphInterruptAction, h as LangGraphInterruptActionSetter, g as LangGraphInterruptActionSetterArgs, e as LangGraphInterruptRender, L as LangGraphInterruptRenderHandlerProps, d as LangGraphInterruptRenderProps, Q as QueuedInterruptEvent } from '../copilot-context-81022020.js';
 import '@copilotkit/shared';
 import './frontend-action.js';
 import 'react';

package/dist/types/interrupt-action.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/interrupt-action.ts"],"sourcesContent":["import { LangGraphInterruptEvent } from \"@copilotkit/runtime-client-gql\";\nimport { AgentSession } from \"../context/copilot-context\";\n\nexport interface LangGraphInterruptRenderHandlerProps<TEventValue = any> {\n  event: LangGraphInterruptEvent<TEventValue>;\n  resolve: (resolution: string) => void;\n}\n\nexport interface LangGraphInterruptRenderProps<TEventValue = any> {\n  result: unknown;\n  event: LangGraphInterruptEvent<TEventValue>;\n  resolve: (resolution: string) => void;\n}\n\nexport interface LangGraphInterruptRender<TEventValue = any> {\n  id: string;\n  /**\n   * The handler function to handle the event.\n   */\n  handler?: (props: LangGraphInterruptRenderHandlerProps<TEventValue>) => any | Promise<any>;\n  /**\n   * The render function to handle the event.\n   */\n  render?: (props: LangGraphInterruptRenderProps<TEventValue>) => string | React.ReactElement;\n  /**\n   * Method that returns a boolean, indicating if the interrupt action should run\n   * Useful when using multiple interrupts\n   */\n  enabled?: (args: { eventValue: TEventValue; agentMetadata: AgentSession | null }) => boolean;\n}\n\nexport type LangGraphInterruptAction = LangGraphInterruptRender & {\n  event?: LangGraphInterruptEvent;\n};\n\nexport type LangGraphInterruptActionSetterArgs = Partial<LangGraphInterruptRender> | null;\nexport type LangGraphInterruptActionSetter = (\n  threadId: string,\n  action: LangGraphInterruptActionSetterArgs,\n) => void;\n\nexport interface QueuedInterruptEvent {\n  eventId: string; // Generated unique ID for tracking\n  threadId: string;\n  event: LangGraphInterruptEvent;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../src/types/interrupt-action.ts"],"sourcesContent":["import { LangGraphInterruptEvent } from \"@copilotkit/runtime-client-gql\";\nimport { AgentSession } from \"../context/copilot-context\";\n\nexport interface LangGraphInterruptRenderHandlerProps<TEventValue = any> {\n  event: LangGraphInterruptEvent<TEventValue>;\n  resolve: (resolution: string) => void;\n}\n\nexport interface LangGraphInterruptRenderProps<TEventValue = any> {\n  result: unknown;\n  event: LangGraphInterruptEvent<TEventValue>;\n  resolve: (resolution: string) => void;\n}\n\nexport interface LangGraphInterruptRender<TEventValue = any> {\n  id: string;\n  /**\n   * The handler function to handle the event.\n   */\n  handler?: (props: LangGraphInterruptRenderHandlerProps<TEventValue>) => any | Promise<any>;\n  /**\n   * The render function to handle the event.\n   */\n  render?: (props: LangGraphInterruptRenderProps<TEventValue>) => string | React.ReactElement;\n  /**\n   * Method that returns a boolean, indicating if the interrupt action should run\n   * Useful when using multiple interrupts\n   */\n  enabled?: (args: { eventValue: TEventValue; agentMetadata: AgentSession }) => boolean;\n}\n\nexport type LangGraphInterruptAction = LangGraphInterruptRender & {\n  event?: LangGraphInterruptEvent;\n};\n\nexport type LangGraphInterruptActionSetterArgs = Partial<LangGraphInterruptRender> | null;\nexport type LangGraphInterruptActionSetter = (\n  threadId: string,\n  action: LangGraphInterruptActionSetterArgs,\n) => void;\n\nexport interface QueuedInterruptEvent {\n  eventId: string; // Generated unique ID for tracking\n  threadId: string;\n  event: LangGraphInterruptEvent;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/jest.config.js

@@ -9,5 +9,17 @@ module.exports = {
   setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!(react-markdown|streamdown|@copilotkitnext)/)",
+  ],
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest",
+    "^.+\\.(js|jsx|mjs)$": ["ts-jest", {
+      tsconfig: {
+        allowJs: true,
+      },
+    }],
   },
 };

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.50.0-beta.1",
+  "version": "1.50.0-beta.2",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -29,8 +29,8 @@
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "peerDependencies": {
-    "@copilotkitnext/core": "0.0.22",
-    "@copilotkitnext/react": "0.0.22",
+    "@copilotkitnext/core": "0.0.23",
+    "@copilotkitnext/react": "0.0.23",
     "react": "^18 || ^19 || ^19.0.0-rc",
     "react-dom": "^18 || ^19 || ^19.0.0-rc",
     "zod": ">=3.0.0"
@@ -43,10 +43,11 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.0.2",
     "eslint": "^8.56.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^30.0.2",
     "react": "^19.1.0",
-    "react-dom": "^19.0.2",
+    "react-dom": "^19.2.0",
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
@@ -58,8 +59,8 @@
     "@scarf/scarf": "^1.3.0",
     "react-markdown": "^8.0.7",
     "untruncate-json": "^0.0.1",
-    "@copilotkit/shared": "1.50.0-beta.1",
-    "@copilotkit/runtime-client-gql": "1.50.0-beta.1"
+    "@copilotkit/runtime-client-gql": "1.50.0-beta.2",
+    "@copilotkit/shared": "1.50.0-beta.2"
   },
   "keywords": [
     "copilotkit",

package/src/components/CopilotListeners.tsx

@@ -55,9 +55,8 @@ const usePredictStateSubscription = (agent?: AbstractAgent) => {
 
 export function CopilotListeners() {
   const { copilotkit } = useCopilotKit();
-  const { agentSession } = useCopilotContext();
   const existingConfig = useCopilotChatConfiguration();
-  const resolvedAgentId = agentSession?.agentName ?? existingConfig?.agentId ?? "default";
+  const resolvedAgentId = existingConfig?.agentId;
   const { setBannerError } = useToast();
 
   const { agent } = useAgent({ agentId: resolvedAgentId });

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

@@ -252,47 +252,6 @@ export function CopilotMessages({ children }: { children: ReactNode }) {
     [setBannerError, showDevConsole, traceUIError],
   );
 
-  // useEffect(() => {
-  //   if (!threadId || threadId === lastLoadedThreadId.current) return;
-  //   if (
-  //     threadId === lastLoadedThreadId.current &&
-  //     agentSession?.agentName === lastLoadedAgentName.current
-  //   ) {
-  //     return;
-  //   }
-  //
-  //   const fetchMessages = async () => {
-  //     if (!agentSession?.agentName) return;
-  //
-  //     const result = await runtimeClient.loadAgentState({
-  //       threadId,
-  //       agentName: agentSession?.agentName,
-  //     });
-  //
-  //     // Check for GraphQL errors and manually trigger error handling
-  //     if (result.error) {
-  //       // Update refs to prevent infinite retries of the same failed request
-  //       lastLoadedThreadId.current = threadId;
-  //       lastLoadedAgentName.current = agentSession?.agentName;
-  //       handleGraphQLErrors(result.error);
-  //       return; // Don't try to process the data if there's an error
-  //     }
-  //
-  //     const newMessages = result.data?.loadAgentState?.messages;
-  //     if (newMessages === lastLoadedMessages.current) return;
-  //
-  //     if (result.data?.loadAgentState) {
-  //       lastLoadedMessages.current = newMessages;
-  //       lastLoadedThreadId.current = threadId;
-  //       lastLoadedAgentName.current = agentSession?.agentName;
-  //
-  //       const messages = loadMessagesFromJsonRepresentation(JSON.parse(newMessages || "[]"));
-  //       setMessages(messages);
-  //     }
-  //   };
-  //   void fetchMessages();
-  // }, [threadId, agentSession?.agentName]);
-
   useEffect(() => {
     updateTapMessages(messages);
   }, [messages, updateTapMessages]);

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

@@ -72,7 +72,7 @@ export function CopilotKit({ children, ...props }: CopilotKitProps) {
       <CopilotErrorBoundary publicApiKey={publicApiKey} showUsageBanner={enabled}>
         <ThreadsProvider threadId={props.threadId}>
           <CopilotKitProvider
-            runtimeUrl={props.runtimeUrl}
+            {...props}
             renderCustomMessages={renderArr}
             useSingleEndpoint={true}
           >
@@ -519,7 +519,7 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     <CopilotChatConfigurationProvider
       // labels={labels}
       // isModalDefaultOpen={isModalDefaultOpen}
-      agentId={agentSession?.agentName ?? "default"}
+      agentId={props.agent ?? "default"}
       threadId={threadId}
     >
       <CopilotContext.Provider

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

@@ -1,8 +1,43 @@
-import { renderHook } from "@testing-library/react";
+import { renderHook, waitFor } from "@testing-library/react";
 import { useCoAgent } from "../use-coagent";
+import type { AgentSubscriber } from "@ag-ui/client";
+
+// Mock functions for @copilotkitnext/react
+const mockSetState = jest.fn();
+const mockRunAgent = jest.fn();
+const mockAbortRun = jest.fn();
+const mockSubscribe = jest.fn();
+const mockSetProperties = jest.fn();
+
+// Store the last subscriber for triggering events
+let lastSubscriber: AgentSubscriber | null = null;
+
+const mockAgent = {
+  agentId: "test-agent",
+  state: { count: 0 },
+  isRunning: false,
+  threadId: "thread-123",
+  setState: mockSetState,
+  runAgent: mockRunAgent,
+  abortRun: mockAbortRun,
+  subscribe: mockSubscribe.mockImplementation((subscriber: AgentSubscriber) => {
+    lastSubscriber = subscriber;
+    return {
+      unsubscribe: jest.fn(),
+    };
+  }),
+};
 
-// Mock the dependencies
-const mockSetCoagentStatesWithRef = jest.fn();
+jest.mock("@copilotkitnext/react", () => ({
+  useAgent: jest.fn(() => ({ agent: mockAgent })),
+  useCopilotKit: jest.fn(() => ({
+    copilotkit: {
+      setProperties: mockSetProperties,
+    },
+  })),
+}));
+
+// Mock other dependencies
 const mockAppendMessage = jest.fn();
 const mockRunChatCompletion = jest.fn();
 
@@ -27,7 +62,6 @@ jest.mock("../../context", () => ({
     availableAgents: [],
     coagentStates: {},
     coagentStatesRef: { current: {} },
-    setCoagentStatesWithRef: mockSetCoagentStatesWithRef,
     threadId: "test-thread",
     copilotApiConfig: {
       headers: {},
@@ -61,14 +95,10 @@ jest.mock("../../components/copilot-provider/copilot-messages", () => ({
 describe("useCoAgent config synchronization", () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockSetCoagentStatesWithRef.mockImplementation((updater) => {
-      if (typeof updater === "function") {
-        updater({});
-      }
-    });
+    lastSubscriber = null;
   });
 
-  it("should call setCoagentStatesWithRef when config changes", () => {
+  it("should call setProperties when config changes", async () => {
     const { rerender } = renderHook(
       ({ config }) =>
         useCoAgent({
@@ -82,16 +112,20 @@ describe("useCoAgent config synchronization", () => {
     );
 
     // Clear the initial calls
-    mockSetCoagentStatesWithRef.mockClear();
+    mockSetProperties.mockClear();
 
     // Change config
     rerender({ config: { configurable: { model: "gpt-4o" } } });
 
-    // Should have called setCoagentStatesWithRef with new config
-    expect(mockSetCoagentStatesWithRef).toHaveBeenCalledWith(expect.any(Function));
+    // Wait for effect to complete and verify setProperties was called
+    await waitFor(() => {
+      expect(mockSetProperties).toHaveBeenCalledWith({
+        configurable: { model: "gpt-4o" },
+      });
+    });
   });
 
-  it("should not call setCoagentStatesWithRef when config is unchanged", () => {
+  it("should not call setProperties when config is unchanged", () => {
     const config = { configurable: { model: "gpt-4" } };
 
     const { rerender } = renderHook(
@@ -107,16 +141,16 @@ describe("useCoAgent config synchronization", () => {
     );
 
     // Clear the initial calls
-    mockSetCoagentStatesWithRef.mockClear();
+    mockSetProperties.mockClear();
 
-    // Re-render with same config
+    // Re-render with same config reference
     rerender({ config });
 
-    // Should not have called setCoagentStatesWithRef
-    expect(mockSetCoagentStatesWithRef).not.toHaveBeenCalled();
+    // Should not have called setProperties
+    expect(mockSetProperties).not.toHaveBeenCalled();
   });
 
-  it("should handle backward compatibility with configurable prop", () => {
+  it("should handle backward compatibility with configurable prop", async () => {
     const { rerender } = renderHook(
       ({ configurable }) =>
         useCoAgent({
@@ -130,23 +164,32 @@ describe("useCoAgent config synchronization", () => {
     );
 
     // Clear the initial calls
-    mockSetCoagentStatesWithRef.mockClear();
+    mockSetProperties.mockClear();
 
     // Change configurable prop
     rerender({ configurable: { model: "gpt-4o" } });
 
-    // Should have called setCoagentStatesWithRef
-    expect(mockSetCoagentStatesWithRef).toHaveBeenCalledWith(expect.any(Function));
+    // Wait for effect to complete and verify setProperties was called
+    await waitFor(() => {
+      expect(mockSetProperties).toHaveBeenCalledWith({
+        configurable: { model: "gpt-4o" },
+      });
+    });
   });
 
-  it("should update config while preserving other state properties", () => {
-    let capturedUpdater: any = null;
+  it("should not call setProperties when both config and configurable are undefined", () => {
+    renderHook(() =>
+      useCoAgent({
+        name: "test-agent",
+        initialState: { count: 0 },
+      }),
+    );
 
-    mockSetCoagentStatesWithRef.mockImplementation((updater) => {
-      capturedUpdater = updater;
-      return updater;
-    });
+    // Should not have called setProperties
+    expect(mockSetProperties).not.toHaveBeenCalled();
+  });
 
+  it("should handle deeply nested config changes", async () => {
     const { rerender } = renderHook(
       ({ config }) =>
         useCoAgent({
@@ -155,137 +198,154 @@ describe("useCoAgent config synchronization", () => {
           config,
         }),
       {
-        initialProps: { config: { configurable: { model: "gpt-4" } } },
+        initialProps: {
+          config: {
+            configurable: {
+              model: "gpt-4",
+              settings: { temperature: 0.5 },
+            },
+          },
+        },
       },
     );
 
-    // 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();
+    // Clear the initial calls
+    mockSetProperties.mockClear();
 
-    // 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",
+    // Change nested config
+    rerender({
+      config: {
+        configurable: {
+          model: "gpt-4",
+          settings: { temperature: 0.7 }, // Only nested property changed
+        },
       },
-    };
-
-    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",
-      },
+    // Wait for effect to complete and verify setProperties was called
+    await waitFor(() => {
+      expect(mockSetProperties).toHaveBeenCalledWith({
+        configurable: {
+          model: "gpt-4",
+          settings: { temperature: 0.7 },
+        },
+      });
     });
   });
 
-  it("should create new agent state when agent doesn't exist", () => {
-    let capturedUpdater: any = null;
+  describe("State Management", () => {
+    // Helper to create mock subscriber params
+    const createMockParams = (stateOverride: any = {}) => ({
+      messages: [],
+      state: stateOverride,
+      agent: mockAgent as any,
+      input: {} as any,
+    });
+
+    it("should initialize agent state via onRunInitialized event", () => {
+      // Set agent to have NO state (empty object)
+      mockAgent.state = {} as any;
+
+      renderHook(() =>
+        useCoAgent({
+          name: "test-agent",
+          initialState: { count: 42 },
+        }),
+      );
+
+      // Verify subscription was created
+      expect(mockSubscribe).toHaveBeenCalled();
+      expect(lastSubscriber).toBeTruthy();
+
+      // Clear any initial state calls
+      mockSetState.mockClear();
+
+      // Trigger onRunInitialized with no run state
+      lastSubscriber?.onRunInitialized?.(createMockParams({}));
+
+      // Should set state to initialState
+      expect(mockSetState).toHaveBeenCalledWith({ count: 42 });
 
-    mockSetCoagentStatesWithRef.mockImplementation((updater) => {
-      capturedUpdater = updater;
-      return updater;
+      // Reset agent state
+      mockAgent.state = { count: 0 };
     });
 
-    const { rerender } = renderHook(
-      ({ config }) =>
+    it("should preserve existing agent state on onRunInitialized", () => {
+      // Set agent to have existing state
+      mockAgent.state = { count: 100 };
+
+      renderHook(() =>
         useCoAgent({
           name: "test-agent",
-          initialState: { count: 0 },
-          config,
+          initialState: { count: 42 },
         }),
-      {
-        initialProps: { config: { configurable: { model: "gpt-4" } } },
-      },
-    );
+      );
 
-    // Clear the initial calls and reset captured updater
-    mockSetCoagentStatesWithRef.mockClear();
-    capturedUpdater = null;
+      // Clear any initial state calls
+      mockSetState.mockClear();
 
-    // Change config
-    rerender({ config: { configurable: { model: "gpt-4o" } } });
+      // Trigger onRunInitialized with no new state
+      lastSubscriber?.onRunInitialized?.(createMockParams({}));
+
+      // Should NOT override existing state
+      expect(mockSetState).not.toHaveBeenCalled();
+
+      // Reset agent state
+      mockAgent.state = { count: 0 };
+    });
 
-    // Should have called setCoagentStatesWithRef
-    expect(mockSetCoagentStatesWithRef).toHaveBeenCalledWith(expect.any(Function));
-    expect(capturedUpdater).toBeTruthy();
+    it("should prioritize run state over initialState", () => {
+      renderHook(() =>
+        useCoAgent({
+          name: "test-agent",
+          initialState: { count: 42 },
+        }),
+      );
 
-    // Test the updater function behavior with empty previous state
-    const prevState = {}; // No existing agent state
+      // Clear any initial state calls
+      mockSetState.mockClear();
 
-    const newState = capturedUpdater(prevState);
+      // Trigger onRunInitialized with state from the run
+      lastSubscriber?.onRunInitialized?.(createMockParams({ count: 999 }));
 
-    // 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,
-      },
+      // Should use run state, not initialState
+      expect(mockSetState).toHaveBeenCalledWith({ count: 999 });
     });
-  });
 
-  it("should handle deeply nested config changes", () => {
-    const { rerender } = renderHook(
-      ({ config }) =>
+    it("should handle setState with object updates", () => {
+      const { result } = renderHook(() =>
         useCoAgent({
           name: "test-agent",
           initialState: { count: 0 },
-          config,
         }),
-      {
-        initialProps: {
-          config: {
-            configurable: {
-              model: "gpt-4",
-              settings: { temperature: 0.5 },
-            },
-          },
-        },
-      },
-    );
+      );
 
-    // Clear the initial calls
-    mockSetCoagentStatesWithRef.mockClear();
+      // Update state with object
+      result.current.setState({ count: 5 });
 
-    // Change nested config
-    rerender({
-      config: {
-        configurable: {
-          model: "gpt-4",
-          settings: { temperature: 0.7 }, // Only nested property changed
-        },
-      },
+      // Should merge with existing state
+      expect(mockSetState).toHaveBeenCalledWith({ count: 5 });
     });
 
-    // Should detect the nested change
-    expect(mockSetCoagentStatesWithRef).toHaveBeenCalledWith(expect.any(Function));
+    it("should handle setState with function updaters", () => {
+      // Set current agent state
+      mockAgent.state = { count: 10 };
+
+      const { result } = renderHook(() =>
+        useCoAgent({
+          name: "test-agent",
+          initialState: { count: 0 },
+        }),
+      );
+
+      // Update state with function
+      result.current.setState((prev) => ({ count: (prev?.count || 0) + 5 }));
+
+      // Should call function with current state and set result
+      expect(mockSetState).toHaveBeenCalledWith({ count: 15 });
+
+      // Reset agent state
+      mockAgent.state = { count: 0 };
+    });
   });
 });

package/src/hooks/use-agent-nodename.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+import type { AgentSubscriber } from "@ag-ui/client";
+import { useAgent } from "@copilotkitnext/react";
+
+export function useAgentNodeName(agentName?: string) {
+  const { agent } = useAgent({ agentId: agentName });
+  const nodeNameRef = useRef<string>("start");
+
+  useEffect(() => {
+    if (!agent) return;
+    const subscriber: AgentSubscriber = {
+      onStepStartedEvent: ({ event }) => {
+        nodeNameRef.current = event.stepName;
+      },
+      onRunStartedEvent: () => {
+        nodeNameRef.current = "start";
+      },
+      onRunFinishedEvent: () => {
+        nodeNameRef.current = "end";
+      },
+    };
+
+    const subscription = agent.subscribe(subscriber);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [agent]);
+
+  return nodeNameRef.current;
+}