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

package/src/v2/hooks/__tests__/use-pin-to-send.test.tsx

@@ -1,219 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, act } from "@testing-library/react";
-import React, { useRef } from "react";
-import { usePinToSend } from "../use-pin-to-send";
-import { LastUserMessageContext } from "../../components/chat/last-user-message-context";
-
-// Small harness that wires the hook up against an in-memory DOM.
-// Height mocks are applied via Object.defineProperty because jsdom doesn't run layout.
-function setHeight(el: HTMLElement, height: number) {
-  Object.defineProperty(el, "clientHeight", {
-    configurable: true,
-    value: height,
-  });
-  Object.defineProperty(el, "offsetHeight", {
-    configurable: true,
-    value: height,
-  });
-  el.getBoundingClientRect = () =>
-    ({
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: height,
-      width: 100,
-      height,
-      x: 0,
-      y: 0,
-      toJSON: () => ({}),
-    }) as DOMRect;
-}
-
-// Inner component so the hook is mounted inside the Provider and can read context.
-function HarnessInner({ topOffset }: { topOffset: number }) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const spacerRef = useRef<HTMLDivElement>(null);
-
-  usePinToSend({ scrollRef, contentRef, spacerRef, topOffset });
-
-  return (
-    <div ref={scrollRef} data-testid="scroll">
-      <div ref={contentRef} data-testid="content">
-        <div data-message-id="m1" data-role="user">
-          user msg 1
-        </div>
-        <div data-message-id="m2" data-role="assistant">
-          asst msg 1
-        </div>
-        <div data-message-id="m3" data-role="user">
-          user msg 2
-        </div>
-      </div>
-      <div ref={spacerRef} data-testid="spacer" style={{ height: 0 }} />
-    </div>
-  );
-}
-
-function Harness({
-  lastUserMessage,
-  topOffset = 16,
-}: {
-  lastUserMessage: { id: string | null; sendNonce: number };
-  topOffset?: number;
-}) {
-  return (
-    <LastUserMessageContext.Provider value={lastUserMessage}>
-      <HarnessInner topOffset={topOffset} />
-    </LastUserMessageContext.Provider>
-  );
-}
-
-beforeEach(() => {
-  HTMLElement.prototype.scrollTo = vi.fn();
-  // jsdom does not run rAF callbacks — stub it to fire synchronously so scroll assertions work.
-  vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
-    cb(0);
-    return 0;
-  });
-  vi.stubGlobal("cancelAnimationFrame", vi.fn());
-});
-
-describe("usePinToSend", () => {
-  it("sets spacer height to viewportHeight - userMessageHeight - topOffset on new send", async () => {
-    const { rerender, getByTestId } = render(
-      <Harness lastUserMessage={{ id: null, sendNonce: 0 }} />,
-    );
-
-    const scroll = getByTestId("scroll");
-    const spacer = getByTestId("spacer");
-    setHeight(scroll, 800);
-
-    const userMsg = scroll.querySelector(
-      '[data-message-id="m3"]',
-    ) as HTMLElement;
-    setHeight(userMsg, 40);
-
-    act(() => {
-      rerender(<Harness lastUserMessage={{ id: "m3", sendNonce: 1 }} />);
-    });
-
-    // viewport=800, userMsg=40, topOffset=16
-    // spacer = max(0, 800 - 40 - 16) = 744
-    expect(spacer.style.height).toBe("744px");
-  });
-
-  it("calls scrollTo with targetEl.offsetTop - topOffset on new send", async () => {
-    const { rerender, getByTestId } = render(
-      <Harness lastUserMessage={{ id: null, sendNonce: 0 }} />,
-    );
-
-    const scroll = getByTestId("scroll");
-    setHeight(scroll, 800);
-    const scrollTo = scroll.scrollTo as unknown as ReturnType<typeof vi.fn>;
-
-    const userMsg = scroll.querySelector(
-      '[data-message-id="m3"]',
-    ) as HTMLElement;
-    setHeight(userMsg, 40);
-    // computeOffsetTop uses getBoundingClientRect; mock top=400 on userMsg and top=0 on scroll
-    // so that elRect.top - stopRect.top + scrollEl.scrollTop = 400 - 0 + 0 = 400.
-    userMsg.getBoundingClientRect = () =>
-      ({
-        top: 400,
-        left: 0,
-        right: 100,
-        bottom: 440,
-        width: 100,
-        height: 40,
-        x: 0,
-        y: 400,
-        toJSON: () => ({}),
-      }) as DOMRect;
-
-    act(() => {
-      rerender(<Harness lastUserMessage={{ id: "m3", sendNonce: 1 }} />);
-    });
-
-    // Allow rAF to fire
-    await act(async () => {
-      await new Promise((r) => setTimeout(r, 0));
-    });
-
-    expect(scrollTo).toHaveBeenCalledWith({
-      top: 400 - 16,
-      behavior: "smooth",
-    });
-  });
-
-  it("shrinks spacer as content height grows (does not grow it)", async () => {
-    let observed: (() => void) | null = null;
-    const ROStub = vi.fn().mockImplementation((cb: () => void) => {
-      observed = cb;
-      return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
-    });
-    const prevRO = global.ResizeObserver;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    global.ResizeObserver = ROStub as any;
-
-    try {
-      const { rerender, getByTestId } = render(
-        <Harness lastUserMessage={{ id: null, sendNonce: 0 }} />,
-      );
-      const scroll = getByTestId("scroll");
-      const content = getByTestId("content");
-      const spacer = getByTestId("spacer");
-      setHeight(scroll, 800);
-      const userMsg = scroll.querySelector(
-        '[data-message-id="m3"]',
-      ) as HTMLElement;
-      setHeight(userMsg, 40);
-      setHeight(content, 200);
-
-      act(() => {
-        rerender(<Harness lastUserMessage={{ id: "m3", sendNonce: 1 }} />);
-      });
-
-      // Initial: 800 - 40 - 16 = 744
-      expect(spacer.style.height).toBe("744px");
-
-      // Simulate content growing — spacer should shrink
-      setHeight(content, 600);
-      act(() => observed?.());
-      expect(parseInt(spacer.style.height, 10)).toBeLessThan(744);
-
-      // Simulate content shrinking — spacer should NOT grow back
-      setHeight(content, 100);
-      const shrunkHeight = spacer.style.height;
-      act(() => observed?.());
-      expect(spacer.style.height).toBe(shrunkHeight);
-    } finally {
-      global.ResizeObserver = prevRO;
-    }
-  });
-
-  it("cancels the scheduled rAF on unmount (cleanup)", async () => {
-    // Use a real rAF handle so we can assert the cancel was issued with it.
-    const cancelSpy = vi.spyOn(global, "cancelAnimationFrame");
-    try {
-      const { rerender, unmount, getByTestId } = render(
-        <Harness lastUserMessage={{ id: null, sendNonce: 0 }} />,
-      );
-      const scroll = getByTestId("scroll");
-      setHeight(scroll, 800);
-      const userMsg = scroll.querySelector(
-        '[data-message-id="m3"]',
-      ) as HTMLElement;
-      setHeight(userMsg, 40);
-
-      act(() => {
-        rerender(<Harness lastUserMessage={{ id: "m3", sendNonce: 1 }} />);
-      });
-
-      unmount();
-      expect(cancelSpy).toHaveBeenCalled();
-    } finally {
-      cancelSpy.mockRestore();
-    }
-  });
-});

package/src/v2/hooks/__tests__/use-render-custom-messages.test.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-import { describe, it, expect, vi } from "vitest";
-import { renderHook } from "@testing-library/react";
-import { useRenderCustomMessages } from "../use-render-custom-messages";
-import { CopilotKitProvider } from "../../providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../providers/CopilotChatConfigurationProvider";
-
-/**
- * Regression test for #3497: useRenderCustomMessages throws "Agent not found"
- * when the agent is undefined during the connecting state.
- *
- * During initial connection, the agent may not yet be registered in the
- * CopilotKit registry. The hook should return null gracefully instead of
- * throwing an error.
- */
-describe("useRenderCustomMessages (#3497)", () => {
-  it("returns null instead of throwing when agent is not found", () => {
-    // Render the hook inside a CopilotKitProvider with an agentId that
-    // does NOT exist in the registry (simulating connecting state).
-    // The hook should not throw.
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
-      <CopilotKitProvider
-        renderCustomMessages={[
-          {
-            agentId: "nonexistent-agent",
-            render: () => <div>Custom</div>,
-          },
-        ]}
-      >
-        <CopilotChatConfigurationProvider
-          agentId="nonexistent-agent"
-          threadId="test-thread"
-        >
-          {children}
-        </CopilotChatConfigurationProvider>
-      </CopilotKitProvider>
-    );
-
-    const { result } = renderHook(() => useRenderCustomMessages(), { wrapper });
-
-    // The hook should return a function (the render function), not throw
-    // When called, it should handle missing agent gracefully
-    if (typeof result.current === "function") {
-      const output = result.current({
-        message: { id: "msg-1", role: "assistant", content: "test" },
-        position: "after",
-      });
-      // Should return null since agent isn't found
-      expect(output).toBeNull();
-    } else {
-      // If result.current is null, that's also acceptable
-      expect(result.current).toBeNull();
-    }
-  });
-});

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

@@ -1,259 +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 { useRenderTool, type RenderToolProps } from "../use-render-tool";
-import { useCopilotKit } from "../../context";
-import type { ReactToolCallRenderer } from "../../types/react-tool-call-renderer";
-
-vi.mock("../../context", () => ({
-  useCopilotKit: vi.fn(),
-}));
-
-type MockCore = {
-  renderToolCalls: ReactToolCallRenderer[];
-  setRenderToolCalls: ReturnType<typeof vi.fn>;
-  addHookRenderToolCall: ReturnType<typeof vi.fn>;
-  removeHookRenderToolCall: ReturnType<typeof vi.fn>;
-};
-
-const mockUseCopilotKit = useCopilotKit as ReturnType<typeof vi.fn>;
-
-function createMockCore(
-  initialRenderToolCalls: ReactToolCallRenderer[] = [],
-): MockCore {
-  const hookEntries = new Map<string, ReactToolCallRenderer>();
-
-  const core: MockCore = {
-    get renderToolCalls() {
-      if (hookEntries.size === 0) return initialRenderToolCalls;
-      const merged = new Map<string, ReactToolCallRenderer>();
-      for (const rc of initialRenderToolCalls) {
-        merged.set(`${rc.agentId ?? ""}:${rc.name}`, rc);
-      }
-      for (const [key, rc] of hookEntries) {
-        merged.set(key, rc);
-      }
-      return Array.from(merged.values());
-    },
-    setRenderToolCalls: vi.fn((next: ReactToolCallRenderer[]) => {
-      initialRenderToolCalls = next;
-    }),
-    addHookRenderToolCall: vi.fn((entry: ReactToolCallRenderer) => {
-      const key = `${entry.agentId ?? ""}:${entry.name}`;
-      hookEntries.set(key, entry);
-    }),
-    removeHookRenderToolCall: vi.fn((name: string, agentId?: string) => {
-      const key = `${agentId ?? ""}:${name}`;
-      hookEntries.delete(key);
-    }),
-  };
-
-  return core;
-}
-
-describe("useRenderTool", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("registers a named renderer with parameters schema", () => {
-    const core = createMockCore();
-    mockUseCopilotKit.mockReturnValue({ copilotkit: core });
-
-    const schema = z.object({ query: z.string() });
-    const renderFn = vi.fn((_props: RenderToolProps<typeof schema>) => (
-      <div>render</div>
-    ));
-
-    const Harness: React.FC = () => {
-      useRenderTool(
-        {
-          name: "searchDocs",
-          parameters: schema,
-          render: renderFn,
-        },
-        [],
-      );
-      return null;
-    };
-
-    render(<Harness />);
-
-    expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(1);
-    const renderer = core.renderToolCalls.find(
-      (item) => item.name === "searchDocs",
-    );
-    expect(renderer).toBeDefined();
-    expect(renderer?.args).toBe(schema);
-    expect(typeof renderer?.render).toBe("function");
-  });
-
-  it("registers wildcard renderer and defaults parameters schema to z.any", () => {
-    const core = createMockCore();
-    mockUseCopilotKit.mockReturnValue({ copilotkit: core });
-
-    const wildcardRender = vi.fn(() => <div>wildcard</div>);
-
-    const Harness: React.FC = () => {
-      useRenderTool(
-        {
-          name: "*",
-          render: wildcardRender,
-        },
-        [],
-      );
-      return null;
-    };
-
-    render(<Harness />);
-
-    const renderer = core.renderToolCalls.find((item) => item.name === "*");
-    expect(renderer).toBeDefined();
-    expect(typeof renderer?.render).toBe("function");
-    expect(renderer?.args.safeParse({ arbitrary: true }).success).toBe(true);
-  });
-
-  it("deduplicates by agentId:name and keeps unrelated entries", () => {
-    const oldRenderer: ReactToolCallRenderer = {
-      name: "searchDocs",
-      agentId: "agent-1",
-      args: z.object({ query: z.string() }),
-      render: () => <div>old</div>,
-    };
-    const untouchedRenderer: ReactToolCallRenderer = {
-      name: "otherTool",
-      args: z.object({ id: z.string() }),
-      render: () => <div>other</div>,
-    };
-
-    const core = createMockCore([oldRenderer, untouchedRenderer]);
-    mockUseCopilotKit.mockReturnValue({ copilotkit: core });
-
-    const newRender = vi.fn(() => <div>new</div>);
-
-    const Harness: React.FC = () => {
-      useRenderTool(
-        {
-          name: "searchDocs",
-          agentId: "agent-1",
-          parameters: z.object({ query: z.string() }),
-          render: newRender,
-        },
-        [],
-      );
-      return null;
-    };
-
-    render(<Harness />);
-
-    const updated = core.renderToolCalls.find(
-      (item) => item.name === "searchDocs" && item.agentId === "agent-1",
-    );
-    const untouched = core.renderToolCalls.find(
-      (item) => item.name === "otherTool",
-    );
-
-    expect(core.renderToolCalls).toHaveLength(2);
-    expect(typeof updated?.render).toBe("function");
-    expect(untouched).toBe(untouchedRenderer);
-  });
-
-  it("keeps separate entries for same name across different agentId values", () => {
-    const core = createMockCore();
-    mockUseCopilotKit.mockReturnValue({ copilotkit: core });
-
-    const RendererA: React.FC = () => {
-      useRenderTool(
-        {
-          name: "summarize",
-          agentId: "agent-a",
-          parameters: z.object({ text: z.string() }),
-          render: () => <div>A</div>,
-        },
-        [],
-      );
-      return null;
-    };
-
-    const RendererB: React.FC = () => {
-      useRenderTool(
-        {
-          name: "summarize",
-          agentId: "agent-b",
-          parameters: z.object({ text: z.string() }),
-          render: () => <div>B</div>,
-        },
-        [],
-      );
-      return null;
-    };
-
-    render(
-      <>
-        <RendererA />
-        <RendererB />
-      </>,
-    );
-
-    const byName = core.renderToolCalls.filter(
-      (item) => item.name === "summarize",
-    );
-    expect(byName).toHaveLength(2);
-    expect(byName.map((item) => item.agentId).sort()).toEqual([
-      "agent-a",
-      "agent-b",
-    ]);
-  });
-
-  it("re-registers when deps change", () => {
-    const core = createMockCore();
-    mockUseCopilotKit.mockReturnValue({ copilotkit: core });
-
-    const Harness: React.FC<{ version: string }> = ({ version }) => {
-      useRenderTool(
-        {
-          name: "searchDocs",
-          parameters: z.object({ query: z.string() }),
-          render: () => <div>{version}</div>,
-        },
-        [version],
-      );
-      return null;
-    };
-
-    const ui = render(<Harness version="v1" />);
-    expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(1);
-
-    ui.rerender(<Harness version="v2" />);
-    expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(2);
-  });
-
-  it("does not remove renderer on unmount", () => {
-    const core = createMockCore();
-    mockUseCopilotKit.mockReturnValue({ copilotkit: core });
-
-    const Harness: React.FC = () => {
-      useRenderTool(
-        {
-          name: "searchDocs",
-          parameters: z.object({ query: z.string() }),
-          render: () => <div>render</div>,
-        },
-        [],
-      );
-      return null;
-    };
-
-    const ui = render(<Harness />);
-    const callsAfterMount = core.addHookRenderToolCall.mock.calls.length;
-    ui.unmount();
-
-    // No additional calls after unmount — renderer kept for chat history
-    expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(callsAfterMount);
-    expect(core.removeHookRenderToolCall).not.toHaveBeenCalled();
-    expect(
-      core.renderToolCalls.find((item) => item.name === "searchDocs"),
-    ).toBeDefined();
-  });
-});