@copilotkit/vue 1.68.3-canary.1787220377 → 1.69.0

package/src/v2/components/chat/__tests__/CopilotChatToolCallsView.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { defineComponent, h } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
 import { mount } from "@vue/test-utils";
 import type { AssistantMessage, Message, ToolMessage } from "@ag-ui/core";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
@@ -252,6 +252,307 @@ describe("CopilotChatToolCallsView", () => {
     );
   });
 
+  it("updates generic consumer-provided tool-call slots when parent state changes", async () => {
+    const message = baseAssistantMessage();
+    const label = ref("first");
+    const Harness = defineComponent({
+      setup() {
+        return () => {
+          const currentLabel = label.value;
+          return h(
+            CopilotChatToolCallsView,
+            { message, messages: [message] },
+            {
+              "tool-call": () =>
+                h("div", { "data-testid": "slot-label" }, currentLabel),
+            },
+          );
+        };
+      },
+    });
+
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: "/api/copilotkit" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "thread-1", agentId: "default" },
+            { default: () => h(Harness) },
+          ),
+      },
+    });
+
+    expect(wrapper.get("[data-testid='slot-label']").text()).toBe("first");
+    label.value = "second";
+    await nextTick();
+    expect(wrapper.get("[data-testid='slot-label']").text()).toBe("second");
+  });
+
+  it("updates exact consumer-provided tool-call slots when parent state changes", async () => {
+    const message = baseAssistantMessage();
+    const label = ref("first");
+    const Harness = defineComponent({
+      setup() {
+        return () => {
+          const currentLabel = label.value;
+          return h(
+            CopilotChatToolCallsView,
+            { message, messages: [message] },
+            {
+              "tool-call-search_docs": () =>
+                h("div", { "data-testid": "slot-label" }, currentLabel),
+            },
+          );
+        };
+      },
+    });
+
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: "/api/copilotkit" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "thread-1", agentId: "default" },
+            { default: () => h(Harness) },
+          ),
+      },
+    });
+
+    expect(wrapper.get("[data-testid='slot-label']").text()).toBe("first");
+    label.value = "second";
+    await nextTick();
+    expect(wrapper.get("[data-testid='slot-label']").text()).toBe("second");
+  });
+
+  it("forwards a consumer-provided tool-call slot when slot membership changes", async () => {
+    const message = baseAssistantMessage();
+    const showCustom = ref(false);
+    const Harness = defineComponent({
+      components: { CopilotChatToolCallsView },
+      setup() {
+        return { message, showCustom };
+      },
+      template: `
+        <CopilotChatToolCallsView :message="message" :messages="[message]">
+          <template v-if="showCustom" #tool-call-search_docs>
+            <div data-testid="custom-tool-slot">CUSTOM</div>
+          </template>
+        </CopilotChatToolCallsView>
+      `,
+    });
+
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: "/api/copilotkit" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "thread-1", agentId: "default" },
+            { default: () => h(Harness) },
+          ),
+      },
+    });
+
+    expect(wrapper.find("[data-testid='custom-tool-slot']").exists()).toBe(
+      false,
+    );
+
+    showCustom.value = true;
+    await nextTick();
+    expect(wrapper.find("[data-testid='custom-tool-slot']").text()).toBe(
+      "CUSTOM",
+    );
+
+    showCustom.value = false;
+    await nextTick();
+    expect(wrapper.find("[data-testid='custom-tool-slot']").exists()).toBe(
+      false,
+    );
+  });
+
+  it("skips unchanged fallback renderers when an unrelated parent value changes", async () => {
+    const message = baseAssistantMessage();
+    const label = ref("first");
+    let renderCount = 0;
+    const ToolRenderer = defineComponent({
+      setup() {
+        return () => {
+          renderCount += 1;
+          return h("div", { "data-testid": "core-render-tool" }, "rendered");
+        };
+      },
+    });
+    const RegisterRenderer = defineComponent({
+      setup() {
+        const { copilotkit } = useCopilotKit();
+        copilotkit.value.setRenderToolCalls([
+          defineToolCallRenderer({
+            name: "search_docs",
+            args: undefined,
+            render: ToolRenderer,
+          }),
+        ]);
+        return () => null;
+      },
+    });
+    const Harness = defineComponent({
+      setup() {
+        return () =>
+          h("div", [
+            h("span", { "data-testid": "unrelated-value" }, label.value),
+            h(RegisterRenderer),
+            h(CopilotChatToolCallsView, { message, messages: [message] }),
+          ]);
+      },
+    });
+
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: "/api/copilotkit" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "thread-1", agentId: "default" },
+            { default: () => h(Harness) },
+          ),
+      },
+    });
+
+    expect(renderCount).toBe(1);
+    label.value = "second";
+    await nextTick();
+    expect(wrapper.get("[data-testid='unrelated-value']").text()).toBe(
+      "second",
+    );
+    expect(renderCount).toBe(1);
+  });
+
+  it("updates a fallback renderer when the tool name changes", async () => {
+    const message = baseAssistantMessage();
+    const toolCall = message.toolCalls![0];
+    const currentMessage = ref(message);
+    const ToolRenderer = defineComponent({
+      props: {
+        name: { type: String, required: true },
+      },
+      template: `<div data-testid="fallback-tool-name">{{ name }}</div>`,
+    });
+    const RegisterRenderer = defineComponent({
+      setup() {
+        const { copilotkit } = useCopilotKit();
+        copilotkit.value.setRenderToolCalls([
+          defineToolCallRenderer({ name: "*", render: ToolRenderer }),
+        ]);
+        return () => null;
+      },
+    });
+    const Harness = defineComponent({
+      setup() {
+        return () =>
+          h("div", [
+            h(RegisterRenderer),
+            h(CopilotChatToolCallsView, {
+              message: currentMessage.value,
+              messages: [currentMessage.value],
+            }),
+          ]);
+      },
+    });
+
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: "/api/copilotkit" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "thread-1", agentId: "default" },
+            { default: () => h(Harness) },
+          ),
+      },
+    });
+
+    expect(wrapper.get("[data-testid='fallback-tool-name']").text()).toBe(
+      "search_docs",
+    );
+    currentMessage.value = {
+      ...message,
+      toolCalls: [
+        {
+          ...toolCall,
+          function: { ...toolCall.function, name: "other_tool" },
+        },
+      ],
+    };
+    await nextTick();
+    expect(wrapper.get("[data-testid='fallback-tool-name']").text()).toBe(
+      "other_tool",
+    );
+  });
+
+  it("updates a fallback renderer when agent-specific selection changes", async () => {
+    const message = baseAssistantMessage();
+    const agentId = ref("agent-a");
+    const AgentARenderer = defineComponent({
+      template: `<div data-testid="agent-renderer">agent-a</div>`,
+    });
+    const AgentBRenderer = defineComponent({
+      template: `<div data-testid="agent-renderer">agent-b</div>`,
+    });
+    const RegisterRenderer = defineComponent({
+      setup() {
+        const { copilotkit } = useCopilotKit();
+        copilotkit.value.setRenderToolCalls([
+          defineToolCallRenderer({
+            name: "search_docs",
+            agentId: "agent-a",
+            render: AgentARenderer,
+          }),
+          defineToolCallRenderer({
+            name: "search_docs",
+            agentId: "agent-b",
+            render: AgentBRenderer,
+          }),
+        ]);
+        return () => null;
+      },
+    });
+    const Harness = defineComponent({
+      setup() {
+        return () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "thread-1", agentId: agentId.value },
+            {
+              default: () =>
+                h("div", [
+                  h(RegisterRenderer),
+                  h(CopilotChatToolCallsView, {
+                    message,
+                    messages: [message],
+                  }),
+                ]),
+            },
+          );
+      },
+    });
+
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: "/api/copilotkit" },
+      slots: { default: () => h(Harness) },
+    });
+
+    expect(wrapper.get("[data-testid='agent-renderer']").text()).toBe(
+      "agent-a",
+    );
+    agentId.value = "agent-b";
+    await nextTick();
+    expect(wrapper.get("[data-testid='agent-renderer']").text()).toBe(
+      "agent-b",
+    );
+  });
+
   it("prefers current-agent renderers over unscoped and wildcard renderers", () => {
     const message = baseAssistantMessage("search_docs");
     const RegisterRenderer = defineComponent({

package/src/v2/components/chat/__tests__/CopilotThreadsDrawer.ssr.test.ts

@@ -21,5 +21,5 @@ describe("@copilotkit/vue SSR import safety", () => {
     const mod = await import("../../../../index");
     expect(mod.CopilotThreadsDrawer).toBeDefined();
     expect(evaluated.current).toBe(false);
-  });
+  }, 20_000);
 });

package/src/v2/components/chat/copilotChatToolCallItemRender.ts

@@ -0,0 +1,126 @@
+import type { Message, ToolCall, ToolMessage } from "@ag-ui/core";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { ToolCallStatus } from "@copilotkit/core";
+import { partialJSONParse } from "@copilotkit/shared";
+import type { CopilotChatToolCallRenderSlotProps } from "./types";
+import type {
+  VueToolCallRenderer,
+  VueToolCallRendererRenderProps,
+} from "../../types";
+
+export function findToolMessage(
+  messages: Message[],
+  toolCallId: string,
+): ToolMessage | undefined {
+  return messages.find(
+    (message) =>
+      message.role === "tool" &&
+      (message as ToolMessage).toolCallId === toolCallId,
+  ) as ToolMessage | undefined;
+}
+
+export function getToolCallSlotName(toolName: string): `tool-call-${string}` {
+  return `tool-call-${toolName}`;
+}
+
+export function getCoreRenderConfig(
+  toolCall: ToolCall,
+  renderToolCalls: readonly VueToolCallRenderer<unknown>[],
+  agentId: string,
+): VueToolCallRenderer<unknown> | undefined {
+  const exactMatches = renderToolCalls.filter(
+    (renderConfig) => renderConfig.name === toolCall.function.name,
+  );
+
+  return (
+    exactMatches.find((renderConfig) => renderConfig.agentId === agentId) ??
+    exactMatches.find((renderConfig) => !renderConfig.agentId) ??
+    exactMatches[0] ??
+    renderToolCalls.find((renderConfig) => renderConfig.name === "*")
+  );
+}
+
+export function getToolCallRenderProps(
+  toolCall: ToolCall,
+  messages: Message[],
+  executingToolCallIds: ReadonlySet<string>,
+): CopilotChatToolCallRenderSlotProps {
+  const toolMessage = findToolMessage(messages, toolCall.id);
+  const parsedArgs = partialJSONParse(toolCall.function.arguments);
+
+  if (toolMessage) {
+    return {
+      name: toolCall.function.name,
+      args: parsedArgs,
+      status: ToolCallStatus.Complete,
+      result: toolMessage.content,
+      toolCall,
+      toolMessage,
+    };
+  }
+
+  const isExecuting = executingToolCallIds.has(toolCall.id);
+  return {
+    name: toolCall.function.name,
+    args: parsedArgs,
+    status: isExecuting ? ToolCallStatus.Executing : ToolCallStatus.InProgress,
+    result: undefined,
+    toolCall,
+    toolMessage: undefined,
+  };
+}
+
+export function getCoreRenderProps(
+  toolCall: ToolCall,
+  messages: Message[],
+  executingToolCallIds: ReadonlySet<string>,
+): VueToolCallRendererRenderProps<unknown> {
+  const toolMessage = findToolMessage(messages, toolCall.id);
+  const parsedArgs = partialJSONParse(toolCall.function.arguments);
+
+  if (toolMessage) {
+    return {
+      name: toolCall.function.name,
+      toolCallId: toolCall.id,
+      args: parsedArgs,
+      status: ToolCallStatus.Complete,
+      result: toolMessage.content,
+    };
+  }
+
+  const isExecuting = executingToolCallIds.has(toolCall.id);
+  if (isExecuting) {
+    return {
+      name: toolCall.function.name,
+      toolCallId: toolCall.id,
+      args: parsedArgs,
+      status: ToolCallStatus.Executing,
+      result: undefined,
+    };
+  }
+
+  return {
+    name: toolCall.function.name,
+    toolCallId: toolCall.id,
+    args: parsedArgs && typeof parsedArgs === "object" ? parsedArgs : {},
+    status: ToolCallStatus.InProgress,
+    result: undefined,
+  };
+}
+
+export function getToolCallMemoDeps(
+  toolCall: ToolCall,
+  messages: Message[],
+  executingToolCallIds: ReadonlySet<string>,
+  renderToolCalls: readonly VueToolCallRenderer<unknown>[],
+  agentId: string = DEFAULT_AGENT_ID,
+): unknown[] {
+  return [
+    toolCall.id,
+    toolCall.function.name,
+    toolCall.function.arguments,
+    findToolMessage(messages, toolCall.id)?.content,
+    executingToolCallIds.has(toolCall.id),
+    getCoreRenderConfig(toolCall, renderToolCalls, agentId)?.render,
+  ];
+}