@copilotkit/react-core 1.55.0-next.8 → 1.55.0

package/src/v2/a2ui/A2UIToolCallRenderer.tsx

@@ -0,0 +1,290 @@
+import React, { useEffect, useRef } from "react";
+import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { defineToolCallRenderer } from "../types/defineToolCallRenderer";
+import { z } from "zod";
+
+/**
+ * Tool name used by the dynamic A2UI generation secondary LLM.
+ * This renderer is auto-registered when A2UI is enabled.
+ */
+export const RENDER_A2UI_TOOL_NAME = "render_a2ui";
+
+interface A2UIProgressProps {
+  parameters: unknown;
+}
+
+/**
+ * Built-in progress indicator for dynamic A2UI generation.
+ * Shows a skeleton wireframe that progressively reveals as tokens stream in.
+ *
+ * Registered automatically when A2UI is enabled. Users can override by
+ * providing their own `useRenderTool({ name: "render_a2ui", ... })`.
+ */
+function A2UIProgressIndicator({ parameters }: A2UIProgressProps) {
+  const lastRef = useRef({ time: 0, tokens: 0 });
+  const now = Date.now();
+
+  let { tokens } = lastRef.current;
+  if (now - lastRef.current.time > 200) {
+    const chars = JSON.stringify(parameters ?? {}).length;
+    tokens = Math.round(chars / 4);
+    lastRef.current = { time: now, tokens };
+  }
+
+  const phase = tokens < 50 ? 0 : tokens < 200 ? 1 : tokens < 400 ? 2 : 3;
+
+  return (
+    <div style={{ margin: "12px 0", maxWidth: 320 }}>
+      <div
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          borderRadius: 12,
+          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 */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            marginBottom: 12,
+          }}
+        >
+          <div style={{ display: "flex", gap: 4 }}>
+            <Dot />
+            <Dot />
+            <Dot />
+          </div>
+          <Bar
+            w={64}
+            h={6}
+            bg="#e4e4e7"
+            opacity={phase >= 1 ? 1 : 0.4}
+            transition="opacity 0.5s"
+          />
+        </div>
+
+        {/* Skeleton lines */}
+        <div style={{ display: "grid", gap: 7 }}>
+          <Row show={phase >= 0}>
+            <Bar w={36} h={7} bg="rgba(147,197,253,0.7)" anim={0} />
+            <Bar w={80} h={7} bg="rgba(219,234,254,0.8)" anim={0.2} />
+          </Row>
+          <Row show={phase >= 0} delay={0.1}>
+            <Spacer />
+            <Dot />
+            <Bar w={100} h={7} bg="rgba(24,24,27,0.2)" anim={0.3} />
+          </Row>
+          <Row show={phase >= 1} delay={0.15}>
+            <Spacer />
+            <Bar w={48} h={7} bg="rgba(24,24,27,0.15)" anim={0.1} />
+            <Bar w={40} h={7} bg="rgba(153,246,228,0.6)" anim={0.5} />
+            <Bar w={56} h={7} bg="rgba(147,197,253,0.6)" anim={0.3} />
+          </Row>
+          <Row show={phase >= 1} delay={0.2}>
+            <Spacer />
+            <Dot />
+            <Bar w={60} h={7} bg="rgba(24,24,27,0.15)" anim={0.4} />
+          </Row>
+          <Row show={phase >= 2} delay={0.25}>
+            <Bar w={40} h={7} bg="rgba(153,246,228,0.5)" anim={0.2} />
+            <Dot />
+            <Bar w={48} h={7} bg="rgba(24,24,27,0.15)" anim={0.6} />
+            <Bar w={64} h={7} bg="rgba(147,197,253,0.5)" anim={0.1} />
+          </Row>
+          <Row show={phase >= 2} delay={0.3}>
+            <Bar w={36} h={7} bg="rgba(147,197,253,0.6)" anim={0.5} />
+            <Bar w={36} h={7} bg="rgba(24,24,27,0.12)" anim={0.7} />
+          </Row>
+          <Row show={phase >= 3} delay={0.35}>
+            <Dot />
+            <Bar w={44} h={7} bg="rgba(24,24,27,0.18)" anim={0.3} />
+            <Dot />
+            <Bar w={56} h={7} bg="rgba(153,246,228,0.5)" anim={0.8} />
+            <Bar w={48} h={7} bg="rgba(147,197,253,0.5)" anim={0.4} />
+          </Row>
+        </div>
+
+        {/* Shimmer */}
+        <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",
+          }}
+        />
+      </div>
+
+      {/* Label */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+          marginTop: 8,
+        }}
+      >
+        <span
+          style={{
+            fontSize: 12,
+            color: "#a1a1aa",
+            letterSpacing: "0.025em",
+          }}
+        >
+          Building interface
+        </span>
+        {tokens > 0 && (
+          <span
+            style={{
+              fontSize: 11,
+              color: "#d4d4d8",
+              fontVariantNumeric: "tabular-nums",
+            }}
+          >
+            ~{tokens.toLocaleString()} tokens
+          </span>
+        )}
+      </div>
+
+      <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; }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+// --- Primitives ---
+
+function Dot() {
+  return (
+    <div
+      style={{
+        width: 7,
+        height: 7,
+        borderRadius: "50%",
+        backgroundColor: "#d4d4d8",
+        flexShrink: 0,
+      }}
+    />
+  );
+}
+
+function Spacer() {
+  return <div style={{ width: 12 }} />;
+}
+
+function Bar({
+  w,
+  h,
+  bg,
+  anim,
+  opacity,
+  transition,
+}: {
+  w: number;
+  h: number;
+  bg: string;
+  anim?: number;
+  opacity?: number;
+  transition?: string;
+}) {
+  return (
+    <div
+      style={{
+        width: w,
+        height: h,
+        borderRadius: 9999,
+        backgroundColor: bg,
+        ...(anim !== undefined
+          ? { animation: `cpk-a2ui-fade 2.4s ease-in-out ${anim}s infinite` }
+          : {}),
+        ...(opacity !== undefined ? { opacity } : {}),
+        ...(transition ? { transition } : {}),
+      }}
+    />
+  );
+}
+
+function Row({
+  children,
+  show,
+  delay = 0,
+}: {
+  children: React.ReactNode;
+  show: boolean;
+  delay?: number;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        opacity: show ? 1 : 0,
+        transition: `opacity 0.4s ${delay}s`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+// --- Hook entry point ---
+
+/**
+ * Registers the built-in `render_a2ui` tool call renderer 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
+ * react-core.ts gives hook-based entries priority over prop-based entries.
+ */
+export function A2UIBuiltInToolCallRenderer(): null {
+  const { copilotkit } = useCopilotKit();
+
+  useEffect(() => {
+    const renderer = defineToolCallRenderer({
+      name: RENDER_A2UI_TOOL_NAME,
+      args: z.any(),
+      render: ({ status, args: parameters }) => {
+        if (status === "complete") return <></>;
+        const params = parameters as any;
+        // Hide skeleton once the A2UI surface has enough data to render.
+        // For data-bound surfaces: items array is populated.
+        // For dashboard-style surfaces: components array has multiple entries
+        // (meaning the streaming path is emitting activity snapshots).
+        const items = params?.items;
+        if (Array.isArray(items) && items.length > 0) return <></>;
+        const components = params?.components;
+        if (Array.isArray(components) && components.length > 2) return <></>;
+        return <A2UIProgressIndicator parameters={parameters} />;
+      },
+    });
+
+    // Register via props-based mechanism so useRenderTool hooks take priority
+    const existing = (copilotkit as any)._renderToolCalls ?? [];
+    copilotkit.setRenderToolCalls([
+      ...existing.filter((rc: any) => rc.name !== RENDER_A2UI_TOOL_NAME),
+      renderer,
+    ]);
+  }, [copilotkit]);
+
+  return null;
+}

package/src/v2/components/CopilotKitInspector.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { createComponent } from "@lit-labs/react";
 import type { CopilotKitCore } from "@copilotkit/core";
+import type { Anchor } from "@copilotkit/web-inspector";
 
 type CopilotKitInspectorBaseProps = {
   core?: CopilotKitCore | null;
+  defaultAnchor?: Anchor;
   [key: string]: unknown;
 };