@copilotkit/vue 2.0.0-rc.6 → 2.0.0-rc.8

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

@@ -1,27 +1,109 @@
-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,
-  PanelLeftOpen as IconPanelLeftOpen,
-  Play as IconPlay,
-  Upload as IconUpload,
-  Wrench as IconWrench,
-  EyeOff as IconEyeOff,
-} from "lucide-vue-next";
+import { defineComponent, h } from "vue";
+import type { PropType } from "vue";
+import { ɵcopilotIcons, ɵcopilotIconSvgAttributes } from "@copilotkit/core";
+import type { CopilotIconName } from "@copilotkit/core";
+
+/** True when the attributes give the icon an accessible name or role. */
+function hasAccessibleAttribute(attributes: object) {
+  return Object.keys(attributes).some(
+    (key) => key.startsWith("aria-") || key === "role" || key === "title",
+  );
+}
+
+/** Props that change how an icon is drawn. Other attributes go on the `<svg>`. */
+const iconDrawProps = {
+  /** Width and height of the icon. Defaults to `24`. */
+  size: { type: [Number, String], default: 24 },
+  /** Line color. Defaults to `currentColor`. */
+  color: { type: String, default: "currentColor" },
+  /** Line width. Defaults to `2`. */
+  strokeWidth: { type: [Number, String], default: 2 },
+};
+
+/**
+ * Draws one of the chat icons as an inline `<svg>`.
+ *
+ * The `<svg>` has the classes `lucide lucide-<icon name>`, so CSS that selects
+ * them (for example `svg.lucide-arrow-up`) keeps working. The icon is hidden
+ * from screen readers unless you give it an `aria-*` attribute, a `role` or a
+ * `title`. Other attributes, such as `class` or `fill`, go on the `<svg>`.
+ *
+ * Props:
+ * - `name`: the chat icon, for example `"ArrowUp"` or `"X"`.
+ * - `size`: width and height. Defaults to `24`.
+ * - `stroke-width`: line width. Defaults to `2`.
+ * - `color`: line color. Defaults to `currentColor`.
+ *
+ * @example
+ * ```vue
+ * <CopilotIcon name="ArrowUp" class="cpk-chat-input-send-icon" />
+ * <CopilotIcon name="X" aria-label="Close" />
+ * ```
+ */
+export const CopilotIcon = defineComponent({
+  name: "CopilotIcon",
+  props: {
+    /** The chat icon to draw, for example `"ArrowUp"`. */
+    name: { type: String as PropType<CopilotIconName>, required: true },
+    ...iconDrawProps,
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const icon = ɵcopilotIcons[props.name];
+      const content = slots.default?.() ?? [];
+      const isDecorative =
+        content.length === 0 && !hasAccessibleAttribute(attrs);
+      return h(
+        "svg",
+        {
+          ...ɵcopilotIconSvgAttributes,
+          width: props.size,
+          height: props.size,
+          stroke: props.color,
+          "stroke-width": props.strokeWidth,
+          class: ["lucide", `lucide-${icon.name}`],
+          "aria-hidden": isDecorative ? "true" : undefined,
+        },
+        [...icon.nodes.map((node) => h(node.tag, node.attributes)), ...content],
+      );
+    };
+  },
+});
+
+/**
+ * Internal. Makes a component that draws one chat icon, such as `IconArrowUp`.
+ * It takes the same `size`, `color` and `stroke-width` props as `CopilotIcon`.
+ */
+function defineIcon(name: CopilotIconName) {
+  return defineComponent({
+    name: `Icon${name}`,
+    props: iconDrawProps,
+    setup(props, { slots }) {
+      return () => h(CopilotIcon, { name, ...props }, slots);
+    },
+  });
+}
+
+export const IconArrowUp = defineIcon("ArrowUp");
+export const IconCheck = defineIcon("Check");
+export const IconChevronDown = defineIcon("ChevronDown");
+export const IconChevronLeft = defineIcon("ChevronLeft");
+export const IconChevronRight = defineIcon("ChevronRight");
+export const IconCircle = defineIcon("Circle");
+export const IconCopy = defineIcon("Copy");
+export const IconEdit = defineIcon("Edit");
+export const IconEyeOff = defineIcon("EyeOff");
+export const IconLoader2 = defineIcon("Loader2");
+export const IconMessageCircle = defineIcon("MessageCircle");
+export const IconMic = defineIcon("Mic");
+export const IconPanelLeftOpen = defineIcon("PanelLeftOpen");
+export const IconPlay = defineIcon("Play");
+export const IconPlus = defineIcon("Plus");
+export const IconRefreshCw = defineIcon("RefreshCw");
+export const IconSquare = defineIcon("Square");
+export const IconThumbsDown = defineIcon("ThumbsDown");
+export const IconThumbsUp = defineIcon("ThumbsUp");
+export const IconUpload = defineIcon("Upload");
+export const IconVolume2 = defineIcon("Volume2");
+export const IconWrench = defineIcon("Wrench");
+export const IconX = defineIcon("X");

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

@@ -1,4 +1,12 @@
-import { computed, defineComponent, onMounted, ref, watch } from "vue";
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
 import type { PropType } from "vue";
 import { screen, fireEvent, waitFor, cleanup } from "@testing-library/vue";
 import { afterEach, describe, expect, it } from "vitest";
@@ -27,6 +35,11 @@ import {
   textChunkEvent,
   testId,
 } from "../../__tests__/utils/test-helpers";
+import { mountWithProvider } from "../../__tests__/utils/mount";
+import {
+  StateCapturingAgent,
+  toolCallMessage,
+} from "../../__tests__/utils/agents";
 
 afterEach(() => {
   cleanup();
@@ -912,6 +925,54 @@ describe("useFrontendTool E2E - Dynamic Registration", () => {
     });
   });
 
+  describe("Overriding a provider tool", () => {
+    it("brings the provider tool back after the overriding component unmounts", async () => {
+      const calls: string[] = [];
+      const lookupTool = (owner: string): VueFrontendTool => ({
+        name: "lookup",
+        parameters: z.object({}),
+        followUp: false,
+        handler: async () => {
+          calls.push(owner);
+          return owner;
+        },
+      });
+
+      const OverridingTool = defineComponent({
+        setup() {
+          useFrontendTool(lookupTool("component"));
+          return () => null;
+        },
+      });
+
+      const showOverride = ref(true);
+      const agent = new StateCapturingAgent(
+        [
+          { newMessages: [toolCallMessage("lookup")] },
+          { newMessages: [toolCallMessage("lookup")] },
+        ],
+        "test-agent",
+      );
+      const { getCore, wrapper } = mountWithProvider(
+        () => (showOverride.value ? h(OverridingTool) : h("div")),
+        {
+          frontendTools: [lookupTool("provider")],
+          agents__unsafe_dev_only: { "test-agent": agent },
+        },
+      );
+
+      await nextTick();
+      await getCore().runAgent({ agent });
+
+      showOverride.value = false;
+      await nextTick();
+      await getCore().runAgent({ agent });
+
+      expect(calls).toEqual(["component", "provider"]);
+      wrapper.unmount();
+    });
+  });
+
   describe("Integration with Chat UI", () => {
     it("should render tool output correctly in chat interface", async () => {
       const agent = new MockStepwiseAgent();

package/src/v2/hooks/__tests__/use-render-activity-message.test.ts

@@ -0,0 +1,105 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  expectTypeOf,
+  it,
+  vi,
+} from "vitest";
+import { defineComponent, h, toRaw } from "vue";
+import { z } from "zod";
+import type { ActivityMessage } from "@ag-ui/core";
+import { useRenderActivityMessage } from "../use-render-activity-message";
+import type {
+  VueActivityMessageRenderer,
+  VueActivityMessageRendererProps,
+} from "../../types";
+import { renderWithCopilotKit } from "../../__tests__/utils/mount";
+
+const ProgressRenderer = defineComponent({
+  props: { content: { type: Object, required: true } },
+  setup: () => () => null,
+});
+
+const progressSchema = z.object({
+  label: z.string(),
+  percent: z.number().default(0),
+});
+
+// A zod schema is a Standard Schema, so it fits the `content` field, and the
+// renderer's content type is the schema's output type.
+const progressRenderer = {
+  activityType: "progress",
+  content: progressSchema,
+  render: ProgressRenderer,
+} satisfies VueActivityMessageRenderer<z.output<typeof progressSchema>>;
+
+function activityMessage(content: Record<string, unknown>): ActivityMessage {
+  return {
+    id: "activity-1",
+    role: "activity",
+    activityType: "progress",
+    content,
+  };
+}
+
+function renderWithProgressRenderer() {
+  let helpers: ReturnType<typeof useRenderActivityMessage> | undefined;
+  const Probe = defineComponent({
+    setup() {
+      helpers = useRenderActivityMessage();
+      return () => null;
+    },
+  });
+
+  renderWithCopilotKit(() => h(Probe), {
+    providerProps: { renderActivityMessages: [progressRenderer] },
+  });
+
+  if (!helpers) throw new Error("useRenderActivityMessage did not run");
+  return helpers;
+}
+
+describe("useRenderActivityMessage", () => {
+  let consoleWarnSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleWarnSpy.mockRestore();
+  });
+
+  it("types a zod content schema's output as the render props content", () => {
+    type Props = VueActivityMessageRendererProps<
+      z.output<typeof progressSchema>
+    >;
+    expectTypeOf<Props["content"]>().toEqualTypeOf<{
+      label: string;
+      percent: number;
+    }>();
+  });
+
+  it("passes the zod schema's parsed output to the renderer", () => {
+    const { renderActivityMessage } = renderWithProgressRenderer();
+
+    const result = renderActivityMessage(activityMessage({ label: "Upload" }));
+
+    // The provider stores renderers in reactive state, so compare the raw value.
+    expect(toRaw(result?.renderer)).toBe(ProgressRenderer);
+    expect(result?.props.content).toEqual({ label: "Upload", percent: 0 });
+  });
+
+  it("returns null and warns when the content fails the schema", () => {
+    const { renderActivityMessage } = renderWithProgressRenderer();
+
+    const result = renderActivityMessage(activityMessage({ label: 42 }));
+
+    expect(result).toBeNull();
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      "Failed to validate content for activity message 'progress'.",
+    );
+  });
+});

package/src/v2/hooks/__tests__/use-render-tool.test.ts

@@ -93,7 +93,7 @@ describe("useRenderTool", () => {
     expect(typeof renderer?.render).toBe("function");
   });
 
-  it("registers wildcard renderer and defaults parameters schema to z.any", () => {
+  it("registers wildcard renderer and defaults parameters to a schema that accepts any value", () => {
     const core = createMockCore();
     mockUseCopilotKit.mockReturnValue({ copilotkit: { value: core } });
 
@@ -118,11 +118,8 @@ describe("useRenderTool", () => {
     const renderer = core.renderToolCalls.find((item) => item.name === "*");
     expect(renderer).toBeDefined();
     expect(typeof renderer?.render).toBe("function");
-    const wildcardArgs = renderer?.args as
-      | { safeParse: (v: unknown) => { success: boolean } }
-      | undefined;
-    expect(wildcardArgs).toBeDefined();
-    expect(wildcardArgs!.safeParse({ arbitrary: true }).success).toBe(true);
+    const result = renderer?.args["~standard"].validate({ arbitrary: true });
+    expect(result).toEqual({ value: { arbitrary: true } });
   });
 
   it("accepts a Vue component renderer", () => {

package/src/v2/hooks/__tests__/zod-regression.test.ts

@@ -4,7 +4,7 @@
  *
  * Covers:
  * 1. useRenderTool with complex Zod schemas
- * 2. defineToolCallRenderer with Zod (named + wildcard default z.any())
+ * 2. defineToolCallRenderer with Zod (named + wildcard default schema)
  * 3. useComponent with Zod schemas
  * 4. The registered schema object is the original Zod instance (identity check)
  */
@@ -196,14 +196,15 @@ describe("useRenderTool Zod regression", () => {
 });
 
 describe("defineToolCallRenderer Zod regression", () => {
-  it("wildcard tool defaults to z.any() for args", () => {
+  it("wildcard tool defaults to a schema that accepts any value", () => {
     const renderer = defineToolCallRenderer({
       name: "*",
       render: () => "wildcard",
     });
 
     expect(renderer.name).toBe("*");
-    expect((renderer.args as any)["~standard"].vendor).toBe("zod");
+    const result = renderer.args["~standard"].validate({ city: "Paris" });
+    expect(result).toEqual({ value: { city: "Paris" } });
   });
 
   it("named tool with Zod args preserves schema identity", () => {

package/src/v2/hooks/use-frontend-tool.ts

@@ -12,6 +12,11 @@ const EMPTY_DEPS: WatchSource<unknown>[] = [];
  * The tool registration is reactive to provided dependencies and is cleaned up
  * automatically when the current scope is disposed.
  *
+ * A tool with the same name and `agentId` as a tool that is already
+ * registered (for example a provider `frontendTools` entry) takes its place
+ * while this scope is active. When the scope is disposed, the earlier tool is
+ * active again.
+ *
  * @example
  * ```ts
  * useFrontendTool({
@@ -42,13 +47,10 @@ export function useFrontendTool<T extends Record<string, unknown>>(
       const core = copilotkit.value;
       const name = tool.name;
 
-      if (core.getTool({ toolName: name, agentId: tool.agentId })) {
-        console.warn(
-          `Tool '${name}' already exists for agent '${tool.agentId || "global"}'. Overriding with latest registration.`,
-        );
-        core.removeTool(name, tool.agentId);
-      }
-      core.addTool(tool);
+      // Registrations stack in core: this one shadows an earlier tool with the
+      // same name and agentId (a provider tool, or another component's), and
+      // unregistering it brings that tool back.
+      const unregister = core.addTool(tool);
 
       // The render function is registered even when tool.parameters is
       // undefined — tools like HITL confirm dialogs have no parameters
@@ -62,9 +64,7 @@ export function useFrontendTool<T extends Record<string, unknown>>(
         } as VueToolCallRenderer<unknown>);
       }
 
-      onCleanup(() => {
-        core.removeTool(name, tool.agentId);
-      });
+      onCleanup(unregister);
     },
     { immediate: true },
   );

package/src/v2/hooks/use-render-activity-message.ts

@@ -1,19 +1,11 @@
 import { computed } from "vue";
 import type { Component } from "vue";
 import type { ActivityMessage } from "@ag-ui/core";
-import type { AbstractAgent } from "@ag-ui/client";
+import { ɵresolveActivityRenderer } from "@copilotkit/core";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
-import type {
-  VueActivityMessageRenderer,
-  VueActivityMessageRendererProps,
-} from "../types";
-
-interface ActivityRendererResult {
-  renderer: Component<VueActivityMessageRendererProps<unknown>>;
-  props: VueActivityMessageRendererProps<unknown>;
-}
+import type { VueActivityMessageRendererProps } from "../types";
 
 /**
  * Returns helpers for rendering activity messages.
@@ -21,70 +13,57 @@ interface ActivityRendererResult {
  * Matches the React `useRenderActivityMessage` API: `findRenderer` locates a
  * registered renderer by activity type (preferring agent-scoped over global,
  * with `"*"` as a wildcard fallback), and `renderActivityMessage` resolves the
- * renderer and validates the content schema.
+ * renderer and validates the content with the renderer's `content` schema
+ * (any Standard Schema, such as zod).
  */
 export function useRenderActivityMessage() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const agentId = computed(() => config.value?.agentId ?? DEFAULT_AGENT_ID);
 
-  const renderers = computed(() => [
-    ...copilotkit.value.renderActivityMessages,
-  ]);
-
-  function findRenderer(
-    activityType: string,
-  ): VueActivityMessageRenderer<unknown> | null {
-    const list = renderers.value;
-    if (!list.length) {
-      return null;
-    }
-
-    const matches = list.filter(
+  function findRenderer(activityType: string) {
+    const renderers = copilotkit.value.renderActivityMessages;
+    const matches = renderers.filter(
       (renderer) => renderer.activityType === activityType,
     );
 
     return (
       matches.find((candidate) => candidate.agentId === agentId.value) ??
       matches.find((candidate) => candidate.agentId === undefined) ??
-      list.find((candidate) => candidate.activityType === "*") ??
+      renderers.find((candidate) => candidate.activityType === "*") ??
       null
     );
   }
 
-  function renderActivityMessage(
-    message: ActivityMessage,
-  ): ActivityRendererResult | null {
-    const renderer = findRenderer(message.activityType);
-
-    if (!renderer) {
-      return null;
-    }
-
-    const parseResult = renderer.content.safeParse(message.content);
+  function renderActivityMessage(message: ActivityMessage) {
+    const match = ɵresolveActivityRenderer(
+      copilotkit.value.renderActivityMessages,
+      {
+        activityType: message.activityType,
+        agentId: agentId.value,
+        content: message.content,
+      },
+    );
 
-    if (!parseResult.success) {
-      console.warn(
-        `Failed to parse content for activity message ` +
-          `'${message.activityType}':`,
-        parseResult.error,
-      );
+    if (!match) {
+      if (findRenderer(message.activityType)) {
+        console.warn(
+          `Failed to validate content for activity message ` +
+            `'${message.activityType}'.`,
+        );
+      }
       return null;
     }
 
-    const agent: AbstractAgent | undefined = copilotkit.value.getAgent(
-      agentId.value,
-    );
-
     return {
-      renderer: renderer.render as Component<
+      renderer: match.renderer.render as Component<
         VueActivityMessageRendererProps<unknown>
       >,
       props: {
         activityType: message.activityType,
-        content: parseResult.data,
+        content: match.content,
         message,
-        agent,
+        agent: copilotkit.value.getAgent(agentId.value),
       },
     };
   }

package/src/v2/hooks/use-render-custom-messages.ts

@@ -1,5 +1,5 @@
-import type { Component, VNodeChild } from "vue";
 import type { Message } from "@ag-ui/core";
+import { ɵresolveCustomMessageRenderers } from "@copilotkit/core";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
@@ -13,13 +13,6 @@ interface UseRenderCustomMessagesParams {
   position: VueCustomMessageRendererPosition;
 }
 
-interface CustomMessageRendererResult {
-  renderer:
-    | Component<VueCustomMessageRendererProps>
-    | ((props: VueCustomMessageRendererProps) => VNodeChild);
-  props: VueCustomMessageRendererProps;
-}
-
 /**
  * Returns a function that resolves the appropriate custom message renderer for
  * a given message and position.
@@ -37,9 +30,7 @@ export function useRenderCustomMessages() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
 
-  return function renderCustomMessage(
-    params: UseRenderCustomMessagesParams,
-  ): CustomMessageRendererResult | null {
+  return function renderCustomMessage(params: UseRenderCustomMessagesParams) {
     const configValue = config.value;
     if (!configValue) return null;
 
@@ -47,17 +38,10 @@ export function useRenderCustomMessages() {
     const { threadId } = configValue;
     const core = copilotkit.value;
 
-    const customMessageRenderers = [...core.renderCustomMessages]
-      .filter(
-        (renderer) =>
-          renderer.agentId === undefined || renderer.agentId === agentId,
-      )
-      .sort((a, b) => {
-        const aHasAgent = a.agentId !== undefined;
-        const bHasAgent = b.agentId !== undefined;
-        if (aHasAgent === bHasAgent) return 0;
-        return aHasAgent ? -1 : 1;
-      });
+    const customMessageRenderers = ɵresolveCustomMessageRenderers(
+      core.renderCustomMessages,
+      agentId,
+    );
 
     if (!customMessageRenderers.length) {
       return null;
@@ -101,7 +85,7 @@ export function useRenderCustomMessages() {
       ? core.getStateByRun(agentId, threadId, resolvedRunId)
       : undefined;
 
-    const props: CustomMessageRendererResult["props"] = {
+    const props: VueCustomMessageRendererProps = {
       message,
       position,
       runId,
@@ -112,18 +96,13 @@ export function useRenderCustomMessages() {
       stateSnapshot,
     };
 
-    // Iterate renderers like React: try each one and use the first that
-    // returns a non-null render function.
-    for (const candidate of customMessageRenderers) {
-      if (!candidate.render) {
-        continue;
-      }
-      return {
-        renderer: candidate.render as CustomMessageRendererResult["renderer"],
-        props,
-      };
-    }
+    // Agent-scoped renderers come first. Use the first one that has a
+    // render function.
+    const selected = customMessageRenderers.find(
+      (candidate) => candidate.render,
+    );
+    if (!selected) return null;
 
-    return null;
+    return { renderer: selected.render, props };
   };
 }

package/src/v2/lib/vue-core.ts

@@ -44,7 +44,9 @@ export class CopilotKitCoreVue extends CopilotKitCore {
   private _interruptState: InterruptRenderProps<unknown, unknown> | null = null;
 
   constructor(config: CopilotKitCoreVueConfig) {
-    super(config);
+    // Tool handlers can change reactive state. `nextTick` lets Vue flush those
+    // updates before core starts the follow-up run.
+    super({ ...config, ɵwaitForFrameworkUpdates: () => nextTick() });
     this._renderToolCalls = config.renderToolCalls ?? [];
     this._renderCustomMessages = config.renderCustomMessages ?? [];
     this._renderActivityMessages = config.renderActivityMessages ?? [];
@@ -154,8 +156,4 @@ export class CopilotKitCoreVue extends CopilotKitCore {
   ): CopilotKitCoreSubscription {
     return super.subscribe(subscriber);
   }
-
-  async waitForPendingFrameworkUpdates(): Promise<void> {
-    await nextTick();
-  }
 }

package/src/v2/providers/CopilotKitProvider.types.ts

@@ -84,11 +84,6 @@ export interface CopilotKitProviderProps {
     sandboxFunctions?: SandboxFunction[];
     designSkill?: string;
   };
-  /**
-   * @deprecated This prop no longer controls the Inspector. Use
-   * `enableInspector` instead.
-   */
-  showDevConsole?: boolean | "auto";
   /**
    * Disable the CopilotKit Inspector in development.
    * The Inspector is enabled by default in development browser builds and is