@copilotkit/vue 1.57.1

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

@@ -0,0 +1,1082 @@
+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 CopilotChatView from "../CopilotChatView.vue";
+import CopilotChatInput from "../CopilotChatInput.vue";
+import CopilotChatMessageView from "../CopilotChatMessageView.vue";
+import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
+import CopilotChatUserMessage from "../CopilotChatUserMessage.vue";
+import CopilotChatSuggestionView from "../CopilotChatSuggestionView.vue";
+
+const createMessages = () => [
+  { id: "1", role: "user" as const, content: "Hello" },
+  { id: "2", role: "assistant" as const, content: "Hi there! How can I help?" },
+  { id: "3", role: "user" as const, content: "Tell me a joke" },
+  {
+    id: "4",
+    role: "assistant" as const,
+    content: "Why did the chicken cross the road?",
+  },
+];
+
+const createSuggestions = () => [
+  {
+    title: "Tell me more",
+    message: "Tell me more about that",
+    isLoading: false,
+  },
+  {
+    title: "Another topic",
+    message: "Let's talk about something else",
+    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 onClick Handlers - Drill-Down E2E Tests", () => {
+  describe("Level 1: CopilotChatView Direct Slots", () => {
+    describe("scrollToBottomButton onClick (nested under scrollView)", () => {
+      it("should handle onClick on scrollToBottomButton via scrollView props", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return { messages: createMessages(), onClick };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <template #scroll-to-bottom-button="{ onClick: scrollClick }">
+                <button
+                  data-testid="scroll-to-bottom-button"
+                  @click="
+                    onClick();
+                    scrollClick();
+                  "
+                >
+                  scroll
+                </button>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        const scrollBtn = screen.queryByTestId("scroll-to-bottom-button");
+        if (scrollBtn) {
+          await fireEvent.click(scrollBtn);
+          expect(onClick).toHaveBeenCalled();
+        }
+      });
+    });
+
+    describe("input onClick", () => {
+      it("should handle onClick on input via props object", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { messages: createMessages(), onClick };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <div data-testid="input-slot" @click="onClick">
+                  <CopilotChatInput
+                    :model-value="modelValue"
+                    @update:model-value="onUpdateModelValue"
+                    @submit-message="onSubmitMessage"
+                  />
+                </div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("input-slot"));
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("suggestionView onClick", () => {
+      it("should handle onSelectSuggestion when suggestion is clicked", async () => {
+        const onSelectSuggestion = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView },
+          setup() {
+            return {
+              messages: createMessages(),
+              suggestions: createSuggestions(),
+              onSelectSuggestion,
+            };
+          },
+          template: `
+            <CopilotChatView
+              :messages="messages"
+              :suggestions="suggestions"
+              @select-suggestion="onSelectSuggestion"
+            />
+          `,
+        });
+
+        renderInWrapper(Host);
+        const suggestion = screen.queryByText("Tell me more");
+        if (suggestion) {
+          await fireEvent.click(suggestion);
+          expect(onSelectSuggestion).toHaveBeenCalled();
+        }
+      });
+    });
+  });
+
+  describe("Level 2: CopilotChatInput Drill-Down", () => {
+    describe("input -> sendButton onClick", () => {
+      it("should handle onClick on sendButton via input props drill-down", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { messages: createMessages(), onClick };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput :model-value="modelValue" @update:model-value="onUpdateModelValue" @submit-message="onSubmitMessage">
+                  <template #send-button="{ onClick: defaultClick }">
+                    <button
+                      data-testid="send-button"
+                      @click="
+                        onClick();
+                        defaultClick();
+                      "
+                    >
+                      Send
+                    </button>
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("send-button"));
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("input -> startTranscribeButton onClick", () => {
+      it("should handle onClick on startTranscribeButton via input props drill-down", async () => {
+        const onClick = vi.fn();
+        const onStartTranscribe = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { messages: createMessages(), onClick, onStartTranscribe };
+          },
+          template: `
+            <CopilotChatView :messages="messages" @start-transcribe="onStartTranscribe">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage, onStartTranscribe }">
+                <CopilotChatInput
+                  :model-value="modelValue"
+                  @update:model-value="onUpdateModelValue"
+                  @submit-message="onSubmitMessage"
+                  @start-transcribe="onStartTranscribe"
+                >
+                  <template #start-transcribe-button="{ onClick: defaultClick }">
+                    <button
+                      data-testid="start-transcribe-button"
+                      @click="
+                        onClick();
+                        defaultClick();
+                      "
+                    >
+                      Start
+                    </button>
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("start-transcribe-button"));
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("input -> addMenuButton onClick", () => {
+      it("should handle onClick on addMenuButton via input props drill-down", async () => {
+        const onClick = vi.fn();
+        const toolsMenu = [{ label: "Action", action: vi.fn() }];
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { messages: createMessages(), onClick, toolsMenu };
+          },
+          template: `
+            <CopilotChatView :messages="messages" :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="add-menu-button"
+                      @click="
+                        onClick();
+                        toggleMenu();
+                      "
+                    >
+                      Add
+                    </button>
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("add-menu-button"));
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("input -> textArea onFocus/onBlur", () => {
+      it("should handle onFocus on textArea via input props drill-down", async () => {
+        const onFocus = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { messages: createMessages(), onFocus };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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-textarea"
+                      :value="value"
+                      @focus="onFocus"
+                      @input="onInput"
+                      @keydown="onKeydown"
+                    />
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.focus(screen.getByTestId("custom-textarea"));
+        expect(onFocus).toHaveBeenCalled();
+      });
+
+      it("should handle onBlur on textArea via input props drill-down", async () => {
+        const onBlur = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { messages: createMessages(), onBlur };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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-textarea-blur"
+                      :value="value"
+                      @blur="onBlur"
+                      @input="onInput"
+                      @keydown="onKeydown"
+                    />
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        const textarea = screen.getByTestId("custom-textarea-blur");
+        await fireEvent.focus(textarea);
+        await fireEvent.blur(textarea);
+        expect(onBlur).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Level 2: CopilotChatMessageView Drill-Down", () => {
+    describe("messageView -> assistantMessage onClick", () => {
+      it("should handle onClick on assistantMessage container via messageView drill-down", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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-click-target" @click="onClick">{{ content }}</div>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(
+          screen.getAllByTestId("assistant-click-target")[0],
+        );
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("messageView -> userMessage onClick", () => {
+      it("should handle onClick on userMessage container via messageView drill-down", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatUserMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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-click-target" @click="onClick">{{ content }}</div>
+                      </template>
+                    </CopilotChatUserMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getAllByTestId("user-click-target")[0]);
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Level 3: CopilotChatAssistantMessage Toolbar Drill-Down", () => {
+    describe("messageView -> assistantMessage -> copyButton onClick", () => {
+      it("should handle onClick on copyButton via deep drill-down", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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="{ onCopy }">
+                        <button data-testid="copy-button" @click="onClick(); onCopy();">Copy</button>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getAllByTestId("copy-button")[0]);
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("messageView -> assistantMessage -> thumbsUpButton onClick", () => {
+      it("should handle onClick on thumbsUpButton via deep drill-down", async () => {
+        const onClick = vi.fn();
+        const onThumbsUp = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick, onThumbsUp };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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" @thumbs-up="onThumbsUp">
+                      <template #thumbs-up-button="{ onThumbsUp: action }">
+                        <button data-testid="thumbs-up-button" @click="onClick(); action();">Up</button>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getAllByTestId("thumbs-up-button")[0]);
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("messageView -> assistantMessage -> thumbsDownButton onClick", () => {
+      it("should handle onClick on thumbsDownButton via deep drill-down", async () => {
+        const onClick = vi.fn();
+        const onThumbsDown = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick, onThumbsDown };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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" @thumbs-down="onThumbsDown">
+                      <template #thumbs-down-button="{ onThumbsDown: action }">
+                        <button data-testid="thumbs-down-button" @click="onClick(); action();">Down</button>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getAllByTestId("thumbs-down-button")[0]);
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("messageView -> assistantMessage -> readAloudButton onClick", () => {
+      it("should handle onClick on readAloudButton via deep drill-down", async () => {
+        const onClick = vi.fn();
+        const onReadAloud = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick, onReadAloud };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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" @read-aloud="onReadAloud">
+                      <template #read-aloud-button="{ onReadAloud: action }">
+                        <button data-testid="read-aloud-button" @click="onClick(); action();">Read</button>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getAllByTestId("read-aloud-button")[0]);
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("messageView -> assistantMessage -> regenerateButton onClick", () => {
+      it("should handle onClick on regenerateButton via deep drill-down", async () => {
+        const onClick = vi.fn();
+        const onRegenerate = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick, onRegenerate };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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" @regenerate="onRegenerate">
+                      <template #regenerate-button="{ onRegenerate: action }">
+                        <button data-testid="regenerate-button" @click="onClick(); action();">Regenerate</button>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getAllByTestId("regenerate-button")[0]);
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("messageView -> assistantMessage -> toolbar onClick", () => {
+      it("should handle onClick on entire toolbar via deep drill-down", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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="assistant-toolbar-click" @click="onClick">Toolbar</div>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(
+          screen.getAllByTestId("assistant-toolbar-click")[0],
+        );
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Level 3: CopilotChatUserMessage Toolbar Drill-Down", () => {
+    describe("messageView -> userMessage -> copyButton onClick", () => {
+      it("should handle onClick on copyButton via deep drill-down", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatUserMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #user-message="{ message }">
+                    <CopilotChatUserMessage :message="message">
+                      <template #copy-button="{ onCopy }">
+                        <button data-testid="user-copy-button" @click="onClick(); onCopy();">Copy</button>
+                      </template>
+                    </CopilotChatUserMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getAllByTestId("user-copy-button")[0]);
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("messageView -> userMessage -> editButton onClick", () => {
+      it("should handle onClick on editButton via deep drill-down", async () => {
+        const onClick = vi.fn();
+        const onEditMessage = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatUserMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onClick, onEditMessage };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #user-message="{ message }">
+                    <CopilotChatUserMessage :message="message" @edit-message="onEditMessage">
+                      <template #edit-button="{ onEdit }">
+                        <button data-testid="user-edit-button" @click="onClick(); onEdit();">Edit</button>
+                      </template>
+                    </CopilotChatUserMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getAllByTestId("user-edit-button")[0]);
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Level 2: SuggestionView Drill-Down", () => {
+    describe("suggestionView -> container onClick", () => {
+      it("should handle onClick on suggestion container via drill-down", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatSuggestionView },
+          setup() {
+            return {
+              messages: createMessages(),
+              suggestions: createSuggestions(),
+              onClick,
+            };
+          },
+          template: `
+            <CopilotChatView :messages="messages" :suggestions="suggestions">
+              <template #suggestion-view="{ suggestions, loadingIndexes, onSelectSuggestion }">
+                <div data-testid="suggestion-container" class="pointer-events-auto" @click="onClick">
+                  <CopilotChatSuggestionView
+                    :suggestions="suggestions"
+                    :loading-indexes="loadingIndexes"
+                    @select-suggestion="(s, i) => onSelectSuggestion(s, i)"
+                  />
+                </div>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("suggestion-container"));
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("suggestionView -> suggestion onClick", () => {
+      it("should handle onClick on individual suggestion pills via drill-down", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatSuggestionView },
+          setup() {
+            return {
+              messages: createMessages(),
+              suggestions: createSuggestions(),
+              onClick,
+            };
+          },
+          template: `
+            <CopilotChatView :messages="messages" :suggestions="suggestions">
+              <template #suggestion-view="{ suggestions, loadingIndexes, onSelectSuggestion }">
+                <CopilotChatSuggestionView :suggestions="suggestions" :loading-indexes="loadingIndexes">
+                  <template #suggestion="{ suggestion, index, onSelect }">
+                    <button
+                      :data-testid="'suggestion-pill-' + index"
+                      @click="
+                        onClick();
+                        onSelect();
+                        onSelectSuggestion(suggestion, index);
+                      "
+                    >
+                      {{ suggestion.title }}
+                    </button>
+                  </template>
+                </CopilotChatSuggestionView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("suggestion-pill-0"));
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Function Render Slot Pattern", () => {
+    describe("input slot with render function", () => {
+      it("should support passing render function to input slot", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { messages: createMessages() };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
+                <CopilotChatInput
+                  :model-value="modelValue"
+                  @update:model-value="onUpdateModelValue"
+                  @submit-message="onSubmitMessage"
+                >
+                  <template #send-button="{ onClick }">
+                    <button class="custom-send-class" @click="onClick">Send</button>
+                  </template>
+                </CopilotChatInput>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(document.querySelector(".custom-send-class")).toBeDefined();
+      });
+    });
+
+    describe("messageView slot with render function", () => {
+      it("should support passing render function to messageView slot", () => {
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatMessageView },
+          setup() {
+            return { messages: createMessages() };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView class="custom-message-view" :messages="messages" :is-running="isRunning" />
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(document.querySelector(".custom-message-view")).toBeDefined();
+      });
+    });
+  });
+
+  describe("Callback Propagation Through Slot Hierarchy", () => {
+    describe("onSubmitMessage propagation", () => {
+      it("should propagate onSubmitMessage through input slot", async () => {
+        const onSubmitMessage = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            const input = ref("");
+            return { messages: createMessages(), onSubmitMessage, input };
+          },
+          template: `
+            <CopilotChatView :messages="messages" @submit-message="onSubmitMessage">
+              <template #input="{ onSubmitMessage, onUpdateModelValue }">
+                <button data-testid="submit-propagation" @click="onUpdateModelValue('Test message'); onSubmitMessage('Test message')">
+                  submit
+                </button>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("submit-propagation"));
+        expect(onSubmitMessage).toHaveBeenCalledWith("Test message");
+      });
+    });
+
+    describe("onStop propagation", () => {
+      it("should propagate onStop through input slot", async () => {
+        const onStop = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatView, CopilotChatInput },
+          setup() {
+            return { messages: createMessages(), onStop };
+          },
+          template: `
+            <CopilotChatView :messages="messages" :is-running="true" @stop="onStop">
+              <template #input="{ onStop }">
+                <button data-testid="stop-propagation" @click="onStop()">stop</button>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("stop-propagation"));
+        expect(onStop).toHaveBeenCalled();
+      });
+    });
+
+    describe("onThumbsUp/onThumbsDown propagation", () => {
+      it("should propagate onThumbsUp through messageView slot", async () => {
+        const onThumbsUp = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onThumbsUp };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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" @thumbs-up="onThumbsUp">
+                      <template #thumbs-up-button="{ onThumbsUp: action }">
+                        <button data-testid="thumbs-up-propagation" @click="action()">up</button>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(
+          screen.getAllByTestId("thumbs-up-propagation")[0],
+        );
+        expect(onThumbsUp).toHaveBeenCalled();
+      });
+
+      it("should propagate onThumbsDown through messageView slot", async () => {
+        const onThumbsDown = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatAssistantMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onThumbsDown };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <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" @thumbs-down="onThumbsDown">
+                      <template #thumbs-down-button="{ onThumbsDown: action }">
+                        <button data-testid="thumbs-down-propagation" @click="action()">down</button>
+                      </template>
+                    </CopilotChatAssistantMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(
+          screen.getAllByTestId("thumbs-down-propagation")[0],
+        );
+        expect(onThumbsDown).toHaveBeenCalled();
+      });
+    });
+
+    describe("onEditMessage propagation", () => {
+      it("should propagate onEditMessage through messageView slot", async () => {
+        const onEditMessage = vi.fn();
+        const Host = defineComponent({
+          components: {
+            CopilotChatView,
+            CopilotChatMessageView,
+            CopilotChatUserMessage,
+          },
+          setup() {
+            return { messages: createMessages(), onEditMessage };
+          },
+          template: `
+            <CopilotChatView :messages="messages">
+              <template #message-view="{ messages, isRunning }">
+                <CopilotChatMessageView :messages="messages" :is-running="isRunning">
+                  <template #user-message="{ message }">
+                    <CopilotChatUserMessage :message="message" @edit-message="onEditMessage">
+                      <template #edit-button="{ onEdit }">
+                        <button data-testid="edit-propagation" @click="onEdit()">edit</button>
+                      </template>
+                    </CopilotChatUserMessage>
+                  </template>
+                </CopilotChatMessageView>
+              </template>
+            </CopilotChatView>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getAllByTestId("edit-propagation")[0]);
+        expect(onEditMessage).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Combined Customization with onClick", () => {
+    it("should handle onClick alongside tailwind class customization", async () => {
+      const onClick = vi.fn();
+      const Host = defineComponent({
+        components: {
+          CopilotChatView,
+          CopilotChatMessageView,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { messages: createMessages(), onClick };
+        },
+        template: `
+          <CopilotChatView :messages="messages">
+            <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="{ onCopy }">
+                      <button
+                        class="custom-copy-class"
+                        @click="
+                          onClick();
+                          onCopy();
+                        "
+                      >
+                        Copy
+                      </button>
+                    </template>
+                  </CopilotChatAssistantMessage>
+                </template>
+              </CopilotChatMessageView>
+            </template>
+          </CopilotChatView>
+        `,
+      });
+
+      const { container } = renderInWrapper(Host);
+      const copyBtn =
+        container.querySelector(".custom-copy-class") ??
+        container.querySelector('button[aria-label*="Copy"]');
+      if (copyBtn) {
+        await fireEvent.click(copyBtn);
+        expect(onClick).toHaveBeenCalled();
+      }
+    });
+
+    it("should allow custom component with onClick handling", async () => {
+      const customOnClick = vi.fn();
+      const CustomCopyButton = defineComponent({
+        emits: ["click"],
+        template: `<button data-testid="custom-copy" @click="$emit('click')">Copy</button>`,
+      });
+      const Host = defineComponent({
+        components: {
+          CopilotChatView,
+          CopilotChatMessageView,
+          CopilotChatAssistantMessage,
+          CustomCopyButton,
+        },
+        setup() {
+          return { messages: createMessages(), customOnClick };
+        },
+        template: `
+          <CopilotChatView :messages="messages">
+            <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="{ onCopy }">
+                      <CustomCopyButton
+                        @click="
+                          customOnClick();
+                          onCopy();
+                        "
+                      />
+                    </template>
+                  </CopilotChatAssistantMessage>
+                </template>
+              </CopilotChatMessageView>
+            </template>
+          </CopilotChatView>
+        `,
+      });
+
+      renderInWrapper(Host);
+      const customCopyButtons = screen.queryAllByTestId("custom-copy");
+      if (customCopyButtons.length > 0) {
+        await fireEvent.click(customCopyButtons[0]);
+        expect(customOnClick).toHaveBeenCalled();
+      }
+    });
+  });
+});