@copilotkit/react-core 1.57.3 → 1.58.0-canary.thread-id-propagation

package/scripts/scope-preflight.mjs

@@ -1,100 +0,0 @@
-/**
- * Post-processes compiled Tailwind CSS to scope all @layer base rules
- * under [data-copilotkit], preventing CopilotKit styles from leaking
- * into the host application.
- *
- * Run after `tailwindcss` CLI: node scripts/scope-preflight.mjs <file>
- */
-
-import { readFileSync, writeFileSync } from "fs";
-import postcss from "postcss";
-
-const SCOPE = "[data-copilotkit]";
-const file = process.argv[2];
-if (!file) {
-  console.error("Usage: node scripts/scope-preflight.mjs <css-file>");
-  process.exit(1);
-}
-
-/** Selectors that are already scoped and should be left alone. */
-function isAlreadyScoped(selector) {
-  return (
-    selector.includes("[data-copilot") || selector.includes("[data-sidebar")
-  );
-}
-
-/** Rewrite a single selector to be scoped under [data-copilotkit]. */
-function scopeSelector(sel) {
-  sel = sel.trim();
-
-  // Already scoped — keep as-is
-  if (isAlreadyScoped(sel)) return sel;
-
-  // html, :host → [data-copilotkit]
-  if (sel === "html" || sel === ":host" || sel === "html,:host") {
-    return SCOPE;
-  }
-
-  // body → null (remove)
-  if (sel === "body") return null;
-
-  // ::backdrop → null (cannot be scoped to a container)
-  if (sel === "::backdrop") return null;
-
-  // Bare universal selector → scope to container + descendants
-  if (sel === "*") return `${SCOPE}, ${SCOPE} *`;
-
-  // Pseudo-elements (::) and vendor pseudo-classes (:-) → descendant only
-  // These can't be combined with an attribute selector suffix
-  if (sel.startsWith(":")) {
-    return `${SCOPE} ${sel}`;
-  }
-
-  // Element / attribute selectors → descendant AND self-matching
-  // e.g. button → [data-copilotkit] button, button[data-copilotkit]
-  // This ensures <button data-copilotkit> also receives the preflight reset
-  return `${SCOPE} ${sel}, ${sel}${SCOPE}`;
-}
-
-function scopeRule(rule) {
-  const newSelectors = [];
-
-  for (const sel of rule.selectors) {
-    const scoped = scopeSelector(sel);
-    if (scoped !== null) {
-      // scopeSelector may return comma-separated selectors (for *)
-      if (typeof scoped === "string" && scoped.includes(", ")) {
-        newSelectors.push(...scoped.split(", "));
-      } else if (scoped) {
-        newSelectors.push(scoped);
-      }
-    }
-  }
-
-  if (newSelectors.length === 0) {
-    rule.remove();
-  } else {
-    rule.selectors = newSelectors;
-  }
-}
-
-/** Recursively scope all rules within a node (handles @supports, @media, etc.) */
-function scopeChildren(node) {
-  node.walk((child) => {
-    if (child.type === "rule") {
-      scopeRule(child);
-    }
-    // @supports / @media blocks are walked automatically
-  });
-}
-
-// --- Main ---
-const css = readFileSync(file, "utf8");
-const root = postcss.parse(css);
-
-root.walkAtRules("layer", (layer) => {
-  if (layer.params !== "base") return;
-  scopeChildren(layer);
-});
-
-writeFileSync(file, root.toString());

package/src/components/CopilotListeners.tsx

@@ -1,137 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useAgent, useCopilotChatConfiguration, useCopilotKit } from "../v2";
-import { CopilotKitError, parseJson } from "@copilotkit/shared";
-import { useCopilotContext } from "../context";
-import {
-  AbstractAgent,
-  AgentSubscriber,
-  AGUIConnectNotImplementedError,
-} from "@ag-ui/client";
-import { useErrorToast } from "./error-boundary/error-utils";
-import { CopilotKitCoreSubscriber } from "@copilotkit/core";
-import { useToast } from "./toast/toast-provider";
-import { CopilotKitLowLevelError } from "@copilotkit/shared";
-
-const usePredictStateSubscription = (agent?: AbstractAgent) => {
-  const predictStateToolsRef = useRef<
-    {
-      tool: string;
-      state_key: string;
-      tool_argument: string;
-    }[]
-  >([]);
-
-  const getSubscriber = useCallback(
-    (agent: AbstractAgent): AgentSubscriber => ({
-      onCustomEvent: ({ event }) => {
-        if (event.name === "PredictState") {
-          predictStateToolsRef.current = event.value;
-        }
-      },
-      onToolCallArgsEvent: ({ partialToolCallArgs, toolCallName }) => {
-        predictStateToolsRef.current.forEach((t) => {
-          if (t?.tool !== toolCallName) return;
-
-          const emittedState =
-            typeof partialToolCallArgs === "string"
-              ? parseJson(
-                  partialToolCallArgs as unknown as string,
-                  partialToolCallArgs,
-                )
-              : partialToolCallArgs;
-
-          agent.setState({
-            [t.state_key]: emittedState[t.state_key],
-          });
-        });
-      },
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    if (!agent) return;
-
-    const subscriber = getSubscriber(agent);
-    const { unsubscribe } = agent.subscribe(subscriber);
-    return () => {
-      unsubscribe();
-    };
-  }, [agent, getSubscriber]);
-};
-
-function CopilotListenersAgentSubscription() {
-  const existingConfig = useCopilotChatConfiguration();
-  const resolvedAgentId = existingConfig?.agentId;
-
-  const { agent } = useAgent({ agentId: resolvedAgentId });
-
-  usePredictStateSubscription(agent);
-
-  return null;
-}
-
-export function CopilotListeners() {
-  const { copilotkit } = useCopilotKit();
-  const { setBannerError } = useToast();
-
-  // Only render the agent subscription when agents are registered or a runtime
-  // is configured. Without this guard, useAgent() throws when the agents map is
-  // empty and no runtimeUrl is set (#3249).
-  const hasAgents = Object.keys(copilotkit.agents ?? {}).length > 0;
-  const hasRuntime = copilotkit.runtimeUrl !== undefined;
-
-  useEffect(() => {
-    const subscriber: CopilotKitCoreSubscriber = {
-      onError: ({ error, code, context }) => {
-        // Silently ignore abort errors (e.g. from navigation during active requests)
-        if (
-          error.name === "AbortError" ||
-          error.message === "Fetch is aborted" ||
-          error.message === "signal is aborted without reason" ||
-          error.message === "component unmounted" ||
-          !error.message
-        ) {
-          return;
-        }
-
-        // Always log full error details in development
-        if (process.env.NODE_ENV === "development") {
-          console.error(
-            "[CopilotKit] Agent error:",
-            error.message,
-            "\n  Code:",
-            code,
-            "\n  Context:",
-            context,
-            "\n  Stack:",
-            error.stack,
-          );
-        }
-
-        const ckError = new CopilotKitLowLevelError({
-          error,
-          message: error.message,
-          url: typeof window !== "undefined" ? window.location.href : "",
-        });
-
-        // Attach original error details for the banner to display
-        (ckError as any).details = {
-          code,
-          context,
-          stack: error.stack,
-          originalMessage: error.message,
-        };
-
-        setBannerError(ckError);
-      },
-    };
-    const subscription = copilotkit.subscribe(subscriber);
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [copilotkit?.subscribe]);
-
-  return hasAgents || hasRuntime ? <CopilotListenersAgentSubscription /> : null;
-}

package/src/components/__tests__/CopilotListeners.test.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render } from "@testing-library/react";
-import { CopilotListeners } from "../CopilotListeners";
-import { CopilotKitProvider } from "../../v2/providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../v2/providers/CopilotChatConfigurationProvider";
-import { ToastProvider } from "../toast/toast-provider";
-
-/**
- * Regression test for #3249: CopilotListeners throws when no agents registered.
- *
- * When CopilotKitProvider has no agents registered (empty agents map) and no
- * runtimeUrl, useAgent() inside CopilotListeners throws. The component should
- * handle this gracefully and render null without crashing.
- */
-describe("CopilotListeners (#3249)", () => {
-  beforeEach(() => {
-    vi.spyOn(console, "error").mockImplementation(() => {});
-  });
-
-  it("does not throw when no agents are registered", () => {
-    // No agents, no runtimeUrl - should not crash
-    expect(() => {
-      render(
-        <ToastProvider enabled={false}>
-          <CopilotKitProvider>
-            <CopilotChatConfigurationProvider
-              agentId="default"
-              threadId="test-thread"
-            >
-              <CopilotListeners />
-            </CopilotChatConfigurationProvider>
-          </CopilotKitProvider>
-        </ToastProvider>,
-      );
-    }).not.toThrow();
-  });
-});

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

@@ -1,92 +0,0 @@
-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/__tests__/copilotkit-error.test.tsx

@@ -1,77 +0,0 @@
-import { vi, type Mock } from "vitest";
-import { CopilotErrorEvent, CopilotErrorHandler } from "@copilotkit/shared";
-
-describe("CopilotKit onError types", () => {
-  let mockError: Mock;
-
-  beforeEach(() => {
-    mockError = vi.fn();
-  });
-
-  describe("onError type checking", () => {
-    it("should accept CopilotErrorHandler type", () => {
-      // RED: Will fail - testing type compatibility
-      const handler: CopilotErrorHandler = mockError;
-      expect(handler).toBeDefined();
-    });
-
-    it("should validate error event structure", () => {
-      // RED: Will fail - validating event structure
-      const mockEvent: CopilotErrorEvent = {
-        type: "error",
-        timestamp: Date.now(),
-        context: {
-          source: "ui",
-          request: {
-            operation: "test",
-            startTime: Date.now(),
-          },
-        },
-      };
-
-      expect(mockEvent.type).toBe("error");
-      expect(mockEvent.timestamp).toBeDefined();
-      expect(mockEvent.context.source).toBe("ui");
-    });
-
-    it("should validate error event types", () => {
-      // RED: Will fail - ensuring all event types are valid
-      const validTypes: CopilotErrorEvent["type"][] = [
-        "error",
-        "request",
-        "response",
-        "agent_state",
-        "action",
-        "message",
-        "performance",
-      ];
-
-      expect(validTypes).toContain("error");
-      expect(validTypes).toContain("request");
-      expect(validTypes).toContain("agent_state");
-    });
-  });
-
-  describe("error handler functionality", () => {
-    it("should accept error handler with proper signature", () => {
-      // RED: Will fail - testing handler function signature
-      const handler: CopilotErrorHandler = (errorEvent: CopilotErrorEvent) => {
-        console.log("Error:", errorEvent.type);
-      };
-
-      expect(typeof handler).toBe("function");
-    });
-
-    it("should handle async error handlers", async () => {
-      // RED: Will fail - testing async handler support
-      const asyncHandler: CopilotErrorHandler = async (
-        errorEvent: CopilotErrorEvent,
-      ) => {
-        await Promise.resolve();
-        return;
-      };
-
-      expect(typeof asyncHandler).toBe("function");
-    });
-  });
-});

package/src/components/copilot-provider/__tests__/error-visibility-prod.test.tsx

@@ -1,70 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { ErrorVisibility } from "@copilotkit/shared";
-import { getErrorSuppression } from "../copilot-messages";
-
-/**
- * Regression tests for #2431: error visibility when showDevConsole=false.
- *
- * The bug: `routeError` returned early for ALL errors when `isDev` was false,
- * suppressing TOAST and BANNER errors that should always reach the user.
- *
- * The fix: only SILENT and DEV_ONLY errors are suppressed in production;
- * TOAST, BANNER, and untagged errors are always surfaced.
- */
-describe("getErrorSuppression — error visibility routing (#2431)", () => {
-  // --- Production (isDev = false) ---
-
-  it("surfaces TOAST errors in production", () => {
-    expect(getErrorSuppression(ErrorVisibility.TOAST, false)).toBeNull();
-  });
-
-  it("surfaces BANNER errors in production", () => {
-    expect(getErrorSuppression(ErrorVisibility.BANNER, false)).toBeNull();
-  });
-
-  it("suppresses DEV_ONLY errors in production", () => {
-    expect(getErrorSuppression(ErrorVisibility.DEV_ONLY, false)).not.toBeNull();
-  });
-
-  it("suppresses SILENT errors in production", () => {
-    expect(getErrorSuppression(ErrorVisibility.SILENT, false)).not.toBeNull();
-  });
-
-  it("surfaces errors with no visibility tag in production", () => {
-    expect(getErrorSuppression(undefined, false)).toBeNull();
-  });
-
-  // --- Development (isDev = true) ---
-
-  it("surfaces TOAST errors in development", () => {
-    expect(getErrorSuppression(ErrorVisibility.TOAST, true)).toBeNull();
-  });
-
-  it("surfaces BANNER errors in development", () => {
-    expect(getErrorSuppression(ErrorVisibility.BANNER, true)).toBeNull();
-  });
-
-  it("surfaces DEV_ONLY errors in development", () => {
-    expect(getErrorSuppression(ErrorVisibility.DEV_ONLY, true)).toBeNull();
-  });
-
-  it("suppresses SILENT errors in development", () => {
-    expect(getErrorSuppression(ErrorVisibility.SILENT, true)).not.toBeNull();
-  });
-
-  it("surfaces errors with no visibility tag in development", () => {
-    expect(getErrorSuppression(undefined, true)).toBeNull();
-  });
-
-  // --- Log prefix strings ---
-
-  it("returns a 'Silent Error' prefix for SILENT visibility", () => {
-    const prefix = getErrorSuppression(ErrorVisibility.SILENT, false);
-    expect(prefix).toContain("Silent");
-  });
-
-  it("returns a 'hidden in production' prefix for DEV_ONLY visibility", () => {
-    const prefix = getErrorSuppression(ErrorVisibility.DEV_ONLY, false);
-    expect(prefix).toContain("hidden in production");
-  });
-});

package/src/components/copilot-provider/__tests__/v1-explicit-threadid-bridge.test.tsx

@@ -1,107 +0,0 @@
-import React from "react";
-import { render, screen, act } from "@testing-library/react";
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import { CopilotKit } from "../copilotkit";
-import { useCopilotContext } from "../../../context/copilot-context";
-import { useCopilotChatConfiguration } from "../../../v2";
-import type { CopilotKitProps } from "../copilotkit-props";
-
-/**
- * Probe that reads hasExplicitThreadId from the CopilotChatConfigurationProvider
- * that the v1 <CopilotKit> bridge renders. This is the surface CopilotChat
- * itself reads from to gate /connect and the welcome screen.
- */
-function ExplicitProbe() {
-  const config = useCopilotChatConfiguration();
-  return (
-    <>
-      <div data-testid="explicit">{String(config?.hasExplicitThreadId)}</div>
-      <div data-testid="threadId">{config?.threadId ?? ""}</div>
-    </>
-  );
-}
-
-/**
- * Exposes the v1 context's setThreadId so tests can drive the
- * auto → explicit transition from outside React.
- */
-function SetThreadIdButton({ nextId }: { nextId: string }) {
-  const { setThreadId } = useCopilotContext();
-  return (
-    <button data-testid="setThread" onClick={() => setThreadId(nextId)}>
-      set
-    </button>
-  );
-}
-
-// `agents__unsafe_dev_only` isn't declared on v1 CopilotKitProps but is
-// forwarded via spread to the v2 provider underneath. Cast once here rather
-// than every render.
-type V1Props = CopilotKitProps & {
-  agents__unsafe_dev_only?: Record<string, unknown>;
-};
-const CopilotKitAny = CopilotKit as unknown as React.FC<V1Props>;
-
-/**
- * Regression coverage for fix/welcome-not-showing-at-all at the v1 bridge
- * boundary. The v1 <CopilotKit> wrapper pipes a ThreadsProvider-minted UUID
- * through as `threadId`, but that UUID is NOT a caller choice — the bridge
- * must mark it as non-explicit so downstream consumers don't treat it as a
- * real backend thread. These tests verify the signal makes it all the way
- * through to CopilotChatConfigurationProvider.
- */
-describe("v1 <CopilotKit> bridge → hasExplicitThreadId", () => {
-  // Silence the in-dev/test "missing runtimeUrl" warning — we pass publicApiKey.
-  let warnSpy: ReturnType<typeof vi.spyOn>;
-  beforeEach(() => {
-    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-  });
-  afterEach(() => {
-    warnSpy.mockRestore();
-  });
-
-  it("is false on mount when no threadId prop is supplied", () => {
-    render(
-      <CopilotKitAny publicApiKey="test-key">
-        <ExplicitProbe />
-      </CopilotKitAny>,
-    );
-
-    // ThreadsProvider auto-minted the UUID — it's not a caller-picked thread.
-    expect(screen.getByTestId("explicit").textContent).toBe("false");
-    // threadId still resolves to a value (mock-thread-id from setupTests),
-    // but downstream consumers must NOT treat it as real.
-    expect(screen.getByTestId("threadId").textContent).toBe("mock-thread-id");
-  });
-
-  it("is true when threadId prop is supplied to <CopilotKit>", () => {
-    render(
-      <CopilotKitAny publicApiKey="test-key" threadId="caller-thread">
-        <ExplicitProbe />
-      </CopilotKitAny>,
-    );
-
-    expect(screen.getByTestId("explicit").textContent).toBe("true");
-    expect(screen.getByTestId("threadId").textContent).toBe("caller-thread");
-  });
-
-  it("flips from false to true after setThreadId() is called on the v1 context", () => {
-    render(
-      <CopilotKitAny publicApiKey="test-key">
-        <ExplicitProbe />
-        <SetThreadIdButton nextId="user-picked-thread" />
-      </CopilotKitAny>,
-    );
-
-    expect(screen.getByTestId("explicit").textContent).toBe("false");
-
-    act(() => {
-      screen.getByTestId("setThread").click();
-    });
-
-    expect(screen.getByTestId("threadId").textContent).toBe(
-      "user-picked-thread",
-    );
-    expect(screen.getByTestId("explicit").textContent).toBe("true");
-  });
-});