@copilotkit/vue 1.57.1

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

@@ -0,0 +1,1108 @@
+import { defineComponent } from "vue";
+import { render, screen, fireEvent, waitFor } from "@testing-library/vue";
+import { beforeEach, describe, expect, it, 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 TEST_THREAD_ID = "test-thread";
+
+const mockWriteText = vi.fn();
+Object.assign(navigator, {
+  clipboard: {
+    writeText: mockWriteText,
+  },
+});
+
+const mockOnThumbsUp = vi.fn();
+const mockOnThumbsDown = vi.fn();
+const mockOnReadAloud = vi.fn();
+const mockOnRegenerate = vi.fn();
+
+const basicMessage: AssistantMessage = {
+  role: "assistant",
+  content: "Hello, this is a test message from the assistant.",
+  id: "test-message-1",
+};
+
+function renderWithProvider(component: object) {
+  return render(component);
+}
+
+beforeEach(() => {
+  mockWriteText.mockReset();
+  mockOnThumbsUp.mockClear();
+  mockOnThumbsDown.mockClear();
+  mockOnReadAloud.mockClear();
+  mockOnRegenerate.mockClear();
+});
+
+describe("CopilotChatAssistantMessage", () => {
+  describe("Basic rendering", () => {
+    it("renders with default components and styling", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByRole("button", { name: /copy/i })).toBeDefined();
+    });
+
+    it("renders empty message gracefully", () => {
+      const emptyMessage: AssistantMessage = {
+        role: "assistant",
+        content: "",
+        id: "empty-message",
+      };
+
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { emptyMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="emptyMessage" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+
+      const container = document.querySelector(
+        '[data-message-id="empty-message"]',
+      );
+      expect(container).toBeDefined();
+      expect(screen.queryByRole("button", { name: /copy/i })).toBeNull();
+    });
+  });
+
+  describe("Callback functionality", () => {
+    it("renders only copy button when no callbacks provided", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+
+      expect(screen.getByRole("button", { name: /copy/i })).toBeDefined();
+      expect(
+        screen.queryByRole("button", { name: /good response/i }),
+      ).toBeNull();
+      expect(
+        screen.queryByRole("button", { name: /bad response/i }),
+      ).toBeNull();
+      expect(screen.queryByRole("button", { name: /read aloud/i })).toBeNull();
+      expect(screen.queryByRole("button", { name: /regenerate/i })).toBeNull();
+    });
+
+    it("renders all buttons when all callbacks provided", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return {
+            basicMessage,
+            TEST_THREAD_ID,
+            onThumbsUp: mockOnThumbsUp,
+            onThumbsDown: mockOnThumbsDown,
+            onReadAloud: mockOnReadAloud,
+            onRegenerate: mockOnRegenerate,
+          };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage
+                :message="basicMessage"
+                @thumbs-up="onThumbsUp"
+                @thumbs-down="onThumbsDown"
+                @read-aloud="onReadAloud"
+                @regenerate="onRegenerate"
+              />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+
+      expect(screen.getByRole("button", { name: /copy/i })).toBeDefined();
+      expect(
+        screen.getByRole("button", { name: /good response/i }),
+      ).toBeDefined();
+      expect(
+        screen.getByRole("button", { name: /bad response/i }),
+      ).toBeDefined();
+      expect(screen.getByRole("button", { name: /read aloud/i })).toBeDefined();
+      expect(screen.getByRole("button", { name: /regenerate/i })).toBeDefined();
+    });
+
+    it("calls copy functionality when copy button clicked", async () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+
+      fireEvent.click(screen.getByRole("button", { name: /copy/i }));
+      await waitFor(() => {
+        expect(mockWriteText).toHaveBeenCalledWith(basicMessage.content);
+      });
+    });
+
+    it("calls thumbs up callback when thumbs up button clicked", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID, onThumbsUp: mockOnThumbsUp };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" @thumbs-up="onThumbsUp" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      fireEvent.click(screen.getByRole("button", { name: /good response/i }));
+      expect(mockOnThumbsUp).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls thumbs down callback when thumbs down button clicked", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return {
+            basicMessage,
+            TEST_THREAD_ID,
+            onThumbsDown: mockOnThumbsDown,
+          };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" @thumbs-down="onThumbsDown" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      fireEvent.click(screen.getByRole("button", { name: /bad response/i }));
+      expect(mockOnThumbsDown).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls read aloud callback when read aloud button clicked", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID, onReadAloud: mockOnReadAloud };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" @read-aloud="onReadAloud" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      fireEvent.click(screen.getByRole("button", { name: /read aloud/i }));
+      expect(mockOnReadAloud).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls regenerate callback when regenerate button clicked", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return {
+            basicMessage,
+            TEST_THREAD_ID,
+            onRegenerate: mockOnRegenerate,
+          };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" @regenerate="onRegenerate" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      fireEvent.click(screen.getByRole("button", { name: /regenerate/i }));
+      expect(mockOnRegenerate).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Additional toolbar items", () => {
+    it("renders additional toolbar items", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage">
+                <template #toolbar-items>
+                  <button data-testid="custom-toolbar-item">Custom Action</button>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("custom-toolbar-item")).toBeDefined();
+    });
+  });
+
+  describe("Slot functionality - Custom Components", () => {
+    it("accepts custom MarkdownRenderer component", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage">
+                <template #message-renderer="{ content }">
+                  <div data-testid="custom-markdown">{{ content.toUpperCase() }}</div>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("custom-markdown")).toBeDefined();
+      expect(
+        screen
+          .getByTestId("custom-markdown")
+          .textContent?.includes(basicMessage.content.toUpperCase()),
+      ).toBe(true);
+    });
+
+    it("accepts custom Toolbar component", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage">
+                <template #toolbar>
+                  <div data-testid="custom-toolbar">Custom Toolbar:</div>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("custom-toolbar")).toBeDefined();
+      expect(
+        screen
+          .getByTestId("custom-toolbar")
+          .textContent?.includes("Custom Toolbar:"),
+      ).toBe(true);
+    });
+
+    it("accepts custom CopyButton component", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage">
+                <template #copy-button="{ onCopy }">
+                  <button data-testid="custom-copy-button" @click="onCopy">Custom Copy</button>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("custom-copy-button")).toBeDefined();
+      expect(
+        screen
+          .getByTestId("custom-copy-button")
+          .textContent?.includes("Custom Copy"),
+      ).toBe(true);
+    });
+
+    it("accepts custom ThumbsUpButton component", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID, onThumbsUp: mockOnThumbsUp };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" @thumbs-up="onThumbsUp">
+                <template #thumbs-up-button="{ onThumbsUp: onClick }">
+                  <button data-testid="custom-thumbs-up" @click="onClick">Custom Like</button>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("custom-thumbs-up")).toBeDefined();
+      expect(
+        screen
+          .getByTestId("custom-thumbs-up")
+          .textContent?.includes("Custom Like"),
+      ).toBe(true);
+    });
+
+    it("accepts custom ThumbsDownButton component", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return {
+            basicMessage,
+            TEST_THREAD_ID,
+            onThumbsDown: mockOnThumbsDown,
+          };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" @thumbs-down="onThumbsDown">
+                <template #thumbs-down-button="{ onThumbsDown: onClick }">
+                  <button data-testid="custom-thumbs-down" @click="onClick">Custom Dislike</button>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("custom-thumbs-down")).toBeDefined();
+      expect(
+        screen
+          .getByTestId("custom-thumbs-down")
+          .textContent?.includes("Custom Dislike"),
+      ).toBe(true);
+    });
+
+    it("accepts custom ReadAloudButton component", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID, onReadAloud: mockOnReadAloud };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" @read-aloud="onReadAloud">
+                <template #read-aloud-button="{ onReadAloud: onClick }">
+                  <button data-testid="custom-read-aloud" @click="onClick">Custom Speak</button>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("custom-read-aloud")).toBeDefined();
+      expect(
+        screen
+          .getByTestId("custom-read-aloud")
+          .textContent?.includes("Custom Speak"),
+      ).toBe(true);
+    });
+
+    it("accepts custom RegenerateButton component", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return {
+            basicMessage,
+            TEST_THREAD_ID,
+            onRegenerate: mockOnRegenerate,
+          };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" @regenerate="onRegenerate">
+                <template #regenerate-button="{ onRegenerate: onClick }">
+                  <button data-testid="custom-regenerate" @click="onClick">Custom Retry</button>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("custom-regenerate")).toBeDefined();
+      expect(
+        screen
+          .getByTestId("custom-regenerate")
+          .textContent?.includes("Custom Retry"),
+      ).toBe(true);
+    });
+  });
+
+  describe("Slot functionality - Custom Classes", () => {
+    it("applies custom className to component", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" class="custom-container-class" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      const { container } = renderWithProvider(Host);
+      expect(container.querySelector(".custom-container-class")).toBeDefined();
+    });
+
+    it("applies custom className to MarkdownRenderer slot", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage">
+                <template #message-renderer="{ content }">
+                  <div class="custom-markdown-class">{{ content }}</div>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      const { container } = renderWithProvider(Host);
+      expect(container.querySelector(".custom-markdown-class")).toBeDefined();
+    });
+
+    it("applies custom className to Toolbar slot", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage">
+                <template #toolbar>
+                  <div class="custom-toolbar-class">Toolbar</div>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      const { container } = renderWithProvider(Host);
+      expect(container.querySelector(".custom-toolbar-class")).toBeDefined();
+    });
+
+    it("applies custom className to CopyButton slot", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage">
+                <template #copy-button="{ onCopy }">
+                  <button class="custom-copy-button-class" @click="onCopy">Copy</button>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      const { container } = renderWithProvider(Host);
+      expect(
+        container.querySelector(".custom-copy-button-class"),
+      ).toBeDefined();
+    });
+  });
+
+  describe("Children render prop functionality", () => {
+    it("supports custom layout via children render prop", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage">
+                <template #layout="{ message, content }">
+                  <div data-testid="custom-layout">
+                    <h2>Custom Layout for: {{ message.id }}</h2>
+                    <div>{{ content }}</div>
+                    <div data-testid="custom-toolbar-wrapper">toolbar-wrapper</div>
+                  </div>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+
+      expect(screen.getByTestId("custom-layout")).toBeDefined();
+      expect(
+        screen.getByText(`Custom Layout for: ${basicMessage.id}`),
+      ).toBeDefined();
+      expect(screen.getByTestId("custom-toolbar-wrapper")).toBeDefined();
+    });
+
+    it("provides all slot components to children render prop", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return {
+            basicMessage,
+            TEST_THREAD_ID,
+            onThumbsUp: mockOnThumbsUp,
+            onThumbsDown: mockOnThumbsDown,
+            onReadAloud: mockOnReadAloud,
+            onRegenerate: mockOnRegenerate,
+          };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage
+                :message="basicMessage"
+                @thumbs-up="onThumbsUp"
+                @thumbs-down="onThumbsDown"
+                @read-aloud="onReadAloud"
+                @regenerate="onRegenerate"
+              >
+                <template #layout="{ messageRenderer, toolbar, copyButton, thumbsUpButton, thumbsDownButton, readAloudButton, regenerateButton }">
+                  <div data-testid="all-slots-layout">
+                    <div data-testid="markdown-present">{{ !!messageRenderer }}</div>
+                    <div data-testid="toolbar-present">{{ !!toolbar }}</div>
+                    <div data-testid="individual-buttons">
+                      <button v-if="copyButton">copy</button>
+                      <button v-if="thumbsUpButton">up</button>
+                      <button v-if="thumbsDownButton">down</button>
+                      <button v-if="readAloudButton">read</button>
+                      <button v-if="regenerateButton">regen</button>
+                    </div>
+                  </div>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("all-slots-layout")).toBeDefined();
+      expect(screen.getByTestId("individual-buttons")).toBeDefined();
+      expect(screen.getAllByRole("button").length).toBeGreaterThanOrEqual(5);
+    });
+
+    it("provides callback props to children render prop", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return {
+            basicMessage,
+            TEST_THREAD_ID,
+            onThumbsUp: mockOnThumbsUp,
+            onThumbsDown: mockOnThumbsDown,
+            onReadAloud: mockOnReadAloud,
+            onRegenerate: mockOnRegenerate,
+          };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage
+                :message="basicMessage"
+                @thumbs-up="onThumbsUp"
+                @thumbs-down="onThumbsDown"
+                @read-aloud="onReadAloud"
+                @regenerate="onRegenerate"
+              >
+                <template #layout="{ onThumbsUp, onThumbsDown, onReadAloud, onRegenerate }">
+                  <div data-testid="callback-test">
+                    <button @click="onThumbsUp" data-testid="custom-thumbs-up">Custom Thumbs Up</button>
+                    <button @click="onThumbsDown" data-testid="custom-thumbs-down">Custom Thumbs Down</button>
+                    <button @click="onReadAloud" data-testid="custom-read-aloud">Custom Read Aloud</button>
+                    <button @click="onRegenerate" data-testid="custom-regenerate">Custom Regenerate</button>
+                  </div>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+
+      fireEvent.click(screen.getByTestId("custom-thumbs-up"));
+      fireEvent.click(screen.getByTestId("custom-thumbs-down"));
+      fireEvent.click(screen.getByTestId("custom-read-aloud"));
+      fireEvent.click(screen.getByTestId("custom-regenerate"));
+
+      expect(mockOnThumbsUp).toHaveBeenCalledTimes(1);
+      expect(mockOnThumbsDown).toHaveBeenCalledTimes(1);
+      expect(mockOnReadAloud).toHaveBeenCalledTimes(1);
+      expect(mockOnRegenerate).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Toolbar visibility functionality", () => {
+    it("shows toolbar by default (toolbarVisible = true by default)", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+      renderWithProvider(Host);
+      expect(screen.getByRole("button", { name: /copy/i })).toBeDefined();
+    });
+
+    it("shows toolbar when toolbarVisible is explicitly true", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" :toolbar-visible="true" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+      renderWithProvider(Host);
+      expect(screen.getByRole("button", { name: /copy/i })).toBeDefined();
+    });
+
+    it("hides toolbar when toolbarVisible is false", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" :toolbar-visible="false" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.queryByRole("button", { name: /copy/i })).toBeNull();
+    });
+
+    it("always passes toolbar and toolbarVisible to children render prop", () => {
+      const childrenSpy = vi.fn(() => "");
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID, childrenSpy };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" :toolbar-visible="false">
+                <template #layout="{ toolbar, toolbarVisible, message }">
+                  <span class="cpk:hidden">{{ childrenSpy(toolbar, toolbarVisible, message) }}</span>
+                  <div data-testid="children-render" />
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(childrenSpy).toHaveBeenCalled();
+      const firstCall = childrenSpy.mock.calls[0];
+      expect(firstCall[0]).toBeDefined();
+      expect(firstCall[1]).toBe(false);
+      expect(firstCall[2]).toEqual(basicMessage);
+      expect(screen.getByTestId("children-render")).toBeDefined();
+    });
+
+    it("passes toolbarVisible true to children render prop by default", () => {
+      const childrenSpy = vi.fn(() => "");
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID, childrenSpy };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage">
+                <template #layout="{ toolbar, toolbarVisible, message }">
+                  <span class="cpk:hidden">{{ childrenSpy(toolbar, toolbarVisible, message) }}</span>
+                  <div />
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(childrenSpy).toHaveBeenCalled();
+      const firstCall = childrenSpy.mock.calls[0];
+      expect(firstCall[0]).toBeDefined();
+      expect(firstCall[1]).toBe(true);
+      expect(firstCall[2]).toEqual(basicMessage);
+    });
+
+    it("children can use toolbarVisible to conditionally render toolbar", () => {
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" :toolbar-visible="false">
+                <template #layout="{ toolbarVisible }">
+                  <div data-testid="custom-layout">
+                    <div data-testid="content">Custom content</div>
+                    <div v-if="toolbarVisible" data-testid="conditional-toolbar">Toolbar</div>
+                    <div v-else data-testid="no-toolbar">No toolbar</div>
+                  </div>
+                </template>
+              </CopilotChatAssistantMessage>
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(screen.getByTestId("custom-layout")).toBeDefined();
+      expect(screen.getByTestId("content")).toBeDefined();
+      expect(screen.queryByTestId("conditional-toolbar")).toBeNull();
+      expect(screen.getByTestId("no-toolbar")).toBeDefined();
+    });
+  });
+
+  describe("Error handling", () => {
+    it("handles copy errors gracefully", async () => {
+      mockWriteText.mockRejectedValueOnce(new Error("Clipboard error"));
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { basicMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="basicMessage" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      fireEvent.click(screen.getByRole("button", { name: /copy/i }));
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          "Failed to copy to clipboard:",
+          expect.any(Error),
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it("handles null message content gracefully", () => {
+      const nullContentMessage: AssistantMessage = {
+        role: "assistant",
+        content: null as never,
+        id: "null-content",
+      };
+
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { nullContentMessage, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="nullContentMessage" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      const container = document.querySelector(
+        '[data-message-id="null-content"]',
+      );
+      expect(container).toBeDefined();
+      expect(screen.queryByRole("button", { name: /copy/i })).toBeNull();
+    });
+  });
+
+  describe("Vue-specific semantics", () => {
+    it("renders markdown image and table actions", () => {
+      const message: AssistantMessage = {
+        id: "assistant-vue-extra",
+        role: "assistant",
+        content: `![Alt text](https://example.com/image.png)\n\n| Feature | Supported |\n| --- | --- |\n| Tables | yes |`,
+        timestamp: new Date(),
+      };
+
+      const Host = defineComponent({
+        components: {
+          CopilotKitProvider,
+          CopilotChatConfigurationProvider,
+          CopilotChatAssistantMessage,
+        },
+        setup() {
+          return { message, TEST_THREAD_ID };
+        },
+        template: `
+          <CopilotKitProvider runtime-url="/api/copilotkit">
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatAssistantMessage :message="message" />
+            </CopilotChatConfigurationProvider>
+          </CopilotKitProvider>
+        `,
+      });
+
+      renderWithProvider(Host);
+      expect(
+        document.querySelector('button[title="Download image"]'),
+      ).toBeDefined();
+      expect(document.querySelector("table")).toBeDefined();
+      expect(
+        document.querySelector('button[title="Copy table"]'),
+      ).toBeDefined();
+      expect(
+        document.querySelector('button[title="Download table"]'),
+      ).toBeDefined();
+    });
+  });
+});