@copilotkit/vue 2.0.0-rc.0 → 2.0.0-rc.2

package/src/v2/components/a2ui/A2UIBuiltInToolCallRenderer.ts

@@ -1,7 +1,6 @@
-import { h, watch, type VNodeChild } from "vue";
+import { watch } from "vue";
 import type { ShallowRef } from "vue";
 import { z } from "zod";
-import type { ToolCallStatus } from "@copilotkit/core";
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";
 
@@ -12,8 +11,17 @@ import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";
 export const RENDER_A2UI_TOOL_NAME = "render_a2ui";
 
 /**
- * Registers the built-in `render_a2ui` tool call renderer via the props-based
- * `setRenderToolCalls` mechanism (not `useRenderTool`).
+ * Registers a no-op renderer for the `render_a2ui` tool call so its raw
+ * streamed args are never surfaced in the transcript, as React does.
+ *
+ * The generation skeleton / retry / failure UX is not owned here: the A2UI
+ * middleware drives the whole lifecycle on the `a2ui-surface` activity (one
+ * stable messageId, building → retrying → failed → painted), rendered in place
+ * by `createA2UIMessageRenderer`. A skeleton per tool call would duplicate on
+ * retries and multi-call generations and linger after the surface painted.
+ *
+ * The renderer is registered via the props-based `setRenderToolCalls`
+ * mechanism (not `useRenderTool`).
  *
  * This ensures user-registered `useRenderTool({ name: "render_a2ui", ... })`
  * hooks automatically override the built-in, since the merge logic in
@@ -33,23 +41,8 @@ export function registerA2UIBuiltInToolCallRenderer(
       const renderer = defineToolCallRenderer({
         name: RENDER_A2UI_TOOL_NAME,
         args: z.any(),
-        render: ({
-          status,
-          args: parameters,
-        }: {
-          status: ToolCallStatus;
-          args: unknown;
-          [key: string]: unknown;
-        }): VNodeChild => {
-          if (status === "complete") return null;
-          const params = parameters as Record<string, unknown>;
-          // Hide skeleton once the A2UI surface has enough data to render.
-          const items = params?.items;
-          if (Array.isArray(items) && items.length > 0) return null;
-          const components = params?.components;
-          if (Array.isArray(components) && components.length > 2) return null;
-          return renderA2UIProgressIndicator(parameters);
-        },
+        // Render nothing: the a2ui-surface activity owns all generation UX.
+        render: () => null,
       });
 
       // Register via props-based mechanism so useRenderTool hooks take priority
@@ -64,244 +57,8 @@ export function registerA2UIBuiltInToolCallRenderer(
         core.setRenderToolCalls(
           current.filter((rc) => rc.name !== RENDER_A2UI_TOOL_NAME),
         );
-        progressState.clear();
       });
     },
     { immediate: true },
   );
 }
-
-/**
- * Vue render-function equivalent of the React A2UIProgressIndicator.
- * Shows a skeleton wireframe that progressively reveals as tokens stream in.
- */
-const progressState = new Map<
-  string,
-  { lastTime: number; lastTokens: number }
->();
-
-function renderA2UIProgressIndicator(parameters: unknown): VNodeChild {
-  const params = parameters as Record<string, unknown> | null | undefined;
-  const key = typeof params?.name === "string" ? params.name : "__default__";
-  let state = progressState.get(key);
-  if (!state) {
-    state = { lastTime: 0, lastTokens: 0 };
-    progressState.set(key, state);
-  }
-
-  const now = Date.now();
-  let tokens = state.lastTokens;
-  if (now - state.lastTime > 200) {
-    const chars = JSON.stringify(parameters ?? {}).length;
-    tokens = Math.round(chars / 4);
-    state.lastTime = now;
-    state.lastTokens = tokens;
-  }
-
-  const phase = tokens < 50 ? 0 : tokens < 200 ? 1 : tokens < 400 ? 2 : 3;
-
-  const dot = () =>
-    h("div", {
-      style: {
-        width: "7px",
-        height: "7px",
-        borderRadius: "50%",
-        backgroundColor: "#d4d4d8",
-        flexShrink: 0,
-      },
-    });
-
-  const spacer = () => h("div", { style: { width: "12px" } });
-
-  const bar = (
-    w: number,
-    ht: number,
-    bg: string,
-    anim?: number,
-    opacity?: number,
-    transition?: string,
-  ) =>
-    h("div", {
-      style: {
-        width: `${w}px`,
-        height: `${ht}px`,
-        borderRadius: "9999px",
-        backgroundColor: bg,
-        ...(anim !== undefined
-          ? {
-              animation: `cpk-a2ui-fade 2.4s ease-in-out ${anim}s infinite`,
-            }
-          : {}),
-        ...(opacity !== undefined ? { opacity } : {}),
-        ...(transition ? { transition } : {}),
-      },
-    });
-
-  const row = (show: boolean, delay: number, children: VNodeChild[]) =>
-    h(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          opacity: show ? 1 : 0,
-          transition: `opacity 0.4s ${delay}s`,
-        },
-      },
-      children,
-    );
-
-  return h("div", { style: { margin: "12px 0", maxWidth: "320px" } }, [
-    h(
-      "div",
-      {
-        style: {
-          position: "relative",
-          overflow: "hidden",
-          borderRadius: "12px",
-          border: "1px solid rgba(228,228,231,0.8)",
-          backgroundColor: "#fff",
-          boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
-          padding: "16px 18px 14px",
-        },
-      },
-      [
-        // Top bar
-        h(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              marginBottom: "12px",
-            },
-          },
-          [
-            h("div", { style: { display: "flex", gap: "4px" } }, [
-              dot(),
-              dot(),
-              dot(),
-            ]),
-            bar(
-              64,
-              6,
-              "#e4e4e7",
-              undefined,
-              phase >= 1 ? 1 : 0.4,
-              "opacity 0.5s",
-            ),
-          ],
-        ),
-        // Skeleton lines
-        h("div", { style: { display: "grid", gap: "7px" } }, [
-          row(phase >= 0, 0, [
-            bar(36, 7, "rgba(147,197,253,0.7)", 0),
-            bar(80, 7, "rgba(219,234,254,0.8)", 0.2),
-          ]),
-          row(phase >= 0, 0.1, [
-            spacer(),
-            dot(),
-            bar(100, 7, "rgba(24,24,27,0.2)", 0.3),
-          ]),
-          row(phase >= 1, 0.15, [
-            spacer(),
-            bar(48, 7, "rgba(24,24,27,0.15)", 0.1),
-            bar(40, 7, "rgba(153,246,228,0.6)", 0.5),
-            bar(56, 7, "rgba(147,197,253,0.6)", 0.3),
-          ]),
-          row(phase >= 1, 0.2, [
-            spacer(),
-            dot(),
-            bar(60, 7, "rgba(24,24,27,0.15)", 0.4),
-          ]),
-          row(phase >= 2, 0.25, [
-            bar(40, 7, "rgba(153,246,228,0.5)", 0.2),
-            dot(),
-            bar(48, 7, "rgba(24,24,27,0.15)", 0.6),
-            bar(64, 7, "rgba(147,197,253,0.5)", 0.1),
-          ]),
-          row(phase >= 2, 0.3, [
-            bar(36, 7, "rgba(147,197,253,0.6)", 0.5),
-            bar(36, 7, "rgba(24,24,27,0.12)", 0.7),
-          ]),
-          row(phase >= 3, 0.35, [
-            dot(),
-            bar(44, 7, "rgba(24,24,27,0.18)", 0.3),
-            dot(),
-            bar(56, 7, "rgba(153,246,228,0.5)", 0.8),
-            bar(48, 7, "rgba(147,197,253,0.5)", 0.4),
-          ]),
-        ]),
-        // Shimmer
-        h("div", {
-          style: {
-            pointerEvents: "none",
-            position: "absolute",
-            inset: "0",
-            background:
-              "linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%, transparent 100%)",
-            backgroundSize: "250% 100%",
-            animation: "cpk-a2ui-sweep 3s ease-in-out infinite",
-          },
-        }),
-      ],
-    ),
-    // Label
-    h(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "8px",
-          marginTop: "8px",
-        },
-      },
-      [
-        h(
-          "span",
-          {
-            style: {
-              fontSize: "12px",
-              color: "#a1a1aa",
-              letterSpacing: "0.025em",
-            },
-          },
-          "Building interface",
-        ),
-        ...(tokens > 0
-          ? [
-              h(
-                "span",
-                {
-                  style: {
-                    fontSize: "11px",
-                    color: "#d4d4d8",
-                    fontVariantNumeric: "tabular-nums",
-                  },
-                },
-                `~${tokens.toLocaleString()} tokens`,
-              ),
-            ]
-          : []),
-      ],
-    ),
-    // Keyframe styles
-    h(
-      "style",
-      `
-      @keyframes cpk-a2ui-fade {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.5; }
-      }
-      @keyframes cpk-a2ui-sweep {
-        0% { background-position: 250% 0; }
-        100% { background-position: -250% 0; }
-      }
-    `,
-    ),
-  ]);
-}