@copilotkit/react-core 1.57.3 → 1.58.0

package/src/v2/a2ui/A2UIMessageRenderer.tsx

@@ -1,294 +0,0 @@
-import { useCopilotKit } from "../providers";
-import type { ReactActivityMessageRenderer } from "../types/react-activity-message-renderer";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { z } from "zod";
-import {
-  A2UIProvider,
-  useA2UIActions,
-  useA2UIError,
-  A2UIRenderer,
-  initializeDefaultCatalog,
-  injectStyles,
-  DEFAULT_SURFACE_ID,
-} from "@copilotkit/a2ui-renderer";
-import type { Theme, A2UIClientEventMessage } from "@copilotkit/a2ui-renderer";
-
-/**
- * The container key used to wrap A2UI operations for explicit detection.
- * Must match A2UI_OPERATIONS_KEY in @ag-ui/a2ui-middleware and copilotkit.a2ui (Python).
- */
-const A2UI_OPERATIONS_KEY = "a2ui_operations";
-
-// Initialize the React renderer's component catalog and styles once
-let initialized = false;
-function ensureInitialized() {
-  if (!initialized) {
-    initializeDefaultCatalog();
-    injectStyles();
-    initialized = true;
-  }
-}
-
-/**
- * User action with dataContextPath, as dispatched by A2UI components.
- */
-export type A2UIUserAction = {
-  name: string;
-  sourceComponentId: string;
-  surfaceId: string;
-  timestamp: string;
-  context?: Record<string, unknown>;
-  dataContextPath?: string;
-};
-
-export type A2UIMessageRendererOptions = {
-  theme: Theme;
-  /** Optional component catalog to pass to A2UIProvider */
-  catalog?: any;
-  /** Optional custom loading component shown while A2UI surface is generating. */
-  loadingComponent?: React.ComponentType;
-};
-
-export function createA2UIMessageRenderer(
-  options: A2UIMessageRendererOptions,
-): ReactActivityMessageRenderer<any> {
-  const { theme, catalog, loadingComponent } = options;
-
-  return {
-    activityType: "a2ui-surface",
-    content: z.any(),
-    render: ({ content, agent }) => {
-      ensureInitialized();
-
-      const [operations, setOperations] = useState<any[]>([]);
-      const { copilotkit } = useCopilotKit();
-
-      const lastContentRef = useRef<unknown>(null);
-      useEffect(() => {
-        // Skip if same content reference
-        if (content === lastContentRef.current) return;
-        lastContentRef.current = content;
-
-        const incoming = content?.[A2UI_OPERATIONS_KEY];
-        if (!content || !Array.isArray(incoming)) {
-          setOperations([]);
-          return;
-        }
-
-        setOperations(incoming);
-      }, [content]);
-
-      // Group operations by surface ID
-      const groupedOperations = useMemo(() => {
-        const groups = new Map<string, any[]>();
-
-        for (const operation of operations) {
-          const surfaceId =
-            getOperationSurfaceId(operation) ?? DEFAULT_SURFACE_ID;
-
-          if (!groups.has(surfaceId)) {
-            groups.set(surfaceId, []);
-          }
-          groups.get(surfaceId)!.push(operation);
-        }
-
-        return groups;
-      }, [operations]);
-
-      if (!groupedOperations.size) {
-        // Show loading state while A2UI surface is being generated
-        const LoadingComponent = loadingComponent ?? DefaultA2UILoading;
-        return <LoadingComponent />;
-      }
-
-      return (
-        <div className="cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6">
-          {Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => (
-            <ReactSurfaceHost
-              key={surfaceId}
-              surfaceId={surfaceId}
-              operations={ops}
-              theme={theme}
-              agent={agent}
-              copilotkit={copilotkit}
-              catalog={catalog}
-            />
-          ))}
-        </div>
-      );
-    },
-  };
-}
-
-type ReactSurfaceHostProps = {
-  surfaceId: string;
-  operations: any[];
-  theme: Theme;
-  agent: any;
-  copilotkit: any;
-  /** Optional component catalog to pass to A2UIProvider */
-  catalog?: any;
-};
-
-/**
- * Renders a single A2UI surface using the React renderer.
- * Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
- */
-function ReactSurfaceHost({
-  surfaceId,
-  operations,
-  theme,
-  agent,
-  copilotkit,
-  catalog,
-}: ReactSurfaceHostProps) {
-  // Bridge: when the React renderer dispatches an action, forward to CopilotKit
-  const handleAction = useCallback(
-    async (message: A2UIClientEventMessage) => {
-      if (!agent) return;
-
-      const action = message.userAction as A2UIUserAction | undefined;
-
-      try {
-        copilotkit.setProperties({
-          ...copilotkit.properties,
-          a2uiAction: message,
-        });
-
-        await copilotkit.runAgent({ agent });
-      } finally {
-        if (copilotkit.properties) {
-          const { a2uiAction, ...rest } = copilotkit.properties;
-          copilotkit.setProperties(rest);
-        }
-      }
-    },
-    [agent, copilotkit],
-  );
-
-  return (
-    <div className="cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4">
-      <A2UIProvider onAction={handleAction} theme={theme} catalog={catalog}>
-        <SurfaceMessageProcessor
-          surfaceId={surfaceId}
-          operations={operations}
-        />
-        <A2UISurfaceOrError surfaceId={surfaceId} />
-      </A2UIProvider>
-    </div>
-  );
-}
-
-/**
- * Renders the A2UI surface, or an error message if processing failed.
- * Must be a child of A2UIProvider to access the error state.
- */
-function A2UISurfaceOrError({ surfaceId }: { surfaceId: string }) {
-  const error = useA2UIError();
-  if (error) {
-    return (
-      <div className="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>
-    );
-  }
-  return <A2UIRenderer surfaceId={surfaceId} className="cpk:flex cpk:flex-1" />;
-}
-
-/**
- * Processes A2UI operations into the provider's message processor.
- * Must be a child of A2UIProvider to access the actions context.
- */
-function SurfaceMessageProcessor({
-  surfaceId,
-  operations,
-}: {
-  surfaceId: string;
-  operations: any[];
-}) {
-  const { processMessages, getSurface } = useA2UIActions();
-  const lastHashRef = useRef<string>("");
-  useEffect(() => {
-    // Skip if operations haven't actually changed (deep compare via hash).
-    // ACTIVITY_DELTA + ACTIVITY_SNAPSHOT can trigger multiple renders with
-    // the same logical content but different object references.
-    const hash = JSON.stringify(operations);
-    if (hash === lastHashRef.current) return;
-    lastHashRef.current = hash;
-
-    // Filter out createSurface if the surface already exists — the
-    // MessageProcessor throws on duplicate createSurface, but content
-    // snapshots always include the full operation list.
-    const existing = getSurface(surfaceId);
-    const ops = existing
-      ? operations.filter((op) => !op?.createSurface)
-      : operations;
-
-    // Error handling is done inside A2UIProvider.processMessages
-    processMessages(ops);
-  }, [processMessages, getSurface, surfaceId, operations]);
-
-  return null;
-}
-
-/**
- * Default loading component shown while an A2UI surface is generating.
- * Displays an animated shimmer skeleton.
- */
-function DefaultA2UILoading() {
-  return (
-    <div
-      className="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: 120 }}
-    >
-      <div className="cpk:flex cpk:items-center cpk:gap-2">
-        <div
-          className="cpk:h-3 cpk:w-3 cpk:rounded-full cpk:bg-gray-200"
-          style={{
-            animation: "cpk-a2ui-pulse 1.5s ease-in-out infinite",
-          }}
-        />
-        <span className="cpk:text-xs cpk:font-medium cpk:text-gray-400">
-          Generating UI...
-        </span>
-      </div>
-      <div className="cpk:flex cpk:flex-col cpk:gap-2">
-        {[0.8, 0.6, 0.4].map((width, i) => (
-          <div
-            key={i}
-            className="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`,
-            }}
-          />
-        ))}
-      </div>
-      <style>{`
-        @keyframes cpk-a2ui-pulse {
-          0%, 100% { opacity: 0.4; }
-          50% { opacity: 1; }
-        }
-      `}</style>
-    </div>
-  );
-}
-
-function getOperationSurfaceId(operation: any): string | null {
-  if (!operation || typeof operation !== "object") {
-    return null;
-  }
-
-  if (typeof operation.surfaceId === "string") {
-    return operation.surfaceId;
-  }
-
-  // v0.9 message keys
-  return (
-    operation?.createSurface?.surfaceId ??
-    operation?.updateComponents?.surfaceId ??
-    operation?.updateDataModel?.surfaceId ??
-    operation?.deleteSurface?.surfaceId ??
-    null
-  );
-}

package/src/v2/a2ui/A2UIToolCallRenderer.tsx

@@ -1,290 +0,0 @@
-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,52 +0,0 @@
-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;
-};
-
-type InspectorComponent = React.ComponentType<CopilotKitInspectorBaseProps>;
-
-export interface CopilotKitInspectorProps extends CopilotKitInspectorBaseProps {}
-
-export const CopilotKitInspector: React.FC<CopilotKitInspectorProps> = ({
-  core,
-  ...rest
-}) => {
-  const [InspectorComponent, setInspectorComponent] =
-    React.useState<InspectorComponent | null>(null);
-
-  React.useEffect(() => {
-    let mounted = true;
-
-    // Load the web component only on the client to keep SSR output stable.
-    import("@copilotkit/web-inspector").then((mod) => {
-      mod.defineWebInspector?.();
-
-      const Component = createComponent({
-        tagName: mod.WEB_INSPECTOR_TAG,
-        elementClass: mod.WebInspectorElement,
-        react: React,
-      }) as InspectorComponent;
-
-      if (mounted) {
-        setInspectorComponent(() => Component);
-      }
-    });
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  // During SSR (and until the client finishes loading), render nothing to keep markup consistent.
-  if (!InspectorComponent) return null;
-
-  return <InspectorComponent {...rest} core={core ?? null} />;
-};
-
-CopilotKitInspector.displayName = "CopilotKitInspector";