rdesign/frontend/node_modules/@copilotkitnext/react/dist/hooks/use-default-render-tool.mjs

import { useRenderTool } from "./use-render-tool.mjs";
import React, { useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/hooks/use-default-render-tool.tsx
/**
* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
*
* - 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({
		name: "*",
		render: config?.render ?? DefaultToolCallRenderer
	}, deps);
}
function DefaultToolCallRenderer({ name, parameters, status, result }) {
	const [isExpanded, setIsExpanded] = useState(false);
	const statusString = String(status);
	const isActive = statusString === "inProgress" || statusString === "executing";
	const isComplete = statusString === "complete";
	return /* @__PURE__ */ jsx("div", {
		style: {
			marginTop: "8px",
			paddingBottom: "8px"
		},
		children: /* @__PURE__ */ jsxs("div", {
			style: {
				borderRadius: "12px",
				border: "1px solid #e4e4e7",
				backgroundColor: "#fafafa",
				padding: "14px 16px"
			},
			children: [/* @__PURE__ */ jsxs("div", {
				onClick: () => setIsExpanded(!isExpanded),
				style: {
					display: "flex",
					alignItems: "center",
					justifyContent: "space-between",
					gap: "10px",
					cursor: "pointer",
					userSelect: "none"
				},
				children: [/* @__PURE__ */ jsxs("div", {
					style: {
						display: "flex",
						alignItems: "center",
						gap: "8px",
						minWidth: 0
					},
					children: [
						/* @__PURE__ */ jsx("svg", {
							style: {
								height: "14px",
								width: "14px",
								color: "#71717a",
								transition: "transform 0.15s",
								transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
								flexShrink: 0
							},
							fill: "none",
							viewBox: "0 0 24 24",
							strokeWidth: 2,
							stroke: "currentColor",
							children: /* @__PURE__ */ jsx("path", {
								strokeLinecap: "round",
								strokeLinejoin: "round",
								d: "M8.25 4.5l7.5 7.5-7.5 7.5"
							})
						}),
						/* @__PURE__ */ jsx("span", { style: {
							display: "inline-block",
							height: "8px",
							width: "8px",
							borderRadius: "50%",
							backgroundColor: isActive ? "#f59e0b" : isComplete ? "#10b981" : "#a1a1aa",
							flexShrink: 0
						} }),
						/* @__PURE__ */ jsx("span", {
							style: {
								fontSize: "13px",
								fontWeight: 600,
								color: "#18181b",
								overflow: "hidden",
								textOverflow: "ellipsis",
								whiteSpace: "nowrap"
							},
							children: name
						})
					]
				}), /* @__PURE__ */ jsx("span", {
					style: {
						display: "inline-flex",
						alignItems: "center",
						borderRadius: "9999px",
						padding: "2px 8px",
						fontSize: "11px",
						fontWeight: 500,
						backgroundColor: isActive ? "#fef3c7" : isComplete ? "#d1fae5" : "#f4f4f5",
						color: isActive ? "#92400e" : isComplete ? "#065f46" : "#3f3f46",
						flexShrink: 0
					},
					children: isActive ? "Running" : isComplete ? "Done" : status
				})]
			}), isExpanded && /* @__PURE__ */ jsxs("div", {
				style: {
					marginTop: "12px",
					display: "grid",
					gap: "12px"
				},
				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
					style: {
						fontSize: "10px",
						textTransform: "uppercase",
						letterSpacing: "0.05em",
						color: "#71717a"
					},
					children: "Arguments"
				}), /* @__PURE__ */ jsx("pre", {
					style: {
						marginTop: "6px",
						maxHeight: "200px",
						overflow: "auto",
						borderRadius: "6px",
						backgroundColor: "#f4f4f5",
						padding: "10px",
						fontSize: "11px",
						lineHeight: 1.6,
						color: "#27272a",
						whiteSpace: "pre-wrap",
						wordBreak: "break-word"
					},
					children: JSON.stringify(parameters ?? {}, null, 2)
				})] }), result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
					style: {
						fontSize: "10px",
						textTransform: "uppercase",
						letterSpacing: "0.05em",
						color: "#71717a"
					},
					children: "Result"
				}), /* @__PURE__ */ jsx("pre", {
					style: {
						marginTop: "6px",
						maxHeight: "200px",
						overflow: "auto",
						borderRadius: "6px",
						backgroundColor: "#f4f4f5",
						padding: "10px",
						fontSize: "11px",
						lineHeight: 1.6,
						color: "#27272a",
						whiteSpace: "pre-wrap",
						wordBreak: "break-word"
					},
					children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
				})] })]
			})]
		})
	});
}

//#endregion
export { useDefaultRenderTool };
//# sourceMappingURL=use-default-render-tool.mjs.map