fix(react-core): re-attach overlay observer when leaving welcome screen

`CopilotChatView` mounts on the welcome-screen branch, where the absolute-
positioned input overlay (and its `inputContainerRef`) does not exist. The
ResizeObserver useEffect ran once with an empty `[]` dep array, found
`ref.current === null`, and bailed. Submitting the first message swapped
to the chat-view branch and attached the overlay element — but the effect
never re-ran, so `inputContainerHeight` stayed at 0 and the scroll
content's reserved bottom padding sat at 32px instead of ~input height.
Late messages and any "always" suggestion strip slid underneath the input
pill, invisible to the user.

Hold the overlay element in state via a callback ref and key the effect
on the element. Same pattern already used by `nonAutoScrollRefCallback`
in this file. Effect now attaches and detaches reactively as the overlay
mounts/unmounts (e.g. clearing messages and falling back to the welcome
screen also resets the measured height instead of holding stale data).

Add a test that mounts on the welcome screen, re-renders with messages,
and asserts the observer attaches to the new overlay element and feeds
the correct paddingBottom. Reverting the fix makes it fail on the
post-transition padding assertion.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: tylerslaton

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

@@ -167,7 +167,17 @@ export function CopilotChatView({
   className,
   ...props
 }: CopilotChatViewProps) {
-  const inputContainerRef = useRef<HTMLDivElement>(null);
+  // Element-as-state via callback ref. The overlay wrapper only renders on the
+  // chat-view branch (the welcome-screen branch omits it), so a plain
+  // useRef + `[]` useEffect would observe `null` on mount whenever the chat
+  // starts on the welcome screen and never re-attach after the user sends
+  // their first message — leaving inputContainerHeight at 0 and the scroll
+  // content's reserved bottom padding at 32px instead of ~input height. The
+  // result is the last messages scrolling underneath the absolute-positioned
+  // input pill. Subscribing to element state lets the observer attach (and
+  // detach) reactively as the overlay mounts/unmounts.
+  const [inputContainerEl, setInputContainerEl] =
+    useState<HTMLDivElement | null>(null);
   const [inputContainerHeight, setInputContainerHeight] = useState(0);
   const [isResizing, setIsResizing] = useState(false);
   const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -178,8 +188,14 @@ export function CopilotChatView({
 
   // Track input container height changes
   useEffect(() => {
-    const element = inputContainerRef.current;
-    if (!element) return;
+    const element = inputContainerEl;
+    if (!element) {
+      // Reset measured height so the scroll content's paddingBottom doesn't
+      // hold a stale value if the overlay unmounts (e.g. messages cleared
+      // and the welcome screen returns).
+      setInputContainerHeight(0);
+      return;
+    }
 
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -218,7 +234,7 @@ export function CopilotChatView({
         clearTimeout(resizeTimeoutRef.current);
       }
     };
-  }, []);
+  }, [inputContainerEl]);
 
   const BoundMessageView = renderSlot(messageView, CopilotChatMessageView, {
     messages,
@@ -398,7 +414,7 @@ export function CopilotChatView({
       {BoundScrollView}
 
       <div
-        ref={inputContainerRef}
+        ref={setInputContainerEl}
         data-testid="copilot-input-overlay"
         className="cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none"
       >

packages/react-core/src/v2/components/chat/__tests__/CopilotChatView.inputOverlay.test.tsx

@@ -6,6 +6,7 @@ import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChat
 import { CopilotChatView } from "../CopilotChatView";
 import { LastUserMessageContext } from "../last-user-message-context";
 import type { Attachment } from "@copilotkit/shared";
+import type { Message } from "@ag-ui/core";
 
 beforeEach(() => {
   HTMLElement.prototype.scrollTo = vi.fn();
@@ -169,4 +170,95 @@ describe("CopilotChatView input overlay layout", () => {
       (global as any).ResizeObserver = OriginalRO;
     }
   });
+
+  it("attaches the resize observer when transitioning from welcome to chat view", async () => {
+    // Regression: a `[]`-deps useEffect captured `inputContainerRef.current`
+    // as null when mounted on the welcome screen and never re-ran after the
+    // user sent their first message. The overlay rendered without a measured
+    // height, so paddingBottom stayed at 32 and the last messages slid
+    // underneath the absolute-positioned input pill. Verify the observer
+    // attaches reactively when the overlay mounts post-transition.
+    const callbacks: Array<{
+      cb: ResizeObserverCallback;
+      target: Element | null;
+    }> = [];
+    const OriginalRO = global.ResizeObserver;
+    class MockResizeObserver {
+      private cb: ResizeObserverCallback;
+      constructor(cb: ResizeObserverCallback) {
+        this.cb = cb;
+      }
+      observe(target: Element) {
+        callbacks.push({ cb: this.cb, target });
+      }
+      unobserve() {}
+      disconnect() {}
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (global as any).ResizeObserver = MockResizeObserver as any;
+
+    try {
+      // Render with no messages to start on the welcome screen branch — the
+      // overlay wrapper does not exist in this DOM, so the observer cannot
+      // attach yet.
+      const initialMessages: Message[] = [];
+      const screen = render(
+        <TestWrapper>
+          <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+            <CopilotChatView messages={initialMessages} />
+          </LastUserMessageContext.Provider>
+        </TestWrapper>,
+      );
+
+      await screen.findByTestId("copilot-welcome-screen");
+      expect(screen.queryByTestId("copilot-input-overlay")).toBeNull();
+
+      // Transition to the chat view by re-rendering with messages — mirrors
+      // what happens when CopilotChat re-renders after the user submits.
+      screen.rerender(
+        <TestWrapper>
+          <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+            <CopilotChatView messages={sampleMessages} />
+          </LastUserMessageContext.Provider>
+        </TestWrapper>,
+      );
+
+      await waitForMount(screen);
+      const overlay = screen.getByTestId("copilot-input-overlay");
+
+      // The bug: observer was attached at mount when the overlay element was
+      // null, so it never re-attached after the transition. Verify it now
+      // observes the overlay specifically.
+      await waitFor(() =>
+        expect(callbacks.some(({ target }) => target === overlay)).toBe(true),
+      );
+
+      const scrollContent = screen.getByTestId("copilot-scroll-content");
+      // Simulate the overlay reporting a real height (e.g. 88px input pill).
+      // Only fire on the overlay's own observer — other components (e.g. the
+      // textarea autosize) also use ResizeObserver and would corrupt the
+      // assertion if we fed all observers a 88px contentRect.
+      for (const { cb, target } of callbacks) {
+        if (target !== overlay) continue;
+        cb(
+          [
+            {
+              contentRect: { height: 88 } as DOMRectReadOnly,
+            } as ResizeObserverEntry,
+          ],
+          {} as ResizeObserver,
+        );
+      }
+
+      // 88 (input) + 32 (no suggestions baseline) = 120px. Without the fix,
+      // paddingBottom would be stuck at 32px because the observer never
+      // attached.
+      await waitFor(() =>
+        expect(scrollContent.style.paddingBottom).toBe("120px"),
+      );
+    } finally {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (global as any).ResizeObserver = OriginalRO;
+    }
+  });
 });