@copilotkit/vue 1.57.1

package/src/v2/components/chat/__tests__/CopilotChatPropsRerender.e2e.test.ts

@@ -0,0 +1,181 @@
+import { screen, fireEvent, waitFor } from "@testing-library/vue";
+import { defineComponent, nextTick, onMounted, onUpdated, ref } from "vue";
+import type { PropType } from "vue";
+import type { Message } from "@ag-ui/core";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import CopilotChat from "../CopilotChat.vue";
+import { useCopilotChatConfiguration } from "../../../providers/useCopilotChatConfiguration";
+import {
+  MockStepwiseAgent,
+  renderWithCopilotKit,
+  runFinishedEvent,
+  runStartedEvent,
+  textChunkEvent,
+} from "../../../__tests__/utils/test-helpers";
+
+let assistantRenderCount = 0;
+let labelConsumerRenderCount = 0;
+
+const CountingAssistantMessage = defineComponent({
+  props: {
+    message: {
+      type: Object as PropType<Message>,
+      required: true,
+    },
+  },
+  setup() {
+    const trackRender = () => {
+      assistantRenderCount += 1;
+    };
+    onMounted(trackRender);
+    onUpdated(trackRender);
+    return {};
+  },
+  template: `<div data-testid="counting-assistant" />`,
+});
+
+const LabelConsumerAssistantMessage = defineComponent({
+  props: {
+    message: {
+      type: Object as PropType<Message>,
+      required: true,
+    },
+  },
+  setup() {
+    useCopilotChatConfiguration();
+    const trackRender = () => {
+      labelConsumerRenderCount += 1;
+    };
+    onMounted(trackRender);
+    onUpdated(trackRender);
+    return {};
+  },
+  template: `<div data-testid="counting-assistant" />`,
+});
+
+function createChatHost(options: { withInlineLabels: boolean }) {
+  const { withInlineLabels } = options;
+  return defineComponent({
+    components: {
+      CopilotChat,
+      CountingAssistantMessage,
+      LabelConsumerAssistantMessage,
+    },
+    setup() {
+      const mirroredInput = ref("");
+      const handleInputChange = (value: string) => {
+        // Force parent re-renders on keystrokes so inline slot/labels references
+        // churn exactly like the React inline-object regression scenario.
+        mirroredInput.value = value;
+      };
+      return { mirroredInput, handleInputChange };
+    },
+    template: withInlineLabels
+      ? `
+        <div>
+          <CopilotChat
+            :welcome-screen="false"
+            :labels="{ chatInputPlaceholder: 'Type here...' }"
+            @input-change="handleInputChange"
+          >
+            <template #assistant-message="slotProps">
+              <LabelConsumerAssistantMessage v-bind="slotProps" />
+            </template>
+          </CopilotChat>
+          <div data-testid="input-mirror">{{ mirroredInput }}</div>
+        </div>
+      `
+      : `
+        <div>
+          <CopilotChat
+            :welcome-screen="false"
+            @input-change="handleInputChange"
+          >
+            <template #assistant-message="slotProps">
+              <CountingAssistantMessage v-bind="slotProps" />
+            </template>
+          </CopilotChat>
+          <div data-testid="input-mirror">{{ mirroredInput }}</div>
+        </div>
+      `,
+  });
+}
+
+async function flushVueUpdates() {
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await nextTick();
+}
+
+async function submitAndReceiveAssistantMessage(
+  agent: MockStepwiseAgent,
+  messageId: string,
+) {
+  const input = await screen.findByRole("textbox");
+  await fireEvent.update(input, "hello");
+  await fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+  await waitFor(() => {
+    expect(screen.getByText("hello")).toBeDefined();
+  });
+
+  await agent.emit(runStartedEvent());
+  await agent.emit(textChunkEvent(messageId, "assistant reply"));
+  await agent.emit(runFinishedEvent());
+
+  await waitFor(() => {
+    expect(screen.getByTestId("counting-assistant")).toBeDefined();
+  });
+
+  await agent.complete();
+  await flushVueUpdates();
+}
+
+describe("FOR-75: messageView / labels props — no re-renders on input change", () => {
+  beforeEach(() => {
+    assistantRenderCount = 0;
+    labelConsumerRenderCount = 0;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("messageView inline object: completed messages do not re-render on keystroke", async () => {
+    const agent = new MockStepwiseAgent();
+    const Host = createChatHost({ withInlineLabels: false });
+    renderWithCopilotKit({ agent, children: Host });
+
+    await submitAndReceiveAssistantMessage(agent, "msg-rerender-1");
+
+    const renderCountAfterMessage = assistantRenderCount;
+    expect(renderCountAfterMessage).toBeGreaterThan(0);
+
+    const input = screen.getByRole("textbox");
+    await fireEvent.update(input, "a");
+    await fireEvent.update(input, "ab");
+    await fireEvent.update(input, "abc");
+    await flushVueUpdates();
+
+    expect(assistantRenderCount).toBe(renderCountAfterMessage);
+  });
+
+  it("labels inline object: context consumers do not re-render on keystroke", async () => {
+    const agent = new MockStepwiseAgent();
+    const Host = createChatHost({ withInlineLabels: true });
+    renderWithCopilotKit({ agent, children: Host });
+
+    await submitAndReceiveAssistantMessage(agent, "msg-rerender-labels-1");
+
+    const renderCountAfterMessage = labelConsumerRenderCount;
+    expect(renderCountAfterMessage).toBeGreaterThan(0);
+
+    const input = screen.getByRole("textbox");
+    await fireEvent.update(input, "a");
+    await fireEvent.update(input, "ab");
+    await fireEvent.update(input, "abc");
+    await flushVueUpdates();
+
+    expect(labelConsumerRenderCount).toBe(renderCountAfterMessage);
+  });
+});

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

@@ -0,0 +1,73 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import type { Message, ReasoningMessage } from "@ag-ui/core";
+import CopilotChatReasoningMessage from "../CopilotChatReasoningMessage.vue";
+
+describe("CopilotChatReasoningMessage", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-03-18T10:00:00Z"));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  function createReasoningMessage(content: string): ReasoningMessage {
+    return {
+      id: "reasoning-1",
+      role: "reasoning",
+      content,
+    } as ReasoningMessage;
+  }
+
+  it("shows 'Thinking…' when streaming and latest", () => {
+    const message = createReasoningMessage("Analyzing...");
+    const wrapper = mount(CopilotChatReasoningMessage, {
+      props: {
+        message,
+        messages: [message] as Message[],
+        isRunning: true,
+      },
+    });
+
+    expect(wrapper.text()).toContain("Thinking…");
+  });
+
+  it("switches to 'Thought for ...' when streaming ends", async () => {
+    const message = createReasoningMessage("Analyzing...");
+    const wrapper = mount(CopilotChatReasoningMessage, {
+      props: {
+        message,
+        messages: [message] as Message[],
+        isRunning: true,
+      },
+    });
+
+    vi.advanceTimersByTime(2100);
+    await wrapper.setProps({ isRunning: false });
+
+    expect(wrapper.text()).toMatch(/Thought for/);
+  });
+
+  it("auto-collapses after streaming and can be expanded by click", async () => {
+    const message = createReasoningMessage("Expandable content");
+    const wrapper = mount(CopilotChatReasoningMessage, {
+      props: {
+        message,
+        messages: [message] as Message[],
+        isRunning: true,
+      },
+    });
+
+    const headerButton = () => wrapper.get("button");
+
+    expect(headerButton().attributes("aria-expanded")).toBe("true");
+
+    await wrapper.setProps({ isRunning: false });
+    expect(headerButton().attributes("aria-expanded")).toBe("false");
+
+    await headerButton().trigger("click");
+    expect(headerButton().attributes("aria-expanded")).toBe("true");
+  });
+});

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

@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from "vitest";
+import { defineComponent } from "vue";
+import { mount } from "@vue/test-utils";
+import CopilotChatSuggestionPill from "../CopilotChatSuggestionPill.vue";
+
+describe("CopilotChatSuggestionPill", () => {
+  it("renders label content with button defaults", () => {
+    const wrapper = mount(CopilotChatSuggestionPill, {
+      slots: {
+        default: "Draft a project brief",
+      },
+    });
+
+    const button = wrapper.get(
+      "button[data-testid='copilot-chat-suggestion-pill']",
+    );
+    expect(button.attributes("type")).toBe("button");
+    expect(button.text()).toContain("Draft a project brief");
+    expect(button.attributes("disabled")).toBeUndefined();
+  });
+
+  it("shows loading state and disables interaction", () => {
+    const wrapper = mount(CopilotChatSuggestionPill, {
+      props: {
+        isLoading: true,
+      },
+      slots: {
+        default: "Loading suggestion",
+      },
+    });
+
+    const button = wrapper.get(
+      "button[data-testid='copilot-chat-suggestion-pill']",
+    );
+    expect(button.attributes("aria-busy")).toBe("true");
+    expect(button.attributes("disabled")).toBeDefined();
+    expect(wrapper.find(".cpk\\:animate-spin").exists()).toBe(true);
+  });
+
+  it("renders icon component when provided", () => {
+    const IconComponent = defineComponent({
+      template: `<svg data-testid="custom-icon" />`,
+    });
+
+    const wrapper = mount(CopilotChatSuggestionPill, {
+      props: {
+        icon: IconComponent,
+      },
+      slots: {
+        default: "With icon",
+      },
+    });
+
+    expect(wrapper.find("[data-testid='custom-icon']").exists()).toBe(true);
+  });
+
+  it("forwards click handlers via attrs", async () => {
+    const onClick = vi.fn();
+    const wrapper = mount(CopilotChatSuggestionPill, {
+      attrs: {
+        onClick,
+      },
+      slots: {
+        default: "Clickable",
+      },
+    });
+
+    await wrapper
+      .get("button[data-testid='copilot-chat-suggestion-pill']")
+      .trigger("click");
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});