{"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"}