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

package/package.json

@@ -1,21 +1,41 @@
 {
   "name": "@copilotkit/react-core",
+  "version": "1.55.0",
   "private": false,
+  "keywords": [
+    "ai",
+    "assistant",
+    "automation",
+    "copilot",
+    "copilotkit",
+    "javascript",
+    "nextjs",
+    "nodejs",
+    "react",
+    "textarea"
+  ],
   "homepage": "https://github.com/CopilotKit/CopilotKit",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/CopilotKit/CopilotKit.git"
   },
   "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "version": "1.55.0-next.8",
   "sideEffects": [
     "**/*.css"
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "typesVersions": {
+    "*": {
+      "v2": [
+        "./dist/v2/index.d.cts"
+      ]
+    }
+  },
+  "unpkg": "./dist/index.umd.js",
+  "jsdelivr": "./dist/index.umd.js",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -28,28 +48,49 @@
     "./package.json": "./package.json",
     "./v2/styles.css": "./dist/v2/index.css"
   },
-  "unpkg": "./dist/index.umd.js",
-  "jsdelivr": "./dist/index.umd.js",
-  "types": "./dist/index.d.cts",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": "^18 || ^19 || ^19.0.0-rc",
-    "react-dom": "^18 || ^19 || ^19.0.0-rc",
-    "zod": ">=3.0.0"
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@ag-ui/client": "0.0.52",
+    "@ag-ui/core": "0.0.52",
+    "@jetbrains/websandbox": "^1.1.3",
+    "@lit-labs/react": "^2.0.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@scarf/scarf": "^1.3.0",
+    "@tanstack/react-virtual": "^3.13.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "katex": "^0.16.22",
+    "lucide-react": "^0.525.0",
+    "react-markdown": "^8.0.7",
+    "rxjs": "7.8.1",
+    "streamdown": "^1.3.0",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.3.5",
+    "untruncate-json": "^0.0.1",
+    "use-stick-to-bottom": "^1.1.1",
+    "zod-to-json-schema": "^3.24.5",
+    "@copilotkit/a2ui-renderer": "1.55.0",
+    "@copilotkit/core": "1.55.0",
+    "@copilotkit/runtime-client-gql": "1.55.0",
+    "@copilotkit/shared": "1.55.0",
+    "@copilotkit/web-inspector": "1.55.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",
     "@tailwindcss/postcss": "^4.1.11",
     "@tailwindcss/typography": "^0.5.16",
-    "@valibot/to-json-schema": "^1.5.0",
-    "tailwindcss": "^4.0.8",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.0.0",
-    "arktype": "^2.1.29",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.0.2",
+    "@valibot/to-json-schema": "^1.5.0",
+    "arktype": "^2.1.29",
     "autoprefixer": "^10.4.20",
     "concurrently": "^9.1.0",
     "eslint": "^8.56.0",
@@ -58,52 +99,19 @@
     "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.2.0",
-    "vitest": "^3.2.4",
+    "tailwindcss": "^4.0.8",
     "tsdown": "^0.20.3",
     "typescript": "^5.2.3",
     "valibot": "^1.2.0",
+    "vitest": "^3.2.4",
     "zod": ">=3.0.0",
-    "eslint-config-custom": "1.4.12",
     "tsconfig": "1.4.12"
   },
-  "dependencies": {
-    "@ag-ui/client": "^0.0.48",
-    "@ag-ui/core": "0.0.48",
-    "@lit-labs/react": "^2.0.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@scarf/scarf": "^1.3.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "katex": "^0.16.22",
-    "lucide-react": "^0.525.0",
-    "react-markdown": "^8.0.7",
-    "streamdown": "^1.3.0",
-    "tailwind-merge": "^3.3.1",
-    "ts-deepmerge": "^7.0.3",
-    "tw-animate-css": "^1.3.5",
-    "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"
+  "peerDependencies": {
+    "react": "^18 || ^19 || ^19.0.0-rc",
+    "react-dom": "^18 || ^19 || ^19.0.0-rc",
+    "zod": ">=3.0.0"
   },
-  "keywords": [
-    "copilotkit",
-    "copilot",
-    "react",
-    "nextjs",
-    "nodejs",
-    "ai",
-    "assistant",
-    "javascript",
-    "automation",
-    "textarea"
-  ],
   "scripts": {
     "build:css": "tailwindcss -i ./src/v2/styles/globals.css -o ./dist/v2/index.css -m && node scripts/scope-preflight.mjs ./dist/v2/index.css",
     "build": "tsdown && pnpm run build:css",

package/scripts/scope-preflight.mjs

@@ -19,8 +19,7 @@ if (!file) {
 /** Selectors that are already scoped and should be left alone. */
 function isAlreadyScoped(selector) {
   return (
-    selector.includes("[data-copilot") ||
-    selector.includes("[data-sidebar")
+    selector.includes("[data-copilot") || selector.includes("[data-sidebar")
   );
 }
 

package/src/components/CopilotListeners.tsx

@@ -72,14 +72,47 @@ export function CopilotListeners() {
 
   useEffect(() => {
     const subscriber: CopilotKitCoreSubscriber = {
-      onError: ({ error }) => {
-        setBannerError(
-          new CopilotKitLowLevelError({
-            error,
-            message: error.message,
-            url: typeof window !== "undefined" ? window.location.href : "",
-          }),
-        );
+      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);

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-props.tsx

@@ -129,9 +129,11 @@ export interface CopilotKitProps extends Omit<
   credentials?: RequestCredentials;
 
   /**
-   * Whether to show the dev console.
+   * Whether to show the dev console (error banners and toasts).
    *
-   * Set to `true` to show error banners and toasts, `false` to hide all error UI.
+   * @deprecated Use `enableInspector` to control the AG-UI inspector,
+   * which is what most users want. `showDevConsole` only controls
+   * error toasts/banners, not the inspector button.
    * Defaults to `false` for production safety.
    */
   showDevConsole?: boolean;

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 && (