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

package/package.json

@@ -10,7 +10,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.54.1",
+  "version": "1.55.0-next.8",
   "sideEffects": [
     "**/*.css"
   ],
@@ -39,30 +39,58 @@
   },
   "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",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^9.1.0",
     "eslint": "^8.56.0",
     "jsdom": "^26.1.0",
+    "phoenix": "^1.8.4",
+    "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.2.0",
     "vitest": "^3.2.4",
     "tsdown": "^0.20.3",
     "typescript": "^5.2.3",
+    "valibot": "^1.2.0",
     "zod": ">=3.0.0",
-    "eslint-config-custom": "1.4.13",
-    "tsconfig": "1.4.13"
+    "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",
-    "@copilotkit/runtime-client-gql": "1.54.1",
-    "@copilotkit/shared": "1.54.1",
-    "@copilotkitnext/core": "1.54.1",
-    "@copilotkitnext/react": "1.54.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"
   },
   "keywords": [
     "copilotkit",
@@ -77,7 +105,7 @@
     "textarea"
   ],
   "scripts": {
-    "build:css": "tailwindcss -i ./src/v2/index.css -o ./dist/v2/index.css -m",
+    "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",
     "dev": "tsdown --watch",
     "test": "vitest run",
@@ -86,6 +114,6 @@
     "link:global": "pnpm link --global",
     "unlink:global": "pnpm unlink --global",
     "publint": "publint .",
-    "attw": "attw --pack . --profile node16"
+    "attw": "attw --pack . --profile node16 --ignore-rules internal-resolution-error"
   }
 }

package/scripts/scope-preflight.mjs

@@ -0,0 +1,101 @@
+/**
+ * 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,9 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import {
-  useAgent,
-  useCopilotChatConfiguration,
-  useCopilotKit,
-} from "@copilotkitnext/react";
+import { useAgent, useCopilotChatConfiguration, useCopilotKit } from "../v2";
 import { CopilotKitError, parseJson } from "@copilotkit/shared";
 import { useCopilotContext } from "../context";
 import {
@@ -12,7 +8,7 @@ import {
   AGUIConnectNotImplementedError,
 } from "@ag-ui/client";
 import { useErrorToast } from "./error-boundary/error-utils";
-import { CopilotKitCoreSubscriber } from "@copilotkitnext/core";
+import { CopilotKitCoreSubscriber } from "@copilotkit/core";
 import { useToast } from "./toast/toast-provider";
 import { CopilotKitLowLevelError } from "@copilotkit/shared";
 

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

@@ -29,7 +29,7 @@ import {
   CopilotKitError,
   CopilotKitErrorCode,
 } from "@copilotkit/shared";
-import { Suggestion } from "@copilotkitnext/core";
+import { Suggestion } from "@copilotkit/core";
 
 // Helper to determine if error should show as banner based on visibility and legacy patterns
 function shouldShowAsBanner(gqlError: GraphQLError): boolean {

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

@@ -2,7 +2,7 @@ import { ForwardedParametersInput } from "@copilotkit/runtime-client-gql";
 import { ReactNode } from "react";
 import { AuthState } from "../../context/copilot-context";
 import { CopilotErrorHandler } from "@copilotkit/shared";
-import { CopilotKitProviderProps } from "@copilotkitnext/react";
+import { CopilotKitProviderProps } from "../../v2";
 /**
  * Props for CopilotKit.
  */

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

@@ -25,9 +25,9 @@ import {
 import {
   CopilotChatConfigurationProvider,
   CopilotKitInspector,
-  CopilotKitProvider as CopilotKitNextProvider,
+  CopilotKitProvider as CopilotKitV2Provider,
   useCopilotKit,
-} from "@copilotkitnext/react";
+} from "../../v2";
 import {
   CopilotContext,
   CopilotApiConfig,
@@ -90,14 +90,14 @@ export function CopilotKit({ children, ...props }: CopilotKitProps) {
         showUsageBanner={enabled}
       >
         <ThreadsProvider threadId={props.threadId}>
-          <CopilotKitNextProvider
+          <CopilotKitV2Provider
             {...props}
             showDevConsole={showInspector}
             renderCustomMessages={renderArr}
             useSingleEndpoint={props.useSingleEndpoint ?? true}
           >
             <CopilotKitInternal {...props}>{children}</CopilotKitInternal>
-          </CopilotKitNextProvider>
+          </CopilotKitV2Provider>
         </ThreadsProvider>
       </CopilotErrorBoundary>
     </ToastProvider>

package/src/context/copilot-messages-context.tsx

@@ -4,7 +4,7 @@
 
 import { Message } from "@copilotkit/runtime-client-gql";
 import React from "react";
-import { Suggestion } from "@copilotkitnext/core";
+import { Suggestion } from "@copilotkit/core";
 
 export interface CopilotMessagesContextParams {
   messages: Message[];

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

@@ -3,7 +3,7 @@ import { renderHook, waitFor } from "@testing-library/react";
 import { useCoAgent } from "../use-coagent";
 import type { AgentSubscriber } from "@ag-ui/client";
 
-// Mock functions for @copilotkitnext/react
+// Mock functions for v2
 const mockSetState = vi.fn();
 const mockRunAgent = vi.fn();
 const mockAbortRun = vi.fn();
@@ -29,7 +29,7 @@ const mockAgent = {
   }),
 };
 
-vi.mock("@copilotkitnext/react", () => ({
+vi.mock("../../v2", () => ({
   useAgent: vi.fn(() => ({ agent: mockAgent })),
   useCopilotKit: vi.fn(() => ({
     copilotkit: {

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

@@ -11,7 +11,7 @@ import {
 } from "../../context";
 import type { Claim } from "../use-coagent-state-render-bridge.helpers";
 import { createTestCopilotContext } from "../../test-helpers/copilot-context";
-import { useRenderCustomMessages } from "@copilotkitnext/react";
+import { useRenderCustomMessages } from "../../v2";
 
 type TestMessage = {
   id: string;
@@ -40,7 +40,7 @@ const mockAgent = {
 
 let lastSubscriber: TestAgentSubscriber | null = null;
 
-vi.mock("@copilotkitnext/react", () => ({
+vi.mock("../../v2", () => ({
   useAgent: vi.fn(() => ({ agent: mockAgent })),
   useCopilotKit: vi.fn(() => ({
     copilotkit: {

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

@@ -4,12 +4,8 @@ import { renderHook, act } from "@testing-library/react";
 import { useCopilotChatInternal } from "../use-copilot-chat_internal";
 import { CoAgentStateRendersProvider, CopilotContext } from "../../context";
 import { createTestCopilotContext } from "../../test-helpers/copilot-context";
-import {
-  useAgent,
-  useCopilotKit,
-  useCopilotChatConfiguration,
-} from "@copilotkitnext/react";
-import { CopilotKitCoreRuntimeConnectionStatus } from "@copilotkitnext/core";
+import { useAgent, useCopilotKit, useCopilotChatConfiguration } from "../../v2";
+import { CopilotKitCoreRuntimeConnectionStatus } from "@copilotkit/core";
 
 // ---------------------------------------------------------------------------
 // Mutable state that tests can tweak between renders
@@ -37,7 +33,7 @@ let mockConfigThreadId: string | undefined = "config-thread-id";
 // ---------------------------------------------------------------------------
 // Module mocks
 // ---------------------------------------------------------------------------
-vi.mock("@copilotkitnext/react", () => ({
+vi.mock("../../v2", () => ({
   useAgent: vi.fn(() => ({ agent: mockAgent })),
   useCopilotKit: vi.fn(() => ({
     copilotkit: {

package/src/hooks/__tests__/use-frontend-tool-available.test.tsx

@@ -6,7 +6,7 @@ import { useFrontendTool } from "../use-frontend-tool";
 // Track what gets passed to the v2 hook
 let lastV2ToolCall: any = null;
 
-vi.mock("@copilotkitnext/react", () => ({
+vi.mock("../../v2", () => ({
   useFrontendTool: vi.fn((tool: any) => {
     lastV2ToolCall = tool;
   }),

package/src/hooks/__tests__/use-frontend-tool-remount.e2e.test.tsx

@@ -1,11 +1,11 @@
 import { vi } from "vitest";
 import React, { useEffect } from "react";
 import { render, waitFor } from "@testing-library/react";
-import { ToolCallStatus } from "@copilotkitnext/core";
+import { ToolCallStatus } from "@copilotkit/core";
 import { useFrontendTool } from "../use-frontend-tool";
-import * as copilotkitNextReact from "@copilotkitnext/react";
+import * as copilotKitV2React from "../../v2";
 
-vi.mock("@copilotkitnext/react", () => {
+vi.mock("../../v2", () => {
   let currentRender: any = null;
   const listeners = new Set<() => void>();
 
@@ -24,7 +24,7 @@ vi.mock("@copilotkitnext/react", () => {
   };
 });
 
-const toolRenderModule = copilotkitNextReact as unknown as {
+const toolRenderModule = copilotKitV2React as unknown as {
   __getCurrentRender: () => any;
   __subscribeRender: (listener: () => void) => () => void;
 };

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import type { AgentSubscriber } from "@ag-ui/client";
-import { useAgent } from "@copilotkitnext/react";
+import { useAgent } from "../v2";
 
 export function useAgentNodeName(agentName?: string) {
   const { agent } = useAgent({ agentId: agentName });

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

@@ -1,7 +1,4 @@
-import {
-  ReactCustomMessageRendererPosition,
-  useAgent,
-} from "@copilotkitnext/react";
+import { ReactCustomMessageRendererPosition, useAgent } from "../v2";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { AgentSubscriber } from "@ag-ui/client";
 import { useCoAgentStateRenders } from "../context";

package/src/hooks/use-coagent.ts

@@ -90,7 +90,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Message } from "@copilotkit/shared";
-import { useAgent, useCopilotKit } from "@copilotkitnext/react";
+import { useAgent, useCopilotKit } from "../v2";
 import { type AgentSubscriber } from "@ag-ui/client";
 import { useAgentNodeName } from "./use-agent-nodename";
 

package/src/hooks/use-configure-chat-suggestions.tsx

@@ -3,8 +3,8 @@ import {
   useCopilotChatConfiguration,
   useCopilotKit,
   useSuggestions,
-} from "@copilotkitnext/react";
-import { StaticSuggestionsConfig, Suggestion } from "@copilotkitnext/core";
+} from "../v2";
+import { StaticSuggestionsConfig, Suggestion } from "@copilotkit/core";
 import { useCopilotContext } from "../context";
 import { useEffect, useMemo } from "react";
 

package/src/hooks/use-copilot-chat-suggestions.tsx

@@ -63,9 +63,9 @@ import {
   useCopilotChatConfiguration,
   useCopilotKit,
   useSuggestions,
-} from "@copilotkitnext/react";
+} from "../v2";
 import { useEffect } from "react";
-import { StaticSuggestionsConfig, Suggestion } from "@copilotkitnext/core";
+import { StaticSuggestionsConfig, Suggestion } from "@copilotkit/core";
 
 type StaticSuggestionInput = Omit<Suggestion, "isLoading"> &
   Partial<Pick<Suggestion, "isLoading">>;

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

@@ -20,11 +20,11 @@ import {
   useCopilotKit,
   useRenderCustomMessages,
   useSuggestions,
-} from "@copilotkitnext/react";
+} from "../v2";
 import {
   Suggestion,
   CopilotKitCoreRuntimeConnectionStatus,
-} from "@copilotkitnext/core";
+} from "@copilotkit/core";
 import { useLazyToolRenderer } from "./use-lazy-tool-renderer";
 import {
   AbstractAgent,

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

@@ -61,7 +61,7 @@
  * }
  * ```
  */
-import { useCopilotKit } from "@copilotkitnext/react";
+import { useCopilotKit } from "../v2";
 import { useEffect, useRef } from "react";
 
 /**

package/src/hooks/use-frontend-tool.ts

@@ -6,11 +6,11 @@ import {
   MappedParameterTypes,
 } from "@copilotkit/shared";
 import { parseJson } from "@copilotkit/shared";
-import { ToolCallStatus } from "@copilotkitnext/core";
+import { ToolCallStatus } from "@copilotkit/core";
 import {
   type ReactFrontendTool,
   useFrontendTool as useFrontendToolVNext,
-} from "@copilotkitnext/react";
+} from "../v2";
 
 type FrontendToolOptions<T extends Parameter[] | []> = ReactFrontendTool<
   MappedParameterTypes<T>

package/src/hooks/use-human-in-the-loop.ts

@@ -11,8 +11,8 @@ import {
   getZodParameters,
   parseJson,
 } from "@copilotkit/shared";
-import { useHumanInTheLoop as useHumanInTheLoopVNext } from "@copilotkitnext/react";
-import { ToolCallStatus } from "@copilotkitnext/core";
+import { useHumanInTheLoop as useHumanInTheLoopVNext } from "../v2";
+import { ToolCallStatus } from "@copilotkit/core";
 import React, {
   ComponentType,
   FunctionComponent,

package/src/hooks/use-langgraph-interrupt.ts

@@ -1,14 +1,11 @@
 import React, { useCallback, useRef } from "react";
 import { LangGraphInterruptRender } from "../types/interrupt-action";
-import {
-  useInterrupt,
-  useCopilotChatConfiguration,
-} from "@copilotkitnext/react";
+import { useInterrupt, useCopilotChatConfiguration } from "../v2";
 import type {
   InterruptEvent,
   InterruptRenderProps,
   InterruptHandlerProps,
-} from "@copilotkitnext/react";
+} from "../v2";
 import { MetaEventName } from "@copilotkit/runtime-client-gql";
 import { parseJson } from "@copilotkit/shared";
 import { useAgentNodeName } from "./use-agent-nodename";

package/src/hooks/use-lazy-tool-renderer.tsx

@@ -1,4 +1,4 @@
-import { useRenderToolCall } from "@copilotkitnext/react";
+import { useRenderToolCall } from "../v2";
 import { AIMessage, Message, ToolResult } from "@copilotkit/shared";
 import React, { useCallback } from "react";
 

package/src/hooks/use-render-tool-call.ts

@@ -1,6 +1,6 @@
 import { type Parameter, getZodParameters } from "@copilotkit/shared";
 import { parseJson } from "@copilotkit/shared";
-import { defineToolCallRenderer, useCopilotKit } from "@copilotkitnext/react";
+import { defineToolCallRenderer, useCopilotKit } from "../v2";
 import type React from "react";
 import { useEffect, useRef } from "react";
 import {

package/src/lib/copilot-task.ts

@@ -43,7 +43,7 @@
  * }
  * ```
  *
- * Have a look at the [Presentation Example App](https://github.com/CopilotKit/CopilotKit/blob/main/src/v1.x/examples/next-openai/src/app/presentation/page.tsx) for a more complete example.
+ * Have a look at the [Presentation Example App](https://github.com/CopilotKit/CopilotKit/blob/main/examples/v1/next-openai/src/app/presentation/page.tsx) for a more complete example.
  */
 
 import {

package/src/setupTests.ts

@@ -12,20 +12,24 @@ vi.mock("@segment/analytics-node", () => ({
   })),
 }));
 
-vi.mock("@copilotkit/shared", () => ({
-  parseJson: vi.fn((jsonString, defaultValue) => {
-    try {
-      return JSON.parse(jsonString);
-    } catch {
-      return defaultValue;
-    }
-  }),
-  dataToUUID: vi.fn((data) => JSON.stringify(data)),
-  getZodParameters: vi.fn(() => z.object({})),
-  randomId: vi.fn(() => "test-random-id"),
-  CopilotKitAgentDiscoveryError: vi.fn(),
-  randomUUID: vi.fn(() => "mock-thread-id"),
-}));
+vi.mock("@copilotkit/shared", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@copilotkit/shared")>();
+  return {
+    ...actual,
+    parseJson: vi.fn((jsonString, defaultValue) => {
+      try {
+        return JSON.parse(jsonString);
+      } catch {
+        return defaultValue;
+      }
+    }),
+    dataToUUID: vi.fn((data) => JSON.stringify(data)),
+    getZodParameters: vi.fn(() => z.object({})),
+    randomId: vi.fn(() => "test-random-id"),
+    CopilotKitAgentDiscoveryError: vi.fn(),
+    randomUUID: vi.fn(() => "mock-thread-id"),
+  };
+});
 
 // Mock react-dom/test-utils to avoid compatibility issues
 vi.mock("react-dom/test-utils", () => ({