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

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-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;
+}

package/src/v2/lib/slots.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import { twMerge } from "tailwind-merge";
 
 /** Existing union (unchanged) */
@@ -26,6 +26,47 @@ export function shallowEqual<T extends Record<string, unknown>>(
   return true;
 }
 
+/**
+ * Returns true only for plain JS objects (`{}`), excluding arrays, Dates,
+ * class instances, and other exotic objects that happen to have typeof "object".
+ */
+function isPlainObject(obj: unknown): obj is Record<string, unknown> {
+  return (
+    obj !== null &&
+    typeof obj === "object" &&
+    Object.prototype.toString.call(obj) === "[object Object]"
+  );
+}
+
+/**
+ * Returns the same reference as long as the value is shallowly equal to the
+ * previous render's value.
+ *
+ * - Identical references bail out immediately (O(1)).
+ * - Plain objects ({}) are shallow-compared key-by-key.
+ * - Arrays, Dates, class instances, functions, and primitives are compared by
+ *   reference only — shallowEqual is never called on non-plain objects, which
+ *   avoids incorrect equality for e.g. [1,2] vs [1,2] (different arrays).
+ *
+ * Typical use: stabilize inline slot props so MemoizedSlotWrapper's shallow
+ * equality check isn't defeated by a new object reference on every render.
+ */
+export function useShallowStableRef<T>(value: T): T {
+  const ref = useRef(value);
+
+  // 1. Identical reference — bail early, no comparison needed.
+  if (ref.current === value) return ref.current;
+
+  // 2. Both are plain objects — shallow-compare to detect structural equality.
+  if (isPlainObject(ref.current) && isPlainObject(value)) {
+    if (shallowEqual(ref.current, value)) return ref.current;
+  }
+
+  // 3. Different values (or non-comparable types) — update the ref.
+  ref.current = value;
+  return ref.current;
+}
+
 /** Utility: concrete React elements for every slot */
 type SlotElements<S> = { [K in keyof S]: React.ReactElement };
 

package/src/v2/providers/CopilotChatConfigurationProvider.tsx

@@ -9,6 +9,7 @@ import React, {
   useState,
 } from "react";
 import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkit/shared";
+import { useShallowStableRef } from "../lib/slots";
 
 // Default labels
 export const CopilotChatDefaultLabels = {
@@ -16,7 +17,7 @@ export const CopilotChatDefaultLabels = {
   chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
   chatInputToolbarCancelTranscribeButtonLabel: "Cancel",
   chatInputToolbarFinishTranscribeButtonLabel: "Finish",
-  chatInputToolbarAddButtonLabel: "Add photos or files",
+  chatInputToolbarAddButtonLabel: "Add attachments",
   chatInputToolbarToolsButtonLabel: "Tools",
   assistantMessageToolbarCopyCodeLabel: "Copy",
   assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
@@ -65,13 +66,18 @@ export const CopilotChatConfigurationProvider: React.FC<
 > = ({ children, labels, agentId, threadId, isModalDefaultOpen }) => {
   const parentConfig = useContext(CopilotChatConfiguration);
 
+  // Stabilize labels references so that inline objects (new reference on every
+  // parent render) don't invalidate mergedLabels and churn the context value.
+  // parentConfig?.labels is already stabilized by the parent provider's own
+  // useShallowStableRef, so we only need to stabilize the local labels prop.
+  const stableLabels = useShallowStableRef(labels);
   const mergedLabels: CopilotChatLabels = useMemo(
     () => ({
       ...CopilotChatDefaultLabels,
       ...(parentConfig?.labels ?? {}),
-      ...(labels ?? {}),
+      ...(stableLabels ?? {}),
     }),
-    [labels, parentConfig?.labels],
+    [stableLabels, parentConfig?.labels],
   );
 
   const resolvedAgentId = agentId ?? parentConfig?.agentId ?? DEFAULT_AGENT_ID;