@copilotkit/react-core 1.56.3 → 1.56.4-canary.1777529757

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

@@ -0,0 +1,264 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+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();
+});
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <CopilotKitProvider>
+    <CopilotChatConfigurationProvider threadId="test-thread">
+      <div style={{ height: 400 }}>{children}</div>
+    </CopilotChatConfigurationProvider>
+  </CopilotKitProvider>
+);
+
+const sampleMessages = [
+  { id: "1", role: "user" as const, content: "Hello" },
+  { id: "2", role: "assistant" as const, content: "Hi there!" },
+];
+
+const sampleAttachments: Attachment[] = [
+  {
+    id: "att-1",
+    type: "document",
+    source: {
+      type: "url",
+      value: "https://example.com/doc.txt",
+      mimeType: "text/plain",
+    },
+    filename: "example.txt",
+    size: 42,
+    status: "ready",
+  },
+];
+
+async function waitForMount(screen: {
+  findByTestId: (id: string) => Promise<HTMLElement>;
+}) {
+  await screen.findByTestId("copilot-message-list");
+}
+
+describe("CopilotChatView input overlay layout", () => {
+  it("renders the input inside an absolute-positioned overlay wrapper on the main view", async () => {
+    const screen = render(
+      <TestWrapper>
+        <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+          <CopilotChatView messages={sampleMessages} />
+        </LastUserMessageContext.Provider>
+      </TestWrapper>,
+    );
+    await waitForMount(screen);
+
+    // getByTestId throws if missing — presence is implicit.
+    const overlay = screen.getByTestId("copilot-input-overlay");
+    // Class-level assertion — the cpk: prefix avoids false positives from
+    // consumer classes. Absolute + bottom-0 is the contract we care about.
+    expect(overlay.className).toMatch(/cpk:absolute/);
+    expect(overlay.className).toMatch(/cpk:bottom-0/);
+
+    // Input (send button) lives inside the overlay, not outside it.
+    const sendButton = screen.getByTestId("copilot-send-button");
+    expect(overlay.contains(sendButton)).toBe(true);
+  });
+
+  it("renders the attachment queue above the input inside the overlay wrapper", async () => {
+    const screen = render(
+      <TestWrapper>
+        <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+          <CopilotChatView
+            messages={sampleMessages}
+            attachments={sampleAttachments}
+          />
+        </LastUserMessageContext.Provider>
+      </TestWrapper>,
+    );
+    await waitForMount(screen);
+
+    const overlay = screen.getByTestId("copilot-input-overlay");
+    const queue = overlay.querySelector(
+      '[data-testid="copilot-attachment-queue"]',
+    );
+    const sendButton = overlay.querySelector(
+      '[data-testid="copilot-send-button"]',
+    );
+
+    expect(queue).not.toBeNull();
+    expect(sendButton).not.toBeNull();
+
+    // DOM order: the attachment queue must appear before the send button
+    // in document order so it renders visually above the pill.
+    const position = queue!.compareDocumentPosition(sendButton!);
+    expect(position & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("does NOT wrap the welcome-screen input in the overlay", async () => {
+    const screen = render(
+      <TestWrapper>
+        <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+          <CopilotChatView messages={[]} />
+        </LastUserMessageContext.Provider>
+      </TestWrapper>,
+    );
+    await screen.findByTestId("copilot-welcome-screen");
+
+    // Welcome screen present → no overlay wrapper exists in this render.
+    expect(screen.queryByTestId("copilot-input-overlay")).toBeNull();
+  });
+
+  it("reserves inputContainerHeight as bottom padding on the scroll content", async () => {
+    // Spy on ResizeObserver so we can trigger a known height. The component
+    // uses ResizeObserver to measure the overlay wrapper; we inject a known
+    // value and assert the scroll content's inline padding-bottom reflects it.
+    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 {
+      const screen = render(
+        <TestWrapper>
+          <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+            <CopilotChatView messages={sampleMessages} />
+          </LastUserMessageContext.Provider>
+        </TestWrapper>,
+      );
+      await waitForMount(screen);
+
+      const scrollContent = screen.getByTestId("copilot-scroll-content");
+
+      // Simulate the overlay wrapper reporting a content height of 120px.
+      for (const { cb } of callbacks) {
+        cb(
+          [
+            {
+              contentRect: { height: 120 } as DOMRectReadOnly,
+            } as ResizeObserverEntry,
+          ],
+          {} as ResizeObserver,
+        );
+      }
+
+      // After the resize fires, paddingBottom = 120 (input) + 32 (baseline,
+      // no suggestions) = "152px". The test asserts the formula.
+      await waitFor(() =>
+        expect(scrollContent.style.paddingBottom).toBe("152px"),
+      );
+    } finally {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (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;
+    }
+  });
+});