@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.30

package/src/v2/components/A2UISurfaceActivityRenderer.vue

@@ -1,147 +1,112 @@
 <script setup lang="ts">
-import { computed, h, onBeforeUnmount, shallowRef, ref, watch } from "vue";
-import type { VNode } from "vue";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import type { ActivityMessage } from "@ag-ui/core";
 import type { A2UITheme } from "../types";
 import type { A2UIOperation } from "./a2ui";
-import { getOperationSurfaceId } from "./a2ui";
 import { useCopilotKit } from "../providers";
 import { MessageProcessor } from "@a2ui/web_core/v0_9";
 import type { SurfaceModel } from "@a2ui/web_core/v0_9";
+import { A2UIOperationApplier } from "@copilotkit/a2ui-renderer/engine";
+import { A2UISurfaceDiagnostics } from "@copilotkit/a2ui-renderer/engine-core";
+import { ɵrunA2UIAction, ɵtoA2UIClientEvent } from "@copilotkit/core";
+import type {
+  ɵA2UIActionAgent,
+  ɵA2UIActionInterceptor,
+} from "@copilotkit/core";
 import { vueBasicCatalog, A2uiSurface } from "./a2ui/index";
 import type { VueComponentImplementation } from "./a2ui/index";
 
-const DEFAULT_SURFACE_ID = "default";
-
 const props = defineProps<{
   activityType: string;
-  content: { operations: A2UIOperation[] };
+  content: { operations: readonly A2UIOperation[] };
   message: ActivityMessage;
-  agent?: object;
+  agent?: ɵA2UIActionAgent;
   theme?: A2UITheme;
   catalog?: any;
+  /** Intercepts a user action before it reaches the agent. */
+  onAction?: ɵA2UIActionInterceptor;
 }>();
 
-const { copilotkit } = useCopilotKit();
+const emit = defineEmits<{
+  /** After each batch of operations was applied. */
+  rendered: [];
+}>();
 
-// MessageProcessor from @a2ui/web_core — framework-agnostic
-// Use shallowRef to avoid Vue's deep UnwrapRef which strips private class members
-const processorRef =
-  shallowRef<MessageProcessor<VueComponentImplementation> | null>(null);
-// Version counter to trigger Vue reactivity on processor state changes
-const version = ref(0);
-// Error state
-const error = ref<string | null>(null);
-// Track last processed operations hash to avoid re-processing
-let lastOpsHash = "";
+const { copilotkit } = useCopilotKit();
 
-function getOrCreateProcessor(): MessageProcessor<VueComponentImplementation> {
-  if (!processorRef.value) {
+type Surface = SurfaceModel<VueComponentImplementation>;
+
+// One processor for all surfaces of the activity; the core-shared applier
+// validates the operations and applies only what is new in each snapshot.
+// shallowRef avoids Vue's deep UnwrapRef, which strips private class members.
+let processor: MessageProcessor<VueComponentImplementation> | null = null;
+let applier: A2UIOperationApplier<VueComponentImplementation> | null = null;
+const surfaces = shallowRef<readonly Surface[]>([]);
+const error = shallowRef<string | null>(null);
+const diagnostics =
+  process.env.NODE_ENV !== "production"
+    ? new A2UISurfaceDiagnostics({ warn: (message) => console.warn(message) })
+    : null;
+
+function getApplier() {
+  if (!processor || !applier) {
     const catalog = props.catalog ?? vueBasicCatalog;
-    processorRef.value = new MessageProcessor<VueComponentImplementation>(
+    const created = new MessageProcessor<VueComponentImplementation>(
       [catalog],
-      (action: unknown) => {
-        handleAction(action);
-      },
+      (action) =>
+        ɵrunA2UIAction({
+          message: ɵtoA2UIClientEvent(action),
+          agent: props.agent,
+          core: copilotkit.value,
+          onAction: props.onAction,
+        }),
     );
+    processor = created;
+    applier = new A2UIOperationApplier(created, catalog.id);
   }
-  return processorRef.value;
-}
-
-async function handleAction(message: unknown) {
-  if (!props.agent) return;
-  try {
-    copilotkit.value.setProperties({
-      ...copilotkit.value.properties,
-      a2uiAction: message,
-    });
-    await copilotkit.value.runAgent({ agent: props.agent as any });
-  } finally {
-    const { a2uiAction, ...rest } = copilotkit.value.properties ?? {};
-    copilotkit.value.setProperties(rest);
-  }
+  return applier;
 }
 
-function processOperations(operations: A2UIOperation[]) {
-  if (!operations?.length) return;
-
-  const hash = JSON.stringify(operations);
-  if (hash === lastOpsHash) return;
-  lastOpsHash = hash;
-
-  const processor = getOrCreateProcessor();
+function processOperations(operations: readonly A2UIOperation[]) {
+  const current = getApplier();
   try {
-    // Group operations by surface ID
-    const grouped = new Map<string, A2UIOperation[]>();
-    for (const op of operations) {
-      const surfaceId = getOperationSurfaceId(op) ?? DEFAULT_SURFACE_ID;
-      if (!grouped.has(surfaceId)) grouped.set(surfaceId, []);
-      grouped.get(surfaceId)!.push(op);
-    }
-
-    // For each surface, skip createSurface if the surface already exists
-    for (const [surfaceId, ops] of grouped) {
-      const existing = processor.model.getSurface(surfaceId);
-      const filtered = existing
-        ? ops.filter((op) => !(op as any)?.createSurface)
-        : ops;
-      processor.processMessages(filtered as any);
-    }
+    surfaces.value = current.apply(operations);
     error.value = null;
   } catch (err) {
     console.warn("[A2UI Vue] processMessages error:", err);
     error.value = err instanceof Error ? err.message : String(err);
+    surfaces.value = [];
+    return;
   }
-  version.value++;
+  if (processor) diagnostics?.check(operations, processor.model);
+  emit("rendered");
 }
 
-// Process operations on mount and when they change
+// A new catalog needs a new processor, rebuilt from the current operations.
 watch(
-  () => [props.content.operations, props.theme, props.catalog, props.agent],
+  () => props.catalog,
   () => {
-    processOperations(props.content.operations);
+    processor = null;
+    applier = null;
+    processOperations(props.content.operations ?? []);
   },
+);
+
+watch(
+  () => props.content.operations,
+  (operations) => processOperations(operations ?? []),
   { deep: true, immediate: true },
 );
 
 onBeforeUnmount(() => {
-  processorRef.value = null;
-  lastOpsHash = "";
+  diagnostics?.dispose();
+  processor = null;
+  applier = null;
 });
 
 const hasOperations = computed(
   () => (props.content.operations ?? []).length > 0,
 );
-
-// Compute the list of surfaces to render
-const surfaceEntries = computed(() => {
-  // Touch version to ensure reactivity
-  void version.value;
-
-  if (!processorRef.value) return [];
-
-  const entries: Array<{
-    surfaceId: string;
-    surface: SurfaceModel<VueComponentImplementation>;
-  }> = [];
-
-  // Group operations by surface to know which surfaces we expect
-  const grouped = new Map<string, A2UIOperation[]>();
-  for (const op of props.content.operations ?? []) {
-    const surfaceId = getOperationSurfaceId(op) ?? DEFAULT_SURFACE_ID;
-    if (!grouped.has(surfaceId)) grouped.set(surfaceId, []);
-    grouped.get(surfaceId)!.push(op);
-  }
-
-  for (const [surfaceId] of grouped) {
-    const surface = processorRef.value.model.getSurface(surfaceId);
-    if (surface) {
-      entries.push({ surfaceId, surface });
-    }
-  }
-
-  return entries;
-});
 </script>
 
 <template>
@@ -160,13 +125,13 @@ const surfaceEntries = computed(() => {
       data-testid="a2ui-activity-renderer"
     >
       <div
-        v-for="entry in surfaceEntries"
-        :key="entry.surfaceId"
+        v-for="surface in surfaces"
+        :key="surface.id"
         class="cpk-a2ui-message-surface-host"
-        :data-surface-id="entry.surfaceId"
+        :data-surface-id="surface.id"
       >
         <div class="a2ui-surface cpk-a2ui-message-surface">
-          <A2uiSurface :surface="entry.surface" />
+          <A2uiSurface :surface="surface" />
         </div>
       </div>
     </div>

package/src/v2/components/CopilotKitInspector.vue

@@ -4,9 +4,9 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import { onMounted, onUnmounted, shallowRef, useAttrs, watch } from "vue";
-import type { ObjectDirective } from "vue";
-import type { WebInspectorElement } from "@copilotkit/web-inspector";
+import { onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue";
+import { ɵmountInspector } from "@copilotkit/web-inspector/mount";
+import type { ɵInspectorMount } from "@copilotkit/web-inspector/mount";
 import type { CopilotKitCoreVue } from "../lib/vue-core";
 import type { VueInspectorOpenRequest } from "../providers/keys";
 
@@ -15,72 +15,125 @@ const props = defineProps<{
   openRequest?: VueInspectorOpenRequest | null;
 }>();
 
+const emit = defineEmits<{
+  "visibility-change": [visible: boolean];
+}>();
+
 const attrs = useAttrs();
-const inspectorTag = shallowRef<string | null>(null);
-const inspector = shallowRef<WebInspectorElement | null>(null);
-
-let isMounted = true;
-let configureInspector:
-  | ((
-      element: WebInspectorElement,
-      core: CopilotKitCoreVue | null,
-    ) => WebInspectorElement)
-  | null = null;
-
-const vConfigureInspector: ObjectDirective<WebInspectorElement, undefined> = {
-  created(element) {
-    configureInspector?.(element, props.core ?? null);
-    inspector.value = element;
-    if (props.openRequest) {
-      element.openInspector?.("message_toolbar", props.openRequest);
+const host = ref<HTMLSpanElement | null>(null);
+let mount: ɵInspectorMount | null = null;
+let appliedAttributes: Record<string, string> = {};
+const boundListeners = new Map<
+  string,
+  { eventName: string; listener: (event: Event) => void }
+>();
+
+function isListener(name: string, value: unknown) {
+  const isHandler = typeof value === "function" || Array.isArray(value);
+  return /^on[A-Z]/.test(name) && isHandler;
+}
+
+/** `onCpkInspectorVisibilityChange` listens to `cpk-inspector-visibility-change`, as in Vue. */
+function toEventName(name: string) {
+  return name
+    .slice(2)
+    .replace(/\B([A-Z])/g, "-$1")
+    .toLowerCase();
+}
+
+// Text attributes and listeners go to the Inspector element (the host is only
+// a mount point), so `data-testid` or `@cpk-inspector-visibility-change`
+// land where callers expect them.
+function toAttributes(source: Record<string, unknown>) {
+  const attributes: Record<string, string> = {};
+  for (const [name, value] of Object.entries(source)) {
+    if (typeof value === "string" || typeof value === "number") {
+      attributes[name] = String(value);
+    } else if (value === true) {
+      attributes[name] = "";
     }
-  },
-};
+  }
+  return attributes;
+}
+
+function callListener(name: string, event: Event) {
+  const handler = attrs[name];
+  const handlers = Array.isArray(handler) ? handler : [handler];
+  for (const candidate of handlers) {
+    if (typeof candidate === "function") candidate(event);
+  }
+}
+
+function syncListeners(element: Element) {
+  const names = Object.keys(attrs).filter((name) =>
+    isListener(name, attrs[name]),
+  );
+  for (const [name, bound] of boundListeners) {
+    if (names.includes(name)) continue;
+    element.removeEventListener(bound.eventName, bound.listener);
+    boundListeners.delete(name);
+  }
+  for (const name of names) {
+    if (boundListeners.has(name)) continue;
+    const bound = {
+      eventName: toEventName(name),
+      listener: (event: Event) => callListener(name, event),
+    };
+    element.addEventListener(bound.eventName, bound.listener);
+    boundListeners.set(name, bound);
+  }
+}
+
+function syncAttributes() {
+  const element = mount?.element;
+  if (!element) return;
+  const next = toAttributes(attrs);
+  for (const name of Object.keys(appliedAttributes)) {
+    if (!(name in next)) element.removeAttribute(name);
+  }
+  for (const [name, value] of Object.entries(next)) {
+    element.setAttribute(name, value);
+  }
+  appliedAttributes = next;
+  syncListeners(element);
+}
 
 onMounted(() => {
-  void import("@copilotkit/web-inspector")
-    .then((mod) => {
-      if (!isMounted) return;
-
-      mod.defineWebInspector?.();
-      configureInspector = (element, core) =>
-        mod.configureWebInspectorElement(element, core, {
-          development: process.env.NODE_ENV === "development",
-          framework: "vue",
-          sdkVersion,
-        });
-      inspectorTag.value = mod.WEB_INSPECTOR_TAG;
-    })
-    .catch((error: unknown) => {
-      console.error("Failed to load CopilotKit inspector:", error);
-    });
+  if (!host.value) return;
+  mount = ɵmountInspector(host.value, props.core ?? null, {
+    load: () => import("@copilotkit/web-inspector"),
+    notificationContext: {
+      development: process.env.NODE_ENV === "development",
+      framework: "vue",
+      sdkVersion,
+    },
+  });
+  mount.onVisibility((visible) => emit("visibility-change", visible));
+  mount.onElement(syncAttributes);
+  if (props.openRequest) mount.open(props.openRequest);
 });
 
-onUnmounted(() => {
-  isMounted = false;
-  inspector.value = null;
+onBeforeUnmount(() => {
+  boundListeners.clear();
+  mount?.dispose();
+  mount = null;
 });
 
 watch(
   () => props.core,
-  (core) => {
-    if (inspector.value) inspector.value.core = core ?? null;
-  },
+  (core) => mount?.setCore(core ?? null),
 );
 
 watch(
   () => props.openRequest,
   (request) => {
-    if (request) inspector.value?.openInspector?.("message_toolbar", request);
+    if (request) mount?.open(request);
   },
 );
+
+watch(() => ({ ...attrs }), syncAttributes);
 </script>
 
 <template>
-  <component
-    :is="inspectorTag"
-    v-if="inspectorTag"
-    v-bind="attrs"
-    v-configure-inspector
-  />
+  <span ref="host" style="display: contents" />
 </template>

package/src/v2/components/InlineFeatureWarning.vue

@@ -1,35 +1,34 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from "vue";
+import {
+  ɵINLINE_FEATURE_WARNING_STYLE,
+  ɵgetInlineFeatureWarningSpec,
+} from "@copilotkit/core";
+import { useChatLabels } from "./chat/use-chat-labels";
+
+const props = defineProps<{
   featureName: string;
 }>();
 
-const containerStyle = {
-  padding: "8px 12px",
-  backgroundColor: "#fffbeb",
-  border: "1px solid #fbbf24",
-  borderRadius: "6px",
-  fontSize: "13px",
-  color: "#92400e",
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-} as const;
-
-const linkStyle = {
-  color: "#b45309",
-  textDecoration: "underline",
-} as const;
+const labels = useChatLabels();
+const spec = computed(() =>
+  ɵgetInlineFeatureWarningSpec(props.featureName, labels.value),
+);
 </script>
 
 <template>
-  <div :style="containerStyle" data-testid="copilot-inline-feature-warning">
-    ⚠ The "{{ featureName }}" feature requires a CopilotKit license.
+  <div
+    :style="ɵINLINE_FEATURE_WARNING_STYLE.container"
+    data-testid="copilot-inline-feature-warning"
+  >
+    {{ spec.message }}
     <a
-      href="https://copilotkit.ai/pricing"
+      :href="spec.actionUrl"
       target="_blank"
       rel="noopener noreferrer"
-      :style="linkStyle"
+      :style="ɵINLINE_FEATURE_WARNING_STYLE.link"
     >
-      Get one at copilotkit.ai/pricing
+      {{ spec.actionLabel }}
     </a>
   </div>
 </template>

package/src/v2/components/LicenseWarningBanner.vue

@@ -1,21 +1,16 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted } from "vue";
-
-// Total reserved vertical space for the fixed license banner: banner height
-// (~36px) + bottom offset (8px) + visual gap above the chat input (~8px).
-const LICENSE_BANNER_OFFSET_PX = 52;
-const LICENSE_BANNER_OFFSET_VAR = "--copilotkit-license-banner-offset";
-
-type LicenseBannerType =
-  | "no_license"
-  | "expired"
-  | "expiring"
-  | "invalid"
-  | "feature_unlicensed";
+import {
+  ɵLICENSE_BANNER_STYLE,
+  ɵgetLicenseBannerSpec,
+  ɵreserveLicenseBannerOffset,
+} from "@copilotkit/core";
+import type { ɵLicenseBannerType } from "@copilotkit/core";
+import { useChatLabels } from "./chat/use-chat-labels";
 
 const props = withDefaults(
   defineProps<{
-    type: LicenseBannerType;
+    type: ɵLicenseBannerType;
     featureName?: string;
     expiryDate?: string;
     graceRemaining?: number;
@@ -29,152 +24,49 @@ const props = withDefaults(
   },
 );
 
-interface BannerSpec {
-  severity: "info" | "warning" | "critical";
-  message: string;
-  actionLabel: string;
-  actionUrl: string;
-}
-
-const spec = computed<BannerSpec | null>(() => {
-  switch (props.type) {
-    case "no_license":
-      return {
-        severity: "info",
-        message: "Powered by CopilotKit",
-        actionLabel: "Get a license",
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    case "feature_unlicensed":
-      return {
-        severity: "warning",
-        message: `⚠ The "${props.featureName ?? ""}" feature requires a CopilotKit license.`,
-        actionLabel: "Get a license",
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    case "expiring": {
-      const days = props.graceRemaining;
-      const dayLabel = days === 1 ? "day" : "days";
-      return {
-        severity: "warning",
-        message: `Your CopilotKit license expires in ${days} ${dayLabel}. Please renew.`,
-        actionLabel: "Renew",
-        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",
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    case "invalid":
-      return {
-        severity: "critical",
-        message:
-          "Invalid CopilotKit license token. Please check your configuration.",
-        actionLabel: "Get a license",
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    default:
-      return null;
-  }
-});
-
-const baseStyle = {
-  position: "fixed",
-  bottom: "8px",
-  left: "50%",
-  transform: "translateX(-50%)",
-  zIndex: 99999,
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "12px",
-  whiteSpace: "nowrap",
-  padding: "8px 16px",
-  fontSize: "13px",
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-  borderRadius: "6px",
-  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-} as const;
+const labels = useChatLabels();
 
-const severityStyle = computed(() => {
-  switch (spec.value?.severity) {
-    case "warning":
-      return {
-        backgroundColor: "#fffbeb",
-        border: "1px solid #fbbf24",
-        color: "#92400e",
-      };
-    case "critical":
-      return {
-        backgroundColor: "#fef2f2",
-        border: "1px solid #fca5a5",
-        color: "#991b1b",
-      };
-    default:
-      return {
-        backgroundColor: "#eff6ff",
-        border: "1px solid #93c5fd",
-        color: "#1e40af",
-      };
-  }
-});
+// Core picks the text, link, and severity; this component renders them.
+const spec = computed(() =>
+  ɵgetLicenseBannerSpec(props.type, labels.value, {
+    featureName: props.featureName,
+    expiryDate: props.expiryDate,
+    graceRemaining: props.graceRemaining,
+  }),
+);
 
 const containerStyle = computed(() => ({
-  ...baseStyle,
-  ...severityStyle.value,
+  ...ɵLICENSE_BANNER_STYLE.base,
+  ...ɵLICENSE_BANNER_STYLE.severity[spec.value.severity],
 }));
 
 // Publish the banner's reserved bottom offset so the chat input can lift
 // itself above it via padding-bottom: var(--copilotkit-license-banner-offset).
+let releaseOffset: (() => void) | undefined;
 onMounted(() => {
-  if (typeof document === "undefined") return;
-  document.documentElement.style.setProperty(
-    LICENSE_BANNER_OFFSET_VAR,
-    `${LICENSE_BANNER_OFFSET_PX}px`,
-  );
+  releaseOffset = ɵreserveLicenseBannerOffset();
 });
-
 onBeforeUnmount(() => {
-  if (typeof document === "undefined") return;
-  document.documentElement.style.removeProperty(LICENSE_BANNER_OFFSET_VAR);
+  releaseOffset?.();
+  releaseOffset = undefined;
 });
 </script>
 
 <template>
-  <div v-if="spec" :style="containerStyle" data-testid="copilot-license-banner">
+  <div :style="containerStyle" data-testid="copilot-license-banner">
     <span>{{ spec.message }}</span>
-    <div
-      :style="{
-        display: 'flex',
-        gap: '8px',
-        alignItems: 'center',
-      }"
-    >
+    <div :style="ɵLICENSE_BANNER_STYLE.actions">
       <a
         :href="spec.actionUrl"
         target="_blank"
         rel="noopener noreferrer"
-        :style="{
-          fontWeight: 600,
-          textDecoration: 'underline',
-          color: 'inherit',
-        }"
+        :style="ɵLICENSE_BANNER_STYLE.link"
       >
         {{ spec.actionLabel }}
       </a>
       <button
         v-if="props.onDismiss"
-        :style="{
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          color: 'inherit',
-          fontSize: '16px',
-        }"
+        :style="ɵLICENSE_BANNER_STYLE.dismiss"
         @click="props.onDismiss"
       >
         ×