@copilotkit/react-core 1.57.3 → 1.58.0-canary.thread-id-propagation

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

@@ -1,397 +0,0 @@
-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 "../../context";
-import { useAgent } from "../use-agent";
-
-vi.mock("../../context", () => ({
-  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

@@ -1,56 +0,0 @@
-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

@@ -1,192 +0,0 @@
-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),
-      );
-    });
-  });
-});