@copilotkit/react-core 1.56.0 → 1.56.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-core",
-  "version": "1.56.0",
+  "version": "1.56.2",
   "private": false,
   "keywords": [
     "ai",
@@ -73,11 +73,11 @@
     "untruncate-json": "^0.0.1",
     "use-stick-to-bottom": "^1.1.1",
     "zod-to-json-schema": "^3.24.5",
-    "@copilotkit/a2ui-renderer": "1.56.0",
-    "@copilotkit/core": "1.56.0",
-    "@copilotkit/runtime-client-gql": "1.56.0",
-    "@copilotkit/web-inspector": "1.56.0",
-    "@copilotkit/shared": "1.56.0"
+    "@copilotkit/a2ui-renderer": "1.56.2",
+    "@copilotkit/shared": "1.56.2",
+    "@copilotkit/web-inspector": "1.56.2",
+    "@copilotkit/core": "1.56.2",
+    "@copilotkit/runtime-client-gql": "1.56.2"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",

package/src/components/CopilotListeners.tsx

@@ -60,16 +60,27 @@ const usePredictStateSubscription = (agent?: AbstractAgent) => {
   }, [agent, getSubscriber]);
 };
 
-export function CopilotListeners() {
-  const { copilotkit } = useCopilotKit();
+function CopilotListenersAgentSubscription() {
   const existingConfig = useCopilotChatConfiguration();
   const resolvedAgentId = existingConfig?.agentId;
-  const { setBannerError } = useToast();
 
   const { agent } = useAgent({ agentId: resolvedAgentId });
 
   usePredictStateSubscription(agent);
 
+  return null;
+}
+
+export function CopilotListeners() {
+  const { copilotkit } = useCopilotKit();
+  const { setBannerError } = useToast();
+
+  // Only render the agent subscription when agents are registered or a runtime
+  // is configured. Without this guard, useAgent() throws when the agents map is
+  // empty and no runtimeUrl is set (#3249).
+  const hasAgents = Object.keys(copilotkit.agents ?? {}).length > 0;
+  const hasRuntime = copilotkit.runtimeUrl !== undefined;
+
   useEffect(() => {
     const subscriber: CopilotKitCoreSubscriber = {
       onError: ({ error, code, context }) => {
@@ -122,5 +133,5 @@ export function CopilotListeners() {
     };
   }, [copilotkit?.subscribe]);
 
-  return null;
+  return hasAgents || hasRuntime ? <CopilotListenersAgentSubscription /> : null;
 }

package/src/components/__tests__/CopilotListeners.test.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "@testing-library/react";
+import { CopilotListeners } from "../CopilotListeners";
+import { CopilotKitProvider } from "../../v2/providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../v2/providers/CopilotChatConfigurationProvider";
+import { ToastProvider } from "../toast/toast-provider";
+
+/**
+ * Regression test for #3249: CopilotListeners throws when no agents registered.
+ *
+ * When CopilotKitProvider has no agents registered (empty agents map) and no
+ * runtimeUrl, useAgent() inside CopilotListeners throws. The component should
+ * handle this gracefully and render null without crashing.
+ */
+describe("CopilotListeners (#3249)", () => {
+  beforeEach(() => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  it("does not throw when no agents are registered", () => {
+    // No agents, no runtimeUrl - should not crash
+    expect(() => {
+      render(
+        <ToastProvider enabled={false}>
+          <CopilotKitProvider>
+            <CopilotChatConfigurationProvider
+              agentId="default"
+              threadId="test-thread"
+            >
+              <CopilotListeners />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        </ToastProvider>,
+      );
+    }).not.toThrow();
+  });
+});

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

@@ -98,7 +98,7 @@ export function CopilotChatAssistantMessage({
     thumbsUpButton,
     CopilotChatAssistantMessage.ThumbsUpButton,
     {
-      onClick: onThumbsUp,
+      onClick: onThumbsUp ? () => onThumbsUp(message) : undefined,
     },
   );
 
@@ -106,7 +106,7 @@ export function CopilotChatAssistantMessage({
     thumbsDownButton,
     CopilotChatAssistantMessage.ThumbsDownButton,
     {
-      onClick: onThumbsDown,
+      onClick: onThumbsDown ? () => onThumbsDown(message) : undefined,
     },
   );
 
@@ -114,7 +114,7 @@ export function CopilotChatAssistantMessage({
     readAloudButton,
     CopilotChatAssistantMessage.ReadAloudButton,
     {
-      onClick: onReadAloud,
+      onClick: onReadAloud ? () => onReadAloud(message) : undefined,
     },
   );
 
@@ -122,7 +122,7 @@ export function CopilotChatAssistantMessage({
     regenerateButton,
     CopilotChatAssistantMessage.RegenerateButton,
     {
-      onClick: onRegenerate,
+      onClick: onRegenerate ? () => onRegenerate(message) : undefined,
     },
   );
 

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

@@ -384,6 +384,12 @@ export function CopilotChatInput({
   );
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    // Skip key handling during IME composition (e.g. CJK input).
+    // The compositionend event will fire separately when composition ends.
+    if (e.nativeEvent.isComposing || e.keyCode === 229) {
+      return;
+    }
+
     if (commandQuery !== null && mode === "input") {
       if (e.key === "ArrowDown") {
         if (filteredCommands.length > 0) {
@@ -455,10 +461,12 @@ export function CopilotChatInput({
 
     onSubmitMessage(trimmed);
 
+    // Always clear the input after sending, including controlled mode.
+    // In controlled mode, onChange("") notifies the parent to reset its state.
     if (!isControlled) {
       setInternalValue("");
-      onChange?.("");
     }
+    onChange?.("");
 
     if (inputRef.current) {
       inputRef.current.focus();
@@ -470,6 +478,12 @@ export function CopilotChatInput({
     value: resolvedValue,
     onChange: handleChange,
     onKeyDown: handleKeyDown,
+    onCompositionStart: () => {
+      isComposingRef.current = true;
+    },
+    onCompositionEnd: () => {
+      isComposingRef.current = false;
+    },
     autoFocus: autoFocus,
     className: twMerge(
       "cpk:w-full cpk:py-3",
@@ -612,9 +626,14 @@ export function CopilotChatInput({
     }
   };
 
+  // Track whether an IME composition is active so we can avoid
+  // resetting textarea.value during measurement (which would break
+  // the composition session).
+  const isComposingRef = useRef(false);
+
   const ensureMeasurements = useCallback(() => {
     const textarea = inputRef.current;
-    if (!textarea) {
+    if (!textarea || isComposingRef.current) {
       return;
     }
 

package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.thumbs.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { AssistantMessage } from "@ag-ui/core";
+import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+
+const TEST_THREAD_ID = "test-thread";
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <CopilotKitProvider>
+      <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
+        {component}
+      </CopilotChatConfigurationProvider>
+    </CopilotKitProvider>,
+  );
+};
+
+describe("CopilotChatAssistantMessage thumbs callbacks (#3457)", () => {
+  const message: AssistantMessage = {
+    id: "msg-1",
+    role: "assistant",
+    content: "Hello from the assistant",
+  };
+
+  it("onThumbsUp receives AssistantMessage, not SyntheticEvent", () => {
+    const onThumbsUp = vi.fn();
+
+    renderWithProvider(
+      <CopilotChatAssistantMessage message={message} onThumbsUp={onThumbsUp} />,
+    );
+
+    const thumbsUpButton = screen.getByRole("button", {
+      name: /good response/i,
+    });
+    fireEvent.click(thumbsUpButton);
+
+    expect(onThumbsUp).toHaveBeenCalledTimes(1);
+    const arg = onThumbsUp.mock.calls[0][0];
+    // Should receive AssistantMessage
+    expect(arg).toHaveProperty("id", "msg-1");
+    expect(arg).toHaveProperty("role", "assistant");
+    expect(arg).toHaveProperty("content", "Hello from the assistant");
+    // Should NOT receive a SyntheticEvent (which has nativeEvent, target, etc.)
+    expect(arg).not.toHaveProperty("nativeEvent");
+  });
+
+  it("onThumbsDown receives AssistantMessage, not SyntheticEvent", () => {
+    const onThumbsDown = vi.fn();
+
+    renderWithProvider(
+      <CopilotChatAssistantMessage
+        message={message}
+        onThumbsDown={onThumbsDown}
+      />,
+    );
+
+    const thumbsDownButton = screen.getByRole("button", {
+      name: /bad response/i,
+    });
+    fireEvent.click(thumbsDownButton);
+
+    expect(onThumbsDown).toHaveBeenCalledTimes(1);
+    const arg = onThumbsDown.mock.calls[0][0];
+    expect(arg).toHaveProperty("id", "msg-1");
+    expect(arg).toHaveProperty("role", "assistant");
+    expect(arg).toHaveProperty("content", "Hello from the assistant");
+    expect(arg).not.toHaveProperty("nativeEvent");
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatInput.test.tsx

@@ -985,6 +985,44 @@ describe("CopilotChatInput", () => {
       expect((input as HTMLTextAreaElement).value).toBe("test message");
       expect(mockOnSubmitMessage).toHaveBeenCalledWith("test message");
     });
+
+    it("calls onChange with empty string after submission in controlled mode", () => {
+      const mockOnChange = vi.fn();
+      const mockOnSubmitMessage = vi.fn();
+
+      const { container } = renderWithProvider(
+        <CopilotChatInput
+          value="test message"
+          onChange={mockOnChange}
+          onSubmitMessage={mockOnSubmitMessage}
+        />,
+      );
+
+      const sendButton = getSendButton(container);
+      fireEvent.click(sendButton!);
+
+      expect(mockOnSubmitMessage).toHaveBeenCalledWith("test message");
+      expect(mockOnChange).toHaveBeenCalledWith("");
+    });
+
+    it("calls onChange with empty string after Enter submission in controlled mode", () => {
+      const mockOnChange = vi.fn();
+      const mockOnSubmitMessage = vi.fn();
+
+      renderWithProvider(
+        <CopilotChatInput
+          value="hello world"
+          onChange={mockOnChange}
+          onSubmitMessage={mockOnSubmitMessage}
+        />,
+      );
+
+      const input = screen.getByRole("textbox");
+      fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+
+      expect(mockOnSubmitMessage).toHaveBeenCalledWith("hello world");
+      expect(mockOnChange).toHaveBeenCalledWith("");
+    });
   });
 
   describe("Container dimension cache", () => {

package/src/v2/components/ui/button.tsx

@@ -99,25 +99,26 @@ const buttonVariants = cva(
   },
 );
 
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(function Button(
+  { className, variant, size, asChild = false, ...props },
+  ref,
+) {
   const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
+      ref={ref}
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
   );
-}
+});
 
 export { Button, buttonVariants };

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useRenderCustomMessages } from "../use-render-custom-messages";
+import { CopilotKitProvider } from "../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../providers/CopilotChatConfigurationProvider";
+
+/**
+ * Regression test for #3497: useRenderCustomMessages throws "Agent not found"
+ * when the agent is undefined during the connecting state.
+ *
+ * During initial connection, the agent may not yet be registered in the
+ * CopilotKit registry. The hook should return null gracefully instead of
+ * throwing an error.
+ */
+describe("useRenderCustomMessages (#3497)", () => {
+  it("returns null instead of throwing when agent is not found", () => {
+    // Render the hook inside a CopilotKitProvider with an agentId that
+    // does NOT exist in the registry (simulating connecting state).
+    // The hook should not throw.
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <CopilotKitProvider
+        renderCustomMessages={[
+          {
+            agentId: "nonexistent-agent",
+            render: () => <div>Custom</div>,
+          },
+        ]}
+      >
+        <CopilotChatConfigurationProvider
+          agentId="nonexistent-agent"
+          threadId="test-thread"
+        >
+          {children}
+        </CopilotChatConfigurationProvider>
+      </CopilotKitProvider>
+    );
+
+    const { result } = renderHook(() => useRenderCustomMessages(), { wrapper });
+
+    // The hook should return a function (the render function), not throw
+    // When called, it should handle missing agent gracefully
+    if (typeof result.current === "function") {
+      const output = result.current({
+        message: { id: "msg-1", role: "assistant", content: "test" },
+        position: "after",
+      });
+      // Should return null since agent isn't found
+      expect(output).toBeNull();
+    } else {
+      // If result.current is null, that's also acceptable
+      expect(result.current).toBeNull();
+    }
+  });
+});

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

@@ -45,7 +45,7 @@ export function useRenderCustomMessages() {
     const registryAgent = copilotkit.getAgent(agentId);
     const agent = getThreadClone(registryAgent, threadId) ?? registryAgent;
     if (!agent) {
-      throw new Error("Agent not found");
+      return null;
     }
 
     const messagesIdsInRun = resolvedRunId

package/src/v2/hooks/use-render-tool-call.tsx

@@ -47,6 +47,7 @@ const ToolCallRenderer = React.memo(
       return (
         <RenderComponent
           name={toolName}
+          toolCallId={toolCall.id}
           args={args}
           status={ToolCallStatus.Complete}
           result={toolMessage.content}
@@ -56,6 +57,7 @@ const ToolCallRenderer = React.memo(
       return (
         <RenderComponent
           name={toolName}
+          toolCallId={toolCall.id}
           args={args}
           status={ToolCallStatus.Executing}
           result={undefined}
@@ -65,6 +67,7 @@ const ToolCallRenderer = React.memo(
       return (
         <RenderComponent
           name={toolName}
+          toolCallId={toolCall.id}
           args={args}
           status={ToolCallStatus.InProgress}
           result={undefined}

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

@@ -7,6 +7,7 @@ const EMPTY_DEPS: ReadonlyArray<unknown> = [];
 
 export interface RenderToolInProgressProps<S extends StandardSchemaV1> {
   name: string;
+  toolCallId: string;
   parameters: Partial<InferSchemaOutput<S>>;
   status: "inProgress";
   result: undefined;
@@ -14,6 +15,7 @@ export interface RenderToolInProgressProps<S extends StandardSchemaV1> {
 
 export interface RenderToolExecutingProps<S extends StandardSchemaV1> {
   name: string;
+  toolCallId: string;
   parameters: InferSchemaOutput<S>;
   status: "executing";
   result: undefined;
@@ -21,6 +23,7 @@ export interface RenderToolExecutingProps<S extends StandardSchemaV1> {
 
 export interface RenderToolCompleteProps<S extends StandardSchemaV1> {
   name: string;
+  toolCallId: string;
   parameters: InferSchemaOutput<S>;
   status: "complete";
   result: string;

package/src/v2/types/defineToolCallRenderer.ts

@@ -14,18 +14,21 @@ import { ToolCallStatus } from "@copilotkit/core";
 type RenderProps<T> =
   | {
       name: string;
+      toolCallId: string;
       args: Partial<T>;
       status: ToolCallStatus.InProgress;
       result: undefined;
     }
   | {
       name: string;
+      toolCallId: string;
       args: T;
       status: ToolCallStatus.Executing;
       result: undefined;
     }
   | {
       name: string;
+      toolCallId: string;
       args: T;
       status: ToolCallStatus.Complete;
       result: string;

package/src/v2/types/react-tool-call-renderer.ts

@@ -12,18 +12,21 @@ export interface ReactToolCallRenderer<T = unknown> {
   render: React.ComponentType<
     | {
         name: string;
+        toolCallId: string;
         args: Partial<T>;
         status: ToolCallStatus.InProgress;
         result: undefined;
       }
     | {
         name: string;
+        toolCallId: string;
         args: T;
         status: ToolCallStatus.Executing;
         result: undefined;
       }
     | {
         name: string;
+        toolCallId: string;
         args: T;
         status: ToolCallStatus.Complete;
         result: string;