@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

package/src/v2/providers/use-inspector-thread-override.ts

@@ -1,20 +1,12 @@
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import type { Ref } from "vue";
-import {
-  emitInspectorActiveThread,
-  emitInspectorViewThreadResult,
-  isInspectorThreadBridgeEnabled,
-  onInspectorStopViewing,
-  onInspectorViewThread,
-} from "@copilotkit/core";
-
-type InspectorOverride = {
-  requestId: string;
-  threadId: string;
-  agentId: string;
-  previousThreadId: string;
-};
+import { ɵInspectorThreadOverride } from "@copilotkit/core";
 
+/**
+ * Apply the Inspector's "view this thread" requests to a chat. Core's
+ * `ɵInspectorThreadOverride` owns the state machine; this composable binds it
+ * to the component's lifetime and Vue reactivity.
+ */
 export function useInspectorThreadOverride(args: {
   agentId: Ref<string>;
   baseThreadId: Ref<string>;
@@ -23,77 +15,27 @@ export function useInspectorThreadOverride(args: {
   inspectorRequestId: Ref<string | null>;
   failInspectorOverride: (requestId: string) => void;
 } {
-  const override = ref<InspectorOverride | null>(null);
-
-  const restoreOverride = (
-    current: InspectorOverride,
-    nextThreadId: string,
-  ) => {
-    override.value = null;
-    emitInspectorActiveThread({
-      requestId: current.requestId,
-      threadId: nextThreadId,
-      agentId: current.agentId,
-      source: "app",
-    });
-  };
-
-  const failInspectorOverride = (requestId: string) => {
-    const current = override.value;
-    if (!current || current.requestId !== requestId) return;
-    emitInspectorViewThreadResult({
-      requestId,
-      threadId: current.threadId,
-      agentId: current.agentId,
-      ok: false,
-      reason: "connect-failed",
-    });
-    restoreOverride(current, current.previousThreadId);
-  };
-
-  if (isInspectorThreadBridgeEnabled()) {
-    const offView = onInspectorViewThread((payload) => {
-      if (payload.agentId !== args.agentId.value) return false;
-      override.value = override.value
-        ? { ...override.value, ...payload }
-        : {
-            ...payload,
-            previousThreadId: args.baseThreadId.value,
-          };
-      emitInspectorViewThreadResult({ ...payload, ok: true });
-      emitInspectorActiveThread({ ...payload, source: "override" });
-      return true;
-    });
-
-    const offStop = onInspectorStopViewing((payload) => {
-      const current = override.value;
-      if (!current) return;
-      if (payload.requestId !== current.requestId) return;
-      if (payload.agentId !== current.agentId) return;
-      restoreOverride(current, current.previousThreadId);
-    });
-
-    onBeforeUnmount(() => {
-      offView();
-      offStop();
-    });
-  }
+  const controller = new ɵInspectorThreadOverride({
+    agentId: args.agentId.value,
+    baseThreadId: args.baseThreadId.value,
+  });
+  const override = shallowRef(controller.getSnapshot());
+  const unsubscribe = controller.subscribe(() => {
+    override.value = controller.getSnapshot();
+  });
 
   watch([args.agentId, args.baseThreadId], ([agentId, baseThreadId]) => {
-    const current = override.value;
-    if (!current) return;
-    if (agentId !== current.agentId) {
-      restoreOverride(current, current.previousThreadId);
-      return;
-    }
-    if (baseThreadId === current.previousThreadId) return;
-    if (baseThreadId === current.threadId) return;
-    restoreOverride(current, baseThreadId);
+    controller.update({ agentId, baseThreadId });
+  });
+
+  onBeforeUnmount(() => {
+    unsubscribe();
+    controller.dispose();
   });
 
   return {
     inspectorThreadId: computed(() => override.value?.threadId ?? null),
     inspectorRequestId: computed(() => override.value?.requestId ?? null),
-    failInspectorOverride,
+    failInspectorOverride: controller.fail,
   };
 }

package/src/v2/types/__tests__/defineToolCallRenderer.test.ts

@@ -2,11 +2,30 @@ import { describe, it, expect } from "vitest";
 import { defineComponent, h } from "vue";
 import { z } from "zod";
 import { ToolCallStatus } from "@copilotkit/core";
+import type { VNode } from "vue";
 import { defineToolCallRenderer } from "../defineToolCallRenderer";
-import type { VueToolCallRenderer } from "../vue-tool-call-renderer";
+import type {
+  VueToolCallRenderer,
+  VueToolCallRendererRenderProps,
+} from "../vue-tool-call-renderer";
+
+/**
+ * Calls a renderer built from a render function. `render` is typed as a
+ * function or a component, and TypeScript cannot tell which one this test
+ * passed, so the narrowing cast lives here once.
+ */
+function callRender<T>(
+  renderer: VueToolCallRenderer<T>,
+  props: VueToolCallRendererRenderProps<T>,
+) {
+  const render = renderer.render as (
+    props: VueToolCallRendererRenderProps<T>,
+  ) => VNode;
+  return render(props);
+}
 
 describe("defineToolCallRenderer", () => {
-  it("defaults wildcard args to z.any and preserves runtime tool name", () => {
+  it("defaults wildcard args to a schema that accepts any value and preserves runtime tool name", () => {
     const wildcardRenderer = defineToolCallRenderer({
       name: "*",
       render: ({ name, args, status }) =>
@@ -18,19 +37,11 @@ describe("defineToolCallRenderer", () => {
     });
 
     expect(wildcardRenderer.name).toBe("*");
-    expect(wildcardRenderer.args.safeParse({ anything: true }).success).toBe(
-      true,
-    );
-
-    const rendered = (
-      wildcardRenderer.render as (props: {
-        name: string;
-        toolCallId: string;
-        args: Record<string, unknown>;
-        status: ToolCallStatus;
-        result: string | undefined;
-      }) => ReturnType<typeof h>
-    )({
+    expect(
+      wildcardRenderer.args["~standard"].validate({ anything: true }),
+    ).toEqual({ value: { anything: true } });
+
+    const rendered = callRender(wildcardRenderer, {
       name: "customTool",
       toolCallId: "tc-wildcard-1",
       args: { x: 1 },
@@ -53,15 +64,7 @@ describe("defineToolCallRenderer", () => {
         ),
     });
 
-    const rendered = (
-      wildcardRenderer.render as (props: {
-        name: string;
-        toolCallId: string;
-        args: Record<string, unknown>;
-        status: ToolCallStatus;
-        result: string | undefined;
-      }) => ReturnType<typeof h>
-    )({
+    const rendered = callRender(wildcardRenderer, {
       name: "customTool",
       toolCallId: "tc-123",
       args: {},
@@ -136,15 +139,7 @@ describe("defineToolCallRenderer", () => {
       },
     });
 
-    const rendered = (
-      typedRenderer.render as (props: {
-        name: string;
-        toolCallId: string;
-        args: { location: string; units?: "celsius" | "fahrenheit" };
-        status: ToolCallStatus;
-        result: string | undefined;
-      }) => ReturnType<typeof h>
-    )({
+    const rendered = callRender(typedRenderer, {
       name: "get_weather",
       toolCallId: "tc-weather-1",
       args: { location: "Paris", units: "celsius" },

package/src/v2/types/defineToolCallRenderer.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { ɵanySchema } from "@copilotkit/shared";
 import type { StandardSchemaV1, InferSchemaOutput } from "@copilotkit/shared";
 import type { VueToolCallRenderer } from "./vue-tool-call-renderer";
 import type { VueToolCallRendererRenderFn } from "./vue-tool-call-renderer";
@@ -8,7 +8,7 @@ export function defineToolCallRenderer(def: {
   render: VueToolCallRendererRenderFn<unknown>;
   agentId?: string;
   group?: boolean;
-}): VueToolCallRenderer<unknown>;
+}): VueToolCallRenderer;
 
 export function defineToolCallRenderer<S extends StandardSchemaV1>(def: {
   name: string;
@@ -24,12 +24,13 @@ export function defineToolCallRenderer<S extends StandardSchemaV1>(def: {
   render: VueToolCallRendererRenderFn<unknown>;
   agentId?: string;
   group?: boolean;
-}): VueToolCallRenderer<unknown> {
-  const argsSchema = def.name === "*" && !def.args ? z.any() : def.args;
+}): VueToolCallRenderer {
+  // Only a "*" renderer may leave out `args`; it accepts any arguments.
+  const args = def.args ?? ɵanySchema;
   return {
     name: def.name,
-    args: argsSchema as StandardSchemaV1<any, unknown>,
-    render: def.render as VueToolCallRenderer<unknown>["render"],
+    args,
+    render: def.render,
     ...(def.agentId ? { agentId: def.agentId } : {}),
     ...(def.group ? { group: true } : {}),
   };

package/src/v2/types/human-in-the-loop.ts

@@ -1,37 +1,13 @@
-import type { FrontendTool, ToolCallStatus } from "@copilotkit/core";
+import type { FrontendTool, HumanInTheLoopRenderProps } from "@copilotkit/core";
 import type { Component, VNodeChild } from "vue";
 
-export type VueHumanInTheLoopRenderProps<T> =
-  | {
-      name: string;
-      description: string;
-      toolCallId: string;
-      agentId?: string;
-      args: Partial<T>;
-      status: ToolCallStatus.InProgress;
-      result: undefined;
-      respond: undefined;
-    }
-  | {
-      name: string;
-      description: string;
-      toolCallId: string;
-      agentId?: string;
-      args: T;
-      status: ToolCallStatus.Executing;
-      result: undefined;
-      respond: (result: unknown) => Promise<void>;
-    }
-  | {
-      name: string;
-      description: string;
-      toolCallId: string;
-      agentId?: string;
-      args: T;
-      status: ToolCallStatus.Complete;
-      result: string;
-      respond: undefined;
-    };
+/**
+ * Props a Vue human-in-the-loop renderer receives. Same as core's
+ * `HumanInTheLoopRenderProps`.
+ *
+ * @typeParam T - The shape of the tool arguments.
+ */
+export type VueHumanInTheLoopRenderProps<T> = HumanInTheLoopRenderProps<T>;
 
 export type VueHumanInTheLoopRenderFn<T> =
   | ((props: VueHumanInTheLoopRenderProps<T>) => VNodeChild)

package/src/v2/types/interrupt.ts

@@ -1,31 +1,7 @@
-import type { Interrupt, RunAgentResult } from "@ag-ui/client";
-
-export interface InterruptEvent<TValue = unknown> {
-  name: string;
-  value: TValue;
-}
-
-export type InterruptResolveFn = (
-  payload?: unknown,
-  interruptId?: string,
-) => Promise<RunAgentResult | void>;
-export type InterruptCancelFn = (
-  interruptId?: string,
-) => Promise<RunAgentResult | void>;
-
-export interface InterruptHandlerProps<TValue = unknown> {
-  event: InterruptEvent<TValue>;
-  interrupt: Interrupt | null;
-  interrupts: Interrupt[];
-  resolve: InterruptResolveFn;
-  cancel: InterruptCancelFn;
-}
-
-export interface InterruptRenderProps<TValue = unknown, TResult = unknown> {
-  event: InterruptEvent<TValue>;
-  interrupt: Interrupt | null;
-  interrupts: Interrupt[];
-  result: TResult;
-  resolve: InterruptResolveFn;
-  cancel: InterruptCancelFn;
-}
+export type {
+  InterruptEvent,
+  InterruptResolveFn,
+  InterruptCancelFn,
+  InterruptHandlerProps,
+  InterruptRenderProps,
+} from "@copilotkit/core";

package/src/v2/types/vue-activity-message-renderer.ts

@@ -1,22 +1,31 @@
-import type { ActivityMessage } from "@ag-ui/core";
-import type { AbstractAgent } from "@ag-ui/client";
-import type { z } from "zod";
+import type {
+  ActivityMessageRenderProps,
+  ActivityMessageRendererDef,
+} from "@copilotkit/core";
 import type { Component, VNodeChild } from "vue";
 
-export interface VueActivityMessageRendererProps<TActivityContent> {
-  activityType: string;
-  content: TActivityContent;
-  message: ActivityMessage;
-  agent: AbstractAgent | undefined;
-}
+/**
+ * Props a Vue activity message renderer receives. Same as core's
+ * `ActivityMessageRenderProps`.
+ *
+ * @typeParam TActivityContent - The shape of the activity content.
+ */
+export type VueActivityMessageRendererProps<TActivityContent> =
+  ActivityMessageRenderProps<TActivityContent>;
 
 export type VueActivityMessageRendererRenderFn<TActivityContent> =
   | ((props: VueActivityMessageRendererProps<TActivityContent>) => VNodeChild)
   | Component<VueActivityMessageRendererProps<TActivityContent>>;
 
-export interface VueActivityMessageRenderer<TActivityContent> {
-  activityType: string;
-  agentId?: string;
-  content: z.ZodSchema<TActivityContent>;
-  render: VueActivityMessageRendererRenderFn<TActivityContent>;
-}
+/**
+ * A Vue activity message renderer registration. `content` takes any
+ * Standard Schema (zod, valibot, arktype, and so on). The chat validates the
+ * activity content with it and passes the result to `render`.
+ *
+ * @typeParam TActivityContent - The shape of the activity content.
+ */
+export type VueActivityMessageRenderer<TActivityContent> =
+  ActivityMessageRendererDef<
+    TActivityContent,
+    VueActivityMessageRendererRenderFn<TActivityContent>
+  >;

package/src/v2/types/vue-custom-message-renderer.ts

@@ -1,24 +1,20 @@
-import type { Message } from "@ag-ui/core";
+import type {
+  CustomMessageRendererDef,
+  CustomMessageRendererPosition,
+  CustomMessageRenderProps,
+} from "@copilotkit/core";
 import type { Component, VNodeChild } from "vue";
 
-export type VueCustomMessageRendererPosition = "before" | "after";
+/** Where a custom message renderer draws. Same as core's type. */
+export type VueCustomMessageRendererPosition = CustomMessageRendererPosition;
 
-export interface VueCustomMessageRendererProps {
-  message: Message;
-  position: VueCustomMessageRendererPosition;
-  runId: string;
-  messageIndex: number;
-  messageIndexInRun: number;
-  numberOfMessagesInRun: number;
-  agentId: string;
-  stateSnapshot: unknown;
-}
+/** Props a Vue custom message renderer receives. Same as core's type. */
+export type VueCustomMessageRendererProps = CustomMessageRenderProps;
 
 export type VueCustomMessageRendererRenderFn =
   | ((props: VueCustomMessageRendererProps) => VNodeChild)
   | Component<VueCustomMessageRendererProps>;
 
-export interface VueCustomMessageRenderer {
-  agentId?: string;
-  render: VueCustomMessageRendererRenderFn;
-}
+/** A Vue custom message renderer registration. */
+export type VueCustomMessageRenderer =
+  CustomMessageRendererDef<VueCustomMessageRendererRenderFn>;

package/src/v2/types/vue-tool-call-renderer.ts

@@ -1,32 +1,16 @@
-import type { ToolCallStatus } from "@copilotkit/core";
-import type { StandardSchemaV1 } from "@copilotkit/shared";
+import type {
+  ToolCallRenderProps,
+  ToolCallRendererDef,
+} from "@copilotkit/core";
 import type { Component, VNodeChild } from "vue";
 
 /**
- * Props passed to a Vue tool call render function.
+ * Props passed to a Vue tool call render function. Same as core's
+ * `ToolCallRenderProps`.
+ *
+ * @typeParam T - The shape of the tool arguments.
  */
-export type VueToolCallRendererRenderProps<T> =
-  | {
-      name: string;
-      toolCallId: string;
-      args: Partial<T>;
-      status: ToolCallStatus.InProgress;
-      result: undefined;
-    }
-  | {
-      name: string;
-      toolCallId: string;
-      args: T;
-      status: ToolCallStatus.Executing;
-      result: undefined;
-    }
-  | {
-      name: string;
-      toolCallId: string;
-      args: T;
-      status: ToolCallStatus.Complete;
-      result: string;
-    };
+export type VueToolCallRendererRenderProps<T> = ToolCallRenderProps<T>;
 
 /**
  * Vue component or render function for tool call rendering.
@@ -36,16 +20,17 @@ export type VueToolCallRendererRenderFn<T> =
   | ((props: VueToolCallRendererRenderProps<T>) => VNodeChild)
   | Component<VueToolCallRendererRenderProps<T>>;
 
-export interface VueToolCallRenderer<T = unknown> {
-  name: string;
-  args: StandardSchemaV1<any, T>;
-  agentId?: string;
-  /**
-   * Whether calls this renderer draws join the chat's tool-call groups (see
-   * `toolCallDisplay` on `CopilotChatMessageView`). CopilotKit's built-in card
-   * sets it; a renderer that leaves it unset always shows its calls on their
-   * own, since the chat can't tell what it draws (it may even draw nothing).
-   */
-  group?: boolean;
-  render: VueToolCallRendererRenderFn<T>;
-}
+type VueToolCallRendererDef<T> = ToolCallRendererDef<
+  T,
+  VueToolCallRendererRenderFn<T>
+>;
+
+/**
+ * A Vue tool call renderer registration: core's `ToolCallRendererDef` with a
+ * Vue render function. `args` is required here. Use `defineToolCallRenderer`
+ * to build one; it fills in `args` for a `"*"` renderer that has no schema.
+ *
+ * @typeParam T - The shape of the tool arguments.
+ */
+export type VueToolCallRenderer<T = unknown> = VueToolCallRendererDef<T> &
+  Required<Pick<VueToolCallRendererDef<T>, "args">>;

package/tsconfig.json

@@ -7,7 +7,6 @@
     "target": "ES2022",
     "outDir": "dist",
     "rootDir": "src",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
       "@copilotkit/core": ["../core/dist/index.d.mts", "../core/src/index.ts"],

package/vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     lib: {
       entry: {
         index: resolve(__dirname, "src/index.ts"),
-        "v2/index": resolve(__dirname, "src/index.ts"),
+        "v2/index": resolve(__dirname, "src/v2/index.ts"),
       },
       name: "CopilotKitVue",
       formats: ["es", "cjs"],
@@ -28,6 +28,11 @@ export default defineConfig({
         "@a2ui/web_core/v0_9/basic_catalog",
         "@ag-ui/client",
         "@ag-ui/core",
+        // The framework-neutral A2UI catalog description subpath (no React).
+        "@copilotkit/a2ui-renderer/catalog-schema",
+        // The framework-neutral A2UI engine subpath (no React).
+        "@copilotkit/a2ui-renderer/engine",
+        "@copilotkit/a2ui-renderer/engine-core",
         // Core and its `/styles` subpath, so the stylesheet isn't bundled here.
         /^@copilotkit\/core(\/.*)?$/,
         // Keep the shared MCP Apps host + its subpaths external. The root entry
@@ -38,7 +43,8 @@ export default defineConfig({
         // statically for activity registration.
         /^@copilotkit\/mcp-apps-renderer(\/.*)?$/,
         "@copilotkit/shared",
-        "@copilotkit/web-inspector",
+        // The Inspector and its `/mount` subpath stay runtime imports.
+        /^@copilotkit\/web-inspector(\/.*)?$/,
         // Keep @copilotkit/web-components (the Lit drawer element) + its subpaths
         // external. It's a runtime dependency loaded via the drawer wrapper's
         // client-only dynamic import; bundling it inline would ship a duplicate
@@ -46,10 +52,7 @@ export default defineConfig({
         // (duplicate top-level lit binding → "Identifier 'h' has already been
         // declared") and risks double custom-element registration.
         /^@copilotkit\/web-components(\/.*)?$/,
-        "@jetbrains/websandbox",
-        "lucide-vue-next",
         "zod",
-        "zod-to-json-schema",
       ],
       output: {
         globals: { vue: "Vue" },

package/vitest.config.ts

@@ -12,12 +12,17 @@ export default defineConfig({
     reporters: [["default", { summary: false }]],
   },
   resolve: {
-    alias: {
-      "@": resolve(__dirname, "./src"),
-      "@copilotkit/web-inspector": resolve(
-        __dirname,
-        "./src/v2/__tests__/mocks/web-inspector.ts",
-      ),
-    },
+    // Exact match, so the real `@copilotkit/web-inspector/mount` subpath
+    // still resolves while the Inspector bundle itself is mocked.
+    alias: [
+      { find: "@", replacement: resolve(__dirname, "./src") },
+      {
+        find: /^@copilotkit\/web-inspector$/,
+        replacement: resolve(
+          __dirname,
+          "./src/v2/__tests__/mocks/web-inspector.ts",
+        ),
+      },
+    ],
   },
 });

package/dist/v2/components/chat/BasicMarkdown.vue.d.ts

@@ -1,9 +0,0 @@
-type __VLS_Props = {
-    content: string;
-    isStreaming?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    isStreaming: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=BasicMarkdown.vue.d.ts.map

package/dist/v2/components/chat/BasicMarkdown.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BasicMarkdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/chat/BasicMarkdown.vue"],"names":[],"mappings":"AAuKA,KAAK,WAAW,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;;iBAAV,OAAO;;AAiM3D,wBAOG"}

package/dist/v2/components/chat/normalize-auto-scroll.d.ts

@@ -1,3 +0,0 @@
-export type AutoScrollMode = "pin-to-bottom" | "pin-to-send" | "none";
-export declare function normalizeAutoScroll(value: AutoScrollMode | boolean | undefined): AutoScrollMode;
-//# sourceMappingURL=normalize-auto-scroll.d.ts.map

package/dist/v2/components/chat/normalize-auto-scroll.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"normalize-auto-scroll.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/chat/normalize-auto-scroll.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,aAAa,GAAG,MAAM,CAAC;AAQtE,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,SAAS,GAC1C,cAAc,CAMhB"}