@copilotkit/vue 1.57.1

package/src/v2/components/A2UIMessageRenderer.ts

@@ -0,0 +1,125 @@
+import { computed, defineComponent, h, type PropType } from "vue";
+import { z } from "zod";
+import type { VueActivityMessageRenderer } from "../types";
+import type { A2UITheme } from "../types";
+import A2UISurfaceActivityRenderer from "./A2UISurfaceActivityRenderer.vue";
+
+const A2UI_OPERATIONS_KEY = "a2ui_operations";
+
+export type A2UIMessageRendererOptions = {
+  theme: A2UITheme;
+  catalog?: any;
+  loadingComponent?: unknown;
+};
+
+/**
+ * Default loading component shown while an A2UI surface is generating.
+ * Mirrors React's `DefaultA2UILoading` in
+ * `packages/react-core/src/v2/a2ui/A2UIMessageRenderer.tsx`:
+ * an animated dot + "Generating UI..." label + three shimmer bars
+ * (80% / 60% / 40% widths) with staggered `cpk-a2ui-pulse` opacity animation.
+ */
+const DefaultA2UILoading = defineComponent({
+  name: "DefaultA2UILoading",
+  setup() {
+    const barWidths = [0.8, 0.6, 0.4] as const;
+    return () =>
+      h(
+        "div",
+        {
+          class:
+            "cpk:flex cpk:flex-col cpk:gap-3 cpk:rounded-xl cpk:border cpk:border-gray-100 cpk:bg-gray-50/50 cpk:p-5",
+          style: { minHeight: "120px" },
+          "data-testid": "a2ui-loading",
+        },
+        [
+          h("div", { class: "cpk:flex cpk:items-center cpk:gap-2" }, [
+            h("div", {
+              class: "cpk:h-3 cpk:w-3 cpk:rounded-full cpk:bg-gray-200",
+              style: {
+                animation: "cpk-a2ui-pulse 1.5s ease-in-out infinite",
+              },
+              "data-testid": "a2ui-loading-dot",
+            }),
+            h(
+              "span",
+              {
+                class: "cpk:text-xs cpk:font-medium cpk:text-gray-400",
+              },
+              "Generating UI...",
+            ),
+          ]),
+          h(
+            "div",
+            { class: "cpk:flex cpk:flex-col cpk:gap-2" },
+            barWidths.map((width, i) =>
+              h("div", {
+                key: i,
+                class: "cpk:h-3 cpk:rounded cpk:bg-gray-200/70",
+                style: {
+                  width: `${width * 100}%`,
+                  animation: `cpk-a2ui-pulse 1.5s ease-in-out ${i * 0.15}s infinite`,
+                },
+                "data-testid": "a2ui-loading-bar",
+              }),
+            ),
+          ),
+          h(
+            "style",
+            {},
+            `@keyframes cpk-a2ui-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}`,
+          ),
+        ],
+      );
+  },
+});
+
+export function createA2UIMessageRenderer(
+  options: A2UIMessageRendererOptions,
+): VueActivityMessageRenderer<any> {
+  return {
+    activityType: "a2ui-surface",
+    content: z.any(),
+    render: defineComponent({
+      name: "A2UIMessageRendererHost",
+      props: {
+        activityType: { type: String, required: true },
+        content: { type: Object as PropType<any>, required: true },
+        message: { type: Object as PropType<any>, required: true },
+        agent: {
+          type: Object as PropType<any>,
+          required: false,
+          default: undefined,
+        },
+      },
+      setup(props) {
+        const operations = computed(() =>
+          Array.isArray(props.content?.[A2UI_OPERATIONS_KEY])
+            ? props.content[A2UI_OPERATIONS_KEY]
+            : [],
+        );
+
+        return () => {
+          if (operations.value.length === 0) {
+            if (options.loadingComponent) {
+              return h(options.loadingComponent as any);
+            }
+            return h(DefaultA2UILoading);
+          }
+
+          return h(A2UISurfaceActivityRenderer, {
+            activityType: "a2ui-surface",
+            content: { operations: operations.value },
+            message: props.message,
+            agent: props.agent,
+            theme: options.theme,
+            catalog: options.catalog,
+          });
+        };
+      },
+    }),
+  };
+}

package/src/v2/components/A2UISurfaceActivityRenderer.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import {
+  computed,
+  h,
+  onBeforeUnmount,
+  shallowRef,
+  ref,
+  watch,
+  type VNode,
+} 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, type SurfaceModel } from "@a2ui/web_core/v0_9";
+import {
+  vueBasicCatalog,
+  A2uiSurface,
+  type VueComponentImplementation,
+} from "./a2ui/index";
+
+const DEFAULT_SURFACE_ID = "default";
+
+const props = defineProps<{
+  activityType: string;
+  content: { operations: A2UIOperation[] };
+  message: ActivityMessage;
+  agent?: object;
+  theme?: A2UITheme;
+  catalog?: any;
+}>();
+
+const { copilotkit } = useCopilotKit();
+
+// 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 = "";
+
+function getOrCreateProcessor(): MessageProcessor<VueComponentImplementation> {
+  if (!processorRef.value) {
+    const catalog = props.catalog ?? vueBasicCatalog;
+    processorRef.value = new MessageProcessor<VueComponentImplementation>(
+      [catalog],
+      (action: unknown) => {
+        handleAction(action);
+      },
+    );
+  }
+  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);
+  }
+}
+
+function processOperations(operations: A2UIOperation[]) {
+  if (!operations?.length) return;
+
+  const hash = JSON.stringify(operations);
+  if (hash === lastOpsHash) return;
+  lastOpsHash = hash;
+
+  const processor = getOrCreateProcessor();
+  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);
+    }
+    error.value = null;
+  } catch (err) {
+    console.warn("[A2UI Vue] processMessages error:", err);
+    error.value = err instanceof Error ? err.message : String(err);
+  }
+  version.value++;
+}
+
+// Process operations on mount and when they change
+watch(
+  () => [props.content.operations, props.theme, props.catalog, props.agent],
+  () => {
+    processOperations(props.content.operations);
+  },
+  { deep: true, immediate: true },
+);
+
+onBeforeUnmount(() => {
+  processorRef.value = null;
+  lastOpsHash = "";
+});
+
+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>
+  <div
+    v-if="hasOperations"
+    data-copilotkit
+    :data-activity-type="activityType"
+    :data-message-id="message.id"
+  >
+    <div
+      v-if="error"
+      class="cpk:rounded-lg cpk:border cpk:border-red-200 cpk:bg-red-50 cpk:p-3 cpk:text-sm cpk:text-red-700"
+    >
+      A2UI render error: {{ error }}
+    </div>
+    <div
+      v-else
+      class="cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6"
+      data-testid="a2ui-activity-renderer"
+    >
+      <div
+        v-for="entry in surfaceEntries"
+        :key="entry.surfaceId"
+        class="cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4"
+        :data-surface-id="entry.surfaceId"
+      >
+        <div class="a2ui-surface cpk:flex cpk:flex-1">
+          <A2uiSurface :surface="entry.surface" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/v2/components/CopilotKitInspector.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+});
+
+import { onMounted, onUnmounted, shallowRef, useAttrs } from "vue";
+import type { CopilotKitCoreVue } from "../lib/vue-core";
+
+const props = defineProps<{
+  core?: CopilotKitCoreVue | null;
+}>();
+
+const attrs = useAttrs();
+const inspectorTag = shallowRef<string | null>(null);
+
+let isMounted = true;
+
+onMounted(() => {
+  void import("@copilotkit/web-inspector")
+    .then((mod) => {
+      mod.defineWebInspector?.();
+      if (!isMounted) return;
+      inspectorTag.value = mod.WEB_INSPECTOR_TAG;
+    })
+    .catch((error: unknown) => {
+      console.error("Failed to load CopilotKit inspector:", error);
+    });
+});
+
+onUnmounted(() => {
+  isMounted = false;
+});
+</script>
+
+<template>
+  <component
+    :is="inspectorTag"
+    v-if="inspectorTag"
+    v-bind="attrs"
+    :core.prop="props.core ?? null"
+  />
+</template>

package/src/v2/components/InlineFeatureWarning.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+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;
+</script>
+
+<template>
+  <div :style="containerStyle" data-testid="copilot-inline-feature-warning">
+    ⚠ The "{{ featureName }}" feature requires a CopilotKit license.
+    <a
+      href="https://copilotkit.ai/pricing"
+      target="_blank"
+      rel="noopener noreferrer"
+      :style="linkStyle"
+    >
+      Get one at copilotkit.ai/pricing
+    </a>
+  </div>
+</template>

package/src/v2/components/LicenseWarningBanner.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, 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";
+
+const props = withDefaults(
+  defineProps<{
+    type: LicenseBannerType;
+    featureName?: string;
+    expiryDate?: string;
+    graceRemaining?: number;
+  }>(),
+  {
+    featureName: undefined,
+    expiryDate: undefined,
+    graceRemaining: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  dismiss: [];
+}>();
+
+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://cloud.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 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",
+      };
+  }
+});
+
+const containerStyle = computed(() => ({
+  ...baseStyle,
+  ...severityStyle.value,
+}));
+
+const instance = getCurrentInstance();
+const hasDismissListener = computed(() => {
+  const vnodeProps = (instance?.vnode.props ?? {}) as Record<string, unknown>;
+  return typeof vnodeProps.onDismiss === "function";
+});
+
+function handleDismiss() {
+  emit("dismiss");
+}
+
+// Publish the banner's reserved bottom offset so the chat input can lift
+// itself above it via padding-bottom: var(--copilotkit-license-banner-offset).
+onMounted(() => {
+  if (typeof document === "undefined") return;
+  document.documentElement.style.setProperty(
+    LICENSE_BANNER_OFFSET_VAR,
+    `${LICENSE_BANNER_OFFSET_PX}px`,
+  );
+});
+
+onBeforeUnmount(() => {
+  if (typeof document === "undefined") return;
+  document.documentElement.style.removeProperty(LICENSE_BANNER_OFFSET_VAR);
+});
+</script>
+
+<template>
+  <div v-if="spec" :style="containerStyle" data-testid="copilot-license-banner">
+    <span>{{ spec.message }}</span>
+    <div
+      :style="{
+        display: 'flex',
+        gap: '8px',
+        alignItems: 'center',
+      }"
+    >
+      <a
+        :href="spec.actionUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        :style="{
+          fontWeight: 600,
+          textDecoration: 'underline',
+          color: 'inherit',
+        }"
+      >
+        {{ spec.actionLabel }}
+      </a>
+      <button
+        v-if="hasDismissListener"
+        :style="{
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          color: 'inherit',
+          fontSize: '16px',
+        }"
+        @click="handleDismiss"
+      >
+        ×
+      </button>
+    </div>
+  </div>
+</template>