@copilotkit/react-core 1.54.1-next.6 → 1.55.0-next.7

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

@@ -0,0 +1,929 @@
+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");
+      }
+    });
+  });
+});