198 lines
5.8 KiB
JavaScript
198 lines
5.8 KiB
JavaScript
const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
|
|
const require_use_render_tool = require('./use-render-tool.cjs');
|
|
let react = require("react");
|
|
react = require_runtime.__toESM(react);
|
|
let react_jsx_runtime = require("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) {
|
|
require_use_render_tool.useRenderTool({
|
|
name: "*",
|
|
render: config?.render ?? DefaultToolCallRenderer
|
|
}, deps);
|
|
}
|
|
function DefaultToolCallRenderer({ name, parameters, status, result }) {
|
|
const [isExpanded, setIsExpanded] = (0, react.useState)(false);
|
|
const statusString = String(status);
|
|
const isActive = statusString === "inProgress" || statusString === "executing";
|
|
const isComplete = statusString === "complete";
|
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
style: {
|
|
marginTop: "8px",
|
|
paddingBottom: "8px"
|
|
},
|
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
style: {
|
|
borderRadius: "12px",
|
|
border: "1px solid #e4e4e7",
|
|
backgroundColor: "#fafafa",
|
|
padding: "14px 16px"
|
|
},
|
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
onClick: () => setIsExpanded(!isExpanded),
|
|
style: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: "10px",
|
|
cursor: "pointer",
|
|
userSelect: "none"
|
|
},
|
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
style: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "8px",
|
|
minWidth: 0
|
|
},
|
|
children: [
|
|
/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
d: "M8.25 4.5l7.5 7.5-7.5 7.5"
|
|
})
|
|
}),
|
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
|
|
display: "inline-block",
|
|
height: "8px",
|
|
width: "8px",
|
|
borderRadius: "50%",
|
|
backgroundColor: isActive ? "#f59e0b" : isComplete ? "#10b981" : "#a1a1aa",
|
|
flexShrink: 0
|
|
} }),
|
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
style: {
|
|
fontSize: "13px",
|
|
fontWeight: 600,
|
|
color: "#18181b",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap"
|
|
},
|
|
children: name
|
|
})
|
|
]
|
|
}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
style: {
|
|
marginTop: "12px",
|
|
display: "grid",
|
|
gap: "12px"
|
|
},
|
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
style: {
|
|
fontSize: "10px",
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.05em",
|
|
color: "#71717a"
|
|
},
|
|
children: "Arguments"
|
|
}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
style: {
|
|
fontSize: "10px",
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.05em",
|
|
color: "#71717a"
|
|
},
|
|
children: "Result"
|
|
}), /* @__PURE__ */ (0, react_jsx_runtime.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
|
|
exports.useDefaultRenderTool = useDefaultRenderTool;
|
|
//# sourceMappingURL=use-default-render-tool.cjs.map
|