@copilotkit/react-core 1.56.3 → 1.56.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-core",
-  "version": "1.56.3",
+  "version": "1.56.4",
   "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/core": "1.56.3",
-    "@copilotkit/a2ui-renderer": "1.56.3",
-    "@copilotkit/runtime-client-gql": "1.56.3",
-    "@copilotkit/web-inspector": "1.56.3",
-    "@copilotkit/shared": "1.56.3"
+    "@copilotkit/a2ui-renderer": "1.56.4",
+    "@copilotkit/core": "1.56.4",
+    "@copilotkit/runtime-client-gql": "1.56.4",
+    "@copilotkit/web-inspector": "1.56.4",
+    "@copilotkit/shared": "1.56.4"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",

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

@@ -21,7 +21,10 @@ export const CopilotChatAttachmentQueue: React.FC<
   if (attachments.length === 0) return null;
 
   return (
-    <div className={cn("cpk:flex cpk:flex-wrap cpk:gap-2 cpk:p-2", className)}>
+    <div
+      data-testid="copilot-attachment-queue"
+      className={cn("cpk:flex cpk:flex-wrap cpk:gap-2 cpk:p-2", className)}
+    >
       {attachments.map((attachment) => {
         const isMedia =
           attachment.type === "image" || attachment.type === "video";

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

@@ -6,17 +6,19 @@ import React, {
   useLayoutEffect,
 } from "react";
 import { ScrollElementContext } from "./scroll-element-context";
-import { WithSlots, SlotValue, renderSlot } from "../../lib/slots";
+import type { WithSlots, SlotValue } from "../../lib/slots";
+import { renderSlot } from "../../lib/slots";
 import CopilotChatMessageView from "./CopilotChatMessageView";
-import CopilotChatInput, {
+import type {
   CopilotChatInputProps,
   CopilotChatInputMode,
 } from "./CopilotChatInput";
+import CopilotChatInput from "./CopilotChatInput";
 import CopilotChatSuggestionView, {
   CopilotChatSuggestionViewProps,
 } from "./CopilotChatSuggestionView";
-import { Suggestion } from "@copilotkit/core";
-import { Message } from "@ag-ui/core";
+import type { Suggestion } from "@copilotkit/core";
+import type { Message } from "@ag-ui/core";
 import type { Attachment } from "@copilotkit/shared";
 import { CopilotChatAttachmentQueue } from "./CopilotChatAttachmentQueue";
 import { twMerge } from "tailwind-merge";
@@ -37,29 +39,8 @@ import { normalizeAutoScroll } from "./normalize-auto-scroll";
 import type { AutoScrollMode } from "./normalize-auto-scroll";
 import { usePinToSend } from "../../hooks/use-pin-to-send";
 
-// Height of the feather gradient overlay (h-24 = 6rem = 96px)
-const FEATHER_HEIGHT = 96;
-
-// Pin-to-send uses a softer, shorter feather than pin-to-bottom so readable
-// content isn't obscured (h-12 = 3rem = 48px).
-const PIN_TO_SEND_FEATHER_HEIGHT = 48;
-
-const PinToSendSoftFeather: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  className,
-  style,
-  ...props
-}) => (
-  <div
-    className={cn(
-      "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-4 cpk:h-12 cpk:pointer-events-none cpk:z-10 cpk:bg-gradient-to-t",
-      "cpk:from-white cpk:to-transparent",
-      "cpk:dark:from-[rgb(33,33,33)]",
-      className,
-    )}
-    style={style}
-    {...props}
-  />
-);
+// Vertical gap between the scroll-to-bottom button and the input container.
+const SCROLL_BUTTON_OFFSET = 16;
 
 // Forward declaration for WelcomeScreen component type
 export type WelcomeScreenProps = WithSlots<
@@ -258,11 +239,11 @@ export function CopilotChatView({
     onAddFile,
     positioning: "static",
     keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
-    containerRef: inputContainerRef,
     showDisclaimer: true,
-    // This input is the last flex child of the chat column, so it sits at
-    // the bottom where the license banner would overlap. The welcome-screen
-    // input (below) intentionally omits this flag.
+    // The parent overlay wrapper handles absolute bottom-0 positioning.
+    // `bottomAnchored` still triggers the license-banner offset padding
+    // inside CopilotChatInput. The welcome-screen input (below) intentionally
+    // omits this flag.
     bottomAnchored: true,
     ...(disclaimer !== undefined ? { disclaimer } : {}),
   } as CopilotChatInputProps);
@@ -291,8 +272,9 @@ export function CopilotChatView({
     isResizing,
     children: (
       <div
+        data-testid="copilot-scroll-content"
         style={{
-          paddingBottom: `${hasSuggestions ? 4 : 32}px`,
+          paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px`,
         }}
       >
         <div className="cpk:max-w-3xl cpk:mx-auto">
@@ -415,17 +397,22 @@ export function CopilotChatView({
       {dragOver && <DropOverlay />}
       {BoundScrollView}
 
-      <div className="cpk:max-w-3xl cpk:mx-auto cpk:w-full">
+      <div
+        ref={inputContainerRef}
+        data-testid="copilot-input-overlay"
+        className="cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none"
+      >
         {attachments && attachments.length > 0 && (
-          <CopilotChatAttachmentQueue
-            attachments={attachments}
-            onRemoveAttachment={(id) => onRemoveAttachment?.(id)}
-            className="cpk:px-4"
-          />
+          <div className="cpk:max-w-3xl cpk:mx-auto cpk:w-full cpk:pointer-events-auto">
+            <CopilotChatAttachmentQueue
+              attachments={attachments}
+              onRemoveAttachment={(id) => onRemoveAttachment?.(id)}
+              className="cpk:px-4"
+            />
+          </div>
         )}
+        {BoundInput}
       </div>
-
-      {BoundInput}
     </div>
   );
 }
@@ -476,7 +463,6 @@ export namespace CopilotChatView {
             </div>
           </StickToBottom.Content>
 
-          {/* Feather gradient overlay */}
           {BoundFeather}
 
           {/* Scroll to bottom button - hidden during resize */}
@@ -484,7 +470,7 @@ export namespace CopilotChatView {
             <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`,
+                bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px`,
               }}
             >
               {renderSlot(
@@ -541,21 +527,13 @@ export namespace CopilotChatView {
       topOffset: 16,
     });
 
-    // Pin-to-send uses a SOFTER feather than pin-to-bottom:
-    //   - default: h-24 + from-white via-white to-transparent (fully opaque
-    //     bottom half, aggressive). Good for streaming-to-bottom where
-    //     the edge is always churning.
-    //   - pin-to-send: h-12 + from-white to-transparent (gradual fade,
-    //     no opaque midline). Gives a visual soft edge above the input
-    //     without obscuring otherwise-readable content.
-    // Consumers can still override with the `feather` slot.
-    const BoundFeather = renderSlot(feather, PinToSendSoftFeather, {});
-
-    // Feather and scroll-to-bottom button live OUTSIDE the scroll container.
-    // `position: absolute` children of an `overflow: auto` element are
-    // positioned relative to the scroll *content*, which means they scroll
-    // away with it. Placing them as siblings of the scroll container
+    // The feather and scroll-to-bottom button live OUTSIDE the scroll
+    // container. `position: absolute` children of an `overflow: auto` element
+    // are positioned relative to the scroll *content*, which means they
+    // scroll away with it. Placing them as siblings of the scroll container
     // (inside a `relative` wrapper) keeps them pinned to the viewport bottom.
+    const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
+
     return (
       <ScrollElementContext.Provider value={nonAutoScrollEl}>
         <div
@@ -582,14 +560,13 @@ export namespace CopilotChatView {
               style={{ height: 0, flex: "0 0 auto" }}
             />
           </div>
-          {/* Soft feather — pinned to wrapper bottom */}
           {BoundFeather}
           {/* Scroll to bottom button */}
           {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 + PIN_TO_SEND_FEATHER_HEIGHT + 16}px`,
+                bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px`,
               }}
             >
               {renderSlot(
@@ -722,7 +699,6 @@ export namespace CopilotChatView {
               {children}
             </div>
 
-            {/* Feather gradient overlay */}
             {BoundFeather}
 
             {/* Scroll to bottom button for manual mode */}
@@ -730,7 +706,7 @@ export namespace CopilotChatView {
               <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`,
+                  bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px`,
                 }}
               >
                 {renderSlot(
@@ -812,22 +788,14 @@ export namespace CopilotChatView {
     </Button>
   );
 
+  // Default renders an empty div — no visual, but the element is still in the
+  // tree so a slot override of the form `scrollView={{ feather: "my-class" }}`
+  // can apply classes (and any consumer with a full component override gets
+  // the className/style forwarding they expect).
   export const Feather: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
     className,
-    style,
     ...props
-  }) => (
-    <div
-      className={cn(
-        "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-4 cpk:h-24 cpk:pointer-events-none cpk:z-10 cpk:bg-gradient-to-t",
-        "cpk:from-white cpk:via-white cpk:to-transparent",
-        "cpk:dark:from-[rgb(33,33,33)] cpk:dark:via-[rgb(33,33,33)]",
-        className,
-      )}
-      style={style}
-      {...props}
-    />
-  );
+  }) => <div className={className} {...props} />;
 
   export const WelcomeMessage: React.FC<
     React.HTMLAttributes<HTMLDivElement>

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { z } from "zod";
+import { EventType } from "@ag-ui/client";
 import {
   MockReconnectableAgent,
   MockStepwiseAgent,
@@ -10,34 +11,149 @@ import {
   runStartedEvent,
   testId,
 } from "../../../__tests__/utils/test-helpers";
-import { ReactActivityMessageRenderer } from "../../../types";
+import type { ReactActivityMessageRenderer } from "../../../types";
 import {
   CopilotChatConfigurationProvider,
   CopilotKitProvider,
   useCopilotKit,
 } from "../../../providers";
-import { AbstractAgent } from "@ag-ui/client";
+import type { AbstractAgent } from "@ag-ui/client";
 import { IntelligenceAgent } from "@copilotkit/core";
 import { getThreadClone } from "../../../hooks/use-agent";
 import { createA2UIMessageRenderer } from "../../../a2ui/A2UIMessageRenderer";
 import type { Theme } from "@copilotkit/a2ui-renderer";
 import { CopilotChat } from "..";
 
-const { mockWebsandboxCreate, mockWebsandboxDestroy } = vi.hoisted(() => {
+const {
+  mockWebsandboxCreate,
+  mockWebsandboxDestroy,
+  mockPhoenixSockets,
+  MockPhoenixSocket,
+} = vi.hoisted(() => {
   const mockDestroy = vi.fn();
-  const mockCreate = vi.fn(() => ({
+  const mockCreate = vi.fn((..._args: unknown[]) => ({
     iframe: document.createElement("iframe"),
     promise: Promise.resolve(),
     run: vi.fn().mockResolvedValue(undefined),
     destroy: mockDestroy,
   }));
+  const mockSockets: MockPhoenixSocket[] = [];
+
+  class MockPhoenixPush {
+    private callbacks = new Map<string, (response?: unknown) => void>();
+
+    receive(
+      status: string,
+      callback: (response?: unknown) => void,
+    ): MockPhoenixPush {
+      this.callbacks.set(status, callback);
+      return this;
+    }
+
+    trigger(status: string, response?: unknown): void {
+      this.callbacks.get(status)?.(response);
+    }
+  }
+
+  class MockPhoenixChannel {
+    public topic: string;
+    public params: Record<string, unknown>;
+    public left = false;
+
+    private handlers = new Map<
+      string,
+      Array<{ ref: number; callback: (payload: unknown) => void }>
+    >();
+    private joinPush = new MockPhoenixPush();
+    private nextRef = 1;
+
+    constructor(topic: string, params: Record<string, unknown>) {
+      this.topic = topic;
+      this.params = params;
+    }
+
+    on(event: string, callback: (payload: unknown) => void): number {
+      if (!this.handlers.has(event)) {
+        this.handlers.set(event, []);
+      }
+      const ref = this.nextRef;
+      this.nextRef += 1;
+      this.handlers.get(event)?.push({ ref, callback });
+      return ref;
+    }
+
+    off(event: string, ref?: number): void {
+      if (ref === undefined) {
+        this.handlers.delete(event);
+        return;
+      }
+      this.handlers.set(
+        event,
+        (this.handlers.get(event) ?? []).filter(
+          (handler) => handler.ref !== ref,
+        ),
+      );
+    }
+
+    join(): MockPhoenixPush {
+      return this.joinPush;
+    }
+
+    leave(): void {
+      this.left = true;
+    }
+
+    triggerJoin(status: string, response?: unknown): void {
+      this.joinPush.trigger(status, response);
+    }
+
+    serverPush(event: string, payload: unknown): void {
+      for (const { callback } of this.handlers.get(event) ?? []) {
+        callback(payload);
+      }
+    }
+  }
+
+  class MockPhoenixSocket {
+    public channels: MockPhoenixChannel[] = [];
+
+    constructor(
+      public url: string,
+      public opts: Record<string, unknown>,
+    ) {
+      mockSockets.push(this);
+    }
+
+    connect(): void {}
+
+    disconnect(): void {}
+
+    onOpen(): void {}
+
+    onError(): void {}
+
+    channel(
+      topic: string,
+      params: Record<string, unknown>,
+    ): MockPhoenixChannel {
+      const channel = new MockPhoenixChannel(topic, params);
+      this.channels.push(channel);
+      return channel;
+    }
+  }
 
   return {
     mockWebsandboxCreate: mockCreate,
     mockWebsandboxDestroy: mockDestroy,
+    mockPhoenixSockets: mockSockets,
+    MockPhoenixSocket,
   };
 });
 
+vi.mock("phoenix", () => ({
+  Socket: MockPhoenixSocket,
+}));
+
 vi.mock("@jetbrains/websandbox", () => ({
   default: {
     create: (...args: unknown[]) => mockWebsandboxCreate(...args),
@@ -329,66 +445,22 @@ describe("CopilotChat activity message rendering", () => {
     });
   });
 
-  it("restores a completed A2UI surface from an IntelligenceAgent /connect bootstrap plan", async () => {
+  it("restores a completed A2UI surface from IntelligenceAgent /connect gateway replay", async () => {
     const threadId = testId("intelligence-connect-thread");
     const surfaceId = testId("intelligence-connect-surface");
     const fetchMock = vi.fn().mockResolvedValueOnce(
       jsonResponse({
-        mode: "bootstrap",
-        latestEventId: "event-3",
-        events: [
-          {
-            type: "RUN_STARTED",
-            threadId,
-            run_id: "backend-run-1",
-            input: {
-              messages: [
-                {
-                  id: testId("connect-user-message"),
-                  role: "user",
-                  content: "show me the restored ui",
-                },
-              ],
-            },
-          },
-          {
-            type: "ACTIVITY_SNAPSHOT",
-            messageId: testId("connect-a2ui-activity"),
-            activityType: "a2ui-surface",
-            content: {
-              a2ui_operations: [
-                {
-                  version: "v0.9",
-                  createSurface: {
-                    surfaceId,
-                    catalogId:
-                      "https://a2ui.org/specification/v0_9/basic_catalog.json",
-                  },
-                },
-                {
-                  version: "v0.9",
-                  updateComponents: {
-                    surfaceId,
-                    components: [
-                      {
-                        id: "root",
-                        component: "Text",
-                        text: "Restored dashboard",
-                        variant: "body",
-                      },
-                    ],
-                  },
-                },
-              ],
-            },
-          },
-          {
-            type: "RUN_FINISHED",
-          },
-        ],
+        threadId,
+        runId: null,
+        joinToken: "join-token-1",
+        realtime: {
+          clientUrl: "ws://localhost:4000/client",
+          topic: `thread:${threadId}`,
+        },
       }),
     );
     vi.stubGlobal("fetch", fetchMock);
+    mockPhoenixSockets.length = 0;
 
     const agent = new IntelligenceAgent({
       url: "ws://localhost:4000/client",
@@ -409,6 +481,70 @@ describe("CopilotChat activity message rendering", () => {
       await waitFor(() => {
         expect(fetchMock).toHaveBeenCalledTimes(1);
       });
+
+      await waitFor(() => {
+        expect(mockPhoenixSockets).toHaveLength(1);
+        expect(mockPhoenixSockets[0]?.channels).toHaveLength(1);
+      });
+
+      const channel = mockPhoenixSockets[0]!.channels[0]!;
+      expect(channel.topic).toBe(`thread:${threadId}`);
+      expect(channel.params).toEqual({
+        stream_mode: "connect",
+        last_seen_event_id: null,
+      });
+
+      channel.triggerJoin("ok");
+      channel.serverPush("ag_ui_event", {
+        type: EventType.RUN_STARTED,
+        threadId,
+        run_id: "backend-run-1",
+        input: {
+          messages: [
+            {
+              id: testId("connect-user-message"),
+              role: "user",
+              content: "show me the restored ui",
+            },
+          ],
+        },
+      });
+      channel.serverPush("ag_ui_event", {
+        type: EventType.ACTIVITY_SNAPSHOT,
+        messageId: testId("connect-a2ui-activity"),
+        activityType: "a2ui-surface",
+        content: {
+          a2ui_operations: [
+            {
+              version: "v0.9",
+              createSurface: {
+                surfaceId,
+                catalogId:
+                  "https://a2ui.org/specification/v0_9/basic_catalog.json",
+              },
+            },
+            {
+              version: "v0.9",
+              updateComponents: {
+                surfaceId,
+                components: [
+                  {
+                    id: "root",
+                    component: "Text",
+                    text: "Restored dashboard",
+                    variant: "body",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      });
+      channel.serverPush("ag_ui_event", {
+        type: EventType.RUN_FINISHED,
+      });
+      channel.serverPush("stream_idle", { latestEventId: "event-3" });
+
       await waitFor(() => {
         expect(screen.getByText("show me the restored ui")).toBeDefined();
       });