@copilotkit/vue 1.69.2 → 1.69.3

package/src/v2/providers/__tests__/CopilotKitProvider.test.ts

@@ -1,6 +1,15 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, waitFor } from "@testing-library/vue";
 import { mount } from "@vue/test-utils";
-import { defineComponent, h, nextTick, ref, watchEffect } from "vue";
+import {
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  watchEffect,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
 import type {
   CopilotKitCoreSubscriber,
   FrontendToolHandlerContext,
@@ -39,6 +48,8 @@ describe("CopilotKitProvider", () => {
   afterEach(() => {
     consoleErrorSpy.mockRestore();
     consoleWarnSpy.mockRestore();
+    vi.unstubAllEnvs();
+    vi.unstubAllGlobals();
   });
 
   describe("Basic functionality", () => {
@@ -538,66 +549,166 @@ describe("CopilotKitProvider", () => {
       const tool = getCore().getTool({ toolName: "followUpTool" });
       expect(tool?.followUp).toBe(false);
     });
+  });
 
-    it("renders inspector when showDevConsole is true", async () => {
-      const wrapper = mount(CopilotKitProvider, {
-        props: {
-          runtimeUrl: "/api/copilotkit",
-          showDevConsole: true,
-        },
-        slots: {
-          default: () => h("div", "test"),
-        },
-      });
-
-      await nextTick();
+  describe("inspector visibility", () => {
+    async function settleInspectorLoad(): Promise<void> {
       await vi.dynamicImportSettled();
+      await new Promise((resolve) => setTimeout(resolve, 50));
       await nextTick();
+    }
 
-      expect(wrapper.find("cpk-web-inspector").exists()).toBe(true);
+    beforeEach(() => {
+      vi.stubEnv("NODE_ENV", "development");
+    });
+
+    it("renders by default on any development host and passes the provider core before connection", async () => {
+      let providerCore: CopilotKitCoreContextValue | null = null;
+      const Probe = defineComponent({
+        setup() {
+          providerCore = useCopilotKit().copilotkit.value;
+          return () => null;
+        },
+      });
+      const view = render(CopilotKitProvider, {
+        props: { runtimeUrl: "/api/copilotkit" },
+        slots: { default: Probe },
+      });
+
+      await waitFor(() => {
+        expect(
+          view.container.querySelector("cpk-web-inspector"),
+        ).not.toBeNull();
+      });
+      const inspector = view.container.querySelector(
+        "cpk-web-inspector",
+      ) as HTMLElement & {
+        autoAttachCore?: boolean;
+        autoAttachCoreAtConnection?: boolean;
+        core?: unknown;
+        coreAtConnection?: unknown;
+      };
+      expect(inspector.core).toBe(providerCore);
+      expect(inspector.autoAttachCore).toBe(false);
+      expect(inspector.coreAtConnection).toBe(providerCore);
+      expect(inspector.autoAttachCoreAtConnection).toBe(false);
       expect(defineWebInspector).toHaveBeenCalledTimes(1);
+      view.unmount();
     });
 
-    it("renders inspector on localhost when showDevConsole is auto", async () => {
-      const wrapper = mount(CopilotKitProvider, {
+    it("does not render or load when explicitly disabled in development", async () => {
+      const view = render(CopilotKitProvider, {
         props: {
           runtimeUrl: "/api/copilotkit",
-          showDevConsole: "auto",
-        },
-        slots: {
-          default: () => h("div", "test"),
+          enableInspector: false,
         },
+        slots: { default: "child" },
       });
 
-      await nextTick();
-      await vi.dynamicImportSettled();
-      await nextTick();
+      await settleInspectorLoad();
+      expect(view.container.querySelector("cpk-web-inspector")).toBeNull();
+      expect(defineWebInspector).not.toHaveBeenCalled();
+      view.unmount();
+    });
 
-      const shouldRenderOnThisHost = new Set(["localhost", "127.0.0.1"]).has(
-        window.location.hostname,
-      );
+    it("never renders or loads in production, even when explicitly enabled", async () => {
+      vi.stubEnv("NODE_ENV", "production");
+      const view = render(CopilotKitProvider, {
+        props: {
+          runtimeUrl: "/api/copilotkit",
+          enableInspector: true,
+        },
+        slots: { default: "child" },
+      });
 
-      expect(wrapper.find("cpk-web-inspector").exists()).toBe(
-        shouldRenderOnThisHost,
-      );
+      await settleInspectorLoad();
+      expect(view.container.querySelector("cpk-web-inspector")).toBeNull();
+      expect(defineWebInspector).not.toHaveBeenCalled();
+      view.unmount();
     });
 
-    it("does not render inspector when showDevConsole is false", async () => {
-      const wrapper = mount(CopilotKitProvider, {
+    it("does not let legacy showDevConsole disable the development Inspector", async () => {
+      const view = render(CopilotKitProvider, {
         props: {
           runtimeUrl: "/api/copilotkit",
           showDevConsole: false,
         },
-        slots: {
-          default: () => h("div", "test"),
+        slots: { default: "child" },
+      });
+
+      await waitFor(() => {
+        expect(
+          view.container.querySelector("cpk-web-inspector"),
+        ).not.toBeNull();
+      });
+      view.unmount();
+    });
+
+    it("does not let legacy showDevConsole enable the production Inspector", async () => {
+      vi.stubEnv("NODE_ENV", "production");
+      const view = render(CopilotKitProvider, {
+        props: {
+          runtimeUrl: "/api/copilotkit",
+          showDevConsole: "auto",
         },
+        slots: { default: "child" },
       });
 
-      await nextTick();
-      await vi.dynamicImportSettled();
-      await nextTick();
+      await settleInspectorLoad();
+      expect(view.container.querySelector("cpk-web-inspector")).toBeNull();
+      expect(defineWebInspector).not.toHaveBeenCalled();
+      view.unmount();
+    });
 
-      expect(wrapper.find("cpk-web-inspector").exists()).toBe(false);
+    it("does not render or load the inspector during SSR", async () => {
+      vi.stubGlobal("window", undefined);
+      const html = await renderToString(
+        createSSRApp(CopilotKitProvider, {
+          runtimeUrl: "/api/copilotkit",
+          enableInspector: true,
+        }),
+      );
+      await settleInspectorLoad();
+      expect(html).not.toContain("cpk-web-inspector");
+      expect(defineWebInspector).not.toHaveBeenCalled();
+    });
+
+    it("hydrates development markup before mounting the Inspector", async () => {
+      const props = {
+        runtimeUrl: "/api/copilotkit",
+        enableInspector: true,
+      };
+      const container = document.createElement("div");
+      document.body.appendChild(container);
+      const browserWindow = window;
+
+      vi.stubGlobal("window", undefined);
+      container.innerHTML = await renderToString(
+        createSSRApp(CopilotKitProvider, props),
+      );
+      vi.stubGlobal("window", browserWindow);
+
+      expect(container.innerHTML).not.toContain("cpk-web-inspector");
+      expect(defineWebInspector).not.toHaveBeenCalled();
+
+      const app = createSSRApp(CopilotKitProvider, props);
+      app.mount(container);
+
+      try {
+        await waitFor(() => {
+          expect(container.querySelector("cpk-web-inspector")).not.toBeNull();
+        });
+        const hydrationOutput = [
+          ...consoleWarnSpy.mock.calls,
+          ...consoleErrorSpy.mock.calls,
+        ]
+          .flat()
+          .join(" ");
+        expect(hydrationOutput).not.toContain("Hydration");
+      } finally {
+        app.unmount();
+        container.remove();
+      }
     });
   });
 });

package/src/v2/providers/keys.ts

@@ -23,3 +23,18 @@ export const CopilotChatConfigurationKey: InjectionKey<
 export const SandboxFunctionsKey: InjectionKey<
   Ref<readonly SandboxFunction[]>
 > = Symbol("SandboxFunctions");
+
+export type VueInspectorOpenRequest = {
+  messageId: string;
+  threadId?: string;
+  agentId?: string;
+};
+
+export type VueInspectorContextValue = {
+  isInspectorEnabled: ComputedRef<boolean>;
+  openInspector: (request: VueInspectorOpenRequest) => void;
+};
+
+export const InspectorKey: InjectionKey<VueInspectorContextValue> = Symbol(
+  "CopilotKitInspector",
+);