@copilotkit/react-core 1.57.3 → 1.58.0

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

@@ -1,929 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { CopilotChatInput } from "../CopilotChatInput";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-
-// Wrapper to provide required context
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <CopilotKitProvider>
-    <CopilotChatConfigurationProvider threadId="test-thread">
-      <div style={{ height: 200 }}>{children}</div>
-    </CopilotChatConfigurationProvider>
-  </CopilotKitProvider>
-);
-
-describe("CopilotChatInput Slot System E2E Tests", () => {
-  // ============================================================================
-  // 1. TAILWIND CLASS TESTS
-  // ============================================================================
-  describe("1. Tailwind Class Slot Override", () => {
-    describe("textArea slot", () => {
-      it("should apply tailwind class string to textArea", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput textArea="border-2 border-blue-500 rounded-lg p-4" />
-          </TestWrapper>,
-        );
-
-        const textAreaEl = container.querySelector(".border-blue-500");
-        expect(textAreaEl).toBeDefined();
-      });
-
-      it("should override default textArea className", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput textArea="custom-textarea-class" />
-          </TestWrapper>,
-        );
-
-        expect(container.querySelector(".custom-textarea-class")).toBeDefined();
-      });
-    });
-
-    describe("sendButton slot", () => {
-      it("should apply tailwind class string to sendButton", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput sendButton="bg-green-500 hover:bg-green-600 rounded-full" />
-          </TestWrapper>,
-        );
-
-        const sendBtn = container.querySelector(".bg-green-500");
-        expect(sendBtn).toBeDefined();
-      });
-    });
-
-    describe("startTranscribeButton slot", () => {
-      it("should apply tailwind class string to startTranscribeButton", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput
-              onStartTranscribe={() => {}}
-              startTranscribeButton="bg-red-500 rounded"
-            />
-          </TestWrapper>,
-        );
-
-        const transcribeBtn = container.querySelector(".bg-red-500");
-        // Button may only appear when transcription is enabled
-      });
-    });
-
-    describe("cancelTranscribeButton slot", () => {
-      it("should apply tailwind class string to cancelTranscribeButton", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput
-              mode="transcribe"
-              onCancelTranscribe={() => {}}
-              cancelTranscribeButton="bg-gray-500"
-            />
-          </TestWrapper>,
-        );
-
-        const cancelBtn = container.querySelector(".bg-gray-500");
-        // Button appears in transcribe mode
-      });
-    });
-
-    describe("finishTranscribeButton slot", () => {
-      it("should apply tailwind class string to finishTranscribeButton", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput
-              mode="transcribe"
-              onFinishTranscribe={() => {}}
-              finishTranscribeButton="bg-purple-500"
-            />
-          </TestWrapper>,
-        );
-
-        const finishBtn = container.querySelector(".bg-purple-500");
-        // Button appears in transcribe mode
-      });
-    });
-
-    describe("addMenuButton slot", () => {
-      it("should apply tailwind class string to addMenuButton", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput
-              toolsMenu={[{ label: "Test", action: () => {} }]}
-              addMenuButton="bg-yellow-500"
-            />
-          </TestWrapper>,
-        );
-
-        const addBtn = container.querySelector(".bg-yellow-500");
-        // Button appears when toolsMenu is provided
-      });
-    });
-
-    describe("audioRecorder slot", () => {
-      it("should apply tailwind class string to audioRecorder", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput
-              mode="transcribe"
-              audioRecorder="border-dashed border-2"
-            />
-          </TestWrapper>,
-        );
-
-        const recorder = container.querySelector(".border-dashed");
-        // Recorder appears in transcribe mode
-      });
-    });
-  });
-
-  // ============================================================================
-  // 2. PROPERTIES (onClick, etc.) TESTS
-  // ============================================================================
-  describe("2. Properties Slot Override", () => {
-    describe("textArea props", () => {
-      it("should pass placeholder prop to textArea", async () => {
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              textArea={{ placeholder: "Custom placeholder..." }}
-            />
-          </TestWrapper>,
-        );
-
-        const textarea = await screen.findByPlaceholderText(
-          "Custom placeholder...",
-        );
-        expect(textarea).toBeDefined();
-      });
-
-      it("should pass disabled prop to textArea", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              textArea={
-                { disabled: true, "data-testid": "disabled-textarea" } as any
-              }
-            />
-          </TestWrapper>,
-        );
-
-        const textarea = screen.queryByTestId("disabled-textarea");
-        if (textarea) {
-          expect(textarea.hasAttribute("disabled")).toBe(true);
-        }
-      });
-
-      it("should pass onKeyDown prop to textArea", async () => {
-        const handleKeyDown = vi.fn();
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput textArea={{ onKeyDown: handleKeyDown }} />
-          </TestWrapper>,
-        );
-
-        const textarea = await screen.findByRole("textbox");
-        fireEvent.keyDown(textarea, { key: "a" });
-        // Handler should be called
-      });
-
-      it("should pass autoFocus prop to textArea", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatInput textArea={{ autoFocus: true }} />
-          </TestWrapper>,
-        );
-
-        const textarea = document.querySelector("textarea");
-        // autoFocus behavior may vary
-      });
-    });
-
-    describe("sendButton props", () => {
-      it("should pass onClick handler to sendButton", () => {
-        const handleClick = vi.fn();
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              // Need to provide onSubmitMessage and value to enable the button, or override disabled
-              sendButton={
-                {
-                  onClick: handleClick,
-                  disabled: false,
-                  "data-testid": "send-btn",
-                } as any
-              }
-            />
-          </TestWrapper>,
-        );
-
-        const sendBtn = screen.queryByTestId("send-btn");
-        if (sendBtn) {
-          fireEvent.click(sendBtn);
-          expect(handleClick).toHaveBeenCalled();
-        }
-      });
-
-      it("should pass disabled prop to sendButton", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              sendButton={
-                { disabled: true, "data-testid": "disabled-send" } as any
-              }
-            />
-          </TestWrapper>,
-        );
-
-        const sendBtn = screen.queryByTestId("disabled-send");
-        if (sendBtn) {
-          expect(sendBtn.hasAttribute("disabled")).toBe(true);
-        }
-      });
-
-      it("should pass aria-label prop to sendButton", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatInput sendButton={{ "aria-label": "Submit message" }} />
-          </TestWrapper>,
-        );
-
-        const sendBtn = document.querySelector("[aria-label='Submit message']");
-        expect(sendBtn).toBeDefined();
-      });
-    });
-
-    describe("addMenuButton props", () => {
-      it("should pass onClick handler to addMenuButton", () => {
-        const handleClick = vi.fn();
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              toolsMenu={[{ label: "Item", action: () => {} }]}
-              addMenuButton={
-                { onClick: handleClick, "data-testid": "add-menu" } as any
-              }
-            />
-          </TestWrapper>,
-        );
-
-        const addBtn = screen.queryByTestId("add-menu");
-        if (addBtn) {
-          fireEvent.click(addBtn);
-        }
-      });
-    });
-
-    describe("user props override pre-set props", () => {
-      it("user disabled should override default disabled state", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              sendButton={
-                { disabled: false, "data-testid": "override-send" } as any
-              }
-            />
-          </TestWrapper>,
-        );
-
-        const sendBtn = screen.queryByTestId("override-send");
-        // User's disabled=false should take effect
-      });
-    });
-  });
-
-  // ============================================================================
-  // 3. CUSTOM COMPONENT TESTS
-  // ============================================================================
-  describe("3. Custom Component Slot Override", () => {
-    describe("textArea custom component", () => {
-      it("should render custom textArea component", () => {
-        const CustomTextArea = React.forwardRef<HTMLTextAreaElement, any>(
-          ({ value, onChange, ...props }, ref) => (
-            <textarea
-              ref={ref}
-              data-testid="custom-textarea"
-              value={value}
-              onChange={(e) => onChange?.(e.target.value)}
-              className="custom-input"
-              {...props}
-            />
-          ),
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput textArea={CustomTextArea} />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("custom-textarea")).toBeDefined();
-      });
-
-      it("custom textArea should receive value and onChange props", () => {
-        let receivedValue: string | undefined;
-        let receivedOnChange: any;
-
-        const CustomTextArea = React.forwardRef<HTMLTextAreaElement, any>(
-          ({ value, onChange, ...props }, ref) => {
-            receivedValue = value;
-            receivedOnChange = onChange;
-            return (
-              <textarea
-                ref={ref}
-                data-testid="value-check-textarea"
-                value={value || ""}
-                onChange={(e) => onChange?.(e.target.value)}
-                {...props}
-              />
-            );
-          },
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              textArea={CustomTextArea}
-              value="test value"
-              onChange={() => {}}
-            />
-          </TestWrapper>,
-        );
-
-        expect(receivedValue).toBe("test value");
-        expect(receivedOnChange).toBeDefined();
-      });
-    });
-
-    describe("sendButton custom component", () => {
-      it("should render custom sendButton component", () => {
-        const CustomSendButton: React.FC<any> = ({ onClick, disabled }) => (
-          <button
-            data-testid="custom-send"
-            onClick={onClick}
-            disabled={disabled}
-          >
-            🚀 Send Message
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput sendButton={CustomSendButton} />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("custom-send")).toBeDefined();
-        expect(screen.getByText("🚀 Send Message")).toBeDefined();
-      });
-
-      it("custom sendButton should receive onClick callback", () => {
-        const submitHandler = vi.fn();
-
-        const CustomSendButton: React.FC<any> = ({ onClick }) => (
-          <button data-testid="onclick-send" onClick={onClick}>
-            Send
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              sendButton={CustomSendButton}
-              onSubmitMessage={submitHandler}
-            />
-          </TestWrapper>,
-        );
-
-        fireEvent.click(screen.getByTestId("onclick-send"));
-        // onClick should trigger submission flow
-      });
-    });
-
-    describe("startTranscribeButton custom component", () => {
-      it("should render custom startTranscribeButton component", () => {
-        const CustomStart: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-start-transcribe" onClick={onClick}>
-            🎤 Start Recording
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              onStartTranscribe={() => {}}
-              startTranscribeButton={CustomStart}
-            />
-          </TestWrapper>,
-        );
-
-        const btn = screen.queryByTestId("custom-start-transcribe");
-        if (btn) {
-          expect(btn.textContent).toContain("Start Recording");
-        }
-      });
-    });
-
-    describe("cancelTranscribeButton custom component", () => {
-      it("should render custom cancelTranscribeButton component", () => {
-        const CustomCancel: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-cancel-transcribe" onClick={onClick}>
-            ❌ Cancel
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              mode="transcribe"
-              onCancelTranscribe={() => {}}
-              cancelTranscribeButton={CustomCancel}
-            />
-          </TestWrapper>,
-        );
-
-        const btn = screen.queryByTestId("custom-cancel-transcribe");
-        if (btn) {
-          expect(btn.textContent).toContain("Cancel");
-        }
-      });
-    });
-
-    describe("finishTranscribeButton custom component", () => {
-      it("should render custom finishTranscribeButton component", () => {
-        const CustomFinish: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-finish-transcribe" onClick={onClick}>
-            ✓ Done
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              mode="transcribe"
-              onFinishTranscribe={() => {}}
-              finishTranscribeButton={CustomFinish}
-            />
-          </TestWrapper>,
-        );
-
-        const btn = screen.queryByTestId("custom-finish-transcribe");
-        if (btn) {
-          expect(btn.textContent).toContain("Done");
-        }
-      });
-    });
-
-    describe("addMenuButton custom component", () => {
-      it("should render custom addMenuButton component", () => {
-        const CustomAddMenu: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-add-menu" onClick={onClick}>
-            ➕ Add
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              toolsMenu={[{ label: "Tool", action: () => {} }]}
-              addMenuButton={CustomAddMenu}
-            />
-          </TestWrapper>,
-        );
-
-        const btn = screen.queryByTestId("custom-add-menu");
-        if (btn) {
-          expect(btn.textContent).toContain("Add");
-        }
-      });
-    });
-
-    describe("audioRecorder custom component", () => {
-      it("should render custom audioRecorder component", () => {
-        const CustomRecorder: React.FC<any> = ({ onAudioReady }) => (
-          <div data-testid="custom-recorder">
-            <button onClick={() => onAudioReady?.(new Blob())}>
-              Custom Recorder
-            </button>
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              mode="transcribe"
-              onFinishTranscribeWithAudio={async () => {}}
-              audioRecorder={CustomRecorder}
-            />
-          </TestWrapper>,
-        );
-
-        const recorder = screen.queryByTestId("custom-recorder");
-        if (recorder) {
-          expect(recorder.textContent).toContain("Custom Recorder");
-        }
-      });
-    });
-
-    describe("multiple custom components", () => {
-      it("should render multiple custom components together", () => {
-        const CustomTextArea = React.forwardRef<HTMLTextAreaElement, any>(
-          (props, ref) => (
-            <textarea ref={ref} data-testid="multi-textarea" {...props} />
-          ),
-        );
-
-        const CustomSendButton: React.FC<any> = (props) => (
-          <button data-testid="multi-send" {...props}>
-            Send
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              textArea={CustomTextArea}
-              sendButton={CustomSendButton}
-            />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("multi-textarea")).toBeDefined();
-        expect(screen.getByTestId("multi-send")).toBeDefined();
-      });
-    });
-  });
-
-  // ============================================================================
-  // 4. RECURSIVE DRILL-DOWN TESTS (Input has no sub-slots, but test nested props)
-  // ============================================================================
-  describe("4. Nested Props and Complex Configurations", () => {
-    describe("complex textArea configuration", () => {
-      it("should support complex props configuration", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              textArea={
-                {
-                  className: "complex-textarea",
-                  placeholder: "Complex placeholder",
-                  "data-testid": "complex-ta",
-                  rows: 4,
-                } as any
-              }
-            />
-          </TestWrapper>,
-        );
-
-        const textarea = screen.queryByTestId("complex-ta");
-        if (textarea) {
-          expect(textarea.getAttribute("placeholder")).toBe(
-            "Complex placeholder",
-          );
-        }
-      });
-    });
-
-    describe("complex sendButton configuration", () => {
-      it("should support complex props on sendButton", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatInput
-              sendButton={
-                {
-                  className: "complex-send",
-                  "data-testid": "complex-send-btn",
-                  "aria-label": "Send your message",
-                  title: "Click to send",
-                } as any
-              }
-            />
-          </TestWrapper>,
-        );
-
-        const btn = screen.queryByTestId("complex-send-btn");
-        if (btn) {
-          expect(btn.getAttribute("aria-label")).toBe("Send your message");
-          expect(btn.getAttribute("title")).toBe("Click to send");
-        }
-      });
-    });
-  });
-
-  // ============================================================================
-  // 5. CLASSNAME OVERRIDE TESTS
-  // ============================================================================
-  describe("5. className Override with Tailwind", () => {
-    describe("className prop in object slots", () => {
-      it("should allow className prop in textArea object slot", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput
-              textArea={{ className: "textarea-class-override" }}
-            />
-          </TestWrapper>,
-        );
-
-        expect(
-          container.querySelector(".textarea-class-override"),
-        ).toBeDefined();
-      });
-
-      it("should allow className prop in sendButton object slot", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput
-              sendButton={{ className: "send-class-override" }}
-            />
-          </TestWrapper>,
-        );
-
-        expect(container.querySelector(".send-class-override")).toBeDefined();
-      });
-    });
-
-    describe("string slot vs className prop equivalence", () => {
-      it("string slot should set className on textArea", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput textArea="string-class-textarea" />
-          </TestWrapper>,
-        );
-
-        expect(container.querySelector(".string-class-textarea")).toBeDefined();
-      });
-
-      it("string slot should set className on sendButton", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput sendButton="string-class-send" />
-          </TestWrapper>,
-        );
-
-        expect(container.querySelector(".string-class-send")).toBeDefined();
-      });
-    });
-
-    describe("tailwind utility classes", () => {
-      it("should apply tailwind focus utilities to textArea", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput textArea="focus:ring-2 focus:ring-blue-500 focus:outline-none" />
-          </TestWrapper>,
-        );
-
-        const el = container.querySelector(".focus\\:ring-2");
-        expect(el).toBeDefined();
-      });
-
-      it("should apply tailwind hover utilities to sendButton", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatInput sendButton="hover:bg-blue-600 active:bg-blue-700" />
-          </TestWrapper>,
-        );
-
-        const el = container.querySelector(".hover\\:bg-blue-600");
-        expect(el).toBeDefined();
-      });
-    });
-  });
-
-  // ============================================================================
-  // 6. CHILDREN RENDER FUNCTION TESTS
-  // ============================================================================
-  describe("6. Children Render Function", () => {
-    it("should support children render function for custom layout", () => {
-      render(
-        <TestWrapper>
-          <CopilotChatInput>
-            {({ textArea, sendButton }) => (
-              <div data-testid="custom-input-layout">
-                <div className="input-row">
-                  {textArea}
-                  {sendButton}
-                </div>
-              </div>
-            )}
-          </CopilotChatInput>
-        </TestWrapper>,
-      );
-
-      expect(screen.getByTestId("custom-input-layout")).toBeDefined();
-    });
-
-    it("children render function should receive all slot elements", () => {
-      const receivedKeys: string[] = [];
-
-      render(
-        <TestWrapper>
-          <CopilotChatInput>
-            {(slots) => {
-              receivedKeys.push(...Object.keys(slots));
-              return <div data-testid="slots-check">Rendered</div>;
-            }}
-          </CopilotChatInput>
-        </TestWrapper>,
-      );
-
-      expect(screen.getByTestId("slots-check")).toBeDefined();
-      // Should receive textArea, sendButton, etc.
-    });
-
-    it("children render function allows complete layout control", () => {
-      render(
-        <TestWrapper>
-          <CopilotChatInput toolsMenu={[{ label: "Tool", action: () => {} }]}>
-            {({ textArea, sendButton, addMenuButton }) => (
-              <div data-testid="full-control-layout">
-                <div className="toolbar">{addMenuButton}</div>
-                <div className="main">{textArea}</div>
-                <div className="actions">{sendButton}</div>
-              </div>
-            )}
-          </CopilotChatInput>
-        </TestWrapper>,
-      );
-
-      expect(screen.getByTestId("full-control-layout")).toBeDefined();
-      expect(document.querySelector(".toolbar")).toBeDefined();
-      expect(document.querySelector(".main")).toBeDefined();
-      expect(document.querySelector(".actions")).toBeDefined();
-    });
-  });
-
-  // ============================================================================
-  // 7. POSITIONING PROP TESTS
-  // ============================================================================
-  describe("7. Positioning Prop", () => {
-    it("should render static positioning by default", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatInput data-testid="input-container" />
-        </TestWrapper>,
-      );
-
-      // By default (static), should NOT have absolute positioning classes
-      const inputContainer = container.querySelector(
-        '[data-testid="input-container"]',
-      ) as HTMLElement;
-      expect(inputContainer).not.toBeNull();
-      expect(inputContainer.classList.contains("cpk:absolute")).toBe(false);
-    });
-
-    it("should render absolute positioning when positioning='absolute'", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatInput
-            positioning="absolute"
-            data-testid="absolute-input"
-          />
-        </TestWrapper>,
-      );
-
-      const inputContainer = container.querySelector(
-        '[data-testid="absolute-input"]',
-      ) as HTMLElement;
-      expect(inputContainer).not.toBeNull();
-      expect(inputContainer.classList.contains("cpk:absolute")).toBe(true);
-      expect(inputContainer.classList.contains("cpk:bottom-0")).toBe(true);
-    });
-
-    it("should apply keyboard height transform", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatInput
-            positioning="absolute"
-            keyboardHeight={300}
-            data-testid="keyboard-input"
-          />
-        </TestWrapper>,
-      );
-
-      const inputContainer = container.querySelector(
-        '[data-testid="keyboard-input"]',
-      ) as HTMLElement;
-      expect(inputContainer).not.toBeNull();
-      expect(inputContainer.style.transform).toBe("translateY(-300px)");
-    });
-
-    it("should forward containerRef", () => {
-      let containerRef: HTMLDivElement | null = null;
-      const RefCapture = () => {
-        const ref = React.useRef<HTMLDivElement>(null);
-        React.useEffect(() => {
-          containerRef = ref.current;
-        }, []);
-        return (
-          <TestWrapper>
-            <CopilotChatInput containerRef={ref} />
-          </TestWrapper>
-        );
-      };
-
-      render(<RefCapture />);
-      expect(containerRef).not.toBeNull();
-    });
-  });
-
-  // ============================================================================
-  // 8. DISCLAIMER SLOT TESTS
-  // ============================================================================
-  describe("8. Disclaimer Slot", () => {
-    it("should render disclaimer when showDisclaimer=true", () => {
-      render(
-        <TestWrapper>
-          <CopilotChatInput showDisclaimer={true} />
-        </TestWrapper>,
-      );
-
-      // Look for disclaimer text (from labels)
-      expect(
-        screen.queryByText(/AI-generated responses/i) ||
-          document.querySelector('[class*="text-muted-foreground"]'),
-      ).toBeDefined();
-    });
-
-    it("should hide disclaimer when showDisclaimer=false", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatInput showDisclaimer={false} />
-        </TestWrapper>,
-      );
-
-      // Disclaimer should not be rendered
-      const disclaimer = container.querySelector(
-        '[class*="text-center"][class*="text-xs"]',
-      );
-      expect(disclaimer).toBeNull();
-    });
-
-    it("should show disclaimer by default with absolute positioning", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatInput positioning="absolute" />
-        </TestWrapper>,
-      );
-
-      // Disclaimer should be present with absolute positioning (default showDisclaimer=true)
-      const disclaimer = container.querySelector(
-        '[class*="text-center"][class*="text-xs"]',
-      );
-      expect(disclaimer).not.toBeNull();
-    });
-
-    it("should hide disclaimer by default with static positioning", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatInput positioning="static" />
-        </TestWrapper>,
-      );
-
-      // Disclaimer should NOT be present with static positioning (default showDisclaimer=false)
-      const disclaimer = container.querySelector(
-        '[class*="text-center"][class*="text-xs"]',
-      );
-      expect(disclaimer).toBeNull();
-    });
-
-    it("should apply tailwind class to disclaimer", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatInput
-            showDisclaimer={true}
-            disclaimer="text-red-500 italic"
-          />
-        </TestWrapper>,
-      );
-
-      const disclaimer = container.querySelector(".text-red-500");
-      if (disclaimer) {
-        expect(disclaimer.classList.contains("italic")).toBe(true);
-      }
-    });
-
-    it("should render custom disclaimer component", () => {
-      const CustomDisclaimer: React.FC<any> = () => (
-        <div data-testid="custom-disclaimer">Custom Disclaimer Content</div>
-      );
-
-      render(
-        <TestWrapper>
-          <CopilotChatInput
-            showDisclaimer={true}
-            disclaimer={CustomDisclaimer}
-          />
-        </TestWrapper>,
-      );
-
-      const disclaimer = screen.queryByTestId("custom-disclaimer");
-      if (disclaimer) {
-        expect(disclaimer.textContent).toContain("Custom Disclaimer");
-      }
-    });
-  });
-});