@copilotkit/react-core 1.56.0 → 1.56.2-canary.pin-to-send

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-core",
-  "version": "1.56.0",
+  "version": "1.56.2-canary.pin-to-send",
   "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/core": "1.56.2-canary.pin-to-send",
+    "@copilotkit/shared": "1.56.2-canary.pin-to-send",
+    "@copilotkit/runtime-client-gql": "1.56.2-canary.pin-to-send",
+    "@copilotkit/web-inspector": "1.56.2-canary.pin-to-send",
+    "@copilotkit/a2ui-renderer": "1.56.2-canary.pin-to-send"
   },
   "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/CopilotChat.tsx

@@ -33,6 +33,10 @@ import {
   transcribeAudio,
   TranscriptionError,
 } from "../../lib/transcription-client";
+import {
+  LastUserMessageContext,
+  type LastUserMessageState,
+} from "./last-user-message-context";
 
 export type CopilotChatProps = Omit<
   CopilotChatViewProps,
@@ -97,9 +101,10 @@ export function CopilotChat({
   // Apply priority: props > existing config > defaults
   const resolvedAgentId =
     agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID;
+  const providedThreadId = threadId ?? existingConfig?.threadId;
   const resolvedThreadId = useMemo(
-    () => threadId ?? existingConfig?.threadId ?? randomUUID(),
-    [threadId, existingConfig?.threadId],
+    () => providedThreadId ?? randomUUID(),
+    [providedThreadId],
   );
 
   const { agent } = useAgent({
@@ -191,7 +196,24 @@ export function CopilotChat({
     ...restProps
   } = props;
 
+  // Tracks the last threadId for which connectAgent has completed (success or
+  // failure). When the user supplies a threadId, we're in "resume existing
+  // thread" mode — the welcome screen should be suppressed until the connect
+  // resolves, otherwise switching threads flashes the welcome screen while the
+  // new thread's messages are still en route.
+  const [lastConnectedThreadId, setLastConnectedThreadId] = useState<
+    string | null
+  >(null);
+  const isConnecting =
+    !!providedThreadId && lastConnectedThreadId !== resolvedThreadId;
+
   useEffect(() => {
+    // When no threadId was supplied by the caller, resolvedThreadId is a UUID
+    // minted in this browser tab. The backend has never seen it, so /connect
+    // would always 404. Skip the call — a real thread is only created once
+    // the user runs the agent for the first time.
+    if (!providedThreadId) return;
+
     let detached = false;
 
     // Create a fresh AbortController so we can cancel the HTTP request on cleanup.
@@ -212,6 +234,25 @@ export function CopilotChat({
         // connectAgent already emits via the subscriber system, but catch
         // here to prevent unhandled rejections from unexpected errors.
         console.error("CopilotChat: connectAgent failed", error);
+      } finally {
+        // Whether the connect succeeded or failed, we're no longer in the
+        // transitional "connecting" state for this thread — unblock the
+        // welcome-screen-suppression so the view can settle.
+        //
+        // Defer one animation frame so any trailing React commits from the
+        // bootstrap replay (final assistant message content) paint before
+        // isConnecting flips off. Without this, suggestions + copy button
+        // can briefly appear against an incompletely-laid-out message tree
+        // and visibly snap once the last text chunk lands.
+        if (!detached) {
+          const raf =
+            typeof requestAnimationFrame === "function"
+              ? requestAnimationFrame
+              : (cb: () => void) => setTimeout(cb, 16);
+          raf(() => {
+            if (!detached) setLastConnectedThreadId(resolvedThreadId);
+          });
+        }
       }
     };
     connect(agent);
@@ -229,7 +270,7 @@ export function CopilotChat({
     };
     // copilotkit is intentionally excluded — it is a stable ref that never changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [resolvedThreadId, agent, resolvedAgentId]);
+  }, [resolvedThreadId, agent, resolvedAgentId, providedThreadId]);
 
   const onSubmitInput = useCallback(
     async (value: string) => {
@@ -497,6 +538,37 @@ export function CopilotChat({
     [messagesMemoKey],
   );
 
+  // Compute the ID of the last user message for scroll-pinning logic.
+  const lastUserMessageId = useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].role === "user") return messages[i].id;
+    }
+    return null;
+  }, [messages]);
+
+  // Track a nonce that increments each time a new user message ID appears.
+  // Using useState ensures the context value propagates correctly on the
+  // render that follows the state update (approach b from the design doc).
+  const [sendNonce, setSendNonce] = useState(0);
+  // Seed with the current value so restoring a thread with existing messages
+  // does not count as a new send. Only later-render id transitions bump.
+  const prevLastUserMessageIdRef = useRef<string | null>(lastUserMessageId);
+
+  useEffect(() => {
+    if (
+      lastUserMessageId &&
+      lastUserMessageId !== prevLastUserMessageIdRef.current
+    ) {
+      setSendNonce((n) => n + 1);
+      prevLastUserMessageIdRef.current = lastUserMessageId;
+    }
+  }, [lastUserMessageId]);
+
+  const lastUserMessageState = useMemo<LastUserMessageState>(
+    () => ({ id: lastUserMessageId, sendNonce }),
+    [lastUserMessageId, sendNonce],
+  );
+
   const finalProps: CopilotChatViewProps = {
     ...mergedProps,
     messages,
@@ -521,6 +593,8 @@ export function CopilotChat({
     onDragOver: handleDragOver,
     onDragLeave: handleDragLeave,
     onDrop: handleDrop,
+    isConnecting,
+    hasExplicitThreadId: !!providedThreadId,
   };
 
   // Always create a provider with merged values
@@ -564,7 +638,9 @@ export function CopilotChat({
             {transcriptionError}
           </div>
         )}
-        {RenderedChatView}
+        <LastUserMessageContext.Provider value={lastUserMessageState}>
+          {RenderedChatView}
+        </LastUserMessageContext.Provider>
       </div>
     </CopilotChatConfigurationProvider>
   );

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

@@ -87,6 +87,19 @@ type CopilotChatInputRestProps = {
   containerRef?: React.Ref<HTMLDivElement>;
   /** Whether to show the disclaimer. Default: true for absolute positioning, false for static */
   showDisclaimer?: boolean;
+  /**
+   * Set to `true` when the input sits at the bottom of its container as a
+   * flex-last-child (visible position is driven by layout, not CSS
+   * positioning). Triggers reservation of bottom space for the fixed
+   * CopilotKit license banner via the
+   * `--copilotkit-license-banner-offset` CSS var so the two don't overlap.
+   *
+   * Not needed when `positioning === "absolute"`; that mode already pins the
+   * input to the bottom and picks up the same reservation automatically.
+   * Leave unset (default `false`) for inputs rendered mid-layout such as the
+   * welcome screen, where the banner offset would push the input off-center.
+   */
+  bottomAnchored?: boolean;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">;
 
 type CopilotChatInputBaseProps = WithSlots<
@@ -130,6 +143,7 @@ export function CopilotChatInput({
   keyboardHeight = 0,
   containerRef,
   showDisclaimer,
+  bottomAnchored = false,
   textArea,
   sendButton,
   startTranscribeButton,
@@ -384,6 +398,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 +475,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 +492,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 +640,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;
     }
 
@@ -1078,6 +1111,14 @@ export function CopilotChatInput({
         transform:
           keyboardHeight > 0 ? `translateY(-${keyboardHeight}px)` : undefined,
         transition: "transform 0.2s ease-out",
+        // Reserve room when the fixed license banner is visible so it doesn't
+        // overlap the input. Applied only for bottom-anchored inputs (either
+        // `positioning === "absolute"`, or an explicitly-flagged flex-last-child
+        // input in run state). The welcome-screen input sits mid-layout and
+        // must stay still when the banner is present.
+        ...(positioning === "absolute" || bottomAnchored
+          ? { paddingBottom: "var(--copilotkit-license-banner-offset, 0px)" }
+          : {}),
       }}
       {...props}
     >