@copilotkit/vue 2.0.0-rc.1 → 2.0.0-rc.11

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__/A2UIBasicCatalogColors.test.ts

@@ -1,7 +1,7 @@
-import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { ref } from "vue";
 import { render, waitFor } from "@testing-library/vue";
+import { stylesheet } from "@copilotkit/core/styles";
 import { createA2UIMessageRenderer } from "../A2UIMessageRenderer";
 import { CopilotKitKey } from "../../providers/keys";
 
@@ -173,16 +173,15 @@ describe("A2UI basic catalog colours", () => {
     );
   });
 
-  it("sets the variables from the dark theme in the chat stylesheet", () => {
-    const globalsCss = readFileSync("src/styles/globals.css", "utf8");
+  it("sets the variables from the dark theme in the injected stylesheet", () => {
     const darkBlock =
-      globalsCss.match(
-        /\.dark \[data-copilotkit\],\s*\[data-copilotkit\]\.dark \{([^}]*)\}/,
+      stylesheet.match(
+        /:where\(\.dark \[data-copilotkit\],\[data-copilotkit\]\.dark\)\{([^}]*)\}/,
       )?.[1] ?? "";
 
-    expect(darkBlock).toContain("--a2ui-color-surface: var(--card);");
-    expect(darkBlock).toContain("--a2ui-color-border: oklch(0.371 0 0);");
-    expect(darkBlock).toContain("--a2ui-color-muted: var(--muted-foreground);");
-    expect(darkBlock).toContain("--a2ui-color-error: #f87171;");
+    expect(darkBlock).toContain("--a2ui-color-surface: var(--card)");
+    expect(darkBlock).toContain("--a2ui-color-border: oklch(.371 0 0)");
+    expect(darkBlock).toContain("--a2ui-color-muted: var(--muted-foreground)");
+    expect(darkBlock).toContain("--a2ui-color-error: #f87171");
   });
 });

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__/A2UIMessageRenderer.test.ts

@@ -22,52 +22,79 @@ function copilotKitProvide() {
 }
 
 describe("createA2UIMessageRenderer", () => {
-  it("returns loading state when no operations exist", () => {
-    const renderer = createA2UIMessageRenderer({ theme: {} });
-    const { getByTestId } = render(renderer.render, {
-      props: {
-        activityType: "a2ui-surface",
-        content: {},
-        message: {},
-        agent: {},
-      },
+  const renderLifecycle = (
+    content: Record<string, unknown>,
+    options: Partial<Parameters<typeof createA2UIMessageRenderer>[0]> = {},
+  ) => {
+    const renderer = createA2UIMessageRenderer({ theme: {}, ...options });
+    return render(renderer.render, {
+      props: { activityType: "a2ui-surface", content, message: {}, agent: {} },
     });
-    expect(getByTestId("a2ui-loading")).not.toBeNull();
+  };
+
+  it("shows the 'Building interface' skeleton while there are no operations", () => {
+    const { container } = renderLifecycle({});
+    expect(container.textContent).toContain("Building interface");
+    expect(container.textContent).not.toContain("Generating UI");
   });
 
-  it("default loading fallback renders header dot, 'Generating UI...' label, and three pulsing skeleton bars", () => {
-    const renderer = createA2UIMessageRenderer({ theme: {} });
-    const { getByTestId, getAllByTestId, container } = render(renderer.render, {
-      props: {
-        activityType: "a2ui-surface",
-        content: {},
-        message: {},
-        agent: {},
-      },
+  it("shows the live token count while building", () => {
+    const { container } = renderLifecycle({
+      status: "building",
+      progressTokens: 97,
     });
+    expect(container.textContent).toContain("~97 tokens");
+  });
 
-    const root = getByTestId("a2ui-loading");
-    expect(root).not.toBeNull();
-    expect((root as HTMLElement).textContent ?? "").toContain(
-      "Generating UI...",
+  it("shows the retry state for status 'retrying'", () => {
+    const { container } = renderLifecycle({
+      status: "retrying",
+      attempt: 2,
+      maxAttempts: 3,
+    });
+    expect(container.textContent).toContain(
+      "Retrying generation… (2/3 attempts)",
     );
+  });
 
-    const dot = getByTestId("a2ui-loading-dot") as HTMLElement;
-    expect(dot.getAttribute("style") ?? "").toMatch(/cpk-a2ui-pulse/);
+  it("honours recovery.showAfterAttempts", () => {
+    const { container } = renderLifecycle(
+      { status: "retrying", attempt: 2, maxAttempts: 3 },
+      { recovery: { showAfterAttempts: 5, showAfterMs: 999999 } },
+    );
+    expect(container.textContent).toContain("Building interface");
+    expect(container.textContent).not.toContain("Retrying");
+  });
 
-    const bars = getAllByTestId("a2ui-loading-bar") as HTMLElement[];
-    expect(bars).toHaveLength(3);
+  it("shows the failure card for status 'failed', with details per recovery.debugExposure", () => {
+    const { container } = renderLifecycle(
+      { status: "failed", error: "boom", attempts: [] },
+      { recovery: { debugExposure: "hidden" } },
+    );
+    expect(
+      container.querySelector(".cpk-a2ui-recovery-failure")?.textContent,
+    ).toContain("Couldn't generate the UI");
+    expect(container.querySelector("details")).toBeNull();
+  });
 
-    const widthMatches = bars.map((bar) => {
-      const style = bar.getAttribute("style") ?? "";
-      const match = style.match(/width:\s*([\d.]+)%/);
-      expect(style).toMatch(/cpk-a2ui-pulse/);
-      return match ? Number(match[1]) : null;
-    });
-    expect(widthMatches).toEqual([80, 60, 40]);
+  it("lets a server-stamped debugExposure win over the option", () => {
+    const { container } = renderLifecycle(
+      { status: "failed", error: "boom", debugExposure: "verbose" },
+      { recovery: { debugExposure: "hidden" } },
+    );
+    expect(container.querySelector("details")?.hasAttribute("open")).toBe(true);
+  });
 
-    const styleTag = container.querySelector("style");
-    expect(styleTag?.textContent ?? "").toContain("@keyframes cpk-a2ui-pulse");
+  it("shows the failure card instead of a custom loading component", () => {
+    const CustomLoading = defineComponent({
+      setup: () => () => h("div", { "data-testid": "custom-loading" }),
+    });
+    const { container, queryByTestId } = renderLifecycle(
+      { status: "failed" },
+      { loadingComponent: CustomLoading },
+    );
+    expect(queryByTestId("custom-loading")).toBeNull();
+    expect(container.textContent).toContain("Couldn't generate the UI");
   });
 
   it("renders custom loading component when provided", () => {

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

@@ -20,4 +20,24 @@ describe("LicenseWarningBanner", () => {
 
     expect(wrapper.find("button").exists()).toBe(false);
   });
+
+  it("says the license expires soon when the day count is unknown", () => {
+    const wrapper = mount(LicenseWarningBanner, {
+      props: { type: "expiring" },
+    });
+
+    expect(wrapper.get("span").text()).toBe(
+      "Your CopilotKit license expires soon. Please renew.",
+    );
+  });
+
+  it("counts the days left before the license expires", () => {
+    const wrapper = mount(LicenseWarningBanner, {
+      props: { type: "expiring", graceRemaining: 1 },
+    });
+
+    expect(wrapper.get("span").text()).toBe(
+      "Your CopilotKit license expires in 1 day. Please renew.",
+    );
+  });
 });