fix(react-core): route turn-2 Enter to send during interrupt-resume instead of aborting the run

On consecutive interrupts, pressing Enter for the second turn (turn-2) while
the resumed run from turn-1 was still in flight routed the keystroke to the
STOP action, aborting the in-flight resume instead of sending the new message.

The fix gates the Enter handler on `canSend` so a pending/running state no
longer maps Enter to STOP, and `onSubmitInput` now awaits the in-flight run's
completion before dispatching the queued message — the message is sent after
the current run finishes rather than aborting it.

Also hardens the queuing and attachment tests to cover the consecutive-
interrupt path and the send-after-run-completes behavior.

Author: jpr5

packages/react-core/src/v2/components/chat/CopilotChat.tsx

@@ -191,6 +191,15 @@ export function CopilotChat({
     consumeAttachments,
   } = useAttachments({ config: attachmentsConfig });
 
+  // onSubmitInput awaits an in-flight run before sending the new message, so
+  // it must re-check the "uploading" guard against FRESH state AFTER the await
+  // — the closure-captured `selectedAttachments` is stale across the await
+  // (an upload can start during the wait).
+  const selectedAttachmentsRef = useRef(selectedAttachments);
+  useEffect(() => {
+    selectedAttachmentsRef.current = selectedAttachments;
+  }, [selectedAttachments]);
+
   // Check if transcription is enabled
   const isTranscriptionEnabled = copilotkit.audioFileTranscriptionEnabled;
 
@@ -288,14 +297,77 @@ export function CopilotChat({
 
   const onSubmitInput = useCallback(
     async (value: string) => {
-      // Block if uploads in progress
-      const hasUploading = selectedAttachments.some(
-        (a) => a.status === "uploading",
-      );
-      if (hasUploading) {
+      // Block if uploads in progress (fast fail against current state before
+      // the value is committed — re-checked against live state after the
+      // await below, since an upload can start during the wait).
+      if (
+        selectedAttachmentsRef.current.some((a) => a.status === "uploading")
+      ) {
+        console.error(
+          "[CopilotKit] Cannot send while attachments are uploading (pre-await guard)",
+        );
+        setTranscriptionError("Cannot send while attachments are uploading.");
+        return;
+      }
+
+      // Clear the input immediately so the composer reflects the accepted send
+      // even though the actual dispatch may be deferred behind the in-flight
+      // run. If the post-await guard later BLOCKS the send (e.g. an upload
+      // starts during the await), the typed text is RESTORED to the composer
+      // below so it is never silently lost.
+      setInputValue("");
+
+      // If a run is already in flight, let it finish before sending the new
+      // message instead of pre-empting it. `copilotkit.runAgent` would
+      // otherwise call `agent.detachActiveRun()` and ABORT the in-flight run.
+      // That abort is harmful when the in-flight run is an interrupt RESUME:
+      // the resume re-enters and completes the paused agent graph, and
+      // aborting it mid-flight leaves the graph paused — so this new message
+      // lands as another resume of the SAME paused graph (re-interrupting
+      // with no fresh payload) instead of starting a clean new turn. This is
+      // the consecutive-interrupt regression: pick turn-1's slot (kicks off
+      // the resume), then immediately send turn-2's message — without waiting,
+      // turn-2 aborts the resume and the 2nd interrupt's card never mounts.
+      // Awaiting the active run's completion serializes the two turns so the
+      // resume finishes (graph completes) before the new message starts a
+      // fresh run.
+      if (
+        agent.isRunning &&
+        "activeRunCompletionPromise" in agent &&
+        (agent as unknown as { activeRunCompletionPromise?: Promise<unknown> })
+          .activeRunCompletionPromise
+      ) {
+        try {
+          await (
+            agent as unknown as {
+              activeRunCompletionPromise?: Promise<unknown>;
+            }
+          ).activeRunCompletionPromise;
+        } catch (error) {
+          // The in-flight run rejected — proceed with the new send anyway,
+          // but log so a chronically-failing in-flight run is observable.
+          console.error(
+            "CopilotChat: in-flight run rejected while queuing send",
+            error,
+          );
+        }
+      }
+
+      // Re-check the uploading guard against LIVE attachment state: an upload
+      // can start (or stay in flight) during the await above, so a snapshot
+      // taken before the await could consume an attachment with an incomplete
+      // source. On block, RESTORE the typed text to the composer (it was
+      // optimistically cleared on accept) so the user's input is not silently
+      // lost, and surface a user-visible banner — console.error alone is
+      // invisible to the user.
+      if (
+        selectedAttachmentsRef.current.some((a) => a.status === "uploading")
+      ) {
         console.error(
-          "[CopilotKit] Cannot send while attachments are uploading",
+          "[CopilotKit] Cannot send while attachments are uploading (post-await re-check)",
         );
+        setTranscriptionError("Cannot send while attachments are uploading.");
+        setInputValue(value);
         return;
       }
 
@@ -329,8 +401,6 @@ export function CopilotChat({
         });
       }
 
-      // Clear input after submitting
-      setInputValue("");
       try {
         await copilotkit.runAgent({ agent });
       } catch (error) {
@@ -339,7 +409,7 @@ export function CopilotChat({
     },
     // copilotkit is intentionally excluded — it is a stable ref that never changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [agent, selectedAttachments, consumeAttachments],
+    [agent, consumeAttachments],
   );
 
   const handleSelectSuggestion = useCallback(

packages/react-core/src/v2/components/chat/CopilotChatInput.tsx

@@ -1,8 +1,7 @@
+import type { KeyboardEvent, ChangeEvent } from "react";
 import React, {
   useState,
   useRef,
-  KeyboardEvent,
-  ChangeEvent,
   useEffect,
   useLayoutEffect,
   forwardRef,
@@ -13,8 +12,8 @@ import React, {
 import { twMerge } from "tailwind-merge";
 import { Plus, Mic, ArrowUp, X, Check, Square, Loader2 } from "lucide-react";
 
+import type { CopilotChatLabels } from "../../providers/CopilotChatConfigurationProvider";
 import {
-  CopilotChatLabels,
   useCopilotChatConfiguration,
   CopilotChatDefaultLabels,
 } from "../../providers/CopilotChatConfigurationProvider";
@@ -36,7 +35,8 @@ import {
 } from "../../components/ui/dropdown-menu";
 
 import { CopilotChatAudioRecorder } from "./CopilotChatAudioRecorder";
-import { renderSlot, WithSlots } from "../../lib/slots";
+import type { WithSlots } from "../../lib/slots";
+import { renderSlot } from "../../lib/slots";
 import { cn } from "../../lib/utils";
 
 export type CopilotChatInputMode = "input" | "transcribe" | "processing";
@@ -456,7 +456,15 @@ export function CopilotChatInput({
 
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      if (isProcessing) {
+      // When the composer holds sendable text, Enter ALWAYS sends — even
+      // while a run is in flight. A non-empty composer is unambiguous intent
+      // to send a new message, not to stop the agent. This is what unblocks
+      // consecutive interrupt pills: after picking turn-1's slot the resume
+      // run is still streaming (`isProcessing` true) when the user types and
+      // Enters turn-2's prompt; routing that Enter to `onStop` aborted the
+      // run and the next interrupt never surfaced. Stop stays reachable via
+      // Enter only when the composer is empty (the genuine stop affordance).
+      if (isProcessing && !canSend) {
         onStop?.();
       } else {
         send();
@@ -510,6 +518,10 @@ export function CopilotChatInput({
   const canStop = !!onStop;
 
   const handleSendButtonClick = () => {
+    // The send/stop button is an explicit control: when a run is in flight it
+    // renders as a Stop (Square) button, so a click maps to stop regardless of
+    // composer contents. The Enter key behaves differently (see handleKeyDown):
+    // a non-empty composer + Enter sends a new message rather than stopping.
     if (isProcessing) {
       onStop?.();
       return;

packages/react-core/src/v2/components/chat/__tests__/CopilotChat.attachments.test.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { screen, fireEvent, waitFor } from "@testing-library/react";
+import { screen, fireEvent, waitFor, act } from "@testing-library/react";
 import {
   MockStepwiseAgent,
   renderWithCopilotKit,
+  runStartedEvent,
 } from "../../../__tests__/utils/test-helpers";
 import { CopilotChat } from "../CopilotChat";
 import type { AttachmentUploadError } from "@copilotkit/shared";
-import { type BaseEvent, type RunAgentInput } from "@ag-ui/client";
-import { Observable, EMPTY } from "rxjs";
+import type { BaseEvent, RunAgentInput } from "@ag-ui/client";
+import type { Observable } from "rxjs";
+import { EMPTY } from "rxjs";
 
 class NoopAgent extends MockStepwiseAgent {
   run(_input: RunAgentInput): Observable<BaseEvent> {
@@ -165,4 +167,122 @@ describe("CopilotChat attachments", () => {
       expect(onUploadFailed).not.toHaveBeenCalled();
     });
   });
+
+  describe("uploading guard across the in-flight-run await", () => {
+    it("blocks the send and restores the typed text when an upload starts during the await window", async () => {
+      // onSubmitInput checks the uploading guard, then (if a run is in flight)
+      // awaits the run's completion before consuming attachments. If an upload
+      // starts DURING that await, a guard taken only before the await would
+      // miss it and consume/drop the in-progress attachment. The guard must be
+      // re-checked against LIVE state after the await — blocking the send while
+      // any attachment is still uploading, and RESTORING the optimistically
+      // cleared composer text so the user's input is never silently lost.
+      const agent = new MockStepwiseAgent();
+
+      // Open the await window: a run is in flight with a settleable
+      // completion promise. (Attached after the run is in flight below so the
+      // connect/run setup does not overwrite it.)
+      let resolveInFlight: () => void = () => {};
+      const inFlight = new Promise<void>((resolve) => {
+        resolveInFlight = resolve;
+      });
+
+      // Upload that we keep pending so the attachment stays "uploading".
+      let resolveUpload: (v: {
+        type: "url";
+        value: string;
+        mimeType?: string;
+      }) => void = () => {};
+      const onUpload = () =>
+        new Promise<{ type: "url"; value: string; mimeType?: string }>(
+          (resolve) => {
+            resolveUpload = resolve;
+          },
+        );
+
+      const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+      const addMessageSpy = vi.spyOn(agent, "addMessage");
+
+      try {
+        const { container } = renderWithCopilotKit({
+          agent,
+          children: (
+            <CopilotChat
+              welcomeScreen={false}
+              attachments={{ enabled: true, onUpload }}
+            />
+          ),
+        });
+
+        const input = await screen.findByRole("textbox");
+
+        // Run goes in flight (so the send will await its completion).
+        agent.emit(runStartedEvent());
+        await waitFor(() => {
+          expect(agent.isRunning).toBe(true);
+        });
+        (
+          agent as unknown as { activeRunCompletionPromise?: Promise<void> }
+        ).activeRunCompletionPromise = inFlight;
+
+        // No attachments yet — the pre-await guard passes. Fire the send; it
+        // parks on the in-flight run's completion promise.
+        fireEvent.change(input, {
+          target: { value: "Send with no files yet" },
+        });
+        fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+        // DURING the await, the user drops a file that begins uploading.
+        const dropTarget = container.querySelector(
+          '[data-testid="copilot-chat"]',
+        );
+        if (!dropTarget) throw new Error("no drop target");
+        const file = createFile("late.png", 50, "image/png");
+        await act(async () => {
+          fireEvent.drop(dropTarget, {
+            dataTransfer: { files: [file], types: ["Files"] },
+          });
+        });
+
+        // The attachment is now "uploading" (onUpload still pending).
+        await waitFor(() => {
+          expect(
+            container.querySelector('[data-testid="copilot-chat"]'),
+          ).toBeTruthy();
+        });
+
+        // Release the in-flight run so the queued send resumes past the await.
+        await act(async () => {
+          resolveInFlight();
+          await Promise.resolve();
+        });
+
+        // The re-checked guard blocks the send: the POST-AWAIT re-check fires
+        // (distinct log message proves it ran after the await, not the
+        // pre-await fast-fail) and no message is dispatched while the
+        // attachment is still uploading.
+        await waitFor(() => {
+          expect(errorSpy).toHaveBeenCalledWith(
+            "[CopilotKit] Cannot send while attachments are uploading (post-await re-check)",
+          );
+        });
+        expect(addMessageSpy).not.toHaveBeenCalled();
+
+        // The typed text is PRESERVED in the composer (restored on the blocked
+        // path) so the user's input is never silently lost.
+        await waitFor(() => {
+          const composer = screen.getByRole("textbox") as HTMLTextAreaElement;
+          expect(composer.value).toBe("Send with no files yet");
+        });
+
+        // Cleanup: let the pending upload resolve.
+        await act(async () => {
+          resolveUpload({ type: "url", value: "https://example.com/late.png" });
+          await Promise.resolve();
+        });
+      } finally {
+        errorSpy.mockRestore();
+      }
+    });
+  });
 });