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

package/src/v2/components/WildcardToolCallRender.tsx

@@ -0,0 +1,86 @@
+import { defineToolCallRenderer } from "../types/defineToolCallRenderer";
+import { useState } from "react";
+
+export const WildcardToolCallRender = defineToolCallRenderer({
+  name: "*",
+  render: ({ args, result, name, status }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const statusString = String(status) as
+      | "inProgress"
+      | "executing"
+      | "complete";
+    const isActive =
+      statusString === "inProgress" || statusString === "executing";
+    const isComplete = statusString === "complete";
+    const statusStyles = isActive
+      ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400"
+      : isComplete
+        ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400"
+        : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300";
+
+    return (
+      <div className="cpk:mt-2 cpk:pb-2">
+        <div className="cpk:rounded-xl cpk:border cpk:border-zinc-200/60 cpk:dark:border-zinc-800/60 cpk:bg-white/70 cpk:dark:bg-zinc-900/50 cpk:shadow-sm cpk:backdrop-blur cpk:p-4">
+          <div
+            className="cpk:flex cpk:items-center cpk:justify-between cpk:gap-3 cpk:cursor-pointer"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            <div className="cpk:flex cpk:items-center cpk:gap-2 cpk:min-w-0">
+              <svg
+                className={`cpk:h-4 cpk:w-4 cpk:text-zinc-500 cpk:dark:text-zinc-400 cpk:transition-transform ${
+                  isExpanded ? "cpk:rotate-90" : ""
+                }`}
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={2}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+              <span className="cpk:inline-block cpk:h-2 cpk:w-2 cpk:rounded-full cpk:bg-blue-500" />
+              <span className="cpk:truncate cpk:text-sm cpk:font-medium cpk:text-zinc-900 cpk:dark:text-zinc-100">
+                {name}
+              </span>
+            </div>
+            <span
+              className={`cpk:inline-flex cpk:items-center cpk:rounded-full cpk:px-2 cpk:py-1 cpk:text-xs cpk:font-medium ${statusStyles}`}
+            >
+              {String(status)}
+            </span>
+          </div>
+
+          {isExpanded && (
+            <div className="cpk:mt-3 cpk:grid cpk:gap-4">
+              <div>
+                <div className="cpk:text-xs cpk:uppercase cpk:tracking-wide cpk:text-zinc-500 cpk:dark:text-zinc-400">
+                  Arguments
+                </div>
+                <pre className="cpk:mt-2 cpk:max-h-64 cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-50 cpk:dark:bg-zinc-800/60 cpk:p-3 cpk:text-xs cpk:leading-relaxed cpk:text-zinc-800 cpk:dark:text-zinc-200 cpk:whitespace-pre-wrap cpk:break-words">
+                  {JSON.stringify(args ?? {}, null, 2)}
+                </pre>
+              </div>
+
+              {result !== undefined && (
+                <div>
+                  <div className="cpk:text-xs cpk:uppercase cpk:tracking-wide cpk:text-zinc-500 cpk:dark:text-zinc-400">
+                    Result
+                  </div>
+                  <pre className="cpk:mt-2 cpk:max-h-64 cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-50 cpk:dark:bg-zinc-800/60 cpk:p-3 cpk:text-xs cpk:leading-relaxed cpk:text-zinc-800 cpk:dark:text-zinc-200 cpk:whitespace-pre-wrap cpk:break-words">
+                    {typeof result === "string"
+                      ? result
+                      : JSON.stringify(result, null, 2)}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+});

package/src/v2/components/__tests__/license-warning-banner.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import {
+  LicenseWarningBanner,
+  InlineFeatureWarning,
+} from "../license-warning-banner";
+
+describe("LicenseWarningBanner", () => {
+  it("renders 'Powered by CopilotKit' for no_license type", () => {
+    render(<LicenseWarningBanner type="no_license" />);
+    expect(screen.getByText("Powered by CopilotKit")).toBeTruthy();
+  });
+
+  it("renders feature name for feature_unlicensed type", () => {
+    render(
+      <LicenseWarningBanner type="feature_unlicensed" featureName="Chat" />,
+    );
+    expect(
+      screen.getByText(/Chat.*requires a CopilotKit license/),
+    ).toBeTruthy();
+  });
+
+  it("renders expiry warning with days remaining", () => {
+    render(<LicenseWarningBanner type="expiring" graceRemaining={3} />);
+    expect(screen.getByText(/expires in 3 days/)).toBeTruthy();
+  });
+
+  it("renders critical expired banner", () => {
+    render(<LicenseWarningBanner type="expired" expiryDate="2026-03-01" />);
+    expect(screen.getByText(/expired/i)).toBeTruthy();
+  });
+
+  it("renders invalid license banner", () => {
+    render(<LicenseWarningBanner type="invalid" />);
+    expect(screen.getByText(/Invalid CopilotKit license/)).toBeTruthy();
+  });
+});
+
+describe("InlineFeatureWarning", () => {
+  it("renders with feature name and pricing link", () => {
+    render(<InlineFeatureWarning featureName="Agents" />);
+    expect(screen.getByText(/requires a CopilotKit license/)).toBeTruthy();
+    expect(screen.getByRole("link")).toBeTruthy();
+  });
+});

package/src/v2/components/chat/CopilotChat.tsx

@@ -0,0 +1,431 @@
+import { useAgent } from "../../hooks/use-agent";
+import { useSuggestions } from "../../hooks/use-suggestions";
+import { CopilotChatView, CopilotChatViewProps } from "./CopilotChatView";
+import { CopilotChatInputMode } from "./CopilotChatInput";
+import {
+  CopilotChatConfigurationProvider,
+  CopilotChatLabels,
+  useCopilotChatConfiguration,
+} from "../../providers/CopilotChatConfigurationProvider";
+import {
+  DEFAULT_AGENT_ID,
+  randomUUID,
+  TranscriptionErrorCode,
+} from "@copilotkit/shared";
+import { Suggestion, CopilotKitCoreErrorCode } from "@copilotkit/core";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { merge } from "ts-deepmerge";
+import {
+  useCopilotKit,
+  useLicenseContext,
+} from "../../providers/CopilotKitProvider";
+import { InlineFeatureWarning } from "../../components/license-warning-banner";
+import { AbstractAgent, HttpAgent } from "@ag-ui/client";
+import { renderSlot, SlotValue } from "../../lib/slots";
+import {
+  transcribeAudio,
+  TranscriptionError,
+} from "../../lib/transcription-client";
+
+export type CopilotChatProps = Omit<
+  CopilotChatViewProps,
+  | "messages"
+  | "isRunning"
+  | "suggestions"
+  | "suggestionLoadingIndexes"
+  | "onSelectSuggestion"
+> & {
+  agentId?: string;
+  threadId?: string;
+  labels?: Partial<CopilotChatLabels>;
+  chatView?: SlotValue<typeof CopilotChatView>;
+  isModalDefaultOpen?: boolean;
+  /**
+   * Error handler scoped to this chat's agent. Fires in addition to the
+   * provider-level onError (does not suppress it). Receives only errors
+   * whose context.agentId matches this chat's agent.
+   */
+  onError?: (event: {
+    error: Error;
+    code: CopilotKitCoreErrorCode;
+    context: Record<string, any>;
+  }) => void | Promise<void>;
+};
+export function CopilotChat({
+  agentId,
+  threadId,
+  labels,
+  chatView,
+  isModalDefaultOpen,
+  onError,
+  ...props
+}: CopilotChatProps) {
+  // Check for existing configuration provider
+  const existingConfig = useCopilotChatConfiguration();
+
+  // Apply priority: props > existing config > defaults
+  const resolvedAgentId =
+    agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID;
+  const resolvedThreadId = useMemo(
+    () => threadId ?? existingConfig?.threadId ?? randomUUID(),
+    [threadId, existingConfig?.threadId],
+  );
+
+  const { agent } = useAgent({ agentId: resolvedAgentId });
+  const { copilotkit } = useCopilotKit();
+  const { suggestions: autoSuggestions } = useSuggestions({
+    agentId: resolvedAgentId,
+  });
+
+  const { checkFeature } = useLicenseContext();
+  const isChatLicensed = checkFeature("chat");
+
+  useEffect(() => {
+    if (!isChatLicensed) {
+      console.warn(
+        '[CopilotKit] Warning: "chat" feature is not licensed. Visit copilotkit.ai/pricing',
+      );
+    }
+  }, [isChatLicensed]);
+
+  // onError subscription — forward core errors scoped to this chat's agent
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+
+  useEffect(() => {
+    if (!onErrorRef.current) return;
+
+    const subscription = copilotkit.subscribe({
+      onError: (event) => {
+        // Only forward errors that match this chat's agent
+        if (
+          event.context?.agentId === resolvedAgentId ||
+          !event.context?.agentId
+        ) {
+          onErrorRef.current?.({
+            error: event.error,
+            code: event.code,
+            context: event.context,
+          });
+        }
+      },
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [copilotkit, resolvedAgentId]);
+
+  // Transcription state
+  const [transcribeMode, setTranscribeMode] =
+    useState<CopilotChatInputMode>("input");
+  const [inputValue, setInputValue] = useState("");
+  const [transcriptionError, setTranscriptionError] = useState<string | null>(
+    null,
+  );
+  const [isTranscribing, setIsTranscribing] = useState(false);
+
+  // Check if transcription is enabled
+  const isTranscriptionEnabled = copilotkit.audioFileTranscriptionEnabled;
+
+  // Check if browser supports MediaRecorder
+  const isMediaRecorderSupported =
+    typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
+
+  const {
+    messageView: providedMessageView,
+    suggestionView: providedSuggestionView,
+    onStop: providedStopHandler,
+    ...restProps
+  } = props;
+
+  useEffect(() => {
+    let detached = false;
+
+    // Create a fresh AbortController so we can cancel the HTTP request on cleanup.
+    // HttpAgent (parent of ProxiedCopilotRuntimeAgent) uses this.abortController.signal
+    // in its fetch config. Unlike runAgent(), connectAgent() does NOT create a new
+    // AbortController automatically, so we must set one before connecting.
+    const connectAbortController = new AbortController();
+    if (agent instanceof HttpAgent) {
+      agent.abortController = connectAbortController;
+    }
+
+    const connect = async (agent: AbstractAgent) => {
+      try {
+        await copilotkit.connectAgent({ agent });
+      } catch (error) {
+        // Ignore errors from aborted connections (e.g., React StrictMode cleanup)
+        if (detached) return;
+        // connectAgent already emits via the subscriber system, but catch
+        // here to prevent unhandled rejections from unexpected errors.
+        console.error("CopilotChat: connectAgent failed", error);
+      }
+    };
+    agent.threadId = resolvedThreadId;
+    connect(agent);
+    return () => {
+      // Abort the HTTP request and detach the active run.
+      // This is critical for React StrictMode which unmounts+remounts in dev,
+      // preventing duplicate /connect requests from reaching the server.
+      detached = true;
+      connectAbortController.abort();
+      // The .catch() is required to prevent a false-positive "Uncaught (in promise)
+      // AbortError" in browser devtools. detachActiveRun() itself does not reject,
+      // but without an attached handler V8 flags the promise chain as unhandled
+      // when the abort signal propagates through connected promises internally.
+      void agent.detachActiveRun().catch(() => {});
+    };
+    // copilotkit is intentionally excluded — it is a stable ref that never changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resolvedThreadId, agent, resolvedAgentId]);
+
+  const onSubmitInput = useCallback(
+    async (value: string) => {
+      agent.addMessage({
+        id: randomUUID(),
+        role: "user",
+        content: value,
+      });
+      // Clear input after submitting
+      setInputValue("");
+      try {
+        await copilotkit.runAgent({ agent });
+      } catch (error) {
+        console.error("CopilotChat: runAgent failed", error);
+      }
+    },
+    // copilotkit is intentionally excluded — it is a stable ref that never changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [agent],
+  );
+
+  const handleSelectSuggestion = useCallback(
+    async (suggestion: Suggestion) => {
+      agent.addMessage({
+        id: randomUUID(),
+        role: "user",
+        content: suggestion.message,
+      });
+
+      try {
+        await copilotkit.runAgent({ agent });
+      } catch (error) {
+        console.error(
+          "CopilotChat: runAgent failed after selecting suggestion",
+          error,
+        );
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [agent],
+  );
+
+  const stopCurrentRun = useCallback(() => {
+    try {
+      copilotkit.stopAgent({ agent });
+    } catch (error) {
+      console.error("CopilotChat: stopAgent failed", error);
+      try {
+        agent.abortRun();
+      } catch (abortError) {
+        console.error("CopilotChat: abortRun fallback failed", abortError);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agent]);
+
+  // Transcription handlers
+  const handleStartTranscribe = useCallback(() => {
+    setTranscriptionError(null);
+    setTranscribeMode("transcribe");
+  }, []);
+
+  const handleCancelTranscribe = useCallback(() => {
+    setTranscriptionError(null);
+    setTranscribeMode("input");
+  }, []);
+
+  const handleFinishTranscribe = useCallback(() => {
+    setTranscribeMode("input");
+  }, []);
+
+  // Handle audio blob from CopilotChatInput and transcribe it
+  const handleFinishTranscribeWithAudio = useCallback(
+    async (audioBlob: Blob) => {
+      setIsTranscribing(true);
+      try {
+        setTranscriptionError(null);
+
+        // Send to transcription endpoint
+        const result = await transcribeAudio(copilotkit, audioBlob);
+
+        // Insert transcribed text into input
+        setInputValue((prev) => {
+          const trimmedPrev = prev.trim();
+          if (trimmedPrev) {
+            return `${trimmedPrev} ${result.text}`;
+          }
+          return result.text;
+        });
+      } catch (error) {
+        console.error("CopilotChat: Transcription failed", error);
+
+        // Show contextual error message based on error type
+        if (error instanceof TranscriptionError) {
+          const { code, retryable, message } = error.info;
+          switch (code) {
+            case TranscriptionErrorCode.RATE_LIMITED:
+              setTranscriptionError("Too many requests. Please wait a moment.");
+              break;
+            case TranscriptionErrorCode.AUTH_FAILED:
+              setTranscriptionError(
+                "Authentication error. Please check your configuration.",
+              );
+              break;
+            case TranscriptionErrorCode.AUDIO_TOO_LONG:
+              setTranscriptionError(
+                "Recording is too long. Please try a shorter recording.",
+              );
+              break;
+            case TranscriptionErrorCode.AUDIO_TOO_SHORT:
+              setTranscriptionError(
+                "Recording is too short. Please try again.",
+              );
+              break;
+            case TranscriptionErrorCode.INVALID_AUDIO_FORMAT:
+              setTranscriptionError("Audio format not supported.");
+              break;
+            case TranscriptionErrorCode.SERVICE_NOT_CONFIGURED:
+              setTranscriptionError("Transcription service is not available.");
+              break;
+            case TranscriptionErrorCode.NETWORK_ERROR:
+              setTranscriptionError(
+                "Network error. Please check your connection.",
+              );
+              break;
+            default:
+              // For retryable errors, show more helpful message
+              setTranscriptionError(
+                retryable ? "Transcription failed. Please try again." : message,
+              );
+          }
+        } else {
+          // Fallback for unexpected errors
+          setTranscriptionError("Transcription failed. Please try again.");
+        }
+      } finally {
+        setIsTranscribing(false);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  // Clear transcription error after a delay
+  useEffect(() => {
+    if (transcriptionError) {
+      const timer = setTimeout(() => {
+        setTranscriptionError(null);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [transcriptionError]);
+
+  const mergedProps = merge(
+    {
+      isRunning: agent.isRunning,
+      suggestions: autoSuggestions,
+      onSelectSuggestion: handleSelectSuggestion,
+      suggestionView: providedSuggestionView,
+    },
+    {
+      ...restProps,
+      ...(typeof providedMessageView === "string"
+        ? { messageView: { className: providedMessageView } }
+        : providedMessageView !== undefined
+          ? { messageView: providedMessageView }
+          : {}),
+    },
+  );
+
+  const hasMessages = agent.messages.length > 0;
+  const shouldAllowStop = agent.isRunning && hasMessages;
+  const effectiveStopHandler = shouldAllowStop
+    ? (providedStopHandler ?? stopCurrentRun)
+    : providedStopHandler;
+
+  // Determine if transcription feature should be available
+  const showTranscription = isTranscriptionEnabled && isMediaRecorderSupported;
+
+  // Determine mode: transcribing takes priority, then transcribe mode, then default to input
+  const effectiveMode: CopilotChatInputMode = isTranscribing
+    ? "processing"
+    : transcribeMode;
+
+  // Memoize messages array - only create new reference when content actually changes
+  // (agent.messages is mutated in place, so we need a new reference for React to detect changes)
+
+  const messages = useMemo(
+    () => [...agent.messages],
+    [JSON.stringify(agent.messages)],
+  );
+
+  const finalProps = merge(mergedProps, {
+    messages,
+    // Input behavior props
+    onSubmitMessage: onSubmitInput,
+    onStop: effectiveStopHandler,
+    inputMode: effectiveMode,
+    inputValue,
+    onInputChange: setInputValue,
+    // Only provide transcription handlers if feature is available
+    onStartTranscribe: showTranscription ? handleStartTranscribe : undefined,
+    onCancelTranscribe: showTranscription ? handleCancelTranscribe : undefined,
+    onFinishTranscribe: showTranscription ? handleFinishTranscribe : undefined,
+    onFinishTranscribeWithAudio: showTranscription
+      ? handleFinishTranscribeWithAudio
+      : undefined,
+  }) as CopilotChatViewProps;
+
+  // Always create a provider with merged values
+  // This ensures priority: props > existing config > defaults
+  const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
+
+  return (
+    <CopilotChatConfigurationProvider
+      agentId={resolvedAgentId}
+      threadId={resolvedThreadId}
+      labels={labels}
+      isModalDefaultOpen={isModalDefaultOpen}
+    >
+      {!isChatLicensed && <InlineFeatureWarning featureName="Chat" />}
+      {transcriptionError && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: "100px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            backgroundColor: "#ef4444",
+            color: "white",
+            padding: "8px 16px",
+            borderRadius: "8px",
+            fontSize: "14px",
+            zIndex: 50,
+          }}
+        >
+          {transcriptionError}
+        </div>
+      )}
+      {RenderedChatView}
+    </CopilotChatConfigurationProvider>
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace CopilotChat {
+  export const View = CopilotChatView;
+}