npm - @copilotkitnext/react - Versions diffs - 1.51.5-next.4 → 1.52.0-next.6 - Mend

@copilotkitnext/react 1.51.5-next.4 → 1.52.0-next.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (127) hide show

package/dist/hooks/use-component.cjs CHANGED Viewed

@@ -9,21 +9,34 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * This hook is a convenience wrapper around `useFrontendTool` that:
 * - builds a model-facing tool description,
 * - forwards optional Zod parameters,
-* - renders your component with tool call args.
+* - renders your component with tool call parameters.
 *
 * Use this when you want to display a typed visual component for a tool call
 * without manually wiring a full frontend tool object.
 *
-* @typeParam T - Shape of tool args expected by the component.
+* When `parameters` is provided, render props are inferred from the schema
+* via `z.infer`. When omitted, the render component may accept any props.
+*
+* @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
 * @param config - Tool registration config.
 * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
 *
 * @example
 * ```tsx
+* // Without parameters — render accepts any props
+* useComponent({
+*   name: "showGreeting",
+*   render: ({ message }: { message: string }) => <div>{message}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* // With parameters — render props inferred from schema
 * useComponent({
 *   name: "showWeatherCard",
 *   parameters: z.object({ city: z.string() }),
-*   component: ({ city }: { city: string }) => <div>{city}</div>,
+*   render: ({ city }) => <div>{city}</div>,
 * });
 * ```
 *
@@ -33,7 +46,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *   {
 *     name: "renderProfile",
 *     parameters: z.object({ userId: z.string() }),
-*     component: ProfileCard,
+*     render: ProfileCard,
 *     agentId: "support-agent",
 *   },
 *   [selectedAgentId],
@@ -48,7 +61,7 @@ function useComponent(config, deps) {
 		description: fullDescription,
 		parameters: config.parameters,
 		render: ({ args }) => {
-			const Component = config.component;
+			const Component = config.render;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
 		},
 		agentId: config.agentId

package/dist/hooks/use-component.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-component.cjs","names":[],"sources":["../../src/hooks/use-component.tsx"],"sourcesContent":["import { z } from \"zod\";\nimport type { ComponentType } from \"react\";\nimport { useFrontendTool } from \"./use-frontend-tool\";\n\n/*\n Registers a React component as a frontend tool renderer in chat.\n \n This hook is a convenience wrapper around `useFrontendTool` that:\n * - builds a model-facing tool description,\n * - forwards optional Zod parameters,\n * - renders your component with tool call ~~args~~.\n \n Use this when you want to display a typed visual component for a tool call\n * without manually wiring a full frontend tool object.\n \n @typeParam T - ~~Shape~~ of tool ~~args~~ ~~expected~~ by ~~the~~ ~~component~~.\n * @param config - Tool registration config.\n * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).\n \n @example\n * ```tsx\n * useComponent({\n * name: \"showWeatherCard\",\n * parameters: z.object({ city: z.string() }),\n * ~~component~~: ({ city }~~: { city: string }~~) => <div>{city}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * useComponent(\n * {\n * name: \"renderProfile\",\n * parameters: z.object({ userId: z.string() }),\n * ~~component~~: ProfileCard,\n * agentId: \"support-agent\",\n * },\n * [selectedAgentId],\n * );\n * ```\n */\nexport function useComponent<\n T extends ~~Record<string,~~ ~~unknown>~~ = ~~Record<string, unknown>,\~~n>(\n config: {\n name: string;\n description?: string;\n parameters?: ~~z.ZodType<T>;\~~n ~~component~~: ComponentType<~~T>;\~~n agentId?: string;\n },\n deps?: ReadonlyArray<unknown>,\n): void {\n const prefix = `Use this tool to display the \"${config.name}\" component in the chat. This tool renders a visual UI component for the user.`;\n const fullDescription = config.description\n ? `${prefix}\\n\\n${config.description}`\n : prefix;\n\n useFrontendTool(\n {\n name: config.name,\n description: fullDescription,\n parameters: config.parameters,\n render: ({ args }) => {\n const Component = config.~~component~~;\n return <Component {...(args as T)} />;\n },\n agentId: config.agentId,\n },\n deps,\n );\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA~~,SAAgB,aAGd,QAOA,MACM;CACN,MAAM,SAAS,iCAAiC,OAAO,KAAK;CAC5D,MAAM,kBAAkB,OAAO,cAC3B,GAAG,OAAO,MAAM,OAAO,gBACvB;AAEJ,2CACE;EACE,MAAM,OAAO;EACb,aAAa;EACb,YAAY,OAAO;EACnB,SAAS,EAAE,~~WAAW~~;~~GACpB~~,MAAM,YAAY,OAAO;AACzB,UAAO,2CAAC,aAAU,GAAK,~~OAAc~~;;~~EAEvC~~,SAAS,OAAO;EACjB,EACD,KACD"}
1	+ {"version":3,"file":"use-component.cjs","names":[],"sources":["../../src/hooks/use-component.tsx"],"sourcesContent":["import { z } from \"zod\";\nimport type { ComponentType } from \"react\";\nimport { useFrontendTool } from \"./use-frontend-tool\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype InferRenderProps<T> = T extends z.ZodTypeAny ? z.infer<T> : any;\n\n/*\n Registers a React component as a frontend tool renderer in chat.\n \n This hook is a convenience wrapper around `useFrontendTool` that:\n * - builds a model-facing tool description,\n * - forwards optional Zod parameters,\n * - renders your component with tool call parameters.\n \n Use this when you want to display a typed visual component for a tool call\n * without manually wiring a full frontend tool object.\n \n When `parameters` is provided, render props are inferred from the schema\n * via `z.infer`. When omitted, the render component may accept any props.\n \n @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.\n * @param config - Tool registration config.\n * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).\n \n @example\n * ```tsx\n * // Without parameters — render accepts any props\n * useComponent({\n * name: \"showGreeting\",\n * render: ({ message }: { message: string }) => <div>{message}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * // With parameters — render props inferred from schema\n * useComponent({\n * name: \"showWeatherCard\",\n * parameters: z.object({ city: z.string() }),\n * render: ({ city }) => <div>{city}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * useComponent(\n * {\n * name: \"renderProfile\",\n * parameters: z.object({ userId: z.string() }),\n * render: ProfileCard,\n * agentId: \"support-agent\",\n * },\n * [selectedAgentId],\n * );\n * ```\n */\nexport function useComponent<\n TSchema extends z.ZodTypeAny \| undefined = undefined,\n>(\n config: {\n name: string;\n description?: string;\n parameters?: TSchema;\n render: ComponentType<NoInfer<InferRenderProps<TSchema>>>;\n agentId?: string;\n },\n deps?: ReadonlyArray<unknown>,\n): void {\n const prefix = `Use this tool to display the \"${config.name}\" component in the chat. This tool renders a visual UI component for the user.`;\n const fullDescription = config.description\n ? `${prefix}\\n\\n${config.description}`\n : prefix;\n\n useFrontendTool(\n {\n name: config.name,\n description: fullDescription,\n parameters: config.parameters,\n render: ({ args }: { args: unknown }) => {\n const Component = config.render;\n return <Component {...(args as InferRenderProps<TSchema>)} />;\n },\n agentId: config.agentId,\n },\n deps,\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,aAGd,QAOA,MACM;CACN,MAAM,SAAS,iCAAiC,OAAO,KAAK;CAC5D,MAAM,kBAAkB,OAAO,cAC3B,GAAG,OAAO,MAAM,OAAO,gBACvB;AAEJ,2CACE;EACE,MAAM,OAAO;EACb,aAAa;EACb,YAAY,OAAO;EACnB,SAAS,EAAE,WAA8B;GACvC,MAAM,YAAY,OAAO;AACzB,UAAO,2CAAC,aAAU,GAAK,OAAsC;;EAE/D,SAAS,OAAO;EACjB,EACD,KACD"}

package/dist/hooks/use-component.d.cts CHANGED Viewed

@@ -2,27 +2,41 @@ import { ComponentType } from "react";
 import { z } from "zod";
 //#region src/hooks/use-component.d.ts
+type InferRenderProps<T> = T extends z.ZodTypeAny ? z.infer<T> : any;
 /**
  * Registers a React component as a frontend tool renderer in chat.
  *
  * This hook is a convenience wrapper around `useFrontendTool` that:
  * - builds a model-facing tool description,
  * - forwards optional Zod parameters,
- * - renders your component with tool call args.
+ * - renders your component with tool call parameters.
  *
  * Use this when you want to display a typed visual component for a tool call
  * without manually wiring a full frontend tool object.
  *
- * @typeParam T - Shape of tool args expected by the component.
+ * When `parameters` is provided, render props are inferred from the schema
+ * via `z.infer`. When omitted, the render component may accept any props.
+ *
+ * @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
  * @param config - Tool registration config.
  * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
  *
  * @example
  * ```tsx
+ * // Without parameters — render accepts any props
+ * useComponent({
+ *   name: "showGreeting",
+ *   render: ({ message }: { message: string }) => <div>{message}</div>,
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With parameters — render props inferred from schema
  * useComponent({
  *   name: "showWeatherCard",
  *   parameters: z.object({ city: z.string() }),
- *   component: ({ city }: { city: string }) => <div>{city}</div>,
+ *   render: ({ city }) => <div>{city}</div>,
  * });
  * ```
  *
@@ -32,18 +46,18 @@ import { z } from "zod";
  *   {
  *     name: "renderProfile",
  *     parameters: z.object({ userId: z.string() }),
- *     component: ProfileCard,
+ *     render: ProfileCard,
  *     agentId: "support-agent",
  *   },
  *   [selectedAgentId],
  * );
  * ```
  */
-declare function useComponent<T extends Record<string, unknown> = Record<string, unknown>>(config: {
+declare function useComponent<TSchema extends z.ZodTypeAny | undefined = undefined>(config: {
   name: string;
   description?: string;
-  parameters?: z.ZodType<T>;
-  component: ComponentType<T>;
+  parameters?: TSchema;
+  render: ComponentType<NoInfer<InferRenderProps<TSchema>>>;
   agentId?: string;
 }, deps?: ReadonlyArray<unknown>): void;
 //#endregion

package/dist/hooks/use-component.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-component.d.cts","names":[],"sources":["../../src/hooks/use-component.tsx"],"mappings":"~~;;;;;;AAyCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~iBAAgB,YAAA,~~WACJ~~,~~MAAA~~,~~oBAA0B~~,~~MAAA~~,~~kBAAA~~,~~CAEpC~~,MAAA;EACE,IAAA;EACA,WAAA;EACA,UAAA,GAAa,~~CAAA,CAAE,~~OAAA~~,CAAQ,CAAA~~;~~EACvB~~,~~SAAA~~,~~EAAW~~,aAAA,CAAc,~~CAAA~~;~~EACzB~~,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}
1	+ {"version":3,"file":"use-component.d.cts","names":[],"sources":["../../src/hooks/use-component.tsx"],"mappings":";;;;KAKK,gBAAA,MAAsB,CAAA,SAAU,CAAA,CAAE,UAAA,GAAa,CAAA,CAAE,KAAA,CAAM,CAAA;;AAJjB;;;;;;;;;;;;;;;;;;AAwD3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,YAAA,iBACE,CAAA,CAAE,UAAA,yBAAA,CAElB,MAAA;EACE,IAAA;EACA,WAAA;EACA,UAAA,GAAa,OAAA;EACb,MAAA,EAAQ,aAAA,CAAc,OAAA,CAAQ,gBAAA,CAAiB,OAAA;EAC/C,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}

package/dist/hooks/use-component.d.mts CHANGED Viewed

@@ -2,27 +2,41 @@ import { ComponentType } from "react";
 import { z } from "zod";
 //#region src/hooks/use-component.d.ts
+type InferRenderProps<T> = T extends z.ZodTypeAny ? z.infer<T> : any;
 /**
  * Registers a React component as a frontend tool renderer in chat.
  *
  * This hook is a convenience wrapper around `useFrontendTool` that:
  * - builds a model-facing tool description,
  * - forwards optional Zod parameters,
- * - renders your component with tool call args.
+ * - renders your component with tool call parameters.
  *
  * Use this when you want to display a typed visual component for a tool call
  * without manually wiring a full frontend tool object.
  *
- * @typeParam T - Shape of tool args expected by the component.
+ * When `parameters` is provided, render props are inferred from the schema
+ * via `z.infer`. When omitted, the render component may accept any props.
+ *
+ * @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
  * @param config - Tool registration config.
  * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
  *
  * @example
  * ```tsx
+ * // Without parameters — render accepts any props
+ * useComponent({
+ *   name: "showGreeting",
+ *   render: ({ message }: { message: string }) => <div>{message}</div>,
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With parameters — render props inferred from schema
  * useComponent({
  *   name: "showWeatherCard",
  *   parameters: z.object({ city: z.string() }),
- *   component: ({ city }: { city: string }) => <div>{city}</div>,
+ *   render: ({ city }) => <div>{city}</div>,
  * });
  * ```
  *
@@ -32,18 +46,18 @@ import { z } from "zod";
  *   {
  *     name: "renderProfile",
  *     parameters: z.object({ userId: z.string() }),
- *     component: ProfileCard,
+ *     render: ProfileCard,
  *     agentId: "support-agent",
  *   },
  *   [selectedAgentId],
  * );
  * ```
  */
-declare function useComponent<T extends Record<string, unknown> = Record<string, unknown>>(config: {
+declare function useComponent<TSchema extends z.ZodTypeAny | undefined = undefined>(config: {
   name: string;
   description?: string;
-  parameters?: z.ZodType<T>;
-  component: ComponentType<T>;
+  parameters?: TSchema;
+  render: ComponentType<NoInfer<InferRenderProps<TSchema>>>;
   agentId?: string;
 }, deps?: ReadonlyArray<unknown>): void;
 //#endregion

package/dist/hooks/use-component.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-component.d.mts","names":[],"sources":["../../src/hooks/use-component.tsx"],"mappings":"~~;;;;;;AAyCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~iBAAgB,YAAA,~~WACJ~~,~~MAAA~~,~~oBAA0B~~,~~MAAA~~,~~kBAAA~~,~~CAEpC~~,MAAA;EACE,IAAA;EACA,WAAA;EACA,UAAA,GAAa,~~CAAA,CAAE,~~OAAA~~,CAAQ,CAAA~~;~~EACvB~~,~~SAAA~~,~~EAAW~~,aAAA,CAAc,~~CAAA~~;~~EACzB~~,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}
1	+ {"version":3,"file":"use-component.d.mts","names":[],"sources":["../../src/hooks/use-component.tsx"],"mappings":";;;;KAKK,gBAAA,MAAsB,CAAA,SAAU,CAAA,CAAE,UAAA,GAAa,CAAA,CAAE,KAAA,CAAM,CAAA;;AAJjB;;;;;;;;;;;;;;;;;;AAwD3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,YAAA,iBACE,CAAA,CAAE,UAAA,yBAAA,CAElB,MAAA;EACE,IAAA;EACA,WAAA;EACA,UAAA,GAAa,OAAA;EACb,MAAA,EAAQ,aAAA,CAAc,OAAA,CAAQ,gBAAA,CAAiB,OAAA;EAC/C,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}

package/dist/hooks/use-component.mjs CHANGED Viewed

@@ -8,21 +8,34 @@ import { jsx } from "react/jsx-runtime";
 * This hook is a convenience wrapper around `useFrontendTool` that:
 * - builds a model-facing tool description,
 * - forwards optional Zod parameters,
-* - renders your component with tool call args.
+* - renders your component with tool call parameters.
 *
 * Use this when you want to display a typed visual component for a tool call
 * without manually wiring a full frontend tool object.
 *
-* @typeParam T - Shape of tool args expected by the component.
+* When `parameters` is provided, render props are inferred from the schema
+* via `z.infer`. When omitted, the render component may accept any props.
+*
+* @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
 * @param config - Tool registration config.
 * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
 *
 * @example
 * ```tsx
+* // Without parameters — render accepts any props
+* useComponent({
+*   name: "showGreeting",
+*   render: ({ message }: { message: string }) => <div>{message}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* // With parameters — render props inferred from schema
 * useComponent({
 *   name: "showWeatherCard",
 *   parameters: z.object({ city: z.string() }),
-*   component: ({ city }: { city: string }) => <div>{city}</div>,
+*   render: ({ city }) => <div>{city}</div>,
 * });
 * ```
 *
@@ -32,7 +45,7 @@ import { jsx } from "react/jsx-runtime";
 *   {
 *     name: "renderProfile",
 *     parameters: z.object({ userId: z.string() }),
-*     component: ProfileCard,
+*     render: ProfileCard,
 *     agentId: "support-agent",
 *   },
 *   [selectedAgentId],
@@ -47,7 +60,7 @@ function useComponent(config, deps) {
 		description: fullDescription,
 		parameters: config.parameters,
 		render: ({ args }) => {
-			const Component = config.component;
+			const Component = config.render;
 			return /* @__PURE__ */ jsx(Component, { ...args });
 		},
 		agentId: config.agentId

package/dist/hooks/use-component.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-component.mjs","names":[],"sources":["../../src/hooks/use-component.tsx"],"sourcesContent":["import { z } from \"zod\";\nimport type { ComponentType } from \"react\";\nimport { useFrontendTool } from \"./use-frontend-tool\";\n\n/*\n Registers a React component as a frontend tool renderer in chat.\n \n This hook is a convenience wrapper around `useFrontendTool` that:\n * - builds a model-facing tool description,\n * - forwards optional Zod parameters,\n * - renders your component with tool call ~~args~~.\n \n Use this when you want to display a typed visual component for a tool call\n * without manually wiring a full frontend tool object.\n \n @typeParam T - ~~Shape~~ of tool ~~args~~ ~~expected~~ by ~~the~~ ~~component~~.\n * @param config - Tool registration config.\n * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).\n \n @example\n * ```tsx\n * useComponent({\n * name: \"showWeatherCard\",\n * parameters: z.object({ city: z.string() }),\n * ~~component~~: ({ city }~~: { city: string }~~) => <div>{city}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * useComponent(\n * {\n * name: \"renderProfile\",\n * parameters: z.object({ userId: z.string() }),\n * ~~component~~: ProfileCard,\n * agentId: \"support-agent\",\n * },\n * [selectedAgentId],\n * );\n * ```\n */\nexport function useComponent<\n T extends ~~Record<string,~~ ~~unknown>~~ = ~~Record<string, unknown>,\~~n>(\n config: {\n name: string;\n description?: string;\n parameters?: ~~z.ZodType<T>;\~~n ~~component~~: ComponentType<~~T>;\~~n agentId?: string;\n },\n deps?: ReadonlyArray<unknown>,\n): void {\n const prefix = `Use this tool to display the \"${config.name}\" component in the chat. This tool renders a visual UI component for the user.`;\n const fullDescription = config.description\n ? `${prefix}\\n\\n${config.description}`\n : prefix;\n\n useFrontendTool(\n {\n name: config.name,\n description: fullDescription,\n parameters: config.parameters,\n render: ({ args }) => {\n const Component = config.~~component~~;\n return <Component {...(args as T)} />;\n },\n agentId: config.agentId,\n },\n deps,\n );\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA~~,SAAgB,aAGd,QAOA,MACM;CACN,MAAM,SAAS,iCAAiC,OAAO,KAAK;CAC5D,MAAM,kBAAkB,OAAO,cAC3B,GAAG,OAAO,MAAM,OAAO,gBACvB;AAEJ,iBACE;EACE,MAAM,OAAO;EACb,aAAa;EACb,YAAY,OAAO;EACnB,SAAS,EAAE,~~WAAW~~;~~GACpB~~,MAAM,YAAY,OAAO;AACzB,UAAO,oBAAC,aAAU,GAAK,~~OAAc~~;;~~EAEvC~~,SAAS,OAAO;EACjB,EACD,KACD"}
1	+ {"version":3,"file":"use-component.mjs","names":[],"sources":["../../src/hooks/use-component.tsx"],"sourcesContent":["import { z } from \"zod\";\nimport type { ComponentType } from \"react\";\nimport { useFrontendTool } from \"./use-frontend-tool\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype InferRenderProps<T> = T extends z.ZodTypeAny ? z.infer<T> : any;\n\n/*\n Registers a React component as a frontend tool renderer in chat.\n \n This hook is a convenience wrapper around `useFrontendTool` that:\n * - builds a model-facing tool description,\n * - forwards optional Zod parameters,\n * - renders your component with tool call parameters.\n \n Use this when you want to display a typed visual component for a tool call\n * without manually wiring a full frontend tool object.\n \n When `parameters` is provided, render props are inferred from the schema\n * via `z.infer`. When omitted, the render component may accept any props.\n \n @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.\n * @param config - Tool registration config.\n * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).\n \n @example\n * ```tsx\n * // Without parameters — render accepts any props\n * useComponent({\n * name: \"showGreeting\",\n * render: ({ message }: { message: string }) => <div>{message}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * // With parameters — render props inferred from schema\n * useComponent({\n * name: \"showWeatherCard\",\n * parameters: z.object({ city: z.string() }),\n * render: ({ city }) => <div>{city}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * useComponent(\n * {\n * name: \"renderProfile\",\n * parameters: z.object({ userId: z.string() }),\n * render: ProfileCard,\n * agentId: \"support-agent\",\n * },\n * [selectedAgentId],\n * );\n * ```\n */\nexport function useComponent<\n TSchema extends z.ZodTypeAny \| undefined = undefined,\n>(\n config: {\n name: string;\n description?: string;\n parameters?: TSchema;\n render: ComponentType<NoInfer<InferRenderProps<TSchema>>>;\n agentId?: string;\n },\n deps?: ReadonlyArray<unknown>,\n): void {\n const prefix = `Use this tool to display the \"${config.name}\" component in the chat. This tool renders a visual UI component for the user.`;\n const fullDescription = config.description\n ? `${prefix}\\n\\n${config.description}`\n : prefix;\n\n useFrontendTool(\n {\n name: config.name,\n description: fullDescription,\n parameters: config.parameters,\n render: ({ args }: { args: unknown }) => {\n const Component = config.render;\n return <Component {...(args as InferRenderProps<TSchema>)} />;\n },\n agentId: config.agentId,\n },\n deps,\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,aAGd,QAOA,MACM;CACN,MAAM,SAAS,iCAAiC,OAAO,KAAK;CAC5D,MAAM,kBAAkB,OAAO,cAC3B,GAAG,OAAO,MAAM,OAAO,gBACvB;AAEJ,iBACE;EACE,MAAM,OAAO;EACb,aAAa;EACb,YAAY,OAAO;EACnB,SAAS,EAAE,WAA8B;GACvC,MAAM,YAAY,OAAO;AACzB,UAAO,oBAAC,aAAU,GAAK,OAAsC;;EAE/D,SAAS,OAAO;EACjB,EACD,KACD"}

package/dist/hooks/use-default-render-tool.cjs CHANGED Viewed

@@ -47,7 +47,7 @@ function useDefaultRenderTool(config, deps) {
 		render: config?.render ?? DefaultToolCallRenderer
 	}, deps);
 }
-function DefaultToolCallRenderer({ name, args, status, result }) {
+function DefaultToolCallRenderer({ name, parameters, status, result }) {
 	const [isExpanded, setIsExpanded] = (0, react.useState)(false);
 	const statusString = String(status);
 	const isActive = statusString === "inProgress" || statusString === "executing";
@@ -163,7 +163,7 @@ function DefaultToolCallRenderer({ name, args, status, result }) {
 						whiteSpace: "pre-wrap",
 						wordBreak: "break-word"
 					},
-					children: JSON.stringify(args ?? {}, null, 2)
+					children: JSON.stringify(parameters ?? {}, null, 2)
 				})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					style: {
 						fontSize: "10px",

package/dist/hooks/use-default-render-tool.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-default-render-tool.cjs","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useRenderTool } from \"./use-render-tool\";\n\ntype DefaultRenderProps = {\n name: string;\n ~~args~~: ~~any~~;\n status: ~~string~~;\n result: string \| undefined;\n};\n\n/*\n Registers a wildcard (`\"\"`) tool-call renderer via `useRenderTool`.\n \n * - Call with no config to use CopilotKit's built-in default tool-call card.\n * - Pass `config.render` to replace the default UI with your own fallback renderer.\n \n This is useful when you want a generic renderer for tools that do not have a\n * dedicated `useRenderTool({ name: \"...\" })` registration.\n \n @param config - Optional custom wildcard render function.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useDefaultRenderTool();\n * ```\n \n @example\n * ```tsx\n * useDefaultRenderTool({\n * render: ({ name, status }) => <div>{name}: {status}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * useDefaultRenderTool(\n * {\n * render: ({ name, result }) => (\n * <ToolEventRow title={name} payload={result} compact={compactMode} />\n * ),\n * },\n * [compactMode],\n * );\n * ```\n /\nexport function useDefaultRenderTool(\n config?: {\n render?: (props: DefaultRenderProps) => React.ReactElement;\n },\n deps?: ReadonlyArray<unknown>,\n): void {\n useRenderTool(\n {\n name: \"\",\n render: config?.render ?? DefaultToolCallRenderer,\n },\n deps,\n );\n}\n\nfunction DefaultToolCallRenderer({\n name,\n ~~args~~,\n status,\n result,\n}: DefaultRenderProps): React.ReactElement {\n const [isExpanded, setIsExpanded] = useState(false);\n\n const statusString = String(status) as\n \| \"inProgress\"\n \| \"executing\"\n \| \"complete\";\n const isActive =\n statusString === \"inProgress\" \|\| statusString === \"executing\";\n const isComplete = statusString === \"complete\";\n\n const statusLabel = isActive ? \"Running\" : isComplete ? \"Done\" : status;\n const dotColor = isActive ? \"#f59e0b\" : isComplete ? \"#10b981\" : \"#a1a1aa\";\n const badgeBg = isActive ? \"#fef3c7\" : isComplete ? \"#d1fae5\" : \"#f4f4f5\";\n const badgeColor = isActive ? \"#92400e\" : isComplete ? \"#065f46\" : \"#3f3f46\";\n\n return (\n <div\n style={{\n marginTop: \"8px\",\n paddingBottom: \"8px\",\n }}\n >\n <div\n style={{\n borderRadius: \"12px\",\n border: \"1px solid #e4e4e7\",\n backgroundColor: \"#fafafa\",\n padding: \"14px 16px\",\n }}\n >\n {/* Header row — always visible /}\n <div\n onClick={() => setIsExpanded(!isExpanded)}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"10px\",\n cursor: \"pointer\",\n userSelect: \"none\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: \"8px\",\n minWidth: 0,\n }}\n >\n <svg\n style={{\n height: \"14px\",\n width: \"14px\",\n color: \"#71717a\",\n transition: \"transform 0.15s\",\n transform: isExpanded ? \"rotate(90deg)\" : \"rotate(0deg)\",\n flexShrink: 0,\n }}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth={2}\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"\n />\n </svg>\n <span\n style={{\n display: \"inline-block\",\n height: \"8px\",\n width: \"8px\",\n borderRadius: \"50%\",\n backgroundColor: dotColor,\n flexShrink: 0,\n }}\n />\n <span\n style={{\n fontSize: \"13px\",\n fontWeight: 600,\n color: \"#18181b\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {name}\n </span>\n </div>\n\n <span\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n borderRadius: \"9999px\",\n padding: \"2px 8px\",\n fontSize: \"11px\",\n fontWeight: 500,\n backgroundColor: badgeBg,\n color: badgeColor,\n flexShrink: 0,\n }}\n >\n {statusLabel}\n </span>\n </div>\n\n {/ Expandable details */}\n {isExpanded && (\n <div style={{ marginTop: \"12px\", display: \"grid\", gap: \"12px\" }}>\n <div>\n <div\n style={{\n fontSize: \"10px\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n color: \"#71717a\",\n }}\n >\n Arguments\n </div>\n <pre\n style={{\n marginTop: \"6px\",\n maxHeight: \"200px\",\n overflow: \"auto\",\n borderRadius: \"6px\",\n backgroundColor: \"#f4f4f5\",\n padding: \"10px\",\n fontSize: \"11px\",\n lineHeight: 1.6,\n color: \"#27272a\",\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n }}\n >\n {JSON.stringify(~~args~~ ?? {}, null, 2)}\n </pre>\n </div>\n\n {result !== undefined && (\n <div>\n <div\n style={{\n fontSize: \"10px\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n color: \"#71717a\",\n }}\n >\n Result\n </div>\n <pre\n style={{\n marginTop: \"6px\",\n maxHeight: \"200px\",\n overflow: \"auto\",\n borderRadius: \"6px\",\n backgroundColor: \"#f4f4f5\",\n padding: \"10px\",\n fontSize: \"11px\",\n lineHeight: 1.6,\n color: \"#27272a\",\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n }}\n >\n {typeof result === \"string\"\n ? result\n : JSON.stringify(result, null, 2)}\n </pre>\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA8CA~~,SAAgB,qBACd,QAGA,MACM;AACN,uCACE;EACE,MAAM;EACN,QAAQ,QAAQ,UAAU;EAC3B,EACD,KACD;;AAGH,SAAS,wBAAwB,EAC/B,MACA,~~MACA~~,QACA,UACyC;CACzC,MAAM,CAAC,YAAY,qCAA0B,MAAM;CAEnD,MAAM,eAAe,OAAO,OAAO;CAInC,MAAM,WACJ,iBAAiB,gBAAgB,iBAAiB;CACpD,MAAM,aAAa,iBAAiB;AAOpC,QACE,2CAAC;EACC,OAAO;GACL,WAAW;GACX,eAAe;GAChB;YAED,4CAAC;GACC,OAAO;IACL,cAAc;IACd,QAAQ;IACR,iBAAiB;IACjB,SAAS;IACV;cAGD,4CAAC;IACC,eAAe,cAAc,CAAC,WAAW;IACzC,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,KAAK;KACL,QAAQ;KACR,YAAY;KACb;eAED,4CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,KAAK;MACL,UAAU;MACX;;MAED,2CAAC;OACC,OAAO;QACL,QAAQ;QACR,OAAO;QACP,OAAO;QACP,YAAY;QACZ,WAAW,aAAa,kBAAkB;QAC1C,YAAY;QACb;OACD,MAAK;OACL,SAAQ;OACR,aAAa;OACb,QAAO;iBAEP,2CAAC;QACC,eAAc;QACd,gBAAe;QACf,GAAE;SACF;QACE;MACN,2CAAC,UACC,OAAO;OACL,SAAS;OACT,QAAQ;OACR,OAAO;OACP,cAAc;OACd,iBAjEG,WAAW,YAAY,aAAa,YAAY;OAkEnD,YAAY;OACb,GACD;MACF,2CAAC;OACC,OAAO;QACL,UAAU;QACV,YAAY;QACZ,OAAO;QACP,UAAU;QACV,cAAc;QACd,YAAY;QACb;iBAEA;QACI;;MACH,EAEN,2CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,cAAc;MACd,SAAS;MACT,UAAU;MACV,YAAY;MACZ,iBA1FI,WAAW,YAAY,aAAa,YAAY;MA2FpD,OA1FO,WAAW,YAAY,aAAa,YAAY;MA2FvD,YAAY;MACb;eA/FS,WAAW,YAAY,aAAa,SAAS;MAkGlD;KACH,EAGL,cACC,4CAAC;IAAI,OAAO;KAAE,WAAW;KAAQ,SAAS;KAAQ,KAAK;KAAQ;eAC7D,4CAAC,oBACC,2CAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,2CAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,KAAK,UAAU,~~QAAQ~~,EAAE,EAAE,MAAM,EAAE;~~MAChC~~,IACF,EAEL,WAAW,UACV,4CAAC,oBACC,2CAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,2CAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,OAAO,WAAW,WACf,SACA,KAAK,UAAU,QAAQ,MAAM,EAAE;MAC/B,IACF;KAEJ;IAEJ;GACF"}
1	+ {"version":3,"file":"use-default-render-tool.cjs","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useRenderTool } from \"./use-render-tool\";\n\ntype DefaultRenderProps = {\n /** The name of the tool being called. /\n name: string;\n /* The parsed parameters passed to the tool call. /\n parameters: unknown;\n /* Current execution status of the tool call. /\n status: \"inProgress\" \| \"executing\" \| \"complete\";\n /* The tool call result string, available only when `status` is `\"complete\"`. /\n result: string \| undefined;\n};\n\n/\n Registers a wildcard (`\"\"`) tool-call renderer via `useRenderTool`.\n \n * - Call with no config to use CopilotKit's built-in default tool-call card.\n * - Pass `config.render` to replace the default UI with your own fallback renderer.\n \n This is useful when you want a generic renderer for tools that do not have a\n * dedicated `useRenderTool({ name: \"...\" })` registration.\n \n @param config - Optional custom wildcard render function.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useDefaultRenderTool();\n * ```\n \n @example\n * ```tsx\n * useDefaultRenderTool({\n * render: ({ name, status }) => <div>{name}: {status}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * useDefaultRenderTool(\n * {\n * render: ({ name, result }) => (\n * <ToolEventRow title={name} payload={result} compact={compactMode} />\n * ),\n * },\n * [compactMode],\n * );\n * ```\n /\nexport function useDefaultRenderTool(\n config?: {\n render?: (props: DefaultRenderProps) => React.ReactElement;\n },\n deps?: ReadonlyArray<unknown>,\n): void {\n useRenderTool(\n {\n name: \"\",\n render: config?.render ?? DefaultToolCallRenderer,\n },\n deps,\n );\n}\n\nfunction DefaultToolCallRenderer({\n name,\n parameters,\n status,\n result,\n}: DefaultRenderProps): React.ReactElement {\n const [isExpanded, setIsExpanded] = useState(false);\n\n const statusString = String(status) as\n \| \"inProgress\"\n \| \"executing\"\n \| \"complete\";\n const isActive =\n statusString === \"inProgress\" \|\| statusString === \"executing\";\n const isComplete = statusString === \"complete\";\n\n const statusLabel = isActive ? \"Running\" : isComplete ? \"Done\" : status;\n const dotColor = isActive ? \"#f59e0b\" : isComplete ? \"#10b981\" : \"#a1a1aa\";\n const badgeBg = isActive ? \"#fef3c7\" : isComplete ? \"#d1fae5\" : \"#f4f4f5\";\n const badgeColor = isActive ? \"#92400e\" : isComplete ? \"#065f46\" : \"#3f3f46\";\n\n return (\n <div\n style={{\n marginTop: \"8px\",\n paddingBottom: \"8px\",\n }}\n >\n <div\n style={{\n borderRadius: \"12px\",\n border: \"1px solid #e4e4e7\",\n backgroundColor: \"#fafafa\",\n padding: \"14px 16px\",\n }}\n >\n {/* Header row — always visible /}\n <div\n onClick={() => setIsExpanded(!isExpanded)}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"10px\",\n cursor: \"pointer\",\n userSelect: \"none\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: \"8px\",\n minWidth: 0,\n }}\n >\n <svg\n style={{\n height: \"14px\",\n width: \"14px\",\n color: \"#71717a\",\n transition: \"transform 0.15s\",\n transform: isExpanded ? \"rotate(90deg)\" : \"rotate(0deg)\",\n flexShrink: 0,\n }}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth={2}\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"\n />\n </svg>\n <span\n style={{\n display: \"inline-block\",\n height: \"8px\",\n width: \"8px\",\n borderRadius: \"50%\",\n backgroundColor: dotColor,\n flexShrink: 0,\n }}\n />\n <span\n style={{\n fontSize: \"13px\",\n fontWeight: 600,\n color: \"#18181b\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {name}\n </span>\n </div>\n\n <span\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n borderRadius: \"9999px\",\n padding: \"2px 8px\",\n fontSize: \"11px\",\n fontWeight: 500,\n backgroundColor: badgeBg,\n color: badgeColor,\n flexShrink: 0,\n }}\n >\n {statusLabel}\n </span>\n </div>\n\n {/ Expandable details */}\n {isExpanded && (\n <div style={{ marginTop: \"12px\", display: \"grid\", gap: \"12px\" }}>\n <div>\n <div\n style={{\n fontSize: \"10px\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n color: \"#71717a\",\n }}\n >\n Arguments\n </div>\n <pre\n style={{\n marginTop: \"6px\",\n maxHeight: \"200px\",\n overflow: \"auto\",\n borderRadius: \"6px\",\n backgroundColor: \"#f4f4f5\",\n padding: \"10px\",\n fontSize: \"11px\",\n lineHeight: 1.6,\n color: \"#27272a\",\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n }}\n >\n {JSON.stringify(parameters ?? {}, null, 2)}\n </pre>\n </div>\n\n {result !== undefined && (\n <div>\n <div\n style={{\n fontSize: \"10px\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n color: \"#71717a\",\n }}\n >\n Result\n </div>\n <pre\n style={{\n marginTop: \"6px\",\n maxHeight: \"200px\",\n overflow: \"auto\",\n borderRadius: \"6px\",\n backgroundColor: \"#f4f4f5\",\n padding: \"10px\",\n fontSize: \"11px\",\n lineHeight: 1.6,\n color: \"#27272a\",\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n }}\n >\n {typeof result === \"string\"\n ? result\n : JSON.stringify(result, null, 2)}\n </pre>\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,qBACd,QAGA,MACM;AACN,uCACE;EACE,MAAM;EACN,QAAQ,QAAQ,UAAU;EAC3B,EACD,KACD;;AAGH,SAAS,wBAAwB,EAC/B,MACA,YACA,QACA,UACyC;CACzC,MAAM,CAAC,YAAY,qCAA0B,MAAM;CAEnD,MAAM,eAAe,OAAO,OAAO;CAInC,MAAM,WACJ,iBAAiB,gBAAgB,iBAAiB;CACpD,MAAM,aAAa,iBAAiB;AAOpC,QACE,2CAAC;EACC,OAAO;GACL,WAAW;GACX,eAAe;GAChB;YAED,4CAAC;GACC,OAAO;IACL,cAAc;IACd,QAAQ;IACR,iBAAiB;IACjB,SAAS;IACV;cAGD,4CAAC;IACC,eAAe,cAAc,CAAC,WAAW;IACzC,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,KAAK;KACL,QAAQ;KACR,YAAY;KACb;eAED,4CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,KAAK;MACL,UAAU;MACX;;MAED,2CAAC;OACC,OAAO;QACL,QAAQ;QACR,OAAO;QACP,OAAO;QACP,YAAY;QACZ,WAAW,aAAa,kBAAkB;QAC1C,YAAY;QACb;OACD,MAAK;OACL,SAAQ;OACR,aAAa;OACb,QAAO;iBAEP,2CAAC;QACC,eAAc;QACd,gBAAe;QACf,GAAE;SACF;QACE;MACN,2CAAC,UACC,OAAO;OACL,SAAS;OACT,QAAQ;OACR,OAAO;OACP,cAAc;OACd,iBAjEG,WAAW,YAAY,aAAa,YAAY;OAkEnD,YAAY;OACb,GACD;MACF,2CAAC;OACC,OAAO;QACL,UAAU;QACV,YAAY;QACZ,OAAO;QACP,UAAU;QACV,cAAc;QACd,YAAY;QACb;iBAEA;QACI;;MACH,EAEN,2CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,cAAc;MACd,SAAS;MACT,UAAU;MACV,YAAY;MACZ,iBA1FI,WAAW,YAAY,aAAa,YAAY;MA2FpD,OA1FO,WAAW,YAAY,aAAa,YAAY;MA2FvD,YAAY;MACb;eA/FS,WAAW,YAAY,aAAa,SAAS;MAkGlD;KACH,EAGL,cACC,4CAAC;IAAI,OAAO;KAAE,WAAW;KAAQ,SAAS;KAAQ,KAAK;KAAQ;eAC7D,4CAAC,oBACC,2CAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,2CAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,KAAK,UAAU,cAAc,EAAE,EAAE,MAAM,EAAE;MACtC,IACF,EAEL,WAAW,UACV,4CAAC,oBACC,2CAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,2CAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,OAAO,WAAW,WACf,SACA,KAAK,UAAU,QAAQ,MAAM,EAAE;MAC/B,IACF;KAEJ;IAEJ;GACF"}

package/dist/hooks/use-default-render-tool.d.cts CHANGED Viewed

@@ -2,9 +2,9 @@ import React from "react";
 //#region src/hooks/use-default-render-tool.d.ts
 type DefaultRenderProps = {
-  name: string;
-  args: any;
-  status: string;
+  /** The name of the tool being called. */name: string; /** The parsed parameters passed to the tool call. */
+  parameters: unknown; /** Current execution status of the tool call. */
+  status: "inProgress" | "executing" | "complete"; /** The tool call result string, available only when `status` is `"complete"`. */
   result: string | undefined;
 };
 /**

package/dist/hooks/use-default-render-tool.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-default-render-tool.d.cts","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"mappings":";;;KAGK,kBAAA;~~EACH~~,IAAA;~~EACA~~,~~IAAA~~;~~EACA~~,MAAA;~~EACA~~,MAAA;AAAA~~;;;;;;;~~AAuCF~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~iBAAgB,oBAAA,CACd,MAAA;EACE,MAAA,IAAU,KAAA,EAAO,kBAAA,KAAuB,KAAA,CAAM,YAAA;AAAA,GAEhD,IAAA,GAAO,aAAA"}
1	+ {"version":3,"file":"use-default-render-tool.d.cts","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"mappings":";;;KAGK,kBAAA;2CAEH,IAAA,UAFqB;EAIrB,UAAA,WAJqB;EAMrB,MAAA,2CAFA;EAIA,MAAA;AAAA;;;AAuCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,oBAAA,CACd,MAAA;EACE,MAAA,IAAU,KAAA,EAAO,kBAAA,KAAuB,KAAA,CAAM,YAAA;AAAA,GAEhD,IAAA,GAAO,aAAA"}

package/dist/hooks/use-default-render-tool.d.mts CHANGED Viewed

@@ -2,9 +2,9 @@ import React from "react";
 //#region src/hooks/use-default-render-tool.d.ts
 type DefaultRenderProps = {
-  name: string;
-  args: any;
-  status: string;
+  /** The name of the tool being called. */name: string; /** The parsed parameters passed to the tool call. */
+  parameters: unknown; /** Current execution status of the tool call. */
+  status: "inProgress" | "executing" | "complete"; /** The tool call result string, available only when `status` is `"complete"`. */
   result: string | undefined;
 };
 /**

package/dist/hooks/use-default-render-tool.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-default-render-tool.d.mts","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"mappings":";;;KAGK,kBAAA;~~EACH~~,IAAA;~~EACA~~,~~IAAA~~;~~EACA~~,MAAA;~~EACA~~,MAAA;AAAA~~;;;;;;;~~AAuCF~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~iBAAgB,oBAAA,CACd,MAAA;EACE,MAAA,IAAU,KAAA,EAAO,kBAAA,KAAuB,KAAA,CAAM,YAAA;AAAA,GAEhD,IAAA,GAAO,aAAA"}
1	+ {"version":3,"file":"use-default-render-tool.d.mts","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"mappings":";;;KAGK,kBAAA;2CAEH,IAAA,UAFqB;EAIrB,UAAA,WAJqB;EAMrB,MAAA,2CAFA;EAIA,MAAA;AAAA;;;AAuCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,oBAAA,CACd,MAAA;EACE,MAAA,IAAU,KAAA,EAAO,kBAAA,KAAuB,KAAA,CAAM,YAAA;AAAA,GAEhD,IAAA,GAAO,aAAA"}

package/dist/hooks/use-default-render-tool.mjs CHANGED Viewed

@@ -45,7 +45,7 @@ function useDefaultRenderTool(config, deps) {
 		render: config?.render ?? DefaultToolCallRenderer
 	}, deps);
 }
-function DefaultToolCallRenderer({ name, args, status, result }) {
+function DefaultToolCallRenderer({ name, parameters, status, result }) {
 	const [isExpanded, setIsExpanded] = useState(false);
 	const statusString = String(status);
 	const isActive = statusString === "inProgress" || statusString === "executing";
@@ -161,7 +161,7 @@ function DefaultToolCallRenderer({ name, args, status, result }) {
 						whiteSpace: "pre-wrap",
 						wordBreak: "break-word"
 					},
-					children: JSON.stringify(args ?? {}, null, 2)
+					children: JSON.stringify(parameters ?? {}, null, 2)
 				})] }), result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 					style: {
 						fontSize: "10px",

package/dist/hooks/use-default-render-tool.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-default-render-tool.mjs","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useRenderTool } from \"./use-render-tool\";\n\ntype DefaultRenderProps = {\n name: string;\n ~~args~~: ~~any~~;\n status: ~~string~~;\n result: string \| undefined;\n};\n\n/*\n Registers a wildcard (`\"\"`) tool-call renderer via `useRenderTool`.\n \n * - Call with no config to use CopilotKit's built-in default tool-call card.\n * - Pass `config.render` to replace the default UI with your own fallback renderer.\n \n This is useful when you want a generic renderer for tools that do not have a\n * dedicated `useRenderTool({ name: \"...\" })` registration.\n \n @param config - Optional custom wildcard render function.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useDefaultRenderTool();\n * ```\n \n @example\n * ```tsx\n * useDefaultRenderTool({\n * render: ({ name, status }) => <div>{name}: {status}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * useDefaultRenderTool(\n * {\n * render: ({ name, result }) => (\n * <ToolEventRow title={name} payload={result} compact={compactMode} />\n * ),\n * },\n * [compactMode],\n * );\n * ```\n /\nexport function useDefaultRenderTool(\n config?: {\n render?: (props: DefaultRenderProps) => React.ReactElement;\n },\n deps?: ReadonlyArray<unknown>,\n): void {\n useRenderTool(\n {\n name: \"\",\n render: config?.render ?? DefaultToolCallRenderer,\n },\n deps,\n );\n}\n\nfunction DefaultToolCallRenderer({\n name,\n ~~args~~,\n status,\n result,\n}: DefaultRenderProps): React.ReactElement {\n const [isExpanded, setIsExpanded] = useState(false);\n\n const statusString = String(status) as\n \| \"inProgress\"\n \| \"executing\"\n \| \"complete\";\n const isActive =\n statusString === \"inProgress\" \|\| statusString === \"executing\";\n const isComplete = statusString === \"complete\";\n\n const statusLabel = isActive ? \"Running\" : isComplete ? \"Done\" : status;\n const dotColor = isActive ? \"#f59e0b\" : isComplete ? \"#10b981\" : \"#a1a1aa\";\n const badgeBg = isActive ? \"#fef3c7\" : isComplete ? \"#d1fae5\" : \"#f4f4f5\";\n const badgeColor = isActive ? \"#92400e\" : isComplete ? \"#065f46\" : \"#3f3f46\";\n\n return (\n <div\n style={{\n marginTop: \"8px\",\n paddingBottom: \"8px\",\n }}\n >\n <div\n style={{\n borderRadius: \"12px\",\n border: \"1px solid #e4e4e7\",\n backgroundColor: \"#fafafa\",\n padding: \"14px 16px\",\n }}\n >\n {/* Header row — always visible /}\n <div\n onClick={() => setIsExpanded(!isExpanded)}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"10px\",\n cursor: \"pointer\",\n userSelect: \"none\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: \"8px\",\n minWidth: 0,\n }}\n >\n <svg\n style={{\n height: \"14px\",\n width: \"14px\",\n color: \"#71717a\",\n transition: \"transform 0.15s\",\n transform: isExpanded ? \"rotate(90deg)\" : \"rotate(0deg)\",\n flexShrink: 0,\n }}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth={2}\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"\n />\n </svg>\n <span\n style={{\n display: \"inline-block\",\n height: \"8px\",\n width: \"8px\",\n borderRadius: \"50%\",\n backgroundColor: dotColor,\n flexShrink: 0,\n }}\n />\n <span\n style={{\n fontSize: \"13px\",\n fontWeight: 600,\n color: \"#18181b\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {name}\n </span>\n </div>\n\n <span\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n borderRadius: \"9999px\",\n padding: \"2px 8px\",\n fontSize: \"11px\",\n fontWeight: 500,\n backgroundColor: badgeBg,\n color: badgeColor,\n flexShrink: 0,\n }}\n >\n {statusLabel}\n </span>\n </div>\n\n {/ Expandable details */}\n {isExpanded && (\n <div style={{ marginTop: \"12px\", display: \"grid\", gap: \"12px\" }}>\n <div>\n <div\n style={{\n fontSize: \"10px\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n color: \"#71717a\",\n }}\n >\n Arguments\n </div>\n <pre\n style={{\n marginTop: \"6px\",\n maxHeight: \"200px\",\n overflow: \"auto\",\n borderRadius: \"6px\",\n backgroundColor: \"#f4f4f5\",\n padding: \"10px\",\n fontSize: \"11px\",\n lineHeight: 1.6,\n color: \"#27272a\",\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n }}\n >\n {JSON.stringify(~~args~~ ?? {}, null, 2)}\n </pre>\n </div>\n\n {result !== undefined && (\n <div>\n <div\n style={{\n fontSize: \"10px\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n color: \"#71717a\",\n }}\n >\n Result\n </div>\n <pre\n style={{\n marginTop: \"6px\",\n maxHeight: \"200px\",\n overflow: \"auto\",\n borderRadius: \"6px\",\n backgroundColor: \"#f4f4f5\",\n padding: \"10px\",\n fontSize: \"11px\",\n lineHeight: 1.6,\n color: \"#27272a\",\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n }}\n >\n {typeof result === \"string\"\n ? result\n : JSON.stringify(result, null, 2)}\n </pre>\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA8CA~~,SAAgB,qBACd,QAGA,MACM;AACN,eACE;EACE,MAAM;EACN,QAAQ,QAAQ,UAAU;EAC3B,EACD,KACD;;AAGH,SAAS,wBAAwB,EAC/B,MACA,~~MACA~~,QACA,UACyC;CACzC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,eAAe,OAAO,OAAO;CAInC,MAAM,WACJ,iBAAiB,gBAAgB,iBAAiB;CACpD,MAAM,aAAa,iBAAiB;AAOpC,QACE,oBAAC;EACC,OAAO;GACL,WAAW;GACX,eAAe;GAChB;YAED,qBAAC;GACC,OAAO;IACL,cAAc;IACd,QAAQ;IACR,iBAAiB;IACjB,SAAS;IACV;cAGD,qBAAC;IACC,eAAe,cAAc,CAAC,WAAW;IACzC,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,KAAK;KACL,QAAQ;KACR,YAAY;KACb;eAED,qBAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,KAAK;MACL,UAAU;MACX;;MAED,oBAAC;OACC,OAAO;QACL,QAAQ;QACR,OAAO;QACP,OAAO;QACP,YAAY;QACZ,WAAW,aAAa,kBAAkB;QAC1C,YAAY;QACb;OACD,MAAK;OACL,SAAQ;OACR,aAAa;OACb,QAAO;iBAEP,oBAAC;QACC,eAAc;QACd,gBAAe;QACf,GAAE;SACF;QACE;MACN,oBAAC,UACC,OAAO;OACL,SAAS;OACT,QAAQ;OACR,OAAO;OACP,cAAc;OACd,iBAjEG,WAAW,YAAY,aAAa,YAAY;OAkEnD,YAAY;OACb,GACD;MACF,oBAAC;OACC,OAAO;QACL,UAAU;QACV,YAAY;QACZ,OAAO;QACP,UAAU;QACV,cAAc;QACd,YAAY;QACb;iBAEA;QACI;;MACH,EAEN,oBAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,cAAc;MACd,SAAS;MACT,UAAU;MACV,YAAY;MACZ,iBA1FI,WAAW,YAAY,aAAa,YAAY;MA2FpD,OA1FO,WAAW,YAAY,aAAa,YAAY;MA2FvD,YAAY;MACb;eA/FS,WAAW,YAAY,aAAa,SAAS;MAkGlD;KACH,EAGL,cACC,qBAAC;IAAI,OAAO;KAAE,WAAW;KAAQ,SAAS;KAAQ,KAAK;KAAQ;eAC7D,qBAAC,oBACC,oBAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,oBAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,KAAK,UAAU,~~QAAQ~~,EAAE,EAAE,MAAM,EAAE;~~MAChC~~,IACF,EAEL,WAAW,UACV,qBAAC,oBACC,oBAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,oBAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,OAAO,WAAW,WACf,SACA,KAAK,UAAU,QAAQ,MAAM,EAAE;MAC/B,IACF;KAEJ;IAEJ;GACF"}
1	+ {"version":3,"file":"use-default-render-tool.mjs","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useRenderTool } from \"./use-render-tool\";\n\ntype DefaultRenderProps = {\n /** The name of the tool being called. /\n name: string;\n /* The parsed parameters passed to the tool call. /\n parameters: unknown;\n /* Current execution status of the tool call. /\n status: \"inProgress\" \| \"executing\" \| \"complete\";\n /* The tool call result string, available only when `status` is `\"complete\"`. /\n result: string \| undefined;\n};\n\n/\n Registers a wildcard (`\"\"`) tool-call renderer via `useRenderTool`.\n \n * - Call with no config to use CopilotKit's built-in default tool-call card.\n * - Pass `config.render` to replace the default UI with your own fallback renderer.\n \n This is useful when you want a generic renderer for tools that do not have a\n * dedicated `useRenderTool({ name: \"...\" })` registration.\n \n @param config - Optional custom wildcard render function.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useDefaultRenderTool();\n * ```\n \n @example\n * ```tsx\n * useDefaultRenderTool({\n * render: ({ name, status }) => <div>{name}: {status}</div>,\n * });\n * ```\n \n @example\n * ```tsx\n * useDefaultRenderTool(\n * {\n * render: ({ name, result }) => (\n * <ToolEventRow title={name} payload={result} compact={compactMode} />\n * ),\n * },\n * [compactMode],\n * );\n * ```\n /\nexport function useDefaultRenderTool(\n config?: {\n render?: (props: DefaultRenderProps) => React.ReactElement;\n },\n deps?: ReadonlyArray<unknown>,\n): void {\n useRenderTool(\n {\n name: \"\",\n render: config?.render ?? DefaultToolCallRenderer,\n },\n deps,\n );\n}\n\nfunction DefaultToolCallRenderer({\n name,\n parameters,\n status,\n result,\n}: DefaultRenderProps): React.ReactElement {\n const [isExpanded, setIsExpanded] = useState(false);\n\n const statusString = String(status) as\n \| \"inProgress\"\n \| \"executing\"\n \| \"complete\";\n const isActive =\n statusString === \"inProgress\" \|\| statusString === \"executing\";\n const isComplete = statusString === \"complete\";\n\n const statusLabel = isActive ? \"Running\" : isComplete ? \"Done\" : status;\n const dotColor = isActive ? \"#f59e0b\" : isComplete ? \"#10b981\" : \"#a1a1aa\";\n const badgeBg = isActive ? \"#fef3c7\" : isComplete ? \"#d1fae5\" : \"#f4f4f5\";\n const badgeColor = isActive ? \"#92400e\" : isComplete ? \"#065f46\" : \"#3f3f46\";\n\n return (\n <div\n style={{\n marginTop: \"8px\",\n paddingBottom: \"8px\",\n }}\n >\n <div\n style={{\n borderRadius: \"12px\",\n border: \"1px solid #e4e4e7\",\n backgroundColor: \"#fafafa\",\n padding: \"14px 16px\",\n }}\n >\n {/* Header row — always visible /}\n <div\n onClick={() => setIsExpanded(!isExpanded)}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"10px\",\n cursor: \"pointer\",\n userSelect: \"none\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: \"8px\",\n minWidth: 0,\n }}\n >\n <svg\n style={{\n height: \"14px\",\n width: \"14px\",\n color: \"#71717a\",\n transition: \"transform 0.15s\",\n transform: isExpanded ? \"rotate(90deg)\" : \"rotate(0deg)\",\n flexShrink: 0,\n }}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth={2}\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"\n />\n </svg>\n <span\n style={{\n display: \"inline-block\",\n height: \"8px\",\n width: \"8px\",\n borderRadius: \"50%\",\n backgroundColor: dotColor,\n flexShrink: 0,\n }}\n />\n <span\n style={{\n fontSize: \"13px\",\n fontWeight: 600,\n color: \"#18181b\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {name}\n </span>\n </div>\n\n <span\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n borderRadius: \"9999px\",\n padding: \"2px 8px\",\n fontSize: \"11px\",\n fontWeight: 500,\n backgroundColor: badgeBg,\n color: badgeColor,\n flexShrink: 0,\n }}\n >\n {statusLabel}\n </span>\n </div>\n\n {/ Expandable details */}\n {isExpanded && (\n <div style={{ marginTop: \"12px\", display: \"grid\", gap: \"12px\" }}>\n <div>\n <div\n style={{\n fontSize: \"10px\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n color: \"#71717a\",\n }}\n >\n Arguments\n </div>\n <pre\n style={{\n marginTop: \"6px\",\n maxHeight: \"200px\",\n overflow: \"auto\",\n borderRadius: \"6px\",\n backgroundColor: \"#f4f4f5\",\n padding: \"10px\",\n fontSize: \"11px\",\n lineHeight: 1.6,\n color: \"#27272a\",\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n }}\n >\n {JSON.stringify(parameters ?? {}, null, 2)}\n </pre>\n </div>\n\n {result !== undefined && (\n <div>\n <div\n style={{\n fontSize: \"10px\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n color: \"#71717a\",\n }}\n >\n Result\n </div>\n <pre\n style={{\n marginTop: \"6px\",\n maxHeight: \"200px\",\n overflow: \"auto\",\n borderRadius: \"6px\",\n backgroundColor: \"#f4f4f5\",\n padding: \"10px\",\n fontSize: \"11px\",\n lineHeight: 1.6,\n color: \"#27272a\",\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n }}\n >\n {typeof result === \"string\"\n ? result\n : JSON.stringify(result, null, 2)}\n </pre>\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,qBACd,QAGA,MACM;AACN,eACE;EACE,MAAM;EACN,QAAQ,QAAQ,UAAU;EAC3B,EACD,KACD;;AAGH,SAAS,wBAAwB,EAC/B,MACA,YACA,QACA,UACyC;CACzC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,eAAe,OAAO,OAAO;CAInC,MAAM,WACJ,iBAAiB,gBAAgB,iBAAiB;CACpD,MAAM,aAAa,iBAAiB;AAOpC,QACE,oBAAC;EACC,OAAO;GACL,WAAW;GACX,eAAe;GAChB;YAED,qBAAC;GACC,OAAO;IACL,cAAc;IACd,QAAQ;IACR,iBAAiB;IACjB,SAAS;IACV;cAGD,qBAAC;IACC,eAAe,cAAc,CAAC,WAAW;IACzC,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,KAAK;KACL,QAAQ;KACR,YAAY;KACb;eAED,qBAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,KAAK;MACL,UAAU;MACX;;MAED,oBAAC;OACC,OAAO;QACL,QAAQ;QACR,OAAO;QACP,OAAO;QACP,YAAY;QACZ,WAAW,aAAa,kBAAkB;QAC1C,YAAY;QACb;OACD,MAAK;OACL,SAAQ;OACR,aAAa;OACb,QAAO;iBAEP,oBAAC;QACC,eAAc;QACd,gBAAe;QACf,GAAE;SACF;QACE;MACN,oBAAC,UACC,OAAO;OACL,SAAS;OACT,QAAQ;OACR,OAAO;OACP,cAAc;OACd,iBAjEG,WAAW,YAAY,aAAa,YAAY;OAkEnD,YAAY;OACb,GACD;MACF,oBAAC;OACC,OAAO;QACL,UAAU;QACV,YAAY;QACZ,OAAO;QACP,UAAU;QACV,cAAc;QACd,YAAY;QACb;iBAEA;QACI;;MACH,EAEN,oBAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,cAAc;MACd,SAAS;MACT,UAAU;MACV,YAAY;MACZ,iBA1FI,WAAW,YAAY,aAAa,YAAY;MA2FpD,OA1FO,WAAW,YAAY,aAAa,YAAY;MA2FvD,YAAY;MACb;eA/FS,WAAW,YAAY,aAAa,SAAS;MAkGlD;KACH,EAGL,cACC,qBAAC;IAAI,OAAO;KAAE,WAAW;KAAQ,SAAS;KAAQ,KAAK;KAAQ;eAC7D,qBAAC,oBACC,oBAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,oBAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,KAAK,UAAU,cAAc,EAAE,EAAE,MAAM,EAAE;MACtC,IACF,EAEL,WAAW,UACV,qBAAC,oBACC,oBAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,oBAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,OAAO,WAAW,WACf,SACA,KAAK,UAAU,QAAQ,MAAM,EAAE;MAC/B,IACF;KAEJ;IAEJ;GACF"}

package/dist/hooks/use-render-tool.cjs CHANGED Viewed

@@ -13,7 +13,7 @@ const EMPTY_DEPS = [];
 * - keeps renderer entries on cleanup so historical chat tool calls can still render,
 * - refreshes registration when `deps` change.
 *
-* @typeParam S - Zod schema type describing tool call args.
+* @typeParam S - Zod schema type describing tool call parameters.
 * @param config - Renderer config for wildcard or named tools.
 * @param deps - Optional dependencies to refresh registration.
 *
@@ -22,9 +22,9 @@ const EMPTY_DEPS = [];
 * useRenderTool(
 *   {
 *     name: "searchDocs",
-*     args: z.object({ query: z.string() }),
-*     render: ({ status, args, result }) => {
-*       if (status === "executing") return <div>Searching {args.query}</div>;
+*     parameters: z.object({ query: z.string() }),
+*     render: ({ status, parameters, result }) => {
+*       if (status === "executing") return <div>Searching {parameters.query}</div>;
 *       if (status === "complete") return <div>{result}</div>;
 *       return <div>Preparing...</div>;
 *     },
@@ -38,7 +38,7 @@ const EMPTY_DEPS = [];
 * useRenderTool(
 *   {
 *     name: "summarize",
-*     args: z.object({ text: z.string() }),
+*     parameters: z.object({ text: z.string() }),
 *     agentId: "research-agent",
 *     render: ({ name, status }) => <div>{name}: {status}</div>,
 *   },
@@ -50,14 +50,20 @@ function useRenderTool(config, deps) {
 	const { copilotkit } = require_CopilotKitProvider.useCopilotKit();
 	const extraDeps = deps ?? EMPTY_DEPS;
 	(0, react.useEffect)(() => {
-		const renderer = config.name === "*" && !config.args ? require_defineToolCallRenderer.defineToolCallRenderer({
+		const renderer = config.name === "*" && !config.parameters ? require_defineToolCallRenderer.defineToolCallRenderer({
 			name: "*",
-			render: config.render,
+			render: (props) => config.render({
+				...props,
+				parameters: props.args
+			}),
 			...config.agentId ? { agentId: config.agentId } : {}
 		}) : require_defineToolCallRenderer.defineToolCallRenderer({
 			name: config.name,
-			args: config.args,
-			render: config.render,
+			args: config.parameters,
+			render: (props) => config.render({
+				...props,
+				parameters: props.args
+			}),
 			...config.agentId ? { agentId: config.agentId } : {}
 		});
 		const keyOf = (rc) => `${rc.agentId ?? ""}:${rc.name}`;

package/dist/hooks/use-render-tool.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-render-tool.cjs","names":["useCopilotKit","defineToolCallRenderer"],"sources":["../../src/hooks/use-render-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { z } from \"zod\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport { defineToolCallRenderer } from \"../types/defineToolCallRenderer\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport interface RenderToolInProgressProps<S extends z.ZodTypeAny> {\n name: string;\n ~~args~~: Partial<z.infer<S>>;\n status: \"inProgress\";\n result: undefined;\n}\n\nexport interface RenderToolExecutingProps<S extends z.ZodTypeAny> {\n name: string;\n ~~args~~: z.infer<S>;\n status: \"executing\";\n result: undefined;\n}\n\nexport interface RenderToolCompleteProps<S extends z.ZodTypeAny> {\n name: string;\n ~~args~~: z.infer<S>;\n status: \"complete\";\n result: string;\n}\n\nexport type RenderToolProps<S extends z.ZodTypeAny> =\n \| RenderToolInProgressProps<S>\n \| RenderToolExecutingProps<S>\n \| RenderToolCompleteProps<S>;\n\ntype RenderToolConfig<S extends z.ZodTypeAny> = {\n name: string;\n ~~args~~?: S;\n render: (props: RenderToolProps<S>) => React.ReactElement;\n agentId?: string;\n};\n\n/*\n Registers a wildcard (`\"\"`) renderer for tool calls.\n \n * The wildcard renderer is used as a fallback when no exact name-matched\n * renderer is registered for a tool call.\n \n @param config - Wildcard renderer configuration.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useRenderTool(\n * {\n * name: \"\",\n render: ({ name, status }) => (\n * <div>\n * {status === \"complete\" ? \"✓\" : \"⏳\"} {name}\n * </div>\n * ),\n * },\n * [],\n * );\n * ```\n /\nexport function useRenderTool(\n config: {\n name: \"\";\n render: (props: any) => React.ReactElement;\n agentId?: string;\n },\n deps?: ReadonlyArray<unknown>,\n): void;\n\n/*\n Registers a name-scoped renderer for tool calls.\n \n The provided `~~args~~` Zod schema defines the typed shape of `props.~~args~~`\n * in `render` for `executing` and `complete` states.\n \n @typeParam S - Zod schema type describing tool call ~~args~~.\n * @param config - Named renderer configuration.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useRenderTool(\n * {\n * name: \"searchDocs\",\n * ~~args~~: z.object({ query: z.string() }),\n * render: ({ status, ~~args~~, result }) => {\n * if (status === \"inProgress\") return <div>Preparing...</div>;\n * if (status === \"executing\") return <div>Searching {~~args~~.query}</div>;\n * return <div>{result}</div>;\n * },\n * },\n * [],\n * );\n * ```\n /\nexport function useRenderTool<S extends z.ZodTypeAny>(\n config: {\n name: string;\n ~~args~~: S;\n render: (props: RenderToolProps<S>) => React.ReactElement;\n agentId?: string;\n },\n deps?: ReadonlyArray<unknown>,\n): void;\n\n/\n Registers a renderer entry in CopilotKit's `renderToolCalls` registry.\n \n Key behavior:\n * - deduplicates by `agentId:name` (latest registration wins),\n * - keeps renderer entries on cleanup so historical chat tool calls can still render,\n * - refreshes registration when `deps` change.\n \n @typeParam S - Zod schema type describing tool call ~~args~~.\n * @param config - Renderer config for wildcard or named tools.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useRenderTool(\n * {\n * name: \"searchDocs\",\n * ~~args~~: z.object({ query: z.string() }),\n * render: ({ status, ~~args~~, result }) => {\n * if (status === \"executing\") return <div>Searching {~~args~~.query}</div>;\n * if (status === \"complete\") return <div>{result}</div>;\n * return <div>Preparing...</div>;\n * },\n * },\n * [],\n * );\n * ```\n \n @example\n * ```tsx\n * useRenderTool(\n * {\n * name: \"summarize\",\n * ~~args~~: z.object({ text: z.string() }),\n * agentId: \"research-agent\",\n * render: ({ name, status }) => <div>{name}: {status}</div>,\n * },\n * [selectedAgentId],\n * );\n * ```\n /\nexport function useRenderTool<S extends z.ZodTypeAny>(\n config: RenderToolConfig<S>,\n deps?: ReadonlyArray<unknown>,\n): void {\n const { copilotkit } = useCopilotKit();\n const extraDeps = deps ?? EMPTY_DEPS;\n\n useEffect(() => {\n // Build the ReactToolCallRenderer via defineToolCallRenderer\n const renderer =\n config.name === \"\" && !config.~~args~~\n ? defineToolCallRenderer({\n name: \"*\",\n render: config.render,\n ...(config.agentId ? { agentId: config.agentId } : {}),\n })\n : defineToolCallRenderer({\n name: config.name,\n args: config.~~args~~!,\n render: config.render,\n ...(config.agentId ? { agentId: config.agentId } : {}),\n });\n\n // Dedupe by \"agentId:name\" key, same pattern as useFrontendTool\n const keyOf = (rc: ReactToolCallRenderer) =>\n `${rc.agentId ?? \"\"}:${rc.name}`;\n const currentRenderToolCalls =\n copilotkit.renderToolCalls as ReactToolCallRenderer[];\n\n const mergedMap = new Map<string, ReactToolCallRenderer>();\n for (const rc of currentRenderToolCalls) {\n mergedMap.set(keyOf(rc), rc);\n }\n\n mergedMap.set(keyOf(renderer), renderer);\n\n copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n\n // No cleanup removal — keeps renderer for chat history, same as useFrontendTool\n }, [config.name, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;;;AAMA,MAAM,aAAqC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiJ7C,SAAgB,cACd,QACA,MACM;CACN,MAAM,EAAE,eAAeA,0CAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,4BAAgB;EAEd,MAAM,WACJ,OAAO,SAAS,OAAO,CAAC,OAAO,~~OAC3BC~~,sDAAuB;GACrB,MAAM;GACN,~~QAAQ~~,OAAO;~~GACf~~,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC,GACFA,sDAAuB;GACrB,MAAM,OAAO;GACb,MAAM,OAAO;GACb,~~QAAQ~~,OAAO;~~GACf~~,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC;EAGR,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;EAC5B,MAAM,yBACJ,WAAW;EAEb,MAAM,4BAAY,IAAI,KAAoC;AAC1D,OAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;AAG9B,YAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAExC,aAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;IAG5D;EAAC,OAAO;EAAM;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}
1	+ {"version":3,"file":"use-render-tool.cjs","names":["useCopilotKit","defineToolCallRenderer"],"sources":["../../src/hooks/use-render-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { z } from \"zod\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport { defineToolCallRenderer } from \"../types/defineToolCallRenderer\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport interface RenderToolInProgressProps<S extends z.ZodTypeAny> {\n name: string;\n parameters: Partial<z.infer<S>>;\n status: \"inProgress\";\n result: undefined;\n}\n\nexport interface RenderToolExecutingProps<S extends z.ZodTypeAny> {\n name: string;\n parameters: z.infer<S>;\n status: \"executing\";\n result: undefined;\n}\n\nexport interface RenderToolCompleteProps<S extends z.ZodTypeAny> {\n name: string;\n parameters: z.infer<S>;\n status: \"complete\";\n result: string;\n}\n\nexport type RenderToolProps<S extends z.ZodTypeAny> =\n \| RenderToolInProgressProps<S>\n \| RenderToolExecutingProps<S>\n \| RenderToolCompleteProps<S>;\n\ntype RenderToolConfig<S extends z.ZodTypeAny> = {\n name: string;\n parameters?: S;\n render: (props: RenderToolProps<S>) => React.ReactElement;\n agentId?: string;\n};\n\n/*\n Registers a wildcard (`\"\"`) renderer for tool calls.\n \n * The wildcard renderer is used as a fallback when no exact name-matched\n * renderer is registered for a tool call.\n \n @param config - Wildcard renderer configuration.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useRenderTool(\n * {\n * name: \"\",\n render: ({ name, status }) => (\n * <div>\n * {status === \"complete\" ? \"✓\" : \"⏳\"} {name}\n * </div>\n * ),\n * },\n * [],\n * );\n * ```\n /\nexport function useRenderTool(\n config: {\n name: \"\";\n render: (props: any) => React.ReactElement;\n agentId?: string;\n },\n deps?: ReadonlyArray<unknown>,\n): void;\n\n/*\n Registers a name-scoped renderer for tool calls.\n \n The provided `parameters` Zod schema defines the typed shape of `props.parameters`\n * in `render` for `executing` and `complete` states.\n \n @typeParam S - Zod schema type describing tool call parameters.\n * @param config - Named renderer configuration.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useRenderTool(\n * {\n * name: \"searchDocs\",\n * parameters: z.object({ query: z.string() }),\n * render: ({ status, parameters, result }) => {\n * if (status === \"inProgress\") return <div>Preparing...</div>;\n * if (status === \"executing\") return <div>Searching {parameters.query}</div>;\n * return <div>{result}</div>;\n * },\n * },\n * [],\n * );\n * ```\n /\nexport function useRenderTool<S extends z.ZodTypeAny>(\n config: {\n name: string;\n parameters: S;\n render: (props: RenderToolProps<S>) => React.ReactElement;\n agentId?: string;\n },\n deps?: ReadonlyArray<unknown>,\n): void;\n\n/\n Registers a renderer entry in CopilotKit's `renderToolCalls` registry.\n \n Key behavior:\n * - deduplicates by `agentId:name` (latest registration wins),\n * - keeps renderer entries on cleanup so historical chat tool calls can still render,\n * - refreshes registration when `deps` change.\n \n @typeParam S - Zod schema type describing tool call parameters.\n * @param config - Renderer config for wildcard or named tools.\n * @param deps - Optional dependencies to refresh registration.\n \n @example\n * ```tsx\n * useRenderTool(\n * {\n * name: \"searchDocs\",\n * parameters: z.object({ query: z.string() }),\n * render: ({ status, parameters, result }) => {\n * if (status === \"executing\") return <div>Searching {parameters.query}</div>;\n * if (status === \"complete\") return <div>{result}</div>;\n * return <div>Preparing...</div>;\n * },\n * },\n * [],\n * );\n * ```\n \n @example\n * ```tsx\n * useRenderTool(\n * {\n * name: \"summarize\",\n * parameters: z.object({ text: z.string() }),\n * agentId: \"research-agent\",\n * render: ({ name, status }) => <div>{name}: {status}</div>,\n * },\n * [selectedAgentId],\n * );\n * ```\n /\nexport function useRenderTool<S extends z.ZodTypeAny>(\n config: RenderToolConfig<S>,\n deps?: ReadonlyArray<unknown>,\n): void {\n const { copilotkit } = useCopilotKit();\n const extraDeps = deps ?? EMPTY_DEPS;\n\n useEffect(() => {\n // Build the ReactToolCallRenderer via defineToolCallRenderer\n const renderer =\n config.name === \"\" && !config.parameters\n ? defineToolCallRenderer({\n name: \"*\",\n render: (props) =>\n config.render({ ...props, parameters: props.args }),\n ...(config.agentId ? { agentId: config.agentId } : {}),\n })\n : defineToolCallRenderer({\n name: config.name,\n args: config.parameters!,\n render: (props) =>\n config.render({ ...props, parameters: props.args }),\n ...(config.agentId ? { agentId: config.agentId } : {}),\n });\n\n // Dedupe by \"agentId:name\" key, same pattern as useFrontendTool\n const keyOf = (rc: ReactToolCallRenderer) =>\n `${rc.agentId ?? \"\"}:${rc.name}`;\n const currentRenderToolCalls =\n copilotkit.renderToolCalls as ReactToolCallRenderer[];\n\n const mergedMap = new Map<string, ReactToolCallRenderer>();\n for (const rc of currentRenderToolCalls) {\n mergedMap.set(keyOf(rc), rc);\n }\n\n mergedMap.set(keyOf(renderer), renderer);\n\n copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n\n // No cleanup removal — keeps renderer for chat history, same as useFrontendTool\n }, [config.name, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;;;AAMA,MAAM,aAAqC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiJ7C,SAAgB,cACd,QACA,MACM;CACN,MAAM,EAAE,eAAeA,0CAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,4BAAgB;EAEd,MAAM,WACJ,OAAO,SAAS,OAAO,CAAC,OAAO,aAC3BC,sDAAuB;GACrB,MAAM;GACN,SAAS,UACP,OAAO,OAAO;IAAE,GAAG;IAAO,YAAY,MAAM;IAAM,CAAC;GACrD,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC,GACFA,sDAAuB;GACrB,MAAM,OAAO;GACb,MAAM,OAAO;GACb,SAAS,UACP,OAAO,OAAO;IAAE,GAAG;IAAO,YAAY,MAAM;IAAM,CAAC;GACrD,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC;EAGR,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;EAC5B,MAAM,yBACJ,WAAW;EAEb,MAAM,4BAAY,IAAI,KAAoC;AAC1D,OAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;AAG9B,YAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAExC,aAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;IAG5D;EAAC,OAAO;EAAM;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}