@copilotkitnext/react 0.0.22-alpha.1 → 0.0.22-alpha.3

package/dist/chunk-5AAT4Z3C.mjs

@@ -0,0 +1,107 @@
+import {
+  useCopilotChatConfiguration
+} from "./chunk-4XJK5IVQ.mjs";
+import {
+  useCopilotKit
+} from "./chunk-VE3SBLU7.mjs";
+
+// src/hooks/use-render-tool-call.tsx
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { ToolCallStatus } from "@copilotkitnext/core";
+import { DEFAULT_AGENT_ID } from "@copilotkitnext/shared";
+import { partialJSONParse } from "@copilotkitnext/shared";
+import { jsx } from "react/jsx-runtime";
+function useRenderToolCall() {
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+  const agentId = config?.agentId ?? DEFAULT_AGENT_ID;
+  const [executingToolCallIds, setExecutingToolCallIds] = useState(() => /* @__PURE__ */ new Set());
+  const renderToolCalls = useSyncExternalStore(
+    (callback) => {
+      return copilotkit.subscribe({
+        onRenderToolCallsChanged: callback
+      });
+    },
+    () => copilotkit.renderToolCalls,
+    () => copilotkit.renderToolCalls
+  );
+  useEffect(() => {
+    const unsubscribe = copilotkit.subscribe({
+      onToolExecutionStart: ({ toolCallId }) => {
+        setExecutingToolCallIds((prev) => {
+          if (prev.has(toolCallId)) return prev;
+          const next = new Set(prev);
+          next.add(toolCallId);
+          return next;
+        });
+      },
+      onToolExecutionEnd: ({ toolCallId }) => {
+        setExecutingToolCallIds((prev) => {
+          if (!prev.has(toolCallId)) return prev;
+          const next = new Set(prev);
+          next.delete(toolCallId);
+          return next;
+        });
+      }
+    });
+    return () => unsubscribe();
+  }, [copilotkit]);
+  const renderToolCall = useCallback(
+    ({
+      toolCall,
+      toolMessage
+    }) => {
+      const exactMatches = renderToolCalls.filter(
+        (rc) => rc.name === toolCall.function.name
+      );
+      const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
+      if (!renderConfig) {
+        return null;
+      }
+      const RenderComponent = renderConfig.render;
+      const args = partialJSONParse(toolCall.function.arguments);
+      const toolName = toolCall.function.name;
+      if (toolMessage) {
+        return /* @__PURE__ */ jsx(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: ToolCallStatus.Complete,
+            result: toolMessage.content
+          },
+          toolCall.id
+        );
+      } else if (executingToolCallIds.has(toolCall.id)) {
+        return /* @__PURE__ */ jsx(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: ToolCallStatus.Executing,
+            result: void 0
+          },
+          toolCall.id
+        );
+      } else {
+        return /* @__PURE__ */ jsx(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: ToolCallStatus.InProgress,
+            result: void 0
+          },
+          toolCall.id
+        );
+      }
+    },
+    [renderToolCalls, executingToolCallIds, agentId]
+  );
+  return renderToolCall;
+}
+
+export {
+  useRenderToolCall
+};
+//# sourceMappingURL=chunk-5AAT4Z3C.mjs.map

package/dist/chunk-5AAT4Z3C.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-render-tool-call.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState, useSyncExternalStore } from \"react\";\nimport { ToolCall, ToolMessage } from \"@ag-ui/core\";\nimport { ToolCallStatus } from \"@copilotkitnext/core\";\nimport { useCopilotKit } from \"@/providers/CopilotKitProvider\";\nimport { useCopilotChatConfiguration } from \"@/providers/CopilotChatConfigurationProvider\";\nimport { DEFAULT_AGENT_ID } from \"@copilotkitnext/shared\";\nimport { partialJSONParse } from \"@copilotkitnext/shared\";\n\nexport interface UseRenderToolCallProps {\n  toolCall: ToolCall;\n  toolMessage?: ToolMessage;\n}\n\n/**\n * Hook that returns a function to render tool calls based on the render functions\n * defined in CopilotKitProvider.\n *\n * @returns A function that takes a tool call and optional tool message and returns the rendered component\n */\nexport function useRenderToolCall() {\n  const { copilotkit } = useCopilotKit();\n  const config = useCopilotChatConfiguration();\n  const agentId = config?.agentId ?? DEFAULT_AGENT_ID;\n  const [executingToolCallIds, setExecutingToolCallIds] = useState<\n    ReadonlySet<string>\n  >(() => new Set());\n\n  // Subscribe to render tool calls changes using useSyncExternalStore\n  // This ensures we always have the latest value, even if subscriptions run in any order\n  const renderToolCalls = useSyncExternalStore(\n    (callback) => {\n      return copilotkit.subscribe({\n        onRenderToolCallsChanged: callback,\n      });\n    },\n    () => copilotkit.renderToolCalls,\n    () => copilotkit.renderToolCalls\n  );\n\n  useEffect(() => {\n    const unsubscribe = copilotkit.subscribe({\n      onToolExecutionStart: ({ toolCallId }) => {\n        setExecutingToolCallIds((prev) => {\n          if (prev.has(toolCallId)) return prev;\n          const next = new Set(prev);\n          next.add(toolCallId);\n          return next;\n        });\n      },\n      onToolExecutionEnd: ({ toolCallId }) => {\n        setExecutingToolCallIds((prev) => {\n          if (!prev.has(toolCallId)) return prev;\n          const next = new Set(prev);\n          next.delete(toolCallId);\n          return next;\n        });\n      },\n    });\n    return () => unsubscribe();\n  }, [copilotkit]);\n\n  const renderToolCall = useCallback(\n    ({\n      toolCall,\n      toolMessage,\n    }: UseRenderToolCallProps): React.ReactElement | null => {\n      // Find the render config for this tool call by name\n      // For rendering, we show all tool calls regardless of agentId\n      // The agentId scoping only affects handler execution (in core)\n      // Priority order:\n      // 1. Exact match by name (prefer agent-specific if multiple exist)\n      // 2. Wildcard (*) renderer\n      const exactMatches = renderToolCalls.filter(\n        (rc) => rc.name === toolCall.function.name\n      );\n\n      // If multiple renderers with same name exist, prefer the one matching our agentId\n      const renderConfig =\n        exactMatches.find((rc) => rc.agentId === agentId) ||\n        exactMatches.find((rc) => !rc.agentId) ||\n        exactMatches[0] ||\n        renderToolCalls.find((rc) => rc.name === \"*\");\n\n      if (!renderConfig) {\n        return null;\n      }\n\n      const RenderComponent = renderConfig.render;\n\n      // Parse the arguments if they're a string\n      const args = partialJSONParse(toolCall.function.arguments);\n\n      // Create props based on status with proper typing\n      const toolName = toolCall.function.name;\n\n      if (toolMessage) {\n        // Complete status with result\n        return (\n          <RenderComponent\n            key={toolCall.id}\n            name={toolName}\n            args={args}\n            status={ToolCallStatus.Complete}\n            result={toolMessage.content}\n          />\n        );\n      } else if (executingToolCallIds.has(toolCall.id)) {\n        // Tool is currently executing\n        return (\n          <RenderComponent\n            key={toolCall.id}\n            name={toolName}\n            // args should be complete when executing; but pass whatever we have\n            args={args}\n            status={ToolCallStatus.Executing}\n            result={undefined}\n          />\n        );\n      } else {\n        // In progress status - tool call exists but hasn't completed yet\n        // This remains true even after agent stops running, until we get a result\n        return (\n          <RenderComponent\n            key={toolCall.id}\n            name={toolName}\n            args={args}\n            status={ToolCallStatus.InProgress}\n            result={undefined}\n          />\n        );\n      }\n    },\n    [renderToolCalls, executingToolCallIds, agentId]\n  );\n\n  return renderToolCall;\n}\n"],"mappings":";;;;;;;;AAAA,SAAgB,aAAa,WAAW,UAAU,4BAA4B;AAE9E,SAAS,sBAAsB;AAG/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AA4FvB;AA/EH,SAAS,oBAAoB;AAClC,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,QAAM,SAAS,4BAA4B;AAC3C,QAAM,UAAU,QAAQ,WAAW;AACnC,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAEtD,MAAM,oBAAI,IAAI,CAAC;AAIjB,QAAM,kBAAkB;AAAA,IACtB,CAAC,aAAa;AACZ,aAAO,WAAW,UAAU;AAAA,QAC1B,0BAA0B;AAAA,MAC5B,CAAC;AAAA,IACH;AAAA,IACA,MAAM,WAAW;AAAA,IACjB,MAAM,WAAW;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,UAAM,cAAc,WAAW,UAAU;AAAA,MACvC,sBAAsB,CAAC,EAAE,WAAW,MAAM;AACxC,gCAAwB,CAAC,SAAS;AAChC,cAAI,KAAK,IAAI,UAAU,EAAG,QAAO;AACjC,gBAAM,OAAO,IAAI,IAAI,IAAI;AACzB,eAAK,IAAI,UAAU;AACnB,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,MACA,oBAAoB,CAAC,EAAE,WAAW,MAAM;AACtC,gCAAwB,CAAC,SAAS;AAChC,cAAI,CAAC,KAAK,IAAI,UAAU,EAAG,QAAO;AAClC,gBAAM,OAAO,IAAI,IAAI,IAAI;AACzB,eAAK,OAAO,UAAU;AACtB,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AACD,WAAO,MAAM,YAAY;AAAA,EAC3B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,iBAAiB;AAAA,IACrB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,IACF,MAAyD;AAOvD,YAAM,eAAe,gBAAgB;AAAA,QACnC,CAAC,OAAO,GAAG,SAAS,SAAS,SAAS;AAAA,MACxC;AAGA,YAAM,eACJ,aAAa,KAAK,CAAC,OAAO,GAAG,YAAY,OAAO,KAChD,aAAa,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,KACrC,aAAa,CAAC,KACd,gBAAgB,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG;AAE9C,UAAI,CAAC,cAAc;AACjB,eAAO;AAAA,MACT;AAEA,YAAM,kBAAkB,aAAa;AAGrC,YAAM,OAAO,iBAAiB,SAAS,SAAS,SAAS;AAGzD,YAAM,WAAW,SAAS,SAAS;AAEnC,UAAI,aAAa;AAEf,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YACN;AAAA,YACA,QAAQ,eAAe;AAAA,YACvB,QAAQ,YAAY;AAAA;AAAA,UAJf,SAAS;AAAA,QAKhB;AAAA,MAEJ,WAAW,qBAAqB,IAAI,SAAS,EAAE,GAAG;AAEhD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YAEN;AAAA,YACA,QAAQ,eAAe;AAAA,YACvB,QAAQ;AAAA;AAAA,UALH,SAAS;AAAA,QAMhB;AAAA,MAEJ,OAAO;AAGL,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YACN;AAAA,YACA,QAAQ,eAAe;AAAA,YACvB,QAAQ;AAAA;AAAA,UAJH,SAAS;AAAA,QAKhB;AAAA,MAEJ;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,sBAAsB,OAAO;AAAA,EACjD;AAEA,SAAO;AACT;","names":[]}

package/dist/chunk-5JNWVLQI.mjs

@@ -0,0 +1,72 @@
+import {
+  defineToolCallRenderer
+} from "./chunk-46BZRXWT.mjs";
+
+// src/components/WildcardToolCallRender.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var WildcardToolCallRender = defineToolCallRenderer({
+  name: "*",
+  render: ({ args, result, name, status }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const statusString = String(status);
+    const isActive = statusString === "inProgress" || statusString === "executing";
+    const isComplete = statusString === "complete";
+    const statusStyles = isActive ? "bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-400" : isComplete ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-400" : "bg-zinc-100 text-zinc-800 dark:bg-zinc-700/40 dark:text-zinc-300";
+    return /* @__PURE__ */ jsx("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between gap-3 cursor-pointer",
+          onClick: () => setIsExpanded(!isExpanded),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: `h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`,
+                  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", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusStyles}`,
+                children: String(status)
+              }
+            )
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsxs("div", { className: "mt-3 grid gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
+          /* @__PURE__ */ jsx("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: JSON.stringify(args ?? {}, null, 2) })
+        ] }),
+        result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
+          /* @__PURE__ */ jsx("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
+        ] })
+      ] })
+    ] }) });
+  }
+});
+
+export {
+  WildcardToolCallRender
+};
+//# sourceMappingURL=chunk-5JNWVLQI.mjs.map

package/dist/chunk-5JNWVLQI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/WildcardToolCallRender.tsx"],"sourcesContent":["import { defineToolCallRenderer } from \"../types/defineToolCallRenderer\";\nimport { useState } from \"react\";\n\nexport const WildcardToolCallRender = defineToolCallRenderer({\n  name: \"*\",\n  render: ({ args, result, name, status }) => {\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    const statusStyles = isActive\n      ? \"bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-400\"\n      : isComplete\n        ? \"bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-400\"\n        : \"bg-zinc-100 text-zinc-800 dark:bg-zinc-700/40 dark:text-zinc-300\";\n\n    return (\n      <div className=\"mt-2 pb-2\">\n        <div className=\"rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4\">\n          <div\n            className=\"flex items-center justify-between gap-3 cursor-pointer\"\n            onClick={() => setIsExpanded(!isExpanded)}\n          >\n            <div className=\"flex items-center gap-2 min-w-0\">\n              <svg\n                className={`h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${\n                  isExpanded ? \"rotate-90\" : \"\"\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 className=\"inline-block h-2 w-2 rounded-full bg-blue-500\" />\n              <span className=\"truncate text-sm font-medium text-zinc-900 dark:text-zinc-100\">\n                {name}\n              </span>\n            </div>\n            <span\n              className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusStyles}`}\n            >\n              {String(status)}\n            </span>\n          </div>\n\n          {isExpanded && (\n            <div className=\"mt-3 grid gap-4\">\n              <div>\n                <div className=\"text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400\">\n                  Arguments\n                </div>\n                <pre className=\"mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words\">\n                  {JSON.stringify(args ?? {}, null, 2)}\n                </pre>\n              </div>\n\n              {result !== undefined && (\n                <div>\n                  <div className=\"text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400\">\n                    Result\n                  </div>\n                  <pre className=\"mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words\">\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});\n"],"mappings":";;;;;AACA,SAAS,gBAAgB;AA2Bb,SAUI,KAVJ;AAzBL,IAAM,yBAAyB,uBAAuB;AAAA,EAC3D,MAAM;AAAA,EACN,QAAQ,CAAC,EAAE,MAAM,QAAQ,MAAM,OAAO,MAAM;AAC1C,UAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,UAAM,eAAe,OAAO,MAAM;AAIlC,UAAM,WACJ,iBAAiB,gBAAgB,iBAAiB;AACpD,UAAM,aAAa,iBAAiB;AACpC,UAAM,eAAe,WACjB,yEACA,aACE,iFACA;AAEN,WACE,oBAAC,SAAI,WAAU,aACb,+BAAC,SAAI,WAAU,4HACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,MAAM,cAAc,CAAC,UAAU;AAAA,UAExC;AAAA,iCAAC,SAAI,WAAU,mCACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,iEACT,aAAa,cAAc,EAC7B;AAAA,kBACA,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,aAAa;AAAA,kBACb,QAAO;AAAA,kBAEP;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,gBAAe;AAAA,sBACf,GAAE;AAAA;AAAA,kBACJ;AAAA;AAAA,cACF;AAAA,cACA,oBAAC,UAAK,WAAU,iDAAgD;AAAA,cAChE,oBAAC,UAAK,WAAU,iEACb,gBACH;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,uEAAuE,YAAY;AAAA,gBAE7F,iBAAO,MAAM;AAAA;AAAA,YAChB;AAAA;AAAA;AAAA,MACF;AAAA,MAEC,cACC,qBAAC,SAAI,WAAU,mBACb;AAAA,6BAAC,SACC;AAAA,8BAAC,SAAI,WAAU,oEAAmE,uBAElF;AAAA,UACA,oBAAC,SAAI,WAAU,sKACZ,eAAK,UAAU,QAAQ,CAAC,GAAG,MAAM,CAAC,GACrC;AAAA,WACF;AAAA,QAEC,WAAW,UACV,qBAAC,SACC;AAAA,8BAAC,SAAI,WAAU,oEAAmE,oBAElF;AAAA,UACA,oBAAC,SAAI,WAAU,sKACZ,iBAAO,WAAW,WACf,SACA,KAAK,UAAU,QAAQ,MAAM,CAAC,GACpC;AAAA,WACF;AAAA,SAEJ;AAAA,OAEJ,GACF;AAAA,EAEJ;AACF,CAAC;","names":[]}

package/dist/chunk-5SC3CO5Q.mjs

@@ -0,0 +1,69 @@
+import {
+  useCopilotChatConfiguration
+} from "./chunk-4XJK5IVQ.mjs";
+import {
+  useCopilotKit
+} from "./chunk-RF2CGPHQ.mjs";
+
+// src/hooks/use-render-custom-messages.tsx
+import { jsx } from "react/jsx-runtime";
+function useRenderCustomMessages() {
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+  if (!config) {
+    return null;
+  }
+  const { agentId, threadId } = config;
+  const customMessageRenderers = copilotkit.renderCustomMessages.filter((renderer) => renderer.agentId === void 0 || renderer.agentId === agentId).sort((a, b) => {
+    const aHasAgent = a.agentId !== void 0;
+    const bHasAgent = b.agentId !== void 0;
+    if (aHasAgent === bHasAgent) return 0;
+    return aHasAgent ? -1 : 1;
+  });
+  return function(params) {
+    if (!customMessageRenderers.length) {
+      return null;
+    }
+    const { message, position } = params;
+    const runId = copilotkit.getRunIdForMessage(agentId, threadId, message.id);
+    const agent = copilotkit.getAgent(agentId);
+    if (!agent) {
+      throw new Error("Agent not found");
+    }
+    const messagesIdsInRun = agent.messages.filter((msg) => copilotkit.getRunIdForMessage(agentId, threadId, msg.id) === runId).map((msg) => msg.id);
+    const messageIndex = agent.messages.findIndex((msg) => msg.id === message.id) ?? 0;
+    const messageIndexInRun = Math.min(messagesIdsInRun.indexOf(message.id), 0);
+    const numberOfMessagesInRun = messagesIdsInRun.length;
+    const stateSnapshot = copilotkit.getStateByRun(agentId, threadId, runId);
+    let result = null;
+    for (const renderer of customMessageRenderers) {
+      if (!renderer.render) {
+        continue;
+      }
+      const Component = renderer.render;
+      result = /* @__PURE__ */ jsx(
+        Component,
+        {
+          message,
+          position,
+          runId,
+          messageIndex,
+          messageIndexInRun,
+          numberOfMessagesInRun,
+          agentId,
+          stateSnapshot
+        },
+        `${runId}-${message.id}-${position}`
+      );
+      if (result) {
+        break;
+      }
+    }
+    return result;
+  };
+}
+
+export {
+  useRenderCustomMessages
+};
+//# sourceMappingURL=chunk-5SC3CO5Q.mjs.map

package/dist/chunk-5SC3CO5Q.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-render-custom-messages.tsx"],"sourcesContent":["import { useCopilotChatConfiguration, useCopilotKit } from \"@/providers\";\nimport { ReactCustomMessageRendererPosition } from \"@/types/react-custom-message-renderer\";\nimport { Message } from \"@ag-ui/core\";\n\ninterface UseRenderCustomMessagesParams {\n  message: Message;\n  position: ReactCustomMessageRendererPosition;\n}\n\nexport function useRenderCustomMessages() {\n  const { copilotkit } = useCopilotKit();\n  const config = useCopilotChatConfiguration();\n\n  if (!config) {\n    return null;\n  }\n\n  const { agentId, threadId } = config;\n\n  const customMessageRenderers = copilotkit.renderCustomMessages\n    .filter((renderer) => renderer.agentId === undefined || renderer.agentId === agentId)\n    .sort((a, b) => {\n      const aHasAgent = a.agentId !== undefined;\n      const bHasAgent = b.agentId !== undefined;\n      if (aHasAgent === bHasAgent) return 0;\n      return aHasAgent ? -1 : 1;\n    });\n\n  return function (params: UseRenderCustomMessagesParams) {\n    if (!customMessageRenderers.length) {\n      return null;\n    }\n    const { message, position } = params;\n    const runId = copilotkit.getRunIdForMessage(agentId, threadId, message.id)!;\n    const agent = copilotkit.getAgent(agentId);\n    if (!agent) {\n      throw new Error(\"Agent not found\");\n    }\n\n    const messagesIdsInRun = agent.messages\n      .filter((msg) => copilotkit.getRunIdForMessage(agentId, threadId, msg.id) === runId)\n      .map((msg) => msg.id);\n\n    const messageIndex = agent.messages.findIndex((msg) => msg.id === message.id) ?? 0;\n    const messageIndexInRun = Math.min(messagesIdsInRun.indexOf(message.id), 0);\n    const numberOfMessagesInRun = messagesIdsInRun.length;\n    const stateSnapshot = copilotkit.getStateByRun(agentId, threadId, runId);\n\n    let result = null;\n    for (const renderer of customMessageRenderers) {\n      if (!renderer.render) {\n        continue;\n      }\n      const Component = renderer.render;\n      result = (\n        <Component\n          key={`${runId}-${message.id}-${position}`}\n          message={message}\n          position={position}\n          runId={runId}\n          messageIndex={messageIndex}\n          messageIndexInRun={messageIndexInRun}\n          numberOfMessagesInRun={numberOfMessagesInRun}\n          agentId={agentId}\n          stateSnapshot={stateSnapshot}\n        />\n      );\n      if (result) {\n        break;\n      }\n    }\n    return result;\n  };\n}\n"],"mappings":";;;;;;;;AAuDQ;AA9CD,SAAS,0BAA0B;AACxC,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,QAAM,SAAS,4BAA4B;AAE3C,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,SAAS,SAAS,IAAI;AAE9B,QAAM,yBAAyB,WAAW,qBACvC,OAAO,CAAC,aAAa,SAAS,YAAY,UAAa,SAAS,YAAY,OAAO,EACnF,KAAK,CAAC,GAAG,MAAM;AACd,UAAM,YAAY,EAAE,YAAY;AAChC,UAAM,YAAY,EAAE,YAAY;AAChC,QAAI,cAAc,UAAW,QAAO;AACpC,WAAO,YAAY,KAAK;AAAA,EAC1B,CAAC;AAEH,SAAO,SAAU,QAAuC;AACtD,QAAI,CAAC,uBAAuB,QAAQ;AAClC,aAAO;AAAA,IACT;AACA,UAAM,EAAE,SAAS,SAAS,IAAI;AAC9B,UAAM,QAAQ,WAAW,mBAAmB,SAAS,UAAU,QAAQ,EAAE;AACzE,UAAM,QAAQ,WAAW,SAAS,OAAO;AACzC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,iBAAiB;AAAA,IACnC;AAEA,UAAM,mBAAmB,MAAM,SAC5B,OAAO,CAAC,QAAQ,WAAW,mBAAmB,SAAS,UAAU,IAAI,EAAE,MAAM,KAAK,EAClF,IAAI,CAAC,QAAQ,IAAI,EAAE;AAEtB,UAAM,eAAe,MAAM,SAAS,UAAU,CAAC,QAAQ,IAAI,OAAO,QAAQ,EAAE,KAAK;AACjF,UAAM,oBAAoB,KAAK,IAAI,iBAAiB,QAAQ,QAAQ,EAAE,GAAG,CAAC;AAC1E,UAAM,wBAAwB,iBAAiB;AAC/C,UAAM,gBAAgB,WAAW,cAAc,SAAS,UAAU,KAAK;AAEvE,QAAI,SAAS;AACb,eAAW,YAAY,wBAAwB;AAC7C,UAAI,CAAC,SAAS,QAAQ;AACpB;AAAA,MACF;AACA,YAAM,YAAY,SAAS;AAC3B,eACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QARK,GAAG,KAAK,IAAI,QAAQ,EAAE,IAAI,QAAQ;AAAA,MASzC;AAEF,UAAI,QAAQ;AACV;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AACF;","names":[]}

package/dist/chunk-6VUKDHOD.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-6VUKDHOD.mjs.map

package/dist/chunk-6VUKDHOD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-AEFM73CL.mjs

@@ -0,0 +1,32 @@
+import {
+  useRenderToolCall
+} from "./chunk-AXFRCGH6.mjs";
+
+// src/components/chat/CopilotChatToolCallsView.tsx
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+function CopilotChatToolCallsView({
+  message,
+  messages = []
+}) {
+  const renderToolCall = useRenderToolCall();
+  if (!message.toolCalls || message.toolCalls.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: message.toolCalls.map((toolCall) => {
+    const toolMessage = messages.find(
+      (m) => m.role === "tool" && m.toolCallId === toolCall.id
+    );
+    return /* @__PURE__ */ jsx(React.Fragment, { children: renderToolCall({
+      toolCall,
+      toolMessage
+    }) }, toolCall.id);
+  }) });
+}
+var CopilotChatToolCallsView_default = CopilotChatToolCallsView;
+
+export {
+  CopilotChatToolCallsView,
+  CopilotChatToolCallsView_default
+};
+//# sourceMappingURL=chunk-AEFM73CL.mjs.map

package/dist/chunk-AEFM73CL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/CopilotChatToolCallsView.tsx"],"sourcesContent":["import { useRenderToolCall } from \"@/hooks\";\nimport { AssistantMessage, Message, ToolMessage } from \"@ag-ui/core\";\nimport React from \"react\";\n\nexport type CopilotChatToolCallsViewProps = {\n  message: AssistantMessage;\n  messages?: Message[];\n};\n\nexport function CopilotChatToolCallsView({\n  message,\n  messages = [],\n}: CopilotChatToolCallsViewProps) {\n  const renderToolCall = useRenderToolCall();\n\n  if (!message.toolCalls || message.toolCalls.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      {message.toolCalls.map((toolCall) => {\n        const toolMessage = messages.find(\n          (m) => m.role === \"tool\" && m.toolCallId === toolCall.id\n        ) as ToolMessage | undefined;\n\n        return (\n          <React.Fragment key={toolCall.id}>\n            {renderToolCall({\n              toolCall,\n              toolMessage,\n            })}\n          </React.Fragment>\n        );\n      })}\n    </>\n  );\n}\n\nexport default CopilotChatToolCallsView;\n"],"mappings":";;;;;AAEA,OAAO,WAAW;AAkBd,mBAOM,WAPN;AAXG,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA,WAAW,CAAC;AACd,GAAkC;AAChC,QAAM,iBAAiB,kBAAkB;AAEzC,MAAI,CAAC,QAAQ,aAAa,QAAQ,UAAU,WAAW,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,SACE,gCACG,kBAAQ,UAAU,IAAI,CAAC,aAAa;AACnC,UAAM,cAAc,SAAS;AAAA,MAC3B,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,eAAe,SAAS;AAAA,IACxD;AAEA,WACE,oBAAC,MAAM,UAAN,EACE,yBAAe;AAAA,MACd;AAAA,MACA;AAAA,IACF,CAAC,KAJkB,SAAS,EAK9B;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,IAAO,mCAAQ;","names":[]}

package/dist/chunk-AI3Z3CHN.mjs

@@ -0,0 +1,97 @@
+import {
+  CopilotChatUserMessage_default
+} from "./chunk-BT6C5OPU.mjs";
+import {
+  CopilotChatAssistantMessage_default
+} from "./chunk-SPDE34WC.mjs";
+import {
+  renderSlot
+} from "./chunk-FIBK3DYE.mjs";
+import {
+  useRenderActivityMessage
+} from "./chunk-RK5P2LG6.mjs";
+import {
+  useRenderCustomMessages
+} from "./chunk-5SC3CO5Q.mjs";
+
+// src/components/chat/CopilotChatMessageView.tsx
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CopilotChatMessageView({
+  messages = [],
+  assistantMessage,
+  userMessage,
+  cursor,
+  isRunning = false,
+  children,
+  className,
+  ...props
+}) {
+  const renderCustomMessage = useRenderCustomMessages();
+  const renderActivityMessage = useRenderActivityMessage();
+  const messageElements = messages.flatMap((message) => {
+    const elements = [];
+    if (renderCustomMessage) {
+      elements.push(
+        renderCustomMessage({
+          message,
+          position: "before"
+        })
+      );
+    }
+    if (message.role === "assistant") {
+      elements.push(
+        renderSlot(assistantMessage, CopilotChatAssistantMessage_default, {
+          key: message.id,
+          message,
+          messages,
+          isRunning
+        })
+      );
+    } else if (message.role === "user") {
+      elements.push(
+        renderSlot(userMessage, CopilotChatUserMessage_default, {
+          key: message.id,
+          message
+        })
+      );
+    } else if (message.role === "activity") {
+      const renderedActivity = renderActivityMessage(message);
+      if (renderedActivity) {
+        elements.push(renderedActivity);
+      }
+    }
+    if (renderCustomMessage) {
+      elements.push(
+        renderCustomMessage({
+          message,
+          position: "after"
+        })
+      );
+    }
+    return elements;
+  }).filter(Boolean);
+  if (children) {
+    return children({ messageElements, messages, isRunning });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-col", className), ...props, children: [
+    messageElements,
+    isRunning && renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+  ] });
+}
+CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge("w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1", className),
+      ...props
+    }
+  );
+};
+var CopilotChatMessageView_default = CopilotChatMessageView;
+
+export {
+  CopilotChatMessageView,
+  CopilotChatMessageView_default
+};
+//# sourceMappingURL=chunk-AI3Z3CHN.mjs.map

package/dist/chunk-AI3Z3CHN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/CopilotChatMessageView.tsx"],"sourcesContent":["import { WithSlots, renderSlot } from \"@/lib/slots\";\nimport CopilotChatAssistantMessage from \"./CopilotChatAssistantMessage\";\nimport CopilotChatUserMessage from \"./CopilotChatUserMessage\";\nimport { Message } from \"@ag-ui/core\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useRenderActivityMessage, useRenderCustomMessages } from \"@/hooks\";\n\nexport type CopilotChatMessageViewProps = Omit<\n  WithSlots<\n    {\n      assistantMessage: typeof CopilotChatAssistantMessage;\n      userMessage: typeof CopilotChatUserMessage;\n      cursor: typeof CopilotChatMessageView.Cursor;\n    },\n    {\n      isRunning?: boolean;\n      messages?: Message[];\n    } & React.HTMLAttributes<HTMLDivElement>\n  >,\n  \"children\"\n> & {\n  children?: (props: {\n    isRunning: boolean;\n    messages: Message[];\n    messageElements: React.ReactElement[];\n  }) => React.ReactElement;\n};\n\nexport function CopilotChatMessageView({\n  messages = [],\n  assistantMessage,\n  userMessage,\n  cursor,\n  isRunning = false,\n  children,\n  className,\n  ...props\n}: CopilotChatMessageViewProps) {\n  const renderCustomMessage = useRenderCustomMessages();\n  const renderActivityMessage = useRenderActivityMessage();\n\n  const messageElements: React.ReactElement[] = messages\n    .flatMap((message) => {\n      const elements: (React.ReactElement | null | undefined)[] = [];\n\n      // Render custom message before\n      if (renderCustomMessage) {\n        elements.push(\n          renderCustomMessage({\n            message,\n            position: \"before\",\n          }),\n        );\n      }\n\n      // Render the main message\n      if (message.role === \"assistant\") {\n        elements.push(\n          renderSlot(assistantMessage, CopilotChatAssistantMessage, {\n            key: message.id,\n            message,\n            messages,\n            isRunning,\n          }),\n        );\n      } else if (message.role === \"user\") {\n        elements.push(\n          renderSlot(userMessage, CopilotChatUserMessage, {\n            key: message.id,\n            message,\n          }),\n        );\n      } else if (message.role === \"activity\") {\n        const renderedActivity = renderActivityMessage(message);\n\n        if (renderedActivity) {\n          elements.push(renderedActivity);\n        }\n      }\n\n      // Render custom message after\n      if (renderCustomMessage) {\n        elements.push(\n          renderCustomMessage({\n            message,\n            position: \"after\",\n          }),\n        );\n      }\n\n      return elements;\n    })\n    .filter(Boolean) as React.ReactElement[];\n\n  if (children) {\n    return children({ messageElements, messages, isRunning });\n  }\n\n  return (\n    <div className={twMerge(\"flex flex-col\", className)} {...props}>\n      {messageElements}\n      {isRunning && renderSlot(cursor, CopilotChatMessageView.Cursor, {})}\n    </div>\n  );\n}\n\nCopilotChatMessageView.Cursor = function Cursor({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={twMerge(\"w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1\", className)}\n      {...props}\n    />\n  );\n};\n\nexport default CopilotChatMessageView;\n"],"mappings":";;;;;;;;;;;;;;;;;AAIA,SAAS,eAAe;AA+FpB,SASA,KATA;AAvEG,SAAS,uBAAuB;AAAA,EACrC,WAAW,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,QAAM,sBAAsB,wBAAwB;AACpD,QAAM,wBAAwB,yBAAyB;AAEvD,QAAM,kBAAwC,SAC3C,QAAQ,CAAC,YAAY;AACpB,UAAM,WAAsD,CAAC;AAG7D,QAAI,qBAAqB;AACvB,eAAS;AAAA,QACP,oBAAoB;AAAA,UAClB;AAAA,UACA,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA,IACF;AAGA,QAAI,QAAQ,SAAS,aAAa;AAChC,eAAS;AAAA,QACP,WAAW,kBAAkB,qCAA6B;AAAA,UACxD,KAAK,QAAQ;AAAA,UACb;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,WAAW,QAAQ,SAAS,QAAQ;AAClC,eAAS;AAAA,QACP,WAAW,aAAa,gCAAwB;AAAA,UAC9C,KAAK,QAAQ;AAAA,UACb;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,WAAW,QAAQ,SAAS,YAAY;AACtC,YAAM,mBAAmB,sBAAsB,OAAO;AAEtD,UAAI,kBAAkB;AACpB,iBAAS,KAAK,gBAAgB;AAAA,MAChC;AAAA,IACF;AAGA,QAAI,qBAAqB;AACvB,eAAS;AAAA,QACP,oBAAoB;AAAA,UAClB;AAAA,UACA,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC,EACA,OAAO,OAAO;AAEjB,MAAI,UAAU;AACZ,WAAO,SAAS,EAAE,iBAAiB,UAAU,UAAU,CAAC;AAAA,EAC1D;AAEA,SACE,qBAAC,SAAI,WAAW,QAAQ,iBAAiB,SAAS,GAAI,GAAG,OACtD;AAAA;AAAA,IACA,aAAa,WAAW,QAAQ,uBAAuB,QAAQ,CAAC,CAAC;AAAA,KACpE;AAEJ;AAEA,uBAAuB,SAAS,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAyC;AAC7G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,QAAQ,0EAA0E,SAAS;AAAA,MACrG,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,iCAAQ;","names":[]}

package/dist/chunk-AXFRCGH6.mjs

@@ -0,0 +1,107 @@
+import {
+  useCopilotChatConfiguration
+} from "./chunk-4XJK5IVQ.mjs";
+import {
+  useCopilotKit
+} from "./chunk-RF2CGPHQ.mjs";
+
+// src/hooks/use-render-tool-call.tsx
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { ToolCallStatus } from "@copilotkitnext/core";
+import { DEFAULT_AGENT_ID } from "@copilotkitnext/shared";
+import { partialJSONParse } from "@copilotkitnext/shared";
+import { jsx } from "react/jsx-runtime";
+function useRenderToolCall() {
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+  const agentId = config?.agentId ?? DEFAULT_AGENT_ID;
+  const [executingToolCallIds, setExecutingToolCallIds] = useState(() => /* @__PURE__ */ new Set());
+  const renderToolCalls = useSyncExternalStore(
+    (callback) => {
+      return copilotkit.subscribe({
+        onRenderToolCallsChanged: callback
+      });
+    },
+    () => copilotkit.renderToolCalls,
+    () => copilotkit.renderToolCalls
+  );
+  useEffect(() => {
+    const unsubscribe = copilotkit.subscribe({
+      onToolExecutionStart: ({ toolCallId }) => {
+        setExecutingToolCallIds((prev) => {
+          if (prev.has(toolCallId)) return prev;
+          const next = new Set(prev);
+          next.add(toolCallId);
+          return next;
+        });
+      },
+      onToolExecutionEnd: ({ toolCallId }) => {
+        setExecutingToolCallIds((prev) => {
+          if (!prev.has(toolCallId)) return prev;
+          const next = new Set(prev);
+          next.delete(toolCallId);
+          return next;
+        });
+      }
+    });
+    return () => unsubscribe();
+  }, [copilotkit]);
+  const renderToolCall = useCallback(
+    ({
+      toolCall,
+      toolMessage
+    }) => {
+      const exactMatches = renderToolCalls.filter(
+        (rc) => rc.name === toolCall.function.name
+      );
+      const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
+      if (!renderConfig) {
+        return null;
+      }
+      const RenderComponent = renderConfig.render;
+      const args = partialJSONParse(toolCall.function.arguments);
+      const toolName = toolCall.function.name;
+      if (toolMessage) {
+        return /* @__PURE__ */ jsx(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: ToolCallStatus.Complete,
+            result: toolMessage.content
+          },
+          toolCall.id
+        );
+      } else if (executingToolCallIds.has(toolCall.id)) {
+        return /* @__PURE__ */ jsx(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: ToolCallStatus.Executing,
+            result: void 0
+          },
+          toolCall.id
+        );
+      } else {
+        return /* @__PURE__ */ jsx(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: ToolCallStatus.InProgress,
+            result: void 0
+          },
+          toolCall.id
+        );
+      }
+    },
+    [renderToolCalls, executingToolCallIds, agentId]
+  );
+  return renderToolCall;
+}
+
+export {
+  useRenderToolCall
+};
+//# sourceMappingURL=chunk-AXFRCGH6.mjs.map

package/dist/chunk-AXFRCGH6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-render-tool-call.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState, useSyncExternalStore } from \"react\";\nimport { ToolCall, ToolMessage } from \"@ag-ui/core\";\nimport { ToolCallStatus } from \"@copilotkitnext/core\";\nimport { useCopilotKit } from \"@/providers/CopilotKitProvider\";\nimport { useCopilotChatConfiguration } from \"@/providers/CopilotChatConfigurationProvider\";\nimport { DEFAULT_AGENT_ID } from \"@copilotkitnext/shared\";\nimport { partialJSONParse } from \"@copilotkitnext/shared\";\n\nexport interface UseRenderToolCallProps {\n  toolCall: ToolCall;\n  toolMessage?: ToolMessage;\n}\n\n/**\n * Hook that returns a function to render tool calls based on the render functions\n * defined in CopilotKitProvider.\n *\n * @returns A function that takes a tool call and optional tool message and returns the rendered component\n */\nexport function useRenderToolCall() {\n  const { copilotkit } = useCopilotKit();\n  const config = useCopilotChatConfiguration();\n  const agentId = config?.agentId ?? DEFAULT_AGENT_ID;\n  const [executingToolCallIds, setExecutingToolCallIds] = useState<\n    ReadonlySet<string>\n  >(() => new Set());\n\n  // Subscribe to render tool calls changes using useSyncExternalStore\n  // This ensures we always have the latest value, even if subscriptions run in any order\n  const renderToolCalls = useSyncExternalStore(\n    (callback) => {\n      return copilotkit.subscribe({\n        onRenderToolCallsChanged: callback,\n      });\n    },\n    () => copilotkit.renderToolCalls,\n    () => copilotkit.renderToolCalls\n  );\n\n  useEffect(() => {\n    const unsubscribe = copilotkit.subscribe({\n      onToolExecutionStart: ({ toolCallId }) => {\n        setExecutingToolCallIds((prev) => {\n          if (prev.has(toolCallId)) return prev;\n          const next = new Set(prev);\n          next.add(toolCallId);\n          return next;\n        });\n      },\n      onToolExecutionEnd: ({ toolCallId }) => {\n        setExecutingToolCallIds((prev) => {\n          if (!prev.has(toolCallId)) return prev;\n          const next = new Set(prev);\n          next.delete(toolCallId);\n          return next;\n        });\n      },\n    });\n    return () => unsubscribe();\n  }, [copilotkit]);\n\n  const renderToolCall = useCallback(\n    ({\n      toolCall,\n      toolMessage,\n    }: UseRenderToolCallProps): React.ReactElement | null => {\n      // Find the render config for this tool call by name\n      // For rendering, we show all tool calls regardless of agentId\n      // The agentId scoping only affects handler execution (in core)\n      // Priority order:\n      // 1. Exact match by name (prefer agent-specific if multiple exist)\n      // 2. Wildcard (*) renderer\n      const exactMatches = renderToolCalls.filter(\n        (rc) => rc.name === toolCall.function.name\n      );\n\n      // If multiple renderers with same name exist, prefer the one matching our agentId\n      const renderConfig =\n        exactMatches.find((rc) => rc.agentId === agentId) ||\n        exactMatches.find((rc) => !rc.agentId) ||\n        exactMatches[0] ||\n        renderToolCalls.find((rc) => rc.name === \"*\");\n\n      if (!renderConfig) {\n        return null;\n      }\n\n      const RenderComponent = renderConfig.render;\n\n      // Parse the arguments if they're a string\n      const args = partialJSONParse(toolCall.function.arguments);\n\n      // Create props based on status with proper typing\n      const toolName = toolCall.function.name;\n\n      if (toolMessage) {\n        // Complete status with result\n        return (\n          <RenderComponent\n            key={toolCall.id}\n            name={toolName}\n            args={args}\n            status={ToolCallStatus.Complete}\n            result={toolMessage.content}\n          />\n        );\n      } else if (executingToolCallIds.has(toolCall.id)) {\n        // Tool is currently executing\n        return (\n          <RenderComponent\n            key={toolCall.id}\n            name={toolName}\n            // args should be complete when executing; but pass whatever we have\n            args={args}\n            status={ToolCallStatus.Executing}\n            result={undefined}\n          />\n        );\n      } else {\n        // In progress status - tool call exists but hasn't completed yet\n        // This remains true even after agent stops running, until we get a result\n        return (\n          <RenderComponent\n            key={toolCall.id}\n            name={toolName}\n            args={args}\n            status={ToolCallStatus.InProgress}\n            result={undefined}\n          />\n        );\n      }\n    },\n    [renderToolCalls, executingToolCallIds, agentId]\n  );\n\n  return renderToolCall;\n}\n"],"mappings":";;;;;;;;AAAA,SAAgB,aAAa,WAAW,UAAU,4BAA4B;AAE9E,SAAS,sBAAsB;AAG/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AA4FvB;AA/EH,SAAS,oBAAoB;AAClC,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,QAAM,SAAS,4BAA4B;AAC3C,QAAM,UAAU,QAAQ,WAAW;AACnC,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAEtD,MAAM,oBAAI,IAAI,CAAC;AAIjB,QAAM,kBAAkB;AAAA,IACtB,CAAC,aAAa;AACZ,aAAO,WAAW,UAAU;AAAA,QAC1B,0BAA0B;AAAA,MAC5B,CAAC;AAAA,IACH;AAAA,IACA,MAAM,WAAW;AAAA,IACjB,MAAM,WAAW;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,UAAM,cAAc,WAAW,UAAU;AAAA,MACvC,sBAAsB,CAAC,EAAE,WAAW,MAAM;AACxC,gCAAwB,CAAC,SAAS;AAChC,cAAI,KAAK,IAAI,UAAU,EAAG,QAAO;AACjC,gBAAM,OAAO,IAAI,IAAI,IAAI;AACzB,eAAK,IAAI,UAAU;AACnB,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,MACA,oBAAoB,CAAC,EAAE,WAAW,MAAM;AACtC,gCAAwB,CAAC,SAAS;AAChC,cAAI,CAAC,KAAK,IAAI,UAAU,EAAG,QAAO;AAClC,gBAAM,OAAO,IAAI,IAAI,IAAI;AACzB,eAAK,OAAO,UAAU;AACtB,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AACD,WAAO,MAAM,YAAY;AAAA,EAC3B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,iBAAiB;AAAA,IACrB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,IACF,MAAyD;AAOvD,YAAM,eAAe,gBAAgB;AAAA,QACnC,CAAC,OAAO,GAAG,SAAS,SAAS,SAAS;AAAA,MACxC;AAGA,YAAM,eACJ,aAAa,KAAK,CAAC,OAAO,GAAG,YAAY,OAAO,KAChD,aAAa,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,KACrC,aAAa,CAAC,KACd,gBAAgB,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG;AAE9C,UAAI,CAAC,cAAc;AACjB,eAAO;AAAA,MACT;AAEA,YAAM,kBAAkB,aAAa;AAGrC,YAAM,OAAO,iBAAiB,SAAS,SAAS,SAAS;AAGzD,YAAM,WAAW,SAAS,SAAS;AAEnC,UAAI,aAAa;AAEf,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YACN;AAAA,YACA,QAAQ,eAAe;AAAA,YACvB,QAAQ,YAAY;AAAA;AAAA,UAJf,SAAS;AAAA,QAKhB;AAAA,MAEJ,WAAW,qBAAqB,IAAI,SAAS,EAAE,GAAG;AAEhD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YAEN;AAAA,YACA,QAAQ,eAAe;AAAA,YACvB,QAAQ;AAAA;AAAA,UALH,SAAS;AAAA,QAMhB;AAAA,MAEJ,OAAO;AAGL,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YACN;AAAA,YACA,QAAQ,eAAe;AAAA,YACvB,QAAQ;AAAA;AAAA,UAJH,SAAS;AAAA,QAKhB;AAAA,MAEJ;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,sBAAsB,OAAO;AAAA,EACjD;AAEA,SAAO;AACT;","names":[]}