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

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

@@ -1,4 +1,11 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, {
+  useCallback,
+  useRef,
+  useState,
+  useEffect,
+  useLayoutEffect,
+} from "react";
+import { ScrollElementContext } from "./scroll-element-context";
 import { WithSlots, SlotValue, renderSlot } from "../../lib/slots";
 import CopilotChatMessageView from "./CopilotChatMessageView";
 import CopilotChatInput, {
@@ -10,13 +17,15 @@ import CopilotChatSuggestionView, {
 } from "./CopilotChatSuggestionView";
 import { Suggestion } from "@copilotkit/core";
 import { Message } from "@ag-ui/core";
+import type { Attachment } from "@copilotkit/shared";
+import { CopilotChatAttachmentQueue } from "./CopilotChatAttachmentQueue";
 import { twMerge } from "tailwind-merge";
 import {
   StickToBottom,
   useStickToBottom,
   useStickToBottomContext,
 } from "use-stick-to-bottom";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, Upload } from "lucide-react";
 import { Button } from "../../components/ui/button";
 import { cn } from "../../lib/utils";
 import {
@@ -64,6 +73,14 @@ export type CopilotChatViewProps = WithSlots<
     onCancelTranscribe?: () => void;
     onFinishTranscribe?: () => void;
     onFinishTranscribeWithAudio?: (audioBlob: Blob) => Promise<void>;
+    // Attachment props
+    attachments?: Attachment[];
+    onRemoveAttachment?: (id: string) => void;
+    onAddFile?: () => void;
+    dragOver?: boolean;
+    onDragOver?: (e: React.DragEvent) => void;
+    onDragLeave?: (e: React.DragEvent) => void;
+    onDrop?: (e: React.DragEvent) => void;
     /**
      * @deprecated Use the `input` slot's `disclaimer` prop instead:
      * ```tsx
@@ -74,6 +91,24 @@ export type CopilotChatViewProps = WithSlots<
   } & React.HTMLAttributes<HTMLDivElement>
 >;
 
+function DropOverlay() {
+  return (
+    <div
+      className={cn(
+        "cpk:absolute cpk:inset-0 cpk:z-50 cpk:pointer-events-none",
+        "cpk:flex cpk:items-center cpk:justify-center",
+        "cpk:bg-primary/5 cpk:backdrop-blur-[2px]",
+        "cpk:border-2 cpk:border-dashed cpk:border-primary/40 cpk:rounded-lg cpk:m-2",
+      )}
+    >
+      <div className="cpk:flex cpk:flex-col cpk:items-center cpk:gap-2 cpk:text-primary/70">
+        <Upload className="cpk:w-8 cpk:h-8" />
+        <span className="cpk:text-sm cpk:font-medium">Drop files here</span>
+      </div>
+    </div>
+  );
+}
+
 export function CopilotChatView({
   messageView,
   input,
@@ -96,6 +131,14 @@ export function CopilotChatView({
   onCancelTranscribe,
   onFinishTranscribe,
   onFinishTranscribeWithAudio,
+  // Attachment props
+  attachments,
+  onRemoveAttachment,
+  onAddFile,
+  dragOver,
+  onDragOver,
+  onDragLeave,
+  onDrop,
   // Deprecated — forwarded to input slot
   disclaimer,
   children,
@@ -171,6 +214,7 @@ export function CopilotChatView({
     onCancelTranscribe,
     onFinishTranscribe,
     onFinishTranscribeWithAudio,
+    onAddFile,
     positioning: "static",
     keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
     containerRef: inputContainerRef,
@@ -229,6 +273,7 @@ export function CopilotChatView({
       onCancelTranscribe,
       onFinishTranscribe,
       onFinishTranscribeWithAudio,
+      onAddFile,
       positioning: "static",
       showDisclaimer: true,
       ...(disclaimer !== undefined ? { disclaimer } : {}),
@@ -238,11 +283,25 @@ export function CopilotChatView({
     const welcomeScreenSlot = (
       welcomeScreen === true ? undefined : welcomeScreen
     ) as SlotValue<React.FC<WelcomeScreenProps>> | undefined;
+    // Wrap the input with attachment queue above it
+    const inputWithAttachments = (
+      <div className="cpk:w-full">
+        {attachments && attachments.length > 0 && (
+          <CopilotChatAttachmentQueue
+            attachments={attachments}
+            onRemoveAttachment={(id) => onRemoveAttachment?.(id)}
+            className="cpk:mb-2"
+          />
+        )}
+        {BoundInputForWelcome}
+      </div>
+    );
+
     const BoundWelcomeScreen = renderSlot(
       welcomeScreenSlot,
       CopilotChatView.WelcomeScreen,
       {
-        input: BoundInputForWelcome,
+        input: inputWithAttachments,
         suggestionView: BoundSuggestionView ?? <></>,
       },
     );
@@ -252,12 +311,16 @@ export function CopilotChatView({
         data-copilotkit
         data-testid="copilot-chat"
         data-copilot-running={isRunning ? "true" : "false"}
-        className={twMerge(
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        className={cn(
           "copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col",
           className,
         )}
         {...props}
       >
+        {dragOver && <DropOverlay />}
         {BoundWelcomeScreen}
       </div>
     );
@@ -281,14 +344,28 @@ export function CopilotChatView({
       data-copilotkit
       data-testid="copilot-chat"
       data-copilot-running={isRunning ? "true" : "false"}
-      className={twMerge(
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+      className={cn(
         "copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col",
         className,
       )}
       {...props}
     >
+      {dragOver && <DropOverlay />}
       {BoundScrollView}
 
+      <div className="cpk:max-w-3xl cpk:mx-auto cpk:w-full">
+        {attachments && attachments.length > 0 && (
+          <CopilotChatAttachmentQueue
+            attachments={attachments}
+            onRemoveAttachment={(id) => onRemoveAttachment?.(id)}
+            className="cpk:px-4"
+          />
+        )}
+      </div>
+
       {BoundInput}
     </div>
   );
@@ -311,42 +388,57 @@ export namespace CopilotChatView {
     inputContainerHeight,
     isResizing,
   }) => {
-    const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+    const { isAtBottom, scrollToBottom, scrollRef } = useStickToBottomContext();
+
+    // Capture the scroll element in state so the context value is reactive —
+    // consumers re-render when the element is first set rather than reading a
+    // ref that silently stays null until after their own layout effects fire.
+    const [scrollEl, setScrollEl] = useState<HTMLElement | null>(null);
+    useLayoutEffect(() => {
+      setScrollEl(scrollRef.current ?? null);
+      // scrollRef is a stable object; omitting from deps is intentional.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
 
     return (
-      <>
-        <StickToBottom.Content
-          className="cpk:overflow-y-auto cpk:overflow-x-hidden"
-          style={{ flex: "1 1 0%", minHeight: 0 }}
-        >
-          <div className="cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6">
-            {children}
-          </div>
-        </StickToBottom.Content>
+      // Provide the scroll element so CopilotChatMessageView can feed it to
+      // useVirtualizer's getScrollElement. Using state (not the raw ref) means
+      // the context value updates reactively when the element mounts.
+      <ScrollElementContext.Provider value={scrollEl}>
+        <>
+          <StickToBottom.Content
+            className="cpk:overflow-y-auto cpk:overflow-x-hidden"
+            style={{ flex: "1 1 0%", minHeight: 0 }}
+          >
+            <div className="cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6">
+              {children}
+            </div>
+          </StickToBottom.Content>
 
-        {/* Feather gradient overlay */}
-        {BoundFeather}
+          {/* Feather gradient overlay */}
+          {BoundFeather}
 
-        {/* Scroll to bottom button - hidden during resize */}
-        {!isAtBottom && !isResizing && (
-          <div
-            className="cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none"
-            style={{
-              bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px`,
-            }}
-          >
-            {renderSlot(
-              scrollToBottomButton,
-              CopilotChatView.ScrollToBottomButton,
-              {
-                onClick: () => scrollToBottom(),
-              },
-            )}
-          </div>
-        )}
-      </>
+          {/* Scroll to bottom button - hidden during resize */}
+          {!isAtBottom && !isResizing && (
+            <div
+              className="cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none"
+              style={{
+                bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px`,
+              }}
+            >
+              {renderSlot(
+                scrollToBottomButton,
+                CopilotChatView.ScrollToBottomButton,
+                {
+                  onClick: () => scrollToBottom(),
+                },
+              )}
+            </div>
+          )}
+        </>
+      </ScrollElementContext.Provider>
     );
   };
 
@@ -373,6 +465,23 @@ export namespace CopilotChatView {
     const [hasMounted, setHasMounted] = useState(false);
     const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
     const [showScrollButton, setShowScrollButton] = useState(false);
+    // Tracks the scroll container element for the non-autoScroll path so the
+    // context value is reactive (element state, not a ref).
+    const [nonAutoScrollEl, setNonAutoScrollEl] = useState<HTMLElement | null>(
+      null,
+    );
+
+    // Callback ref that keeps scrollRef in sync with the DOM element while also
+    // updating context state — eliminates the need for a useLayoutEffect.
+    const nonAutoScrollRefCallback = useCallback(
+      (el: HTMLElement | null) => {
+        scrollRef.current = el;
+        setNonAutoScrollEl(el);
+      },
+      // scrollRef is a stable object from useStickToBottom; safe to omit.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [],
+    );
 
     useEffect(() => {
       setHasMounted(true);
@@ -422,42 +531,46 @@ export namespace CopilotChatView {
       const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
 
       return (
-        <div
-          ref={scrollRef}
-          className={cn(
-            "cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden cpk:relative",
-            className,
-          )}
-          {...props}
-        >
+        // Provide the scroll element so CopilotChatMessageView can use it for
+        // useVirtualizer. Element state (not a ref) keeps the context reactive.
+        <ScrollElementContext.Provider value={nonAutoScrollEl}>
           <div
-            ref={contentRef}
-            className="cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6"
+            ref={nonAutoScrollRefCallback}
+            className={cn(
+              "cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden cpk:relative",
+              className,
+            )}
+            {...props}
           >
-            {children}
-          </div>
-
-          {/* Feather gradient overlay */}
-          {BoundFeather}
-
-          {/* Scroll to bottom button for manual mode */}
-          {showScrollButton && !isResizing && (
             <div
-              className="cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none"
-              style={{
-                bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px`,
-              }}
+              ref={contentRef}
+              className="cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6"
             >
-              {renderSlot(
-                scrollToBottomButton,
-                CopilotChatView.ScrollToBottomButton,
-                {
-                  onClick: () => scrollToBottom(),
-                },
-              )}
+              {children}
             </div>
-          )}
-        </div>
+
+            {/* Feather gradient overlay */}
+            {BoundFeather}
+
+            {/* Scroll to bottom button for manual mode */}
+            {showScrollButton && !isResizing && (
+              <div
+                className="cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none"
+                style={{
+                  bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px`,
+                }}
+              >
+                {renderSlot(
+                  scrollToBottomButton,
+                  CopilotChatView.ScrollToBottomButton,
+                  {
+                    onClick: () => scrollToBottom(),
+                  },
+                )}
+              </div>
+            )}
+          </div>
+        </ScrollElementContext.Provider>
       );
     }
 

package/src/v2/components/chat/__tests__/CopilotChat.attachments.test.tsx

@@ -0,0 +1,168 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
+import {
+  MockStepwiseAgent,
+  renderWithCopilotKit,
+} 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";
+
+class NoopAgent extends MockStepwiseAgent {
+  run(_input: RunAgentInput): Observable<BaseEvent> {
+    return EMPTY;
+  }
+  connect(_input: RunAgentInput): Observable<BaseEvent> {
+    return EMPTY;
+  }
+}
+
+function createFile(name: string, size: number, type: string): File {
+  const content = new Uint8Array(size);
+  return new File([content], name, { type });
+}
+
+function renderChat(props: {
+  onUploadFailed?: (error: AttachmentUploadError) => void;
+  accept?: string;
+  maxSize?: number;
+  onUpload?: (file: File) => any;
+}) {
+  const agent = new NoopAgent();
+  return renderWithCopilotKit({
+    agent,
+    children: (
+      <CopilotChat
+        welcomeScreen={false}
+        attachments={{
+          enabled: true,
+          accept: props.accept,
+          maxSize: props.maxSize,
+          onUploadFailed: props.onUploadFailed,
+          onUpload: props.onUpload,
+        }}
+      />
+    ),
+  });
+}
+
+async function dropFiles(container: HTMLElement, files: File[]) {
+  const dropTarget = container.querySelector('[data-testid="copilot-chat"]');
+  if (!dropTarget) {
+    throw new Error("Could not find copilot-chat drop target");
+  }
+
+  fireEvent.dragOver(dropTarget, {
+    dataTransfer: { files, types: ["Files"] },
+  });
+  fireEvent.drop(dropTarget, {
+    dataTransfer: { files, types: ["Files"] },
+  });
+}
+
+describe("CopilotChat attachments", () => {
+  describe("onUploadFailed", () => {
+    it("fires with 'invalid-type' when file does not match accept filter", async () => {
+      const onUploadFailed = vi.fn();
+      const { container } = renderChat({
+        accept: "image/*",
+        onUploadFailed,
+      });
+
+      const pdfFile = createFile("document.pdf", 1024, "application/pdf");
+      await dropFiles(container, [pdfFile]);
+
+      await waitFor(() => {
+        expect(onUploadFailed).toHaveBeenCalledTimes(1);
+      });
+
+      const error: AttachmentUploadError = onUploadFailed.mock.calls[0][0];
+      expect(error.reason).toBe("invalid-type");
+      expect(error.file).toBe(pdfFile);
+      expect(error.message).toContain("document.pdf");
+    });
+
+    it("fires with 'file-too-large' when file exceeds maxSize", async () => {
+      const onUploadFailed = vi.fn();
+      const { container } = renderChat({
+        maxSize: 100,
+        onUploadFailed,
+      });
+
+      const largeFile = createFile("big.png", 200, "image/png");
+      await dropFiles(container, [largeFile]);
+
+      await waitFor(() => {
+        expect(onUploadFailed).toHaveBeenCalledTimes(1);
+      });
+
+      const error: AttachmentUploadError = onUploadFailed.mock.calls[0][0];
+      expect(error.reason).toBe("file-too-large");
+      expect(error.file).toBe(largeFile);
+      expect(error.message).toContain("big.png");
+    });
+
+    it("fires with 'upload-failed' when onUpload throws", async () => {
+      const onUploadFailed = vi.fn();
+      const { container } = renderChat({
+        onUpload: () => {
+          throw new Error("S3 upload failed");
+        },
+        onUploadFailed,
+      });
+
+      const file = createFile("photo.png", 50, "image/png");
+      await dropFiles(container, [file]);
+
+      await waitFor(() => {
+        expect(onUploadFailed).toHaveBeenCalledTimes(1);
+      });
+
+      const error: AttachmentUploadError = onUploadFailed.mock.calls[0][0];
+      expect(error.reason).toBe("upload-failed");
+      expect(error.file).toBe(file);
+      expect(error.message).toBe("S3 upload failed");
+    });
+
+    it("fires multiple times for multiple rejected files", async () => {
+      const onUploadFailed = vi.fn();
+      const { container } = renderChat({
+        accept: "image/*",
+        onUploadFailed,
+      });
+
+      const pdf = createFile("a.pdf", 100, "application/pdf");
+      const doc = createFile(
+        "b.docx",
+        100,
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      );
+      await dropFiles(container, [pdf, doc]);
+
+      await waitFor(() => {
+        expect(onUploadFailed).toHaveBeenCalledTimes(2);
+      });
+
+      expect(onUploadFailed.mock.calls[0][0].reason).toBe("invalid-type");
+      expect(onUploadFailed.mock.calls[1][0].reason).toBe("invalid-type");
+    });
+
+    it("does not fire for valid files", async () => {
+      const onUploadFailed = vi.fn();
+      const { container } = renderChat({
+        accept: "image/*",
+        maxSize: 10000,
+        onUploadFailed,
+      });
+
+      const validFile = createFile("photo.png", 500, "image/png");
+      await dropFiles(container, [validFile]);
+
+      // Give time for any async processing
+      await new Promise((r) => setTimeout(r, 100));
+      expect(onUploadFailed).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatActivityRendering.e2e.test.tsx

@@ -11,6 +11,8 @@ import {
 } from "../../../__tests__/utils/test-helpers";
 import { ReactActivityMessageRenderer } from "../../../types";
 import { useCopilotKit } from "../../../providers";
+import { AbstractAgent } from "@ag-ui/client";
+import { getThreadClone } from "../../../hooks/use-agent";
 
 describe("CopilotChat activity message rendering", () => {
   it("renders custom components for activity snapshots", async () => {
@@ -24,9 +26,9 @@ describe("CopilotChat activity message rendering", () => {
     }> = {
       activityType: "search-progress",
       content: z.object({ status: z.string(), percent: z.number() }),
-      render: ({ content, agent }) => (
+      render: ({ content, agent: rendererAgent }) => (
         <div data-testid="activity-card">
-          {content.status} · {content.percent}% · {agent?.agentId}
+          {content.status} · {content.percent}% · {rendererAgent?.agentId}
         </div>
       ),
     };
@@ -147,4 +149,63 @@ describe("CopilotChat activity message rendering", () => {
     expect(capturedCopilotkit).not.toBeNull();
     expect(capturedCopilotkit).toBeDefined();
   });
+
+  it("passes the per-thread clone (not the registry agent) to activity message renderers", async () => {
+    // Regression test for: A2UI button clicks firing runAgent on the registry
+    // agent instead of the per-thread clone that CopilotChat renders from.
+    // Caused by useRenderActivityMessage calling copilotkit.getAgent() directly
+    // instead of getThreadClone(registryAgent, threadId) ?? registryAgent.
+    const agent = new MockStepwiseAgent();
+    const agentId = "action-agent";
+    agent.agentId = agentId;
+    const threadId = "thread-for-action-test";
+
+    let capturedAgent: AbstractAgent | undefined;
+
+    const activityRenderer: ReactActivityMessageRenderer<{ label: string }> = {
+      activityType: "button-action",
+      content: z.object({ label: z.string() }),
+      render: ({ content, agent: renderedAgent }) => {
+        capturedAgent = renderedAgent;
+        return <button data-testid="action-button">{content.label}</button>;
+      },
+    };
+
+    renderWithCopilotKit({
+      agents: { [agentId]: agent },
+      agentId,
+      threadId,
+      renderActivityMessages: [activityRenderer],
+    });
+
+    const input = await screen.findByRole("textbox");
+    fireEvent.change(input, { target: { value: "show me buttons" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("show me buttons")).toBeDefined();
+    });
+
+    agent.emit(runStartedEvent());
+    agent.emit(
+      activitySnapshotEvent({
+        messageId: testId("activity-action"),
+        activityType: "button-action",
+        content: { label: "Click Me" },
+      }),
+    );
+    agent.emit(runFinishedEvent());
+
+    await waitFor(() => {
+      expect(screen.getByTestId("action-button")).toBeDefined();
+    });
+
+    // CopilotChat creates a per-thread clone via useAgent. The activity renderer
+    // must receive that clone so that handleAction → runAgent targets the same
+    // instance chat is rendering from.
+    const clone = getThreadClone(agent, threadId);
+    expect(clone).toBeDefined();
+    expect(capturedAgent).toBe(clone);
+    expect(capturedAgent).not.toBe(agent); // must NOT be the registry agent
+  });
 });