@copilotkit/vue 1.57.1

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

@@ -0,0 +1,1139 @@
+import { render, screen, fireEvent } from "@testing-library/vue";
+import { defineComponent, ref } from "vue";
+import { describe, it, expect, vi } from "vitest";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import type { ToolsMenuItem } from "../types";
+import CopilotChatInput from "../CopilotChatInput.vue";
+
+const TestWrapper = defineComponent({
+  components: {
+    CopilotKitProvider,
+    CopilotChatConfigurationProvider,
+  },
+  template: `
+    <CopilotKitProvider>
+      <CopilotChatConfigurationProvider thread-id="test-thread">
+        <div style="height: 200px;">
+          <slot />
+        </div>
+      </CopilotChatConfigurationProvider>
+    </CopilotKitProvider>
+  `,
+});
+
+function renderInWrapper(component: ReturnType<typeof defineComponent>) {
+  const Wrapped = defineComponent({
+    components: { TestWrapper, UnderTest: component },
+    template: `
+      <TestWrapper>
+        <UnderTest />
+      </TestWrapper>
+    `,
+  });
+
+  return render(Wrapped);
+}
+
+describe("CopilotChatInput Slot System E2E Tests", () => {
+  describe("1. Tailwind Class Slot Override", () => {
+    describe("textArea slot", () => {
+      it("should apply tailwind class string to textArea", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="custom-text-area"
+                  class="border-2 border-blue-500 rounded-lg p-4"
+                  :value="value"
+                  @input="onInput"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("custom-text-area")
+            .classList.contains("border-blue-500"),
+        ).toBe(true);
+      });
+
+      it("should override default textArea className", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="override-text-area"
+                  class="custom-textarea-class"
+                  :value="value"
+                  @input="onInput"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(document.querySelector(".custom-textarea-class")).toBeDefined();
+      });
+    });
+
+    describe("sendButton slot", () => {
+      it("should apply tailwind class string to sendButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput model-value="hello" @submit-message="() => {}">
+              <template #send-button="{ onClick }">
+                <button data-testid="custom-send-btn" class="bg-green-500 hover:bg-green-600 rounded-full" @click="onClick">
+                  Send
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("custom-send-btn")
+            .classList.contains("bg-green-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("startTranscribeButton slot", () => {
+      it("should apply tailwind class string to startTranscribeButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput @start-transcribe="() => {}">
+              <template #start-transcribe-button="{ onClick }">
+                <button data-testid="custom-start-transcribe" class="bg-red-500 rounded" @click="onClick">
+                  Start
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("custom-start-transcribe")
+            .classList.contains("bg-red-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("cancelTranscribeButton slot", () => {
+      it("should apply tailwind class string to cancelTranscribeButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput mode="transcribe" @cancel-transcribe="() => {}">
+              <template #cancel-transcribe-button="{ onClick }">
+                <button data-testid="custom-cancel-transcribe" class="bg-gray-500" @click="onClick">
+                  Cancel
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("custom-cancel-transcribe")
+            .classList.contains("bg-gray-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("finishTranscribeButton slot", () => {
+      it("should apply tailwind class string to finishTranscribeButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput mode="transcribe" @finish-transcribe="() => {}">
+              <template #finish-transcribe-button="{ onClick }">
+                <button data-testid="custom-finish-transcribe" class="bg-purple-500" @click="onClick">
+                  Finish
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("custom-finish-transcribe")
+            .classList.contains("bg-purple-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("addMenuButton slot", () => {
+      it("should apply tailwind class string to addMenuButton", () => {
+        const toolsMenu: (ToolsMenuItem | "-")[] = [
+          { label: "Test", action: vi.fn() },
+        ];
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          setup() {
+            return { toolsMenu };
+          },
+          template: `
+            <CopilotChatInput :tools-menu="toolsMenu">
+              <template #add-menu-button="{ toggleMenu }">
+                <button data-testid="custom-add-button" class="bg-yellow-500" @click="toggleMenu">
+                  Add
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("custom-add-button")
+            .classList.contains("bg-yellow-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("audioRecorder slot", () => {
+      it("should apply tailwind class string to audioRecorder", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput mode="transcribe">
+              <template #audio-recorder>
+                <div data-testid="custom-audio-recorder" class="border-dashed border-2">
+                  Recorder
+                </div>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("custom-audio-recorder")
+            .classList.contains("border-dashed"),
+        ).toBe(true);
+      });
+    });
+  });
+
+  describe("2. Properties Slot Override", () => {
+    describe("textArea props", () => {
+      it("should pass placeholder prop to textArea", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="props-text-area"
+                  placeholder="Custom placeholder..."
+                  :value="value"
+                  @input="onInput"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByPlaceholderText("Custom placeholder..."),
+        ).toBeDefined();
+      });
+
+      it("should pass disabled prop to textArea", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="disabled-textarea"
+                  :value="value"
+                  disabled
+                  @input="onInput"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("disabled-textarea").hasAttribute("disabled"),
+        ).toBe(true);
+      });
+
+      it("should pass onKeyDown prop to textArea", async () => {
+        const onKeyDown = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          setup() {
+            return { onKeyDown };
+          },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="keydown-textarea"
+                  :value="value"
+                  @input="onInput"
+                  @keydown="
+                    onKeyDown();
+                    onKeydown($event);
+                  "
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.keyDown(screen.getByTestId("keydown-textarea"), {
+          key: "a",
+        });
+        expect(onKeyDown).toHaveBeenCalled();
+      });
+
+      it("should pass autoFocus prop to textArea", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="autofocus-textarea"
+                  :value="value"
+                  autofocus
+                  @input="onInput"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("autofocus-textarea").hasAttribute("autofocus"),
+        ).toBe(true);
+      });
+    });
+
+    describe("sendButton props", () => {
+      it("should pass onClick handler to sendButton", async () => {
+        const handleClick = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          setup() {
+            return { handleClick };
+          },
+          template: `
+            <CopilotChatInput model-value="message" @submit-message="() => {}">
+              <template #send-button="{ onClick }">
+                <button
+                  data-testid="send-btn"
+                  @click="
+                    handleClick();
+                    onClick();
+                  "
+                >
+                  Send
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("send-btn"));
+        expect(handleClick).toHaveBeenCalled();
+      });
+
+      it("should pass disabled prop to sendButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput model-value="message" @submit-message="() => {}">
+              <template #send-button="{ onClick }">
+                <button data-testid="disabled-send" disabled @click="onClick">Send</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("disabled-send").hasAttribute("disabled"),
+        ).toBe(true);
+      });
+
+      it("should pass aria-label prop to sendButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput model-value="message" @submit-message="() => {}">
+              <template #send-button="{ onClick }">
+                <button data-testid="aria-send" aria-label="Submit message" @click="onClick">Send</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          document.querySelector("[aria-label='Submit message']"),
+        ).toBeDefined();
+      });
+    });
+
+    describe("addMenuButton props", () => {
+      it("should pass onClick handler to addMenuButton", async () => {
+        const handleClick = vi.fn();
+        const toolsMenu: (ToolsMenuItem | "-")[] = [
+          { label: "Item", action: () => {} },
+        ];
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          setup() {
+            return { handleClick, toolsMenu };
+          },
+          template: `
+            <CopilotChatInput :tools-menu="toolsMenu">
+              <template #add-menu-button="{ toggleMenu }">
+                <button
+                  data-testid="add-menu"
+                  @click="
+                    handleClick();
+                    toggleMenu();
+                  "
+                >
+                  Add
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("add-menu"));
+        expect(handleClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("user props override pre-set props", () => {
+      it("user disabled should override default disabled state", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput disabled model-value="message" @submit-message="() => {}">
+              <template #send-button="{ onClick }">
+                <button data-testid="override-send" @click="onClick">Send</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("override-send").hasAttribute("disabled"),
+        ).toBe(false);
+      });
+    });
+  });
+
+  describe("3. Custom Component Slot Override", () => {
+    describe("textArea custom component", () => {
+      it("should render custom textArea component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="custom-textarea"
+                  class="custom-input"
+                  :value="value"
+                  @input="onInput"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-textarea")).toBeDefined();
+      });
+
+      it("custom textArea should receive value and onChange props", async () => {
+        const onUpdateValue = vi.fn();
+
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          setup() {
+            return {
+              onUpdateValue,
+            };
+          },
+          template: `
+            <CopilotChatInput model-value="test value" @update:model-value="onUpdateValue">
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="value-check-textarea"
+                  :value="value"
+                  @input="onInput($event)"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        const textArea = screen.getByTestId(
+          "value-check-textarea",
+        ) as HTMLTextAreaElement;
+        expect(textArea.value).toBe("test value");
+        await fireEvent.update(textArea, "next value");
+        expect(onUpdateValue).toHaveBeenCalled();
+      });
+    });
+
+    describe("sendButton custom component", () => {
+      it("should render custom sendButton component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput model-value="hello" @submit-message="() => {}">
+              <template #send-button="{ onClick, disabled }">
+                <button data-testid="custom-send" :disabled="disabled" @click="onClick">🚀 Send Message</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-send")).toBeDefined();
+        expect(screen.getByText("🚀 Send Message")).toBeDefined();
+      });
+
+      it("custom sendButton should receive onClick callback", async () => {
+        const submitHandler = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          setup() {
+            return { submitHandler };
+          },
+          template: `
+            <CopilotChatInput model-value="hello" @submit-message="submitHandler">
+              <template #send-button="{ onClick }">
+                <button data-testid="onclick-send" @click="onClick">Send</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("onclick-send"));
+        expect(submitHandler).toHaveBeenCalled();
+      });
+    });
+
+    describe("startTranscribeButton custom component", () => {
+      it("should render custom startTranscribeButton component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput @start-transcribe="() => {}">
+              <template #start-transcribe-button="{ onClick }">
+                <button data-testid="custom-start-transcribe" @click="onClick">🎤 Start Recording</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("custom-start-transcribe").textContent,
+        ).toContain("Start Recording");
+      });
+    });
+
+    describe("cancelTranscribeButton custom component", () => {
+      it("should render custom cancelTranscribeButton component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput mode="transcribe" @cancel-transcribe="() => {}">
+              <template #cancel-transcribe-button="{ onClick }">
+                <button data-testid="custom-cancel-transcribe" @click="onClick">❌ Cancel</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("custom-cancel-transcribe").textContent,
+        ).toContain("Cancel");
+      });
+    });
+
+    describe("finishTranscribeButton custom component", () => {
+      it("should render custom finishTranscribeButton component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput mode="transcribe" @finish-transcribe="() => {}">
+              <template #finish-transcribe-button="{ onClick }">
+                <button data-testid="custom-finish-transcribe" @click="onClick">✓ Done</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("custom-finish-transcribe").textContent,
+        ).toContain("Done");
+      });
+    });
+
+    describe("addMenuButton custom component", () => {
+      it("should render custom addMenuButton component", () => {
+        const toolsMenu: (ToolsMenuItem | "-")[] = [
+          { label: "Tool", action: () => {} },
+        ];
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          setup() {
+            return { toolsMenu };
+          },
+          template: `
+            <CopilotChatInput :tools-menu="toolsMenu">
+              <template #add-menu-button="{ toggleMenu }">
+                <button data-testid="custom-add-menu" @click="toggleMenu">➕ Add</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-add-menu").textContent).toContain(
+          "Add",
+        );
+      });
+    });
+
+    describe("audioRecorder custom component", () => {
+      it("should render custom audioRecorder component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput mode="transcribe">
+              <template #audio-recorder>
+                <div data-testid="custom-recorder">
+                  <button>Custom Recorder</button>
+                </div>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-recorder").textContent).toContain(
+          "Custom Recorder",
+        );
+      });
+    });
+
+    describe("multiple custom components", () => {
+      it("should render multiple custom components together", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput model-value="hello" @submit-message="() => {}">
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea data-testid="multi-textarea" :value="value" @input="onInput" @keydown="onKeydown" />
+              </template>
+              <template #send-button="{ onClick }">
+                <button data-testid="multi-send" @click="onClick">Send</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(screen.getByTestId("multi-textarea")).toBeDefined();
+        expect(screen.getByTestId("multi-send")).toBeDefined();
+      });
+    });
+  });
+
+  describe("4. Nested Props and Complex Configurations", () => {
+    describe("complex textArea configuration", () => {
+      it("should support complex props configuration", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="complex-ta"
+                  class="complex-textarea"
+                  placeholder="Complex placeholder"
+                  rows="4"
+                  :value="value"
+                  @input="onInput"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        const textarea = screen.getByTestId("complex-ta");
+        expect(textarea.getAttribute("placeholder")).toBe(
+          "Complex placeholder",
+        );
+      });
+    });
+
+    describe("complex sendButton configuration", () => {
+      it("should support complex props on sendButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput model-value="message" @submit-message="() => {}">
+              <template #send-button="{ onClick }">
+                <button
+                  data-testid="complex-send-btn"
+                  class="complex-send"
+                  aria-label="Send your message"
+                  title="Click to send"
+                  @click="onClick"
+                >
+                  Send
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        renderInWrapper(Host);
+        const send = screen.getByTestId("complex-send-btn");
+        expect(send.getAttribute("aria-label")).toBe("Send your message");
+        expect(send.getAttribute("title")).toBe("Click to send");
+      });
+    });
+  });
+
+  describe("5. className Override with Tailwind", () => {
+    describe("className prop in object slots", () => {
+      it("should allow className prop in textArea object slot", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="class-slot-textarea"
+                  class="textarea-class-override"
+                  :value="value"
+                  @input="onInput"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        const { container } = renderInWrapper(Host);
+        expect(
+          container.querySelector(".textarea-class-override"),
+        ).toBeDefined();
+      });
+
+      it("should allow className prop in sendButton object slot", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput model-value="hello" @submit-message="() => {}">
+              <template #send-button="{ onClick }">
+                <button data-testid="class-slot-send" class="send-class-override" @click="onClick">
+                  Send
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".send-class-override")).toBeDefined();
+      });
+    });
+
+    describe("string slot vs className prop equivalence", () => {
+      it("string slot should set className on textArea", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea data-testid="string-textarea" class="string-class-textarea" :value="value" @input="onInput" @keydown="onKeydown" />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".string-class-textarea")).toBeDefined();
+      });
+
+      it("string slot should set className on sendButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput model-value="hello" @submit-message="() => {}">
+              <template #send-button="{ onClick }">
+                <button data-testid="string-send" class="string-class-send" @click="onClick">Send</button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".string-class-send")).toBeDefined();
+      });
+    });
+
+    describe("tailwind utility classes", () => {
+      it("should apply tailwind focus utilities to textArea", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput>
+              <template #text-area="{ value, onInput, onKeydown }">
+                <textarea
+                  data-testid="focus-textarea"
+                  class="focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  :value="value"
+                  @input="onInput"
+                  @keydown="onKeydown"
+                />
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".focus\\:ring-2")).toBeDefined();
+      });
+
+      it("should apply tailwind hover utilities to sendButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatInput },
+          template: `
+            <CopilotChatInput model-value="hello" @submit-message="() => {}">
+              <template #send-button="{ onClick }">
+                <button data-testid="hover-send" class="hover:bg-blue-600 active:bg-blue-700" @click="onClick">
+                  Send
+                </button>
+              </template>
+            </CopilotChatInput>
+          `,
+        });
+
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".hover\\:bg-blue-600")).toBeDefined();
+      });
+    });
+  });
+
+  describe("6. Children Render Function", () => {
+    it("should support children render function for custom layout", () => {
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        methods: {
+          readValue(event: Event) {
+            return (event.target as HTMLTextAreaElement).value;
+          },
+        },
+        template: `
+          <CopilotChatInput>
+            <template #layout="{ value, onUpdateValue, onSendClick }">
+              <div data-testid="custom-input-layout">
+                <div class="input-row">
+                  <textarea data-testid="layout-textarea" :value="value" @input="onUpdateValue(readValue($event))" />
+                  <button data-testid="layout-send" @click="onSendClick">Send</button>
+                </div>
+              </div>
+            </template>
+          </CopilotChatInput>
+        `,
+      });
+
+      renderInWrapper(Host);
+      expect(screen.getByTestId("custom-input-layout")).toBeDefined();
+    });
+
+    it("children render function should receive all slot elements", () => {
+      const receivedFunctions = ref<string[]>([]);
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        setup() {
+          return { receivedFunctions };
+        },
+        template: `
+          <CopilotChatInput>
+            <template #layout="{ onUpdateValue, onSubmit, onKeydown, onSendClick, onToggleMenu }">
+              <div data-testid="slots-check">
+                {{
+                  receivedFunctions = [
+                    typeof onUpdateValue,
+                    typeof onSubmit,
+                    typeof onKeydown,
+                    typeof onSendClick,
+                    typeof onToggleMenu,
+                  ]
+                }}
+                Rendered
+              </div>
+            </template>
+          </CopilotChatInput>
+        `,
+      });
+
+      renderInWrapper(Host);
+      expect(screen.getByTestId("slots-check")).toBeDefined();
+      expect(
+        receivedFunctions.value.every((value) => value === "function"),
+      ).toBe(true);
+    });
+
+    it("children render function allows complete layout control", () => {
+      const toolsMenu: (ToolsMenuItem | "-")[] = [
+        { label: "Tool", action: () => {} },
+      ];
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        setup() {
+          return { toolsMenu };
+        },
+        methods: {
+          readValue(event: Event) {
+            return (event.target as HTMLTextAreaElement).value;
+          },
+        },
+        template: `
+          <CopilotChatInput :tools-menu="toolsMenu" model-value="hello" @submit-message="() => {}">
+            <template #layout="{ value, onUpdateValue, onSendClick, onToggleMenu }">
+              <div data-testid="full-control-layout">
+                <div class="toolbar">
+                  <button data-testid="layout-add" @click="onToggleMenu">Add</button>
+                </div>
+                <div class="main">
+                  <textarea :value="value" @input="onUpdateValue(readValue($event))" />
+                </div>
+                <div class="actions">
+                  <button data-testid="layout-send-custom" @click="onSendClick">Send</button>
+                </div>
+              </div>
+            </template>
+          </CopilotChatInput>
+        `,
+      });
+
+      renderInWrapper(Host);
+      expect(screen.getByTestId("full-control-layout")).toBeDefined();
+      expect(document.querySelector(".toolbar")).toBeDefined();
+      expect(document.querySelector(".main")).toBeDefined();
+      expect(document.querySelector(".actions")).toBeDefined();
+    });
+  });
+
+  describe("7. Positioning Prop", () => {
+    it("should render static positioning by default", () => {
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput data-testid="input-container" />
+        `,
+      });
+      const { container } = renderInWrapper(Host);
+
+      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 Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput positioning="absolute" data-testid="absolute-input" />
+        `,
+      });
+      const { container } = renderInWrapper(Host);
+
+      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 Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput positioning="absolute" :keyboard-height="300" data-testid="keyboard-input" />
+        `,
+      });
+      const { container } = renderInWrapper(Host);
+
+      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", () => {
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput data-testid="forwarded-input" data-extra="x" />
+        `,
+      });
+
+      renderInWrapper(Host);
+      const input = screen.getByTestId("forwarded-input");
+      expect(input.getAttribute("data-extra")).toBe("x");
+    });
+  });
+
+  describe("8. Disclaimer Slot", () => {
+    it("should render disclaimer when showDisclaimer=true", () => {
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput :show-disclaimer="true" />
+        `,
+      });
+
+      renderInWrapper(Host);
+      expect(screen.getByTestId("copilot-chat-input-disclaimer")).toBeDefined();
+    });
+
+    it("should hide disclaimer when showDisclaimer=false", () => {
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput :show-disclaimer="false" />
+        `,
+      });
+      const { container } = renderInWrapper(Host);
+
+      const disclaimer = container.querySelector(
+        "[data-testid='copilot-chat-input-disclaimer']",
+      );
+      expect(disclaimer).toBeNull();
+    });
+
+    it("should show disclaimer by default with absolute positioning", () => {
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput positioning="absolute" />
+        `,
+      });
+      const { container } = renderInWrapper(Host);
+
+      const disclaimer = container.querySelector(
+        "[data-testid='copilot-chat-input-disclaimer']",
+      );
+      expect(disclaimer).not.toBeNull();
+    });
+
+    it("should hide disclaimer by default with static positioning", () => {
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput positioning="static" />
+        `,
+      });
+      const { container } = renderInWrapper(Host);
+
+      const disclaimer = container.querySelector(
+        "[data-testid='copilot-chat-input-disclaimer']",
+      );
+      expect(disclaimer).toBeNull();
+    });
+
+    it("should apply tailwind class to disclaimer", () => {
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput :show-disclaimer="true">
+            <template #disclaimer>
+              <p data-testid="custom-disclaimer-class" class="text-red-500 italic">Disclaimer</p>
+            </template>
+          </CopilotChatInput>
+        `,
+      });
+
+      renderInWrapper(Host);
+      const disclaimer = screen.getByTestId("custom-disclaimer-class");
+      expect(disclaimer.classList.contains("text-red-500")).toBe(true);
+      expect(disclaimer.classList.contains("italic")).toBe(true);
+    });
+
+    it("should render custom disclaimer component", () => {
+      const Host = defineComponent({
+        components: { CopilotChatInput },
+        template: `
+          <CopilotChatInput :show-disclaimer="true">
+            <template #disclaimer>
+              <div data-testid="custom-disclaimer">Custom Disclaimer Content</div>
+            </template>
+          </CopilotChatInput>
+        `,
+      });
+
+      renderInWrapper(Host);
+      expect(screen.getByTestId("custom-disclaimer").textContent).toContain(
+        "Custom Disclaimer",
+      );
+    });
+  });
+});