@copilotkit/vue 2.0.0-rc.1 → 2.0.0-rc.11

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

@@ -1,8 +1,10 @@
-import { defineComponent, h, ref } from "vue";
+import { defineComponent, h, inject, ref } from "vue";
 import type { WatchSource } from "vue";
 import type { Component, VNodeChild } from "vue";
 import { 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";
 
 type DefaultRenderProps = {
   name: string;
@@ -135,8 +137,34 @@ const DefaultToolCallRenderer = defineComponent({
   },
   setup(props) {
     const isExpanded = ref(false);
+    const groupContext = inject(ToolCallGroupContextKey, null);
 
     return () => {
+      const group = groupContext?.value;
+      // 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),
+          name: props.name,
+          parameters: props.parameters,
+          result: props.result,
+          status:
+            props.status === "complete"
+              ? group.failedIds.has(props.toolCallId)
+                ? "failed"
+                : "done"
+              : group.active
+                ? "running"
+                : "stopped",
+          appearance: group.appearance,
+        });
+      }
+
       const isActive =
         props.status === "inProgress" || props.status === "executing";
       const isComplete = props.status === "complete";
@@ -145,7 +173,10 @@ const DefaultToolCallRenderer = defineComponent({
         : isComplete
           ? "Done"
           : props.status;
+      const tone = isActive ? "running" : isComplete ? "done" : "other";
 
+      // Markup and classes match React's DefaultToolCallRenderer; styles live
+      // in @copilotkit/core (default-tool-call.css).
       return h(
         "div",
         {
@@ -155,77 +186,99 @@ const DefaultToolCallRenderer = defineComponent({
           "data-status": props.status,
           "data-args": safeStringifyForAttr(props.parameters),
           "data-result": safeStringifyForAttr(props.result),
-          style: { marginTop: "8px", paddingBottom: "8px" },
+          class: "cpk-default-tool-call",
         },
         [
-          h(
-            "div",
-            {
-              style: {
-                borderRadius: "12px",
-                border: "1px solid #e4e4e7",
-                backgroundColor: "#fafafa",
-                padding: "14px 16px",
-              },
-            },
-            [
-              h(
-                "button",
-                {
-                  type: "button",
-                  "aria-expanded": String(isExpanded.value),
-                  onClick: () => {
-                    isExpanded.value = !isExpanded.value;
-                  },
-                  style: {
-                    width: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    gap: "10px",
-                    cursor: "pointer",
-                    border: "none",
-                    padding: 0,
-                    margin: 0,
-                    background: "transparent",
-                    textAlign: "left",
-                  },
+          h("div", { class: "cpk-default-tool-call-card" }, [
+            h(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": String(isExpanded.value),
+                onClick: () => {
+                  isExpanded.value = !isExpanded.value;
                 },
-                [
+                class: "cpk-default-tool-call-header",
+                style: { font: "inherit" },
+              },
+              [
+                h("div", { class: "cpk-default-tool-call-title" }, [
                   h(
-                    "span",
+                    "svg",
                     {
-                      "data-testid": "copilot-tool-render-name",
-                      style: { fontWeight: "600" },
+                      class: [
+                        "cpk-default-tool-call-chevron",
+                        isExpanded.value &&
+                          "cpk-default-tool-call-chevron-open",
+                      ],
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      "stroke-width": 2,
+                      stroke: "currentColor",
                     },
-                    props.name,
+                    [
+                      h("path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        d: "M8.25 4.5l7.5 7.5-7.5 7.5",
+                      }),
+                    ],
                   ),
+                  h("span", {
+                    class: `cpk-default-tool-call-dot cpk-default-tool-call-dot-${tone}`,
+                  }),
                   h(
                     "span",
-                    { "data-testid": "copilot-tool-render-status" },
-                    statusLabel,
+                    {
+                      "data-testid": "copilot-tool-render-name",
+                      class: "cpk-default-tool-call-name",
+                    },
+                    props.name,
                   ),
-                ],
-              ),
-              isExpanded.value
-                ? h("div", { style: { marginTop: "12px" } }, [
-                    h("div", "Arguments"),
-                    h("pre", safeStringifyForPre(props.parameters ?? {})),
-                    props.result !== undefined
-                      ? h("div", [
-                          h("div", "Result"),
-                          h(
-                            "pre",
-                            typeof props.result === "string"
-                              ? props.result
-                              : safeStringifyForPre(props.result),
-                          ),
-                        ])
-                      : null,
-                  ])
-                : null,
-            ],
-          ),
+                ]),
+                h(
+                  "span",
+                  {
+                    "data-testid": "copilot-tool-render-status",
+                    class: `cpk-default-tool-call-badge cpk-default-tool-call-badge-${tone}`,
+                  },
+                  statusLabel,
+                ),
+              ],
+            ),
+            isExpanded.value
+              ? h("div", { class: "cpk-default-tool-call-details" }, [
+                  h("div", [
+                    h(
+                      "div",
+                      { class: "cpk-default-tool-call-label" },
+                      "Arguments",
+                    ),
+                    h(
+                      "pre",
+                      { class: "cpk-default-tool-call-code" },
+                      safeStringifyForPre(props.parameters ?? {}),
+                    ),
+                  ]),
+                  props.result !== undefined
+                    ? h("div", [
+                        h(
+                          "div",
+                          { class: "cpk-default-tool-call-label" },
+                          "Result",
+                        ),
+                        h(
+                          "pre",
+                          { class: "cpk-default-tool-call-code" },
+                          typeof props.result === "string"
+                            ? props.result
+                            : safeStringifyForPre(props.result),
+                        ),
+                      ])
+                    : null,
+                ])
+              : null,
+          ]),
         ],
       );
     };
@@ -259,6 +312,12 @@ export function useDefaultRenderTool(
     render?:
       | ((props: DefaultRenderProps) => VNodeChild)
       | Component<DefaultRenderProps>;
+    /**
+     * Let the chat group calls your `render` draws, like it groups the
+     * built-in card's (see `toolCallDisplay` on `CopilotChatMessageView`).
+     * Off by default for a custom `render`, since it may draw nothing.
+     */
+    group?: boolean;
   },
   deps?: WatchSource<unknown>[],
 ): void {
@@ -312,6 +371,8 @@ export function useDefaultRenderTool(
     {
       name: "*",
       render: registeredRender,
+      // The built-in card draws a row inside a group; a custom render opts in.
+      group: userRender ? config?.group === true : true,
     },
     deps,
   );

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/hooks/use-render-tool.ts

@@ -46,6 +46,7 @@ type RenderToolConfig<S extends StandardSchemaV1> = {
     | ((props: RenderToolProps<S>) => VNodeChild)
     | Component<RenderToolProps<S>>;
   agentId?: string;
+  group?: boolean;
 };
 
 export function useRenderTool(
@@ -53,6 +54,8 @@ export function useRenderTool(
     name: "*";
     render: ((props: any) => VNodeChild) | Component<any>;
     agentId?: string;
+    /** Let the chat group the calls this renderer draws (see `toolCallDisplay`). */
+    group?: boolean;
   },
   deps?: WatchSource<unknown>[],
 ): void;
@@ -65,6 +68,8 @@ export function useRenderTool<S extends StandardSchemaV1>(
       | ((props: RenderToolProps<S>) => VNodeChild)
       | Component<RenderToolProps<S>>;
     agentId?: string;
+    /** Let the chat group the calls this renderer draws (see `toolCallDisplay`). */
+    group?: boolean;
   },
   deps?: WatchSource<unknown>[],
 ): void;
@@ -81,6 +86,7 @@ export function useRenderTool<S extends StandardSchemaV1>(
       () => copilotkit.value,
       () => config.name,
       () => config.agentId,
+      () => config.group,
       () => extraDeps.length,
       ...extraDeps,
     ],
@@ -104,6 +110,7 @@ export function useRenderTool<S extends StandardSchemaV1>(
                   parameters: props.args,
                 } as RenderToolProps<S>),
               ...(config.agentId ? { agentId: config.agentId } : {}),
+              ...(config.group ? { group: true } : {}),
             })
           : defineToolCallRenderer({
               name: config.name,
@@ -116,6 +123,7 @@ export function useRenderTool<S extends StandardSchemaV1>(
                   parameters: props.args,
                 } as RenderToolProps<S>),
               ...(config.agentId ? { agentId: config.agentId } : {}),
+              ...(config.group ? { group: true } : {}),
             });
 
       copilotkit.value.addHookRenderToolCall(

package/src/v2/index.ts

@@ -16,6 +16,9 @@ export * from "./components";
 export { vueBasicCatalog } from "./components/a2ui/catalog";
 export * from "./hooks";
 export * from "./providers";
+export { CopilotKitStyles } from "./styles/CopilotKitStyles";
+export type { A2UIMessageRendererOptions } from "./components/A2UIMessageRenderer";
+export type { A2UIRecoveryRendererOptions } from "./components/a2ui/A2UIRecoveryStates";
 export * from "./types";
 export * from "./lib/vue-core";
 export * from "./lib/processPartialHtml";