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

package/src/v2/__tests__/exports.test.ts

@@ -8,6 +8,7 @@ describe("package exports", () => {
     expect(typeof VuePackage.CopilotChat.View).toBe("object");
     expect(typeof VuePackage.CopilotChatMessageView).toBe("object");
     expect(typeof VuePackage.CopilotChatToolCallsView).toBe("object");
+    expect(typeof VuePackage.CopilotChatToolCallGroup).toBe("object");
     expect(typeof VuePackage.CopilotChatInput).toBe("object");
     expect(typeof VuePackage.CopilotChatAssistantMessage).toBe("object");
     expect(typeof VuePackage.CopilotChatUserMessage).toBe("object");
@@ -32,11 +33,12 @@ describe("package exports", () => {
     expect(VuePackage.vueBasicCatalog.components.size).toBeGreaterThan(0);
   });
 
-  it("exports the vue stylesheet entrypoint", () => {
+  it("exports CopilotKitStyles and no stylesheet, since the CSS is injected", () => {
     const packageJson = JSON.parse(readFileSync("package.json", "utf8")) as {
       exports?: Record<string, unknown>;
     };
 
-    expect(packageJson.exports?.["./styles.css"]).toBe("./dist/styles.css");
+    expect(typeof VuePackage.CopilotKitStyles).toBe("object");
+    expect(packageJson.exports?.["./styles.css"]).toBeUndefined();
   });
 });

package/src/v2/components/A2UIMessageRenderer.ts

@@ -1,89 +1,77 @@
 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";
+import {
+  A2UIBuildingState,
+  A2UILifecycleFields,
+  A2UIRecoveryFailure,
+  A2UIRetryingState,
+  resolveDebugExposure,
+} from "./a2ui/A2UIRecoveryStates";
+import type { A2UIRecoveryRendererOptions } from "./a2ui/A2UIRecoveryStates";
 
 const A2UI_OPERATIONS_KEY = "a2ui_operations";
 
 export type A2UIMessageRendererOptions = {
   theme: A2UITheme;
   catalog?: any;
+  /** Optional custom loading component shown while the A2UI surface is building. */
   loadingComponent?: unknown;
+  /**
+   * Pre-paint recovery/loading UX options: timing before the "Retrying…"
+   * sub-label appears, and how much retry/debug detail to surface.
+   */
+  recovery?: A2UIRecoveryRendererOptions;
 };
 
 /**
- * Default loading component shown while an A2UI surface is generating.
- * Mirrors React's `DefaultA2UILoading` in
- * `packages/react-core/src/a2ui/A2UIMessageRenderer.tsx`:
- * an animated dot + "Generating UI..." label + three shimmer bars
- * (80% / 60% / 40% widths) with staggered `cpk-a2ui-pulse` opacity animation.
+ * 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. `.loose()` keeps
+ * the operations and any future fields.
  */
-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; }
-}`,
-          ),
-        ],
-      );
-  },
-});
+const A2UISurfaceContentSchema = z
+  .object({
+    a2ui_operations: z.array(z.any()).optional(),
+    ...A2UILifecycleFields,
+  })
+  .loose();
 
 export function createA2UIMessageRenderer(
   options: A2UIMessageRendererOptions,
 ): VueActivityMessageRenderer<any> {
+  const showAfterMs = options.recovery?.showAfterMs ?? 2000;
+  const showAfterAttempts = options.recovery?.showAfterAttempts ?? 2;
+  const optionDebugExposure = options.recovery?.debugExposure ?? "collapsed";
+
+  // Renders the pre-paint lifecycle state for a content snapshot.
+  const renderLifecycle = (content: any) => {
+    const debugExposure = resolveDebugExposure(content, optionDebugExposure);
+    if (content?.status === "failed") {
+      return h(A2UIRecoveryFailure, { content, debugExposure });
+    }
+    if (content?.status === "retrying") {
+      return h(A2UIRetryingState, {
+        content,
+        showAfterMs,
+        showAfterAttempts,
+        debugExposure,
+      });
+    }
+    // "building" / default: a host-supplied loader wins; else the skeleton.
+    if (options.loadingComponent) {
+      return h(options.loadingComponent as any);
+    }
+    return h(A2UIBuildingState, { content });
+  };
+
   return {
     activityType: "a2ui-surface",
-    content: z.any(),
+    content: A2UISurfaceContentSchema,
     render: defineComponent({
       name: "A2UIMessageRendererHost",
       props: {
@@ -104,11 +92,11 @@ export function createA2UIMessageRenderer(
         );
 
         return () => {
+          // No painted surface yet → the pre-paint lifecycle state. It shares
+          // this activity's messageId, so the painted surface below replaces
+          // it in place once operations arrive.
           if (operations.value.length === 0) {
-            if (options.loadingComponent) {
-              return h(options.loadingComponent as any);
-            }
-            return h(DefaultA2UILoading);
+            return renderLifecycle(props.content);
           }
 
           return h(A2UISurfaceActivityRenderer, {

package/src/v2/components/A2UISurfaceActivityRenderer.vue

@@ -1,24 +1,15 @@
 <script setup lang="ts">
-import {
-  computed,
-  h,
-  onBeforeUnmount,
-  shallowRef,
-  ref,
-  watch,
-  type VNode,
-} from "vue";
+import { computed, h, onBeforeUnmount, shallowRef, ref, watch } from "vue";
+import 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";
+import { MessageProcessor } from "@a2ui/web_core/v0_9";
+import type { SurfaceModel } from "@a2ui/web_core/v0_9";
+import { vueBasicCatalog, A2uiSurface } from "./a2ui/index";
+import type { VueComponentImplementation } from "./a2ui/index";
 
 const DEFAULT_SURFACE_ID = "default";
 
@@ -61,7 +52,7 @@ async function handleAction(message: unknown) {
   if (!props.agent) return;
   try {
     copilotkit.value.setProperties({
-      ...(copilotkit.value.properties ?? {}),
+      ...copilotkit.value.properties,
       a2uiAction: message,
     });
     await copilotkit.value.runAgent({ agent: props.agent as any });
@@ -160,24 +151,21 @@ const surfaceEntries = computed(() => {
     :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"
-    >
+    <div v-if="error" class="cpk-a2ui-message-error">
       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"
+      class="cpk-a2ui-message-surfaces"
       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"
+        class="cpk-a2ui-message-surface-host"
         :data-surface-id="entry.surfaceId"
       >
-        <div class="a2ui-surface cpk:flex cpk:flex-1">
+        <div class="a2ui-surface cpk-a2ui-message-surface">
           <A2uiSurface :surface="entry.surface" />
         </div>
       </div>

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: