@copilotkit/vue 2.0.0-rc.2 → 2.0.0-rc.21

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

@@ -1,10 +1,17 @@
 import { defineComponent, h, inject, ref } from "vue";
 import type { WatchSource } from "vue";
 import type { Component, VNodeChild } from "vue";
-import { ToolCallStatus } from "@copilotkit/core";
+import {
+  ɵgetToolCallBadge,
+  ɵnormalizeToolCallStatus,
+  ɵstringifyToolCallAttr,
+  ɵstringifyToolCallPayload,
+} from "@copilotkit/core";
+import type { ToolCallStatus } 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;
@@ -30,24 +37,16 @@ const warnedUnknownStatuses = new Set<string>();
 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";
-    }
+  const normalized = ɵnormalizeToolCallStatus(status);
+  if (normalized !== "unknown") return normalized;
+  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";
 }
 
 /**
@@ -82,30 +81,6 @@ function adaptRendererProps(raw: AdaptInput): DefaultRenderProps {
   };
 }
 
-/**
- * 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]";
-    }
-  }
-}
-
 const DefaultToolCallRenderer = defineComponent({
   props: {
     name: {
@@ -127,7 +102,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 +113,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 +147,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 +216,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 +229,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 +247,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

@@ -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-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,
   };