@copilotkit/vue 1.68.3 → 1.69.1

package/src/v2/components/chat/CopilotChatToolCallsView.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import type {
-  AssistantMessage,
-  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 { useCopilotKit } from "../../providers/useCopilotKit";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
+import { inject, useSlots } from "vue";
+import type { AssistantMessage, Message } from "@ag-ui/core";
 import type { CopilotChatToolCallRenderSlotProps } from "./types";
-import type { VueToolCallRenderer } from "../../types";
-import type { VueToolCallRendererRenderProps } from "../../types";
+import CopilotChatToolCallItem from "./CopilotChatToolCallItem.vue";
+import SaveSnippetBeside from "./SaveSnippetBeside.vue";
+import { InspectorKey } from "../../providers/keys";
+import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
+import { CopilotChatDefaultLabels } from "../../providers/types";
+import { IconBookmark } from "../icons";
 
 const props = withDefaults(
   defineProps<{
@@ -31,131 +26,78 @@ defineSlots<{
   ) => unknown;
 }>();
 
-const { copilotkit, executingToolCallIds } = useCopilotKit();
-const config = useCopilotChatConfiguration();
-
-function findToolMessage(toolCallId: string): ToolMessage | undefined {
-  return props.messages.find(
-    (message) =>
-      message.role === "tool" &&
-      (message as ToolMessage).toolCallId === toolCallId,
-  ) as ToolMessage | undefined;
-}
-
-function getSlotName(toolName: string): `tool-call-${string}` {
-  return `tool-call-${toolName}`;
-}
-
-function isExecutingToolCall(toolCallId: string): boolean {
-  return executingToolCallIds.value.has(toolCallId);
-}
-
-function getToolResultContent(toolCallId: string): string | undefined {
-  return findToolMessage(toolCallId)?.content;
-}
-
-function getRenderProps(
-  toolCall: ToolCall,
-): CopilotChatToolCallRenderSlotProps {
-  const toolMessage = findToolMessage(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 = isExecutingToolCall(toolCall.id);
-  return {
-    name: toolCall.function.name,
-    args: parsedArgs,
-    status: isExecuting ? ToolCallStatus.Executing : ToolCallStatus.InProgress,
-    result: undefined,
-    toolCall,
-    toolMessage: undefined,
-  };
+type ToolCallSlotName = "tool-call" | `tool-call-${string}`;
+const componentSlots = useSlots() as Record<
+  ToolCallSlotName,
+  (props?: unknown) => unknown
+>;
+function getForwardedSlotNames(): ToolCallSlotName[] {
+  return Object.keys(componentSlots) as ToolCallSlotName[];
 }
 
-function getCoreRenderProps(
-  toolCall: ToolCall,
-): VueToolCallRendererRenderProps<unknown> {
-  const toolMessage = findToolMessage(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,
-    };
+// A streaming tool call has truncated arguments. Do not offer to capture it
+// until the JSON is complete, or the snippet holds a broken partial payload.
+function hasCompleteArgs(args: string | undefined): boolean {
+  const trimmed = (args ?? "").trim();
+  if (!trimmed) {
+    return true;
   }
-
-  const isExecuting = isExecutingToolCall(toolCall.id);
-  if (isExecuting) {
-    return {
-      name: toolCall.function.name,
-      toolCallId: toolCall.id,
-      args: parsedArgs,
-      status: ToolCallStatus.Executing,
-      result: undefined,
-    };
+  try {
+    JSON.parse(trimmed);
+    return true;
+  } catch {
+    return false;
   }
-
-  return {
-    name: toolCall.function.name,
-    toolCallId: toolCall.id,
-    args: parsedArgs && typeof parsedArgs === "object" ? parsedArgs : {},
-    status: ToolCallStatus.InProgress,
-    result: undefined,
-  };
 }
 
-function getCoreRenderConfig(
-  toolCall: ToolCall,
-): VueToolCallRenderer<unknown> | undefined {
-  const renderToolCalls = copilotkit.value.renderToolCalls;
-  const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
-  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 === "*")
-  );
+const inspector = inject(InspectorKey, null);
+const chatConfiguration = useCopilotChatConfiguration();
+const canSave = (toolCall: { function: { arguments: string } }) =>
+  inspector?.isLocalInspectorEnabled.value === true &&
+  hasCompleteArgs(toolCall.function.arguments);
+const saveLabel = () =>
+  chatConfiguration.value?.labels.assistantMessageToolbarSaveSnippetLabel ??
+  CopilotChatDefaultLabels.assistantMessageToolbarSaveSnippetLabel;
+
+function saveToolCall(toolCall: {
+  id: string;
+  function: { name: string; arguments: string };
+}) {
+  void inspector?.saveEventSnippet({
+    kind: "tool-call",
+    messageId: props.message.id,
+    toolCallId: toolCall.id,
+    toolName: toolCall.function.name,
+    argsJson: toolCall.function.arguments || "{}",
+    threadId: chatConfiguration.value?.threadId,
+    agentId: chatConfiguration.value?.agentId,
+  });
 }
 </script>
 
 <template>
-  <template v-for="toolCall in message.toolCalls ?? []" :key="toolCall.id">
-    <slot
-      :name="getSlotName(toolCall.function.name)"
-      v-bind="getRenderProps(toolCall)"
-    >
-      <slot name="tool-call" v-bind="getRenderProps(toolCall)">
-        <component
-          :is="getCoreRenderConfig(toolCall)?.render"
-          v-if="getCoreRenderConfig(toolCall)"
-          v-bind="getCoreRenderProps(toolCall)"
-          v-memo="[
-            toolCall.id,
-            toolCall.function.arguments,
-            getToolResultContent(toolCall.id),
-            isExecutingToolCall(toolCall.id),
-            getCoreRenderConfig(toolCall)?.render,
-          ]"
-        />
-      </slot>
-    </slot>
-  </template>
+  <div v-for="toolCall in message.toolCalls ?? []" :key="toolCall.id">
+    <SaveSnippetBeside :enabled="canSave(toolCall)">
+      <CopilotChatToolCallItem :tool-call="toolCall" :messages="messages">
+        <template
+          v-for="slotName in getForwardedSlotNames()"
+          :key="slotName"
+          #[slotName]="slotProps"
+        >
+          <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+      </CopilotChatToolCallItem>
+      <template #save>
+        <button
+          type="button"
+          class="cpk:inline-flex cpk:h-8 cpk:w-8 cpk:items-center cpk:justify-center cpk:rounded-md cpk:p-0 cpk:text-[rgb(93,93,93)] cpk:hover:bg-[#E8E8E8] cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]"
+          data-testid="copilot-tool-save-snippet-button"
+          :aria-label="`${saveLabel()} (Local Only)`"
+          @click="saveToolCall(toolCall)"
+        >
+          <IconBookmark class="cpk:size-[18px]" />
+        </button>
+      </template>
+    </SaveSnippetBeside>
+  </div>
 </template>

package/src/v2/components/chat/SaveSnippetBeside.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import {
+  SAVE_SNIPPET_BESIDE_BODY_CLASS,
+  SAVE_SNIPPET_BESIDE_SAVE_CLASS,
+  SAVE_SNIPPET_BESIDE_WRAP_CLASS,
+  findOverflowAncestor,
+  measureSaveSnippetSide,
+  saveSnippetBesideStyle,
+} from "./save-snippet-beside";
+
+const props = defineProps<{
+  enabled: boolean;
+}>();
+
+const wrapRef = ref<HTMLElement | null>(null);
+const bodyRef = ref<HTMLElement | null>(null);
+const side = ref<"left" | "right">("right");
+let observer: ResizeObserver | undefined;
+
+function measure() {
+  const wrap = wrapRef.value;
+  const body = bodyRef.value;
+  if (!props.enabled || !wrap || !body) {
+    return;
+  }
+  side.value = measureSaveSnippetSide(wrap, body);
+}
+
+function bindObserver() {
+  observer?.disconnect();
+  const wrap = wrapRef.value;
+  const body = bodyRef.value;
+  if (!props.enabled || !wrap || !body) {
+    return;
+  }
+  measure();
+  if (typeof ResizeObserver === "undefined") {
+    return;
+  }
+  observer = new ResizeObserver(measure);
+  observer.observe(wrap);
+  observer.observe(body);
+  const clip = findOverflowAncestor(wrap);
+  if (clip !== wrap) {
+    observer.observe(clip);
+  }
+}
+
+onMounted(() => {
+  watch([wrapRef, bodyRef, () => props.enabled], () => bindObserver(), {
+    flush: "post",
+    immediate: true,
+  });
+  window.addEventListener("resize", measure);
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  window.removeEventListener("resize", measure);
+});
+</script>
+
+<template>
+  <slot v-if="!enabled" />
+  <div
+    v-else
+    ref="wrapRef"
+    :class="SAVE_SNIPPET_BESIDE_WRAP_CLASS"
+    :data-save-snippet-side="side"
+  >
+    <div ref="bodyRef" :class="SAVE_SNIPPET_BESIDE_BODY_CLASS">
+      <slot />
+    </div>
+    <div
+      :class="SAVE_SNIPPET_BESIDE_SAVE_CLASS"
+      :style="saveSnippetBesideStyle(side)"
+    >
+      <slot name="save" />
+    </div>
+  </div>
+</template>

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);
 });