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

package/src/v2/hooks/__tests__/use-default-render-tool.test.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { useDefaultRenderTool } from "../use-default-render-tool";
+import { useRenderTool } from "../use-render-tool";
+
+vi.mock("../use-render-tool", () => ({
+  useRenderTool: vi.fn(),
+}));
+
+const mockUseRenderTool = useRenderTool as ReturnType<typeof vi.fn>;
+
+describe("useDefaultRenderTool", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("registers a wildcard renderer when called without config", () => {
+    const Harness: React.FC = () => {
+      useDefaultRenderTool();
+      return null;
+    };
+
+    render(<Harness />);
+
+    expect(mockUseRenderTool).toHaveBeenCalledTimes(1);
+    const [config] = mockUseRenderTool.mock.calls[0] as [
+      {
+        name: string;
+        render: (props: {
+          name: string;
+          parameters: unknown;
+          status: string;
+          result: string | undefined;
+        }) => React.ReactElement;
+      },
+    ];
+
+    expect(config.name).toBe("*");
+    expect(typeof config.render).toBe("function");
+  });
+
+  it("forwards custom render function and deps", () => {
+    const customRender = vi.fn(() => <div data-testid="custom">custom</div>);
+    const deps = ["compact"] as const;
+
+    const Harness: React.FC = () => {
+      useDefaultRenderTool(
+        {
+          render: customRender,
+        },
+        deps,
+      );
+      return null;
+    };
+
+    render(<Harness />);
+
+    expect(mockUseRenderTool).toHaveBeenCalledTimes(1);
+    const [config, forwardedDeps] = mockUseRenderTool.mock.calls[0] as [
+      { name: string; render: typeof customRender },
+      ReadonlyArray<unknown>,
+    ];
+
+    expect(config.name).toBe("*");
+    expect(config.render).toBe(customRender);
+    expect(forwardedDeps).toBe(deps);
+  });
+
+  it("default renderer shows status and expands to show parameters/result", () => {
+    const Harness: React.FC = () => {
+      useDefaultRenderTool();
+      return null;
+    };
+
+    render(<Harness />);
+
+    const [config] = mockUseRenderTool.mock.calls[0] as [
+      {
+        render: (props: {
+          name: string;
+          parameters: unknown;
+          status: string;
+          result: string | undefined;
+        }) => React.ReactElement;
+      },
+    ];
+
+    const DefaultRenderer = config.render as React.ComponentType<{
+      name: string;
+      parameters: unknown;
+      status: string;
+      result: string | undefined;
+    }>;
+
+    render(
+      <DefaultRenderer
+        name="searchDocs"
+        parameters={{ query: "copilot" }}
+        status="executing"
+        result={undefined}
+      />,
+    );
+
+    expect(screen.getByText("searchDocs")).toBeDefined();
+    expect(screen.getByText("Running")).toBeDefined();
+
+    fireEvent.click(screen.getByText("searchDocs"));
+    expect(screen.getByText("Arguments")).toBeDefined();
+    expect(screen.getByText(/copilot/)).toBeDefined();
+  });
+
+  it("default renderer shows done status and result payload", () => {
+    const Harness: React.FC = () => {
+      useDefaultRenderTool();
+      return null;
+    };
+
+    render(<Harness />);
+
+    const [config] = mockUseRenderTool.mock.calls[0] as [
+      {
+        render: (props: {
+          name: string;
+          parameters: unknown;
+          status: string;
+          result: string | undefined;
+        }) => React.ReactElement;
+      },
+    ];
+
+    const DefaultRenderer = config.render as React.ComponentType<{
+      name: string;
+      parameters: unknown;
+      status: string;
+      result: string | undefined;
+    }>;
+
+    render(
+      <DefaultRenderer
+        name="searchDocs"
+        parameters={{ query: "copilot" }}
+        status="complete"
+        result="done"
+      />,
+    );
+
+    expect(screen.getByText("Done")).toBeDefined();
+    fireEvent.click(screen.getByText("searchDocs"));
+    expect(screen.getByText("Result")).toBeDefined();
+    expect(screen.getByText("done")).toBeDefined();
+  });
+});

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

@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from "react";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
+import { z } from "zod";
+import { useFrontendTool } from "../use-frontend-tool";
+import { useCopilotKit } from "../../providers/CopilotKitProvider";
+import { ReactFrontendTool } from "../../types";
+import { CopilotKitCoreReact } from "../../lib/react-core";
+import { renderWithCopilotKit } from "../../__tests__/utils/test-helpers";
+
+/**
+ * Component that captures the copilotkit core ref for test assertions.
+ */
+const CoreCapture: React.FC<{
+  onCore: (core: CopilotKitCoreReact) => void;
+}> = ({ onCore }) => {
+  const { copilotkit } = useCopilotKit();
+  useEffect(() => {
+    onCore(copilotkit);
+  }, [copilotkit, onCore]);
+  return null;
+};
+
+describe("useFrontendTool available flag", () => {
+  it("registers tool with available: false on the core", async () => {
+    let coreRef: CopilotKitCoreReact | null = null;
+
+    const ToolComponent: React.FC = () => {
+      const tool: ReactFrontendTool<{ msg: string }> = {
+        name: "disabledTool",
+        description: "A disabled tool",
+        available: false,
+        parameters: z.object({ msg: z.string() }),
+        handler: async () => ({ result: "ok" }),
+      };
+      useFrontendTool(tool);
+      return null;
+    };
+
+    const ui = renderWithCopilotKit({
+      children: (
+        <>
+          <ToolComponent />
+          <CoreCapture
+            onCore={(c) => {
+              coreRef = c;
+            }}
+          />
+        </>
+      ),
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find((t) => t.name === "disabledTool");
+      expect(tool).toBeDefined();
+      expect(tool!.available).toBe(false);
+    });
+
+    ui.unmount();
+  });
+
+  it("registers tool with available: true on the core", async () => {
+    let coreRef: CopilotKitCoreReact | null = null;
+
+    const ToolComponent: React.FC = () => {
+      const tool: ReactFrontendTool<{ msg: string }> = {
+        name: "enabledTool",
+        description: "An enabled tool",
+        available: true,
+        parameters: z.object({ msg: z.string() }),
+        handler: async () => ({ result: "ok" }),
+      };
+      useFrontendTool(tool);
+      return null;
+    };
+
+    const ui = renderWithCopilotKit({
+      children: (
+        <>
+          <ToolComponent />
+          <CoreCapture
+            onCore={(c) => {
+              coreRef = c;
+            }}
+          />
+        </>
+      ),
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find((t) => t.name === "enabledTool");
+      expect(tool).toBeDefined();
+      expect(tool!.available).toBe(true);
+    });
+
+    ui.unmount();
+  });
+
+  it("re-registers tool when available toggles between true and false", async () => {
+    let coreRef: CopilotKitCoreReact | null = null;
+
+    const ToolWithToggle: React.FC = () => {
+      const [isEnabled, setIsEnabled] = useState(true);
+
+      const tool: ReactFrontendTool<{ data: string }> = {
+        name: "toggleTool",
+        description: "A toggleable tool",
+        available: isEnabled,
+        parameters: z.object({ data: z.string() }),
+        handler: async () => ({ ok: true }),
+      };
+      useFrontendTool(tool, [isEnabled]);
+
+      return (
+        <button
+          data-testid="toggle-btn"
+          onClick={() => setIsEnabled((prev) => !prev)}
+        >
+          {isEnabled ? "Disable" : "Enable"}
+        </button>
+      );
+    };
+
+    const ui = renderWithCopilotKit({
+      children: (
+        <>
+          <ToolWithToggle />
+          <CoreCapture
+            onCore={(c) => {
+              coreRef = c;
+            }}
+          />
+        </>
+      ),
+    });
+
+    // Tool should be registered as enabled initially
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find((t) => t.name === "toggleTool");
+      expect(tool).toBeDefined();
+      expect(tool!.available).toBe(true);
+    });
+
+    // Toggle to disabled
+    fireEvent.click(screen.getByTestId("toggle-btn"));
+
+    // Tool should be re-registered as disabled
+    await waitFor(() => {
+      const tool = coreRef!.tools.find((t) => t.name === "toggleTool");
+      expect(tool).toBeDefined();
+      expect(tool!.available).toBe(false);
+    });
+
+    // Toggle back to enabled
+    fireEvent.click(screen.getByTestId("toggle-btn"));
+
+    await waitFor(() => {
+      const tool = coreRef!.tools.find((t) => t.name === "toggleTool");
+      expect(tool).toBeDefined();
+      expect(tool!.available).toBe(true);
+    });
+
+    ui.unmount();
+  });
+});