@copilotkit/vue 2.0.0-rc.2 → 2.0.0-rc.20

package/src/v2/components/OpenGenerativeUIRenderer.ts

@@ -1,14 +1,28 @@
-import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch,
+} from "vue";
 import type { PropType } from "vue";
-import { z } from "zod";
-import { ToolCallStatus } from "@copilotkit/core";
+import * as z from "zod";
 import {
-  processPartialHtml,
-  extractCompleteStyles,
-} from "../lib/processPartialHtml";
+  OPEN_GENERATIVE_UI_ACTIVITY_TYPE,
+  ToolCallStatus,
+  ɵOpenGenerativeUIController,
+} from "@copilotkit/core";
+import type {
+  GenerateSandboxedUiArgs,
+  OpenGenerativeUIContent,
+} from "@copilotkit/core";
 import { useSandboxFunctions } from "../providers/SandboxFunctionsContext";
 
-export const OpenGenerativeUIActivityType = "open-generative-ui";
+export type { GenerateSandboxedUiArgs, OpenGenerativeUIContent };
+
+export const OpenGenerativeUIActivityType = OPEN_GENERATIVE_UI_ACTIVITY_TYPE;
 
 export const OpenGenerativeUIContentSchema = z.object({
   initialHeight: z.number().optional(),
@@ -21,11 +35,7 @@ export const OpenGenerativeUIContentSchema = z.object({
   jsFunctionsComplete: z.boolean().optional(),
   jsExpressions: z.array(z.string()).optional(),
   jsExpressionsComplete: z.boolean().optional(),
-});
-
-export type OpenGenerativeUIContent = z.infer<
-  typeof OpenGenerativeUIContentSchema
->;
+}) satisfies z.ZodType<OpenGenerativeUIContent>;
 
 export const GenerateSandboxedUiArgsSchema = z.object({
   initialHeight: z.number().optional(),
@@ -34,68 +44,12 @@ export const GenerateSandboxedUiArgsSchema = z.object({
   html: z.string().optional(),
   jsFunctions: z.string().optional(),
   jsExpressions: z.array(z.string()).optional(),
-});
-
-export type GenerateSandboxedUiArgs = z.infer<
-  typeof GenerateSandboxedUiArgsSchema
->;
-
-function shouldFlushImmediately(
-  previous: OpenGenerativeUIContent | null,
-  next: OpenGenerativeUIContent,
-): boolean {
-  if (next.cssComplete && (!previous || !previous.cssComplete)) return true;
-  if (next.htmlComplete) return true;
-  if (next.generating === false) return true;
-  if (next.jsFunctions && (!previous || !previous.jsFunctions)) return true;
-  if (
-    (next.jsExpressions?.length ?? 0) > (previous?.jsExpressions?.length ?? 0)
-  )
-    return true;
-  if (next.html?.length && (!previous || !previous.html?.length)) return true;
-  return false;
-}
-
-function ensureHead(html: string): string {
-  if (/<head[\s>]/i.test(html)) return html;
-  return `<head></head>${html}`;
-}
-
-function injectCssIntoHtml(html: string, css: string): string {
-  const headCloseIdx = html.indexOf("</head>");
-  if (headCloseIdx !== -1) {
-    return (
-      html.slice(0, headCloseIdx) +
-      `<style>${css}</style>` +
-      html.slice(headCloseIdx)
-    );
-  }
-  return `<head><style>${css}</style></head>${html}`;
-}
-
-type SandboxInstance = {
-  iframe: HTMLIFrameElement;
-  promise: Promise<unknown>;
-  run: (code: string | Function) => Promise<unknown>;
-  destroy: () => void;
-};
-
-type WebsandboxModule = {
-  create: (
-    localApi: Record<string, unknown>,
-    options: {
-      frameContainer: HTMLElement;
-      frameContent: string;
-      allowAdditionalAttributes: string;
-    },
-  ) => SandboxInstance;
-};
-
-async function loadWebsandbox(): Promise<WebsandboxModule> {
-  const mod = (await import("@jetbrains/websandbox")) as any;
-  return (mod.default?.default ?? mod.default) as WebsandboxModule;
-}
+}) satisfies z.ZodType<GenerateSandboxedUiArgs>;
 
+/**
+ * Renders Open Generative UI content. The core controller throttles the
+ * content and runs the websandbox iframes inside the container div.
+ */
 export const OpenGenerativeUIRenderer = defineComponent({
   name: "OpenGenerativeUIRenderer",
   props: {
@@ -107,307 +61,32 @@ export const OpenGenerativeUIRenderer = defineComponent({
   setup(props) {
     const sandboxFunctions = useSandboxFunctions();
     const containerRef = ref<HTMLElement | null>(null);
-    const throttledContent = ref<OpenGenerativeUIContent>(props.content);
-    const latestContent = ref<OpenGenerativeUIContent>(props.content);
-    const throttleTimer = ref<number | null>(null);
-    const sandboxRef = ref<SandboxInstance | null>(null);
-    const previewSandboxRef = ref<SandboxInstance | null>(null);
-    const sandboxReady = ref(false);
-    const previewReady = ref(false);
-    const executedExpressionIndex = ref(0);
-    const jsFunctionsInjected = ref(false);
-    const pendingQueue = ref<string[]>([]);
-
-    const localApi = computed(() => {
-      const api: Record<string, unknown> = {};
-      for (const fn of sandboxFunctions.value) {
-        api[fn.name] = fn.handler;
-      }
-      return api;
+    const controller = new ɵOpenGenerativeUIController();
+    controller.setContent(props.content);
+    const state = shallowRef(controller.getState());
+    const unsubscribe = controller.subscribe(() => {
+      state.value = controller.getState();
     });
 
     watch(
       () => props.content,
-      (next) => {
-        latestContent.value = next;
-        if (shouldFlushImmediately(throttledContent.value, next)) {
-          if (throttleTimer.value !== null) {
-            window.clearTimeout(throttleTimer.value);
-            throttleTimer.value = null;
-          }
-          throttledContent.value = next;
-          return;
-        }
-        if (throttleTimer.value === null) {
-          throttleTimer.value = window.setTimeout(() => {
-            throttledContent.value = latestContent.value;
-            throttleTimer.value = null;
-          }, 1000);
-        }
-      },
-      { immediate: true },
+      (content) => controller.setContent(content),
     );
-
-    onBeforeUnmount(() => {
-      if (throttleTimer.value !== null) {
-        window.clearTimeout(throttleTimer.value);
-      }
-    });
-
-    const partialHtml = computed(() => {
-      if (throttledContent.value.htmlComplete) return undefined;
-      if (!throttledContent.value.html?.length) return undefined;
-      return throttledContent.value.html.join("");
-    });
-    const previewBody = computed(() =>
-      partialHtml.value ? processPartialHtml(partialHtml.value) : undefined,
-    );
-    const previewStyles = computed(() =>
-      partialHtml.value ? extractCompleteStyles(partialHtml.value) : "",
-    );
-    const fullHtml = computed(() =>
-      throttledContent.value.htmlComplete && throttledContent.value.html?.length
-        ? throttledContent.value.html.join("")
-        : undefined,
-    );
-    const css = computed(() =>
-      throttledContent.value.cssComplete
-        ? throttledContent.value.css
-        : undefined,
-    );
-    const hasPreview = computed(
-      () =>
-        !!throttledContent.value.cssComplete &&
-        !!previewBody.value &&
-        previewBody.value.trim().length > 0,
-    );
-    const hasVisibleSandbox = computed(
-      () => !!fullHtml.value || hasPreview.value,
-    );
-    const resolvedHeight = computed(
-      () => `${throttledContent.value.initialHeight ?? 200}px`,
-    );
-
-    const destroyPreview = () => {
-      if (previewSandboxRef.value) {
-        previewSandboxRef.value.destroy();
-        previewSandboxRef.value = null;
-      }
-      previewReady.value = false;
-    };
-
-    const destroyFinal = () => {
-      if (sandboxRef.value) {
-        sandboxRef.value.destroy();
-        sandboxRef.value = null;
-      }
-      sandboxReady.value = false;
-      pendingQueue.value = [];
-      executedExpressionIndex.value = 0;
-      jsFunctionsInjected.value = false;
-    };
-
     watch(
-      [
-        hasPreview,
-        fullHtml,
-        css,
-        previewBody,
-        previewStyles,
-        () => containerRef.value,
-      ],
-      async ([previewVisible, htmlComplete], _previous, onCleanup) => {
-        if (!previewVisible || htmlComplete || !containerRef.value) return;
-        if (previewSandboxRef.value) return;
-
-        let cancelled = false;
-        try {
-          const Websandbox = await loadWebsandbox();
-          if (cancelled || !containerRef.value) return;
-
-          const sandbox = Websandbox.create(
-            {},
-            {
-              frameContainer: containerRef.value,
-              frameContent: "<head></head><body></body>",
-              allowAdditionalAttributes: "",
-            },
-          );
-          previewSandboxRef.value = sandbox;
-          sandbox.iframe.setAttribute(
-            "data-testid",
-            "open-generative-ui-preview-sandbox",
-          );
-          sandbox.iframe.style.width = "100%";
-          sandbox.iframe.style.height = "100%";
-          sandbox.iframe.style.border = "none";
-          sandbox.iframe.style.backgroundColor = "transparent";
-
-          sandbox.promise.then(() => {
-            if (cancelled || !previewSandboxRef.value) return;
-            previewReady.value = true;
-            void sandbox.run(
-              "var s=document.createElement('style');s.textContent='html, body { overflow: hidden !important; }';document.head.appendChild(s);",
-            );
-          });
-        } catch (error) {
-          console.error(
-            "[OpenGenerativeUI] Failed to load sandbox module:",
-            error,
-          );
-        }
-
-        onCleanup(() => {
-          cancelled = true;
-        });
-      },
-      { immediate: true },
-    );
-
-    watch(
-      [previewBody, previewStyles, css, previewReady],
-      ([body, styles, cssText, ready]) => {
-        if (!previewSandboxRef.value || !ready) return;
-        const headParts: string[] = [];
-        if (cssText) headParts.push(`<style>${cssText}</style>`);
-        if (styles) headParts.push(styles);
-        if (headParts.length) {
-          void previewSandboxRef.value.run(
-            `document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`,
-          );
-        }
-        if (body) {
-          void previewSandboxRef.value.run(
-            `document.body.innerHTML = ${JSON.stringify(body)}`,
-          );
-        }
-      },
+      sandboxFunctions,
+      (functions) => controller.setSandboxFunctions(functions),
       { immediate: true },
     );
-
-    watch(
-      [fullHtml, css, localApi, () => containerRef.value],
-      async ([html, cssText, api], _previous, onCleanup) => {
-        destroyFinal();
-        if (!html || !containerRef.value) return;
-        destroyPreview();
-
-        let cancelled = false;
-        try {
-          const Websandbox = await loadWebsandbox();
-          if (cancelled || !containerRef.value) return;
-          const htmlWithHead = ensureHead(html);
-          const htmlWithCss = cssText
-            ? injectCssIntoHtml(htmlWithHead, cssText)
-            : htmlWithHead;
-          const sandbox = Websandbox.create(api, {
-            frameContainer: containerRef.value,
-            frameContent: htmlWithCss,
-            allowAdditionalAttributes: "",
-          });
-          sandboxRef.value = sandbox;
-          sandbox.iframe.setAttribute(
-            "data-testid",
-            "open-generative-ui-final-sandbox",
-          );
-          sandbox.iframe.style.width = "100%";
-          sandbox.iframe.style.height = "100%";
-          sandbox.iframe.style.border = "none";
-          sandbox.iframe.style.backgroundColor = "transparent";
-
-          sandbox.promise.then(() => {
-            if (cancelled || !sandboxRef.value) return;
-            sandboxReady.value = true;
-            void sandbox.run(
-              "var s=document.createElement('style');s.textContent='html, body { overflow: hidden !important; }';document.head.appendChild(s);",
-            );
-            const functionsCode = throttledContent.value.jsFunctions;
-            if (functionsCode && !jsFunctionsInjected.value) {
-              jsFunctionsInjected.value = true;
-              pendingQueue.value.unshift(functionsCode);
-            }
-            const expressions = throttledContent.value.jsExpressions;
-            if (expressions?.length) {
-              const startIndex = executedExpressionIndex.value;
-              if (startIndex < expressions.length) {
-                pendingQueue.value.push(...expressions.slice(startIndex));
-                executedExpressionIndex.value = expressions.length;
-              }
-            }
-            const queue = [...pendingQueue.value];
-            pendingQueue.value = [];
-            for (const code of queue) {
-              void sandbox.run(code);
-            }
-          });
-        } catch (error) {
-          console.error(
-            "[OpenGenerativeUI] Failed to load sandbox module:",
-            error,
-          );
-        }
-
-        onCleanup(() => {
-          cancelled = true;
-        });
-      },
-      { immediate: true },
-    );
-
-    watch(
-      () => throttledContent.value.jsFunctions,
-      (functionsCode) => {
-        if (!functionsCode || jsFunctionsInjected.value) return;
-        jsFunctionsInjected.value = true;
-        if (sandboxReady.value && sandboxRef.value) {
-          void sandboxRef.value.run(functionsCode);
-        } else {
-          pendingQueue.value.push(functionsCode);
-        }
-      },
-    );
-
-    watch(
-      () => throttledContent.value.jsExpressions,
-      (expressions) => {
-        if (!expressions?.length) return;
-        const startIndex = executedExpressionIndex.value;
-        if (startIndex >= expressions.length) return;
-        const newExpressions = expressions.slice(startIndex);
-        executedExpressionIndex.value = expressions.length;
-        if (sandboxReady.value && sandboxRef.value) {
-          for (const expression of newExpressions) {
-            void sandboxRef.value.run(expression);
-          }
-        } else {
-          pendingQueue.value.push(...newExpressions);
-        }
-      },
-      { deep: true },
-    );
-
-    const isGenerating = computed(
-      () => throttledContent.value.generating !== false,
-    );
-    watch(
-      [hasPreview, fullHtml],
-      ([previewVisible, html]) => {
-        if (html) destroyPreview();
-        if (!previewVisible) destroyPreview();
-      },
-      { immediate: true },
-    );
-
+    onMounted(() => controller.setHost(containerRef.value));
     onBeforeUnmount(() => {
-      if (throttleTimer.value !== null) {
-        window.clearTimeout(throttleTimer.value);
-      }
-      destroyPreview();
-      destroyFinal();
+      unsubscribe();
+      controller.destroy();
     });
 
-    return () =>
-      h(
+    return () => {
+      const { phase, generating, height } = state.value;
+      const hasVisibleSandbox = phase !== "placeholder";
+      return h(
         "div",
         {
           ref: containerRef,
@@ -415,20 +94,18 @@ export const OpenGenerativeUIRenderer = defineComponent({
           style: {
             position: "relative",
             width: "100%",
-            height: resolvedHeight.value,
+            height: `${height}px`,
             borderRadius: "8px",
-            backgroundColor: hasVisibleSandbox.value
-              ? "transparent"
-              : "#f5f5f5",
-            border: hasVisibleSandbox.value ? "none" : "1px solid #e0e0e0",
+            backgroundColor: hasVisibleSandbox ? "transparent" : "#f5f5f5",
+            border: hasVisibleSandbox ? "none" : "1px solid #e0e0e0",
             overflow: "hidden",
-            display: hasVisibleSandbox.value ? "block" : "flex",
-            alignItems: hasVisibleSandbox.value ? undefined : "center",
-            justifyContent: hasVisibleSandbox.value ? undefined : "center",
+            display: hasVisibleSandbox ? "block" : "flex",
+            alignItems: hasVisibleSandbox ? undefined : "center",
+            justifyContent: hasVisibleSandbox ? undefined : "center",
           },
         },
         [
-          !hasVisibleSandbox.value
+          !hasVisibleSandbox
             ? h("div", { "data-testid": "open-generative-ui-placeholder" }, [
                 h(
                   "svg",
@@ -461,7 +138,7 @@ export const OpenGenerativeUIRenderer = defineComponent({
                 ),
               ])
             : null,
-          isGenerating.value
+          generating
             ? h("div", {
                 "data-testid": "open-generative-ui-progress-overlay",
                 style: {
@@ -473,6 +150,7 @@ export const OpenGenerativeUIRenderer = defineComponent({
             : null,
         ],
       );
+    };
   },
 });
 

package/src/v2/components/__tests__/A2UICatalogContext.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { z } from "zod";
+import { z } from "zod-v3";
 import { Catalog } from "@a2ui/web_core/v0_9";
 import type { ComponentApi } from "@a2ui/web_core/v0_9";
 import { buildCatalogContextValue } from "../a2ui/A2UICatalogContext";

package/src/v2/components/__tests__/LicenseWarningBanner.test.ts

@@ -1,7 +1,24 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, it, vi } from "vitest";
+import { defineComponent, h } from "vue";
+import type { CopilotChatLabels } from "@copilotkit/core";
+import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
+import InlineFeatureWarning from "../InlineFeatureWarning.vue";
 import LicenseWarningBanner from "../LicenseWarningBanner.vue";
 
+/** Mounts `child` inside a chat configuration with `labels`. */
+function mountWithLabels(
+  labels: Partial<CopilotChatLabels>,
+  child: () => ReturnType<typeof h>,
+) {
+  const Host = defineComponent({
+    setup: () => () =>
+      h(CopilotChatConfigurationProvider, { labels }, { default: child }),
+  });
+  return mount(Host);
+}
+
+// The banner text rules are covered next to core's ɵgetLicenseBannerSpec.
 describe("LicenseWarningBanner", () => {
   it("reactively renders and invokes the optional dismiss callback", async () => {
     const onDismiss = vi.fn();
@@ -20,4 +37,47 @@ describe("LicenseWarningBanner", () => {
 
     expect(wrapper.find("button").exists()).toBe(false);
   });
+
+  it("shows the core spec's text and link", () => {
+    const wrapper = mount(LicenseWarningBanner, {
+      props: { type: "expiring", graceRemaining: 1 },
+    });
+
+    expect(wrapper.get("span").text()).toBe(
+      "Your CopilotKit license expires in 1 day. Please renew.",
+    );
+    expect(wrapper.get("a").attributes("href")).toBe(
+      "https://dashboard.operations.copilotkit.ai",
+    );
+  });
+
+  it("uses the configured chat labels", () => {
+    const wrapper = mountWithLabels(
+      { licenseInvalidText: "Token ungültig" },
+      () => h(LicenseWarningBanner, { type: "invalid" }),
+    );
+
+    expect(wrapper.get("span").text()).toBe("Token ungültig");
+  });
+});
+
+describe("InlineFeatureWarning", () => {
+  it("shows the default feature-unlicensed label", () => {
+    const wrapper = mount(InlineFeatureWarning, {
+      props: { featureName: "Chat" },
+    });
+
+    expect(wrapper.text()).toContain(
+      '⚠ The "Chat" feature requires a CopilotKit license.',
+    );
+  });
+
+  it("uses the configured feature-unlicensed label", () => {
+    const wrapper = mountWithLabels(
+      { licenseFeatureUnlicensedText: "{feature} braucht eine Lizenz." },
+      () => h(InlineFeatureWarning, { featureName: "Chat" }),
+    );
+
+    expect(wrapper.text()).toContain("Chat braucht eine Lizenz.");
+  });
 });

package/src/v2/components/__tests__/OpenGenerativeUIRenderer.test.ts

@@ -1,4 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type * as CoreModule from "@copilotkit/core";
 import { render } from "@testing-library/vue";
 import { ref } from "vue";
 import type { Ref } from "vue";
@@ -37,12 +38,25 @@ const mockCreate = vi.fn<MockCreateFn>(() => ({
   destroy: mockDestroy,
 }));
 
-vi.mock("@jetbrains/websandbox", () => ({
-  default: {
-    create: (localApi: Record<string, unknown>, options: SandboxOptions) =>
-      mockCreate(localApi, options),
-  },
-}));
+// Run the real core controller against a fake websandbox
+vi.mock("@copilotkit/core", async (importOriginal) => {
+  const actual = await importOriginal<typeof CoreModule>();
+  class TestOpenGenerativeUIController
+    extends actual.ɵOpenGenerativeUIController
+  {
+    constructor() {
+      super({
+        loadWebsandbox: async () => ({
+          create: (localApi, options) => mockCreate(localApi, options),
+        }),
+      });
+    }
+  }
+  return {
+    ...actual,
+    ɵOpenGenerativeUIController: TestOpenGenerativeUIController,
+  };
+});
 
 async function flushImport() {
   await new Promise((resolve) => setTimeout(resolve, 0));
@@ -178,6 +192,41 @@ describe("OpenGenerativeUIRenderer", () => {
     expect(options.frameContent).toContain("v2");
   });
 
+  it("sizes the container to the height the final sandbox reports", async () => {
+    const iframe = document.createElement("iframe");
+    mockCreate.mockImplementationOnce((_localApi, options) => {
+      (options.frameContainer as HTMLElement).appendChild(iframe);
+      return {
+        iframe,
+        promise: Promise.resolve(),
+        run: mockRun,
+        destroy: mockDestroy,
+      };
+    });
+    const { getByTestId } = renderRenderer({
+      initialHeight: 150,
+      html: ["<body><p>Chart</p></body>"],
+      htmlComplete: true,
+      generating: false,
+    });
+    await flushImport();
+    expect(getByTestId("open-generative-ui-renderer").style.height).toBe(
+      "150px",
+    );
+
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        source: iframe.contentWindow,
+        data: { type: "__ck_resize", height: 420 },
+      }),
+    );
+    await flushImport();
+
+    expect(getByTestId("open-generative-ui-renderer").style.height).toBe(
+      "420px",
+    );
+  });
+
   it("destroys sandbox on unmount", async () => {
     const mounted = renderRenderer({
       html: ["<head></head><body>bye</body>"],

package/src/v2/components/a2ui/A2UIBuiltInToolCallRenderer.ts

@@ -1,6 +1,6 @@
 import { watch } from "vue";
 import type { ShallowRef } from "vue";
-import { z } from "zod";
+import * as z from "zod";
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";