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

package/src/v2/hooks/use-attachments.tsx

@@ -0,0 +1,269 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  randomUUID,
+  getModalityFromMimeType,
+  exceedsMaxSize,
+  readFileAsBase64,
+  generateVideoThumbnail,
+  matchesAcceptFilter,
+  formatFileSize,
+} from "@copilotkit/shared";
+import type { Attachment, AttachmentsConfig } from "@copilotkit/shared";
+
+export interface UseAttachmentsProps {
+  config?: AttachmentsConfig;
+}
+
+export interface UseAttachmentsReturn {
+  /** Currently selected attachments (uploading + ready). */
+  attachments: Attachment[];
+  /** Whether attachments are enabled. */
+  enabled: boolean;
+  /** Whether the user is dragging a file over the drop zone. */
+  dragOver: boolean;
+  /** Ref for the hidden file input element. */
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  /** Ref for the container element (used for scoped paste handling). */
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  /** Process an array of files (validate, upload, add to state). */
+  processFiles: (files: File[]) => Promise<void>;
+  /** Handler for `<input type="file" onChange>`. */
+  handleFileUpload: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+  /** Handler for `onDragOver` on the drop zone. */
+  handleDragOver: (e: React.DragEvent) => void;
+  /** Handler for `onDragLeave` on the drop zone. */
+  handleDragLeave: (e: React.DragEvent) => void;
+  /** Handler for `onDrop` on the drop zone. */
+  handleDrop: (e: React.DragEvent) => Promise<void>;
+  /** Remove an attachment by ID. */
+  removeAttachment: (id: string) => void;
+  /**
+   * Consume ready attachments and clear the queue.
+   * Returns the attachments that were ready; resets the file input.
+   * No-ops if the queue is already empty (no state update triggered).
+   */
+  consumeAttachments: () => Attachment[];
+}
+
+/**
+ * Hook that manages file attachment state — uploads, drag-and-drop, paste,
+ * and lifecycle. All returned callbacks are referentially stable across
+ * renders (via useCallback) to avoid destabilizing downstream memoization.
+ */
+export function useAttachments({
+  config,
+}: UseAttachmentsProps): UseAttachmentsReturn {
+  const enabled = config?.enabled ?? false;
+
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [dragOver, setDragOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Keep refs to the latest values so stable callbacks can read current
+  // state without appearing in dependency arrays.
+  const configRef = useRef(config);
+  configRef.current = config;
+  const attachmentsRef = useRef<Attachment[]>([]);
+  attachmentsRef.current = attachments;
+
+  // Stable processFiles — reads config from ref, never changes identity
+  const processFiles = useCallback(async (files: File[]) => {
+    const cfg = configRef.current;
+    const accept = cfg?.accept ?? "*/*";
+    const maxSize = cfg?.maxSize ?? 20 * 1024 * 1024;
+
+    const rejectedFiles = files.filter(
+      (file) => !matchesAcceptFilter(file, accept),
+    );
+    for (const file of rejectedFiles) {
+      cfg?.onUploadFailed?.({
+        reason: "invalid-type",
+        file,
+        message: `File "${file.name}" is not accepted. Supported types: ${accept}`,
+      });
+    }
+
+    const validFiles = files.filter((file) =>
+      matchesAcceptFilter(file, accept),
+    );
+
+    for (const file of validFiles) {
+      if (exceedsMaxSize(file, maxSize)) {
+        cfg?.onUploadFailed?.({
+          reason: "file-too-large",
+          file,
+          message: `File "${file.name}" exceeds the maximum size of ${formatFileSize(maxSize)}`,
+        });
+        continue;
+      }
+
+      const modality = getModalityFromMimeType(file.type);
+      const placeholderId = randomUUID();
+      const placeholder: Attachment = {
+        id: placeholderId,
+        type: modality,
+        source: { type: "data", value: "", mimeType: file.type },
+        filename: file.name,
+        size: file.size,
+        status: "uploading",
+      };
+
+      setAttachments((prev) => [...prev, placeholder]);
+
+      try {
+        let source: Attachment["source"];
+        let uploadMetadata: Record<string, unknown> | undefined;
+
+        if (cfg?.onUpload) {
+          const { metadata: meta, ...uploadSource } = await cfg.onUpload(file);
+          source = uploadSource;
+          uploadMetadata = meta;
+        } else {
+          const base64 = await readFileAsBase64(file);
+          source = { type: "data", value: base64, mimeType: file.type };
+        }
+
+        let thumbnail: string | undefined;
+        if (modality === "video") {
+          thumbnail = await generateVideoThumbnail(file);
+        }
+
+        setAttachments((prev) =>
+          prev.map((att) =>
+            att.id === placeholderId
+              ? {
+                  ...att,
+                  source,
+                  status: "ready" as const,
+                  thumbnail,
+                  metadata: uploadMetadata,
+                }
+              : att,
+          ),
+        );
+      } catch (error) {
+        setAttachments((prev) =>
+          prev.filter((att) => att.id !== placeholderId),
+        );
+        console.error(`[CopilotKit] Failed to upload "${file.name}":`, error);
+        cfg?.onUploadFailed?.({
+          reason: "upload-failed",
+          file,
+          message:
+            error instanceof Error
+              ? error.message
+              : `Failed to upload "${file.name}"`,
+        });
+      }
+    }
+  }, []);
+
+  const handleFileUpload = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!e.target.files?.length) return;
+      try {
+        await processFiles(Array.from(e.target.files));
+      } catch (error) {
+        console.error("[CopilotKit] Upload error:", error);
+      }
+    },
+    [processFiles],
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    if (!configRef.current?.enabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(false);
+      if (!configRef.current?.enabled) return;
+
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length > 0) {
+        try {
+          await processFiles(files);
+        } catch (error) {
+          console.error("[CopilotKit] Drop error:", error);
+        }
+      }
+    },
+    [processFiles],
+  );
+
+  // Clipboard paste handler — scoped to the container
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handlePaste = async (e: ClipboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (!target || !containerRef.current?.contains(target)) return;
+
+      const accept = configRef.current?.accept ?? "*/*";
+      const items = Array.from(e.clipboardData?.items || []);
+      const fileItems = items.filter(
+        (item) =>
+          item.kind === "file" &&
+          item.getAsFile() !== null &&
+          matchesAcceptFilter(item.getAsFile()!, accept),
+      );
+
+      if (fileItems.length === 0) return;
+      e.preventDefault();
+
+      const files = fileItems
+        .map((item) => item.getAsFile())
+        .filter((f): f is File => f !== null);
+
+      try {
+        await processFiles(files);
+      } catch (error) {
+        console.error("[CopilotKit] Paste error:", error);
+      }
+    };
+
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [enabled, processFiles]);
+
+  const removeAttachment = useCallback((id: string) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  const consumeAttachments = useCallback(() => {
+    const ready = attachmentsRef.current.filter((a) => a.status === "ready");
+    if (ready.length === 0) return ready;
+    setAttachments((prev) => prev.filter((a) => a.status !== "ready"));
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    return ready;
+  }, []);
+
+  return {
+    attachments,
+    enabled,
+    dragOver,
+    fileInputRef,
+    containerRef,
+    processFiles,
+    handleFileUpload,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    removeAttachment,
+    consumeAttachments,
+  };
+}

package/src/v2/hooks/use-frontend-tool.tsx

@@ -22,8 +22,11 @@ export function useFrontendTool<
     }
     copilotkit.addTool(tool);
 
-    // Register/override renderer by name and agentId through core
-    if (tool.render && tool.parameters) {
+    // Register/override renderer by name and agentId through core.
+    // The render function is registered even when tool.parameters is
+    // undefined — tools like HITL confirm dialogs have no parameters
+    // but still need their UI rendered in the chat.
+    if (tool.render) {
       copilotkit.addHookRenderToolCall({
         name,
         args: tool.parameters,

package/src/v2/hooks/use-render-activity-message.tsx

@@ -3,6 +3,7 @@ import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { useCopilotKit, useCopilotChatConfiguration } from "../providers";
 import { useCallback, useMemo } from "react";
 import { ReactActivityMessageRenderer } from "../types";
+import { getThreadClone } from "./use-agent";
 
 export function useRenderActivityMessage() {
   const { copilotkit } = useCopilotKit();
@@ -51,7 +52,13 @@ export function useRenderActivityMessage() {
       }
 
       const Component = renderer.render;
-      const agent = copilotkit.getAgent(agentId);
+      // Prefer the per-thread clone so that handleAction in ReactSurfaceHost
+      // calls runAgent on the same agent instance that CopilotChat renders from.
+      // Without this, button clicks accumulate messages on the registry agent
+      // while CopilotChat displays from the clone — responses appear to vanish.
+      const registryAgent = copilotkit.getAgent(agentId);
+      const agent =
+        getThreadClone(registryAgent, config?.threadId) ?? registryAgent;
 
       return (
         <Component
@@ -63,7 +70,7 @@ export function useRenderActivityMessage() {
         />
       );
     },
-    [agentId, copilotkit, findRenderer],
+    [agentId, config?.threadId, copilotkit, findRenderer],
   );
 
   return useMemo(

package/src/v2/hooks/use-render-custom-messages.tsx

@@ -1,4 +1,5 @@
 import { useCopilotChatConfiguration, useCopilotKit } from "../providers";
+import { getThreadClone } from "./use-agent";
 import { ReactCustomMessageRendererPosition } from "../types/react-custom-message-renderer";
 import { Message } from "@ag-ui/core";
 
@@ -38,7 +39,11 @@ export function useRenderCustomMessages() {
       copilotkit.getRunIdForMessage(agentId, threadId, message.id) ??
       copilotkit.getRunIdsForThread(agentId, threadId).slice(-1)[0];
     const runId = resolvedRunId ?? `missing-run-id:${message.id}`;
-    const agent = copilotkit.getAgent(agentId);
+    // Prefer the per-thread clone so that agent.messages reflects the actual
+    // conversation state (messages live on the clone, not the registry agent).
+    // Fall back to the registry agent when no clone exists (no threadId).
+    const registryAgent = copilotkit.getAgent(agentId);
+    const agent = getThreadClone(registryAgent, threadId) ?? registryAgent;
     if (!agent) {
       throw new Error("Agent not found");
     }

package/src/v2/hooks/use-threads.tsx

@@ -6,7 +6,6 @@ import {
   ɵselectThreadsIsLoading,
   ɵselectHasNextPage,
   ɵselectIsFetchingNextPage,
-  type ɵThread as CoreThread,
   type ɵThreadRuntimeContext,
   type ɵThreadStore,
 } from "@copilotkit/core";
@@ -24,7 +23,14 @@ import {
  * Each thread has a unique `id`, an optional human-readable `name`, and
  * timestamp fields tracking creation and update times.
  */
-export interface Thread extends CoreThread {}
+export interface Thread {
+  id: string;
+  agentId: string;
+  name: string | null;
+  archived: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
 
 /**
  * Configuration for the {@link useThreads} hook.
@@ -68,18 +74,18 @@ export interface UseThreadsResult {
   error: Error | null;
   /**
    * `true` when there are more threads available to fetch via
-   * {@link fetchNextPage}. Only meaningful when `limit` is set.
+   * {@link fetchMoreThreads}. Only meaningful when `limit` is set.
    */
-  hasNextPage: boolean;
+  hasMoreThreads: boolean;
   /**
    * `true` while a subsequent page of threads is being fetched.
    */
-  isFetchingNextPage: boolean;
+  isFetchingMoreThreads: boolean;
   /**
-   * Fetch the next page of threads. No-op when {@link hasNextPage} is
-   * `false` or a page fetch is already in progress.
+   * Fetch the next page of threads. No-op when {@link hasMoreThreads} is
+   * `false` or a fetch is already in progress.
    */
-  fetchNextPage: () => void;
+  fetchMoreThreads: () => void;
   /**
    * Rename a thread on the platform.
    * Resolves when the server confirms the update; rejects on failure.
@@ -169,11 +175,25 @@ export function useThreads({
     }),
   );
 
-  const threads = useThreadStoreSelector(store, ɵselectThreads);
+  const coreThreads = useThreadStoreSelector(store, ɵselectThreads);
+  const threads: Thread[] = useMemo(
+    () =>
+      coreThreads.map(
+        ({ id, agentId, name, archived, createdAt, updatedAt }) => ({
+          id,
+          agentId,
+          name,
+          archived,
+          createdAt,
+          updatedAt,
+        }),
+      ),
+    [coreThreads],
+  );
   const storeIsLoading = useThreadStoreSelector(store, ɵselectThreadsIsLoading);
   const storeError = useThreadStoreSelector(store, ɵselectThreadsError);
-  const hasNextPage = useThreadStoreSelector(store, ɵselectHasNextPage);
-  const isFetchingNextPage = useThreadStoreSelector(
+  const hasMoreThreads = useThreadStoreSelector(store, ɵselectHasNextPage);
+  const isFetchingMoreThreads = useThreadStoreSelector(
     store,
     ɵselectIsFetchingNextPage,
   );
@@ -240,15 +260,15 @@ export function useThreads({
     [store],
   );
 
-  const fetchNextPage = useCallback(() => store.fetchNextPage(), [store]);
+  const fetchMoreThreads = useCallback(() => store.fetchNextPage(), [store]);
 
   return {
     threads,
     isLoading,
     error,
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
+    hasMoreThreads,
+    isFetchingMoreThreads,
+    fetchMoreThreads,
     renameThread,
     archiveThread,
     deleteThread,

package/src/v2/index.ts

@@ -15,8 +15,12 @@ export * from "./providers";
 export * from "./types";
 export * from "./lib/react-core";
 export { createA2UIMessageRenderer } from "./a2ui/A2UIMessageRenderer";
-export type { A2UIMessageRendererOptions } from "./a2ui/A2UIMessageRenderer";
+export type {
+  A2UIMessageRendererOptions,
+  A2UIUserAction,
+} from "./a2ui/A2UIMessageRenderer";
 export type { Theme as A2UITheme } from "@copilotkit/a2ui-renderer";
+export { defaultTheme as a2uiDefaultTheme } from "@copilotkit/a2ui-renderer";
 
 // V1 backward-compat re-exports
 export { CopilotKit } from "../components/copilot-provider/copilotkit";

package/src/v2/lib/__tests__/processPartialHtml.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect } from "vitest";
+import {
+  processPartialHtml,
+  extractCompleteStyles,
+} from "../processPartialHtml";
+
+describe("processPartialHtml", () => {
+  it("returns empty string for empty input", () => {
+    expect(processPartialHtml("")).toBe("");
+  });
+
+  it("strips incomplete tag at end", () => {
+    expect(processPartialHtml('<div>Hello<span class="fo')).toBe("<div>Hello");
+  });
+
+  it("strips complete <style> blocks", () => {
+    const input =
+      "<div>Hello</div><style>.foo { color: red; }</style><p>World</p>";
+    expect(processPartialHtml(input)).toBe("<div>Hello</div><p>World</p>");
+  });
+
+  it("strips complete <script> blocks", () => {
+    const input = '<div>Hello</div><script>alert("hi")</script><p>World</p>';
+    expect(processPartialHtml(input)).toBe("<div>Hello</div><p>World</p>");
+  });
+
+  it("strips incomplete <style> block", () => {
+    const input = "<div>Hello</div><style>.foo { color:";
+    expect(processPartialHtml(input)).toBe("<div>Hello</div>");
+  });
+
+  it("strips incomplete <script> block", () => {
+    const input = '<div>Hello</div><script>const x = "val';
+    expect(processPartialHtml(input)).toBe("<div>Hello</div>");
+  });
+
+  it("strips incomplete HTML entities", () => {
+    expect(processPartialHtml("<p>Hello &amp")).toBe("<p>Hello ");
+    expect(processPartialHtml("<p>Hello &#123")).toBe("<p>Hello ");
+  });
+
+  it("preserves complete entities", () => {
+    expect(processPartialHtml("<p>Hello &amp; World</p>")).toBe(
+      "<p>Hello &amp; World</p>",
+    );
+  });
+
+  it("extracts body content from full HTML document", () => {
+    const input =
+      "<html><head><title>Test</title></head><body><p>Content</p></body></html>";
+    expect(processPartialHtml(input)).toBe("<p>Content</p>");
+  });
+
+  it("handles <body> with attributes", () => {
+    const input = '<body class="dark"><p>Content</p></body>';
+    expect(processPartialHtml(input)).toBe("<p>Content</p>");
+  });
+
+  it("handles no <body> tag — returns full processed string", () => {
+    const input = "<div><p>Just content</p></div>";
+    expect(processPartialHtml(input)).toBe("<div><p>Just content</p></div>");
+  });
+
+  it("handles combined edge cases: full document with styles, scripts, and incomplete tag", () => {
+    const input =
+      '<html><head><style>body { margin: 0; }</style></head><body><div>Hello</div><script>console.log("x")</script><p>World</p><span class="in';
+    expect(processPartialHtml(input)).toBe("<div>Hello</div><p>World</p>");
+  });
+
+  it("handles body content with incomplete style at end", () => {
+    const input = "<body><div>Content</div><style>.partial {";
+    expect(processPartialHtml(input)).toBe("<div>Content</div>");
+  });
+});
+
+describe("extractCompleteStyles", () => {
+  it("returns empty string for no styles", () => {
+    expect(extractCompleteStyles("<div>Hello</div>")).toBe("");
+  });
+
+  it("returns empty string for empty input", () => {
+    expect(extractCompleteStyles("")).toBe("");
+  });
+
+  it("extracts a single complete style block", () => {
+    const input =
+      "<div>Hello</div><style>.foo { color: red; }</style><p>World</p>";
+    expect(extractCompleteStyles(input)).toBe(
+      "<style>.foo { color: red; }</style>",
+    );
+  });
+
+  it("extracts multiple complete style blocks", () => {
+    const input = "<style>a{}</style><div>X</div><style>b{}</style>";
+    expect(extractCompleteStyles(input)).toBe(
+      "<style>a{}</style><style>b{}</style>",
+    );
+  });
+
+  it("ignores incomplete style blocks", () => {
+    const input = "<style>.complete{}</style><style>.incomplete {";
+    expect(extractCompleteStyles(input)).toBe("<style>.complete{}</style>");
+  });
+
+  it("extracts styles from head", () => {
+    const input =
+      "<head><style>body { margin: 0; }</style></head><body><p>Hi</p></body>";
+    expect(extractCompleteStyles(input)).toBe(
+      "<style>body { margin: 0; }</style>",
+    );
+  });
+});

package/src/v2/lib/__tests__/slots.test.ts

@@ -0,0 +1,56 @@
+import { renderHook } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { useShallowStableRef } from "../slots";
+
+describe("useShallowStableRef", () => {
+  it("returns the same reference when called twice with shallowly equal plain objects", () => {
+    const initial = { a: 1 };
+    const { result, rerender } = renderHook(
+      ({ value }: { value: { a: number } }) => useShallowStableRef(value),
+      { initialProps: { value: initial } },
+    );
+
+    const firstRef = result.current;
+    rerender({ value: { a: 1 } }); // new object, same shape
+    expect(result.current).toBe(firstRef);
+  });
+
+  it("updates the reference when the value changes", () => {
+    const { result, rerender } = renderHook(
+      ({ value }: { value: { a: number } }) => useShallowStableRef(value),
+      { initialProps: { value: { a: 1 } } },
+    );
+
+    const firstRef = result.current;
+    rerender({ value: { a: 2 } });
+    expect(result.current).not.toBe(firstRef);
+    expect(result.current).toEqual({ a: 2 });
+  });
+
+  it("handles undefined without crashing", () => {
+    const { result } = renderHook(() =>
+      useShallowStableRef(undefined as unknown as { a: number }),
+    );
+    expect(result.current).toBeUndefined();
+  });
+
+  it("handles null without crashing", () => {
+    const { result } = renderHook(() =>
+      useShallowStableRef(null as unknown as { a: number }),
+    );
+    expect(result.current).toBeNull();
+  });
+
+  it("does not shallow-compare arrays — treats them by reference", () => {
+    const arr1 = [1, 2, 3];
+    const { result, rerender } = renderHook(
+      ({ value }: { value: number[] }) => useShallowStableRef(value),
+      { initialProps: { value: arr1 } },
+    );
+
+    const firstRef = result.current;
+    rerender({ value: [1, 2, 3] }); // new array, same contents
+    // arrays are not plain objects — reference should update
+    expect(result.current).not.toBe(firstRef);
+  });
+});

package/src/v2/lib/processPartialHtml.ts

@@ -0,0 +1,45 @@
+/**
+ * Extracts all complete `<style>` blocks from the raw HTML.
+ * Returns the concatenated style tags, suitable for injection into `<head>`.
+ */
+export function extractCompleteStyles(html: string): string {
+  const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
+  return matches ? matches.join("") : "";
+}
+
+/**
+ * Processes raw accumulated HTML for safe preview via innerHTML injection.
+ * Pure function, no DOM dependencies.
+ *
+ * Pipeline (order matters):
+ * 1. Strip incomplete tag at end
+ * 2. Strip complete <style>, <script>, and <head> blocks
+ * 3. Strip incomplete <style>/<script>/<head> blocks
+ * 4. Strip incomplete HTML entities
+ * 5. Extract body content (or use full string if no <body>)
+ */
+export function processPartialHtml(html: string): string {
+  let result = html;
+
+  // 1. Strip incomplete tag at end — e.g. `<div class="fo`
+  result = result.replace(/<[^>]*$/, "");
+
+  // 2. Strip complete <style>, <script>, and <head> blocks
+  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
+
+  // 3. Strip incomplete <style>/<script>/<head> blocks (opening tag, no close)
+  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
+
+  // 4. Strip incomplete HTML entities — e.g. `&amp` without semicolon
+  result = result.replace(/&[a-zA-Z0-9#]*$/, "");
+
+  // 5. Extract body content
+  const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
+  if (bodyMatch) {
+    result = bodyMatch[1]!;
+    // Strip </body> and everything after
+    result = result.replace(/<\/body>[\s\S]*/i, "");
+  }
+
+  return result;
+}