@copilotkit/vue 1.57.1

package/src/v2/hooks/__tests__/use-suggestions.e2e.test.ts

@@ -0,0 +1,397 @@
+import { defineComponent, onUnmounted } from "vue";
+import { screen, fireEvent, waitFor, cleanup } from "@testing-library/vue";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { describe, it, expect, afterEach } from "vitest";
+import { renderWithCopilotKit } from "../../__tests__/utils/test-helpers";
+import { useSuggestions } from "../use-suggestions";
+import { useCopilotKit } from "../../providers/useCopilotKit";
+import { SuggestionsProviderAgent } from "../../__tests__/utils/agents";
+
+const TestHarness = defineComponent({
+  setup() {
+    const { suggestions, isLoading, reloadSuggestions, clearSuggestions } =
+      useSuggestions();
+    const { copilotkit } = useCopilotKit();
+
+    const configId = copilotkit.value.addSuggestionsConfig({
+      instructions: "Return deterministic suggestions",
+      providerAgentId: DEFAULT_AGENT_ID,
+      consumerAgentId: DEFAULT_AGENT_ID,
+      available: "always",
+    });
+
+    onUnmounted(() => {
+      copilotkit.value.removeSuggestionsConfig(configId);
+    });
+
+    const handleReload = () => {
+      reloadSuggestions();
+    };
+
+    const handleClear = () => {
+      clearSuggestions();
+    };
+
+    return {
+      suggestions,
+      isLoading,
+      handleReload,
+      handleClear,
+    };
+  },
+  template: `
+    <div>
+      <div data-testid="suggestions-count">{{ suggestions.length }}</div>
+      <div data-testid="suggestions-json">{{ JSON.stringify(suggestions) }}</div>
+      <div data-testid="suggestions-loading">{{ isLoading ? "loading" : "idle" }}</div>
+      <button data-testid="reload-suggestions" @click="handleReload">Reload</button>
+      <button data-testid="clear-suggestions" @click="handleClear">Clear</button>
+    </div>
+  `,
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("useSuggestions E2E", () => {
+  describe("Basic functionality", () => {
+    it("tracks suggestions stream and loading state", async () => {
+      const agent = new SuggestionsProviderAgent([
+        { title: "Option A", message: "Take path A", isLoading: false },
+        { title: "Option B", message: "Take path B", isLoading: false },
+      ]);
+
+      const ui = renderWithCopilotKit({
+        agent,
+        children: TestHarness,
+      });
+
+      expect(screen.getByTestId("suggestions-count").textContent).toBe("0");
+      expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+        "idle",
+      );
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "loading",
+        );
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("2");
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "idle",
+        );
+      });
+
+      expect(screen.getByTestId("suggestions-json").textContent).toContain(
+        "Option A",
+      );
+      expect(screen.getByTestId("suggestions-json").textContent).toContain(
+        "Option B",
+      );
+
+      await fireEvent.click(screen.getByTestId("clear-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("0");
+      });
+
+      expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+        "idle",
+      );
+
+      ui.unmount();
+    });
+
+    it("starts with no suggestions and idle state", () => {
+      const agent = new SuggestionsProviderAgent([]);
+
+      renderWithCopilotKit({
+        agent,
+        children: TestHarness,
+      });
+
+      expect(screen.getByTestId("suggestions-count").textContent).toBe("0");
+      expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+        "idle",
+      );
+      expect(screen.getByTestId("suggestions-json").textContent).toBe("[]");
+    });
+
+    it("handles single suggestion", async () => {
+      const agent = new SuggestionsProviderAgent([
+        { title: "Only Option", message: "The only way", isLoading: false },
+      ]);
+
+      renderWithCopilotKit({
+        agent,
+        children: TestHarness,
+      });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("1");
+      });
+
+      const json = screen.getByTestId("suggestions-json").textContent;
+      expect(json).toContain("Only Option");
+      expect(json).toContain("The only way");
+    });
+
+    it("handles many suggestions", async () => {
+      const agent = new SuggestionsProviderAgent([
+        { title: "Option 1", message: "First choice", isLoading: false },
+        { title: "Option 2", message: "Second choice", isLoading: false },
+        { title: "Option 3", message: "Third choice", isLoading: false },
+        { title: "Option 4", message: "Fourth choice", isLoading: false },
+        { title: "Option 5", message: "Fifth choice", isLoading: false },
+      ]);
+
+      renderWithCopilotKit({
+        agent,
+        children: TestHarness,
+      });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("5");
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "idle",
+        );
+      });
+    });
+  });
+
+  describe("Loading state transitions", () => {
+    it("transitions from idle -> loading -> idle correctly", async () => {
+      const agent = new SuggestionsProviderAgent([
+        { title: "Test", message: "Message", isLoading: false },
+      ]);
+
+      renderWithCopilotKit({ agent, children: TestHarness });
+
+      expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+        "idle",
+      );
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "loading",
+        );
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "idle",
+        );
+      });
+    });
+
+    it("stays in loading state during multiple reloads", async () => {
+      const agent = new SuggestionsProviderAgent([
+        { title: "Test", message: "Message", isLoading: false },
+      ]);
+
+      renderWithCopilotKit({ agent, children: TestHarness });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "loading",
+        );
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "idle",
+        );
+      });
+    });
+  });
+
+  describe("Clear functionality", () => {
+    it("clears suggestions immediately without loading state", async () => {
+      const agent = new SuggestionsProviderAgent([
+        { title: "Option A", message: "Message A", isLoading: false },
+        { title: "Option B", message: "Message B", isLoading: false },
+      ]);
+
+      renderWithCopilotKit({ agent, children: TestHarness });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("2");
+      });
+
+      await fireEvent.click(screen.getByTestId("clear-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("0");
+      });
+
+      expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+        "idle",
+      );
+    });
+
+    it("can clear suggestions while loading", async () => {
+      const agent = new SuggestionsProviderAgent([
+        { title: "Option A", message: "Message A", isLoading: false },
+      ]);
+
+      renderWithCopilotKit({ agent, children: TestHarness });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "loading",
+        );
+      });
+
+      await fireEvent.click(screen.getByTestId("clear-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("0");
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "idle",
+        );
+      });
+    });
+
+    it("clearing empty suggestions does not cause errors", async () => {
+      const agent = new SuggestionsProviderAgent([]);
+
+      renderWithCopilotKit({ agent, children: TestHarness });
+
+      expect(screen.getByTestId("suggestions-count").textContent).toBe("0");
+
+      await fireEvent.click(screen.getByTestId("clear-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("0");
+      });
+
+      expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+        "idle",
+      );
+    });
+  });
+
+  describe("Reload functionality", () => {
+    it("can reload to get fresh suggestions", async () => {
+      const agent = new SuggestionsProviderAgent([
+        { title: "Option A", message: "Message A", isLoading: false },
+      ]);
+
+      renderWithCopilotKit({ agent, children: TestHarness });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("1");
+      });
+
+      await fireEvent.click(screen.getByTestId("clear-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("0");
+      });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("1");
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "idle",
+        );
+      });
+    });
+
+    it("reload when already has suggestions replaces them", async () => {
+      const agent = new SuggestionsProviderAgent([
+        { title: "Option A", message: "Message A", isLoading: false },
+        { title: "Option B", message: "Message B", isLoading: false },
+      ]);
+
+      renderWithCopilotKit({ agent, children: TestHarness });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("2");
+      });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "loading",
+        );
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("2");
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "idle",
+        );
+      });
+    });
+  });
+
+  describe("Edge cases", () => {
+    it("handles empty suggestions from agent", async () => {
+      const agent = new SuggestionsProviderAgent([]);
+
+      renderWithCopilotKit({ agent, children: TestHarness });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-loading").textContent).toBe(
+          "idle",
+        );
+      });
+
+      expect(screen.getByTestId("suggestions-count").textContent).toBe("0");
+    });
+
+    it("handles suggestions with special characters", async () => {
+      const agent = new SuggestionsProviderAgent([
+        {
+          title: 'Option with "quotes"',
+          message: "Message with 'quotes'",
+          isLoading: false,
+        },
+        {
+          title: "Option with\nnewlines",
+          message: "Message\nwith\nnewlines",
+          isLoading: false,
+        },
+      ]);
+
+      renderWithCopilotKit({ agent, children: TestHarness });
+
+      await fireEvent.click(screen.getByTestId("reload-suggestions"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("suggestions-count").textContent).toBe("2");
+      });
+
+      const json = screen.getByTestId("suggestions-json").textContent;
+      expect(json).toContain("quotes");
+      expect(json).toContain("newlines");
+    });
+  });
+});

package/src/v2/hooks/__tests__/use-suggestions.test.ts

@@ -0,0 +1,198 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { defineComponent, h, nextTick } from "vue";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import type { AbstractAgent } from "@ag-ui/client";
+import { useSuggestions } from "../use-suggestions";
+import { useCopilotKit } from "../../providers/useCopilotKit";
+import { mountWithProvider } from "../../__tests__/utils/mount";
+import { SuggestionsProviderAgent } from "../../__tests__/utils/agents";
+
+describe("useSuggestions", () => {
+  beforeEach(() => {
+    console.warn = vi.fn();
+    console.error = vi.fn();
+  });
+
+  function makeHarness() {
+    return defineComponent({
+      setup() {
+        const { suggestions, isLoading, reloadSuggestions, clearSuggestions } =
+          useSuggestions();
+        const { copilotkit } = useCopilotKit();
+
+        const configId = copilotkit.value.addSuggestionsConfig({
+          instructions: "Return deterministic suggestions",
+          providerAgentId: DEFAULT_AGENT_ID,
+          consumerAgentId: DEFAULT_AGENT_ID,
+          available: "always",
+        });
+
+        const reload = () => reloadSuggestions();
+        const clear = () => clearSuggestions();
+
+        return () =>
+          h("div", [
+            h(
+              "span",
+              { "data-testid": "count" },
+              String(suggestions.value.length),
+            ),
+            h(
+              "span",
+              { "data-testid": "loading" },
+              isLoading.value ? "loading" : "idle",
+            ),
+            h(
+              "span",
+              { "data-testid": "json" },
+              JSON.stringify(suggestions.value),
+            ),
+            h("button", { "data-testid": "reload", onClick: reload }, "reload"),
+            h("button", { "data-testid": "clear", onClick: clear }, "clear"),
+            h(
+              "button",
+              {
+                "data-testid": "remove-config",
+                onClick: () =>
+                  copilotkit.value.removeSuggestionsConfig(configId),
+              },
+              "remove",
+            ),
+          ]);
+      },
+    });
+  }
+
+  it("starts empty and idle", () => {
+    const agent = new SuggestionsProviderAgent([], DEFAULT_AGENT_ID);
+    const Harness = makeHarness();
+
+    const { wrapper } = mountWithProvider(() => h(Harness), {
+      agents__unsafe_dev_only: {
+        [DEFAULT_AGENT_ID]: agent as unknown as AbstractAgent,
+      },
+    });
+
+    expect(wrapper.find("[data-testid=count]").text()).toBe("0");
+    expect(wrapper.find("[data-testid=loading]").text()).toBe("idle");
+  });
+
+  it("tracks loading lifecycle on reload", async () => {
+    const agent = new SuggestionsProviderAgent(
+      [
+        { title: "Option A", message: "Take path A", isLoading: false },
+        { title: "Option B", message: "Take path B", isLoading: false },
+      ],
+      DEFAULT_AGENT_ID,
+    );
+    const Harness = makeHarness();
+
+    const { wrapper } = mountWithProvider(() => h(Harness), {
+      agents__unsafe_dev_only: {
+        [DEFAULT_AGENT_ID]: agent as unknown as AbstractAgent,
+      },
+    });
+
+    await wrapper.find("[data-testid=reload]").trigger("click");
+    await nextTick();
+    expect(wrapper.find("[data-testid=loading]").text()).toBe("loading");
+
+    await nextTick();
+    await nextTick();
+    expect(wrapper.find("[data-testid=loading]").text()).toBe("idle");
+    expect(wrapper.find("[data-testid=count]").text()).toBe("2");
+    expect(wrapper.find("[data-testid=json]").text()).toContain("Option A");
+    expect(wrapper.find("[data-testid=json]").text()).toContain("Option B");
+  });
+
+  it("clears suggestions immediately and stays idle", async () => {
+    const agent = new SuggestionsProviderAgent(
+      [{ title: "Option A", message: "Take path A", isLoading: false }],
+      DEFAULT_AGENT_ID,
+    );
+    const Harness = makeHarness();
+
+    const { wrapper } = mountWithProvider(() => h(Harness), {
+      agents__unsafe_dev_only: {
+        [DEFAULT_AGENT_ID]: agent as unknown as AbstractAgent,
+      },
+    });
+
+    await wrapper.find("[data-testid=reload]").trigger("click");
+    await nextTick();
+    await nextTick();
+
+    expect(wrapper.find("[data-testid=count]").text()).toBe("1");
+
+    await wrapper.find("[data-testid=clear]").trigger("click");
+    await nextTick();
+
+    expect(wrapper.find("[data-testid=count]").text()).toBe("0");
+    expect(wrapper.find("[data-testid=loading]").text()).toBe("idle");
+  });
+
+  it("supports reload after clear and special characters", async () => {
+    const agent = new SuggestionsProviderAgent(
+      [
+        {
+          title: 'Option with "quotes"',
+          message: "Message with 'quotes'",
+          isLoading: false,
+        },
+        {
+          title: "Option with\nnewlines",
+          message: "Message\nwith\nnewlines",
+          isLoading: false,
+        },
+      ],
+      DEFAULT_AGENT_ID,
+    );
+    const Harness = makeHarness();
+
+    const { wrapper } = mountWithProvider(() => h(Harness), {
+      agents__unsafe_dev_only: {
+        [DEFAULT_AGENT_ID]: agent as unknown as AbstractAgent,
+      },
+    });
+
+    await wrapper.find("[data-testid=reload]").trigger("click");
+    await nextTick();
+    await nextTick();
+
+    expect(wrapper.find("[data-testid=count]").text()).toBe("2");
+    expect(wrapper.find("[data-testid=json]").text()).toContain("quotes");
+    expect(wrapper.find("[data-testid=json]").text()).toContain("newlines");
+
+    await wrapper.find("[data-testid=clear]").trigger("click");
+    await nextTick();
+    expect(wrapper.find("[data-testid=count]").text()).toBe("0");
+
+    await wrapper.find("[data-testid=reload]").trigger("click");
+    await nextTick();
+    await nextTick();
+    expect(wrapper.find("[data-testid=count]").text()).toBe("2");
+  });
+
+  it("handles multiple reload requests without leaving loading state stuck", async () => {
+    const agent = new SuggestionsProviderAgent(
+      [{ title: "Option", message: "Message", isLoading: false }],
+      DEFAULT_AGENT_ID,
+    );
+    const Harness = makeHarness();
+
+    const { wrapper } = mountWithProvider(() => h(Harness), {
+      agents__unsafe_dev_only: {
+        [DEFAULT_AGENT_ID]: agent as unknown as AbstractAgent,
+      },
+    });
+
+    await wrapper.find("[data-testid=reload]").trigger("click");
+    await wrapper.find("[data-testid=reload]").trigger("click");
+    await nextTick();
+
+    expect(wrapper.find("[data-testid=loading]").text()).toBe("loading");
+    await nextTick();
+    await nextTick();
+    expect(wrapper.find("[data-testid=loading]").text()).toBe("idle");
+  });
+});