@copilotkit/react-core 1.57.3 → 1.58.0-canary.thread-id-propagation

package/src/v2/components/chat/__tests__/CopilotChatInput.test.tsx

@@ -1,1567 +0,0 @@
-import React from "react";
-import {
-  render,
-  screen,
-  fireEvent,
-  waitFor,
-  within,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-import { CopilotChatInput } from "../CopilotChatInput";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-
-// Mock onSubmitMessage function to track calls
-const mockOnSubmitMessage = vi.fn();
-
-const TEST_THREAD_ID = "test-thread";
-
-// Helper to render components with context provider
-const renderWithProvider = (component: React.ReactElement) => {
-  return render(
-    <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
-      {component}
-    </CopilotChatConfigurationProvider>,
-  );
-};
-
-const getSendButton = (container: HTMLElement) =>
-  container
-    .querySelector("svg.lucide-arrow-up")
-    ?.closest("button") as HTMLButtonElement | null;
-
-const getAddMenuButton = (container: HTMLElement) =>
-  container
-    .querySelector("svg.lucide-plus")
-    ?.closest("button") as HTMLButtonElement | null;
-
-const getLayoutGrid = (textarea: HTMLElement) =>
-  textarea.closest("[data-layout]") as HTMLElement;
-
-const mockLayoutMetrics = (
-  container: HTMLElement,
-  options?: { gridWidth?: number; addWidth?: number; actionsWidth?: number },
-) => {
-  const grid = container.querySelector("div.cpk\\:grid") as HTMLElement | null;
-  if (!grid) {
-    throw new Error("Grid container not found in CopilotChatInput layout");
-  }
-
-  const { gridWidth = 640, addWidth = 48, actionsWidth = 96 } = options ?? {};
-
-  Object.defineProperty(grid, "clientWidth", {
-    value: gridWidth,
-    configurable: true,
-  });
-
-  const rectFactory = (width: number) => () => ({
-    width,
-    height: 40,
-    top: 0,
-    left: 0,
-    right: width,
-    bottom: 40,
-    x: 0,
-    y: 0,
-    toJSON: () => ({}),
-  });
-
-  const addContainer = grid.children[0] as HTMLElement;
-  const actionsContainer = grid.children[2] as HTMLElement;
-
-  Object.defineProperty(addContainer, "getBoundingClientRect", {
-    value: rectFactory(addWidth),
-    configurable: true,
-  });
-
-  Object.defineProperty(actionsContainer, "getBoundingClientRect", {
-    value: rectFactory(actionsWidth),
-    configurable: true,
-  });
-};
-
-// Mock scrollHeight for textareas since jsdom doesn't support it properly
-Object.defineProperty(HTMLTextAreaElement.prototype, "scrollHeight", {
-  configurable: true,
-  get: function (this: HTMLTextAreaElement) {
-    const text = this.value || "";
-
-    // Calculate lines based on explicit newlines
-    const explicitLines = text.split("\n").length;
-
-    // Simulate text wrapping for long lines (rough approximation)
-    // Assume ~50 characters per line as a rough width threshold
-    let wrappedLines = 0;
-    text.split("\n").forEach((line) => {
-      const lineWraps = Math.ceil(line.length / 50);
-      wrappedLines += Math.max(1, lineWraps);
-    });
-
-    const totalLines = Math.max(explicitLines, wrappedLines);
-    return totalLines * 24; // 24px per line
-  },
-});
-
-// Clear mocks before each test
-beforeEach(() => {
-  mockOnSubmitMessage.mockClear();
-});
-
-describe("CopilotChatInput", () => {
-  it("renders with default components and styling", () => {
-    const mockOnChange = vi.fn();
-    const { container } = renderWithProvider(
-      <CopilotChatInput
-        value=""
-        onChange={mockOnChange}
-        onSubmitMessage={mockOnSubmitMessage}
-      />,
-    );
-
-    const input = screen.getByPlaceholderText("Type a message...");
-    const sendButton = getSendButton(container);
-
-    expect(input).toBeDefined();
-    expect(sendButton).not.toBeNull();
-    expect(sendButton?.disabled).toBe(true); // Should be disabled when input is empty
-  });
-
-  it("calls onSubmitMessage with trimmed text when Enter is pressed", () => {
-    const mockOnChange = vi.fn();
-    renderWithProvider(
-      <CopilotChatInput
-        value="  hello world  "
-        onChange={mockOnChange}
-        onSubmitMessage={mockOnSubmitMessage}
-      />,
-    );
-
-    const input = screen.getByPlaceholderText("Type a message...");
-    fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
-
-    expect(mockOnSubmitMessage).toHaveBeenCalledWith("hello world");
-  });
-
-  it("calls onSubmitMessage when button is clicked", () => {
-    const mockOnChange = vi.fn();
-    const { container } = renderWithProvider(
-      <CopilotChatInput
-        value="test message"
-        onChange={mockOnChange}
-        onSubmitMessage={mockOnSubmitMessage}
-      />,
-    );
-
-    const sendButton = getSendButton(container);
-    expect(sendButton).not.toBeNull();
-    fireEvent.click(sendButton!);
-
-    expect(mockOnSubmitMessage).toHaveBeenCalledWith("test message");
-  });
-
-  it("manages text state internally when uncontrolled", () => {
-    const { container } = renderWithProvider(
-      <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-    );
-
-    const input = screen.getByPlaceholderText("Type a message...");
-    const sendButton = getSendButton(container);
-
-    fireEvent.change(input, { target: { value: "hello" } });
-    fireEvent.click(sendButton!);
-
-    expect(mockOnSubmitMessage).toHaveBeenCalledWith("hello");
-    expect((input as HTMLTextAreaElement).value).toBe("");
-  });
-
-  it("does not send when Enter is pressed with Shift key", () => {
-    const mockOnChange = vi.fn();
-    renderWithProvider(
-      <CopilotChatInput
-        value="test"
-        onChange={mockOnChange}
-        onSubmitMessage={mockOnSubmitMessage}
-      />,
-    );
-
-    const input = screen.getByPlaceholderText("Type a message...");
-    fireEvent.keyDown(input, { key: "Enter", shiftKey: true });
-
-    expect(mockOnSubmitMessage).not.toHaveBeenCalled();
-  });
-
-  it("does not send empty or whitespace-only messages", () => {
-    const mockOnChange = vi.fn();
-
-    // Test empty string
-    const { container, rerender } = renderWithProvider(
-      <CopilotChatInput
-        value=""
-        onChange={mockOnChange}
-        onSubmitMessage={mockOnSubmitMessage}
-      />,
-    );
-
-    let sendButton = getSendButton(container);
-    fireEvent.click(sendButton!);
-    expect(mockOnSubmitMessage).not.toHaveBeenCalled();
-
-    // Test whitespace only
-    rerender(
-      <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
-        <CopilotChatInput
-          value="   "
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />
-      </CopilotChatConfigurationProvider>,
-    );
-    sendButton = getSendButton(container);
-    fireEvent.click(sendButton!);
-    expect(mockOnSubmitMessage).not.toHaveBeenCalled();
-  });
-
-  it("keeps input value when no submit handler is provided", () => {
-    renderWithProvider(<CopilotChatInput />);
-
-    const input = screen.getByPlaceholderText("Type a message...");
-
-    fireEvent.change(input, { target: { value: "draft" } });
-    fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
-
-    expect((input as HTMLTextAreaElement).value).toBe("draft");
-  });
-
-  it("enables button based on value prop", () => {
-    const mockOnChange = vi.fn();
-
-    // Test with empty value
-    const { container, rerender } = renderWithProvider(
-      <CopilotChatInput
-        value=""
-        onChange={mockOnChange}
-        onSubmitMessage={mockOnSubmitMessage}
-      />,
-    );
-
-    let sendButton = getSendButton(container);
-    expect(sendButton?.disabled).toBe(true);
-
-    // Test with non-empty value
-    rerender(
-      <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
-        <CopilotChatInput
-          value="hello"
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />
-      </CopilotChatConfigurationProvider>,
-    );
-    sendButton = getSendButton(container);
-    expect(sendButton?.disabled).toBe(false);
-
-    // Test with empty value again
-    rerender(
-      <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
-        <CopilotChatInput
-          value=""
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />
-      </CopilotChatConfigurationProvider>,
-    );
-    sendButton = getSendButton(container);
-    expect(sendButton?.disabled).toBe(true);
-  });
-
-  it("accepts custom slot classes", () => {
-    const mockOnChange = vi.fn();
-    const { container } = renderWithProvider(
-      <CopilotChatInput
-        value=""
-        onChange={mockOnChange}
-        onSubmitMessage={mockOnSubmitMessage}
-        className="custom-container"
-        textArea="custom-textarea"
-        sendButton="custom-button"
-      />,
-    );
-
-    const containerDiv = container.firstChild as HTMLElement;
-    const input = screen.getByPlaceholderText("Type a message...");
-    const sendButton = getSendButton(container);
-
-    expect(containerDiv.classList.contains("custom-container")).toBe(true);
-    expect(input.classList.contains("custom-textarea")).toBe(true);
-    expect(sendButton?.classList.contains("custom-button")).toBe(true);
-  });
-
-  it("accepts custom components via slots", () => {
-    const mockOnChange = vi.fn();
-    const CustomButton = (
-      props: React.ButtonHTMLAttributes<HTMLButtonElement>,
-    ) => (
-      <button {...props} data-testid="custom-button">
-        Send Now
-      </button>
-    );
-
-    renderWithProvider(
-      <CopilotChatInput
-        value=""
-        onChange={mockOnChange}
-        onSubmitMessage={mockOnSubmitMessage}
-        sendButton={CustomButton}
-      />,
-    );
-
-    const customButton = screen.getByTestId("custom-button");
-    expect(customButton).toBeDefined();
-    expect(customButton.textContent?.includes("Send Now")).toBe(true);
-  });
-
-  it("supports custom layout via children render prop", () => {
-    const mockOnChange = vi.fn();
-    renderWithProvider(
-      <CopilotChatInput
-        value=""
-        onChange={mockOnChange}
-        onSubmitMessage={mockOnSubmitMessage}
-      >
-        {({ textArea: TextArea, sendButton: SendButton }) => (
-          <div data-testid="custom-layout">
-            Custom Layout:
-            {SendButton}
-            {TextArea}
-          </div>
-        )}
-      </CopilotChatInput>,
-    );
-
-    const customLayout = screen.getByTestId("custom-layout");
-    expect(customLayout).toBeDefined();
-    expect(customLayout.textContent?.includes("Custom Layout:")).toBe(true);
-  });
-
-  it("passes containerRef to children render prop", () => {
-    const ref = React.createRef<HTMLDivElement>();
-    renderWithProvider(
-      <CopilotChatInput
-        value=""
-        onChange={vi.fn()}
-        onSubmitMessage={mockOnSubmitMessage}
-        containerRef={ref}
-      >
-        {({ containerRef }) => (
-          <div ref={containerRef} data-testid="custom-container">
-            Custom Container
-          </div>
-        )}
-      </CopilotChatInput>,
-    );
-
-    const container = screen.getByTestId("custom-container");
-    expect(container).toBeDefined();
-    expect(ref.current).toBe(container);
-  });
-
-  it("updates its internal layout data attribute when content expands", async () => {
-    renderWithProvider(
-      <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-    );
-
-    const textarea = screen.getByRole("textbox");
-    const grid = textarea.closest("[data-layout]") as HTMLElement | null;
-    expect(grid?.getAttribute("data-layout")).toBe("compact");
-
-    fireEvent.change(textarea, { target: { value: "line one\nline two" } });
-
-    await waitFor(() => {
-      expect(grid?.getAttribute("data-layout")).toBe("expanded");
-    });
-  });
-
-  it("executes slash commands via keyboard selection", async () => {
-    const handleFirst = vi.fn();
-    const handleSecond = vi.fn();
-
-    renderWithProvider(
-      <CopilotChatInput
-        onSubmitMessage={mockOnSubmitMessage}
-        toolsMenu={[
-          { label: "Say hi", action: handleFirst },
-          { label: "Open docs", action: handleSecond },
-        ]}
-      />,
-    );
-
-    const textarea = screen.getByRole("textbox");
-    fireEvent.change(textarea, { target: { value: "/" } });
-
-    const menu = await screen.findByTestId("copilot-slash-menu");
-    expect(menu).not.toBeNull();
-    expect(screen.queryByText("Say hi")).not.toBeNull();
-    expect(screen.queryByText("Open docs")).not.toBeNull();
-
-    fireEvent.keyDown(textarea, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-    });
-    fireEvent.keyDown(textarea, { key: "Enter", code: "Enter", keyCode: 13 });
-
-    expect(handleSecond).toHaveBeenCalledTimes(1);
-    expect(handleFirst).not.toHaveBeenCalled();
-
-    await waitFor(() => {
-      expect(screen.queryByTestId("copilot-slash-menu")).toBeNull();
-    });
-
-    expect((textarea as HTMLTextAreaElement).value).toBe("");
-  });
-
-  it("prioritizes prefix matches when filtering slash commands", async () => {
-    renderWithProvider(
-      <CopilotChatInput
-        onSubmitMessage={mockOnSubmitMessage}
-        toolsMenu={[
-          { label: "Reopen previous chat", action: vi.fn() },
-          { label: "Open CopilotKit", action: vi.fn() },
-          { label: "Help me operate", action: vi.fn() },
-        ]}
-      />,
-    );
-
-    const textarea = screen.getByRole("textbox");
-    fireEvent.change(textarea, { target: { value: "/op" } });
-
-    const menu = await screen.findByTestId("copilot-slash-menu");
-    const options = within(menu).getAllByRole("option");
-
-    expect(options[0]?.textContent?.includes("Open CopilotKit")).toBe(true);
-    expect(options[0]?.getAttribute("aria-selected")).toBe("true");
-
-    fireEvent.keyDown(textarea, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-    });
-    await waitFor(() => {
-      const updated = within(menu).getAllByRole("option");
-      expect(updated[1]?.getAttribute("aria-selected")).toBe("true");
-    });
-
-    fireEvent.change(textarea, { target: { value: "/ope" } });
-
-    await waitFor(() => {
-      const updatedOptions = within(menu).getAllByRole("option");
-      expect(updatedOptions[0]?.getAttribute("aria-selected")).toBe("true");
-      expect(
-        updatedOptions[0]?.textContent?.startsWith("Open CopilotKit"),
-      ).toBe(true);
-    });
-  });
-
-  it("limits slash menu height when commands exceed five items", async () => {
-    const tools = Array.from({ length: 6 }, (_, index) => ({
-      label: `Command ${index + 1}`,
-      action: vi.fn(),
-    }));
-
-    renderWithProvider(
-      <CopilotChatInput
-        onSubmitMessage={mockOnSubmitMessage}
-        toolsMenu={tools}
-      />,
-    );
-
-    const textarea = screen.getByRole("textbox");
-    fireEvent.change(textarea, { target: { value: "/" } });
-
-    const menu = await screen.findByTestId("copilot-slash-menu");
-
-    await waitFor(() => {
-      expect(menu.style.maxHeight).toBe("200px");
-    });
-
-    const options = within(menu).getAllByRole("option");
-    expect(options.length).toBe(6);
-  });
-
-  it("allows slash command actions to populate the input", async () => {
-    const greeting = "Hello Copilot! 👋 Could you help me with something?";
-    const label = "Say hi to CopilotKit";
-
-    renderWithProvider(
-      <CopilotChatInput
-        onSubmitMessage={mockOnSubmitMessage}
-        toolsMenu={[
-          {
-            label,
-            action: () => {
-              const textareaElement =
-                document.querySelector<HTMLTextAreaElement>("textarea");
-              if (!textareaElement) {
-                return;
-              }
-
-              const nativeSetter = Object.getOwnPropertyDescriptor(
-                window.HTMLTextAreaElement.prototype,
-                "value",
-              )?.set;
-              nativeSetter?.call(textareaElement, greeting);
-              textareaElement.dispatchEvent(
-                new Event("input", { bubbles: true }),
-              );
-            },
-          },
-        ]}
-      />,
-    );
-
-    const textarea = screen.getByRole("textbox");
-    fireEvent.change(textarea, { target: { value: "/" } });
-
-    const option = await screen.findByRole("option", { name: label });
-    fireEvent.mouseDown(option);
-
-    await waitFor(() => {
-      expect((textarea as HTMLTextAreaElement).value).toBe(greeting);
-    });
-  });
-
-  it("shows cancel and finish buttons in transcribe mode", () => {
-    const { container } = renderWithProvider(
-      <CopilotChatInput
-        mode="transcribe"
-        onSubmitMessage={mockOnSubmitMessage}
-        onStartTranscribe={() => {}}
-        onCancelTranscribe={() => {}}
-        onFinishTranscribe={() => {}}
-        onAddFile={() => {}}
-      />,
-    );
-
-    // Should show cancel button (X icon) - find by svg class
-    const cancelIcon = container.querySelector("svg.lucide-x");
-    expect(cancelIcon).toBeDefined();
-
-    // Should show finish button (checkmark icon) - find by svg class
-    const finishIcon = container.querySelector("svg.lucide-check");
-    expect(finishIcon).toBeDefined();
-
-    // Should show cancel button (X icon) and finish button (check icon)
-    const cancelButton = container.querySelector("svg.lucide-x");
-    const finishButton = container.querySelector("svg.lucide-check");
-    expect(cancelButton).toBeDefined();
-    expect(finishButton).toBeDefined();
-
-    // Should NOT show transcribe button (mic icon) in transcribe mode
-    const transcribeIcon = container.querySelector("svg.lucide-mic");
-    expect(transcribeIcon).toBeNull();
-
-    // Should NOT show send button (arrow-up icon) in transcribe mode
-    const sendIcon = container.querySelector("svg.lucide-arrow-up");
-    expect(sendIcon).toBeNull();
-  });
-
-  it("disables add menu button in transcribe mode", () => {
-    const { container } = renderWithProvider(
-      <CopilotChatInput
-        mode="transcribe"
-        onSubmitMessage={mockOnSubmitMessage}
-        onStartTranscribe={() => {}}
-        onCancelTranscribe={() => {}}
-        onFinishTranscribe={() => {}}
-        onAddFile={() => {}}
-        toolsMenu={[{ label: "Test Tool", action: () => {} }]}
-      />,
-    );
-
-    // Add button should be disabled (find by Plus icon)
-    const addIcon = container.querySelector("svg.lucide-plus");
-    const addButton = addIcon?.closest("button") as HTMLButtonElement | null;
-    expect(addButton).not.toBeNull();
-    expect(addButton?.disabled).toBe(true);
-  });
-
-  it("shows recording indicator instead of textarea in transcribe mode", () => {
-    const { container } = renderWithProvider(
-      <CopilotChatInput
-        mode="transcribe"
-        onSubmitMessage={mockOnSubmitMessage}
-        onStartTranscribe={() => {}}
-        onCancelTranscribe={() => {}}
-        onFinishTranscribe={() => {}}
-        onAddFile={() => {}}
-      />,
-    );
-
-    // Should show recording indicator (canvas element)
-    const recordingIndicator = container.querySelector("canvas");
-    expect(recordingIndicator).toBeDefined();
-
-    // Should NOT show textarea in transcribe mode
-    expect(screen.queryByRole("textbox")).toBeNull();
-  });
-
-  it("shows textarea in input mode", () => {
-    const { container } = renderWithProvider(
-      <CopilotChatInput
-        mode="input"
-        onSubmitMessage={mockOnSubmitMessage}
-        onStartTranscribe={() => {}}
-        onCancelTranscribe={() => {}}
-        onFinishTranscribe={() => {}}
-        onAddFile={() => {}}
-      />,
-    );
-
-    // Should show textarea in input mode
-    expect(screen.getByRole("textbox")).toBeDefined();
-
-    // Should NOT show recording indicator (red div)
-    const recordingIndicator = container.querySelector(".bg-red-500");
-    expect(recordingIndicator).toBeNull();
-  });
-
-  it("positions the textarea next to the add menu button when single line", () => {
-    renderWithProvider(
-      <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-    );
-
-    const textarea = screen.getByRole("textbox");
-    const layoutCell = textarea.parentElement as HTMLElement;
-    const gridContainer = layoutCell?.parentElement as HTMLElement;
-
-    expect(layoutCell.className).toContain("col-start-2");
-    expect(layoutCell.className).not.toContain("col-span-3");
-    expect(gridContainer.className).toContain("items-center");
-  });
-
-  it("toggles textarea padding based on multiline state", async () => {
-    const { container } = renderWithProvider(
-      <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-    );
-
-    mockLayoutMetrics(container);
-
-    const textarea = screen.getByRole("textbox");
-    expect(textarea.className).toContain("pr-5");
-    expect(textarea.className).not.toContain("px-5");
-
-    fireEvent.change(textarea, {
-      target: {
-        value:
-          "a very long line that should wrap once it exceeds the width of the input",
-      },
-    });
-
-    await waitFor(() => {
-      expect(textarea.className).toContain("px-5");
-      expect(textarea.className).not.toContain("pr-5");
-    });
-  });
-
-  it("returns to the compact layout when text no longer needs extra space", async () => {
-    const { container } = renderWithProvider(
-      <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-    );
-
-    mockLayoutMetrics(container);
-
-    const textarea = screen.getByRole("textbox");
-    const layoutCell = textarea.parentElement as HTMLElement;
-
-    fireEvent.change(textarea, {
-      target: {
-        value:
-          "this is a very long line that should expand the layout before it wraps so we can see the stacked arrangement",
-      },
-    });
-
-    await waitFor(() => {
-      expect(layoutCell.className).toContain("col-span-3");
-    });
-
-    fireEvent.change(textarea, { target: { value: "short" } });
-
-    await waitFor(() => {
-      expect(layoutCell.className).toContain("col-start-2");
-      expect(layoutCell.className).not.toContain("col-span-3");
-    });
-  });
-
-  it("moves the textarea above the add menu button when multiple lines", async () => {
-    renderWithProvider(
-      <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-    );
-
-    const textarea = screen.getByRole("textbox");
-
-    fireEvent.change(textarea, {
-      target: { value: "first line\nsecond line" },
-    });
-
-    await waitFor(() => {
-      const layoutCell = textarea.parentElement as HTMLElement;
-      expect(layoutCell.className).toContain("col-span-3");
-      expect(layoutCell.className).not.toContain("col-start-2");
-    });
-  });
-
-  it("disables the add menu button when no menu items are provided", () => {
-    const { container } = renderWithProvider(
-      <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-    );
-
-    const addButton = getAddMenuButton(container);
-
-    expect(addButton).not.toBeNull();
-    expect(addButton?.disabled).toBe(true);
-  });
-
-  it("opens the add menu and runs onAddFile when the default item is clicked", async () => {
-    const handleAddFile = vi.fn();
-
-    const { container } = renderWithProvider(
-      <CopilotChatInput
-        onAddFile={handleAddFile}
-        onSubmitMessage={mockOnSubmitMessage}
-      />,
-    );
-
-    mockLayoutMetrics(container);
-
-    const addButton = getAddMenuButton(container);
-    expect(addButton).not.toBeNull();
-    expect(addButton?.disabled).toBe(false);
-
-    const user = userEvent.setup();
-    await user.click(addButton!);
-
-    await waitFor(() => {
-      expect(addButton?.getAttribute("data-state")).toBe("open");
-    });
-
-    const menuItem = await screen.findByRole("menuitem", {
-      name: "Add attachments",
-    });
-    fireEvent.click(menuItem);
-
-    expect(handleAddFile).toHaveBeenCalledTimes(1);
-  });
-
-  it("renders additional custom menu items from the tools menu", async () => {
-    const handleCustom = vi.fn();
-
-    const { container } = renderWithProvider(
-      <CopilotChatInput
-        toolsMenu={[{ label: "Custom action", action: handleCustom }]}
-        onSubmitMessage={mockOnSubmitMessage}
-      />,
-    );
-
-    mockLayoutMetrics(container);
-
-    const addButton = getAddMenuButton(container);
-    expect(addButton).not.toBeNull();
-    const user = userEvent.setup();
-    await user.click(addButton!);
-
-    await waitFor(() => {
-      expect(addButton?.getAttribute("data-state")).toBe("open");
-    });
-
-    const menuItem = await screen.findByRole("menuitem", {
-      name: "Custom action",
-    });
-    fireEvent.click(menuItem);
-
-    expect(handleCustom).toHaveBeenCalledTimes(1);
-  });
-
-  // Controlled component tests
-  describe("Controlled component behavior", () => {
-    it("displays the provided value prop", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      renderWithProvider(
-        <CopilotChatInput
-          value="test value"
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const input = screen.getByRole("textbox");
-      expect((input as HTMLTextAreaElement).value).toBe("test value");
-    });
-
-    it("calls onChange when user types", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      renderWithProvider(
-        <CopilotChatInput
-          value=""
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const input = screen.getByRole("textbox");
-      fireEvent.change(input, { target: { value: "new text" } });
-
-      expect(mockOnChange).toHaveBeenCalledWith("new text");
-    });
-
-    it("calls onSubmitMessage when form is submitted", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      renderWithProvider(
-        <CopilotChatInput
-          value="hello world"
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const input = screen.getByRole("textbox");
-      fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
-
-      expect(mockOnSubmitMessage).toHaveBeenCalledWith("hello world");
-    });
-
-    it("calls onSubmitMessage when send button is clicked", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      const { container } = renderWithProvider(
-        <CopilotChatInput
-          value="test message"
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const sendButton = getSendButton(container);
-      expect(sendButton).not.toBeNull();
-      fireEvent.click(sendButton!);
-
-      expect(mockOnSubmitMessage).toHaveBeenCalledWith("test message");
-    });
-
-    it("trims whitespace when submitting", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      renderWithProvider(
-        <CopilotChatInput
-          value="  hello world  "
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const input = screen.getByRole("textbox");
-      fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
-
-      expect(mockOnSubmitMessage).toHaveBeenCalledWith("hello world");
-    });
-
-    it("does not submit empty or whitespace-only messages", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      const { container } = renderWithProvider(
-        <CopilotChatInput
-          value="   "
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const sendButton = getSendButton(container);
-      expect(sendButton).not.toBeNull();
-      fireEvent.click(sendButton!);
-
-      expect(mockOnSubmitMessage).not.toHaveBeenCalled();
-    });
-
-    it("disables send button when onSubmitMessage is not provided", () => {
-      const mockOnChange = vi.fn();
-
-      const { container } = renderWithProvider(
-        <CopilotChatInput value="some text" onChange={mockOnChange} />,
-      );
-
-      const sendButton = getSendButton(container);
-      expect(sendButton?.disabled).toBe(true);
-    });
-
-    it("disables send button when value is empty", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      const { container } = renderWithProvider(
-        <CopilotChatInput
-          value=""
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const sendButton = getSendButton(container);
-      expect(sendButton?.disabled).toBe(true);
-    });
-
-    it("enables send button when value has content and onSubmitMessage is provided", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      const { container } = renderWithProvider(
-        <CopilotChatInput
-          value="hello"
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const sendButton = getSendButton(container);
-      expect(sendButton?.disabled).toBe(false);
-    });
-
-    it("works as a fully controlled component", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      const { rerender } = renderWithProvider(
-        <CopilotChatInput
-          value="initial"
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const input = screen.getByRole("textbox");
-      expect((input as HTMLTextAreaElement).value).toBe("initial");
-
-      // Simulate parent component updating the value
-      rerender(
-        <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
-          <CopilotChatInput
-            value="updated"
-            onChange={mockOnChange}
-            onSubmitMessage={mockOnSubmitMessage}
-          />
-        </CopilotChatConfigurationProvider>,
-      );
-
-      expect((input as HTMLTextAreaElement).value).toBe("updated");
-    });
-
-    it("does not clear input after submission when controlled", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      const { container } = renderWithProvider(
-        <CopilotChatInput
-          value="test message"
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const input = screen.getByRole("textbox");
-      const sendButton = getSendButton(container);
-
-      fireEvent.click(sendButton!);
-
-      // In controlled mode, the component should not clear the input
-      // It's up to the parent to manage the value
-      expect((input as HTMLTextAreaElement).value).toBe("test message");
-      expect(mockOnSubmitMessage).toHaveBeenCalledWith("test message");
-    });
-
-    it("calls onChange with empty string after submission in controlled mode", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      const { container } = renderWithProvider(
-        <CopilotChatInput
-          value="test message"
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const sendButton = getSendButton(container);
-      fireEvent.click(sendButton!);
-
-      expect(mockOnSubmitMessage).toHaveBeenCalledWith("test message");
-      expect(mockOnChange).toHaveBeenCalledWith("");
-    });
-
-    it("calls onChange with empty string after Enter submission in controlled mode", () => {
-      const mockOnChange = vi.fn();
-      const mockOnSubmitMessage = vi.fn();
-
-      renderWithProvider(
-        <CopilotChatInput
-          value="hello world"
-          onChange={mockOnChange}
-          onSubmitMessage={mockOnSubmitMessage}
-        />,
-      );
-
-      const input = screen.getByRole("textbox");
-      fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
-
-      expect(mockOnSubmitMessage).toHaveBeenCalledWith("hello world");
-      expect(mockOnChange).toHaveBeenCalledWith("");
-    });
-  });
-
-  describe("Container dimension cache", () => {
-    const OriginalResizeObserver = globalThis.ResizeObserver;
-
-    class MockResizeObserver {
-      static instances: MockResizeObserver[] = [];
-      callback: (entries: Array<{ target: Element }>) => void;
-      observedTargets = new Set<Element>();
-
-      constructor(cb: (entries: Array<{ target: Element }>) => void) {
-        this.callback = cb;
-        MockResizeObserver.instances.push(this);
-      }
-
-      observe = vi.fn((target: Element) => {
-        this.observedTargets.add(target);
-      });
-
-      unobserve = vi.fn((target: Element) => {
-        this.observedTargets.delete(target);
-      });
-
-      disconnect = vi.fn(() => {
-        this.observedTargets.clear();
-      });
-    }
-
-    const DEFAULT_LAYOUT_OPTIONS = {
-      gridWidth: 640,
-      addWidth: 48,
-      actionsWidth: 96,
-      gridPadding: 16,
-      columnGap: 8,
-      textareaPadding: 20,
-    } as const;
-
-    /** Trigger all observers with all their observed targets. */
-    const triggerAllResizeObservers = () => {
-      for (const instance of MockResizeObserver.instances) {
-        const entries = [...instance.observedTargets].map((target) => ({
-          target,
-        }));
-        if (entries.length > 0) {
-          instance.callback(entries);
-        }
-      }
-    };
-
-    /** Trigger observers that watch the given targets, with only those targets as entries. */
-    const triggerResizeForTargets = (...targets: Element[]) => {
-      for (const instance of MockResizeObserver.instances) {
-        const matching = targets.filter((t) => instance.observedTargets.has(t));
-        if (matching.length > 0) {
-          instance.callback(matching.map((t) => ({ target: t })));
-        }
-      }
-    };
-
-    beforeEach(() => {
-      MockResizeObserver.instances = [];
-      // Double cast required: MockResizeObserver's callback signature uses a
-      // simplified `{ target: Element }` entry instead of the full
-      // ResizeObserverEntry (which includes contentRect, borderBoxSize, etc.)
-      // that the real ResizeObserverCallback demands.
-      globalThis.ResizeObserver =
-        MockResizeObserver as unknown as typeof ResizeObserver;
-    });
-
-    afterEach(() => {
-      vi.restoreAllMocks();
-      globalThis.ResizeObserver = OriginalResizeObserver;
-    });
-
-    /**
-     * Extends mockLayoutMetrics with getComputedStyle mocks so that
-     * updateContainerCache can compute real compactWidth and font values,
-     * exercising the canvas-based text measurement path.
-     */
-    const mockLayoutMetricsWithComputedStyle = (
-      container: HTMLElement,
-      options?: {
-        gridWidth?: number;
-        addWidth?: number;
-        actionsWidth?: number;
-        gridPadding?: number;
-        columnGap?: number;
-        textareaPadding?: number;
-        font?: string;
-      },
-    ) => {
-      mockLayoutMetrics(container, {
-        gridWidth: options?.gridWidth,
-        addWidth: options?.addWidth,
-        actionsWidth: options?.actionsWidth,
-      });
-
-      const {
-        gridPadding = 16,
-        columnGap = 8,
-        textareaPadding = 20,
-        font = "16px sans-serif",
-      } = options ?? {};
-
-      const grid = container.querySelector(
-        "div.cpk\\:grid",
-      ) as HTMLElement | null;
-      const textarea = container.querySelector(
-        "textarea",
-      ) as HTMLElement | null;
-
-      const originalGetComputedStyle = window.getComputedStyle;
-      // Cast needed: spreading a CSSStyleDeclaration loses the indexed-property
-      // accessors and prototype methods, so the result doesn't satisfy the full
-      // CSSStyleDeclaration interface. Only the properties the SUT reads matter.
-      vi.spyOn(window, "getComputedStyle").mockImplementation((el) => {
-        if (el === grid) {
-          return {
-            ...originalGetComputedStyle(el),
-            paddingLeft: `${gridPadding}px`,
-            paddingRight: `${gridPadding}px`,
-            columnGap: `${columnGap}px`,
-          } as CSSStyleDeclaration;
-        }
-        if (el === textarea) {
-          return {
-            ...originalGetComputedStyle(el),
-            paddingLeft: `${textareaPadding}px`,
-            paddingRight: `${textareaPadding}px`,
-            paddingTop: "12px",
-            paddingBottom: "12px",
-            font,
-            fontStyle: "normal",
-            fontVariant: "normal",
-            fontWeight: "400",
-            fontSize: "16px",
-            lineHeight: "24px",
-            fontFamily: "sans-serif",
-          } as CSSStyleDeclaration;
-        }
-        return originalGetComputedStyle(el);
-      });
-    };
-
-    /**
-     * Mocks canvas measureText to return a deterministic width per character.
-     */
-    const mockCanvasMeasureText = (charWidth: number) => {
-      const originalGetContext = HTMLCanvasElement.prototype.getContext;
-      vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockImplementation(
-        // Double cast required: getContext has 6+ overloaded signatures
-        // (one per context type) and vitest's mockImplementation cannot
-        // unify them into a single callable type.
-        function (
-          this: HTMLCanvasElement,
-          contextId: string,
-          ...args: unknown[]
-        ) {
-          if (contextId === "2d") {
-            const ctx = originalGetContext.call(
-              this,
-              "2d",
-              ...(args as [unknown]),
-            ) as CanvasRenderingContext2D | null;
-            if (ctx) {
-              // Cast needed: TextMetrics has many readonly properties
-              // (actualBoundingBoxAscent, etc.) that are irrelevant to the
-              // SUT — only `width` is read.
-              ctx.measureText = (text: string) =>
-                ({ width: text.length * charWidth }) as TextMetrics;
-            }
-            return ctx;
-          }
-          return originalGetContext.call(
-            this,
-            contextId,
-            ...(args as [unknown]),
-          );
-        } as unknown as typeof HTMLCanvasElement.prototype.getContext,
-      );
-    };
-
-    /**
-     * Sets up all DOM mocks and invalidates the stale cache from the initial
-     * render by triggering the ResizeObserver callback.
-     */
-    const setupMocksAndInvalidateCache = (
-      container: HTMLElement,
-      options?: Parameters<typeof mockLayoutMetricsWithComputedStyle>[1],
-      charWidth = 10,
-    ) => {
-      mockLayoutMetricsWithComputedStyle(container, options);
-      mockCanvasMeasureText(charWidth);
-      // Invalidate the stale cache populated during the initial render
-      // so the next evaluateLayout call re-measures with our mocked values.
-      triggerAllResizeObservers();
-    };
-
-    /**
-     * Render CopilotChatInput, set up layout mocks, type text, and wait for
-     * the layout to settle. Returns the resulting data-layout attribute value.
-     */
-    const renderTypeAndExpectLayout = async (
-      text: string,
-      options?: Parameters<typeof mockLayoutMetricsWithComputedStyle>[1],
-      charWidth = 10,
-    ) => {
-      const { container } = renderWithProvider(
-        <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-      );
-      setupMocksAndInvalidateCache(container, options, charWidth);
-
-      const textarea = screen.getByRole("textbox");
-      fireEvent.change(textarea, { target: { value: text } });
-
-      const grid = await waitFor(() => {
-        const g = getLayoutGrid(textarea);
-        expect(g).not.toBeNull();
-        return g;
-      });
-      return {
-        container,
-        textarea,
-        grid,
-        layout: grid.getAttribute("data-layout"),
-      };
-    };
-
-    it("expands layout via canvas text measurement when a single long line exceeds compact width", async () => {
-      // gridWidth=640, gridPadding=16 each side, columnGap=8, addWidth=48, actionsWidth=96
-      // compactWidth = (640 - 32) - 48 - 96 - 16 = 448
-      // compactInnerWidth = 448 - 20 - 20 = 408
-      // With charWidth=10, text of length 50 = width 500, which > 408 → expand
-      const { layout } = await renderTypeAndExpectLayout(
-        "a".repeat(50),
-        DEFAULT_LAYOUT_OPTIONS,
-      );
-      expect(layout).toBe("expanded");
-    });
-
-    it("stays compact when single-line text fits within the cached compact width", async () => {
-      // Width = 10 * 10 = 100, well within compactInnerWidth of 408
-      const { layout } = await renderTypeAndExpectLayout(
-        "a".repeat(10),
-        DEFAULT_LAYOUT_OPTIONS,
-      );
-      expect(layout).toBe("compact");
-    });
-
-    it("re-evaluates layout correctly after container resize invalidates the cache", async () => {
-      // Phase 1: wide container — 30 chars fit in compact
-      const { container, textarea } = await renderTypeAndExpectLayout(
-        "a".repeat(30),
-        DEFAULT_LAYOUT_OPTIONS,
-      );
-      expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-        "compact",
-      );
-
-      // Phase 2: simulate a container resize to a much narrower width.
-      // compactWidth = (300 - 32) - 48 - 96 - 16 = 108
-      // compactInnerWidth = 108 - 20 - 20 = 68
-      // Text width = 30 * 10 = 300 > 68 → should expand
-      vi.restoreAllMocks();
-      mockLayoutMetricsWithComputedStyle(container, {
-        ...DEFAULT_LAYOUT_OPTIONS,
-        gridWidth: 300,
-      });
-      mockCanvasMeasureText(10);
-
-      // Trigger resize to invalidate the cache with the new narrow dimensions
-      triggerAllResizeObservers();
-
-      // Trigger re-evaluation
-      fireEvent.change(textarea, {
-        target: { value: "a".repeat(30) + " " },
-      });
-
-      await waitFor(() => {
-        expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-          "expanded",
-        );
-      });
-    });
-
-    it("stays compact when textarea font cannot be resolved (empty font fallback)", async () => {
-      const { container } = renderWithProvider(
-        <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-      );
-
-      mockLayoutMetrics(container, {
-        gridWidth: DEFAULT_LAYOUT_OPTIONS.gridWidth,
-        addWidth: DEFAULT_LAYOUT_OPTIONS.addWidth,
-        actionsWidth: DEFAULT_LAYOUT_OPTIONS.actionsWidth,
-      });
-
-      const originalGetComputedStyle = window.getComputedStyle;
-      // Cast needed: see comment in mockLayoutMetricsWithComputedStyle above.
-      vi.spyOn(window, "getComputedStyle").mockImplementation((el) => {
-        return {
-          ...originalGetComputedStyle(el),
-          font: "",
-          fontStyle: "",
-          fontVariant: "",
-          fontWeight: "",
-          fontSize: "",
-          lineHeight: "",
-          fontFamily: "",
-          paddingLeft: "16px",
-          paddingRight: "16px",
-          columnGap: "8px",
-        } as CSSStyleDeclaration;
-      });
-
-      // Invalidate cache so it tries to rebuild with the empty font mock
-      triggerAllResizeObservers();
-
-      const textarea = screen.getByRole("textbox");
-
-      // Single-line text (under 50-char mock wrap threshold) that would exceed
-      // compact width via canvas measurement, but font is empty → skipped → compact
-      fireEvent.change(textarea, {
-        target: { value: "a".repeat(45) },
-      });
-
-      await waitFor(() => {
-        expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-          "compact",
-        );
-      });
-    });
-
-    it("stays compact when canvas.getContext returns null (no text-width measurement)", async () => {
-      const { container } = renderWithProvider(
-        <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-      );
-
-      setupMocksAndInvalidateCache(container, DEFAULT_LAYOUT_OPTIONS);
-
-      // Override getContext to return null for "2d"
-      vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
-
-      // Invalidate cache again so the next evaluateLayout uses the null context
-      triggerAllResizeObservers();
-
-      const textarea = screen.getByRole("textbox");
-
-      // Single-line text (under 50-char mock wrap threshold) that would exceed
-      // compact width via canvas, but getContext is null → stays compact
-      fireEvent.change(textarea, {
-        target: { value: "a".repeat(45) },
-      });
-
-      await waitFor(() => {
-        expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-          "compact",
-        );
-      });
-    });
-
-    /**
-     * Render, set up all mocks, populate the cache with a short keystroke,
-     * and wait for compact layout. Returns container, textarea, and grid.
-     */
-    const renderAndWarmCache = async () => {
-      const { container } = renderWithProvider(
-        <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-      );
-      setupMocksAndInvalidateCache(container, DEFAULT_LAYOUT_OPTIONS);
-
-      const textarea = screen.getByRole("textbox");
-      fireEvent.change(textarea, { target: { value: "a" } });
-
-      await waitFor(() => {
-        expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-          "compact",
-        );
-      });
-
-      return {
-        container,
-        textarea,
-        grid: container.querySelector("div.cpk\\:grid") as HTMLElement,
-      };
-    };
-
-    /**
-     * Install a counting spy on an element's getBoundingClientRect,
-     * delegating to the original implementation. Returns the spy.
-     */
-    const installBoundingRectSpy = (element: HTMLElement) => {
-      const spy = vi.fn(element.getBoundingClientRect.bind(element));
-      Object.defineProperty(element, "getBoundingClientRect", {
-        value: spy,
-        configurable: true,
-      });
-      return spy;
-    };
-
-    it("does not re-read container dimensions on keystroke when cache is warm", async () => {
-      const { textarea, grid } = await renderAndWarmCache();
-
-      const addRectSpy = installBoundingRectSpy(
-        grid.children[0] as HTMLElement,
-      );
-      const actionsRectSpy = installBoundingRectSpy(
-        grid.children[2] as HTMLElement,
-      );
-
-      // Type more — should NOT call getBoundingClientRect since cache is warm
-      fireEvent.change(textarea, { target: { value: "ab" } });
-      fireEvent.change(textarea, { target: { value: "abc" } });
-
-      await waitFor(() => {
-        expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-          "compact",
-        );
-      });
-
-      expect(addRectSpy).not.toHaveBeenCalled();
-      expect(actionsRectSpy).not.toHaveBeenCalled();
-    });
-
-    it("does not invalidate cache when only the textarea resizes", async () => {
-      const { textarea, grid } = await renderAndWarmCache();
-
-      const addRectSpy = installBoundingRectSpy(
-        grid.children[0] as HTMLElement,
-      );
-
-      // Trigger textarea-only resize — should NOT invalidate cache
-      triggerResizeForTargets(textarea);
-      fireEvent.change(textarea, { target: { value: "ab" } });
-
-      await waitFor(() => {
-        expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-          "compact",
-        );
-      });
-
-      expect(addRectSpy).not.toHaveBeenCalled();
-    });
-
-    it("invalidates cache when container targets resize", async () => {
-      const { textarea, grid } = await renderAndWarmCache();
-
-      const addRectSpy = installBoundingRectSpy(
-        grid.children[0] as HTMLElement,
-      );
-
-      // Trigger container resize — SHOULD invalidate cache
-      triggerResizeForTargets(grid);
-      fireEvent.change(textarea, { target: { value: "ab" } });
-
-      await waitFor(() => {
-        expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-          "compact",
-        );
-      });
-
-      // Cache was invalidated, so updateContainerCache called getBoundingClientRect
-      expect(addRectSpy).toHaveBeenCalled();
-    });
-
-    it("keeps cache warm during layout toggle (ignoreResizeRef path)", async () => {
-      const { textarea, grid } = await renderAndWarmCache();
-
-      // Trigger expansion — ignoreResizeRef set to true by updateLayout
-      fireEvent.change(textarea, { target: { value: "line1\nline2" } });
-      await waitFor(() => {
-        expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-          "expanded",
-        );
-      });
-
-      // Simulate observer firing from the layout toggle.
-      // Self-inflicted resize: ignoreResizeRef is consumed, cache stays warm.
-      triggerAllResizeObservers();
-
-      // Go back to short text — cache should still be warm from before the toggle.
-      const addRectSpy = installBoundingRectSpy(
-        grid.children[0] as HTMLElement,
-      );
-
-      fireEvent.change(textarea, { target: { value: "short" } });
-      await waitFor(() => {
-        expect(getLayoutGrid(textarea).getAttribute("data-layout")).toBe(
-          "compact",
-        );
-      });
-
-      // Cache was NOT invalidated — no getBoundingClientRect needed
-      expect(addRectSpy).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("Scroll behavior", () => {
-    it("does not call scrollIntoView when the textarea receives focus", async () => {
-      const scrollIntoViewMock = vi.fn();
-      HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
-
-      renderWithProvider(
-        <CopilotChatInput autoFocus onSubmitMessage={mockOnSubmitMessage} />,
-      );
-
-      const textarea = screen.getByRole("textbox");
-
-      // Trigger focus explicitly (autoFocus also triggers it, but let's be explicit)
-      fireEvent.focus(textarea);
-
-      // Wait long enough for the 300ms setTimeout inside the focus handler
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      expect(scrollIntoViewMock).not.toHaveBeenCalled();
-
-      // Clean up
-      delete (HTMLElement.prototype as any).scrollIntoView;
-    });
-
-    it("does not auto-focus the textarea by default", () => {
-      const focusSpy = vi.spyOn(HTMLElement.prototype, "focus");
-
-      renderWithProvider(
-        <CopilotChatInput onSubmitMessage={mockOnSubmitMessage} />,
-      );
-
-      expect(focusSpy).not.toHaveBeenCalled();
-      focusSpy.mockRestore();
-    });
-
-    it("auto-focuses with preventScroll when autoFocus is true", () => {
-      const focusSpy = vi.spyOn(HTMLElement.prototype, "focus");
-
-      renderWithProvider(
-        <CopilotChatInput autoFocus onSubmitMessage={mockOnSubmitMessage} />,
-      );
-
-      expect(focusSpy).toHaveBeenCalledWith({ preventScroll: true });
-      focusSpy.mockRestore();
-    });
-  });
-});