@copilotkit/vue 1.57.1

package/src/v2/components/icons/__tests__/icons.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import {
+  IconArrowUp,
+  IconCheck,
+  IconCheckCircle,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconCircle,
+  IconCopy,
+  IconEdit,
+  IconLoader2,
+  IconMessageCircle,
+  IconMic,
+  IconPlus,
+  IconRefreshCw,
+  IconSquare,
+  IconThumbsDown,
+  IconThumbsUp,
+  IconVolume2,
+  IconX,
+} from "../index";
+
+describe("icons adapter", () => {
+  it("exports all expected icon aliases", () => {
+    const icons = [
+      IconMessageCircle,
+      IconX,
+      IconChevronDown,
+      IconPlus,
+      IconMic,
+      IconArrowUp,
+      IconCheck,
+      IconSquare,
+      IconLoader2,
+      IconCopy,
+      IconEdit,
+      IconChevronLeft,
+      IconChevronRight,
+      IconThumbsUp,
+      IconThumbsDown,
+      IconVolume2,
+      IconRefreshCw,
+      IconCheckCircle,
+      IconCircle,
+    ];
+
+    for (const icon of icons) {
+      expect(icon).toBeDefined();
+    }
+  });
+
+  it("renders svg icons from aliases", () => {
+    const xWrapper = mount(IconX);
+    const loaderWrapper = mount(IconLoader2);
+
+    expect(xWrapper.find("svg").exists()).toBe(true);
+    expect(loaderWrapper.find("svg").exists()).toBe(true);
+  });
+
+  it("passes through classes, size, style, and accessibility attributes", () => {
+    const wrapper = mount(IconX, {
+      attrs: {
+        class: "icon-class",
+        width: "18",
+        height: "20",
+        "stroke-width": "1.5",
+        role: "img",
+        "aria-hidden": "true",
+        style: "color: rgb(255, 0, 0);",
+      },
+    });
+
+    const svg = wrapper.find("svg");
+
+    expect(svg.exists()).toBe(true);
+    expect(svg.classes()).toContain("icon-class");
+    expect(svg.attributes("width")).toBe("18");
+    expect(svg.attributes("height")).toBe("20");
+    expect(svg.attributes("stroke-width")).toBe("1.5");
+    expect(svg.attributes("role")).toBe("img");
+    expect(svg.attributes("aria-hidden")).toBe("true");
+    expect(svg.attributes("style")).toContain("color");
+  });
+});

package/src/v2/components/icons/index.ts

@@ -0,0 +1,22 @@
+export {
+  MessageCircle as IconMessageCircle,
+  X as IconX,
+  ChevronDown as IconChevronDown,
+  Plus as IconPlus,
+  Mic as IconMic,
+  ArrowUp as IconArrowUp,
+  Check as IconCheck,
+  Square as IconSquare,
+  Loader2 as IconLoader2,
+  Copy as IconCopy,
+  Download as IconDownload,
+  Edit as IconEdit,
+  ChevronLeft as IconChevronLeft,
+  ChevronRight as IconChevronRight,
+  ThumbsUp as IconThumbsUp,
+  ThumbsDown as IconThumbsDown,
+  Volume2 as IconVolume2,
+  RefreshCw as IconRefreshCw,
+  CheckCircle as IconCheckCircle,
+  Circle as IconCircle,
+} from "lucide-vue-next";

package/src/v2/components/index.ts

@@ -0,0 +1,7 @@
+export { default as CopilotKitInspector } from "./CopilotKitInspector.vue";
+export * from "./MCPAppsActivityRenderer";
+export { default as A2UISurfaceActivityRenderer } from "./A2UISurfaceActivityRenderer.vue";
+export * from "./A2UIMessageRenderer";
+export * from "./OpenGenerativeUIRenderer";
+export * from "./a2ui";
+export * from "./chat";

package/src/v2/hooks/__tests__/standard-schema-types.test.ts

@@ -0,0 +1,149 @@
+import { describe, it, expectTypeOf } from "vitest";
+import { z } from "zod";
+import * as v from "valibot";
+import { type } from "arktype";
+import type { StandardSchemaV1, InferSchemaOutput } from "@copilotkit/shared";
+import type {
+  RenderToolProps,
+  RenderToolInProgressProps,
+  RenderToolExecutingProps,
+  RenderToolCompleteProps,
+} from "../use-render-tool";
+import type { VueToolCallRenderer } from "../../types/vue-tool-call-renderer";
+
+describe("RenderToolProps type inference", () => {
+  describe("with Zod schemas", () => {
+    type ZodSchema = z.ZodObject<{
+      query: z.ZodString;
+      limit: z.ZodOptional<z.ZodNumber>;
+    }>;
+
+    it("RenderToolInProgressProps has Partial parameters", () => {
+      expectTypeOf<
+        RenderToolInProgressProps<ZodSchema>["parameters"]
+      >().toEqualTypeOf<
+        Partial<{ query: string; limit?: number | undefined }>
+      >();
+      expectTypeOf<
+        RenderToolInProgressProps<ZodSchema>["toolCallId"]
+      >().toBeString();
+    });
+
+    it("RenderToolExecutingProps has full parameters", () => {
+      expectTypeOf<
+        RenderToolExecutingProps<ZodSchema>["parameters"]
+      >().toEqualTypeOf<{ query: string; limit?: number | undefined }>();
+      expectTypeOf<
+        RenderToolExecutingProps<ZodSchema>["toolCallId"]
+      >().toBeString();
+    });
+
+    it("RenderToolCompleteProps has full parameters and string result", () => {
+      type Complete = RenderToolCompleteProps<ZodSchema>;
+      expectTypeOf<Complete["parameters"]>().toEqualTypeOf<{
+        query: string;
+        limit?: number | undefined;
+      }>();
+      expectTypeOf<Complete["result"]>().toBeString();
+      expectTypeOf<Complete["status"]>().toEqualTypeOf<"complete">();
+      expectTypeOf<Complete["toolCallId"]>().toBeString();
+    });
+
+    it("RenderToolProps is a discriminated union", () => {
+      type Props = RenderToolProps<ZodSchema>;
+      expectTypeOf<Props>().toMatchTypeOf<{
+        name: string;
+        toolCallId: string;
+      }>();
+    });
+  });
+
+  describe("with Valibot schemas", () => {
+    it("infers Partial parameters for inProgress", () => {
+      const schema = v.object({
+        city: v.string(),
+        temp: v.number(),
+      });
+      type S = typeof schema;
+
+      expectTypeOf<RenderToolInProgressProps<S>["parameters"]>().toEqualTypeOf<
+        Partial<{ city: string; temp: number }>
+      >();
+    });
+
+    it("infers full parameters for executing", () => {
+      const schema = v.object({
+        city: v.string(),
+      });
+      type S = typeof schema;
+
+      expectTypeOf<RenderToolExecutingProps<S>["parameters"]>().toEqualTypeOf<{
+        city: string;
+      }>();
+    });
+  });
+
+  describe("with ArkType schemas", () => {
+    it("infers Partial parameters for inProgress", () => {
+      const schema = type({
+        query: "string",
+        limit: "number",
+      });
+      type S = typeof schema;
+
+      expectTypeOf<RenderToolInProgressProps<S>["parameters"]>().toEqualTypeOf<
+        Partial<{ query: string; limit: number }>
+      >();
+    });
+
+    it("infers full parameters for complete", () => {
+      const schema = type({
+        query: "string",
+      });
+      type S = typeof schema;
+
+      expectTypeOf<RenderToolCompleteProps<S>["parameters"]>().toEqualTypeOf<{
+        query: string;
+      }>();
+    });
+  });
+});
+
+describe("VueToolCallRenderer type inference", () => {
+  it("args field accepts a StandardSchemaV1", () => {
+    expectTypeOf<VueToolCallRenderer<{ x: number }>["args"]>().toMatchTypeOf<
+      StandardSchemaV1<any, { x: number }>
+    >();
+  });
+});
+
+describe("useComponent type inference", () => {
+  it("InferRenderProps extracts output from StandardSchemaV1", () => {
+    type InferRenderProps<T> = T extends StandardSchemaV1
+      ? InferSchemaOutput<T>
+      : any;
+
+    const zodSchema = z.object({ city: z.string() });
+    expectTypeOf<InferRenderProps<typeof zodSchema>>().toEqualTypeOf<{
+      city: string;
+    }>();
+
+    const valibotSchema = v.object({ query: v.string() });
+    expectTypeOf<InferRenderProps<typeof valibotSchema>>().toEqualTypeOf<{
+      query: string;
+    }>();
+
+    const arktypeSchema = type({ id: "string" });
+    expectTypeOf<InferRenderProps<typeof arktypeSchema>>().toEqualTypeOf<{
+      id: string;
+    }>();
+  });
+
+  it("InferRenderProps returns any for undefined", () => {
+    type InferRenderProps<T> = T extends StandardSchemaV1
+      ? InferSchemaOutput<T>
+      : any;
+
+    expectTypeOf<InferRenderProps<undefined>>().toBeAny();
+  });
+});

package/src/v2/hooks/__tests__/standard-schema.test.ts

@@ -0,0 +1,315 @@
+import { render } from "@testing-library/vue";
+import { defineComponent } from "vue";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { z } from "zod";
+import * as v from "valibot";
+import { type } from "arktype";
+import { useRenderTool } from "../use-render-tool";
+import { useComponent } from "../use-component";
+import { useCopilotKit } from "../../providers/useCopilotKit";
+import { useFrontendTool } from "../use-frontend-tool";
+import type { VueToolCallRenderer } from "../../types/vue-tool-call-renderer";
+import type { StandardSchemaV1 } from "@copilotkit/shared";
+
+vi.mock("../../providers/useCopilotKit", () => ({
+  useCopilotKit: vi.fn(),
+}));
+
+vi.mock("../use-frontend-tool", () => ({
+  useFrontendTool: vi.fn(),
+}));
+
+type MockCore = {
+  renderToolCalls: VueToolCallRenderer[];
+  setRenderToolCalls: ReturnType<typeof vi.fn>;
+  addHookRenderToolCall: ReturnType<typeof vi.fn>;
+  removeHookRenderToolCall: ReturnType<typeof vi.fn>;
+};
+
+const mockUseCopilotKit = useCopilotKit as ReturnType<typeof vi.fn>;
+const mockUseFrontendTool = useFrontendTool as ReturnType<typeof vi.fn>;
+
+function createMockCore(
+  initialRenderToolCalls: VueToolCallRenderer[] = [],
+): MockCore {
+  const hookEntries = new Map<string, VueToolCallRenderer>();
+  const core: MockCore = {
+    renderToolCalls: initialRenderToolCalls,
+    setRenderToolCalls: vi.fn((next: VueToolCallRenderer[]) => {
+      core.renderToolCalls = next;
+    }),
+    addHookRenderToolCall: vi.fn((entry: VueToolCallRenderer) => {
+      const key = `${entry.agentId ?? ""}:${entry.name}`;
+      hookEntries.set(key, entry);
+      core.renderToolCalls = [
+        ...initialRenderToolCalls,
+        ...hookEntries.values(),
+      ];
+    }),
+    removeHookRenderToolCall: vi.fn(),
+  };
+
+  return core;
+}
+
+describe("useRenderTool with Standard Schema", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Zod schemas (existing behavior)", () => {
+    it("registers a renderer with a Zod schema", () => {
+      const core = createMockCore();
+      mockUseCopilotKit.mockReturnValue({ copilotkit: { value: core } });
+
+      const schema = z.object({ query: z.string() });
+
+      const Harness = defineComponent({
+        setup() {
+          useRenderTool(
+            {
+              name: "search",
+              parameters: schema,
+              render: () => "render",
+            },
+            [],
+          );
+          return {};
+        },
+        template: `<div />`,
+      });
+
+      render(Harness);
+
+      expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(1);
+      const renderer = core.renderToolCalls.find(
+        (item) => item.name === "search",
+      );
+      expect(renderer).toBeDefined();
+      expect(renderer?.args).toBe(schema);
+    });
+  });
+
+  describe("Valibot schemas", () => {
+    it("registers a renderer with a Valibot schema", () => {
+      const core = createMockCore();
+      mockUseCopilotKit.mockReturnValue({ copilotkit: { value: core } });
+
+      const schema = v.object({ query: v.string() });
+
+      const Harness = defineComponent({
+        setup() {
+          useRenderTool(
+            {
+              name: "searchValibot",
+              parameters: schema as unknown as StandardSchemaV1<
+                any,
+                { query: string }
+              >,
+              render: () => "valibot render",
+            },
+            [],
+          );
+          return {};
+        },
+        template: `<div />`,
+      });
+
+      render(Harness);
+
+      expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(1);
+      const renderer = core.renderToolCalls.find(
+        (item) => item.name === "searchValibot",
+      );
+      expect(renderer).toBeDefined();
+      expect(renderer?.args["~standard"].vendor).toBe("valibot");
+    });
+  });
+
+  describe("ArkType schemas", () => {
+    it("registers a renderer with an ArkType schema", () => {
+      const core = createMockCore();
+      mockUseCopilotKit.mockReturnValue({ copilotkit: { value: core } });
+
+      const schema = type({ query: "string" });
+
+      const Harness = defineComponent({
+        setup() {
+          useRenderTool(
+            {
+              name: "searchArktype",
+              parameters: schema as unknown as StandardSchemaV1<
+                any,
+                { query: string }
+              >,
+              render: () => "arktype render",
+            },
+            [],
+          );
+          return {};
+        },
+        template: `<div />`,
+      });
+
+      render(Harness);
+
+      expect(core.addHookRenderToolCall).toHaveBeenCalledTimes(1);
+      const renderer = core.renderToolCalls.find(
+        (item) => item.name === "searchArktype",
+      );
+      expect(renderer).toBeDefined();
+      expect(renderer?.args["~standard"].vendor).toBe("arktype");
+    });
+  });
+
+  describe("Mixed schemas in the same registry", () => {
+    it("registers renderers with Zod, Valibot, and ArkType schemas", () => {
+      const core = createMockCore();
+      mockUseCopilotKit.mockReturnValue({ copilotkit: { value: core } });
+
+      const ZodHarness = defineComponent({
+        setup() {
+          useRenderTool(
+            {
+              name: "zodRenderer",
+              parameters: z.object({ a: z.string() }),
+              render: () => "zod",
+            },
+            [],
+          );
+          return {};
+        },
+        template: `<div />`,
+      });
+
+      const ValibotHarness = defineComponent({
+        setup() {
+          useRenderTool(
+            {
+              name: "valibotRenderer",
+              parameters: v.object({
+                b: v.string(),
+              }) as unknown as StandardSchemaV1<any, { b: string }>,
+              render: () => "valibot",
+            },
+            [],
+          );
+          return {};
+        },
+        template: `<div />`,
+      });
+
+      const ArktypeHarness = defineComponent({
+        setup() {
+          useRenderTool(
+            {
+              name: "arktypeRenderer",
+              parameters: type({
+                c: "string",
+              }) as unknown as StandardSchemaV1<any, { c: string }>,
+              render: () => "arktype",
+            },
+            [],
+          );
+          return {};
+        },
+        template: `<div />`,
+      });
+
+      render(
+        defineComponent({
+          components: {
+            ZodHarness,
+            ValibotHarness,
+            ArktypeHarness,
+          },
+          template: `<div><ZodHarness /><ValibotHarness /><ArktypeHarness /></div>`,
+        }),
+      );
+
+      expect(core.renderToolCalls).toHaveLength(3);
+      const names = core.renderToolCalls.map((r) => r.name);
+      expect(names).toContain("zodRenderer");
+      expect(names).toContain("valibotRenderer");
+      expect(names).toContain("arktypeRenderer");
+    });
+  });
+});
+
+describe("useComponent with Standard Schema", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("registers a component with a Valibot schema", () => {
+    const DemoComponent = defineComponent({
+      props: {
+        city: { type: String, required: true },
+      },
+      template: `<div>{{ city }}</div>`,
+    });
+
+    const schema = v.object({
+      city: v.string(),
+    });
+
+    const Harness = defineComponent({
+      setup() {
+        useComponent({
+          name: "weatherCard",
+          parameters: schema as unknown as StandardSchemaV1<
+            any,
+            { city: string }
+          >,
+          render: DemoComponent,
+        });
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    render(Harness);
+
+    expect(mockUseFrontendTool).toHaveBeenCalledTimes(1);
+    const [toolConfig] = mockUseFrontendTool.mock.calls[0] as [
+      { name: string; parameters: any },
+    ];
+    expect(toolConfig.name).toBe("weatherCard");
+    expect(toolConfig.parameters["~standard"].vendor).toBe("valibot");
+  });
+
+  it("registers a component with an ArkType schema", () => {
+    const DemoComponent = defineComponent({
+      props: {
+        city: { type: String, required: true },
+      },
+      template: `<div>{{ city }}</div>`,
+    });
+
+    const schema = type({ city: "string" });
+
+    const Harness = defineComponent({
+      setup() {
+        useComponent({
+          name: "weatherCardArk",
+          parameters: schema as unknown as StandardSchemaV1<
+            any,
+            { city: string }
+          >,
+          render: DemoComponent,
+        });
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    render(Harness);
+
+    expect(mockUseFrontendTool).toHaveBeenCalledTimes(1);
+    const [toolConfig] = mockUseFrontendTool.mock.calls[0] as [
+      { name: string; parameters: any },
+    ];
+    expect(toolConfig.name).toBe("weatherCardArk");
+    expect(toolConfig.parameters["~standard"].vendor).toBe("arktype");
+  });
+});