@copilotkit/react-core 1.55.0-next.8 → 1.55.0-next.9

package/package.json

@@ -10,7 +10,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.55.0-next.8",
+  "version": "1.55.0-next.9",
   "sideEffects": [
     "**/*.css"
   ],
@@ -86,11 +86,11 @@
     "untruncate-json": "^0.0.1",
     "use-stick-to-bottom": "^1.1.1",
     "rxjs": "7.8.1",
-    "@copilotkit/a2ui-renderer": "1.55.0-next.8",
-    "@copilotkit/core": "1.55.0-next.8",
-    "@copilotkit/runtime-client-gql": "1.55.0-next.8",
-    "@copilotkit/shared": "1.55.0-next.8",
-    "@copilotkit/web-inspector": "1.55.0-next.8"
+    "@copilotkit/a2ui-renderer": "1.55.0-next.9",
+    "@copilotkit/core": "1.55.0-next.9",
+    "@copilotkit/runtime-client-gql": "1.55.0-next.9",
+    "@copilotkit/shared": "1.55.0-next.9",
+    "@copilotkit/web-inspector": "1.55.0-next.9"
   },
   "keywords": [
     "copilotkit",

package/src/components/copilot-provider/__tests__/copilot-messages-key.test.tsx

@@ -0,0 +1,92 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+/**
+ * Regression test: CopilotMessages children must have React keys.
+ *
+ * When CopilotMessages receives multiple children (e.g. memoizedChildren +
+ * RegisteredActionsRenderer), React treats them as a dynamic list and warns
+ * if they lack keys. This test verifies the fix by rendering a minimal
+ * reproduction using the same pattern as CopilotKitInternal.
+ */
+
+// Minimal stand-in for CopilotMessages – renders children inside a provider-like wrapper.
+function CopilotMessages({ children }: { children: React.ReactNode }) {
+  const memoized = React.useMemo(() => children, [children]);
+  return <div data-testid="messages">{memoized}</div>;
+}
+
+describe("CopilotMessages children keys", () => {
+  let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
+  const keyWarnings: string[] = [];
+
+  beforeEach(() => {
+    keyWarnings.length = 0;
+    consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation((...args: any[]) => {
+        const msg = args.map(String).join(" ");
+        if (
+          msg.includes('unique "key" prop') ||
+          msg.includes("unique 'key' prop") ||
+          msg.includes("unique key")
+        ) {
+          keyWarnings.push(msg);
+        }
+      });
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("warns about missing keys when children array lacks keys (pre-fix pattern)", () => {
+    const ChildA = () => <div>app content</div>;
+    const ChildB = () => <span>actions</span>;
+
+    // Passing an explicit array as children – this is what JSX compiles to
+    // when you write: <CopilotMessages>{memoizedChildren}<RegisteredActionsRenderer /></CopilotMessages>
+    // React sees: { children: [memoizedChildren, <RegisteredActionsRenderer />] }
+    render(<CopilotMessages>{[<ChildA />, <ChildB />]}</CopilotMessages>);
+
+    expect(keyWarnings.length).toBeGreaterThan(0);
+  });
+
+  it("does NOT warn when children array elements have keys (post-fix pattern)", () => {
+    const ChildA = () => <div>app content</div>;
+    const ChildB = () => <span>actions</span>;
+
+    // The fix: wrap in keyed elements
+    render(
+      <CopilotMessages>
+        {[
+          <React.Fragment key="children">
+            <ChildA />
+          </React.Fragment>,
+          <ChildB key="actions" />,
+        ]}
+      </CopilotMessages>,
+    );
+
+    expect(keyWarnings).toHaveLength(0);
+  });
+
+  it("does NOT warn with the actual fix pattern (keyed JSX children)", () => {
+    const MemoChildren = React.memo(() => <div>app content</div>);
+    MemoChildren.displayName = "MemoChildren";
+    const RegisteredActionsRenderer = React.memo(() => null);
+    RegisteredActionsRenderer.displayName = "RegisteredActionsRenderer";
+
+    render(
+      <CopilotMessages>
+        <React.Fragment key="children">
+          <MemoChildren />
+        </React.Fragment>
+        <RegisteredActionsRenderer key="actions" />
+      </CopilotMessages>,
+    );
+
+    expect(keyWarnings).toHaveLength(0);
+  });
+});

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

@@ -14,7 +14,7 @@
  * ```
  */
 
-import {
+import React, {
   useCallback,
   useEffect,
   useMemo,
@@ -761,8 +761,8 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
         <CoAgentStateRendersProvider>
           <MessagesTapProvider>
             <CopilotMessages>
-              {memoizedChildren}
-              <RegisteredActionsRenderer />
+              <React.Fragment key="children">{memoizedChildren}</React.Fragment>
+              <RegisteredActionsRenderer key="actions" />
             </CopilotMessages>
           </MessagesTapProvider>
           {bannerError && showDevConsole && (

package/src/hooks/__tests__/use-copilot-chat-internal-connect.test.tsx

@@ -178,18 +178,32 @@ describe("useCopilotChatInternal – connectAgent guard", () => {
     });
   });
 
-  it("does not call connectAgent when threadId matches agent's threadId", () => {
+  it("does not call connectAgent when threadId matches (same agent instance, no re-render)", async () => {
+    // useAgent now returns a per-thread clone, so the wrapper guards via
+    // lastConnectedAgentRef: connect fires once per agent instance, not once
+    // per render. After the first connect, further re-renders with the same
+    // agent do not trigger another connect.
     mockRuntimeConnectionStatus =
       CopilotKitCoreRuntimeConnectionStatus.Connected;
-    mockAgent.threadId = "config-thread-id"; // same as mockConfigThreadId
+    mockAgent.threadId = "config-thread-id";
     applyMocks();
 
-    renderHook(() => useCopilotChatInternal(), { wrapper: createWrapper() });
+    const { rerender } = renderHook(() => useCopilotChatInternal(), {
+      wrapper: createWrapper(),
+    });
 
-    expect(mockConnectAgent).not.toHaveBeenCalled();
+    await vi.waitFor(() => {
+      expect(mockConnectAgent).toHaveBeenCalledTimes(1);
+    });
+
+    // Re-render with same agent — should NOT connect again
+    rerender();
+    await vi.waitFor(() => {
+      expect(mockConnectAgent).toHaveBeenCalledTimes(1);
+    });
   });
 
-  it("does not call connectAgent when config threadId is missing", () => {
+  it("calls connectAgent when config threadId is missing", async () => {
     mockRuntimeConnectionStatus =
       CopilotKitCoreRuntimeConnectionStatus.Connected;
     mockConfigThreadId = undefined;
@@ -197,10 +211,12 @@ describe("useCopilotChatInternal – connectAgent guard", () => {
 
     renderHook(() => useCopilotChatInternal(), { wrapper: createWrapper() });
 
-    expect(mockConnectAgent).not.toHaveBeenCalled();
+    await vi.waitFor(() => {
+      expect(mockConnectAgent).toHaveBeenCalledTimes(1);
+    });
   });
 
-  it("calls connectAgent when all guard conditions are met", async () => {
+  it("calls connectAgent when status is Connected and threadIds differ", async () => {
     mockRuntimeConnectionStatus =
       CopilotKitCoreRuntimeConnectionStatus.Connected;
     mockAgent.threadId = "old-thread-id"; // differs from config
@@ -214,18 +230,13 @@ describe("useCopilotChatInternal – connectAgent guard", () => {
     });
   });
 
-  it("sets agent.threadId to config threadId before calling connectAgent", async () => {
-    mockRuntimeConnectionStatus =
-      CopilotKitCoreRuntimeConnectionStatus.Connected;
-    mockAgent.threadId = "old-thread-id";
+  it("passes config threadId to useAgent", () => {
     applyMocks();
 
     renderHook(() => useCopilotChatInternal(), { wrapper: createWrapper() });
 
-    await vi.waitFor(() => {
-      expect(mockConnectAgent).toHaveBeenCalledTimes(1);
-    });
-
-    expect(mockAgent.threadId).toBe("config-thread-id");
+    expect(vi.mocked(useAgent)).toHaveBeenCalledWith(
+      expect.objectContaining({ threadId: "config-thread-id" }),
+    );
   });
 });

package/src/hooks/use-copilot-chat_internal.ts

@@ -337,7 +337,17 @@ export function useCopilotChatInternal({
 
   // Apply priority: props > existing config > defaults
   const resolvedAgentId = existingConfig?.agentId ?? "default";
-  const { agent } = useAgent({ agentId: resolvedAgentId });
+  const { agent } = useAgent({
+    agentId: resolvedAgentId,
+    threadId: existingConfig?.threadId,
+  });
+
+  // Track the last agent instance we called connect() on. Without this,
+  // connect() fires on every render where status is Connected — including
+  // unrelated context re-renders and StrictMode double-invocations.
+  // The ref is reset in the cleanup so that remounts (StrictMode, real
+  // unmount/remount) always trigger a fresh connect.
+  const lastConnectedAgentRef = useRef<AbstractAgent | null>(null);
 
   useEffect(() => {
     let detached = false;
@@ -372,18 +382,19 @@ export function useCopilotChatInternal({
     };
     if (
       agent &&
-      existingConfig?.threadId &&
-      agent.threadId !== existingConfig.threadId &&
+      agent !== lastConnectedAgentRef.current &&
       copilotkit.runtimeConnectionStatus ===
         CopilotKitCoreRuntimeConnectionStatus.Connected
     ) {
-      agent.threadId = existingConfig.threadId;
+      lastConnectedAgentRef.current = agent;
       connect(agent);
     }
     return () => {
       // Abort the HTTP request and detach the active run.
       // This is critical for React StrictMode which unmounts+remounts in dev,
       // preventing duplicate /connect requests from reaching the server.
+      // Reset the ref so remounts always trigger a fresh connect.
+      lastConnectedAgentRef.current = null;
       detached = true;
       connectAbortController.abort();
       agent?.detachActiveRun();

package/src/v2/__tests__/utils/test-helpers.tsx

@@ -51,9 +51,18 @@ export class MockStepwiseAgent extends AbstractAgent {
     });
   }
 
-  clone(): MockStepwiseAgent {
-    // For tests, return same instance so we can keep controlling it
-    return this;
+  clone(): this {
+    // Return a new instance that shares the same subject so tests can keep
+    // controlling events via the original reference while satisfying the
+    // clone() contract (must return a distinct object).
+    // Use the concrete constructor so subclasses (e.g. FailingConnectAgent)
+    // preserve their overridden methods.
+    const cloned = new (this
+      .constructor as new () => MockStepwiseAgent)() as this;
+    cloned.agentId = this.agentId;
+    (cloned as unknown as { subject: Subject<BaseEvent> }).subject =
+      this.subject;
+    return cloned;
   }
 
   // No-op: prevent the base class from tearing down the Subject
@@ -110,7 +119,21 @@ export class MockReconnectableAgent extends AbstractAgent {
   }
 
   clone(): MockReconnectableAgent {
-    return this;
+    const cloned = new MockReconnectableAgent();
+    cloned.agentId = this.agentId;
+    (
+      cloned as unknown as {
+        subject: Subject<BaseEvent>;
+        storedEvents: BaseEvent[];
+      }
+    ).subject = this.subject;
+    (
+      cloned as unknown as {
+        subject: Subject<BaseEvent>;
+        storedEvents: BaseEvent[];
+      }
+    ).storedEvents = this.storedEvents;
+    return cloned;
   }
 
   // No-op: prevent the base class from tearing down the Subject
@@ -440,10 +463,20 @@ export function emitSuggestionToolCall(
  * A MockStepwiseAgent that emits suggestion events when run() is called
  */
 export class SuggestionsProviderAgent extends MockStepwiseAgent {
-  private _suggestions: Array<{ title: string; message: string }> = [];
+  // Shared via a container so clone() and original see the same value even
+  // when setSuggestions() is called after the clone is created.
+  private _shared: { suggestions: Array<{ title: string; message: string }> } =
+    { suggestions: [] };
 
   setSuggestions(suggestions: Array<{ title: string; message: string }>) {
-    this._suggestions = suggestions;
+    this._shared.suggestions = suggestions;
+  }
+
+  clone(): this {
+    const cloned = super.clone();
+    (cloned as unknown as { _shared: typeof this._shared })._shared =
+      this._shared;
+    return cloned;
   }
 
   run(_input: RunAgentInput): Observable<BaseEvent> {
@@ -458,7 +491,7 @@ export class SuggestionsProviderAgent extends MockStepwiseAgent {
       emitSuggestionToolCall(this, {
         toolCallId: testId("tc"),
         parentMessageId: messageId,
-        suggestions: this._suggestions,
+        suggestions: this._shared.suggestions,
       });
 
       this.emit({ type: EventType.RUN_FINISHED } as BaseEvent);

package/src/v2/components/chat/CopilotChat.tsx

@@ -71,7 +71,10 @@ export function CopilotChat({
     [threadId, existingConfig?.threadId],
   );
 
-  const { agent } = useAgent({ agentId: resolvedAgentId });
+  const { agent } = useAgent({
+    agentId: resolvedAgentId,
+    threadId: resolvedThreadId,
+  });
   const { copilotkit } = useCopilotKit();
   const { suggestions: autoSuggestions } = useSuggestions({
     agentId: resolvedAgentId,
@@ -164,7 +167,6 @@ export function CopilotChat({
         console.error("CopilotChat: connectAgent failed", error);
       }
     };
-    agent.threadId = resolvedThreadId;
     connect(agent);
     return () => {
       // Abort the HTTP request and detach the active run.

package/src/v2/components/chat/CopilotChatMessageView.tsx

@@ -12,6 +12,7 @@ import {
 } from "@ag-ui/core";
 import { twMerge } from "tailwind-merge";
 import { useRenderActivityMessage, useRenderCustomMessages } from "../../hooks";
+import { getThreadClone } from "../../hooks/use-agent";
 import { useCopilotKit } from "../../providers/CopilotKitProvider";
 import { useCopilotChatConfiguration } from "../../providers/CopilotChatConfigurationProvider";
 
@@ -313,14 +314,18 @@ export function CopilotChatMessageView({
   // Subscribe to state changes so custom message renderers re-render when state updates.
   useEffect(() => {
     if (!config?.agentId) return;
-    const agent = copilotkit.getAgent(config.agentId);
+    const registryAgent = copilotkit.getAgent(config.agentId);
+    // Prefer the per-thread clone so that state changes from the running agent
+    // (which is the clone, not the registry) trigger re-renders.
+    const agent =
+      getThreadClone(registryAgent, config.threadId) ?? registryAgent;
     if (!agent) return;
 
     const subscription = agent.subscribe({
       onStateChanged: forceUpdate,
     });
     return () => subscription.unsubscribe();
-  }, [config?.agentId, copilotkit, forceUpdate]);
+  }, [config?.agentId, config?.threadId, copilotkit, forceUpdate]);
 
   // Subscribe to interrupt element changes for in-chat rendering.
   const [interruptElement, setInterruptElement] =

package/src/v2/components/chat/__tests__/CopilotChatToolRendering.e2e.test.tsx

@@ -250,8 +250,11 @@ class MockStepwiseAgent extends AbstractAgent {
   }
 
   clone(): MockStepwiseAgent {
-    // For tests, return same instance so we can keep controlling it.
-    return this;
+    const cloned = new MockStepwiseAgent();
+    cloned.agentId = this.agentId;
+    (cloned as unknown as { subject: Subject<BaseEvent> }).subject =
+      this.subject;
+    return cloned;
   }
 
   async detachActiveRun(): Promise<void> {}

package/src/v2/components/chat/__tests__/CopilotChatToolRerenders.e2e.test.tsx

@@ -52,8 +52,11 @@ class MockStepwiseAgent extends AbstractAgent {
   }
 
   clone(): MockStepwiseAgent {
-    // For tests, return same instance so we can keep controlling it.
-    return this;
+    const cloned = new MockStepwiseAgent();
+    cloned.agentId = this.agentId;
+    (cloned as unknown as { subject: Subject<BaseEvent> }).subject =
+      this.subject;
+    return cloned;
   }
 
   async detachActiveRun(): Promise<void> {}

package/src/v2/components/chat/__tests__/MCPAppsActivityRenderer.e2e.test.tsx

@@ -78,7 +78,23 @@ class MockMCPProxyAgent extends AbstractAgent {
   }
 
   clone(): MockMCPProxyAgent {
-    return this;
+    const cloned = new MockMCPProxyAgent();
+    cloned.agentId = this.agentId;
+    type Internal = {
+      subject: Subject<BaseEvent>;
+      runAgentCalls: Array<{ input: Partial<RunAgentInput> }>;
+      runAgentResponses: Map<string, unknown>;
+    };
+    (cloned as unknown as Internal).subject = (
+      this as unknown as Internal
+    ).subject;
+    (cloned as unknown as Internal).runAgentCalls = (
+      this as unknown as Internal
+    ).runAgentCalls;
+    (cloned as unknown as Internal).runAgentResponses = (
+      this as unknown as Internal
+    ).runAgentResponses;
+    return cloned;
   }
 
   async detachActiveRun(): Promise<void> {}

package/src/v2/hooks/__tests__/use-agent-context-timing.e2e.test.tsx

@@ -42,8 +42,16 @@ describe("useAgentContext timing - follow-up run sees updated context", () => {
      * with no new messages — which is fine; we only need to capture context.
      */
     class ContextCapturingAgent extends MockStepwiseAgent {
+      // Shared so the clone and original both see the captured contexts
       public contextPerRun: Context[][] = [];
 
+      clone(): this {
+        const cloned = super.clone();
+        (cloned as unknown as ContextCapturingAgent).contextPerRun =
+          this.contextPerRun;
+        return cloned;
+      }
+
       async runAgent(
         parameters?: RunAgentParameters,
         subscriber?: AgentSubscriber,