1 line
9.4 KiB
Plaintext
1 line
9.4 KiB
Plaintext
{"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"} |