@copilotkit/react-core 1.57.3 → 1.57.4

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

@@ -1,159 +0,0 @@
-import React from "react";
-import { screen, fireEvent, waitFor } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
-import { type BaseEvent, type RunAgentInput } from "@ag-ui/client";
-import { Observable } from "rxjs";
-import {
-  MockStepwiseAgent,
-  renderWithCopilotKit,
-  runStartedEvent,
-  runFinishedEvent,
-  textChunkEvent,
-  testId,
-} from "../../__tests__/utils/test-helpers";
-import { useAgent } from "../use-agent";
-import { useCopilotKit } from "../../providers/CopilotKitProvider";
-import { CopilotChat } from "../../components/chat/CopilotChat";
-
-/**
- * Mock agent that captures RunAgentInput to verify state is passed correctly
- */
-class StateCapturingMockAgent extends MockStepwiseAgent {
-  // Shared via a container so the clone and original both see the same value
-  private _capture: { lastRunInput?: RunAgentInput } = {};
-
-  get lastRunInput(): RunAgentInput | undefined {
-    return this._capture.lastRunInput;
-  }
-
-  clone(): this {
-    const cloned = super.clone();
-    (cloned as unknown as StateCapturingMockAgent)._capture = this._capture;
-    return cloned;
-  }
-
-  run(input: RunAgentInput): Observable<BaseEvent> {
-    this._capture.lastRunInput = input;
-    return super.run(input);
-  }
-}
-
-describe("useAgent e2e", () => {
-  describe("setState passes state to agent run", () => {
-    it("agent receives state set via setState when runAgent is called", async () => {
-      const agent = new StateCapturingMockAgent();
-
-      /**
-       * Test component that:
-       * 1. Gets agent via useAgent()
-       * 2. Gets copilotkit via useCopilotKit()
-       * 3. Sets state on agent and calls runAgent
-       */
-      function StateTestComponent() {
-        const { agent: hookAgent } = useAgent();
-        const { copilotkit } = useCopilotKit();
-
-        const handleSetStateAndRun = async () => {
-          hookAgent.setState({ testKey: "testValue", counter: 42 });
-          await copilotkit.runAgent({ agent: hookAgent });
-        };
-
-        return (
-          <button data-testid="trigger-btn" onClick={handleSetStateAndRun}>
-            Set State and Run
-          </button>
-        );
-      }
-
-      renderWithCopilotKit({
-        agent,
-        children: <StateTestComponent />,
-      });
-
-      // Click the button to set state and trigger runAgent
-      const triggerBtn = await screen.findByTestId("trigger-btn");
-      fireEvent.click(triggerBtn);
-
-      // Wait for the agent's run method to be called
-      await waitFor(() => {
-        expect(agent.lastRunInput).toBeDefined();
-      });
-
-      // Complete the agent run
-      agent.emit(runStartedEvent());
-      agent.emit(runFinishedEvent());
-      agent.complete();
-
-      // Verify the state was passed to the agent
-      expect(agent.lastRunInput?.state).toEqual({
-        testKey: "testValue",
-        counter: 42,
-      });
-    });
-  });
-
-  describe("addMessage + runAgent displays in CopilotChat", () => {
-    it("messages added via useAgent show up in CopilotChat", async () => {
-      const agent = new MockStepwiseAgent();
-
-      /**
-       * Test component that:
-       * 1. Gets agent via useAgent()
-       * 2. Gets copilotkit via useCopilotKit()
-       * 3. Adds a user message and calls runAgent
-       */
-      function MessageTestComponent() {
-        const { agent: hookAgent } = useAgent();
-        const { copilotkit } = useCopilotKit();
-
-        const handleAddMessageAndRun = async () => {
-          hookAgent.addMessage({
-            id: testId("user-msg"),
-            role: "user",
-            content: "Hello from useAgent!",
-          });
-          await copilotkit.runAgent({ agent: hookAgent });
-        };
-
-        return (
-          <div>
-            <button data-testid="send-btn" onClick={handleAddMessageAndRun}>
-              Send Message
-            </button>
-            <div style={{ height: 400 }}>
-              <CopilotChat />
-            </div>
-          </div>
-        );
-      }
-
-      renderWithCopilotKit({
-        agent,
-        children: <MessageTestComponent />,
-      });
-
-      // Click the button to add message and trigger runAgent
-      const sendBtn = await screen.findByTestId("send-btn");
-      fireEvent.click(sendBtn);
-
-      // User message should appear in the chat
-      await waitFor(() => {
-        expect(screen.getByText("Hello from useAgent!")).toBeDefined();
-      });
-
-      // Simulate agent response
-      const responseId = testId("assistant-msg");
-      agent.emit(runStartedEvent());
-      agent.emit(textChunkEvent(responseId, "Hello! I received your message."));
-      agent.emit(runFinishedEvent());
-      agent.complete();
-
-      // Assistant response should appear in the chat
-      await waitFor(() => {
-        expect(
-          screen.getByText("Hello! I received your message."),
-        ).toBeDefined();
-      });
-    });
-  });
-});

package/src/v2/hooks/__tests__/use-attachments.test.tsx

@@ -1,169 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import { renderHook, act } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { useAttachments } from "../use-attachments";
-
-describe("useAttachments", () => {
-  // -----------------------------------------------------------------------
-  // Referential stability — callbacks must not change between renders
-  // -----------------------------------------------------------------------
-
-  describe("referential stability", () => {
-    it("all callbacks are stable across re-renders with same config", () => {
-      const config = { enabled: true, accept: "image/*" };
-      const { result, rerender } = renderHook(() => useAttachments({ config }));
-
-      const first = result.current;
-      rerender();
-      const second = result.current;
-
-      expect(second.processFiles).toBe(first.processFiles);
-      expect(second.handleFileUpload).toBe(first.handleFileUpload);
-      expect(second.handleDragOver).toBe(first.handleDragOver);
-      expect(second.handleDragLeave).toBe(first.handleDragLeave);
-      expect(second.handleDrop).toBe(first.handleDrop);
-      expect(second.removeAttachment).toBe(first.removeAttachment);
-      expect(second.consumeAttachments).toBe(first.consumeAttachments);
-    });
-
-    it("callbacks remain stable when config object reference changes", () => {
-      let config = { enabled: true, accept: "image/*" };
-      const { result, rerender } = renderHook(() => useAttachments({ config }));
-
-      const first = result.current;
-
-      // Create a new config with same values — different reference
-      config = { enabled: true, accept: "image/*" };
-      rerender();
-      const second = result.current;
-
-      expect(second.processFiles).toBe(first.processFiles);
-      expect(second.handleFileUpload).toBe(first.handleFileUpload);
-      expect(second.handleDragOver).toBe(first.handleDragOver);
-      expect(second.handleDragLeave).toBe(first.handleDragLeave);
-      expect(second.handleDrop).toBe(first.handleDrop);
-      expect(second.removeAttachment).toBe(first.removeAttachment);
-      expect(second.consumeAttachments).toBe(first.consumeAttachments);
-    });
-
-    it("refs are stable across re-renders", () => {
-      const { result, rerender } = renderHook(() =>
-        useAttachments({ config: undefined }),
-      );
-
-      const first = result.current;
-      rerender();
-      const second = result.current;
-
-      expect(second.fileInputRef).toBe(first.fileInputRef);
-      expect(second.containerRef).toBe(first.containerRef);
-    });
-  });
-
-  // -----------------------------------------------------------------------
-  // Re-render counting — hook should not cause unnecessary renders
-  // -----------------------------------------------------------------------
-
-  describe("re-render counting", () => {
-    it("does not re-render when consumeAttachments is called on empty queue", () => {
-      let renderCount = 0;
-
-      const { result } = renderHook(() => {
-        renderCount++;
-        return useAttachments({ config: undefined });
-      });
-
-      const initialRenderCount = renderCount;
-
-      act(() => {
-        result.current.consumeAttachments();
-      });
-
-      // consumeAttachments on empty queue should not trigger a state update
-      expect(renderCount).toBe(initialRenderCount);
-    });
-
-    it("does not re-render on repeated consumeAttachments with empty queue", () => {
-      let renderCount = 0;
-
-      const { result } = renderHook(() => {
-        renderCount++;
-        return useAttachments({ config: undefined });
-      });
-
-      const initialRenderCount = renderCount;
-
-      act(() => {
-        result.current.consumeAttachments();
-        result.current.consumeAttachments();
-        result.current.consumeAttachments();
-      });
-
-      expect(renderCount).toBe(initialRenderCount);
-    });
-  });
-
-  // -----------------------------------------------------------------------
-  // State defaults
-  // -----------------------------------------------------------------------
-
-  describe("initial state", () => {
-    it("returns empty attachments and disabled by default", () => {
-      const { result } = renderHook(() =>
-        useAttachments({ config: undefined }),
-      );
-
-      expect(result.current.attachments).toEqual([]);
-      expect(result.current.enabled).toBe(false);
-      expect(result.current.dragOver).toBe(false);
-    });
-
-    it("returns enabled when config.enabled is true", () => {
-      const { result } = renderHook(() =>
-        useAttachments({ config: { enabled: true } }),
-      );
-
-      expect(result.current.enabled).toBe(true);
-    });
-  });
-
-  // -----------------------------------------------------------------------
-  // consumeAttachments behavior
-  // -----------------------------------------------------------------------
-
-  describe("consumeAttachments", () => {
-    it("returns empty array when no attachments", () => {
-      const { result } = renderHook(() =>
-        useAttachments({ config: undefined }),
-      );
-
-      let consumed: any[];
-      act(() => {
-        consumed = result.current.consumeAttachments();
-      });
-
-      expect(consumed!).toEqual([]);
-    });
-  });
-
-  // -----------------------------------------------------------------------
-  // removeAttachment
-  // -----------------------------------------------------------------------
-
-  describe("removeAttachment", () => {
-    it("is a no-op when id does not exist", () => {
-      const { result } = renderHook(() =>
-        useAttachments({ config: undefined }),
-      );
-
-      const before = result.current.attachments;
-
-      act(() => {
-        result.current.removeAttachment("nonexistent");
-      });
-
-      // Should still be empty, no crash
-      expect(result.current.attachments).toEqual([]);
-    });
-  });
-});

package/src/v2/hooks/__tests__/use-capabilities.test.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import { renderHook } from "@testing-library/react";
-import { describe, it, expect, beforeEach, vi } from "vitest";
-import type { AgentCapabilities } from "@ag-ui/core";
-import { useCapabilities } from "../use-capabilities";
-import { useAgent } from "../use-agent";
-
-vi.mock("../use-agent", () => ({
-  useAgent: vi.fn(),
-}));
-
-const mockUseAgent = useAgent as ReturnType<typeof vi.fn>;
-
-describe("useCapabilities", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("returns capabilities when agent exposes them", () => {
-    const caps: AgentCapabilities = {
-      tools: { supported: true, clientProvided: true },
-    };
-
-    mockUseAgent.mockReturnValue({
-      agent: { capabilities: caps },
-    });
-
-    const { result } = renderHook(() => useCapabilities("my-agent"));
-
-    expect(result.current).toEqual(caps);
-    expect(mockUseAgent).toHaveBeenCalledWith({ agentId: "my-agent" });
-  });
-
-  it("returns undefined when agent has no capabilities property", () => {
-    mockUseAgent.mockReturnValue({
-      agent: { description: "basic agent" },
-    });
-
-    const { result } = renderHook(() => useCapabilities("basic"));
-
-    expect(result.current).toBeUndefined();
-  });
-
-  it("returns undefined when agent is undefined (not connected yet)", () => {
-    mockUseAgent.mockReturnValue({ agent: undefined });
-
-    const { result } = renderHook(() => useCapabilities());
-
-    expect(result.current).toBeUndefined();
-  });
-
-  it("returns undefined when capabilities property is explicitly undefined", () => {
-    mockUseAgent.mockReturnValue({
-      agent: { capabilities: undefined },
-    });
-
-    const { result } = renderHook(() => useCapabilities());
-
-    expect(result.current).toBeUndefined();
-  });
-
-  it("uses default agent when no agentId is provided", () => {
-    const caps: AgentCapabilities = {
-      transport: { streaming: true },
-    };
-
-    mockUseAgent.mockReturnValue({
-      agent: { capabilities: caps },
-    });
-
-    const { result } = renderHook(() => useCapabilities());
-
-    expect(result.current).toEqual(caps);
-    expect(mockUseAgent).toHaveBeenCalledWith({ agentId: undefined });
-  });
-});

package/src/v2/hooks/__tests__/use-component.test.tsx

@@ -1,126 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import { describe, it, expect, beforeEach, vi } from "vitest";
-import { z } from "zod";
-import { useComponent } from "../use-component";
-import { useFrontendTool } from "../use-frontend-tool";
-
-vi.mock("../use-frontend-tool", () => ({
-  useFrontendTool: vi.fn(),
-}));
-
-const mockUseFrontendTool = useFrontendTool as ReturnType<typeof vi.fn>;
-
-describe("useComponent", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("registers a component tool with generated default description", () => {
-    const DemoComponent: React.FC<{ city: string }> = ({ city }) => (
-      <div>{city}</div>
-    );
-
-    const Harness: React.FC = () => {
-      useComponent({
-        name: "showWeatherCard",
-        render: DemoComponent,
-      });
-      return null;
-    };
-
-    render(<Harness />);
-
-    expect(mockUseFrontendTool).toHaveBeenCalledTimes(1);
-    const [toolConfig] = mockUseFrontendTool.mock.calls[0] as [
-      {
-        name: string;
-        description: string;
-      },
-    ];
-
-    expect(toolConfig.name).toBe("showWeatherCard");
-    expect(toolConfig.description).toContain(
-      'Use this tool to display the "showWeatherCard" component in the chat.',
-    );
-  });
-
-  it("appends custom description and forwards parameters, agentId, deps, and followUp", () => {
-    const weatherSchema = z.object({
-      city: z.string(),
-      unit: z.enum(["c", "f"]),
-    });
-
-    const DemoComponent: React.FC<z.infer<typeof weatherSchema>> = ({
-      city,
-    }) => <div>{city}</div>;
-
-    const deps = ["v1"] as const;
-
-    const Harness: React.FC = () => {
-      useComponent(
-        {
-          name: "showWeatherCard",
-          description: "Render a weather card for the selected city.",
-          parameters: weatherSchema,
-          render: DemoComponent,
-          agentId: "weather-agent",
-          followUp: false,
-        },
-        deps,
-      );
-      return null;
-    };
-
-    render(<Harness />);
-
-    expect(mockUseFrontendTool).toHaveBeenCalledTimes(1);
-    const [toolConfig, forwardedDeps] = mockUseFrontendTool.mock.calls[0] as [
-      {
-        description: string;
-        parameters: typeof weatherSchema;
-        agentId?: string;
-        followUp?: boolean;
-      },
-      ReadonlyArray<unknown>,
-    ];
-
-    expect(toolConfig.description).toContain(
-      'Use this tool to display the "showWeatherCard" component in the chat.',
-    );
-    expect(toolConfig.description).toContain(
-      "Render a weather card for the selected city.",
-    );
-    expect(toolConfig.parameters).toBe(weatherSchema);
-    expect(toolConfig.agentId).toBe("weather-agent");
-    expect(toolConfig.followUp).toBe(false);
-    expect(forwardedDeps).toBe(deps);
-  });
-
-  it("creates a render function that passes args into the component", () => {
-    const DemoComponent: React.FC<{ city: string }> = ({ city }) => (
-      <div data-testid="city">{city}</div>
-    );
-
-    const Harness: React.FC = () => {
-      useComponent({
-        name: "showWeatherCard",
-        render: DemoComponent,
-      });
-      return null;
-    };
-
-    render(<Harness />);
-
-    const [toolConfig] = mockUseFrontendTool.mock.calls[0] as [
-      {
-        render: (props: { args: { city: string } }) => React.ReactElement;
-      },
-    ];
-
-    const { getByTestId } = render(
-      toolConfig.render({ args: { city: "Paris" } }),
-    );
-    expect(getByTestId("city").textContent).toBe("Paris");
-  });
-});