@copilotkit/vue 1.57.1

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

@@ -0,0 +1,1145 @@
+import { render, screen, fireEvent } from "@testing-library/vue";
+import { defineComponent } from "vue";
+import { describe, it, expect, vi } from "vitest";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatView from "../CopilotChatView.vue";
+import CopilotChatMessageView from "../CopilotChatMessageView.vue";
+import CopilotChatInput from "../CopilotChatInput.vue";
+import CopilotChatSuggestionView from "../CopilotChatSuggestionView.vue";
+import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
+import CopilotChatUserMessage from "../CopilotChatUserMessage.vue";
+
+const sampleMessages = [
+  { id: "1", role: "user" as const, content: "Hello" },
+  { id: "2", role: "assistant" as const, content: "Hi there!" },
+];
+
+const sampleSuggestions = [
+  { title: "Test", message: "Test message", isLoading: false },
+  { title: "Another", message: "Another message", isLoading: false },
+];
+
+function renderInWrapper(component: ReturnType<typeof defineComponent>) {
+  const Host = defineComponent({
+    components: {
+      CopilotKitProvider,
+      CopilotChatConfigurationProvider,
+      UnderTest: component,
+    },
+    template: `
+      <CopilotKitProvider>
+        <CopilotChatConfigurationProvider thread-id="test-thread">
+          <div style="height: 400px;">
+            <UnderTest />
+          </div>
+        </CopilotChatConfigurationProvider>
+      </CopilotKitProvider>
+    `,
+  });
+
+  return render(Host);
+}
+
+describe("CopilotChatView Slot System E2E Tests", () => {
+  describe("1. Tailwind Class Slot Override", () => {
+    describe("messageView slot", () => {
+      it("should apply tailwind class string to messageView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view="{ messages }">
+                <div data-testid="message-view" class="bg-red-500 text-white p-4">{{ messages.length }}</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        const messageView = screen.getByTestId("message-view");
+        expect(messageView.classList.contains("bg-red-500")).toBe(true);
+        expect(messageView.classList.contains("text-white")).toBe(true);
+        expect(messageView.classList.contains("p-4")).toBe(true);
+      });
+
+      it("should override default className with tailwind string", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view>
+                <div class="custom-override-class">override</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".custom-override-class")).toBeDefined();
+      });
+    });
+
+    describe("scrollView slot", () => {
+      it("should apply tailwind class string to scrollView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #scroll-view="{ messages }">
+                <div data-testid="scroll-view" class="overflow-y-auto bg-gray-100">{{ messages.length }}</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        const scrollView = screen.getByTestId("scroll-view");
+        expect(scrollView.classList.contains("overflow-y-auto")).toBe(true);
+        expect(scrollView.classList.contains("bg-gray-100")).toBe(true);
+      });
+    });
+
+    describe("scrollToBottomButton slot (nested under scrollView)", () => {
+      it("should apply tailwind class string to scrollToBottomButton via scrollView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #scroll-to-bottom-button="{ onClick }">
+                <button data-testid="scroll-bottom-btn" class="bg-blue-500 rounded-full" @click="onClick">down</button>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        const button = screen.queryByTestId("scroll-bottom-btn");
+        if (button) {
+          expect(button.classList.contains("rounded-full")).toBe(true);
+        }
+      });
+    });
+
+    describe("input slot", () => {
+      it("should apply tailwind class string to input", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput
+                  data-testid="input-slot"
+                  class="border-2 border-purple-500"
+                  :model-value="modelValue"
+                  @update:model-value="onUpdateModelValue"
+                  @submit-message="onSubmitMessage"
+                />
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("input-slot")
+            .classList.contains("border-purple-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("feather slot (via scrollView)", () => {
+      it("should apply tailwind class string to feather via scrollView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #feather>
+                <div data-testid="feather-slot" class="text-green-500 font-bold">feather</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        const feather = screen.getByTestId("feather-slot");
+        expect(feather.classList.contains("text-green-500")).toBe(true);
+        expect(feather.classList.contains("font-bold")).toBe(true);
+      });
+    });
+
+    describe("suggestionView slot", () => {
+      it("should apply tailwind class string to suggestionView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatSuggestionView },
+          setup() {
+            return { sampleMessages, sampleSuggestions };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" :suggestions="sampleSuggestions">
+              <template #suggestion-view="{ suggestions, loadingIndexes, onSelectSuggestion }">
+                <CopilotChatSuggestionView
+                  data-testid="suggestion-view"
+                  class="flex gap-2 bg-indigo-50"
+                  :suggestions="suggestions"
+                  :loading-indexes="loadingIndexes"
+                  @select-suggestion="(s, i) => onSelectSuggestion(s, i)"
+                />
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("suggestion-view")
+            .classList.contains("bg-indigo-50"),
+        ).toBe(true);
+      });
+    });
+
+    describe("className vs tailwind string precedence", () => {
+      it("tailwind string should completely replace className (not merge)", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput class="only-this-class" :model-value="modelValue" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage" />
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".only-this-class")).toBeDefined();
+      });
+    });
+
+    describe("non-tailwind inline styles should still work", () => {
+      it("should accept style prop alongside className override", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <div data-testid="custom-input" style="background-color: rgb(255, 0, 0);">
+                  <CopilotChatInput :model-value="modelValue" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage" />
+                </div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        const customInput = screen.getByTestId("custom-input");
+        expect(customInput.style.backgroundColor).toBe("rgb(255, 0, 0)");
+      });
+    });
+  });
+
+  describe("2. Properties Slot Override", () => {
+    describe("scrollToBottomButton props (nested under scrollView)", () => {
+      it("should pass onClick handler to scrollToBottomButton via scrollView", async () => {
+        const handleClick = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages, handleClick };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #scroll-to-bottom-button="{ onClick }">
+                <button data-testid="scroll-button" @click="handleClick(); onClick()">scroll</button>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        const btn = screen.queryByTestId("scroll-button");
+        if (btn) {
+          await fireEvent.click(btn);
+          expect(handleClick).toHaveBeenCalled();
+        }
+      });
+
+      it("should pass disabled prop to scrollToBottomButton via scrollView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #scroll-to-bottom-button>
+                <button data-testid="scroll-button-disabled" disabled>scroll</button>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        const btn = screen.queryByTestId("scroll-button-disabled");
+        if (btn) {
+          expect(btn.hasAttribute("disabled")).toBe(true);
+        }
+      });
+    });
+
+    describe("input props", () => {
+      it("should pass onFocus handler to input", async () => {
+        const handleFocus = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { sampleMessages, handleFocus };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput :model-value="modelValue" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage">
+                  <template #text-area="{ value, onInput, onKeydown }">
+                    <textarea data-testid="focus-input" :value="value" @focus="handleFocus" @input="onInput" @keydown="onKeydown" />
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        await fireEvent.focus(screen.getByTestId("focus-input"));
+        expect(handleFocus).toHaveBeenCalled();
+      });
+
+      it("should pass autoFocus prop to input", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput :model-value="modelValue" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage">
+                  <template #text-area="{ value, onInput, onKeydown }">
+                    <textarea data-testid="autofocus-input" autofocus :value="value" @input="onInput" @keydown="onKeydown" />
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("autofocus-input").hasAttribute("autofocus"),
+        ).toBe(true);
+      });
+    });
+
+    describe("messageView props", () => {
+      it("should pass isRunning prop to messageView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" :is-running="true">
+              <template #message-view="{ isRunning }">
+                <div data-testid="running-state">{{ isRunning ? "running" : "idle" }}</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("running-state").textContent).toBe("running");
+      });
+    });
+  });
+
+  describe("3. Custom Component Slot Override", () => {
+    describe("messageView custom component", () => {
+      it("should render custom messageView component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view>
+                <div data-testid="custom-message-view">Custom message view component</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-message-view")).toBeDefined();
+      });
+
+      it("custom messageView should receive all props including messages", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view="{ messages }">
+                <div data-testid="custom-message-count">{{ messages.length }}</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-message-count").textContent).toBe(
+          "2",
+        );
+      });
+    });
+
+    describe("input custom component", () => {
+      it("should render custom input component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #input>
+                <div data-testid="custom-input-component">Custom input</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-input-component")).toBeDefined();
+      });
+
+      it("custom input should receive onSubmitMessage callback", async () => {
+        const onSubmitMessage = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages, onSubmitMessage };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" @submit-message="onSubmitMessage">
+              <template #input="{ onSubmitMessage }">
+                <button data-testid="custom-input-submit" @click="onSubmitMessage('hello')">Submit</button>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("custom-input-submit"));
+        expect(onSubmitMessage).toHaveBeenCalledWith("hello");
+      });
+    });
+
+    describe("scrollView custom component", () => {
+      it("should render custom scrollView component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #scroll-view>
+                <div data-testid="custom-scroll-view-component">Scroll view</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("custom-scroll-view-component"),
+        ).toBeDefined();
+      });
+    });
+
+    describe("suggestionView custom component", () => {
+      it("should render custom suggestionView component", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages, sampleSuggestions };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" :suggestions="sampleSuggestions">
+              <template #suggestion-view>
+                <div data-testid="custom-suggestion-component">Suggestion view</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-suggestion-component")).toBeDefined();
+      });
+    });
+
+    describe("feather custom component (via scrollView)", () => {
+      it("should render custom feather component via scrollView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #feather>
+                <div data-testid="custom-feather-component">Feather</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-feather-component")).toBeDefined();
+      });
+    });
+
+    describe("scrollToBottomButton custom component (nested under scrollView)", () => {
+      it("should render custom scrollToBottomButton component via scrollView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #scroll-to-bottom-button>
+                <button data-testid="custom-scroll-bottom-component">Down</button>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        const button = screen.queryByTestId("custom-scroll-bottom-component");
+        if (button) {
+          expect(button.textContent).toBe("Down");
+        }
+      });
+    });
+  });
+
+  describe("4. Recursive Subcomponent Drill-Down", () => {
+    describe("messageView -> assistantMessage drill-down", () => {
+      it("should allow customizing assistantMessage within messageView", () => {
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #assistant-message="{ message, messages, isRunning }">
+                    <CopilotChatAssistantMessage :message="message" :messages="messages" :is-running="isRunning">
+                      <template #message-renderer="{ content }">
+                        <div data-testid="assistant-custom">{{ content }}</div>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("assistant-custom")).toBeDefined();
+      });
+    });
+
+    describe("messageView -> userMessage drill-down", () => {
+      it("should allow customizing userMessage within messageView", () => {
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatUserMessage,
+          },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #user-message="{ message }">
+                    <CopilotChatUserMessage :message="message">
+                      <template #message-renderer="{ content }">
+                        <div data-testid="user-custom">{{ content }}</div>
+                      </template>
+                    </CopilotChatUserMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("user-custom")).toBeDefined();
+      });
+    });
+
+    describe("messageView -> cursor drill-down", () => {
+      it("should allow customizing cursor within messageView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatMessageView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" :is-running="true">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #cursor>
+                    <div data-testid="custom-cursor">cursor</div>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-cursor")).toBeDefined();
+      });
+    });
+
+    describe("input -> textArea drill-down", () => {
+      it("should allow customizing textArea within input", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput :model-value="modelValue" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage">
+                  <template #text-area="{ value, onInput, onKeydown }">
+                    <textarea data-testid="custom-text-area-drill" :value="value" @input="onInput" @keydown="onKeydown" />
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-text-area-drill")).toBeDefined();
+      });
+    });
+
+    describe("input -> sendButton drill-down", () => {
+      it("should allow customizing sendButton within input", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput :model-value="modelValue" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage">
+                  <template #send-button="{ onClick }">
+                    <button data-testid="custom-send-drill" @click="onClick">Send</button>
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-send-drill")).toBeDefined();
+      });
+    });
+
+    describe("input -> addMenuButton drill-down", () => {
+      it("should allow customizing addMenuButton within input", () => {
+        const toolsMenu = [{ label: "Tool", action: vi.fn() }];
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { sampleMessages, toolsMenu };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" :input-tools-menu="toolsMenu">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage, inputToolsMenu }">
+                <CopilotChatInput :model-value="modelValue" :tools-menu="inputToolsMenu" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage">
+                  <template #add-menu-button="{ toggleMenu }">
+                    <button data-testid="custom-add-drill" @click="toggleMenu">Add</button>
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-add-drill")).toBeDefined();
+      });
+    });
+
+    describe("suggestionView -> suggestion drill-down", () => {
+      it("should allow customizing suggestion pill within suggestionView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatSuggestionView },
+          setup() {
+            return { sampleMessages, sampleSuggestions };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" :suggestions="sampleSuggestions">
+              <template #suggestion-view="{ suggestions, loadingIndexes }">
+                <CopilotChatSuggestionView :suggestions="suggestions" :loading-indexes="loadingIndexes">
+                  <template #suggestion="{ suggestion, index }">
+                    <button :data-testid="'custom-pill-' + index">{{ suggestion.title }}</button>
+                  </template>
+                </CopilotChatSuggestionView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-pill-0")).toBeDefined();
+      });
+    });
+
+    describe("suggestionView -> container drill-down", () => {
+      it("should allow customizing container within suggestionView", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatSuggestionView },
+          setup() {
+            return { sampleMessages, sampleSuggestions };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" :suggestions="sampleSuggestions">
+              <template #suggestion-view="{ suggestions, loadingIndexes, onSelectSuggestion }">
+                <CopilotChatSuggestionView :suggestions="suggestions" :loading-indexes="loadingIndexes" @select-suggestion="(s, i) => onSelectSuggestion(s, i)">
+                  <template #container="{ suggestions }">
+                    <div data-testid="custom-suggestion-container">{{ suggestions.length }}</div>
+                  </template>
+                </CopilotChatSuggestionView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("custom-suggestion-container")).toBeDefined();
+      });
+    });
+
+    describe("multiple nested overrides simultaneously", () => {
+      it("should allow overriding multiple nested slots at once", () => {
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+            CopilotChatInput,
+            CopilotChatSuggestionView,
+          },
+          setup() {
+            return { sampleMessages, sampleSuggestions };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" :suggestions="sampleSuggestions">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #assistant-message="{ message, messages, isRunning }">
+                    <CopilotChatAssistantMessage :message="message" :messages="messages" :is-running="isRunning">
+                      <template #message-renderer><div data-testid="multi-assistant">assistant</div></template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput :model-value="modelValue" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage">
+                  <template #send-button><button data-testid="multi-send">send</button></template>
+                </CopilotChatInput>
+              </template>
+              <template #suggestion-view="{ suggestions, loadingIndexes }">
+                <CopilotChatSuggestionView :suggestions="suggestions" :loading-indexes="loadingIndexes">
+                  <template #suggestion="{ index }"><button :data-testid="'multi-pill-' + index">pill</button></template>
+                </CopilotChatSuggestionView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("multi-assistant")).toBeDefined();
+        expect(screen.getByTestId("multi-send")).toBeDefined();
+        expect(screen.getByTestId("multi-pill-0")).toBeDefined();
+      });
+    });
+
+    describe("three-level deep nesting", () => {
+      it("should support messageView -> assistantMessage -> toolbar drill-down", () => {
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #assistant-message="{ message, messages, isRunning }">
+                    <CopilotChatAssistantMessage :message="message" :messages="messages" :is-running="isRunning">
+                      <template #toolbar><div data-testid="deep-toolbar">toolbar</div></template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("deep-toolbar")).toBeDefined();
+      });
+
+      it("should support messageView -> assistantMessage -> copyButton drill-down", () => {
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #assistant-message="{ message, messages, isRunning }">
+                    <CopilotChatAssistantMessage :message="message" :messages="messages" :is-running="isRunning">
+                      <template #copy-button><button data-testid="deep-copy">copy</button></template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(screen.getByTestId("deep-copy")).toBeDefined();
+      });
+
+      it("should support messageView -> userMessage -> editButton drill-down", () => {
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatUserMessage,
+          },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #user-message="{ message }">
+                    <CopilotChatUserMessage :message="message">
+                      <template #edit-button>
+                        <button data-testid="custom-edit-btn">✏️ Edit</button>
+                      </template>
+                    </CopilotChatUserMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        const editBtn = screen.queryByTestId("custom-edit-btn");
+        if (editBtn) {
+          expect(editBtn.textContent).toContain("Edit");
+        }
+      });
+    });
+  });
+
+  describe("5. className Override with Tailwind", () => {
+    describe("className prop override", () => {
+      it("should allow className prop in object slot to override defaults", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view>
+                <div class="class-override-a">A</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".class-override-a")).toBeDefined();
+      });
+
+      it("should merge className with other props in object slot", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view>
+                <div class="class-override-b" data-testid="class-override-b">B</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("class-override-b")
+            .classList.contains("class-override-b"),
+        ).toBe(true);
+      });
+    });
+
+    describe("string slot vs className prop equivalence", () => {
+      it("string slot should behave same as className prop", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput class="equivalence-class" :model-value="modelValue" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage" />
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".equivalence-class")).toBeDefined();
+      });
+    });
+
+    describe("tailwind utility class merging", () => {
+      it("should properly apply tailwind utilities like flex, grid, etc.", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view>
+                <div class="flex grid gap-2">x</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".flex.grid.gap-2")).toBeDefined();
+      });
+
+      it("should apply responsive tailwind classes", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view>
+                <div class="sm:px-4 md:px-6">x</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".sm\\:px-4")).toBeDefined();
+      });
+
+      it("should apply dark mode tailwind classes", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view>
+                <div class="dark:bg-zinc-900">x</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".dark\\:bg-zinc-900")).toBeDefined();
+      });
+    });
+
+    describe("user className should override pre-set className", () => {
+      it("object slot className should take precedence over defaults", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages">
+              <template #message-view>
+                <div class="override-precedence">x</div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+        const { container } = renderInWrapper(Host);
+        expect(container.querySelector(".override-precedence")).toBeDefined();
+      });
+    });
+  });
+
+  describe("6. Children Render Function (Composition Pattern)", () => {
+    it("should support children render function for full control", () => {
+      const Host = defineComponent({
+        components: { CopilotChatView },
+        setup() {
+          return { sampleMessages };
+        },
+        template: `
+          <CopilotChatView :messages="sampleMessages">
+            <template #scroll-view="{ messages }">
+              <div data-testid="full-control-view">count: {{ messages.length }}</div>
+            </template>
+          </CopilotChatView>
+        `,
+      });
+      renderInWrapper(Host);
+      expect(screen.getByTestId("full-control-view")).toBeDefined();
+    });
+
+    it("children render function should receive all slot elements", () => {
+      const Host = defineComponent({
+        components: { CopilotChatView },
+        setup() {
+          return { sampleMessages, sampleSuggestions };
+        },
+        template: `
+          <CopilotChatView :messages="sampleMessages" :suggestions="sampleSuggestions">
+            <template #scroll-view="{ messages, suggestions, onSelectSuggestion, onScroll, scrollToBottom }">
+              <div data-testid="slot-elements-check">
+                {{ messages.length }}-{{ suggestions.length }}-{{ typeof onSelectSuggestion }}-{{ typeof onScroll }}-{{ typeof scrollToBottom }}
+              </div>
+            </template>
+          </CopilotChatView>
+        `,
+      });
+      renderInWrapper(Host);
+      const text = screen.getByTestId("slot-elements-check").textContent ?? "";
+      expect(text.includes("function")).toBe(true);
+    });
+  });
+
+  describe("mobile keyboard height integration", () => {
+    it("forwards visualViewport-driven keyboardHeight into the input transform", async () => {
+      const originalVisualViewport = window.visualViewport;
+      const originalInnerHeight = window.innerHeight;
+      const listeners = new Map<string, ((event: Event) => void)[]>();
+      const mockVisualViewport = {
+        height: 800,
+        addEventListener: vi.fn(
+          (type: string, listener: (event: Event) => void) => {
+            const bucket = listeners.get(type) ?? [];
+            bucket.push(listener);
+            listeners.set(type, bucket);
+          },
+        ),
+        removeEventListener: vi.fn(),
+      };
+
+      Object.defineProperty(window, "visualViewport", {
+        value: mockVisualViewport,
+        writable: true,
+        configurable: true,
+      });
+      Object.defineProperty(window, "innerHeight", {
+        value: 800,
+        writable: true,
+        configurable: true,
+      });
+
+      try {
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { sampleMessages };
+          },
+          template: `
+            <CopilotChatView :messages="sampleMessages" />
+          `,
+        });
+
+        const { container } = renderInWrapper(Host);
+
+        // Simulate the on-screen keyboard opening (visual viewport shrinks
+        // by 300px, well above the 150px isKeyboardOpen threshold).
+        mockVisualViewport.height = 500;
+        (listeners.get("resize") ?? []).forEach((listener) =>
+          listener(new Event("resize")),
+        );
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        const inputContainer = container.querySelector(
+          "[data-testid='copilot-input-overlay']",
+        ) as HTMLElement | null;
+        expect(inputContainer).not.toBeNull();
+        // The input's absolute positioning wrapper inside the chat view
+        // should now carry the `translateY(-300px)` transform driven by
+        // useKeyboardHeight via effectiveKeyboardHeight.
+        const translatedWrapper = inputContainer!.querySelector(
+          '[style*="translateY(-300px)"]',
+        );
+        expect(translatedWrapper).not.toBeNull();
+      } finally {
+        Object.defineProperty(window, "visualViewport", {
+          value: originalVisualViewport,
+          writable: true,
+          configurable: true,
+        });
+        Object.defineProperty(window, "innerHeight", {
+          value: originalInnerHeight,
+          writable: true,
+          configurable: true,
+        });
+      }
+    });
+  });
+});