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

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

@@ -0,0 +1,148 @@
+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 {
+  public lastRunInput?: RunAgentInput;
+
+  run(input: RunAgentInput): Observable<BaseEvent> {
+    this.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-component.test.tsx

@@ -0,0 +1,123 @@
+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, and deps", () => {
+    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",
+        },
+        deps,
+      );
+      return null;
+    };
+
+    render(<Harness />);
+
+    expect(mockUseFrontendTool).toHaveBeenCalledTimes(1);
+    const [toolConfig, forwardedDeps] = mockUseFrontendTool.mock.calls[0] as [
+      {
+        description: string;
+        parameters: typeof weatherSchema;
+        agentId?: string;
+      },
+      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(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");
+  });
+});