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

package/src/v2/providers/__tests__/CopilotChatConfigurationProvider.test.tsx

@@ -0,0 +1,546 @@
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import {
+  CopilotChatConfigurationProvider,
+  CopilotChatDefaultLabels,
+  useCopilotChatConfiguration,
+} from "../CopilotChatConfigurationProvider";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { CopilotKitProvider } from "../CopilotKitProvider";
+import { MockStepwiseAgent } from "../../__tests__/utils/test-helpers";
+import { CopilotChat } from "../../components/chat/CopilotChat";
+
+// Test component to access configuration
+function ConfigurationDisplay() {
+  const config = useCopilotChatConfiguration();
+  return (
+    <div>
+      <div data-testid="agentId">{config?.agentId || "no-config"}</div>
+      <div data-testid="threadId">{config?.threadId || "no-config"}</div>
+      <div data-testid="placeholder">
+        {config?.labels.chatInputPlaceholder || "no-config"}
+      </div>
+      <div data-testid="copyLabel">
+        {config?.labels.assistantMessageToolbarCopyMessageLabel || "no-config"}
+      </div>
+    </div>
+  );
+}
+
+describe("CopilotChatConfigurationProvider", () => {
+  describe("Basic functionality", () => {
+    it("should provide default configuration", () => {
+      render(
+        <CopilotChatConfigurationProvider threadId="test-thread">
+          <ConfigurationDisplay />
+        </CopilotChatConfigurationProvider>,
+      );
+
+      expect(screen.getByTestId("agentId").textContent).toBe(DEFAULT_AGENT_ID);
+      expect(screen.getByTestId("threadId").textContent).toBe("test-thread");
+      expect(screen.getByTestId("placeholder").textContent).toBe(
+        CopilotChatDefaultLabels.chatInputPlaceholder,
+      );
+    });
+
+    it("should accept custom agentId", () => {
+      render(
+        <CopilotChatConfigurationProvider
+          threadId="test-thread"
+          agentId="custom-agent"
+        >
+          <ConfigurationDisplay />
+        </CopilotChatConfigurationProvider>,
+      );
+
+      expect(screen.getByTestId("agentId").textContent).toBe("custom-agent");
+    });
+
+    it("should merge custom labels with defaults", () => {
+      const customLabels = {
+        chatInputPlaceholder: "Custom placeholder",
+      };
+
+      render(
+        <CopilotChatConfigurationProvider
+          threadId="test-thread"
+          labels={customLabels}
+        >
+          <ConfigurationDisplay />
+        </CopilotChatConfigurationProvider>,
+      );
+
+      expect(screen.getByTestId("placeholder").textContent).toBe(
+        "Custom placeholder",
+      );
+      // Other labels should still have defaults
+      expect(screen.getByTestId("copyLabel").textContent).toBe(
+        CopilotChatDefaultLabels.assistantMessageToolbarCopyMessageLabel,
+      );
+    });
+  });
+
+  describe("Hook behavior", () => {
+    it("should return null when no provider exists", () => {
+      render(<ConfigurationDisplay />);
+
+      expect(screen.getByTestId("agentId").textContent).toBe("no-config");
+      expect(screen.getByTestId("threadId").textContent).toBe("no-config");
+      expect(screen.getByTestId("placeholder").textContent).toBe("no-config");
+    });
+  });
+
+  describe("CopilotChat priority merging", () => {
+    it("should use defaults when no provider exists and no props passed", () => {
+      // CopilotChat creates its own provider, so we need to check inside it
+      // We'll check the input placeholder which uses the configuration
+      const { container } = render(
+        <CopilotKitProvider
+          agents__unsafe_dev_only={{
+            [DEFAULT_AGENT_ID]: new MockStepwiseAgent(),
+          }}
+        >
+          <CopilotChat />
+        </CopilotKitProvider>,
+      );
+
+      // Find the input element and check its placeholder
+      const input = container.querySelector('textarea, input[type="text"]');
+      expect(input?.getAttribute("placeholder")).toBe(
+        CopilotChatDefaultLabels.chatInputPlaceholder,
+      );
+    });
+
+    it("should inherit from existing provider when CopilotChat has no props", () => {
+      const { container } = render(
+        <CopilotKitProvider
+          agents__unsafe_dev_only={{
+            "outer-agent": new MockStepwiseAgent({ agentId: "outer-agent" }),
+          }}
+        >
+          <CopilotChatConfigurationProvider
+            threadId="outer-thread"
+            agentId="outer-agent"
+            labels={{ chatInputPlaceholder: "Outer placeholder" }}
+          >
+            <CopilotChat />
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>,
+      );
+
+      // Check that the input inherits the outer placeholder
+      const input = container.querySelector('textarea, input[type="text"]');
+      expect(input?.getAttribute("placeholder")).toBe("Outer placeholder");
+    });
+
+    it("should override existing provider with CopilotChat props", () => {
+      const { container } = render(
+        <CopilotKitProvider
+          agents__unsafe_dev_only={{
+            "inner-agent": new MockStepwiseAgent({ agentId: "inner-agent" }),
+          }}
+        >
+          <CopilotChatConfigurationProvider
+            threadId="outer-thread"
+            agentId="outer-agent"
+            labels={{ chatInputPlaceholder: "Outer placeholder" }}
+          >
+            <CopilotChat
+              agentId="inner-agent"
+              threadId="inner-thread"
+              labels={{ chatInputPlaceholder: "Inner placeholder" }}
+            />
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>,
+      );
+
+      // CopilotChat props should win - check the input placeholder
+      const input = container.querySelector('textarea, input[type="text"]');
+      expect(input?.getAttribute("placeholder")).toBe("Inner placeholder");
+    });
+
+    it("should merge labels correctly with priority: default < existing < props", () => {
+      const { container } = render(
+        <CopilotKitProvider
+          agents__unsafe_dev_only={{
+            [DEFAULT_AGENT_ID]: new MockStepwiseAgent(),
+          }}
+        >
+          <CopilotChatConfigurationProvider
+            threadId="outer-thread"
+            labels={{
+              chatInputPlaceholder: "Outer placeholder",
+              assistantMessageToolbarCopyMessageLabel: "Outer copy",
+            }}
+          >
+            <CopilotChat
+              labels={{
+                chatInputPlaceholder: "Inner placeholder",
+                // Not overriding copyLabel, should inherit from outer
+              }}
+            />
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>,
+      );
+
+      const input = container.querySelector('textarea, input[type="text"]');
+      expect(input?.getAttribute("placeholder")).toBe("Inner placeholder");
+      // The copy label would be tested if we had assistant messages
+    });
+
+    it("should handle partial overrides correctly", () => {
+      const { container } = render(
+        <CopilotKitProvider
+          agents__unsafe_dev_only={{
+            "outer-agent": new MockStepwiseAgent({ agentId: "outer-agent" }),
+          }}
+        >
+          <CopilotChatConfigurationProvider
+            threadId="outer-thread"
+            agentId="outer-agent"
+            labels={{ chatInputPlaceholder: "Outer placeholder" }}
+          >
+            <CopilotChat
+              // Only override threadId and some labels, not agentId
+              threadId="inner-thread"
+              labels={{
+                chatInputPlaceholder: "Inner placeholder",
+              }}
+            />
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>,
+      );
+
+      // Check the placeholder was overridden
+      const input = container.querySelector('textarea, input[type="text"]');
+      expect(input?.getAttribute("placeholder")).toBe("Inner placeholder");
+      // agentId and other properties would be tested through agent behavior
+    });
+
+    it("should allow accessing configuration outside CopilotChat in same provider", () => {
+      // This shows that ConfigurationDisplay outside CopilotChat
+      // sees the outer provider values, not the inner merged ones
+      render(
+        <CopilotKitProvider
+          agents__unsafe_dev_only={{
+            "outer-agent": new MockStepwiseAgent({ agentId: "outer-agent" }),
+          }}
+        >
+          <CopilotChatConfigurationProvider
+            threadId="outer-thread"
+            agentId="outer-agent"
+            labels={{ chatInputPlaceholder: "Outer placeholder" }}
+          >
+            <CopilotChat
+              threadId="inner-thread"
+              labels={{ chatInputPlaceholder: "Inner placeholder" }}
+            />
+            <ConfigurationDisplay />
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>,
+      );
+
+      // ConfigurationDisplay is outside CopilotChat, so it sees outer values
+      expect(screen.getByTestId("agentId").textContent).toBe("outer-agent");
+      expect(screen.getByTestId("threadId").textContent).toBe("outer-thread");
+      expect(screen.getByTestId("placeholder").textContent).toBe(
+        "Outer placeholder",
+      );
+    });
+  });
+
+  describe("Modal state", () => {
+    it("should always provide setModalOpen and isModalOpen even without isModalDefaultOpen", () => {
+      function ModalStateDisplay() {
+        const config = useCopilotChatConfiguration();
+        return (
+          <div>
+            <div data-testid="hasSetModalOpen">
+              {config?.setModalOpen ? "yes" : "no"}
+            </div>
+            <div data-testid="hasIsModalOpen">
+              {config?.isModalOpen !== undefined ? "yes" : "no"}
+            </div>
+          </div>
+        );
+      }
+
+      render(
+        <CopilotChatConfigurationProvider threadId="test-thread">
+          <ModalStateDisplay />
+        </CopilotChatConfigurationProvider>,
+      );
+
+      expect(screen.getByTestId("hasSetModalOpen").textContent).toBe("yes");
+      expect(screen.getByTestId("hasIsModalOpen").textContent).toBe("yes");
+    });
+
+    it("should respect isModalDefaultOpen when provided", () => {
+      function ModalStateDisplay() {
+        const config = useCopilotChatConfiguration();
+        return (
+          <div>
+            <div data-testid="isModalOpen">
+              {config?.isModalOpen ? "open" : "closed"}
+            </div>
+          </div>
+        );
+      }
+
+      render(
+        <CopilotChatConfigurationProvider
+          threadId="test-thread"
+          isModalDefaultOpen={false}
+        >
+          <ModalStateDisplay />
+        </CopilotChatConfigurationProvider>,
+      );
+
+      expect(screen.getByTestId("isModalOpen").textContent).toBe("closed");
+    });
+
+    it("should inherit parent modal state when child has no isModalDefaultOpen", () => {
+      function ModalStateDisplay() {
+        const config = useCopilotChatConfiguration();
+        return (
+          <div>
+            <div data-testid="isModalOpen">
+              {config?.isModalOpen ? "open" : "closed"}
+            </div>
+            <div data-testid="hasSetModalOpen">
+              {config?.setModalOpen ? "yes" : "no"}
+            </div>
+          </div>
+        );
+      }
+
+      render(
+        <CopilotChatConfigurationProvider
+          threadId="outer-thread"
+          isModalDefaultOpen={false}
+        >
+          <CopilotChatConfigurationProvider threadId="inner-thread">
+            <ModalStateDisplay />
+          </CopilotChatConfigurationProvider>
+        </CopilotChatConfigurationProvider>,
+      );
+
+      // Child should inherit parent's modal state (closed)
+      expect(screen.getByTestId("isModalOpen").textContent).toBe("closed");
+      expect(screen.getByTestId("hasSetModalOpen").textContent).toBe("yes");
+    });
+
+    it("should allow nested provider to override parent modal state with explicit isModalDefaultOpen", () => {
+      function ModalStateDisplay() {
+        const config = useCopilotChatConfiguration();
+        return (
+          <div>
+            <div data-testid="isModalOpen">
+              {config?.isModalOpen ? "open" : "closed"}
+            </div>
+          </div>
+        );
+      }
+
+      render(
+        <CopilotChatConfigurationProvider
+          threadId="outer-thread"
+          isModalDefaultOpen={true}
+        >
+          <CopilotChatConfigurationProvider
+            threadId="inner-thread"
+            isModalDefaultOpen={false}
+          >
+            <ModalStateDisplay />
+          </CopilotChatConfigurationProvider>
+        </CopilotChatConfigurationProvider>,
+      );
+
+      expect(screen.getByTestId("isModalOpen").textContent).toBe("closed");
+    });
+  });
+
+  /**
+   * CPK-7152: Bidirectional sync between nested providers.
+   *
+   * The fix must satisfy both:
+   *   Behavior A — child provider respects its own isModalDefaultOpen even
+   *                when a parent provider exists (covered by the existing
+   *                "allow nested provider to override" test above).
+   *   Behavior B — state changes in the inner provider propagate outward so
+   *                that hooks reading from an outer provider stay in sync.
+   *
+   * Scenarios mirror the reproduction cases in:
+   * https://github.com/CopilotKit/deep-agent-cpk-experiments/tree/main/app/client/src/tickets/tkt-modal-default-open
+   */
+  describe("Bidirectional sync (CPK-7152)", () => {
+    // Reusable probe/control component that reads the closest provider.
+    function ModalControls({ id }: { id: string }) {
+      const config = useCopilotChatConfiguration();
+      return (
+        <>
+          <div data-testid={`${id}-state`}>{String(config?.isModalOpen)}</div>
+          <button
+            data-testid={`${id}-open`}
+            onClick={() => config?.setModalOpen(true)}
+          >
+            open
+          </button>
+          <button
+            data-testid={`${id}-close`}
+            onClick={() => config?.setModalOpen(false)}
+          >
+            close
+          </button>
+        </>
+      );
+    }
+
+    it("scenario-sidebar-outer-hook: inner setModalOpen propagates to outer hook (Behavior B)", () => {
+      // Abe.Hu's layout: outer bare provider, inner provider owns explicit state.
+      // Toggling via the inner provider should update the outer hook.
+      render(
+        <CopilotChatConfigurationProvider threadId="outer">
+          {/* OuterProbe sits outside the inner provider — reads outer context */}
+          <ModalControls id="outer" />
+          <CopilotChatConfigurationProvider
+            threadId="inner"
+            isModalDefaultOpen={true}
+          >
+            <ModalControls id="inner" />
+          </CopilotChatConfigurationProvider>
+        </CopilotChatConfigurationProvider>,
+      );
+
+      expect(screen.getByTestId("outer-state").textContent).toBe("true");
+      expect(screen.getByTestId("inner-state").textContent).toBe("true");
+
+      act(() => {
+        fireEvent.click(screen.getByTestId("inner-close"));
+      });
+
+      // Inner closed — outer hook must reflect the change.
+      expect(screen.getByTestId("inner-state").textContent).toBe("false");
+      expect(screen.getByTestId("outer-state").textContent).toBe("false");
+    });
+
+    it("scenario-sidebar-outer-hook: outer setModalOpen propagates to inner (parent→child sync)", () => {
+      // If the user calls setModalOpen from the outer hook, the inner
+      // provider (and therefore the sidebar) must respond.
+      render(
+        <CopilotChatConfigurationProvider
+          threadId="outer"
+          isModalDefaultOpen={false}
+        >
+          <ModalControls id="outer" />
+          <CopilotChatConfigurationProvider
+            threadId="inner"
+            isModalDefaultOpen={false}
+          >
+            <ModalControls id="inner" />
+          </CopilotChatConfigurationProvider>
+        </CopilotChatConfigurationProvider>,
+      );
+
+      expect(screen.getByTestId("outer-state").textContent).toBe("false");
+      expect(screen.getByTestId("inner-state").textContent).toBe("false");
+
+      act(() => {
+        fireEvent.click(screen.getByTestId("outer-open"));
+      });
+
+      // Outer opened — inner must follow.
+      expect(screen.getByTestId("outer-state").textContent).toBe("true");
+      expect(screen.getByTestId("inner-state").textContent).toBe("true");
+    });
+
+    it("scenario-nested-provider: three-level chain propagates through middle provider", () => {
+      // Mirrors the real provider stack:
+      //   Provider 1 (user's outer, no isModalDefaultOpen)
+      //     └── Provider 2 (CopilotChat's, no isModalDefaultOpen) — "middle"
+      //           └── Provider 3 (CopilotSidebarView's, explicit isModalDefaultOpen)
+      //
+      // Toggling P3 must reach P1 even though P2 has no explicit default.
+      render(
+        <CopilotChatConfigurationProvider threadId="p1">
+          <ModalControls id="p1" />
+          <CopilotChatConfigurationProvider threadId="p2">
+            {/* p2 has no isModalDefaultOpen — proxies p1's state */}
+            <CopilotChatConfigurationProvider
+              threadId="p3"
+              isModalDefaultOpen={true}
+            >
+              <ModalControls id="p3" />
+            </CopilotChatConfigurationProvider>
+          </CopilotChatConfigurationProvider>
+        </CopilotChatConfigurationProvider>,
+      );
+
+      expect(screen.getByTestId("p1-state").textContent).toBe("true");
+      expect(screen.getByTestId("p3-state").textContent).toBe("true");
+
+      act(() => {
+        fireEvent.click(screen.getByTestId("p3-close"));
+      });
+
+      expect(screen.getByTestId("p3-state").textContent).toBe("false");
+      expect(screen.getByTestId("p1-state").textContent).toBe("false");
+    });
+
+    it("scenario-nested-provider: Behavior A still holds after sync fix (no regression)", () => {
+      // Explicit isModalDefaultOpen on a child must still override the
+      // parent's current value on initial render — the sync effect must
+      // not overwrite the child's own initial state.
+      render(
+        <CopilotChatConfigurationProvider
+          threadId="outer"
+          isModalDefaultOpen={true}
+        >
+          <ModalControls id="outer" />
+          <CopilotChatConfigurationProvider
+            threadId="inner"
+            isModalDefaultOpen={false}
+          >
+            <ModalControls id="inner" />
+          </CopilotChatConfigurationProvider>
+        </CopilotChatConfigurationProvider>,
+      );
+
+      // Inner must start closed despite outer being open.
+      expect(screen.getByTestId("outer-state").textContent).toBe("true");
+      expect(screen.getByTestId("inner-state").textContent).toBe("false");
+    });
+  });
+
+  describe("Nested providers", () => {
+    it("should handle multiple nested providers correctly", () => {
+      render(
+        <CopilotChatConfigurationProvider
+          threadId="outer-thread"
+          agentId="outer-agent"
+          labels={{ chatInputPlaceholder: "Outer" }}
+        >
+          <CopilotChatConfigurationProvider
+            threadId="middle-thread"
+            agentId="middle-agent"
+            labels={{ chatInputPlaceholder: "Middle" }}
+          >
+            <CopilotChatConfigurationProvider
+              threadId="inner-thread"
+              agentId="inner-agent"
+              labels={{ chatInputPlaceholder: "Inner" }}
+            >
+              <ConfigurationDisplay />
+            </CopilotChatConfigurationProvider>
+          </CopilotChatConfigurationProvider>
+        </CopilotChatConfigurationProvider>,
+      );
+
+      // Innermost provider should win
+      expect(screen.getByTestId("agentId").textContent).toBe("inner-agent");
+      expect(screen.getByTestId("threadId").textContent).toBe("inner-thread");
+      expect(screen.getByTestId("placeholder").textContent).toBe("Inner");
+    });
+  });
+});

package/src/v2/providers/__tests__/CopilotKitProvider.license.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, act, waitFor } from "@testing-library/react";
+import React from "react";
+import { CopilotKitProvider } from "../CopilotKitProvider";
+
+/**
+ * These tests verify that the license banner is driven by the server-reported
+ * licenseStatus field in the /info response — not by client-side token verification.
+ */
+
+function mockFetchWithLicenseStatus(licenseStatus?: string) {
+  return vi.fn().mockResolvedValue({
+    ok: true,
+    status: 200,
+    json: async () => ({
+      version: "1.0.0",
+      agents: {},
+      audioFileTranscriptionEnabled: false,
+      mode: "intelligence",
+      licenseStatus,
+    }),
+  });
+}
+
+let originalFetch: typeof globalThis.fetch;
+
+beforeEach(() => {
+  originalFetch = globalThis.fetch;
+});
+
+afterEach(() => {
+  globalThis.fetch = originalFetch;
+});
+
+describe("CopilotKitProvider license (server-driven)", () => {
+  it("shows no_license banner when server reports 'none'", async () => {
+    globalThis.fetch = mockFetchWithLicenseStatus("none") as any;
+    render(
+      <CopilotKitProvider runtimeUrl="/api">
+        <div>child</div>
+      </CopilotKitProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByText(/Powered by CopilotKit/)).toBeTruthy();
+    });
+  });
+
+  it("shows expired banner when server reports 'expired'", async () => {
+    globalThis.fetch = mockFetchWithLicenseStatus("expired") as any;
+    render(
+      <CopilotKitProvider runtimeUrl="/api">
+        <div>child</div>
+      </CopilotKitProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByText(/expired/i)).toBeTruthy();
+    });
+  });
+
+  it("shows invalid banner when server reports 'invalid'", async () => {
+    globalThis.fetch = mockFetchWithLicenseStatus("invalid") as any;
+    render(
+      <CopilotKitProvider runtimeUrl="/api">
+        <div>child</div>
+      </CopilotKitProvider>,
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText(/Invalid CopilotKit license token/i),
+      ).toBeTruthy();
+    });
+  });
+
+  it("shows no banner when server reports 'valid'", async () => {
+    globalThis.fetch = mockFetchWithLicenseStatus("valid") as any;
+    render(
+      <CopilotKitProvider runtimeUrl="/api">
+        <div>child</div>
+      </CopilotKitProvider>,
+    );
+    // Wait for runtime connection to complete
+    await waitFor(() => {
+      expect(screen.queryByText(/Powered by CopilotKit/)).toBeNull();
+      expect(screen.queryByText(/expired/i)).toBeNull();
+      expect(screen.queryByText(/Invalid/i)).toBeNull();
+    });
+  });
+
+  it("shows no banner when licenseStatus is absent (non-intelligence mode)", async () => {
+    globalThis.fetch = mockFetchWithLicenseStatus(undefined) as any;
+    render(
+      <CopilotKitProvider runtimeUrl="/api">
+        <div>child</div>
+      </CopilotKitProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.queryByText(/Powered by CopilotKit/)).toBeNull();
+      expect(screen.queryByText(/expired/i)).toBeNull();
+    });
+  });
+});