@copilotkit/vue 1.68.3 → 1.69.0

package/dist/v2/components/chat/CopilotChatToolCallItem.vue.d.ts

@@ -0,0 +1,21 @@
+import type { Message, ToolCall } from "@ag-ui/core";
+import type { CopilotChatToolCallRenderSlotProps } from "./types";
+type __VLS_Props = {
+    toolCall: ToolCall;
+    messages?: Message[];
+};
+type __VLS_Slots = {
+    "tool-call"?: (props: CopilotChatToolCallRenderSlotProps) => unknown;
+    [key: `tool-call-${string}`]: (props: CopilotChatToolCallRenderSlotProps) => unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    messages: Message[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=CopilotChatToolCallItem.vue.d.ts.map

package/dist/v2/components/chat/CopilotChatToolCallItem.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopilotChatToolCallItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/chat/CopilotChatToolCallItem.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIrD,OAAO,KAAK,EAAE,kCAAkC,EAAE,MAAM,SAAS,CAAC;AASlE,KAAK,WAAW,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB,CAAC;AAQJ,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,kCAAkC,KAAK,OAAO,CAAC;IACrE,CAAC,GAAG,EAAE,aAAa,MAAM,EAAE,GAAG,CAC5B,KAAK,EAAE,kCAAkC,KACtC,OAAO,CAAC;CACd,CAAC;AA6FF,QAAA,MAAM,eAAe;cA3GN,OAAO,EAAE;6EAkHtB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/v2/components/chat/CopilotChatToolCallsView.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopilotChatToolCallsView.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/chat/CopilotChatToolCallsView.vue"],"names":[],"mappings":"AAmKA,OAAO,KAAK,EACV,gBAAgB,EAChB,OAAO,EAGR,MAAM,aAAa,CAAC;AAMrB,OAAO,KAAK,EAAE,kCAAkC,EAAE,MAAM,SAAS,CAAC;AAIlE,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB,CAAC;AAQJ,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,kCAAkC,KAAK,OAAO,CAAC;IACrE,CAAC,GAAG,EAAE,aAAa,MAAM,EAAE,GAAG,CAC5B,KAAK,EAAE,kCAAkC,KACtC,OAAO,CAAC;CACd,CAAC;AAuKF,QAAA,MAAM,eAAe;cArLN,OAAO,EAAE;6EA4LtB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CopilotChatToolCallsView.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/chat/CopilotChatToolCallsView.vue"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,KAAK,EAAE,kCAAkC,EAAE,MAAM,SAAS,CAAC;AAGlE,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB,CAAC;AAQJ,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,kCAAkC,KAAK,OAAO,CAAC;IACrE,CAAC,GAAG,EAAE,aAAa,MAAM,EAAE,GAAG,CAC5B,KAAK,EAAE,kCAAkC,KACtC,OAAO,CAAC;CACd,CAAC;AAoEF,QAAA,MAAM,eAAe;cAlFN,OAAO,EAAE;6EAyFtB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/v2/components/chat/copilotChatToolCallItemRender.d.ts

@@ -0,0 +1,10 @@
+import type { Message, ToolCall, ToolMessage } from "@ag-ui/core";
+import type { CopilotChatToolCallRenderSlotProps } from "./types";
+import type { VueToolCallRenderer, VueToolCallRendererRenderProps } from "../../types";
+export declare function findToolMessage(messages: Message[], toolCallId: string): ToolMessage | undefined;
+export declare function getToolCallSlotName(toolName: string): `tool-call-${string}`;
+export declare function getCoreRenderConfig(toolCall: ToolCall, renderToolCalls: readonly VueToolCallRenderer<unknown>[], agentId: string): VueToolCallRenderer<unknown> | undefined;
+export declare function getToolCallRenderProps(toolCall: ToolCall, messages: Message[], executingToolCallIds: ReadonlySet<string>): CopilotChatToolCallRenderSlotProps;
+export declare function getCoreRenderProps(toolCall: ToolCall, messages: Message[], executingToolCallIds: ReadonlySet<string>): VueToolCallRendererRenderProps<unknown>;
+export declare function getToolCallMemoDeps(toolCall: ToolCall, messages: Message[], executingToolCallIds: ReadonlySet<string>, renderToolCalls: readonly VueToolCallRenderer<unknown>[], agentId?: string): unknown[];
+//# sourceMappingURL=copilotChatToolCallItemRender.d.ts.map

package/dist/v2/components/chat/copilotChatToolCallItemRender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copilotChatToolCallItemRender.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/chat/copilotChatToolCallItemRender.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAIlE,OAAO,KAAK,EAAE,kCAAkC,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,KAAK,EACV,mBAAmB,EACnB,8BAA8B,EAC/B,MAAM,aAAa,CAAC;AAErB,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,OAAO,EAAE,EACnB,UAAU,EAAE,MAAM,GACjB,WAAW,GAAG,SAAS,CAMzB;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,GAAG,aAAa,MAAM,EAAE,CAE3E;AAED,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,SAAS,mBAAmB,CAAC,OAAO,CAAC,EAAE,EACxD,OAAO,EAAE,MAAM,GACd,mBAAmB,CAAC,OAAO,CAAC,GAAG,SAAS,CAW1C;AAED,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,OAAO,EAAE,EACnB,oBAAoB,EAAE,WAAW,CAAC,MAAM,CAAC,GACxC,kCAAkC,CAwBpC;AAED,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,OAAO,EAAE,EACnB,oBAAoB,EAAE,WAAW,CAAC,MAAM,CAAC,GACxC,8BAA8B,CAAC,OAAO,CAAC,CAgCzC;AAED,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,OAAO,EAAE,EACnB,oBAAoB,EAAE,WAAW,CAAC,MAAM,CAAC,EACzC,eAAe,EAAE,SAAS,mBAAmB,CAAC,OAAO,CAAC,EAAE,EACxD,OAAO,GAAE,MAAyB,GACjC,OAAO,EAAE,CASX"}

package/dist/v2/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@copilotkit/core"),i=require("@ag-ui/client"),e=require("../use-render-activity-message-bkrPa-92.cjs"),n=require("@copilotkit/shared");exports.A2UIActivityContentSchema=e.A2UIActivityContentSchema;exports.A2UISurfaceActivityRenderer=e._sfc_main;exports.A2UISurfaceActivityType=e.A2UISurfaceActivityType;exports.CopilotChat=e.CopilotChat;exports.CopilotChatAssistantMessage=e._sfc_main$1;exports.CopilotChatAttachmentQueue=e._sfc_main$2;exports.CopilotChatAttachmentRenderer=e._sfc_main$3;exports.CopilotChatAudioRecorder=e._sfc_main$4;exports.CopilotChatConfigurationProvider=e._sfc_main$5;exports.CopilotChatDefaultLabels=e.CopilotChatDefaultLabels;exports.CopilotChatInput=e._sfc_main$6;exports.CopilotChatMessageView=e._sfc_main$7;exports.CopilotChatReasoningMessage=e._sfc_main$8;exports.CopilotChatSuggestionPill=e._sfc_main$9;exports.CopilotChatSuggestionView=e._sfc_main$10;exports.CopilotChatToggleButton=e.CopilotChatToggleButton;exports.CopilotChatToggleButtonCloseIcon=e.CopilotChatToggleButtonCloseIcon;exports.CopilotChatToggleButtonOpenIcon=e.CopilotChatToggleButtonOpenIcon;exports.CopilotChatToolCallsView=e._sfc_main$11;exports.CopilotChatUserMessage=e._sfc_main$12;exports.CopilotChatView=e._sfc_main$13;exports.CopilotKitCoreVue=e.CopilotKitCoreVue;exports.CopilotKitInspector=e._sfc_main$14;exports.CopilotKitProvider=e._sfc_main$15;exports.CopilotModalHeader=e.CopilotModalHeader;exports.CopilotPopup=e._sfc_main$16;exports.CopilotPopupView=e.CopilotPopupView;exports.CopilotSidebar=e._sfc_main$17;exports.CopilotSidebarView=e.CopilotSidebarView;exports.CopilotThreadsDrawer=e._sfc_main$18;exports.GenerateSandboxedUiArgsSchema=e.GenerateSandboxedUiArgsSchema;exports.LicenseContextKey=e.LicenseContextKey;exports.MCPAppsActivityContentSchema=e.MCPAppsActivityContentSchema;exports.MCPAppsActivityRenderer=e.MCPAppsActivityRenderer;exports.MCPAppsActivityType=e.MCPAppsActivityType;exports.OpenGenerativeUIActivityRenderer=e.OpenGenerativeUIActivityRenderer;exports.OpenGenerativeUIActivityType=e.OpenGenerativeUIActivityType;exports.OpenGenerativeUIContentSchema=e.OpenGenerativeUIContentSchema;exports.OpenGenerativeUIRenderer=e.OpenGenerativeUIRenderer;exports.OpenGenerativeUIToolRenderer=e.OpenGenerativeUIToolRenderer;exports.UseAgentUpdate=e.UseAgentUpdate;exports.createA2UIMessageRenderer=e.createA2UIMessageRenderer;exports.createDefaultLicenseRef=e.createDefaultLicenseRef;exports.defineToolCallRenderer=e.defineToolCallRenderer;exports.extractCompleteStyles=e.extractCompleteStyles;exports.getOperationSurfaceId=e.getOperationSurfaceId;exports.processPartialHtml=e.processPartialHtml;exports.useAgent=e.useAgent;exports.useAgentContext=e.useAgentContext;exports.useAttachments=e.useAttachments;exports.useCapabilities=e.useCapabilities;exports.useComponent=e.useComponent;exports.useConfigureSuggestions=e.useConfigureSuggestions;exports.useCopilotChatConfiguration=e.useCopilotChatConfiguration;exports.useCopilotKit=e.useCopilotKit;exports.useDefaultRenderTool=e.useDefaultRenderTool;exports.useFrontendTool=e.useFrontendTool;exports.useHumanInTheLoop=e.useHumanInTheLoop;exports.useInterrupt=e.useInterrupt;exports.useKatexStyles=e.useKatexStyles;exports.useKeyboardHeight=e.useKeyboardHeight;exports.useLicenseContext=e.useLicenseContext;exports.useRenderActivityMessage=e.useRenderActivityMessage;exports.useRenderCustomMessages=e.useRenderCustomMessages;exports.useRenderTool=e.useRenderTool;exports.useSandboxFunctions=e.useSandboxFunctions;exports.useSuggestions=e.useSuggestions;exports.useThreads=e.useThreads;exports.vueBasicCatalog=e.vueBasicCatalog;Object.defineProperty(exports,"createLicenseContextValue",{enumerable:!0,get:()=>n.createLicenseContextValue});Object.keys(o).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>o[t]})});Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>i[t]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@copilotkit/core"),i=require("@ag-ui/client"),e=require("../use-render-activity-message-DYb_lsQs.cjs"),n=require("@copilotkit/shared");exports.A2UIActivityContentSchema=e.A2UIActivityContentSchema;exports.A2UISurfaceActivityRenderer=e._sfc_main;exports.A2UISurfaceActivityType=e.A2UISurfaceActivityType;exports.CopilotChat=e.CopilotChat;exports.CopilotChatAssistantMessage=e._sfc_main$1;exports.CopilotChatAttachmentQueue=e._sfc_main$2;exports.CopilotChatAttachmentRenderer=e._sfc_main$3;exports.CopilotChatAudioRecorder=e._sfc_main$4;exports.CopilotChatConfigurationProvider=e._sfc_main$5;exports.CopilotChatDefaultLabels=e.CopilotChatDefaultLabels;exports.CopilotChatInput=e._sfc_main$6;exports.CopilotChatMessageView=e._sfc_main$7;exports.CopilotChatReasoningMessage=e._sfc_main$8;exports.CopilotChatSuggestionPill=e._sfc_main$9;exports.CopilotChatSuggestionView=e._sfc_main$10;exports.CopilotChatToggleButton=e.CopilotChatToggleButton;exports.CopilotChatToggleButtonCloseIcon=e.CopilotChatToggleButtonCloseIcon;exports.CopilotChatToggleButtonOpenIcon=e.CopilotChatToggleButtonOpenIcon;exports.CopilotChatToolCallsView=e._sfc_main$11;exports.CopilotChatUserMessage=e._sfc_main$12;exports.CopilotChatView=e._sfc_main$13;exports.CopilotKitCoreVue=e.CopilotKitCoreVue;exports.CopilotKitInspector=e._sfc_main$14;exports.CopilotKitProvider=e._sfc_main$15;exports.CopilotModalHeader=e.CopilotModalHeader;exports.CopilotPopup=e._sfc_main$16;exports.CopilotPopupView=e.CopilotPopupView;exports.CopilotSidebar=e._sfc_main$17;exports.CopilotSidebarView=e.CopilotSidebarView;exports.CopilotThreadsDrawer=e._sfc_main$18;exports.GenerateSandboxedUiArgsSchema=e.GenerateSandboxedUiArgsSchema;exports.LicenseContextKey=e.LicenseContextKey;exports.MCPAppsActivityContentSchema=e.MCPAppsActivityContentSchema;exports.MCPAppsActivityRenderer=e.MCPAppsActivityRenderer;exports.MCPAppsActivityType=e.MCPAppsActivityType;exports.OpenGenerativeUIActivityRenderer=e.OpenGenerativeUIActivityRenderer;exports.OpenGenerativeUIActivityType=e.OpenGenerativeUIActivityType;exports.OpenGenerativeUIContentSchema=e.OpenGenerativeUIContentSchema;exports.OpenGenerativeUIRenderer=e.OpenGenerativeUIRenderer;exports.OpenGenerativeUIToolRenderer=e.OpenGenerativeUIToolRenderer;exports.UseAgentUpdate=e.UseAgentUpdate;exports.createA2UIMessageRenderer=e.createA2UIMessageRenderer;exports.createDefaultLicenseRef=e.createDefaultLicenseRef;exports.defineToolCallRenderer=e.defineToolCallRenderer;exports.extractCompleteStyles=e.extractCompleteStyles;exports.getOperationSurfaceId=e.getOperationSurfaceId;exports.processPartialHtml=e.processPartialHtml;exports.useAgent=e.useAgent;exports.useAgentContext=e.useAgentContext;exports.useAttachments=e.useAttachments;exports.useCapabilities=e.useCapabilities;exports.useComponent=e.useComponent;exports.useConfigureSuggestions=e.useConfigureSuggestions;exports.useCopilotChatConfiguration=e.useCopilotChatConfiguration;exports.useCopilotKit=e.useCopilotKit;exports.useDefaultRenderTool=e.useDefaultRenderTool;exports.useFrontendTool=e.useFrontendTool;exports.useHumanInTheLoop=e.useHumanInTheLoop;exports.useInterrupt=e.useInterrupt;exports.useKatexStyles=e.useKatexStyles;exports.useKeyboardHeight=e.useKeyboardHeight;exports.useLicenseContext=e.useLicenseContext;exports.useRenderActivityMessage=e.useRenderActivityMessage;exports.useRenderCustomMessages=e.useRenderCustomMessages;exports.useRenderTool=e.useRenderTool;exports.useSandboxFunctions=e.useSandboxFunctions;exports.useSuggestions=e.useSuggestions;exports.useThreads=e.useThreads;exports.vueBasicCatalog=e.vueBasicCatalog;Object.defineProperty(exports,"createLicenseContextValue",{enumerable:!0,get:()=>n.createLicenseContextValue});Object.keys(o).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>o[t]})});Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>i[t]})});
 //# sourceMappingURL=index.cjs.map

package/dist/v2/index.mjs

@@ -1,6 +1,6 @@
 export * from "@copilotkit/core";
 export * from "@ag-ui/client";
-import { A as o, _ as i, a as n, C, b as r, c as p, d as l, e as u, f as c, g, h as d, i as h, j as A, k as v, l as S, m, n as y, o as I, p as f, q as R, r as T, s as U, t as x, u as M, v as P, w as b, x as V, y as w, z as K, B as O, G, L, M as B, D, E as H, O as F, F as Q, H as j, I as k, J as q, U as z, K as E, N as J, P as N, Q as W, R as X, S as Y, T as Z, V as _, W as $, X as ee, Y as ae, Z as te, $ as se, a0 as oe, a1 as ie, a2 as ne, a3 as Ce, a4 as re, a5 as pe, a6 as le, a7 as ue, a8 as ce, a9 as ge, aa as de, ab as he, ac as Ae, ad as ve, ae as Se } from "../use-render-activity-message-DljRBrXN.js";
+import { A as o, _ as i, a as n, C, b as r, c as p, d as l, e as u, f as c, g, h as d, i as h, j as A, k as v, l as S, m, n as y, o as I, p as f, q as R, r as T, s as U, t as x, u as M, v as P, w as b, x as V, y as w, z as K, B as O, G, L, M as B, D, E as H, O as F, F as Q, H as j, I as k, J as q, U as z, K as E, N as J, P as N, Q as W, R as X, S as Y, T as Z, V as _, W as $, X as ee, Y as ae, Z as te, $ as se, a0 as oe, a1 as ie, a2 as ne, a3 as Ce, a4 as re, a5 as pe, a6 as le, a7 as ue, a8 as ce, a9 as ge, aa as de, ab as he, ac as Ae, ad as ve, ae as Se } from "../use-render-activity-message-BQADVWev.js";
 import { createLicenseContextValue as ye } from "@copilotkit/shared";
 export {
   o as A2UIActivityContentSchema,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/vue",
-  "version": "1.68.3",
+  "version": "1.69.0",
   "private": false,
   "description": "Vue 3 components and composables for CopilotKit",
   "keywords": [
@@ -70,10 +70,10 @@
     "streamdown-vue": "^1.0.29",
     "zod": "^3.25.75",
     "zod-to-json-schema": "^3.24.5",
-    "@copilotkit/core": "1.68.3",
-    "@copilotkit/shared": "1.68.3",
-    "@copilotkit/web-components": "1.68.3",
-    "@copilotkit/web-inspector": "1.68.3"
+    "@copilotkit/shared": "1.69.0",
+    "@copilotkit/web-components": "1.69.0",
+    "@copilotkit/web-inspector": "1.69.0",
+    "@copilotkit/core": "1.69.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { Message, ToolCall } from "@ag-ui/core";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { useCopilotKit } from "../../providers/useCopilotKit";
+import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
+import type { CopilotChatToolCallRenderSlotProps } from "./types";
+import {
+  getCoreRenderConfig,
+  getCoreRenderProps,
+  getToolCallMemoDeps,
+  getToolCallRenderProps,
+  getToolCallSlotName,
+} from "./copilotChatToolCallItemRender";
+
+const props = withDefaults(
+  defineProps<{
+    toolCall: ToolCall;
+    messages?: Message[];
+  }>(),
+  {
+    messages: () => [],
+  },
+);
+
+defineSlots<{
+  "tool-call"?: (props: CopilotChatToolCallRenderSlotProps) => unknown;
+  [key: `tool-call-${string}`]: (
+    props: CopilotChatToolCallRenderSlotProps,
+  ) => unknown;
+}>();
+
+const { copilotkit, executingToolCallIds } = useCopilotKit();
+const config = useCopilotChatConfiguration();
+
+function getRenderProps(): CopilotChatToolCallRenderSlotProps {
+  return getToolCallRenderProps(
+    props.toolCall,
+    props.messages,
+    executingToolCallIds.value,
+  );
+}
+
+function getCoreProps() {
+  return getCoreRenderProps(
+    props.toolCall,
+    props.messages,
+    executingToolCallIds.value,
+  );
+}
+
+function getRenderConfig() {
+  const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
+  return getCoreRenderConfig(
+    props.toolCall,
+    copilotkit.value.renderToolCalls,
+    agentId,
+  );
+}
+
+function getMemoDeps() {
+  const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
+  return getToolCallMemoDeps(
+    props.toolCall,
+    props.messages,
+    executingToolCallIds.value,
+    copilotkit.value.renderToolCalls,
+    agentId,
+  );
+}
+</script>
+
+<template>
+  <slot
+    :name="getToolCallSlotName(toolCall.function.name)"
+    v-bind="getRenderProps()"
+  >
+    <slot name="tool-call" v-bind="getRenderProps()">
+      <component
+        :is="getRenderConfig()?.render"
+        v-if="getRenderConfig()"
+        v-memo="getMemoDeps()"
+        v-bind="getCoreProps()"
+      />
+    </slot>
+  </slot>
+</template>

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

@@ -1,20 +1,10 @@
 <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 { 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";
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     message: AssistantMessage;
     messages?: Message[];
@@ -31,131 +21,29 @@ 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,
-  };
-}
-
-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,
-    };
-  }
-
-  const isExecuting = isExecutingToolCall(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,
-  };
-}
-
-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 === "*")
-  );
+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[];
 }
 </script>
 
 <template>
-  <template v-for="toolCall in message.toolCalls ?? []" :key="toolCall.id">
-    <slot
-      :name="getSlotName(toolCall.function.name)"
-      v-bind="getRenderProps(toolCall)"
+  <CopilotChatToolCallItem
+    v-for="toolCall in message.toolCalls ?? []"
+    :key="toolCall.id"
+    :tool-call="toolCall"
+    :messages="messages"
+  >
+    <template
+      v-for="slotName in getForwardedSlotNames()"
+      :key="slotName"
+      #[slotName]="slotProps"
     >
-      <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>
+      <slot :name="slotName" v-bind="slotProps ?? {}" />
+    </template>
+  </CopilotChatToolCallItem>
 </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({