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

package/src/v2/hooks/use-default-render-tool.ts

@@ -1,110 +1,24 @@
 import { defineComponent, h, inject, ref } from "vue";
 import type { WatchSource } from "vue";
 import type { Component, VNodeChild } from "vue";
-import { ToolCallStatus } from "@copilotkit/core";
+import {
+  ɵadaptDefaultToolCallRenderProps as adaptRendererProps,
+  ɵgetToolCallBadge,
+  ɵnormalizeToolCallStatus,
+  ɵstringifyToolCallAttr,
+  ɵstringifyToolCallPayload,
+} from "@copilotkit/core";
+import type {
+  ɵDefaultToolCallRenderProps,
+  ɵRawToolCallRenderProps,
+} from "@copilotkit/core";
 import { useRenderTool } from "./use-render-tool";
 import { ToolCallGroupContextKey } from "../components/chat/tool-call-display-context";
 import { ToolCallRow } from "../components/chat/tool-call-group-parts";
+import { useChatLabels } from "../components/chat/use-chat-labels";
 
-type DefaultRenderProps = {
-  name: string;
-  toolCallId: string;
-  parameters: unknown;
-  status: "inProgress" | "executing" | "complete";
-  result: string | undefined;
-};
-
-/**
- * Module-level dedup set so an unknown status value only emits a console
- * warning the FIRST time we encounter it. Otherwise a stuck/unmapped status
- * would log on every re-render (potentially many per second).
- */
-const warnedUnknownStatuses = new Set<string>();
-
-/**
- * Map a {@link ToolCallStatus} enum value to the documented string-union
- * status the {@link DefaultRenderProps} contract exposes. Unknown / future
- * enum members log a warning (once per distinct value) and fall back to
- * `"inProgress"`.
- */
-function mapToolCallStatus(
-  status: ToolCallStatus,
-): DefaultRenderProps["status"] {
-  switch (status) {
-    case ToolCallStatus.Complete:
-      return "complete";
-    case ToolCallStatus.Executing:
-      return "executing";
-    case ToolCallStatus.InProgress:
-      return "inProgress";
-    default: {
-      const key = String(status);
-      if (!warnedUnknownStatuses.has(key)) {
-        warnedUnknownStatuses.add(key);
-        console.warn(
-          `[CopilotKit] Unknown ToolCallStatus "${key}" in default tool-call renderer; falling back to "inProgress".`,
-        );
-      }
-      return "inProgress";
-    }
-  }
-}
-
-/**
- * Convert framework-internal raw renderer props (`args`, enum status) to the
- * documented DefaultRenderProps shape. Idempotent on already-documented input
- * — if the caller passes `parameters` and a string-union `status`, those win.
- */
-type AdaptInput = {
-  name?: unknown;
-  toolCallId?: unknown;
-  args?: unknown;
-  parameters?: unknown;
-  status?: unknown;
-  result?: unknown;
-};
-
-function adaptRendererProps(raw: AdaptInput): DefaultRenderProps {
-  const parameters = raw.parameters !== undefined ? raw.parameters : raw.args;
-  const rawStatus = raw.status;
-  const status: DefaultRenderProps["status"] =
-    rawStatus === "inProgress" ||
-    rawStatus === "executing" ||
-    rawStatus === "complete"
-      ? rawStatus
-      : mapToolCallStatus(rawStatus as ToolCallStatus);
-  return {
-    name: raw.name as string,
-    toolCallId: raw.toolCallId as string,
-    parameters,
-    status,
-    result: raw.result as string | undefined,
-  };
-}
-
-/**
- * Guarded JSON.stringify for the expanded `<pre>` blocks. A circular reference
- * would otherwise crash the Vue render.
- */
-function safeStringifyForPre(value: unknown): string {
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch (err) {
-    console.warn(
-      "[CopilotKit] Failed to JSON.stringify tool-call payload for default renderer; falling back to String():",
-      err,
-    );
-    try {
-      return String(value);
-    } catch (innerErr) {
-      console.warn(
-        "[CopilotKit] safeStringifyForPre: value could not be stringified:",
-        innerErr,
-      );
-      return "[unserializable]";
-    }
-  }
-}
+type DefaultRenderProps = ɵDefaultToolCallRenderProps;
+type AdaptInput = ɵRawToolCallRenderProps;
 
 const DefaultToolCallRenderer = defineComponent({
   props: {
@@ -127,7 +41,7 @@ const DefaultToolCallRenderer = defineComponent({
     },
     result: {
       // Typeless on purpose: the renderer body handles both string results
-      // and structured (object) results via `safeStringifyForPre`. Declaring
+      // and structured (object) results via `ɵstringifyToolCallPayload`. Declaring
       // `type: String` would trip Vue's dev-mode prop-type warning on every
       // non-string result and make the defensive branch unreachable.
       type: null,
@@ -138,42 +52,31 @@ const DefaultToolCallRenderer = defineComponent({
   setup(props) {
     const isExpanded = ref(false);
     const groupContext = inject(ToolCallGroupContextKey, null);
+    const labels = useChatLabels();
 
     return () => {
       const group = groupContext?.value;
+      // A status a newer runtime could send reads "unknown".
+      const cardStatus = ɵnormalizeToolCallStatus(props.status);
       // Inside a group of calls, a row that fits the group instead of a card.
       if (group) {
         return h(ToolCallRow, {
           "data-testid": "copilot-tool-render",
           "data-tool-name": props.name,
           "data-tool-call-id": props.toolCallId,
-          "data-status": props.status,
-          "data-args": safeStringifyForAttr(props.parameters),
-          "data-result": safeStringifyForAttr(props.result),
+          "data-status": cardStatus,
+          "data-args": ɵstringifyToolCallAttr(props.parameters),
+          "data-result": ɵstringifyToolCallAttr(props.result),
           name: props.name,
           parameters: props.parameters,
           result: props.result,
-          status:
-            props.status === "complete"
-              ? group.failedIds.has(props.toolCallId)
-                ? "failed"
-                : "done"
-              : group.active
-                ? "running"
-                : "stopped",
+          status: group.statusById.get(props.toolCallId) ?? "done",
           appearance: group.appearance,
         });
       }
 
-      const isActive =
-        props.status === "inProgress" || props.status === "executing";
-      const isComplete = props.status === "complete";
-      const statusLabel = isActive
-        ? "Running"
-        : isComplete
-          ? "Done"
-          : props.status;
-      const tone = isActive ? "running" : isComplete ? "done" : "other";
+      const { tone, labelKey } = ɵgetToolCallBadge(cardStatus);
+      const statusLabel = labels.value[labelKey];
 
       // Markup and classes match React's DefaultToolCallRenderer; styles live
       // in @copilotkit/core (default-tool-call.css).
@@ -183,9 +86,9 @@ const DefaultToolCallRenderer = defineComponent({
           "data-testid": "copilot-tool-render",
           "data-tool-name": props.name,
           "data-tool-call-id": props.toolCallId,
-          "data-status": props.status,
-          "data-args": safeStringifyForAttr(props.parameters),
-          "data-result": safeStringifyForAttr(props.result),
+          "data-status": cardStatus,
+          "data-args": ɵstringifyToolCallAttr(props.parameters),
+          "data-result": ɵstringifyToolCallAttr(props.result),
           class: "cpk-default-tool-call",
         },
         [
@@ -252,12 +155,12 @@ const DefaultToolCallRenderer = defineComponent({
                     h(
                       "div",
                       { class: "cpk-default-tool-call-label" },
-                      "Arguments",
+                      labels.value.toolCallArgumentsLabel,
                     ),
                     h(
                       "pre",
                       { class: "cpk-default-tool-call-code" },
-                      safeStringifyForPre(props.parameters ?? {}),
+                      ɵstringifyToolCallPayload(props.parameters ?? {}),
                     ),
                   ]),
                   props.result !== undefined
@@ -265,14 +168,12 @@ const DefaultToolCallRenderer = defineComponent({
                         h(
                           "div",
                           { class: "cpk-default-tool-call-label" },
-                          "Result",
+                          labels.value.toolCallResultLabel,
                         ),
                         h(
                           "pre",
                           { class: "cpk-default-tool-call-code" },
-                          typeof props.result === "string"
-                            ? props.result
-                            : safeStringifyForPre(props.result),
+                          ɵstringifyToolCallPayload(props.result),
                         ),
                       ])
                     : null,
@@ -285,28 +186,6 @@ const DefaultToolCallRenderer = defineComponent({
   },
 });
 
-function safeStringifyForAttr(value: unknown): string {
-  if (value === undefined || value === null) return "";
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value);
-  } catch (err) {
-    console.warn(
-      "[CopilotKit] Failed to JSON.stringify tool-call payload for data-* attribute; falling back to String():",
-      err,
-    );
-    try {
-      return String(value);
-    } catch (innerErr) {
-      console.warn(
-        "[CopilotKit] safeStringifyForAttr: value could not be stringified:",
-        innerErr,
-      );
-      return "";
-    }
-  }
-}
-
 export function useDefaultRenderTool(
   config?: {
     render?:

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

@@ -1,4 +1,5 @@
 import { watch } from "vue";
+import { ɵregisterFrontendTools } from "@copilotkit/core";
 import type { WatchSource } from "vue";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import type { VueFrontendTool } from "../types";
@@ -12,6 +13,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, with a console warning. When the scope is
+ * disposed, the earlier tool is active again.
+ *
  * @example
  * ```ts
  * useFrontendTool({
@@ -40,31 +46,15 @@ export function useFrontendTool<T extends Record<string, unknown>>(
     ],
     (_newValues, _old, onCleanup) => {
       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);
-
-      // The render function is registered even when tool.parameters is
-      // undefined — tools like HITL confirm dialogs have no parameters
-      // but still need their UI rendered in the chat.
-      if (tool.render) {
-        core.addHookRenderToolCall({
-          name,
-          args: tool.parameters,
-          agentId: tool.agentId,
-          render: tool.render,
-        } as VueToolCallRenderer<unknown>);
-      }
-
-      onCleanup(() => {
-        core.removeTool(name, tool.agentId);
-      });
+      // 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. The renderer stays registered
+      // so past calls still render in the chat history.
+      onCleanup(
+        ɵregisterFrontendTools(core, [tool], (renderer) =>
+          core.addHookRenderToolCall(renderer as VueToolCallRenderer),
+        ),
+      );
     },
     { immediate: true },
   );

package/src/v2/hooks/use-human-in-the-loop.ts

@@ -1,7 +1,7 @@
-import { onScopeDispose, ref } from "vue";
+import { onScopeDispose } from "vue";
 import type { WatchSource } from "vue";
 import { h } from "vue";
-import { ToolCallStatus } from "@copilotkit/core";
+import { ɵbuildHumanInTheLoopTool, ɵhitlRenderProps } from "@copilotkit/core";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useFrontendTool } from "./use-frontend-tool";
 import type {
@@ -15,7 +15,8 @@ import type {
  * Registers a human-in-the-loop frontend tool.
  *
  * The tool pauses execution until `respond` is called from the rendered
- * component during the `executing` phase.
+ * component during the `executing` phase. Each call waits on its own
+ * `respond`, so parallel calls of one tool stay independent.
  *
  * @example
  * ```ts
@@ -31,88 +32,18 @@ export function useHumanInTheLoop<T extends Record<string, unknown>>(
   deps?: WatchSource<unknown>[],
 ) {
   const { copilotkit } = useCopilotKit();
-  const resolvePromiseRef = ref<((result: unknown) => void) | null>(null);
-  const rejectPromiseRef = ref<((error: unknown) => void) | null>(null);
-  const cleanupAbortRef = ref<(() => void) | null>(null);
-
-  const respond = async (result: unknown) => {
-    if (resolvePromiseRef.value) {
-      cleanupAbortRef.value?.();
-      cleanupAbortRef.value = null;
-      resolvePromiseRef.value(result);
-      resolvePromiseRef.value = null;
-      rejectPromiseRef.value = null;
-    }
-  };
-
-  const handler = async (_args: T, context?: { signal?: AbortSignal }) => {
-    const signal = context?.signal;
-    return new Promise((resolve, reject) => {
-      if (signal?.aborted) {
-        reject(new Error("Human-in-the-loop interaction aborted"));
-        return;
-      }
-
-      resolvePromiseRef.value = resolve;
-      rejectPromiseRef.value = reject;
-
-      if (signal) {
-        const onAbort = () => {
-          cleanupAbortRef.value = null;
-          resolvePromiseRef.value = null;
-          const rejectPending = rejectPromiseRef.value;
-          rejectPromiseRef.value = null;
-          rejectPending?.(new Error("Human-in-the-loop interaction aborted"));
-        };
-
-        signal.addEventListener("abort", onAbort, { once: true });
-        cleanupAbortRef.value = () => {
-          signal.removeEventListener("abort", onAbort);
-        };
-      }
-    });
-  };
+  const registry = () => copilotkit.value.ɵhumanInTheLoop;
 
   const RenderComponent: VueToolCallRenderer<T>["render"] = (
     props: VueToolCallRendererRenderProps<T>,
-  ) => {
-    const ToolComponent = tool.render;
-    if (props.status === ToolCallStatus.InProgress) {
-      return h(ToolComponent as Parameters<typeof h>[0], {
-        ...props,
-        name: tool.name,
-        description: tool.description || "",
-        agentId: tool.agentId,
-        respond: undefined,
-      });
-    }
-    if (props.status === ToolCallStatus.Executing) {
-      return h(ToolComponent as Parameters<typeof h>[0], {
-        ...props,
-        name: tool.name,
-        description: tool.description || "",
-        agentId: tool.agentId,
-        respond,
-      });
-    }
-    if (props.status === ToolCallStatus.Complete) {
-      return h(ToolComponent as Parameters<typeof h>[0], {
-        ...props,
-        name: tool.name,
-        description: tool.description || "",
-        agentId: tool.agentId,
-        respond: undefined,
-      });
-    }
-
-    const exhaustiveCheck: never = props;
-    return exhaustiveCheck;
-  };
+  ) =>
+    h(
+      tool.render as Parameters<typeof h>[0],
+      ɵhitlRenderProps<T, typeof props>(props, tool, registry()),
+    );
 
   const frontendTool: VueFrontendTool<T> = {
-    ...tool,
-    type: "human-in-the-loop",
-    handler,
+    ...ɵbuildHumanInTheLoopTool<T>(tool, registry),
     render: RenderComponent,
   };