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

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

@@ -0,0 +1,397 @@
+import React from "react";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useInterrupt } from "../use-interrupt";
+import { useCopilotKit } from "../../providers/CopilotKitProvider";
+import { useAgent } from "../use-agent";
+
+vi.mock("../../providers/CopilotKitProvider", () => ({
+  useCopilotKit: vi.fn(),
+}));
+
+vi.mock("../use-agent", () => ({
+  useAgent: vi.fn(),
+}));
+
+const mockUseCopilotKit = useCopilotKit as ReturnType<typeof vi.fn>;
+const mockUseAgent = useAgent as ReturnType<typeof vi.fn>;
+
+type SubscriptionHandlers = {
+  onCustomEvent?: (payload: {
+    event: { name: string; value: unknown };
+  }) => void;
+  onRunStartedEvent?: () => void;
+  onRunFinalized?: () => void;
+  onRunFailed?: () => void;
+};
+
+describe("useInterrupt", () => {
+  let runAgentMock: ReturnType<typeof vi.fn>;
+  let setInterruptElementMock: ReturnType<typeof vi.fn>;
+  let unsubscribeMock: ReturnType<typeof vi.fn>;
+  let subscribeMock: ReturnType<typeof vi.fn>;
+  let handlers: SubscriptionHandlers;
+  let mockAgent: Record<string, unknown>;
+
+  beforeEach(() => {
+    runAgentMock = vi.fn();
+    setInterruptElementMock = vi.fn();
+    unsubscribeMock = vi.fn();
+
+    handlers = {};
+    subscribeMock = vi.fn((nextHandlers: SubscriptionHandlers) => {
+      handlers = nextHandlers;
+      return { unsubscribe: unsubscribeMock };
+    });
+
+    mockAgent = {
+      subscribe: subscribeMock,
+      id: "test-agent",
+    };
+
+    mockUseCopilotKit.mockReturnValue({
+      copilotkit: {
+        runAgent: runAgentMock,
+        setInterruptElement: setInterruptElementMock,
+      },
+    });
+
+    mockUseAgent.mockReturnValue({ agent: mockAgent });
+  });
+
+  function Harness({
+    enabled,
+    handler,
+    renderInChat,
+    renderSpy,
+  }: {
+    enabled?: (event: { name: string; value: unknown }) => boolean;
+    handler?: (props: {
+      event: { name: string; value: unknown };
+      resolve: (response: unknown) => void;
+    }) => unknown;
+    renderInChat?: boolean;
+    renderSpy?: ReturnType<typeof vi.fn>;
+  }) {
+    const renderInterrupt = ({
+      event,
+      result,
+      resolve,
+    }: {
+      event: { name: string; value: unknown };
+      result: unknown;
+      resolve: (response: unknown) => void;
+    }) => {
+      renderSpy?.({ event, result, resolve });
+      return (
+        <button
+          data-testid="interrupt"
+          onClick={() => resolve({ approved: true, value: event.value })}
+        >
+          {String(result ?? "no-result")}:{String(event.value)}
+        </button>
+      );
+    };
+
+    if (renderInChat === false) {
+      return (
+        <ManualHarness
+          enabled={enabled}
+          handler={handler}
+          render={renderInterrupt}
+        />
+      );
+    }
+
+    return (
+      <ChatHarness
+        enabled={enabled}
+        handler={handler}
+        render={renderInterrupt}
+      />
+    );
+  }
+
+  function ManualHarness({
+    enabled,
+    handler,
+    render,
+  }: {
+    enabled?: (event: { name: string; value: unknown }) => boolean;
+    handler?: (props: {
+      event: { name: string; value: unknown };
+      resolve: (response: unknown) => void;
+    }) => unknown;
+    render: (props: {
+      event: { name: string; value: unknown };
+      result: unknown;
+      resolve: (response: unknown) => void;
+    }) => React.ReactElement;
+  }) {
+    const element = useInterrupt({
+      enabled,
+      handler,
+      renderInChat: false,
+      render,
+    });
+
+    return <div data-testid="manual-container">{element}</div>;
+  }
+
+  function ChatHarness({
+    enabled,
+    handler,
+    render,
+  }: {
+    enabled?: (event: { name: string; value: unknown }) => boolean;
+    handler?: (props: {
+      event: { name: string; value: unknown };
+      resolve: (response: unknown) => void;
+    }) => unknown;
+    render: (props: {
+      event: { name: string; value: unknown };
+      result: unknown;
+      resolve: (response: unknown) => void;
+    }) => React.ReactElement;
+  }) {
+    useInterrupt({
+      enabled,
+      handler,
+      render,
+    });
+
+    return <div data-testid="manual-container" />;
+  }
+
+  function emitInterrupt(value: unknown) {
+    act(() => {
+      handlers.onCustomEvent?.({
+        event: { name: "on_interrupt", value },
+      });
+      handlers.onRunFinalized?.();
+    });
+  }
+
+  it("subscribes on mount and unsubscribes on unmount", () => {
+    const { unmount } = render(<Harness renderInChat={false} />);
+
+    expect(subscribeMock).toHaveBeenCalledTimes(1);
+    expect(handlers.onCustomEvent).toBeTypeOf("function");
+    expect(handlers.onRunStartedEvent).toBeTypeOf("function");
+    expect(handlers.onRunFinalized).toBeTypeOf("function");
+    expect(handlers.onRunFailed).toBeTypeOf("function");
+
+    unmount();
+    expect(unsubscribeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("ignores non-interrupt custom events", () => {
+    render(<Harness renderInChat={false} />);
+
+    act(() => {
+      handlers.onCustomEvent?.({
+        event: { name: "not_interrupt", value: "x" },
+      });
+      handlers.onRunFinalized?.();
+    });
+
+    expect(screen.queryByTestId("interrupt")).toBeNull();
+  });
+
+  it("renders interrupt only after run finalized", () => {
+    render(<Harness renderInChat={false} />);
+
+    act(() => {
+      handlers.onCustomEvent?.({
+        event: { name: "on_interrupt", value: "pending" },
+      });
+    });
+    expect(screen.queryByTestId("interrupt")).toBeNull();
+
+    act(() => {
+      handlers.onRunFinalized?.();
+    });
+    expect(screen.getByTestId("interrupt").textContent).toContain("pending");
+  });
+
+  it("clears pending interrupt on run start", () => {
+    render(<Harness renderInChat={false} />);
+
+    emitInterrupt("first");
+    expect(screen.getByTestId("interrupt").textContent).toContain("first");
+
+    act(() => {
+      handlers.onRunStartedEvent?.();
+    });
+
+    expect(screen.queryByTestId("interrupt")).toBeNull();
+  });
+
+  it("resolve clears UI and resumes agent with response payload", () => {
+    render(<Harness renderInChat={false} />);
+
+    emitInterrupt("approve-me");
+    act(() => {
+      screen.getByTestId("interrupt").click();
+    });
+
+    expect(screen.queryByTestId("interrupt")).toBeNull();
+    expect(runAgentMock).toHaveBeenCalledTimes(1);
+    expect(runAgentMock).toHaveBeenCalledWith({
+      agent: mockAgent,
+      forwardedProps: {
+        command: {
+          resume: { approved: true, value: "approve-me" },
+          interruptEvent: "approve-me",
+        },
+      },
+    });
+  });
+
+  it("does not render and does not run handler when enabled returns false", () => {
+    const handler = vi.fn(() => "should-not-run");
+    render(
+      <Harness renderInChat={false} enabled={() => false} handler={handler} />,
+    );
+
+    emitInterrupt("blocked");
+
+    expect(screen.queryByTestId("interrupt")).toBeNull();
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("renders with null result when no handler is provided", () => {
+    render(<Harness renderInChat={false} />);
+
+    emitInterrupt("no-handler");
+
+    expect(screen.getByTestId("interrupt").textContent).toContain(
+      "no-result:no-handler",
+    );
+  });
+
+  it("uses sync handler result in render", () => {
+    render(
+      <Harness
+        renderInChat={false}
+        handler={({ event }) => `handled:${String(event.value)}`}
+      />,
+    );
+
+    emitInterrupt("sync");
+
+    expect(screen.getByTestId("interrupt").textContent).toContain(
+      "handled:sync",
+    );
+  });
+
+  it("uses async handler resolved value in render", async () => {
+    render(
+      <Harness
+        renderInChat={false}
+        handler={({ event }) => Promise.resolve(`async:${String(event.value)}`)}
+      />,
+    );
+
+    emitInterrupt("value");
+
+    await waitFor(() => {
+      expect(screen.getByTestId("interrupt").textContent).toContain(
+        "async:value",
+      );
+    });
+  });
+
+  it("falls back to null result when async handler rejects", async () => {
+    render(
+      <Harness
+        renderInChat={false}
+        handler={() => Promise.reject(new Error("boom"))}
+      />,
+    );
+
+    emitInterrupt("reject");
+
+    await waitFor(() => {
+      expect(screen.getByTestId("interrupt").textContent).toContain(
+        "no-result:reject",
+      );
+    });
+  });
+
+  it("accepts thenable handler results (non-native Promise)", async () => {
+    const thenable = {
+      then: (resolve: (value: string) => void) => {
+        resolve("thenable-ok");
+        return { catch: () => undefined };
+      },
+    };
+
+    render(<Harness renderInChat={false} handler={() => thenable} />);
+
+    emitInterrupt("thenable");
+
+    await waitFor(() => {
+      expect(screen.getByTestId("interrupt").textContent).toContain(
+        "thenable-ok:thenable",
+      );
+    });
+  });
+
+  it("publishes interrupt element to chat by default and clears on unmount", async () => {
+    const renderSpy = vi.fn();
+    const { unmount } = render(<Harness renderSpy={renderSpy} />);
+
+    emitInterrupt("chat");
+
+    await waitFor(() => {
+      expect(renderSpy).toHaveBeenCalled();
+      expect(setInterruptElementMock).toHaveBeenCalled();
+    });
+
+    const latestCallArg = setInterruptElementMock.mock.calls.at(-1)?.[0];
+    expect(React.isValidElement(latestCallArg)).toBe(true);
+
+    unmount();
+    expect(setInterruptElementMock.mock.calls.at(-1)?.[0]).toBeNull();
+  });
+
+  it("does not publish to chat and returns manual element when renderInChat is false", () => {
+    render(<Harness renderInChat={false} />);
+
+    emitInterrupt("manual");
+
+    expect(screen.getByTestId("interrupt").textContent).toContain("manual");
+    expect(setInterruptElementMock).not.toHaveBeenCalled();
+  });
+
+  it("discards local interrupt when run fails before finalize", () => {
+    render(<Harness renderInChat={false} />);
+
+    act(() => {
+      handlers.onCustomEvent?.({
+        event: { name: "on_interrupt", value: "lost" },
+      });
+      handlers.onRunFailed?.();
+      handlers.onRunFinalized?.();
+    });
+
+    expect(screen.queryByTestId("interrupt")).toBeNull();
+  });
+
+  it("keeps the latest interrupt when multiple interrupts arrive within one run", () => {
+    render(<Harness renderInChat={false} />);
+
+    act(() => {
+      handlers.onCustomEvent?.({
+        event: { name: "on_interrupt", value: "first" },
+      });
+      handlers.onCustomEvent?.({
+        event: { name: "on_interrupt", value: "second" },
+      });
+      handlers.onRunFinalized?.();
+    });
+
+    expect(screen.getByTestId("interrupt").textContent).toContain("second");
+  });
+});

package/src/v2/hooks/__tests__/use-katex-styles.test.tsx

@@ -0,0 +1,56 @@
+import { renderHook } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// Mock the katex CSS import globally
+vi.mock("katex/dist/katex.min.css", () => ({}));
+
+describe("useKatexStyles", () => {
+  beforeEach(() => {
+    // Reset module state (the singleton `injected` flag) between tests
+    vi.resetModules();
+  });
+
+  async function loadHook() {
+    const mod = await import("../useKatexStyles");
+    return mod.useKatexStyles;
+  }
+
+  it("renders without error (dynamic import succeeds)", async () => {
+    const useKatexStyles = await loadHook();
+
+    expect(() => {
+      renderHook(() => useKatexStyles());
+    }).not.toThrow();
+  });
+
+  it("does not throw when katex CSS import fails", async () => {
+    vi.doMock("katex/dist/katex.min.css", () => {
+      throw new Error("CSS not found");
+    });
+
+    const useKatexStyles = await loadHook();
+
+    expect(() => {
+      renderHook(() => useKatexStyles());
+    }).not.toThrow();
+  });
+
+  it("does not use a static katex CSS import in the component", async () => {
+    // Regression guard: ensure the static import doesn't creep back.
+    // Read the component source and verify no static katex CSS import.
+    const fs = await import("fs");
+    const path = await import("path");
+    const componentPath = path.resolve(
+      __dirname,
+      "../../components/chat/CopilotChatAssistantMessage.tsx",
+    );
+    const source = fs.readFileSync(componentPath, "utf-8");
+
+    // Should NOT have a static import of katex CSS
+    expect(source).not.toMatch(
+      /^import\s+['"]katex\/dist\/katex\.min\.css['"]/m,
+    );
+    // Should use the hook instead
+    expect(source).toMatch(/useKatexStyles/);
+  });
+});

package/src/v2/hooks/__tests__/use-keyboard-height.test.tsx

@@ -0,0 +1,192 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { useKeyboardHeight } from "../use-keyboard-height";
+
+describe("useKeyboardHeight", () => {
+  let visualViewportListeners: Map<string, ((event: Event) => void)[]>;
+  let mockVisualViewport: {
+    height: number;
+    addEventListener: ReturnType<typeof vi.fn>;
+    removeEventListener: ReturnType<typeof vi.fn>;
+  } | null;
+  let originalVisualViewport: VisualViewport | null;
+  let originalInnerHeight: number;
+
+  beforeEach(() => {
+    visualViewportListeners = new Map();
+    originalVisualViewport = window.visualViewport;
+    originalInnerHeight = window.innerHeight;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    // Reset visualViewport
+    Object.defineProperty(window, "visualViewport", {
+      value: originalVisualViewport,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      value: originalInnerHeight,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  describe("Visual Viewport API unavailable", () => {
+    it("returns default state when Visual Viewport API unavailable", () => {
+      // Mock window without visualViewport
+      Object.defineProperty(window, "visualViewport", {
+        value: null,
+        writable: true,
+        configurable: true,
+      });
+
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      expect(result.current.isKeyboardOpen).toBe(false);
+      expect(result.current.keyboardHeight).toBe(0);
+    });
+  });
+
+  describe("Keyboard detection", () => {
+    beforeEach(() => {
+      mockVisualViewport = {
+        height: 800,
+        addEventListener: vi.fn(
+          (type: string, listener: (event: Event) => void) => {
+            const listeners = visualViewportListeners.get(type) || [];
+            listeners.push(listener);
+            visualViewportListeners.set(type, listeners);
+          },
+        ),
+        removeEventListener: vi.fn(
+          (type: string, listener: (event: Event) => void) => {
+            const listeners = visualViewportListeners.get(type) || [];
+            const index = listeners.indexOf(listener);
+            if (index > -1) {
+              listeners.splice(index, 1);
+            }
+            visualViewportListeners.set(type, listeners);
+          },
+        ),
+      };
+
+      Object.defineProperty(window, "visualViewport", {
+        value: mockVisualViewport,
+        writable: true,
+        configurable: true,
+      });
+
+      Object.defineProperty(window, "innerHeight", {
+        value: 800,
+        writable: true,
+        configurable: true,
+      });
+    });
+
+    it("detects keyboard open when height diff > 150px", () => {
+      // Start with keyboard closed
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      expect(result.current.isKeyboardOpen).toBe(false);
+      expect(result.current.keyboardHeight).toBe(0);
+
+      // Simulate keyboard opening (visual viewport shrinks by 300px)
+      act(() => {
+        mockVisualViewport!.height = 500;
+        const resizeListeners = visualViewportListeners.get("resize") || [];
+        resizeListeners.forEach((listener) => listener(new Event("resize")));
+      });
+
+      expect(result.current.isKeyboardOpen).toBe(true);
+      expect(result.current.keyboardHeight).toBe(300);
+      expect(result.current.availableHeight).toBe(500);
+    });
+
+    it("detects keyboard closed when height diff <= 150px", () => {
+      // Simulate keyboard being open first
+      mockVisualViewport!.height = 500;
+
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      expect(result.current.isKeyboardOpen).toBe(true);
+      expect(result.current.keyboardHeight).toBe(300);
+
+      // Simulate keyboard closing (visual viewport returns to full height)
+      act(() => {
+        mockVisualViewport!.height = 800;
+        const resizeListeners = visualViewportListeners.get("resize") || [];
+        resizeListeners.forEach((listener) => listener(new Event("resize")));
+      });
+
+      expect(result.current.isKeyboardOpen).toBe(false);
+      expect(result.current.keyboardHeight).toBe(0);
+    });
+
+    it("updates on visualViewport resize event", () => {
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      // Initial state
+      expect(result.current.keyboardHeight).toBe(0);
+
+      // Simulate resize event (keyboard opens partially)
+      act(() => {
+        mockVisualViewport!.height = 600;
+        const resizeListeners = visualViewportListeners.get("resize") || [];
+        resizeListeners.forEach((listener) => listener(new Event("resize")));
+      });
+
+      expect(result.current.keyboardHeight).toBe(200);
+      expect(result.current.availableHeight).toBe(600);
+
+      // Simulate another resize (keyboard opens more)
+      act(() => {
+        mockVisualViewport!.height = 400;
+        const resizeListeners = visualViewportListeners.get("resize") || [];
+        resizeListeners.forEach((listener) => listener(new Event("resize")));
+      });
+
+      expect(result.current.keyboardHeight).toBe(400);
+      expect(result.current.availableHeight).toBe(400);
+    });
+
+    it("updates on visualViewport scroll event", () => {
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      // Simulate scroll event (which can also trigger on mobile)
+      act(() => {
+        mockVisualViewport!.height = 550;
+        const scrollListeners = visualViewportListeners.get("scroll") || [];
+        scrollListeners.forEach((listener) => listener(new Event("scroll")));
+      });
+
+      expect(result.current.keyboardHeight).toBe(250);
+      expect(result.current.availableHeight).toBe(550);
+    });
+
+    it("cleans up event listeners on unmount", () => {
+      const { unmount } = renderHook(() => useKeyboardHeight());
+
+      expect(mockVisualViewport!.addEventListener).toHaveBeenCalledWith(
+        "resize",
+        expect.any(Function),
+      );
+      expect(mockVisualViewport!.addEventListener).toHaveBeenCalledWith(
+        "scroll",
+        expect.any(Function),
+      );
+
+      unmount();
+
+      expect(mockVisualViewport!.removeEventListener).toHaveBeenCalledWith(
+        "resize",
+        expect.any(Function),
+      );
+      expect(mockVisualViewport!.removeEventListener).toHaveBeenCalledWith(
+        "scroll",
+        expect.any(Function),
+      );
+    });
+  });
+});