@copilotkit/react-core 1.56.4-canary.1777629975 → 1.56.4-canary.1777659843

package/package.json

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

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

@@ -518,12 +518,9 @@ export namespace CopilotChatView {
     className,
     ...props
   }) => {
-    const spacerRef = useRef<HTMLDivElement>(null);
-
     usePinToSend({
       scrollRef,
       contentRef,
-      spacerRef,
       topOffset: 16,
     });
 
@@ -549,16 +546,11 @@ export namespace CopilotChatView {
           >
             <div
               ref={contentRef}
+              data-pin-to-send-content
               className="cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6"
             >
               {children}
             </div>
-            <div
-              ref={spacerRef}
-              data-pin-to-send-spacer
-              aria-hidden="true"
-              style={{ height: 0, flex: "0 0 auto" }}
-            />
           </div>
           {BoundFeather}
           {/* Scroll to bottom button */}

package/src/v2/components/chat/__tests__/CopilotChatView.pinToSend.test.tsx

@@ -35,7 +35,7 @@ async function waitForMount(screen: {
 }
 
 describe("CopilotChatView pin-to-send mode", () => {
-  it("renders the pin-to-send spacer element when autoScroll='pin-to-send'", async () => {
+  it("renders the pin-to-send content container when autoScroll='pin-to-send'", async () => {
     const screen = render(
       <TestWrapper>
         <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
@@ -44,30 +44,36 @@ describe("CopilotChatView pin-to-send mode", () => {
       </TestWrapper>,
     );
     await waitForMount(screen);
-    const spacer = screen.container.querySelector("[data-pin-to-send-spacer]");
-    expect(spacer).not.toBeNull();
+    const content = screen.container.querySelector(
+      "[data-pin-to-send-content]",
+    );
+    expect(content).not.toBeNull();
   });
 
-  it("does not render the spacer when autoScroll='pin-to-bottom'", async () => {
+  it("does not render the pin-to-send content marker when autoScroll='pin-to-bottom'", async () => {
     const screen = render(
       <TestWrapper>
         <CopilotChatView autoScroll="pin-to-bottom" messages={sampleMessages} />
       </TestWrapper>,
     );
     await waitForMount(screen);
-    const spacer = screen.container.querySelector("[data-pin-to-send-spacer]");
-    expect(spacer).toBeNull();
+    const content = screen.container.querySelector(
+      "[data-pin-to-send-content]",
+    );
+    expect(content).toBeNull();
   });
 
-  it("does not render the spacer when autoScroll='none'", async () => {
+  it("does not render the pin-to-send content marker when autoScroll='none'", async () => {
     const screen = render(
       <TestWrapper>
         <CopilotChatView autoScroll="none" messages={sampleMessages} />
       </TestWrapper>,
     );
     await waitForMount(screen);
-    const spacer = screen.container.querySelector("[data-pin-to-send-spacer]");
-    expect(spacer).toBeNull();
+    const content = screen.container.querySelector(
+      "[data-pin-to-send-content]",
+    );
+    expect(content).toBeNull();
   });
 
   it("boolean true still maps to pin-to-bottom (back-compat)", async () => {
@@ -77,8 +83,10 @@ describe("CopilotChatView pin-to-send mode", () => {
       </TestWrapper>,
     );
     await waitForMount(screen);
-    const spacer = screen.container.querySelector("[data-pin-to-send-spacer]");
-    expect(spacer).toBeNull();
+    const content = screen.container.querySelector(
+      "[data-pin-to-send-content]",
+    );
+    expect(content).toBeNull();
   });
 
   it("boolean false still maps to none (back-compat)", async () => {
@@ -88,7 +96,9 @@ describe("CopilotChatView pin-to-send mode", () => {
       </TestWrapper>,
     );
     await waitForMount(screen);
-    const spacer = screen.container.querySelector("[data-pin-to-send-spacer]");
-    expect(spacer).toBeNull();
+    const content = screen.container.querySelector(
+      "[data-pin-to-send-content]",
+    );
+    expect(content).toBeNull();
   });
 });

package/src/v2/hooks/__tests__/use-pin-to-send.test.tsx

@@ -33,9 +33,8 @@ function setHeight(el: HTMLElement, height: number) {
 function HarnessInner({ topOffset }: { topOffset: number }) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
-  const spacerRef = useRef<HTMLDivElement>(null);
 
-  usePinToSend({ scrollRef, contentRef, spacerRef, topOffset });
+  usePinToSend({ scrollRef, contentRef, topOffset });
 
   return (
     <div ref={scrollRef} data-testid="scroll">
@@ -50,7 +49,6 @@ function HarnessInner({ topOffset }: { topOffset: number }) {
           user msg 2
         </div>
       </div>
-      <div ref={spacerRef} data-testid="spacer" style={{ height: 0 }} />
     </div>
   );
 }
@@ -80,30 +78,42 @@ beforeEach(() => {
 });
 
 describe("usePinToSend", () => {
-  it("sets spacer height to viewportHeight - userMessageHeight - topOffset on new send", async () => {
+  it("sets content min-height to userMsgPos + viewportHeight - topOffset on new send", async () => {
     const { rerender, getByTestId } = render(
       <Harness lastUserMessage={{ id: null, sendNonce: 0 }} />,
     );
 
     const scroll = getByTestId("scroll");
-    const spacer = getByTestId("spacer");
+    const content = getByTestId("content");
     setHeight(scroll, 800);
 
     const userMsg = scroll.querySelector(
       '[data-message-id="m3"]',
     ) as HTMLElement;
-    setHeight(userMsg, 40);
+    // Mock user msg at scroll offset 400, height 40, no top padding.
+    userMsg.getBoundingClientRect = () =>
+      ({
+        top: 400,
+        left: 0,
+        right: 100,
+        bottom: 440,
+        width: 100,
+        height: 40,
+        x: 0,
+        y: 400,
+        toJSON: () => ({}),
+      }) as DOMRect;
 
     act(() => {
       rerender(<Harness lastUserMessage={{ id: "m3", sendNonce: 1 }} />);
     });
 
-    // viewport=800, userMsg=40, topOffset=16
-    // spacer = max(0, 800 - 40 - 16) = 744
-    expect(spacer.style.height).toBe("744px");
+    // userMsgPos=400, paddingTop=0, viewport=800, topOffset=16
+    // minHeight = 400 + 0 + 800 - 16 = 1184
+    expect(content.style.minHeight).toBe("1184px");
   });
 
-  it("calls scrollTo with targetEl.offsetTop - topOffset on new send", async () => {
+  it("calls scrollTo with userMsgPos + paddingTop - topOffset on new send", async () => {
     const { rerender, getByTestId } = render(
       <Harness lastUserMessage={{ id: null, sendNonce: 0 }} />,
     );
@@ -115,7 +125,6 @@ describe("usePinToSend", () => {
     const userMsg = scroll.querySelector(
       '[data-message-id="m3"]',
     ) as HTMLElement;
-    setHeight(userMsg, 40);
     // computeOffsetTop uses getBoundingClientRect; mock top=400 on userMsg and top=0 on scroll
     // so that elRect.top - stopRect.top + scrollEl.scrollTop = 400 - 0 + 0 = 400.
     userMsg.getBoundingClientRect = () =>
@@ -146,50 +155,36 @@ describe("usePinToSend", () => {
     });
   });
 
-  it("shrinks spacer as content height grows (does not grow it)", async () => {
-    let observed: (() => void) | null = null;
-    const ROStub = vi.fn().mockImplementation((cb: () => void) => {
-      observed = cb;
-      return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
-    });
-    const prevRO = global.ResizeObserver;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    global.ResizeObserver = ROStub as any;
-
-    try {
-      const { rerender, getByTestId } = render(
-        <Harness lastUserMessage={{ id: null, sendNonce: 0 }} />,
-      );
-      const scroll = getByTestId("scroll");
-      const content = getByTestId("content");
-      const spacer = getByTestId("spacer");
-      setHeight(scroll, 800);
-      const userMsg = scroll.querySelector(
-        '[data-message-id="m3"]',
-      ) as HTMLElement;
-      setHeight(userMsg, 40);
-      setHeight(content, 200);
-
-      act(() => {
-        rerender(<Harness lastUserMessage={{ id: "m3", sendNonce: 1 }} />);
-      });
-
-      // Initial: 800 - 40 - 16 = 744
-      expect(spacer.style.height).toBe("744px");
+  it("clears content min-height on cleanup so the next send resets the floor", async () => {
+    const { rerender, unmount, getByTestId } = render(
+      <Harness lastUserMessage={{ id: null, sendNonce: 0 }} />,
+    );
+    const scroll = getByTestId("scroll");
+    const content = getByTestId("content");
+    setHeight(scroll, 800);
+    const userMsg = scroll.querySelector(
+      '[data-message-id="m3"]',
+    ) as HTMLElement;
+    userMsg.getBoundingClientRect = () =>
+      ({
+        top: 400,
+        left: 0,
+        right: 100,
+        bottom: 440,
+        width: 100,
+        height: 40,
+        x: 0,
+        y: 400,
+        toJSON: () => ({}),
+      }) as DOMRect;
 
-      // Simulate content growing — spacer should shrink
-      setHeight(content, 600);
-      act(() => observed?.());
-      expect(parseInt(spacer.style.height, 10)).toBeLessThan(744);
+    act(() => {
+      rerender(<Harness lastUserMessage={{ id: "m3", sendNonce: 1 }} />);
+    });
+    expect(content.style.minHeight).toBe("1184px");
 
-      // Simulate content shrinking — spacer should NOT grow back
-      setHeight(content, 100);
-      const shrunkHeight = spacer.style.height;
-      act(() => observed?.());
-      expect(spacer.style.height).toBe(shrunkHeight);
-    } finally {
-      global.ResizeObserver = prevRO;
-    }
+    unmount();
+    expect(content.style.minHeight).toBe("");
   });
 
   it("cancels the scheduled rAF on unmount (cleanup)", async () => {

package/src/v2/hooks/use-pin-to-send.ts

@@ -4,19 +4,22 @@ import { LastUserMessageContext } from "../components/chat/last-user-message-con
 export type UsePinToSendOptions = {
   scrollRef: React.RefObject<HTMLElement | null>;
   contentRef: React.RefObject<HTMLElement | null>;
-  spacerRef: React.RefObject<HTMLElement | null>;
   topOffset?: number;
 };
 
+// Apply a transient min-height to the scroll content so the newly sent user
+// message can scroll to `topOffset` from the viewport top, then let natural
+// content (the streaming assistant response, suggestions, etc.) take over as
+// it grows past that floor. This mirrors the ChatGPT / Claude behavior:
+// user message pinned to top, response streams in below, no extra scrollable
+// whitespace tacked on after generation.
 export function usePinToSend({
   scrollRef,
   contentRef,
-  spacerRef,
   topOffset = 16,
 }: UsePinToSendOptions): void {
   const { id, sendNonce } = useContext(LastUserMessageContext);
   const lastNonceRef = useRef<number>(-1);
-  const currentSpacerHeightRef = useRef<number>(0);
 
   useEffect(() => {
     if (sendNonce === lastNonceRef.current) return;
@@ -25,8 +28,7 @@ export function usePinToSend({
     if (!id) return;
     const scrollEl = scrollRef.current;
     const contentEl = contentRef.current;
-    const spacerEl = spacerRef.current;
-    if (!scrollEl || !contentEl || !spacerEl) return;
+    if (!scrollEl || !contentEl) return;
 
     const escaped =
       typeof CSS !== "undefined" && CSS.escape
@@ -44,45 +46,34 @@ export function usePinToSend({
     // whatever was above the element too — including the previous message's
     // trailing copy button).
     const viewportHeight = scrollEl.clientHeight;
-    const userMessageHeight = targetEl.getBoundingClientRect().height;
     const paddingTop = parseFloat(getComputedStyle(targetEl).paddingTop) || 0;
-    const bubbleHeight = Math.max(0, userMessageHeight - paddingTop);
-    const spacerHeight = Math.max(0, viewportHeight - bubbleHeight - topOffset);
+    const userMsgOffsetInScroll = computeOffsetTop(targetEl, scrollEl);
 
-    spacerEl.style.height = `${spacerHeight}px`;
-    currentSpacerHeightRef.current = spacerHeight;
+    // The minimum scrollHeight that lets the bubble land at `topOffset` from
+    // the viewport top is: `bubbleTop + viewportHeight - topOffset`, where
+    // `bubbleTop = userMsgOffsetInScroll + paddingTop`. We apply this as a
+    // min-height on the content element. Once the natural content (response,
+    // padding, suggestions) grows past this floor, the floor is irrelevant
+    // and the layout reflects only the actual content — no leftover spacer
+    // whitespace at the bottom after generation.
+    const requiredScrollHeight =
+      userMsgOffsetInScroll + paddingTop + viewportHeight - topOffset;
+    contentEl.style.minHeight = `${Math.max(0, requiredScrollHeight)}px`;
 
     const raf = requestAnimationFrame(() => {
       // Scroll so the BUBBLE is `topOffset` from the viewport top — the
       // padding above the bubble ends up scrolled off-screen.
-      const targetTop =
-        computeOffsetTop(targetEl, scrollEl) + paddingTop - topOffset;
+      const targetTop = userMsgOffsetInScroll + paddingTop - topOffset;
       scrollEl.scrollTo({ top: Math.max(0, targetTop), behavior: "smooth" });
     });
 
-    // Shrink-only ResizeObserver: as the assistant response grows below the
-    // anchored user message, collapse the spacer by the same amount so total
-    // scrollable space below the bubble stays constant (and the bubble stays
-    // pinned). Never grow the spacer after initial sizing.
-    const ro = new ResizeObserver(() => {
-      if (!contentEl || !spacerEl || !scrollEl) return;
-      const contentHeight = contentEl.getBoundingClientRect().height;
-      const targetOffsetWithinContent = computeOffsetTop(targetEl, contentEl);
-      const consumedBelow =
-        contentHeight - targetOffsetWithinContent - userMessageHeight;
-      const remaining = Math.max(0, spacerHeight - consumedBelow);
-      if (remaining < currentSpacerHeightRef.current) {
-        spacerEl.style.height = `${remaining}px`;
-        currentSpacerHeightRef.current = remaining;
-      }
-    });
-    ro.observe(contentEl);
-
     return () => {
       cancelAnimationFrame(raf);
-      ro.disconnect();
+      // Clear the floor on cleanup so a subsequent send (with a different
+      // user-message position) starts from a clean slate.
+      contentEl.style.minHeight = "";
     };
-  }, [id, sendNonce, scrollRef, contentRef, spacerRef, topOffset]);
+  }, [id, sendNonce, scrollRef, contentRef, topOffset]);
 }
 
 // Compute the offset of el relative to stopAt, accounting for stopAt's current scrollTop.