@copilotkit/vue 2.0.0-rc.7 → 2.0.0-rc.9

package/src/v2/components/A2UIMessageRenderer.ts

@@ -1,6 +1,6 @@
 import { computed, defineComponent, h } from "vue";
 import type { PropType } from "vue";
-import { z } from "zod";
+import * as z from "zod";
 import type { VueActivityMessageRenderer } from "../types";
 import type { A2UITheme } from "../types";
 import A2UISurfaceActivityRenderer from "./A2UISurfaceActivityRenderer.vue";
@@ -31,7 +31,7 @@ export type A2UIMessageRendererOptions = {
  * The `a2ui-surface` activity carries the WHOLE generative-UI lifecycle on one
  * stable messageId: pre-paint `status` ("building" | "retrying" | "failed")
  * with recovery detail, then `a2ui_operations` on paint. The states swap in
- * place, so the painted surface replaces the skeleton. `.passthrough()` keeps
+ * place, so the painted surface replaces the skeleton. `.loose()` keeps
  * the operations and any future fields.
  */
 const A2UISurfaceContentSchema = z
@@ -39,7 +39,7 @@ const A2UISurfaceContentSchema = z
     a2ui_operations: z.array(z.any()).optional(),
     ...A2UILifecycleFields,
   })
-  .passthrough();
+  .loose();
 
 export function createA2UIMessageRenderer(
   options: A2UIMessageRendererOptions,

package/src/v2/components/LicenseWarningBanner.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted } from "vue";
+import { ɵformatLabel } from "@copilotkit/core";
+import { useChatLabels } from "./chat/use-chat-labels";
 
 // Total reserved vertical space for the fixed license banner: banner height
 // (~36px) + bottom offset (8px) + visual gap above the chat input (~8px).
@@ -36,45 +38,59 @@ interface BannerSpec {
   actionUrl: string;
 }
 
+const labels = useChatLabels();
+
+function expiringMessage(days: number | undefined) {
+  if (days === undefined) return labels.value.licenseExpiringText;
+  const template =
+    days === 1
+      ? labels.value.licenseExpiringInDaysOne
+      : labels.value.licenseExpiringInDaysOther;
+  return ɵformatLabel(template, { days });
+}
+
 const spec = computed<BannerSpec | null>(() => {
+  const text = labels.value;
   switch (props.type) {
     case "no_license":
       return {
         severity: "info",
-        message: "Powered by CopilotKit",
-        actionLabel: "Get a license",
+        message: text.licensePoweredByText,
+        actionLabel: text.licenseGetLicenseLabel,
         actionUrl: "https://copilotkit.ai/pricing",
       };
     case "feature_unlicensed":
       return {
         severity: "warning",
-        message: `⚠ The "${props.featureName ?? ""}" feature requires a CopilotKit license.`,
-        actionLabel: "Get a license",
+        message: ɵformatLabel(text.licenseFeatureUnlicensedText, {
+          feature: props.featureName ?? "",
+        }),
+        actionLabel: text.licenseGetLicenseLabel,
         actionUrl: "https://copilotkit.ai/pricing",
       };
-    case "expiring": {
-      const days = props.graceRemaining;
-      const dayLabel = days === 1 ? "day" : "days";
+    case "expiring":
       return {
         severity: "warning",
-        message: `Your CopilotKit license expires in ${days} ${dayLabel}. Please renew.`,
-        actionLabel: "Renew",
+        message: expiringMessage(props.graceRemaining),
+        actionLabel: text.licenseRenewLabel,
         actionUrl: "https://dashboard.operations.copilotkit.ai",
       };
-    }
     case "expired":
       return {
         severity: "critical",
-        message: `Your CopilotKit license expired${props.expiryDate ? ` on ${props.expiryDate}` : ""}. Please renew at copilotkit.ai/pricing`,
-        actionLabel: "Renew now",
+        message: props.expiryDate
+          ? ɵformatLabel(text.licenseExpiredOnDateText, {
+              date: props.expiryDate,
+            })
+          : text.licenseExpiredText,
+        actionLabel: text.licenseRenewNowLabel,
         actionUrl: "https://copilotkit.ai/pricing",
       };
     case "invalid":
       return {
         severity: "critical",
-        message:
-          "Invalid CopilotKit license token. Please check your configuration.",
-        actionLabel: "Get a license",
+        message: text.licenseInvalidText,
+        actionLabel: text.licenseGetLicenseLabel,
         actionUrl: "https://copilotkit.ai/pricing",
       };
     default:

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

@@ -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.",
+    );
+  });
 });