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

package/src/hooks/zod-parameters.ts

@@ -0,0 +1,162 @@
+import * as z from "zod";
+import { actionParametersToJsonSchema } from "@copilotkit/shared";
+import type { Parameter } from "@copilotkit/shared";
+
+/**
+ * Convert a JSON Schema to a Zod schema. Resolves `$ref` against `$defs` /
+ * `definitions`, maps `anyOf` / `oneOf` to unions, and falls back to
+ * `z.any()` for circular refs and unsupported types.
+ *
+ * Moved here from `@copilotkit/shared` in 2.0 so that shared does not depend
+ * on zod.
+ */
+export function convertJsonSchemaToZodSchema(
+  jsonSchema: any,
+  required: boolean,
+  definitions?: Record<string, any>,
+  visitedRefs?: Set<string>,
+): z.ZodSchema {
+  // Resolve $ref references
+  if (jsonSchema.$ref && definitions) {
+    const refPath = jsonSchema.$ref.replace(
+      /^#\/\$defs\/|^#\/definitions\//,
+      "",
+    );
+
+    // Detect circular $ref cycles
+    const refs = visitedRefs ?? new Set<string>();
+    if (refs.has(refPath)) {
+      console.warn(
+        `[CopilotKit] Circular $ref detected for "${refPath}" — falling back to z.any()`,
+      );
+      let schema = z.any();
+      if (jsonSchema.description) {
+        schema = schema.describe(jsonSchema.description);
+      }
+      return required ? schema : schema.optional();
+    }
+
+    const resolved = definitions[refPath];
+    if (resolved) {
+      // Clone the set so sibling branches don't see each other's visited refs
+      const nextRefs = new Set(refs);
+      nextRefs.add(refPath);
+      return convertJsonSchemaToZodSchema(
+        resolved,
+        required,
+        definitions,
+        nextRefs,
+      );
+    }
+  }
+
+  // Collect top-level definitions for $ref resolution
+  const defs = definitions ?? jsonSchema.$defs ?? jsonSchema.definitions;
+
+  // Handle null-union types like ["string", "null"]
+  if (Array.isArray(jsonSchema.type)) {
+    const types = jsonSchema.type as string[];
+    const hasNull = types.includes("null");
+    const nonNullTypes = types.filter((t: string) => t !== "null");
+    const resolvedType = nonNullTypes.length > 0 ? nonNullTypes[0] : "string";
+    const innerSchema = convertJsonSchemaToZodSchema(
+      { ...jsonSchema, type: resolvedType },
+      true,
+      defs,
+      visitedRefs,
+    );
+    let schema = hasNull ? z.union([innerSchema, z.null()]) : innerSchema;
+    if (jsonSchema.description) {
+      schema = schema.describe(jsonSchema.description);
+    }
+    return required ? schema : schema.optional();
+  }
+
+  // Handle anyOf / oneOf as z.union
+  const unionVariants = jsonSchema.anyOf ?? jsonSchema.oneOf;
+  if (Array.isArray(unionVariants) && unionVariants.length > 0) {
+    if (unionVariants.length === 1) {
+      return convertJsonSchemaToZodSchema(
+        unionVariants[0],
+        required,
+        defs,
+        visitedRefs,
+      );
+    }
+    const schemas = unionVariants.map((v: any) =>
+      convertJsonSchemaToZodSchema(v, true, defs, visitedRefs),
+    );
+    let schema = z.union(
+      schemas as [z.ZodSchema, z.ZodSchema, ...z.ZodSchema[]],
+    );
+    if (jsonSchema.description) {
+      schema = schema.describe(jsonSchema.description);
+    }
+    return required ? schema : schema.optional();
+  }
+
+  if (jsonSchema.type === "object") {
+    const spec: { [key: string]: z.ZodSchema } = {};
+
+    if (!jsonSchema.properties || !Object.keys(jsonSchema.properties).length) {
+      return !required ? z.object(spec).optional() : z.object(spec);
+    }
+
+    for (const [key, value] of Object.entries(jsonSchema.properties)) {
+      spec[key] = convertJsonSchemaToZodSchema(
+        value,
+        jsonSchema.required ? jsonSchema.required.includes(key) : false,
+        defs,
+        visitedRefs,
+      );
+    }
+    let schema = z.object(spec).describe(jsonSchema.description);
+    return required ? schema : schema.optional();
+  } else if (jsonSchema.type === "string") {
+    if (jsonSchema.enum && jsonSchema.enum.length > 0) {
+      let schema = z
+        .enum(jsonSchema.enum as [string, ...string[]])
+        .describe(jsonSchema.description);
+      return required ? schema : schema.optional();
+    }
+    let schema = z.string().describe(jsonSchema.description);
+    return required ? schema : schema.optional();
+  } else if (jsonSchema.type === "number" || jsonSchema.type === "integer") {
+    let schema = z.number().describe(jsonSchema.description);
+    return required ? schema : schema.optional();
+  } else if (jsonSchema.type === "boolean") {
+    let schema = z.boolean().describe(jsonSchema.description);
+    return required ? schema : schema.optional();
+  } else if (jsonSchema.type === "array") {
+    let itemSchema = convertJsonSchemaToZodSchema(
+      jsonSchema.items,
+      true,
+      defs,
+      visitedRefs,
+    );
+    let schema = z.array(itemSchema).describe(jsonSchema.description);
+    return required ? schema : schema.optional();
+  } else if (jsonSchema.type === "null") {
+    let schema = z.null().describe(jsonSchema.description);
+    return required ? schema : schema.optional();
+  }
+
+  // Fallback: accept any value rather than throwing
+  console.warn(
+    `[CopilotKit] Unsupported JSON schema type "${jsonSchema.type ?? "unknown"}" — falling back to z.any()`,
+  );
+  let schema = z.any();
+  if (jsonSchema.description) {
+    schema = schema.describe(jsonSchema.description);
+  }
+  return required ? schema : schema.optional();
+}
+
+/** Convert v1 `Parameter[]` action parameters to a Zod object schema. */
+export function getZodParameters<T extends [] | Parameter[] | undefined>(
+  parameters: T,
+): any {
+  if (!parameters) return z.object({});
+  const jsonParams = actionParametersToJsonSchema(parameters);
+  return convertJsonSchemaToZodSchema(jsonParams, true);
+}

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/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";