@copilotkit/vue 1.57.1

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

@@ -0,0 +1,768 @@
+import { render, screen, fireEvent } from "@testing-library/vue";
+import { defineComponent } from "vue";
+import { describe, it, expect, vi } from "vitest";
+import type { AssistantMessage } from "@ag-ui/core";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
+
+const TestWrapper = defineComponent({
+  components: {
+    CopilotKitProvider,
+    CopilotChatConfigurationProvider,
+  },
+  template: `
+    <CopilotKitProvider>
+      <CopilotChatConfigurationProvider thread-id="test-thread">
+        <slot />
+      </CopilotChatConfigurationProvider>
+    </CopilotKitProvider>
+  `,
+});
+
+function createAssistantMessage(content: string): AssistantMessage {
+  return {
+    id: "msg-1",
+    role: "assistant",
+    content,
+  } as AssistantMessage;
+}
+
+function renderInWrapper(component: ReturnType<typeof defineComponent>) {
+  const Wrapped = defineComponent({
+    components: { TestWrapper, UnderTest: component },
+    template: `
+      <TestWrapper>
+        <UnderTest />
+      </TestWrapper>
+    `,
+  });
+
+  return render(Wrapped);
+}
+
+describe("CopilotChatAssistantMessage Slot System E2E Tests", () => {
+  describe("1. Tailwind Class Slot Override", () => {
+    describe("markdownRenderer slot", () => {
+      it("should apply tailwind class string to markdownRenderer", () => {
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message] };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages">
+              <template #message-renderer="{ content }">
+                <div data-testid="markdown-renderer" class="bg-blue-100 rounded-lg p-4">{{ content }}</div>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        const markdown = screen.getByTestId("markdown-renderer");
+        expect(markdown.classList.contains("bg-blue-100")).toBe(true);
+        expect(markdown.classList.contains("rounded-lg")).toBe(true);
+      });
+    });
+
+    describe("toolbar slot", () => {
+      it("should apply tailwind class string to toolbar", () => {
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message], onThumbsUp: vi.fn() };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @thumbs-up="onThumbsUp">
+              <template #toolbar>
+                <div data-testid="toolbar" class="bg-gray-100 border-t">Toolbar</div>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        const toolbar = screen.getByTestId("toolbar");
+        expect(toolbar.classList.contains("bg-gray-100")).toBe(true);
+        expect(toolbar.classList.contains("border-t")).toBe(true);
+      });
+    });
+
+    describe("copyButton slot", () => {
+      it("should apply tailwind class string to copyButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message] };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages">
+              <template #copy-button="{ onCopy }">
+                <button data-testid="copy-btn" class="text-green-500 hover:text-green-700" @click="onCopy">Copy</button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("copy-btn").classList.contains("text-green-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("thumbsUpButton slot", () => {
+      it("should apply tailwind class string to thumbsUpButton", () => {
+        const onThumbsUp = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message], onThumbsUp };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @thumbs-up="onThumbsUp">
+              <template #thumbs-up-button="{ onThumbsUp: onClick }">
+                <button data-testid="thumbs-up-btn" class="text-blue-500" @click="onClick">Up</button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("thumbs-up-btn")
+            .classList.contains("text-blue-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("thumbsDownButton slot", () => {
+      it("should apply tailwind class string to thumbsDownButton", () => {
+        const onThumbsDown = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message], onThumbsDown };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @thumbs-down="onThumbsDown">
+              <template #thumbs-down-button="{ onThumbsDown: onClick }">
+                <button data-testid="thumbs-down-btn" class="text-red-500" @click="onClick">Down</button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("thumbs-down-btn")
+            .classList.contains("text-red-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("readAloudButton slot", () => {
+      it("should apply tailwind class string to readAloudButton", () => {
+        const onReadAloud = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message], onReadAloud };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @read-aloud="onReadAloud">
+              <template #read-aloud-button="{ onReadAloud: onClick }">
+                <button data-testid="read-aloud-btn" class="text-purple-500" @click="onClick">Read</button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("read-aloud-btn")
+            .classList.contains("text-purple-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("regenerateButton slot", () => {
+      it("should apply tailwind class string to regenerateButton", () => {
+        const onRegenerate = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message], onRegenerate };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @regenerate="onRegenerate">
+              <template #regenerate-button="{ onRegenerate: onClick }">
+                <button data-testid="regenerate-btn" class="text-orange-500" @click="onClick">Regenerate</button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen
+            .getByTestId("regenerate-btn")
+            .classList.contains("text-orange-500"),
+        ).toBe(true);
+      });
+    });
+
+    describe("toolCallsView slot", () => {
+      it("should apply tailwind class string to toolCallsView", () => {
+        const message: AssistantMessage = {
+          ...createAssistantMessage("Hello"),
+          toolCalls: [
+            {
+              id: "tc-1",
+              type: "function",
+              function: { name: "test_tool", arguments: "{}" },
+            } as any,
+          ],
+        };
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            return { message, messages: [message] };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages">
+              <template #tool-calls-view>
+                <div data-testid="tool-calls-view" class="bg-yellow-50 p-2">Tools</div>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        const toolCalls = screen.queryByTestId("tool-calls-view");
+        if (toolCalls) {
+          expect(toolCalls.classList.contains("p-2")).toBe(true);
+        }
+      });
+    });
+  });
+
+  describe("2. Property Passing (onClick, disabled, etc.)", () => {
+    describe("markdownRenderer slot", () => {
+      it("should pass custom props to markdownRenderer", () => {
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message] };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages">
+              <template #message-renderer="{ content }">
+                <div data-testid="custom-markdown">{{ content }}</div>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(screen.queryByTestId("custom-markdown")).toBeDefined();
+      });
+    });
+
+    describe("toolbar slot", () => {
+      it("should pass custom onClick to toolbar", async () => {
+        const onClick = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return {
+              message,
+              messages: [message],
+              onClick,
+              onThumbsUp: vi.fn(),
+            };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @thumbs-up="onThumbsUp">
+              <template #toolbar>
+                <div data-testid="custom-toolbar" @click="onClick">Toolbar</div>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("custom-toolbar"));
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("copyButton slot", () => {
+      it("should pass custom onClick that wraps default behavior", async () => {
+        const customOnClick = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message], customOnClick };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages">
+              <template #copy-button="{ onCopy }">
+                <button
+                  data-testid="custom-copy-button"
+                  @click="
+                    customOnClick();
+                    onCopy();
+                  "
+                >
+                  Copy
+                </button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("custom-copy-button"));
+        expect(customOnClick).toHaveBeenCalled();
+      });
+
+      it("should support disabled state on copyButton", () => {
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message] };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages">
+              <template #copy-button="{ onCopy }">
+                <button data-testid="disabled-copy-button" disabled @click="onCopy">Copy</button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        expect(
+          screen.getByTestId("disabled-copy-button").hasAttribute("disabled"),
+        ).toBe(true);
+      });
+    });
+
+    describe("thumbsUpButton slot", () => {
+      it("should call custom onClick on thumbsUpButton", async () => {
+        const customOnClick = vi.fn();
+        const onThumbsUp = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message], customOnClick, onThumbsUp };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @thumbs-up="onThumbsUp">
+              <template #thumbs-up-button="{ onThumbsUp: onClick }">
+                <button
+                  data-testid="thumbs-up-custom"
+                  @click="
+                    customOnClick();
+                    onClick();
+                  "
+                >
+                  Up
+                </button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("thumbs-up-custom"));
+        expect(customOnClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("thumbsDownButton slot", () => {
+      it("should call custom onClick on thumbsDownButton", async () => {
+        const customOnClick = vi.fn();
+        const onThumbsDown = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return {
+              message,
+              messages: [message],
+              customOnClick,
+              onThumbsDown,
+            };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @thumbs-down="onThumbsDown">
+              <template #thumbs-down-button="{ onThumbsDown: onClick }">
+                <button
+                  data-testid="thumbs-down-custom"
+                  @click="
+                    customOnClick();
+                    onClick();
+                  "
+                >
+                  Down
+                </button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("thumbs-down-custom"));
+        expect(customOnClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("readAloudButton slot", () => {
+      it("should call custom onClick on readAloudButton", async () => {
+        const customOnClick = vi.fn();
+        const onReadAloud = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return { message, messages: [message], customOnClick, onReadAloud };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @read-aloud="onReadAloud">
+              <template #read-aloud-button="{ onReadAloud: onClick }">
+                <button
+                  data-testid="read-aloud-custom"
+                  @click="
+                    customOnClick();
+                    onClick();
+                  "
+                >
+                  Read
+                </button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("read-aloud-custom"));
+        expect(customOnClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("regenerateButton slot", () => {
+      it("should call custom onClick on regenerateButton", async () => {
+        const customOnClick = vi.fn();
+        const onRegenerate = vi.fn();
+        const Host = defineComponent({
+          components: { CopilotChatAssistantMessage },
+          setup() {
+            const message = createAssistantMessage("Hello world");
+            return {
+              message,
+              messages: [message],
+              customOnClick,
+              onRegenerate,
+            };
+          },
+          template: `
+            <CopilotChatAssistantMessage :message="message" :messages="messages" @regenerate="onRegenerate">
+              <template #regenerate-button="{ onRegenerate: onClick }">
+                <button
+                  data-testid="regenerate-custom"
+                  @click="
+                    customOnClick();
+                    onClick();
+                  "
+                >
+                  Regenerate
+                </button>
+              </template>
+            </CopilotChatAssistantMessage>
+          `,
+        });
+
+        renderInWrapper(Host);
+        await fireEvent.click(screen.getByTestId("regenerate-custom"));
+        expect(customOnClick).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("3. Custom Component Receiving Sub-components", () => {
+    it("should allow custom component for markdownRenderer", () => {
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          const message = createAssistantMessage("hello");
+          return { message, messages: [message] };
+        },
+        template: `
+          <CopilotChatAssistantMessage :message="message" :messages="messages">
+            <template #message-renderer="{ content }">
+              <div data-testid="custom-markdown-component">{{ content.toUpperCase() }}</div>
+            </template>
+          </CopilotChatAssistantMessage>
+        `,
+      });
+
+      renderInWrapper(Host);
+      const custom = screen.queryByTestId("custom-markdown-component");
+      expect(custom).toBeDefined();
+      expect(custom?.textContent).toBe("HELLO");
+    });
+
+    it("should allow custom component for toolbar", () => {
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          const message = createAssistantMessage("Hello");
+          return { message, messages: [message], onThumbsUp: vi.fn() };
+        },
+        template: `
+          <CopilotChatAssistantMessage :message="message" :messages="messages" @thumbs-up="onThumbsUp">
+            <template #toolbar>
+              <div data-testid="custom-toolbar-component">
+                <span>Custom Toolbar:</span>
+                <slot />
+              </div>
+            </template>
+          </CopilotChatAssistantMessage>
+        `,
+      });
+
+      renderInWrapper(Host);
+      const custom = screen.queryByTestId("custom-toolbar-component");
+      expect(custom).toBeDefined();
+      expect(custom?.textContent).toContain("Custom Toolbar");
+    });
+
+    it("should allow custom component for copyButton", () => {
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          const message = createAssistantMessage("Hello");
+          return { message, messages: [message] };
+        },
+        template: `
+          <CopilotChatAssistantMessage :message="message" :messages="messages">
+            <template #copy-button="{ onCopy }">
+              <button data-testid="custom-copy" @click="onCopy">Custom Copy</button>
+            </template>
+          </CopilotChatAssistantMessage>
+        `,
+      });
+
+      renderInWrapper(Host);
+      expect(screen.queryByTestId("custom-copy")).toBeDefined();
+    });
+  });
+
+  describe("4. Children Render Function for Drill-down", () => {
+    it("should provide all bound sub-components via children render function", () => {
+      const onThumbsUp = vi.fn();
+      const onThumbsDown = vi.fn();
+      const onReadAloud = vi.fn();
+      const onRegenerate = vi.fn();
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          const message = createAssistantMessage("Hello world");
+          return {
+            message,
+            messages: [message],
+            onThumbsUp,
+            onThumbsDown,
+            onReadAloud,
+            onRegenerate,
+          };
+        },
+        template: `
+          <CopilotChatAssistantMessage
+            :message="message"
+            :messages="messages"
+            @thumbs-up="onThumbsUp"
+            @thumbs-down="onThumbsDown"
+            @read-aloud="onReadAloud"
+            @regenerate="onRegenerate"
+          >
+            <template #message-renderer><div data-testid="received-markdown">markdown</div></template>
+            <template #toolbar><div data-testid="received-toolbar">toolbar</div></template>
+            <template #copy-button><button data-testid="received-copy">copy</button></template>
+            <template #thumbs-up-button><button data-testid="received-thumbs-up">up</button></template>
+            <template #thumbs-down-button><button data-testid="received-thumbs-down">down</button></template>
+            <template #read-aloud-button><button data-testid="received-read-aloud">read</button></template>
+            <template #regenerate-button><button data-testid="received-regenerate">regen</button></template>
+            <template #tool-calls-view><div data-testid="received-tool-calls">tools</div></template>
+          </CopilotChatAssistantMessage>
+        `,
+      });
+
+      renderInWrapper(Host);
+      expect(screen.queryByTestId("received-markdown")).toBeDefined();
+      expect(screen.queryByTestId("received-toolbar")).toBeDefined();
+      expect(screen.queryByTestId("received-copy")).toBeDefined();
+      expect(screen.queryByTestId("received-thumbs-up")).toBeDefined();
+      expect(screen.queryByTestId("received-thumbs-down")).toBeDefined();
+      expect(screen.queryByTestId("received-read-aloud")).toBeDefined();
+      expect(screen.queryByTestId("received-regenerate")).toBeDefined();
+      expect(screen.queryByTestId("received-tool-calls")).toBeDefined();
+    });
+
+    it("should pass message and other props through children render function", () => {
+      const message = createAssistantMessage("Test message");
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          return { message, messages: [message] };
+        },
+        template: `
+          <CopilotChatAssistantMessage :message="message" :messages="messages" :is-running="true" :toolbar-visible="false">
+            <template #message-renderer="{ message: receivedMessage }">
+              <div data-testid="children-message">{{ receivedMessage.id }}</div>
+            </template>
+          </CopilotChatAssistantMessage>
+        `,
+      });
+
+      renderInWrapper(Host);
+      expect(screen.getByTestId("children-message").textContent).toBe("msg-1");
+    });
+  });
+
+  describe("5. className Override with Tailwind Strings", () => {
+    it("should override root className while preserving default prose classes", () => {
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          const message = createAssistantMessage("Hello");
+          return { message, messages: [message] };
+        },
+        template: `
+          <CopilotChatAssistantMessage :message="message" :messages="messages" class="custom-root-class bg-custom" />
+        `,
+      });
+
+      const { container } = renderInWrapper(Host);
+      const root = container.querySelector(".custom-root-class");
+      expect(root).toBeDefined();
+      const proseDiv =
+        root?.classList.contains("cpk:prose") ||
+        !!root?.querySelector(".cpk\\:prose");
+      expect(proseDiv).toBe(true);
+    });
+
+    it("should allow tailwind utilities to override default styles", () => {
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          const message = createAssistantMessage("Hello");
+          return { message, messages: [message] };
+        },
+        template: `
+          <CopilotChatAssistantMessage :message="message" :messages="messages" class="max-w-sm" />
+        `,
+      });
+
+      const { container } = renderInWrapper(Host);
+      expect(container.querySelector(".max-w-sm")).toBeDefined();
+    });
+
+    it("should merge multiple slot classNames correctly", () => {
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          const message = createAssistantMessage("Hello");
+          return { message, messages: [message] };
+        },
+        template: `
+          <CopilotChatAssistantMessage :message="message" :messages="messages" class="root-custom">
+            <template #toolbar><div data-testid="toolbar-custom" class="toolbar-custom">Toolbar</div></template>
+            <template #copy-button><button data-testid="copy-custom" class="copy-custom">Copy</button></template>
+          </CopilotChatAssistantMessage>
+        `,
+      });
+
+      const { container } = renderInWrapper(Host);
+      expect(container.querySelector(".root-custom")).toBeDefined();
+      expect(container.querySelector(".toolbar-custom")).toBeDefined();
+      expect(container.querySelector(".copy-custom")).toBeDefined();
+    });
+  });
+
+  describe("6. Integration and Recursive Slot Application", () => {
+    it("should correctly render all slots with mixed customization", () => {
+      const onThumbsUp = vi.fn();
+      const onThumbsDown = vi.fn();
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          const message = createAssistantMessage("Hello world");
+          return { message, messages: [message], onThumbsUp, onThumbsDown };
+        },
+        template: `
+          <CopilotChatAssistantMessage :message="message" :messages="messages" @thumbs-up="onThumbsUp" @thumbs-down="onThumbsDown">
+            <template #message-renderer="{ content }"><div class="markdown-style">{{ content }}</div></template>
+            <template #toolbar><div class="toolbar-style">Toolbar</div></template>
+            <template #copy-button><button class="copy-style">Copy</button></template>
+            <template #thumbs-up-button="{ onThumbsUp: onClick }"><button class="thumbs-up-style" @click="onClick">Up</button></template>
+            <template #thumbs-down-button="{ onThumbsDown: onClick }"><button class="thumbs-down-style" @click="onClick">Down</button></template>
+          </CopilotChatAssistantMessage>
+        `,
+      });
+
+      const { container } = renderInWrapper(Host);
+      expect(container.querySelector(".markdown-style")).toBeDefined();
+      expect(container.querySelector(".toolbar-style")).toBeDefined();
+      expect(container.querySelector(".copy-style")).toBeDefined();
+      expect(container.querySelector(".thumbs-up-style")).toBeDefined();
+      expect(container.querySelector(".thumbs-down-style")).toBeDefined();
+    });
+
+    it("should work with property objects and class strings mixed", async () => {
+      const onClick = vi.fn();
+      const Host = defineComponent({
+        components: { CopilotChatAssistantMessage },
+        setup() {
+          const message = createAssistantMessage("Hello world");
+          return { message, messages: [message], onClick, onThumbsUp: vi.fn() };
+        },
+        template: `
+          <CopilotChatAssistantMessage :message="message" :messages="messages" @thumbs-up="onThumbsUp">
+            <template #message-renderer="{ content }"><div class="text-lg">{{ content }}</div></template>
+            <template #toolbar>
+              <div data-testid="mixed-toolbar" class="flex gap-2" @click="onClick">Toolbar</div>
+            </template>
+          </CopilotChatAssistantMessage>
+        `,
+      });
+
+      const { container } = renderInWrapper(Host);
+      expect(container.querySelector(".text-lg")).toBeDefined();
+
+      const toolbar = container.querySelector(".flex.gap-2");
+      if (toolbar) {
+        await fireEvent.click(toolbar);
+        expect(onClick).toHaveBeenCalled();
+      }
+    });
+  });
+});