@copilotkit/react-core 1.54.1-next.6 → 1.55.0-next.7

package/src/v2/components/ui/tooltip.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "../../lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-copilotkit
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "cpk:bg-primary cpk:text-primary-foreground cpk:animate-in cpk:fade-in-0 cpk:zoom-in-95 cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:w-fit cpk:origin-(--radix-tooltip-content-transform-origin) cpk:rounded-md cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="cpk:bg-primary cpk:fill-primary cpk:z-50 cpk:size-2.5 cpk:translate-y-[calc(-50%_-_2px)] cpk:rotate-45 cpk:rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/v2/hooks/__tests__/standard-schema-types.test.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import { describe, it, expectTypeOf } from "vitest";
+import { z } from "zod";
+import * as v from "valibot";
+import { type } from "arktype";
+import type { StandardSchemaV1, InferSchemaOutput } from "@copilotkit/shared";
+import type {
+  RenderToolProps,
+  RenderToolInProgressProps,
+  RenderToolExecutingProps,
+  RenderToolCompleteProps,
+} from "../use-render-tool";
+import type { ReactToolCallRenderer } from "../../types/react-tool-call-renderer";
+
+describe("RenderToolProps type inference", () => {
+  describe("with Zod schemas", () => {
+    type ZodSchema = z.ZodObject<{
+      query: z.ZodString;
+      limit: z.ZodOptional<z.ZodNumber>;
+    }>;
+
+    it("RenderToolInProgressProps has Partial parameters", () => {
+      expectTypeOf<
+        RenderToolInProgressProps<ZodSchema>["parameters"]
+      >().toEqualTypeOf<
+        Partial<{ query: string; limit?: number | undefined }>
+      >();
+    });
+
+    it("RenderToolExecutingProps has full parameters", () => {
+      expectTypeOf<
+        RenderToolExecutingProps<ZodSchema>["parameters"]
+      >().toEqualTypeOf<{ query: string; limit?: number | undefined }>();
+    });
+
+    it("RenderToolCompleteProps has full parameters and string result", () => {
+      type Complete = RenderToolCompleteProps<ZodSchema>;
+      expectTypeOf<Complete["parameters"]>().toEqualTypeOf<{
+        query: string;
+        limit?: number | undefined;
+      }>();
+      expectTypeOf<Complete["result"]>().toBeString();
+      expectTypeOf<Complete["status"]>().toEqualTypeOf<"complete">();
+    });
+
+    it("RenderToolProps is a discriminated union", () => {
+      type Props = RenderToolProps<ZodSchema>;
+
+      // The union should include all three statuses
+      expectTypeOf<Props>().toMatchTypeOf<{ name: string }>();
+    });
+  });
+
+  describe("with Valibot schemas", () => {
+    it("infers Partial parameters for inProgress", () => {
+      const schema = v.object({
+        city: v.string(),
+        temp: v.number(),
+      });
+      type S = typeof schema;
+
+      expectTypeOf<RenderToolInProgressProps<S>["parameters"]>().toEqualTypeOf<
+        Partial<{ city: string; temp: number }>
+      >();
+    });
+
+    it("infers full parameters for executing", () => {
+      const schema = v.object({
+        city: v.string(),
+      });
+      type S = typeof schema;
+
+      expectTypeOf<RenderToolExecutingProps<S>["parameters"]>().toEqualTypeOf<{
+        city: string;
+      }>();
+    });
+  });
+
+  describe("with ArkType schemas", () => {
+    it("infers Partial parameters for inProgress", () => {
+      const schema = type({
+        query: "string",
+        limit: "number",
+      });
+      type S = typeof schema;
+
+      expectTypeOf<RenderToolInProgressProps<S>["parameters"]>().toEqualTypeOf<
+        Partial<{ query: string; limit: number }>
+      >();
+    });
+
+    it("infers full parameters for complete", () => {
+      const schema = type({
+        query: "string",
+      });
+      type S = typeof schema;
+
+      expectTypeOf<RenderToolCompleteProps<S>["parameters"]>().toEqualTypeOf<{
+        query: string;
+      }>();
+    });
+  });
+});
+
+describe("ReactToolCallRenderer type inference", () => {
+  it("args field accepts a StandardSchemaV1", () => {
+    expectTypeOf<ReactToolCallRenderer<{ x: number }>["args"]>().toMatchTypeOf<
+      StandardSchemaV1<any, { x: number }>
+    >();
+  });
+
+  it("render component receives typed args", () => {
+    type Renderer = ReactToolCallRenderer<{ city: string }>;
+
+    // The render component should be a ComponentType
+    expectTypeOf<Renderer["render"]>().toMatchTypeOf<
+      React.ComponentType<any>
+    >();
+  });
+});
+
+describe("useComponent type inference", () => {
+  it("InferRenderProps extracts output from StandardSchemaV1", () => {
+    // This tests the type utility used inside useComponent
+    type InferRenderProps<T> = T extends StandardSchemaV1
+      ? InferSchemaOutput<T>
+      : any;
+
+    const zodSchema = z.object({ city: z.string() });
+    expectTypeOf<InferRenderProps<typeof zodSchema>>().toEqualTypeOf<{
+      city: string;
+    }>();
+
+    const valibotSchema = v.object({ query: v.string() });
+    expectTypeOf<InferRenderProps<typeof valibotSchema>>().toEqualTypeOf<{
+      query: string;
+    }>();
+
+    const arktypeSchema = type({ id: "string" });
+    expectTypeOf<InferRenderProps<typeof arktypeSchema>>().toEqualTypeOf<{
+      id: string;
+    }>();
+  });
+
+  it("InferRenderProps returns any for undefined", () => {
+    type InferRenderProps<T> = T extends StandardSchemaV1
+      ? InferSchemaOutput<T>
+      : any;
+
+    expectTypeOf<InferRenderProps<undefined>>().toBeAny();
+  });
+});

package/src/v2/hooks/__tests__/standard-schema.test.tsx

@@ -0,0 +1,282 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { z } from "zod";
+import * as v from "valibot";
+import { type } from "arktype";
+import { useRenderTool, type RenderToolProps } from "../use-render-tool";
+import { useComponent } from "../use-component";
+import { useCopilotKit } from "../../providers/CopilotKitProvider";
+import { useFrontendTool } from "../use-frontend-tool";
+import type { ReactToolCallRenderer } from "../../types/react-tool-call-renderer";
+import type { StandardSchemaV1 } from "@copilotkit/shared";
+
+vi.mock("../../providers/CopilotKitProvider", () => ({
+  useCopilotKit: vi.fn(),
+}));
+
+vi.mock("../use-frontend-tool", () => ({
+  useFrontendTool: vi.fn(),
+}));
+
+type MockCore = {
+  renderToolCalls: ReactToolCallRenderer[];
+  setRenderToolCalls: ReturnType<typeof vi.fn>;
+  addHookRenderToolCall: ReturnType<typeof vi.fn>;
+  removeHookRenderToolCall: ReturnType<typeof vi.fn>;
+};
+
+const mockUseCopilotKit = useCopilotKit as ReturnType<typeof vi.fn>;
+const mockUseFrontendTool = useFrontendTool as ReturnType<typeof vi.fn>;
+
+function createMockCore(
+  initialRenderToolCalls: ReactToolCallRenderer[] = [],
+): MockCore {
+  const hookEntries = new Map<string, ReactToolCallRenderer>();
+  const core: MockCore = {
+    renderToolCalls: initialRenderToolCalls,
+    setRenderToolCalls: vi.fn((next: ReactToolCallRenderer[]) => {
+      core.renderToolCalls = next;
+    }),
+    addHookRenderToolCall: vi.fn((entry: ReactToolCallRenderer) => {
+      const key = `${entry.agentId ?? ""}:${entry.name}`;
+      hookEntries.set(key, entry);
+      core.renderToolCalls = [
+        ...initialRenderToolCalls,
+        ...hookEntries.values(),
+      ];
+    }),
+    removeHookRenderToolCall: vi.fn(),
+  };
+
+  return core;
+}
+
+describe("useRenderTool with Standard Schema", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Zod schemas (existing behavior)", () => {
+    it("registers a renderer with a Zod schema", () => {
+      const core = createMockCore();
+      mockUseCopilotKit.mockReturnValue({ copilotkit: core });
+
+      const schema = z.object({ query: z.string() });
+
+      const Harness: React.FC = () => {
+        useRenderTool(
+          {
+            name: "search",
+            parameters: schema,
+            render: () => <div>render</div>,
+          },
+          [],
+        );
+        return null;
+      };
+
+      render(<Harness />);
+
+      expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(1);
+      const renderer = core.renderToolCalls.find(
+        (item) => item.name === "search",
+      );
+      expect(renderer).toBeDefined();
+      expect(renderer?.args).toBe(schema);
+    });
+  });
+
+  describe("Valibot schemas", () => {
+    it("registers a renderer with a Valibot schema", () => {
+      const core = createMockCore();
+      mockUseCopilotKit.mockReturnValue({ copilotkit: core });
+
+      const schema = v.object({ query: v.string() });
+
+      const Harness: React.FC = () => {
+        useRenderTool(
+          {
+            name: "searchValibot",
+            parameters: schema as unknown as StandardSchemaV1<
+              any,
+              { query: string }
+            >,
+            render: () => <div>valibot render</div>,
+          },
+          [],
+        );
+        return null;
+      };
+
+      render(<Harness />);
+
+      expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(1);
+      const renderer = core.renderToolCalls.find(
+        (item) => item.name === "searchValibot",
+      );
+      expect(renderer).toBeDefined();
+      expect(renderer?.args["~standard"].vendor).toBe("valibot");
+    });
+  });
+
+  describe("ArkType schemas", () => {
+    it("registers a renderer with an ArkType schema", () => {
+      const core = createMockCore();
+      mockUseCopilotKit.mockReturnValue({ copilotkit: core });
+
+      const schema = type({ query: "string" });
+
+      const Harness: React.FC = () => {
+        useRenderTool(
+          {
+            name: "searchArktype",
+            parameters: schema as unknown as StandardSchemaV1<
+              any,
+              { query: string }
+            >,
+            render: () => <div>arktype render</div>,
+          },
+          [],
+        );
+        return null;
+      };
+
+      render(<Harness />);
+
+      expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(1);
+      const renderer = core.renderToolCalls.find(
+        (item) => item.name === "searchArktype",
+      );
+      expect(renderer).toBeDefined();
+      expect(renderer?.args["~standard"].vendor).toBe("arktype");
+    });
+  });
+
+  describe("Mixed schemas in the same registry", () => {
+    it("registers renderers with Zod, Valibot, and ArkType schemas", () => {
+      const core = createMockCore();
+      mockUseCopilotKit.mockReturnValue({ copilotkit: core });
+
+      const ZodHarness: React.FC = () => {
+        useRenderTool(
+          {
+            name: "zodRenderer",
+            parameters: z.object({ a: z.string() }),
+            render: () => <div>zod</div>,
+          },
+          [],
+        );
+        return null;
+      };
+
+      const ValibotHarness: React.FC = () => {
+        useRenderTool(
+          {
+            name: "valibotRenderer",
+            parameters: v.object({
+              b: v.string(),
+            }) as unknown as StandardSchemaV1<any, { b: string }>,
+            render: () => <div>valibot</div>,
+          },
+          [],
+        );
+        return null;
+      };
+
+      const ArktypeHarness: React.FC = () => {
+        useRenderTool(
+          {
+            name: "arktypeRenderer",
+            parameters: type({
+              c: "string",
+            }) as unknown as StandardSchemaV1<any, { c: string }>,
+            render: () => <div>arktype</div>,
+          },
+          [],
+        );
+        return null;
+      };
+
+      render(
+        <>
+          <ZodHarness />
+          <ValibotHarness />
+          <ArktypeHarness />
+        </>,
+      );
+
+      expect(core.renderToolCalls).toHaveLength(3);
+      const names = core.renderToolCalls.map((r) => r.name);
+      expect(names).toContain("zodRenderer");
+      expect(names).toContain("valibotRenderer");
+      expect(names).toContain("arktypeRenderer");
+    });
+  });
+});
+
+describe("useComponent with Standard Schema", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("registers a component with a Valibot schema", () => {
+    const DemoComponent: React.FC<{ city: string }> = ({ city }) => (
+      <div>{city}</div>
+    );
+
+    const schema = v.object({
+      city: v.string(),
+    });
+
+    const Harness: React.FC = () => {
+      useComponent({
+        name: "weatherCard",
+        parameters: schema as unknown as StandardSchemaV1<
+          any,
+          { city: string }
+        >,
+        render: DemoComponent,
+      });
+      return null;
+    };
+
+    render(<Harness />);
+
+    expect(mockUseFrontendTool).toHaveBeenCalledTimes(1);
+    const [toolConfig] = mockUseFrontendTool.mock.calls[0] as [
+      { name: string; parameters: any },
+    ];
+    expect(toolConfig.name).toBe("weatherCard");
+    expect(toolConfig.parameters["~standard"].vendor).toBe("valibot");
+  });
+
+  it("registers a component with an ArkType schema", () => {
+    const DemoComponent: React.FC<{ city: string }> = ({ city }) => (
+      <div>{city}</div>
+    );
+
+    const schema = type({ city: "string" });
+
+    const Harness: React.FC = () => {
+      useComponent({
+        name: "weatherCardArktype",
+        parameters: schema as unknown as StandardSchemaV1<
+          any,
+          { city: string }
+        >,
+        render: DemoComponent,
+      });
+      return null;
+    };
+
+    render(<Harness />);
+
+    expect(mockUseFrontendTool).toHaveBeenCalledTimes(1);
+    const [toolConfig] = mockUseFrontendTool.mock.calls[0] as [
+      { name: string; parameters: any },
+    ];
+    expect(toolConfig.name).toBe("weatherCardArktype");
+    expect(toolConfig.parameters["~standard"].vendor).toBe("arktype");
+  });
+});

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

@@ -0,0 +1,132 @@
+/**
+ * Integration test for the context timing race condition (CPK-7060).
+ *
+ * When a useFrontendTool handler calls setState(), the corresponding
+ * useAgentContext value is updated asynchronously (React defers useEffect to a
+ * later scheduler task). Without yielding before the follow-up agent run,
+ * runAgent reads stale context from the store.
+ *
+ * CopilotKitCoreReact.waitForPendingFrameworkUpdates() fixes this by awaiting a
+ * zero-delay timeout, which yields to React's scheduler before reading context.
+ *
+ * This test uses real React rendering in jsdom so that actual useState +
+ * useAgentContext + useFrontendTool lifecycle interactions are exercised.
+ */
+import React, { useState } from "react";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
+import { z } from "zod";
+import { useFrontendTool } from "../use-frontend-tool";
+import { useAgentContext } from "../use-agent-context";
+import { CopilotChat } from "../../components/chat/CopilotChat";
+import {
+  type AgentSubscriber,
+  type BaseEvent,
+  type RunAgentParameters,
+} from "@ag-ui/client";
+import type { Context } from "@ag-ui/client";
+import {
+  MockStepwiseAgent,
+  renderWithCopilotKit,
+  runStartedEvent,
+  runFinishedEvent,
+  toolCallChunkEvent,
+  testId,
+} from "../../__tests__/utils/test-helpers";
+
+describe("useAgentContext timing - follow-up run sees updated context", () => {
+  it("follow-up agent run receives context updated by useFrontendTool handler", async () => {
+    /**
+     * Agent subclass that records the context parameter on every runAgent call.
+     * After complete() is called on the subject the Observable completes
+     * immediately for subsequent subscriptions, so the follow-up run resolves
+     * with no new messages — which is fine; we only need to capture context.
+     */
+    class ContextCapturingAgent extends MockStepwiseAgent {
+      public contextPerRun: Context[][] = [];
+
+      async runAgent(
+        parameters?: RunAgentParameters,
+        subscriber?: AgentSubscriber,
+      ) {
+        this.contextPerRun.push(parameters?.context ?? []);
+        return super.runAgent(parameters, subscriber);
+      }
+    }
+
+    const agent = new ContextCapturingAgent();
+
+    /**
+     * Component that wires React state into useAgentContext and exposes a
+     * frontend tool that updates that state.
+     */
+    const TestComponent: React.FC = () => {
+      const [prefs, setPrefs] = useState<{ spicy: boolean }>({ spicy: true });
+
+      useAgentContext({
+        description: "user preferences",
+        value: prefs,
+      });
+
+      useFrontendTool({
+        name: "updatePrefs",
+        parameters: z.object({}),
+        followUp: true,
+        handler: async () => {
+          setPrefs({ spicy: false });
+        },
+      });
+
+      return null;
+    };
+
+    renderWithCopilotKit({
+      agent,
+      children: (
+        <>
+          <TestComponent />
+          <div style={{ height: 400 }}>
+            <CopilotChat welcomeScreen={false} />
+          </div>
+        </>
+      ),
+    });
+
+    // Submit a user message to start the first agent run
+    const input = await screen.findByRole("textbox");
+    fireEvent.change(input, { target: { value: "Update my preferences" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+    // Wait for the first runAgent call to arrive
+    await waitFor(() => {
+      expect(agent.contextPerRun.length).toBeGreaterThanOrEqual(1);
+    });
+
+    // First run: the agent calls the updatePrefs tool
+    const messageId = testId("msg");
+    const toolCallId = testId("tc");
+
+    agent.emit(runStartedEvent());
+    agent.emit(
+      toolCallChunkEvent({
+        toolCallId,
+        toolCallName: "updatePrefs",
+        parentMessageId: messageId,
+        delta: "{}",
+      }),
+    );
+    agent.emit(runFinishedEvent());
+    agent.complete();
+
+    // Wait for the follow-up run to be triggered by processAgentResult
+    await waitFor(() => {
+      expect(agent.contextPerRun.length).toBeGreaterThanOrEqual(2);
+    });
+
+    // The follow-up run should see the context updated by the tool handler
+    // (spicy: false), not the stale value from before the handler ran (spicy: true).
+    const followUpContext = agent.contextPerRun[1];
+    expect(followUpContext).toContainEqual(
+      expect.objectContaining({ value: '{"spicy":false}' }),
+    );
+  });
+});