@copilotkitnext/react 1.51.5-next.2 → 1.51.5-next.3

package/dist/hooks/index.cjs

@@ -2,6 +2,7 @@ const require_use_render_tool_call = require('./use-render-tool-call.cjs');
 const require_use_render_custom_messages = require('./use-render-custom-messages.cjs');
 const require_use_render_activity_message = require('./use-render-activity-message.cjs');
 const require_use_frontend_tool = require('./use-frontend-tool.cjs');
+const require_use_component = require('./use-component.cjs');
 const require_use_render_tool = require('./use-render-tool.cjs');
 const require_use_default_render_tool = require('./use-default-render-tool.cjs');
 const require_use_human_in_the_loop = require('./use-human-in-the-loop.cjs');

package/dist/hooks/index.d.cts

@@ -2,6 +2,7 @@ import { useRenderToolCall } from "./use-render-tool-call.cjs";
 import { useRenderCustomMessages } from "./use-render-custom-messages.cjs";
 import { useRenderActivityMessage } from "./use-render-activity-message.cjs";
 import { useFrontendTool } from "./use-frontend-tool.cjs";
+import { useComponent } from "./use-component.cjs";
 import { useRenderTool } from "./use-render-tool.cjs";
 import { useDefaultRenderTool } from "./use-default-render-tool.cjs";
 import { useHumanInTheLoop } from "./use-human-in-the-loop.cjs";

package/dist/hooks/index.d.mts

@@ -2,6 +2,7 @@ import { useRenderToolCall } from "./use-render-tool-call.mjs";
 import { useRenderCustomMessages } from "./use-render-custom-messages.mjs";
 import { useRenderActivityMessage } from "./use-render-activity-message.mjs";
 import { useFrontendTool } from "./use-frontend-tool.mjs";
+import { useComponent } from "./use-component.mjs";
 import { useRenderTool } from "./use-render-tool.mjs";
 import { useDefaultRenderTool } from "./use-default-render-tool.mjs";
 import { useHumanInTheLoop } from "./use-human-in-the-loop.mjs";

package/dist/hooks/index.mjs

@@ -2,6 +2,7 @@ import { useRenderToolCall } from "./use-render-tool-call.mjs";
 import { useRenderCustomMessages } from "./use-render-custom-messages.mjs";
 import { useRenderActivityMessage } from "./use-render-activity-message.mjs";
 import { useFrontendTool } from "./use-frontend-tool.mjs";
+import { useComponent } from "./use-component.mjs";
 import { useRenderTool } from "./use-render-tool.mjs";
 import { useDefaultRenderTool } from "./use-default-render-tool.mjs";
 import { useHumanInTheLoop } from "./use-human-in-the-loop.mjs";

package/dist/hooks/use-component.cjs

@@ -0,0 +1,60 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_use_frontend_tool = require('./use-frontend-tool.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/hooks/use-component.tsx
+/**
+* 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.
+*
+* 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.
+* @param config - Tool registration config.
+* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
+*
+* @example
+* ```tsx
+* useComponent({
+*   name: "showWeatherCard",
+*   parameters: z.object({ city: z.string() }),
+*   component: ({ city }: { city: string }) => <div>{city}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* useComponent(
+*   {
+*     name: "renderProfile",
+*     parameters: z.object({ userId: z.string() }),
+*     component: ProfileCard,
+*     agentId: "support-agent",
+*   },
+*   [selectedAgentId],
+* );
+* ```
+*/
+function useComponent(config, deps) {
+	const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
+	const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
+	require_use_frontend_tool.useFrontendTool({
+		name: config.name,
+		description: fullDescription,
+		parameters: config.parameters,
+		render: ({ args }) => {
+			const Component = config.component;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
+		},
+		agentId: config.agentId
+	}, deps);
+}
+
+//#endregion
+exports.useComponent = useComponent;
+//# sourceMappingURL=use-component.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,51 @@
+import { ComponentType } from "react";
+import { z } from "zod";
+
+//#region src/hooks/use-component.d.ts
+/**
+ * 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.
+ *
+ * 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.
+ * @param config - Tool registration config.
+ * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
+ *
+ * @example
+ * ```tsx
+ * useComponent({
+ *   name: "showWeatherCard",
+ *   parameters: z.object({ city: z.string() }),
+ *   component: ({ city }: { city: string }) => <div>{city}</div>,
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * useComponent(
+ *   {
+ *     name: "renderProfile",
+ *     parameters: z.object({ userId: z.string() }),
+ *     component: ProfileCard,
+ *     agentId: "support-agent",
+ *   },
+ *   [selectedAgentId],
+ * );
+ * ```
+ */
+declare function useComponent<T extends Record<string, unknown> = Record<string, unknown>>(config: {
+  name: string;
+  description?: string;
+  parameters?: z.ZodType<T>;
+  component: ComponentType<T>;
+  agentId?: string;
+}, deps?: ReadonlyArray<unknown>): void;
+//#endregion
+export { useComponent };
+//# sourceMappingURL=use-component.d.cts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,51 @@
+import { ComponentType } from "react";
+import { z } from "zod";
+
+//#region src/hooks/use-component.d.ts
+/**
+ * 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.
+ *
+ * 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.
+ * @param config - Tool registration config.
+ * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
+ *
+ * @example
+ * ```tsx
+ * useComponent({
+ *   name: "showWeatherCard",
+ *   parameters: z.object({ city: z.string() }),
+ *   component: ({ city }: { city: string }) => <div>{city}</div>,
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * useComponent(
+ *   {
+ *     name: "renderProfile",
+ *     parameters: z.object({ userId: z.string() }),
+ *     component: ProfileCard,
+ *     agentId: "support-agent",
+ *   },
+ *   [selectedAgentId],
+ * );
+ * ```
+ */
+declare function useComponent<T extends Record<string, unknown> = Record<string, unknown>>(config: {
+  name: string;
+  description?: string;
+  parameters?: z.ZodType<T>;
+  component: ComponentType<T>;
+  agentId?: string;
+}, deps?: ReadonlyArray<unknown>): void;
+//#endregion
+export { useComponent };
+//# sourceMappingURL=use-component.d.mts.map

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

@@ -0,0 +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"}

package/dist/hooks/use-component.mjs

@@ -0,0 +1,59 @@
+import { useFrontendTool } from "./use-frontend-tool.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/hooks/use-component.tsx
+/**
+* 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.
+*
+* 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.
+* @param config - Tool registration config.
+* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
+*
+* @example
+* ```tsx
+* useComponent({
+*   name: "showWeatherCard",
+*   parameters: z.object({ city: z.string() }),
+*   component: ({ city }: { city: string }) => <div>{city}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* useComponent(
+*   {
+*     name: "renderProfile",
+*     parameters: z.object({ userId: z.string() }),
+*     component: ProfileCard,
+*     agentId: "support-agent",
+*   },
+*   [selectedAgentId],
+* );
+* ```
+*/
+function useComponent(config, deps) {
+	const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
+	const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
+	useFrontendTool({
+		name: config.name,
+		description: fullDescription,
+		parameters: config.parameters,
+		render: ({ args }) => {
+			const Component = config.component;
+			return /* @__PURE__ */ jsx(Component, { ...args });
+		},
+		agentId: config.agentId
+	}, deps);
+}
+
+//#endregion
+export { useComponent };
+//# sourceMappingURL=use-component.mjs.map

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

@@ -0,0 +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"}

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

@@ -6,10 +6,40 @@ let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/hooks/use-default-render-tool.tsx
 /**
-* Registers a wildcard ("*") tool-call renderer via `useRenderTool`.
+* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
 *
-* - Call with no arguments to get a sensible default UI.
-* - Pass a `render` function to fully replace the default UI.
+* - Call with no config to use CopilotKit's built-in default tool-call card.
+* - Pass `config.render` to replace the default UI with your own fallback renderer.
+*
+* This is useful when you want a generic renderer for tools that do not have a
+* dedicated `useRenderTool({ name: "..." })` registration.
+*
+* @param config - Optional custom wildcard render function.
+* @param deps - Optional dependencies to refresh registration.
+*
+* @example
+* ```tsx
+* useDefaultRenderTool();
+* ```
+*
+* @example
+* ```tsx
+* useDefaultRenderTool({
+*   render: ({ name, status }) => <div>{name}: {status}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* useDefaultRenderTool(
+*   {
+*     render: ({ name, result }) => (
+*       <ToolEventRow title={name} payload={result} compact={compactMode} />
+*     ),
+*   },
+*   [compactMode],
+* );
+* ```
 */
 function useDefaultRenderTool(config, deps) {
 	require_use_render_tool.useRenderTool({

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

@@ -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 arguments to get a sensible default UI.\n * - Pass a `render` function to fully replace the default UI.\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":";;;;;;;;;;;;;AAgBA,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"}
+{"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"}

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

@@ -8,10 +8,40 @@ type DefaultRenderProps = {
   result: string | undefined;
 };
 /**
- * Registers a wildcard ("*") tool-call renderer via `useRenderTool`.
+ * Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
  *
- * - Call with no arguments to get a sensible default UI.
- * - Pass a `render` function to fully replace the default UI.
+ * - Call with no config to use CopilotKit's built-in default tool-call card.
+ * - Pass `config.render` to replace the default UI with your own fallback renderer.
+ *
+ * This is useful when you want a generic renderer for tools that do not have a
+ * dedicated `useRenderTool({ name: "..." })` registration.
+ *
+ * @param config - Optional custom wildcard render function.
+ * @param deps - Optional dependencies to refresh registration.
+ *
+ * @example
+ * ```tsx
+ * useDefaultRenderTool();
+ * ```
+ *
+ * @example
+ * ```tsx
+ * useDefaultRenderTool({
+ *   render: ({ name, status }) => <div>{name}: {status}</div>,
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * useDefaultRenderTool(
+ *   {
+ *     render: ({ name, result }) => (
+ *       <ToolEventRow title={name} payload={result} compact={compactMode} />
+ *     ),
+ *   },
+ *   [compactMode],
+ * );
+ * ```
  */
 declare function useDefaultRenderTool(config?: {
   render?: (props: DefaultRenderProps) => React.ReactElement;

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

@@ -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;;;;;;;iBASc,oBAAA,CACd,MAAA;EACE,MAAA,IAAU,KAAA,EAAO,kBAAA,KAAuB,KAAA,CAAM,YAAA;AAAA,GAEhD,IAAA,GAAO,aAAA"}
+{"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"}

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

@@ -8,10 +8,40 @@ type DefaultRenderProps = {
   result: string | undefined;
 };
 /**
- * Registers a wildcard ("*") tool-call renderer via `useRenderTool`.
+ * Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
  *
- * - Call with no arguments to get a sensible default UI.
- * - Pass a `render` function to fully replace the default UI.
+ * - Call with no config to use CopilotKit's built-in default tool-call card.
+ * - Pass `config.render` to replace the default UI with your own fallback renderer.
+ *
+ * This is useful when you want a generic renderer for tools that do not have a
+ * dedicated `useRenderTool({ name: "..." })` registration.
+ *
+ * @param config - Optional custom wildcard render function.
+ * @param deps - Optional dependencies to refresh registration.
+ *
+ * @example
+ * ```tsx
+ * useDefaultRenderTool();
+ * ```
+ *
+ * @example
+ * ```tsx
+ * useDefaultRenderTool({
+ *   render: ({ name, status }) => <div>{name}: {status}</div>,
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * useDefaultRenderTool(
+ *   {
+ *     render: ({ name, result }) => (
+ *       <ToolEventRow title={name} payload={result} compact={compactMode} />
+ *     ),
+ *   },
+ *   [compactMode],
+ * );
+ * ```
  */
 declare function useDefaultRenderTool(config?: {
   render?: (props: DefaultRenderProps) => React.ReactElement;

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

@@ -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;;;;;;;iBASc,oBAAA,CACd,MAAA;EACE,MAAA,IAAU,KAAA,EAAO,kBAAA,KAAuB,KAAA,CAAM,YAAA;AAAA,GAEhD,IAAA,GAAO,aAAA"}
+{"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"}

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

@@ -4,10 +4,40 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/hooks/use-default-render-tool.tsx
 /**
-* Registers a wildcard ("*") tool-call renderer via `useRenderTool`.
+* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
 *
-* - Call with no arguments to get a sensible default UI.
-* - Pass a `render` function to fully replace the default UI.
+* - Call with no config to use CopilotKit's built-in default tool-call card.
+* - Pass `config.render` to replace the default UI with your own fallback renderer.
+*
+* This is useful when you want a generic renderer for tools that do not have a
+* dedicated `useRenderTool({ name: "..." })` registration.
+*
+* @param config - Optional custom wildcard render function.
+* @param deps - Optional dependencies to refresh registration.
+*
+* @example
+* ```tsx
+* useDefaultRenderTool();
+* ```
+*
+* @example
+* ```tsx
+* useDefaultRenderTool({
+*   render: ({ name, status }) => <div>{name}: {status}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* useDefaultRenderTool(
+*   {
+*     render: ({ name, result }) => (
+*       <ToolEventRow title={name} payload={result} compact={compactMode} />
+*     ),
+*   },
+*   [compactMode],
+* );
+* ```
 */
 function useDefaultRenderTool(config, deps) {
 	useRenderTool({

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

@@ -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 arguments to get a sensible default UI.\n * - Pass a `render` function to fully replace the default UI.\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":";;;;;;;;;;;AAgBA,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"}
+{"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"}

package/dist/hooks/use-frontend-tool.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-frontend-tool.cjs","names":["useCopilotKit"],"sources":["../../src/hooks/use-frontend-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport type { ReactFrontendTool } from \"../types/frontend-tool\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport function useFrontendTool<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>(tool: ReactFrontendTool<T>, deps?: ReadonlyArray<unknown>) {\n  const { copilotkit } = useCopilotKit();\n  const extraDeps = deps ?? EMPTY_DEPS;\n\n  useEffect(() => {\n    const name = tool.name;\n\n    // Always register/override the tool for this name on mount\n    if (copilotkit.getTool({ toolName: name, agentId: tool.agentId })) {\n      console.warn(\n        `Tool '${name}' already exists for agent '${tool.agentId || \"global\"}'. Overriding with latest registration.`,\n      );\n      copilotkit.removeTool(name, tool.agentId);\n    }\n    copilotkit.addTool(tool);\n\n    // Register/override renderer by name and agentId through core\n    if (tool.render) {\n      // Get current render tool calls and merge with new entry\n      const keyOf = (rc: ReactToolCallRenderer<any>) =>\n        `${rc.agentId ?? \"\"}:${rc.name}`;\n      const currentRenderToolCalls =\n        copilotkit.renderToolCalls as ReactToolCallRenderer<any>[];\n\n      // Build map from existing entries\n      const mergedMap = new Map<string, ReactToolCallRenderer<any>>();\n      for (const rc of currentRenderToolCalls) {\n        mergedMap.set(keyOf(rc), rc);\n      }\n\n      // Add/overwrite with new entry\n      const newEntry = {\n        name,\n        args: tool.parameters,\n        agentId: tool.agentId,\n        render: tool.render,\n      } as ReactToolCallRenderer<any>;\n      mergedMap.set(keyOf(newEntry), newEntry);\n\n      // Set the merged list back\n      copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n    }\n\n    return () => {\n      copilotkit.removeTool(name, tool.agentId);\n      // we are intentionally not removing the render here so that the tools can still render in the chat history\n    };\n    // Depend on stable keys by default and allow callers to opt into\n    // additional dependencies for dynamic tool configuration.\n    // tool.available is included so toggling availability re-registers the tool.\n  }, [tool.name, tool.available, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;;AAKA,MAAM,aAAqC,EAAE;AAE7C,SAAgB,gBAEd,MAA4B,MAA+B;CAC3D,MAAM,EAAE,eAAeA,0CAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,4BAAgB;EACd,MAAM,OAAO,KAAK;AAGlB,MAAI,WAAW,QAAQ;GAAE,UAAU;GAAM,SAAS,KAAK;GAAS,CAAC,EAAE;AACjE,WAAQ,KACN,SAAS,KAAK,8BAA8B,KAAK,WAAW,SAAS,yCACtE;AACD,cAAW,WAAW,MAAM,KAAK,QAAQ;;AAE3C,aAAW,QAAQ,KAAK;AAGxB,MAAI,KAAK,QAAQ;GAEf,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;GAC5B,MAAM,yBACJ,WAAW;GAGb,MAAM,4BAAY,IAAI,KAAyC;AAC/D,QAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;GAI9B,MAAM,WAAW;IACf;IACA,MAAM,KAAK;IACX,SAAS,KAAK;IACd,QAAQ,KAAK;IACd;AACD,aAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAGxC,cAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;;AAG/D,eAAa;AACX,cAAW,WAAW,MAAM,KAAK,QAAQ;;IAM1C;EAAC,KAAK;EAAM,KAAK;EAAW;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}
+{"version":3,"file":"use-frontend-tool.cjs","names":["useCopilotKit"],"sources":["../../src/hooks/use-frontend-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport type { ReactFrontendTool } from \"../types/frontend-tool\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport function useFrontendTool<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>(tool: ReactFrontendTool<T>, deps?: ReadonlyArray<unknown>) {\n  const { copilotkit } = useCopilotKit();\n  const extraDeps = deps ?? EMPTY_DEPS;\n\n  useEffect(() => {\n    const name = tool.name;\n\n    // Always register/override the tool for this name on mount\n    if (copilotkit.getTool({ toolName: name, agentId: tool.agentId })) {\n      console.warn(\n        `Tool '${name}' already exists for agent '${tool.agentId || \"global\"}'. Overriding with latest registration.`,\n      );\n      copilotkit.removeTool(name, tool.agentId);\n    }\n    copilotkit.addTool(tool);\n\n    // Register/override renderer by name and agentId through core\n    if (tool.render) {\n      // Get current render tool calls and merge with new entry\n      const keyOf = (rc: ReactToolCallRenderer) =>\n        `${rc.agentId ?? \"\"}:${rc.name}`;\n      const currentRenderToolCalls =\n        copilotkit.renderToolCalls as ReactToolCallRenderer[];\n\n      // Build map from existing entries\n      const mergedMap = new Map<string, ReactToolCallRenderer>();\n      for (const rc of currentRenderToolCalls) {\n        mergedMap.set(keyOf(rc), rc);\n      }\n\n      // Add/overwrite with new entry\n      const newEntry: ReactToolCallRenderer = {\n        name,\n        args: tool.parameters,\n        agentId: tool.agentId,\n        render: tool.render,\n      } as ReactToolCallRenderer;\n      mergedMap.set(keyOf(newEntry), newEntry);\n\n      // Set the merged list back\n      copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n    }\n\n    return () => {\n      copilotkit.removeTool(name, tool.agentId);\n      // we are intentionally not removing the render here so that the tools can still render in the chat history\n    };\n    // Depend on stable keys by default and allow callers to opt into\n    // additional dependencies for dynamic tool configuration.\n    // tool.available is included so toggling availability re-registers the tool.\n  }, [tool.name, tool.available, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;;AAKA,MAAM,aAAqC,EAAE;AAE7C,SAAgB,gBAEd,MAA4B,MAA+B;CAC3D,MAAM,EAAE,eAAeA,0CAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,4BAAgB;EACd,MAAM,OAAO,KAAK;AAGlB,MAAI,WAAW,QAAQ;GAAE,UAAU;GAAM,SAAS,KAAK;GAAS,CAAC,EAAE;AACjE,WAAQ,KACN,SAAS,KAAK,8BAA8B,KAAK,WAAW,SAAS,yCACtE;AACD,cAAW,WAAW,MAAM,KAAK,QAAQ;;AAE3C,aAAW,QAAQ,KAAK;AAGxB,MAAI,KAAK,QAAQ;GAEf,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;GAC5B,MAAM,yBACJ,WAAW;GAGb,MAAM,4BAAY,IAAI,KAAoC;AAC1D,QAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;GAI9B,MAAM,WAAkC;IACtC;IACA,MAAM,KAAK;IACX,SAAS,KAAK;IACd,QAAQ,KAAK;IACd;AACD,aAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAGxC,cAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;;AAG/D,eAAa;AACX,cAAW,WAAW,MAAM,KAAK,QAAQ;;IAM1C;EAAC,KAAK;EAAM,KAAK;EAAW;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}

package/dist/hooks/use-frontend-tool.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-frontend-tool.mjs","names":[],"sources":["../../src/hooks/use-frontend-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport type { ReactFrontendTool } from \"../types/frontend-tool\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport function useFrontendTool<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>(tool: ReactFrontendTool<T>, deps?: ReadonlyArray<unknown>) {\n  const { copilotkit } = useCopilotKit();\n  const extraDeps = deps ?? EMPTY_DEPS;\n\n  useEffect(() => {\n    const name = tool.name;\n\n    // Always register/override the tool for this name on mount\n    if (copilotkit.getTool({ toolName: name, agentId: tool.agentId })) {\n      console.warn(\n        `Tool '${name}' already exists for agent '${tool.agentId || \"global\"}'. Overriding with latest registration.`,\n      );\n      copilotkit.removeTool(name, tool.agentId);\n    }\n    copilotkit.addTool(tool);\n\n    // Register/override renderer by name and agentId through core\n    if (tool.render) {\n      // Get current render tool calls and merge with new entry\n      const keyOf = (rc: ReactToolCallRenderer<any>) =>\n        `${rc.agentId ?? \"\"}:${rc.name}`;\n      const currentRenderToolCalls =\n        copilotkit.renderToolCalls as ReactToolCallRenderer<any>[];\n\n      // Build map from existing entries\n      const mergedMap = new Map<string, ReactToolCallRenderer<any>>();\n      for (const rc of currentRenderToolCalls) {\n        mergedMap.set(keyOf(rc), rc);\n      }\n\n      // Add/overwrite with new entry\n      const newEntry = {\n        name,\n        args: tool.parameters,\n        agentId: tool.agentId,\n        render: tool.render,\n      } as ReactToolCallRenderer<any>;\n      mergedMap.set(keyOf(newEntry), newEntry);\n\n      // Set the merged list back\n      copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n    }\n\n    return () => {\n      copilotkit.removeTool(name, tool.agentId);\n      // we are intentionally not removing the render here so that the tools can still render in the chat history\n    };\n    // Depend on stable keys by default and allow callers to opt into\n    // additional dependencies for dynamic tool configuration.\n    // tool.available is included so toggling availability re-registers the tool.\n  }, [tool.name, tool.available, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;AAKA,MAAM,aAAqC,EAAE;AAE7C,SAAgB,gBAEd,MAA4B,MAA+B;CAC3D,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,iBAAgB;EACd,MAAM,OAAO,KAAK;AAGlB,MAAI,WAAW,QAAQ;GAAE,UAAU;GAAM,SAAS,KAAK;GAAS,CAAC,EAAE;AACjE,WAAQ,KACN,SAAS,KAAK,8BAA8B,KAAK,WAAW,SAAS,yCACtE;AACD,cAAW,WAAW,MAAM,KAAK,QAAQ;;AAE3C,aAAW,QAAQ,KAAK;AAGxB,MAAI,KAAK,QAAQ;GAEf,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;GAC5B,MAAM,yBACJ,WAAW;GAGb,MAAM,4BAAY,IAAI,KAAyC;AAC/D,QAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;GAI9B,MAAM,WAAW;IACf;IACA,MAAM,KAAK;IACX,SAAS,KAAK;IACd,QAAQ,KAAK;IACd;AACD,aAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAGxC,cAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;;AAG/D,eAAa;AACX,cAAW,WAAW,MAAM,KAAK,QAAQ;;IAM1C;EAAC,KAAK;EAAM,KAAK;EAAW;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}
+{"version":3,"file":"use-frontend-tool.mjs","names":[],"sources":["../../src/hooks/use-frontend-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport type { ReactFrontendTool } from \"../types/frontend-tool\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport function useFrontendTool<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>(tool: ReactFrontendTool<T>, deps?: ReadonlyArray<unknown>) {\n  const { copilotkit } = useCopilotKit();\n  const extraDeps = deps ?? EMPTY_DEPS;\n\n  useEffect(() => {\n    const name = tool.name;\n\n    // Always register/override the tool for this name on mount\n    if (copilotkit.getTool({ toolName: name, agentId: tool.agentId })) {\n      console.warn(\n        `Tool '${name}' already exists for agent '${tool.agentId || \"global\"}'. Overriding with latest registration.`,\n      );\n      copilotkit.removeTool(name, tool.agentId);\n    }\n    copilotkit.addTool(tool);\n\n    // Register/override renderer by name and agentId through core\n    if (tool.render) {\n      // Get current render tool calls and merge with new entry\n      const keyOf = (rc: ReactToolCallRenderer) =>\n        `${rc.agentId ?? \"\"}:${rc.name}`;\n      const currentRenderToolCalls =\n        copilotkit.renderToolCalls as ReactToolCallRenderer[];\n\n      // Build map from existing entries\n      const mergedMap = new Map<string, ReactToolCallRenderer>();\n      for (const rc of currentRenderToolCalls) {\n        mergedMap.set(keyOf(rc), rc);\n      }\n\n      // Add/overwrite with new entry\n      const newEntry: ReactToolCallRenderer = {\n        name,\n        args: tool.parameters,\n        agentId: tool.agentId,\n        render: tool.render,\n      } as ReactToolCallRenderer;\n      mergedMap.set(keyOf(newEntry), newEntry);\n\n      // Set the merged list back\n      copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n    }\n\n    return () => {\n      copilotkit.removeTool(name, tool.agentId);\n      // we are intentionally not removing the render here so that the tools can still render in the chat history\n    };\n    // Depend on stable keys by default and allow callers to opt into\n    // additional dependencies for dynamic tool configuration.\n    // tool.available is included so toggling availability re-registers the tool.\n  }, [tool.name, tool.available, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;AAKA,MAAM,aAAqC,EAAE;AAE7C,SAAgB,gBAEd,MAA4B,MAA+B;CAC3D,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,iBAAgB;EACd,MAAM,OAAO,KAAK;AAGlB,MAAI,WAAW,QAAQ;GAAE,UAAU;GAAM,SAAS,KAAK;GAAS,CAAC,EAAE;AACjE,WAAQ,KACN,SAAS,KAAK,8BAA8B,KAAK,WAAW,SAAS,yCACtE;AACD,cAAW,WAAW,MAAM,KAAK,QAAQ;;AAE3C,aAAW,QAAQ,KAAK;AAGxB,MAAI,KAAK,QAAQ;GAEf,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;GAC5B,MAAM,yBACJ,WAAW;GAGb,MAAM,4BAAY,IAAI,KAAoC;AAC1D,QAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;GAI9B,MAAM,WAAkC;IACtC;IACA,MAAM,KAAK;IACX,SAAS,KAAK;IACd,QAAQ,KAAK;IACd;AACD,aAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAGxC,cAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;;AAG/D,eAAa;AACX,cAAW,WAAW,MAAM,KAAK,QAAQ;;IAM1C;EAAC,KAAK;EAAM,KAAK;EAAW;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}