@copilotkit/react-core 1.51.3-next.2 → 1.51.3-next.4

package/dist/index.mjs

@@ -5,7 +5,7 @@ import "./chunk-36KQV2NA.mjs";
 import "./chunk-LUGEI4YQ.mjs";
 import {
   CopilotTask
-} from "./chunk-4MLKBZGB.mjs";
+} from "./chunk-K2GJI3PT.mjs";
 import "./chunk-4CEQJ2X6.mjs";
 import "./chunk-A6NKSGH3.mjs";
 import {
@@ -40,16 +40,16 @@ import {
 } from "./chunk-7DTB7S5V.mjs";
 import {
   useCopilotChatHeadless_c
-} from "./chunk-W5BKJN46.mjs";
+} from "./chunk-AR533FGY.mjs";
 import {
   useCopilotChatSuggestions
 } from "./chunk-XDFVCQD3.mjs";
 import {
   useCopilotChat
-} from "./chunk-M7U7RZLU.mjs";
+} from "./chunk-LWJIFZWN.mjs";
 import {
   useCopilotChatInternal
-} from "./chunk-OBXQSB7S.mjs";
+} from "./chunk-37JRY3TC.mjs";
 import {
   useLangGraphInterruptRender
 } from "./chunk-VV56AVPB.mjs";
@@ -71,7 +71,7 @@ import "./chunk-SPCZTZCY.mjs";
 import {
   CopilotKit,
   defaultCopilotContextCategories
-} from "./chunk-2VA5EV2P.mjs";
+} from "./chunk-THCOOWDH.mjs";
 import "./chunk-FJEI7IBX.mjs";
 import "./chunk-CYDWEPFL.mjs";
 import {
@@ -86,13 +86,13 @@ import "./chunk-PMAFHQ7P.mjs";
 import "./chunk-YYN33GSG.mjs";
 import "./chunk-BVBFFI7K.mjs";
 import "./chunk-O7ARI5CV.mjs";
-import "./chunk-QNUAXSDP.mjs";
+import "./chunk-3X3I7OJV.mjs";
 import "./chunk-NB2FKV2V.mjs";
 import {
   ThreadsContext,
   ThreadsProvider,
   useThreads
-} from "./chunk-F555TVE4.mjs";
+} from "./chunk-LMHB2D4J.mjs";
 import "./chunk-WF65O6HX.mjs";
 import "./chunk-EFL5OBKN.mjs";
 import "./chunk-6ZLPNY7X.mjs";

package/dist/lib/copilot-task.mjs

@@ -1,10 +1,10 @@
 import {
   CopilotTask
-} from "../chunk-4MLKBZGB.mjs";
+} from "../chunk-K2GJI3PT.mjs";
 import "../chunk-4CEQJ2X6.mjs";
 import "../chunk-JD7BAH7U.mjs";
 import "../chunk-SPCZTZCY.mjs";
-import "../chunk-2VA5EV2P.mjs";
+import "../chunk-THCOOWDH.mjs";
 import "../chunk-FJEI7IBX.mjs";
 import "../chunk-CYDWEPFL.mjs";
 import "../chunk-2IDV5OHF.mjs";
@@ -15,9 +15,9 @@ import "../chunk-PMAFHQ7P.mjs";
 import "../chunk-YYN33GSG.mjs";
 import "../chunk-BVBFFI7K.mjs";
 import "../chunk-O7ARI5CV.mjs";
-import "../chunk-QNUAXSDP.mjs";
+import "../chunk-3X3I7OJV.mjs";
 import "../chunk-NB2FKV2V.mjs";
-import "../chunk-F555TVE4.mjs";
+import "../chunk-LMHB2D4J.mjs";
 import "../chunk-WF65O6HX.mjs";
 import "../chunk-EFL5OBKN.mjs";
 import "../chunk-6ZLPNY7X.mjs";

package/dist/lib/index.mjs

@@ -1,11 +1,11 @@
 import "../chunk-LUGEI4YQ.mjs";
 import {
   CopilotTask
-} from "../chunk-4MLKBZGB.mjs";
+} from "../chunk-K2GJI3PT.mjs";
 import "../chunk-4CEQJ2X6.mjs";
 import "../chunk-JD7BAH7U.mjs";
 import "../chunk-SPCZTZCY.mjs";
-import "../chunk-2VA5EV2P.mjs";
+import "../chunk-THCOOWDH.mjs";
 import "../chunk-FJEI7IBX.mjs";
 import "../chunk-CYDWEPFL.mjs";
 import "../chunk-2IDV5OHF.mjs";
@@ -16,9 +16,9 @@ import "../chunk-PMAFHQ7P.mjs";
 import "../chunk-YYN33GSG.mjs";
 import "../chunk-BVBFFI7K.mjs";
 import "../chunk-O7ARI5CV.mjs";
-import "../chunk-QNUAXSDP.mjs";
+import "../chunk-3X3I7OJV.mjs";
 import "../chunk-NB2FKV2V.mjs";
-import "../chunk-F555TVE4.mjs";
+import "../chunk-LMHB2D4J.mjs";
 import "../chunk-WF65O6HX.mjs";
 import "../chunk-EFL5OBKN.mjs";
 import "../chunk-6ZLPNY7X.mjs";

package/dist/setupTests.js

@@ -18,7 +18,9 @@ jest.mock("@copilotkit/shared", () => ({
       return defaultValue;
     }
   }),
-  CopilotKitAgentDiscoveryError: jest.fn()
+  randomId: jest.fn(() => "test-random-id"),
+  CopilotKitAgentDiscoveryError: jest.fn(),
+  randomUUID: jest.fn(() => "mock-thread-id")
 }));
 jest.mock("react-dom/test-utils", () => ({
   act: jest.fn((fn) => fn())

package/dist/setupTests.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/setupTests.ts"],"sourcesContent":["// Mock modules that cause ES module issues\njest.mock(\"@segment/analytics-node\", () => ({\n  Analytics: jest.fn().mockImplementation(() => ({\n    track: jest.fn(),\n    identify: jest.fn(),\n    page: jest.fn(),\n    group: jest.fn(),\n    alias: jest.fn(),\n  })),\n}));\n\njest.mock(\"@copilotkit/shared\", () => ({\n  parseJson: jest.fn((jsonString, defaultValue) => {\n    try {\n      return JSON.parse(jsonString);\n    } catch {\n      return defaultValue;\n    }\n  }),\n  CopilotKitAgentDiscoveryError: jest.fn(),\n}));\n\n// Mock react-dom/test-utils to avoid compatibility issues\njest.mock(\"react-dom/test-utils\", () => ({\n  act: jest.fn((fn) => fn()),\n}));\n"],"mappings":";;;AACA,KAAK,KAAK,2BAA2B,OAAO;AAAA,EAC1C,WAAW,KAAK,GAAG,EAAE,mBAAmB,OAAO;AAAA,IAC7C,OAAO,KAAK,GAAG;AAAA,IACf,UAAU,KAAK,GAAG;AAAA,IAClB,MAAM,KAAK,GAAG;AAAA,IACd,OAAO,KAAK,GAAG;AAAA,IACf,OAAO,KAAK,GAAG;AAAA,EACjB,EAAE;AACJ,EAAE;AAEF,KAAK,KAAK,sBAAsB,OAAO;AAAA,EACrC,WAAW,KAAK,GAAG,CAAC,YAAY,iBAAiB;AAC/C,QAAI;AACF,aAAO,KAAK,MAAM,UAAU;AAAA,IAC9B,SAAQ,GAAN;AACA,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAAA,EACD,+BAA+B,KAAK,GAAG;AACzC,EAAE;AAGF,KAAK,KAAK,wBAAwB,OAAO;AAAA,EACvC,KAAK,KAAK,GAAG,CAAC,OAAO,GAAG,CAAC;AAC3B,EAAE;","names":[]}
+{"version":3,"sources":["../src/setupTests.ts"],"sourcesContent":["// Mock modules that cause ES module issues\njest.mock(\"@segment/analytics-node\", () => ({\n  Analytics: jest.fn().mockImplementation(() => ({\n    track: jest.fn(),\n    identify: jest.fn(),\n    page: jest.fn(),\n    group: jest.fn(),\n    alias: jest.fn(),\n  })),\n}));\n\njest.mock(\"@copilotkit/shared\", () => ({\n  parseJson: jest.fn((jsonString, defaultValue) => {\n    try {\n      return JSON.parse(jsonString);\n    } catch {\n      return defaultValue;\n    }\n  }),\n  randomId: jest.fn(() => \"test-random-id\"),\n  CopilotKitAgentDiscoveryError: jest.fn(),\n  randomUUID: jest.fn(() => \"mock-thread-id\"),\n}));\n\n// Mock react-dom/test-utils to avoid compatibility issues\njest.mock(\"react-dom/test-utils\", () => ({\n  act: jest.fn((fn) => fn()),\n}));\n"],"mappings":";;;AACA,KAAK,KAAK,2BAA2B,OAAO;AAAA,EAC1C,WAAW,KAAK,GAAG,EAAE,mBAAmB,OAAO;AAAA,IAC7C,OAAO,KAAK,GAAG;AAAA,IACf,UAAU,KAAK,GAAG;AAAA,IAClB,MAAM,KAAK,GAAG;AAAA,IACd,OAAO,KAAK,GAAG;AAAA,IACf,OAAO,KAAK,GAAG;AAAA,EACjB,EAAE;AACJ,EAAE;AAEF,KAAK,KAAK,sBAAsB,OAAO;AAAA,EACrC,WAAW,KAAK,GAAG,CAAC,YAAY,iBAAiB;AAC/C,QAAI;AACF,aAAO,KAAK,MAAM,UAAU;AAAA,IAC9B,SAAQ,GAAN;AACA,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAAA,EACD,UAAU,KAAK,GAAG,MAAM,gBAAgB;AAAA,EACxC,+BAA+B,KAAK,GAAG;AAAA,EACvC,YAAY,KAAK,GAAG,MAAM,gBAAgB;AAC5C,EAAE;AAGF,KAAK,KAAK,wBAAwB,OAAO;AAAA,EACvC,KAAK,KAAK,GAAG,CAAC,OAAO,GAAG,CAAC;AAC3B,EAAE;","names":[]}

package/dist/setupTests.mjs

@@ -16,7 +16,9 @@ jest.mock("@copilotkit/shared", () => ({
       return defaultValue;
     }
   }),
-  CopilotKitAgentDiscoveryError: jest.fn()
+  randomId: jest.fn(() => "test-random-id"),
+  CopilotKitAgentDiscoveryError: jest.fn(),
+  randomUUID: jest.fn(() => "mock-thread-id")
 }));
 jest.mock("react-dom/test-utils", () => ({
   act: jest.fn((fn) => fn())

package/dist/setupTests.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/setupTests.ts"],"sourcesContent":["// Mock modules that cause ES module issues\njest.mock(\"@segment/analytics-node\", () => ({\n  Analytics: jest.fn().mockImplementation(() => ({\n    track: jest.fn(),\n    identify: jest.fn(),\n    page: jest.fn(),\n    group: jest.fn(),\n    alias: jest.fn(),\n  })),\n}));\n\njest.mock(\"@copilotkit/shared\", () => ({\n  parseJson: jest.fn((jsonString, defaultValue) => {\n    try {\n      return JSON.parse(jsonString);\n    } catch {\n      return defaultValue;\n    }\n  }),\n  CopilotKitAgentDiscoveryError: jest.fn(),\n}));\n\n// Mock react-dom/test-utils to avoid compatibility issues\njest.mock(\"react-dom/test-utils\", () => ({\n  act: jest.fn((fn) => fn()),\n}));\n"],"mappings":";AACA,KAAK,KAAK,2BAA2B,OAAO;AAAA,EAC1C,WAAW,KAAK,GAAG,EAAE,mBAAmB,OAAO;AAAA,IAC7C,OAAO,KAAK,GAAG;AAAA,IACf,UAAU,KAAK,GAAG;AAAA,IAClB,MAAM,KAAK,GAAG;AAAA,IACd,OAAO,KAAK,GAAG;AAAA,IACf,OAAO,KAAK,GAAG;AAAA,EACjB,EAAE;AACJ,EAAE;AAEF,KAAK,KAAK,sBAAsB,OAAO;AAAA,EACrC,WAAW,KAAK,GAAG,CAAC,YAAY,iBAAiB;AAC/C,QAAI;AACF,aAAO,KAAK,MAAM,UAAU;AAAA,IAC9B,SAAQ,GAAN;AACA,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAAA,EACD,+BAA+B,KAAK,GAAG;AACzC,EAAE;AAGF,KAAK,KAAK,wBAAwB,OAAO;AAAA,EACvC,KAAK,KAAK,GAAG,CAAC,OAAO,GAAG,CAAC;AAC3B,EAAE;","names":[]}
+{"version":3,"sources":["../src/setupTests.ts"],"sourcesContent":["// Mock modules that cause ES module issues\njest.mock(\"@segment/analytics-node\", () => ({\n  Analytics: jest.fn().mockImplementation(() => ({\n    track: jest.fn(),\n    identify: jest.fn(),\n    page: jest.fn(),\n    group: jest.fn(),\n    alias: jest.fn(),\n  })),\n}));\n\njest.mock(\"@copilotkit/shared\", () => ({\n  parseJson: jest.fn((jsonString, defaultValue) => {\n    try {\n      return JSON.parse(jsonString);\n    } catch {\n      return defaultValue;\n    }\n  }),\n  randomId: jest.fn(() => \"test-random-id\"),\n  CopilotKitAgentDiscoveryError: jest.fn(),\n  randomUUID: jest.fn(() => \"mock-thread-id\"),\n}));\n\n// Mock react-dom/test-utils to avoid compatibility issues\njest.mock(\"react-dom/test-utils\", () => ({\n  act: jest.fn((fn) => fn()),\n}));\n"],"mappings":";AACA,KAAK,KAAK,2BAA2B,OAAO;AAAA,EAC1C,WAAW,KAAK,GAAG,EAAE,mBAAmB,OAAO;AAAA,IAC7C,OAAO,KAAK,GAAG;AAAA,IACf,UAAU,KAAK,GAAG;AAAA,IAClB,MAAM,KAAK,GAAG;AAAA,IACd,OAAO,KAAK,GAAG;AAAA,IACf,OAAO,KAAK,GAAG;AAAA,EACjB,EAAE;AACJ,EAAE;AAEF,KAAK,KAAK,sBAAsB,OAAO;AAAA,EACrC,WAAW,KAAK,GAAG,CAAC,YAAY,iBAAiB;AAC/C,QAAI;AACF,aAAO,KAAK,MAAM,UAAU;AAAA,IAC9B,SAAQ,GAAN;AACA,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAAA,EACD,UAAU,KAAK,GAAG,MAAM,gBAAgB;AAAA,EACxC,+BAA+B,KAAK,GAAG;AAAA,EACvC,YAAY,KAAK,GAAG,MAAM,gBAAgB;AAC5C,EAAE;AAGF,KAAK,KAAK,wBAAwB,OAAO;AAAA,EACvC,KAAK,KAAK,GAAG,CAAC,OAAO,GAAG,CAAC;AAC3B,EAAE;","names":[]}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.51.3-next.2",
+  "version": "1.51.3-next.4",
   "sideEffects": [
     "**/*.css"
   ],
@@ -55,14 +55,14 @@
     "tsconfig": "1.4.6"
   },
   "dependencies": {
-    "@ag-ui/client": "^0.0.42",
+    "@ag-ui/client": "^0.0.43",
     "@scarf/scarf": "^1.3.0",
     "streamdown": "^1.6.10",
     "untruncate-json": "^0.0.1",
-    "@copilotkit/runtime-client-gql": "1.51.3-next.2",
-    "@copilotkit/shared": "1.51.3-next.2",
-    "@copilotkitnext/core": "1.51.3-next.2",
-    "@copilotkitnext/react": "1.51.3-next.2"
+    "@copilotkit/runtime-client-gql": "1.51.3-next.4",
+    "@copilotkit/shared": "1.51.3-next.4",
+    "@copilotkitnext/core": "1.51.3-next.4",
+    "@copilotkitnext/react": "1.51.3-next.4"
   },
   "keywords": [
     "copilotkit",

package/src/context/__tests__/threads-context.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ThreadsProvider, useThreads } from "../threads-context";
+
+function ThreadIdViewer() {
+  const { threadId } = useThreads();
+  return <div data-testid="threadId">{threadId}</div>;
+}
+
+describe("ThreadsProvider", () => {
+  it("updates threadId when explicit prop becomes available", () => {
+    const { rerender } = render(
+      <ThreadsProvider>
+        <ThreadIdViewer />
+      </ThreadsProvider>,
+    );
+
+    expect(screen.getByTestId("threadId").textContent).toBe("mock-thread-id");
+
+    rerender(
+      <ThreadsProvider threadId="customer-thread">
+        <ThreadIdViewer />
+      </ThreadsProvider>,
+    );
+
+    expect(screen.getByTestId("threadId").textContent).toBe("customer-thread");
+  });
+});

package/src/context/threads-context.tsx

@@ -14,9 +14,9 @@ export interface ThreadsProviderProps {
 }
 
 export function ThreadsProvider({ children, threadId: explicitThreadId }: ThreadsProviderProps) {
-  const [internalThreadId, setThreadId] = useState<string>(explicitThreadId ?? randomUUID());
+  const [internalThreadId, setThreadId] = useState<string>(() => randomUUID());
 
-  const threadId = internalThreadId;
+  const threadId = explicitThreadId ?? internalThreadId;
 
   return (
     <ThreadsContext.Provider

package/src/hooks/__tests__/use-coagent-state-render.e2e.test.tsx

@@ -0,0 +1,229 @@
+import React from "react";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { useCoAgentStateRender } from "../use-coagent-state-render";
+import { CoAgentStateRenderBridge } from "../use-coagent-state-render-bridge";
+import {
+  CoAgentStateRendersProvider,
+  CopilotContext,
+  type CopilotContextParams,
+} from "../../context";
+
+const mockAgent = {
+  state: {},
+  isRunning: true,
+  subscribe: jest.fn(),
+};
+
+let lastSubscriber: any = null;
+
+jest.mock("@copilotkitnext/react", () => ({
+  useAgent: jest.fn(() => ({ agent: mockAgent })),
+}));
+
+jest.mock("../../components/toast/toast-provider", () => ({
+  useToast: () => ({
+    setBannerError: jest.fn(),
+    addToast: jest.fn(),
+  }),
+}));
+
+function TestHarness({ snapshot }: { snapshot: string }) {
+  useCoAgentStateRender<{ current_step?: string }>({
+    name: "test-agent",
+    render: ({ state }) => (
+      <div data-testid="state">{state.current_step ?? "none"}</div>
+    ),
+  });
+
+  return (
+    <CoAgentStateRenderBridge
+      agentId="test-agent"
+      message={{ id: "msg-1", role: "assistant" }}
+      position="after"
+      runId="run-1"
+      messageIndex={0}
+      messageIndexInRun={0}
+      numberOfMessagesInRun={1}
+      stateSnapshot={snapshot}
+    />
+  );
+}
+
+function SnapshotHarness({
+  snapshot,
+  message,
+}: {
+  snapshot: string;
+  message: { id: string; role: string; content?: string };
+}) {
+  useCoAgentStateRender<{ current_step?: string }>({
+    name: "test-agent",
+    render: ({ state }) => (
+      <div data-testid="state">{state.current_step ?? "none"}</div>
+    ),
+  });
+
+  return (
+    <CoAgentStateRenderBridge
+      agentId="test-agent"
+      message={message}
+      position="after"
+      runId="run-early"
+      messageIndex={0}
+      messageIndexInRun={0}
+      numberOfMessagesInRun={1}
+      stateSnapshot={snapshot}
+    />
+  );
+}
+
+function LiveStateHarness({ message }: { message: { id: string; role: string } }) {
+  useCoAgentStateRender<{ current_step?: string }>({
+    name: "test-agent",
+    render: ({ state }) => (
+      <div data-testid="state">{state.current_step ?? "none"}</div>
+    ),
+  });
+
+  return (
+    <CoAgentStateRenderBridge
+      agentId="test-agent"
+      message={message}
+      position="after"
+      runId="run-live"
+      messageIndex={0}
+      messageIndexInRun={0}
+      numberOfMessagesInRun={1}
+      stateSnapshot={undefined}
+    />
+  );
+}
+
+describe("useCoAgentStateRender", () => {
+  beforeEach(() => {
+    lastSubscriber = null;
+    mockAgent.state = {};
+    mockAgent.subscribe.mockImplementation((subscriber: any) => {
+      lastSubscriber = subscriber;
+      return { unsubscribe: jest.fn() };
+    });
+  });
+
+  it("re-renders when state snapshots change", async () => {
+    const copilotContextValue = {
+      chatComponentsCache: { current: { actions: {}, coAgentStateRenders: {} } },
+      availableAgents: [],
+    } as CopilotContextParams;
+
+    const { rerender } = render(
+      <CopilotContext.Provider value={copilotContextValue}>
+        <CoAgentStateRendersProvider>
+          <TestHarness snapshot={JSON.stringify({ current_step: "Processing..." })} />
+        </CoAgentStateRendersProvider>
+      </CopilotContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("state").textContent).toBe("Processing...");
+    });
+
+    rerender(
+      <CopilotContext.Provider value={copilotContextValue}>
+        <CoAgentStateRendersProvider>
+          <TestHarness snapshot={JSON.stringify({ current_step: "Thinking..." })} />
+        </CoAgentStateRendersProvider>
+      </CopilotContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("state").textContent).toBe("Thinking...");
+    });
+  });
+
+  it("renders snapshots that arrive before assistant text", async () => {
+    const copilotContextValue = {
+      chatComponentsCache: { current: { actions: {}, coAgentStateRenders: {} } },
+      availableAgents: [],
+    } as CopilotContextParams;
+
+    const baseMessage = { id: "msg-early", role: "assistant", content: "" };
+
+    const { rerender } = render(
+      <CopilotContext.Provider value={copilotContextValue}>
+        <CoAgentStateRendersProvider>
+          <SnapshotHarness
+            message={baseMessage}
+            snapshot={JSON.stringify({ current_step: "Processing..." })}
+          />
+        </CoAgentStateRendersProvider>
+      </CopilotContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("state").textContent).toBe("Processing...");
+    });
+
+    rerender(
+      <CopilotContext.Provider value={copilotContextValue}>
+        <CoAgentStateRendersProvider>
+          <SnapshotHarness
+            message={baseMessage}
+            snapshot={JSON.stringify({ current_step: "Thinking..." })}
+          />
+        </CoAgentStateRendersProvider>
+      </CopilotContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("state").textContent).toBe("Thinking...");
+    });
+
+    rerender(
+      <CopilotContext.Provider value={copilotContextValue}>
+        <CoAgentStateRendersProvider>
+          <SnapshotHarness
+            message={{ ...baseMessage, content: "Hello" }}
+            snapshot={JSON.stringify({ current_step: "Finalizing..." })}
+          />
+        </CoAgentStateRendersProvider>
+      </CopilotContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("state").textContent).toBe("Finalizing...");
+    });
+  });
+
+  it("re-renders from live agent state updates", async () => {
+    const copilotContextValue = {
+      chatComponentsCache: { current: { actions: {}, coAgentStateRenders: {} } },
+      availableAgents: [],
+    } as CopilotContextParams;
+
+    render(
+      <CopilotContext.Provider value={copilotContextValue}>
+        <CoAgentStateRendersProvider>
+          <LiveStateHarness message={{ id: "msg-live", role: "assistant" }} />
+        </CoAgentStateRendersProvider>
+      </CopilotContext.Provider>,
+    );
+
+    mockAgent.state = { current_step: "Processing..." };
+    act(() => {
+      lastSubscriber?.onStateChanged?.({ state: mockAgent.state });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("state").textContent).toBe("Processing...");
+    });
+
+    mockAgent.state = { current_step: "Thinking..." };
+    act(() => {
+      lastSubscriber?.onStateChanged?.({ state: mockAgent.state });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("state").textContent).toBe("Thinking...");
+    });
+  });
+});

package/src/hooks/use-coagent-state-render-bridge.tsx

@@ -123,6 +123,7 @@ export function useCoagentStateRenderBridge(agentId: string, props: CoAgentState
   const { coAgentStateRenders, claimsRef } = useCoAgentStateRenders();
   const { agent } = useAgent({ agentId });
   const [nodeName, setNodeName] = useState<string | undefined>(undefined);
+  const [, forceUpdate] = useState(0);
 
   const runId = props.runId ?? message.runId;
   const effectiveRunId = runId || "pending";
@@ -130,6 +131,9 @@ export function useCoagentStateRenderBridge(agentId: string, props: CoAgentState
   useEffect(() => {
     if (!agent) return;
     const subscriber: AgentSubscriber = {
+      onStateChanged: () => {
+        forceUpdate((value) => value + 1);
+      },
       onStepStartedEvent: ({ event }) => {
         if (event.stepName !== nodeName) {
           setNodeName(event.stepName);
@@ -248,12 +252,18 @@ export function useCoagentStateRenderBridge(agentId: string, props: CoAgentState
     }
 
     // If we found state, and given that now there's a claim for the current message, let's save it in the claim
-    if (snapshot && !claimsRef.current[message.id].locked) {
-      if (stateSnapshot) {
-        claimsRef.current[message.id].stateSnapshot = snapshot;
-        claimsRef.current[message.id].locked = true;
-      } else {
+    if (snapshot) {
+      const existingSnapshot = claimsRef.current[message.id].stateSnapshot;
+      const snapshotChanged =
+        stateSnapshot &&
+        existingSnapshot !== undefined &&
+        !areStatesEquals(existingSnapshot, snapshot);
+
+      if (!claimsRef.current[message.id].locked || snapshotChanged) {
         claimsRef.current[message.id].stateSnapshot = snapshot;
+        if (stateSnapshot) {
+          claimsRef.current[message.id].locked = true;
+        }
       }
     }
 

package/src/setupTests.ts

@@ -17,7 +17,9 @@ jest.mock("@copilotkit/shared", () => ({
       return defaultValue;
     }
   }),
+  randomId: jest.fn(() => "test-random-id"),
   CopilotKitAgentDiscoveryError: jest.fn(),
+  randomUUID: jest.fn(() => "mock-thread-id"),
 }));
 
 // Mock react-dom/test-utils to avoid compatibility issues

package/dist/chunk-F555TVE4.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/context/threads-context.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, ReactNode, SetStateAction } from \"react\";\nimport { randomUUID } from \"@copilotkit/shared\";\n\nexport interface ThreadsContextValue {\n  threadId: string;\n  setThreadId: (value: SetStateAction<string>) => void;\n}\n\nconst ThreadsContext = createContext<ThreadsContextValue | undefined>(undefined);\n\nexport interface ThreadsProviderProps {\n  children: ReactNode;\n  threadId?: string;\n}\n\nexport function ThreadsProvider({ children, threadId: explicitThreadId }: ThreadsProviderProps) {\n  const [internalThreadId, setThreadId] = useState<string>(explicitThreadId ?? randomUUID());\n\n  const threadId = internalThreadId;\n\n  return (\n    <ThreadsContext.Provider\n      value={{\n        threadId,\n        setThreadId,\n      }}\n    >\n      {children}\n    </ThreadsContext.Provider>\n  );\n}\n\nexport function useThreads() {\n  const context = useContext(ThreadsContext);\n  if (!context) {\n    throw new Error(\"useThreads must be used within ThreadsProvider\");\n  }\n  return context;\n}\n\nexport { ThreadsContext };\n"],"mappings":";AAAA,SAAgB,eAAe,YAAY,gBAA2C;AACtF,SAAS,kBAAkB;AAoBvB;AAbJ,IAAM,iBAAiB,cAA+C,MAAS;AAOxE,SAAS,gBAAgB,EAAE,UAAU,UAAU,iBAAiB,GAAyB;AAC9F,QAAM,CAAC,kBAAkB,WAAW,IAAI,SAAiB,8CAAoB,WAAW,CAAC;AAEzF,QAAM,WAAW;AAEjB,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,aAAa;AAC3B,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AACA,SAAO;AACT;","names":[]}

package/dist/chunk-QNUAXSDP.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-coagent-state-render-bridge.tsx"],"sourcesContent":["import { ReactCustomMessageRendererPosition, useAgent } from \"@copilotkitnext/react\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { AgentSubscriber } from \"@ag-ui/client\";\nimport { useCoAgentStateRenders } from \"../context\";\nimport { dataToUUID, parseJson } from \"@copilotkit/shared\";\n\nfunction getStateWithoutConstantKeys(state: any) {\n  if (!state) return {};\n  const { messages, tools, copilotkit, ...stateWithoutConstantKeys } = state;\n  return stateWithoutConstantKeys;\n}\n\n// Function that compares states, without the constant keys\nfunction areStatesEquals(a: any, b: any) {\n  if ((a && !b) || (!a && b)) return false;\n  const { messages, tools, copilotkit, ...aWithoutConstantKeys } = a;\n  const {\n    messages: bMessages,\n    tools: bTools,\n    copilotkit: bCopilotkit,\n    ...bWithoutConstantKeys\n  } = b;\n\n  return JSON.stringify(aWithoutConstantKeys) === JSON.stringify(bWithoutConstantKeys);\n}\n\n/**\n * Bridge hook that connects agent state renders to chat messages.\n *\n * ## Purpose\n * This hook finds matching state render configurations (registered via useCoAgentStateRender)\n * and returns UI to render in chat.\n * It ensures each state render appears bound to a specific message, preventing duplicates while\n * allowing re-binding when the underlying state changes significantly.\n *\n * ## Message-ID-Based Claiming System\n *\n * ### The Problem\n * Multiple bridge component instances render simultaneously (one per message). Without coordination,\n * they would all try to render the same state render, causing duplicates.\n *\n * ### The Solution: Message-ID Claims with State Comparison\n * Each state render is \"claimed\" by exactly one **message ID** (not runId):\n *\n * **Claim Structure**: `claimsRef.current[messageId] = { stateRenderId, runId, stateSnapshot, locked }`\n *\n * **Primary binding is by messageId because**:\n * - runId is not always available immediately (starts as \"pending\")\n * - messageId is the stable identifier throughout the message lifecycle\n * - Claims persist across component remounts via context ref\n *\n * ### Claiming Logic Flow\n *\n * 1. **Message already has a claim**:\n *    - Check if the claim matches the current stateRenderId\n *    - If yes → render (this message owns this render)\n *    - Update runId if it was \"pending\" and now available\n *\n * 2. **State render claimed by another message**:\n *    - Compare state snapshots (ignoring constant keys: messages, tools, copilotkit)\n *    - If states are identical → block rendering (duplicate)\n *    - **If states are different → allow claiming** (new data, new message)\n *    - This handles cases where the same render type shows different states in different messages\n *\n * 3. **Unclaimed state render**:\n *    - Only allow claiming if runId is \"pending\" (initial render)\n *    - If runId is real but no claim exists → block (edge case protection)\n *    - Create new claim: `claimsRef.current[messageId] = { stateRenderId, runId }`\n *\n * ### State Snapshot Locking\n *\n * Once a state snapshot is captured and locked for a message:\n * - The UI always renders with the locked snapshot (not live agent.state)\n * - Prevents UI from appearing \"wiped\" during state transitions\n * - Locked when: stateSnapshot prop is available (from message persistence)\n * - Unlocked state: can still update from live agent.state\n *\n * ### Synchronous Claiming (Ref-based)\n *\n * Claims are stored in a context-level ref (not React state):\n * - Multiple bridges render in the same tick\n * - State updates are async - would allow duplicates before update completes\n * - Ref provides immediate, synchronous claim checking\n * - Survives component remounts (stored in context, not component)\n *\n * ## Flow Example\n *\n * ```\n * Time 1: Message A renders, runId=undefined, state={progress: 50%}\n *   → effectiveRunId = \"pending\"\n *   → Claims: claimsRef[\"msgA\"] = { stateRenderId: \"tasks\", runId: \"pending\", stateSnapshot: {progress: 50%} }\n *   → Renders UI with 50% progress\n *\n * Time 2: Message B renders, runId=undefined, same state\n *   → Checks: \"tasks\" already claimed by msgA with same state\n *   → Returns null (blocked - duplicate)\n *\n * Time 3: Real runId appears (e.g., \"run-123\")\n *   → Updates claim: claimsRef[\"msgA\"].runId = \"run-123\"\n *   → Message A continues rendering\n *\n * Time 4: Agent processes more, state={progress: 100%}\n *   → Message A: locked to 50% (stateSnapshot locked)\n *   → Message C renders with state={progress: 100%}\n *   → Checks: \"tasks\" claimed by msgA but state is DIFFERENT (50% vs 100%)\n *   → Allows new claim: claimsRef[\"msgC\"] = { stateRenderId: \"tasks\", runId: \"run-123\", stateSnapshot: {progress: 100%} }\n *   → Both messages render independently with their own snapshots\n * ```\n */\nexport interface CoAgentStateRenderBridgeProps {\n  message: any;\n  position: ReactCustomMessageRendererPosition;\n  runId: string;\n  messageIndex: number;\n  messageIndexInRun: number;\n  numberOfMessagesInRun: number;\n  agentId: string;\n  stateSnapshot: any;\n}\n\nexport function useCoagentStateRenderBridge(agentId: string, props: CoAgentStateRenderBridgeProps) {\n  const { stateSnapshot, messageIndexInRun, message } = props;\n  const { coAgentStateRenders, claimsRef } = useCoAgentStateRenders();\n  const { agent } = useAgent({ agentId });\n  const [nodeName, setNodeName] = useState<string | undefined>(undefined);\n\n  const runId = props.runId ?? message.runId;\n  const effectiveRunId = runId || \"pending\";\n\n  useEffect(() => {\n    if (!agent) return;\n    const subscriber: AgentSubscriber = {\n      onStepStartedEvent: ({ event }) => {\n        if (event.stepName !== nodeName) {\n          setNodeName(event.stepName);\n        }\n      },\n      onStepFinishedEvent: ({ event }) => {\n        if (event.stepName === nodeName) {\n          setNodeName(undefined);\n        }\n      },\n    };\n\n    const { unsubscribe } = agent.subscribe(subscriber);\n    return () => {\n      unsubscribe();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [agentId, nodeName]);\n\n  const getStateRender = useCallback(\n    (messageId: string) => {\n      return Object.entries(coAgentStateRenders).find(([stateRenderId, stateRender]) => {\n        if (claimsRef.current[messageId]) {\n          return stateRenderId === claimsRef.current[messageId].stateRenderId;\n        }\n        const matchingAgentName = stateRender.name === agentId;\n        const matchesNodeContext = stateRender.nodeName ? stateRender.nodeName === nodeName : true;\n        return matchingAgentName && matchesNodeContext;\n      });\n    },\n    [coAgentStateRenders, nodeName, agentId],\n  );\n\n  // Message ID-based claim system - A state render can only be claimed by one message ID\n  const handleRenderRequest = ({\n    stateRenderId,\n    messageId,\n    runId,\n    stateSnapshot: renderSnapshot,\n  }: {\n    stateRenderId: string;\n    messageId: string;\n    runId?: string;\n    stateSnapshot?: any;\n  }): boolean => {\n    // Check if this message has already claimed this state render\n    if (claimsRef.current[messageId]) {\n      const canRender = claimsRef.current[messageId].stateRenderId === stateRenderId;\n\n      // Update runId if it doesn't exist\n      if (\n        canRender &&\n        runId &&\n        (!claimsRef.current[messageId].runId || claimsRef.current[messageId].runId === \"pending\")\n      ) {\n        claimsRef.current[messageId].runId = runId;\n      }\n\n      return canRender;\n    }\n\n    // Do not allow render if any other message has claimed this state render\n    const renderClaimedByOtherMessage = Object.values(claimsRef.current).find(\n      (c) =>\n        c.stateRenderId === stateRenderId &&\n        dataToUUID(getStateWithoutConstantKeys(c.stateSnapshot)) ===\n          dataToUUID(getStateWithoutConstantKeys(renderSnapshot)),\n    );\n    if (renderClaimedByOtherMessage) {\n      // If:\n      //   - state render already claimed\n      //   - snapshot exists in the claiming object and is different from current,\n      if (\n        renderSnapshot &&\n        renderClaimedByOtherMessage.stateSnapshot &&\n        !areStatesEquals(renderClaimedByOtherMessage.stateSnapshot, renderSnapshot)\n      ) {\n        claimsRef.current[messageId] = { stateRenderId, runId };\n        return true;\n      }\n      return false;\n    }\n\n    // No existing claim anywhere yet – allow this message to claim even if we already know the runId.\n    if (!runId) {\n      return false;\n    }\n\n    claimsRef.current[messageId] = { stateRenderId, runId };\n    return true;\n  };\n\n  return useMemo(() => {\n    if (messageIndexInRun !== 0) {\n      return null;\n    }\n\n    const [stateRenderId, stateRender] = getStateRender(message.id) ?? [];\n\n    if (!stateRender || !stateRenderId) {\n      return null;\n    }\n\n    // Is there any state we can use?\n    const snapshot = stateSnapshot ? parseJson(stateSnapshot, stateSnapshot) : agent?.state;\n\n    // Synchronously check/claim - returns true if this message can render\n    const canRender = handleRenderRequest({\n      stateRenderId,\n      messageId: message.id,\n      runId: effectiveRunId,\n      stateSnapshot: snapshot,\n    });\n    if (!canRender) {\n      return null;\n    }\n\n    // If we found state, and given that now there's a claim for the current message, let's save it in the claim\n    if (snapshot && !claimsRef.current[message.id].locked) {\n      if (stateSnapshot) {\n        claimsRef.current[message.id].stateSnapshot = snapshot;\n        claimsRef.current[message.id].locked = true;\n      } else {\n        claimsRef.current[message.id].stateSnapshot = snapshot;\n      }\n    }\n\n    if (stateRender.handler) {\n      stateRender.handler({\n        state: stateSnapshot ? parseJson(stateSnapshot, stateSnapshot) : (agent?.state ?? {}),\n        nodeName: nodeName ?? \"\",\n      });\n    }\n\n    if (stateRender.render) {\n      const status = agent?.isRunning ? \"inProgress\" : \"complete\";\n\n      if (typeof stateRender.render === \"string\") return stateRender.render;\n\n      return stateRender.render({\n        status,\n        // Always use state from claim, to make sure the state does not seem \"wiped\" for a fraction of a second\n        state: claimsRef.current[message.id].stateSnapshot ?? {},\n        nodeName: nodeName ?? \"\",\n      });\n    }\n  }, [\n    getStateRender,\n    stateSnapshot,\n    agent?.state,\n    agent?.isRunning,\n    nodeName,\n    effectiveRunId,\n    message.id,\n    messageIndexInRun,\n  ]);\n}\n\nexport function CoAgentStateRenderBridge(props: CoAgentStateRenderBridgeProps) {\n  return useCoagentStateRenderBridge(props.agentId, props);\n}\n"],"mappings":"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","names":["runId","_a"]}