@copilotkit/vue 1.57.1

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

@@ -0,0 +1,337 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { h, nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+import type { UserMessage } from "@ag-ui/core";
+import { CopilotChatDefaultLabels } from "../../../providers/types";
+import CopilotChatUserMessage from "../CopilotChatUserMessage.vue";
+
+describe("CopilotChatUserMessage", () => {
+  let originalClipboard: Clipboard | undefined;
+  const mockWriteText = vi.fn();
+
+  beforeEach(() => {
+    originalClipboard = navigator.clipboard;
+    mockWriteText.mockReset();
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText: mockWriteText.mockResolvedValue(undefined) },
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(navigator, "clipboard", {
+      value: originalClipboard,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  it("renders flattened text content from structured message parts", () => {
+    const message = {
+      id: "user-1",
+      role: "user",
+      timestamp: new Date(),
+      content: [
+        { type: "text", text: "Line one" },
+        { type: "tool-call", id: "ignore" },
+        { type: "text", text: "Line two" },
+      ],
+    } as unknown as UserMessage;
+
+    const wrapper = mount(CopilotChatUserMessage, {
+      props: {
+        message,
+      },
+    });
+
+    expect(wrapper.text()).toContain("Line one");
+    expect(wrapper.text()).toContain("Line two");
+    expect(wrapper.text()).not.toContain("ignore");
+  });
+
+  it("emits edit-message exactly once when edit button is clicked", async () => {
+    const onEditMessage = vi.fn();
+    const message: UserMessage = {
+      id: "user-2",
+      role: "user",
+      timestamp: new Date(),
+      content: "Can you edit this?",
+    };
+
+    const wrapper = mount(CopilotChatUserMessage, {
+      props: {
+        message,
+        onEditMessage,
+      },
+    });
+
+    const editButton = wrapper.find(
+      `[aria-label="${CopilotChatDefaultLabels.userMessageToolbarEditMessageLabel}"]`,
+    );
+    expect(editButton.exists()).toBe(true);
+
+    await editButton.trigger("click");
+
+    expect(onEditMessage).toHaveBeenCalledTimes(1);
+    expect(onEditMessage).toHaveBeenCalledWith({ message });
+    expect(wrapper.emitted("edit-message")?.[0]).toEqual([{ message }]);
+  });
+
+  it("hides edit button when edit callback is not provided", () => {
+    const message: UserMessage = {
+      id: "user-3",
+      role: "user",
+      timestamp: new Date(),
+      content: "No edit action",
+    };
+
+    const wrapper = mount(CopilotChatUserMessage, {
+      props: {
+        message,
+      },
+    });
+
+    expect(
+      wrapper
+        .find(
+          `[aria-label="${CopilotChatDefaultLabels.userMessageToolbarEditMessageLabel}"]`,
+        )
+        .exists(),
+    ).toBe(false);
+  });
+
+  it("renders branch navigation and emits switch payload exactly once", async () => {
+    const onSwitchToBranch = vi.fn();
+    const message: UserMessage = {
+      id: "user-4",
+      role: "user",
+      timestamp: new Date(),
+      content: "Branch message",
+    };
+
+    const wrapper = mount(CopilotChatUserMessage, {
+      props: {
+        message,
+        branchIndex: 1,
+        numberOfBranches: 3,
+        onSwitchToBranch,
+      },
+    });
+
+    expect(wrapper.text()).toContain("2/3");
+
+    const nextButton = wrapper.find('[aria-label="Next branch"]');
+    await nextButton.trigger("click");
+
+    expect(onSwitchToBranch).toHaveBeenCalledTimes(1);
+    expect(onSwitchToBranch).toHaveBeenCalledWith({
+      branchIndex: 2,
+      numberOfBranches: 3,
+      message,
+    });
+    expect(wrapper.emitted("switch-to-branch")?.[0]).toEqual([
+      {
+        branchIndex: 2,
+        numberOfBranches: 3,
+        message,
+      },
+    ]);
+  });
+
+  it("disables unavailable branch navigation controls", () => {
+    const message: UserMessage = {
+      id: "user-5",
+      role: "user",
+      timestamp: new Date(),
+      content: "First branch",
+    };
+
+    const wrapper = mount(CopilotChatUserMessage, {
+      props: {
+        message,
+        branchIndex: 0,
+        numberOfBranches: 2,
+        onSwitchToBranch: vi.fn(),
+      },
+    });
+
+    expect(
+      wrapper.find('[aria-label="Previous branch"]').attributes("disabled"),
+    ).toBeDefined();
+    expect(
+      wrapper.find('[aria-label="Next branch"]').attributes("disabled"),
+    ).toBeUndefined();
+  });
+
+  it("supports custom message-renderer slot", () => {
+    const message: UserMessage = {
+      id: "user-6",
+      role: "user",
+      timestamp: new Date(),
+      content: "Custom slot message",
+    };
+
+    const wrapper = mount(CopilotChatUserMessage, {
+      props: { message },
+      slots: {
+        "message-renderer": ({ content }: { content: string }) =>
+          h(
+            "div",
+            { "data-testid": "custom-message-renderer" },
+            `slot:${content}`,
+          ),
+      },
+    });
+
+    expect(wrapper.find("[data-testid='custom-message-renderer']").text()).toBe(
+      "slot:Custom slot message",
+    );
+  });
+
+  it("supports custom copy/edit/branch slots and forwards handlers", async () => {
+    const onEditMessage = vi.fn();
+    const onSwitchToBranch = vi.fn();
+    const message: UserMessage = {
+      id: "user-7",
+      role: "user",
+      timestamp: new Date(),
+      content: "Custom controls",
+    };
+
+    const wrapper = mount(CopilotChatUserMessage, {
+      props: {
+        message,
+        onEditMessage,
+        onSwitchToBranch,
+        branchIndex: 1,
+        numberOfBranches: 3,
+      },
+      slots: {
+        "copy-button": ({
+          onCopy,
+          copied,
+        }: {
+          onCopy: () => Promise<void>;
+          copied: boolean;
+        }) =>
+          h(
+            "button",
+            { "data-testid": "custom-copy-button", onClick: onCopy },
+            copied ? "copied" : "copy",
+          ),
+        "edit-button": ({ onEdit }: { onEdit: () => void }) =>
+          h(
+            "button",
+            { "data-testid": "custom-edit-button", onClick: onEdit },
+            "edit",
+          ),
+        "branch-navigation": ({ goNext }: { goNext: () => void }) =>
+          h(
+            "button",
+            { "data-testid": "custom-branch-next", onClick: goNext },
+            "next",
+          ),
+      },
+    });
+
+    await wrapper.get("[data-testid='custom-copy-button']").trigger("click");
+    await nextTick();
+    expect(wrapper.get("[data-testid='custom-copy-button']").text()).toBe(
+      "copied",
+    );
+
+    await wrapper.get("[data-testid='custom-edit-button']").trigger("click");
+    expect(onEditMessage).toHaveBeenCalledTimes(1);
+    expect(onEditMessage).toHaveBeenCalledWith({ message });
+
+    await wrapper.get("[data-testid='custom-branch-next']").trigger("click");
+    expect(onSwitchToBranch).toHaveBeenCalledTimes(1);
+    expect(onSwitchToBranch).toHaveBeenCalledWith({
+      branchIndex: 2,
+      numberOfBranches: 3,
+      message,
+    });
+  });
+
+  it("supports custom layout slot with all control callbacks", async () => {
+    const onEditMessage = vi.fn();
+    const onSwitchToBranch = vi.fn();
+    const message: UserMessage = {
+      id: "user-8",
+      role: "user",
+      timestamp: new Date(),
+      content: "Layout slot content",
+    };
+
+    const wrapper = mount(CopilotChatUserMessage, {
+      props: {
+        message,
+        onEditMessage,
+        onSwitchToBranch,
+        branchIndex: 0,
+        numberOfBranches: 2,
+      },
+      slots: {
+        layout: ({
+          content,
+          onCopy,
+          onEdit,
+          goNext,
+          hasEditAction,
+          showBranchNavigation,
+        }: {
+          content: string;
+          onCopy: () => Promise<void>;
+          onEdit: () => void;
+          goNext: () => void;
+          hasEditAction: boolean;
+          showBranchNavigation: boolean;
+        }) =>
+          h("div", { "data-testid": "custom-layout" }, [
+            h("div", { "data-testid": "layout-content" }, content),
+            h(
+              "div",
+              { "data-testid": "layout-flags" },
+              `${hasEditAction}:${showBranchNavigation}`,
+            ),
+            h(
+              "button",
+              { "data-testid": "layout-copy", onClick: onCopy },
+              "copy",
+            ),
+            h(
+              "button",
+              { "data-testid": "layout-edit", onClick: onEdit },
+              "edit",
+            ),
+            h(
+              "button",
+              { "data-testid": "layout-next", onClick: goNext },
+              "next",
+            ),
+          ]),
+      },
+    });
+
+    expect(wrapper.get("[data-testid='layout-content']").text()).toBe(
+      "Layout slot content",
+    );
+    expect(wrapper.get("[data-testid='layout-flags']").text()).toBe(
+      "true:true",
+    );
+
+    await wrapper.get("[data-testid='layout-copy']").trigger("click");
+    await wrapper.get("[data-testid='layout-edit']").trigger("click");
+    await wrapper.get("[data-testid='layout-next']").trigger("click");
+
+    expect(onEditMessage).toHaveBeenCalledTimes(1);
+    expect(onEditMessage).toHaveBeenCalledWith({ message });
+    expect(onSwitchToBranch).toHaveBeenCalledTimes(1);
+    expect(onSwitchToBranch).toHaveBeenCalledWith({
+      branchIndex: 1,
+      numberOfBranches: 2,
+      message,
+    });
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatView.connectingGate.test.ts

@@ -0,0 +1,135 @@
+import { describe, expect, it } from "vitest";
+import { h } from "vue";
+import { mount } from "@vue/test-utils";
+import type { Suggestion } from "@copilotkit/core";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatView from "../CopilotChatView.vue";
+
+const suggestions: Suggestion[] = [
+  { title: "Summarize", message: "Summarize this chat", isLoading: false },
+  { title: "Next steps", message: "List next steps", isLoading: false },
+];
+
+// Minimal provider wrapper. No agent registry is required because these tests
+// only exercise CopilotChatView's local render decisions (welcome-screen
+// suppression and suggestion gating) that don't touch the agent runtime.
+function mountChatView(props: Record<string, unknown> = {}) {
+  return mount(CopilotKitProvider, {
+    props: {
+      runtimeUrl: "/api/copilotkit",
+    },
+    slots: {
+      default: () =>
+        h(
+          CopilotChatConfigurationProvider,
+          { threadId: "test-thread" },
+          {
+            default: () => h(CopilotChatView, props),
+          },
+        ),
+    },
+  });
+}
+
+describe("CopilotChatView connect-gating", () => {
+  // Welcome-screen suppression --------------------------------------------
+
+  it("suppresses the welcome screen while isConnecting=true", () => {
+    // Switching threads would otherwise flash the welcome greeting before
+    // bootstrap messages arrive.
+    const wrapper = mountChatView({ messages: [], isConnecting: true });
+
+    expect(
+      wrapper.find("[data-testid='copilot-chat-view-welcome-screen']").exists(),
+    ).toBe(false);
+  });
+
+  it("suppresses the welcome screen when hasExplicitThreadId=true", () => {
+    // A caller-managed thread (threadId prop / config provider) should never
+    // display the generic "start a new chat" welcome — even when the thread
+    // has no messages yet.
+    const wrapper = mountChatView({
+      messages: [],
+      hasExplicitThreadId: true,
+    });
+
+    expect(
+      wrapper.find("[data-testid='copilot-chat-view-welcome-screen']").exists(),
+    ).toBe(false);
+  });
+
+  it("shows the welcome screen by default for a fresh empty chat", () => {
+    // Positive control: with no explicit thread and no connect in flight,
+    // an empty chat should still render the welcome screen.
+    const wrapper = mountChatView({ messages: [] });
+
+    expect(
+      wrapper.find("[data-testid='copilot-chat-view-welcome-screen']").exists(),
+    ).toBe(true);
+  });
+
+  // Suggestion gating -----------------------------------------------------
+
+  it("hides suggestions while isConnecting=true", () => {
+    // Mid-bootstrap, the message tree is still assembling — rendering
+    // suggestions against it would visibly snap once the final text chunk
+    // lands.
+    const wrapper = mountChatView({
+      messages: [
+        {
+          id: "user-1",
+          role: "user",
+          content: "Hi",
+          timestamp: new Date(),
+        },
+      ],
+      suggestions,
+      isConnecting: true,
+    });
+
+    expect(
+      wrapper.findAll("[data-testid='copilot-chat-suggestion-pill']"),
+    ).toHaveLength(0);
+  });
+
+  it("hides suggestions while isRunning=true", () => {
+    // Mid-run, the assistant's reply is still streaming — suggestions
+    // would render against an in-flight message and reflow as deltas land.
+    const wrapper = mountChatView({
+      messages: [
+        {
+          id: "user-1",
+          role: "user",
+          content: "Hi",
+          timestamp: new Date(),
+        },
+      ],
+      suggestions,
+      isRunning: true,
+    });
+
+    expect(
+      wrapper.findAll("[data-testid='copilot-chat-suggestion-pill']"),
+    ).toHaveLength(0);
+  });
+
+  it("renders suggestions once isConnecting and isRunning are both false", () => {
+    // Positive control: with the gates open, the suggestion pills appear.
+    const wrapper = mountChatView({
+      messages: [
+        {
+          id: "user-1",
+          role: "user",
+          content: "Hi",
+          timestamp: new Date(),
+        },
+      ],
+      suggestions,
+    });
+
+    expect(
+      wrapper.findAll("[data-testid='copilot-chat-suggestion-pill']"),
+    ).toHaveLength(suggestions.length);
+  });
+});