@copilotkitnext/react 0.0.8 → 0.0.9-alpha.1

package/dist/index.js

@@ -41,6 +41,7 @@ __export(index_exports, {
   CopilotChatUserMessage: () => CopilotChatUserMessage_default,
   CopilotChatView: () => CopilotChatView_default,
   CopilotKitProvider: () => CopilotKitProvider,
+  defineToolCallRender: () => defineToolCallRender,
   useAgent: () => useAgent,
   useAgentContext: () => useAgentContext,
   useCopilotChatConfiguration: () => useCopilotChatConfiguration,
@@ -58,6 +59,7 @@ var import_lucide_react2 = require("lucide-react");
 
 // src/providers/CopilotChatConfigurationProvider.tsx
 var import_react = require("react");
+var import_shared = require("@copilotkitnext/shared");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CopilotChatDefaultLabels = {
   chatInputPlaceholder: "Type a message...",
@@ -78,16 +80,20 @@ var CopilotChatDefaultLabels = {
   chatDisclaimerText: "AI can make mistakes. Please verify important information."
 };
 var CopilotChatConfiguration = (0, import_react.createContext)(null);
-var CopilotChatConfigurationProvider = ({ children, labels = {}, inputValue, onSubmitInput, onChangeInput }) => {
+var CopilotChatConfigurationProvider = ({
+  children,
+  labels = {},
+  agentId,
+  threadId
+}) => {
   const mergedLabels = {
     ...CopilotChatDefaultLabels,
     ...labels
   };
   const configurationValue = {
     labels: mergedLabels,
-    inputValue,
-    onSubmitInput,
-    onChangeInput
+    agentId: agentId ?? import_shared.DEFAULT_AGENT_ID,
+    threadId
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopilotChatConfiguration.Provider, { value: configurationValue, children });
 };
@@ -537,10 +543,14 @@ function CopilotChatInput({
   className,
   ...props
 }) {
-  const { inputValue, onSubmitInput, onChangeInput } = useCopilotChatConfiguration();
-  value ??= inputValue;
-  onSubmitMessage ??= onSubmitInput;
-  onChange ??= onChangeInput;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react4.useState)(() => value ?? "");
+  (0, import_react4.useEffect)(() => {
+    if (!isControlled && value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [isControlled, value]);
+  const resolvedValue = isControlled ? value ?? "" : internalValue;
   const inputRef = (0, import_react4.useRef)(null);
   const audioRecorderRef = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
@@ -557,7 +567,11 @@ function CopilotChatInput({
     }
   }, [mode]);
   const handleChange = (e) => {
-    onChange?.(e.target.value);
+    const nextValue = e.target.value;
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
@@ -566,17 +580,25 @@ function CopilotChatInput({
     }
   };
   const send = () => {
-    const trimmed = value?.trim();
-    if (trimmed) {
-      onSubmitMessage?.(trimmed);
-      if (inputRef.current) {
-        inputRef.current.focus();
-      }
+    if (!onSubmitMessage) {
+      return;
+    }
+    const trimmed = resolvedValue.trim();
+    if (!trimmed) {
+      return;
+    }
+    onSubmitMessage(trimmed);
+    if (!isControlled) {
+      setInternalValue("");
+      onChange?.("");
+    }
+    if (inputRef.current) {
+      inputRef.current.focus();
     }
   };
   const BoundTextArea = renderSlot(textArea, CopilotChatInput.TextArea, {
     ref: inputRef,
-    value,
+    value: resolvedValue,
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     autoFocus
@@ -590,7 +612,7 @@ function CopilotChatInput({
   );
   const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {
     onClick: send,
-    disabled: !value?.trim() || !onSubmitMessage
+    disabled: !resolvedValue.trim() || !onSubmitMessage
   });
   const BoundStartTranscribeButton = renderSlot(
     startTranscribeButton,
@@ -924,6 +946,7 @@ var import_core2 = require("@copilotkitnext/core");
 
 // src/providers/CopilotKitProvider.tsx
 var import_react5 = require("react");
+var import_zod = require("zod");
 var import_core = require("@copilotkitnext/core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var CopilotKitContext = (0, import_react5.createContext)({
@@ -1009,24 +1032,23 @@ var CopilotKitProvider = ({
     return { tools: processedTools, renderToolCalls: processedRenderToolCalls };
   }, [humanInTheLoopList]);
   const allTools = (0, import_react5.useMemo)(() => {
-    const tools = {};
-    frontendToolsList.forEach((tool) => {
-      tools[tool.name] = tool;
-    });
-    processedHumanInTheLoopTools.tools.forEach((tool) => {
-      tools[tool.name] = tool;
-    });
+    const tools = [];
+    tools.push(...frontendToolsList);
+    tools.push(...processedHumanInTheLoopTools.tools);
     return tools;
   }, [frontendToolsList, processedHumanInTheLoopTools]);
   const allRenderToolCalls = (0, import_react5.useMemo)(() => {
     const combined = [...renderToolCallsList];
     frontendToolsList.forEach((tool) => {
-      if (tool.render && tool.parameters) {
-        combined.push({
-          name: tool.name,
-          args: tool.parameters,
-          render: tool.render
-        });
+      if (tool.render) {
+        const args = tool.parameters || (tool.name === "*" ? import_zod.z.any() : void 0);
+        if (args) {
+          combined.push({
+            name: tool.name,
+            args,
+            render: tool.render
+          });
+        }
       }
     });
     combined.push(...processedHumanInTheLoopTools.renderToolCalls);
@@ -1045,9 +1067,30 @@ var CopilotKitProvider = ({
     return copilotkit2;
   }, [allTools]);
   (0, import_react5.useEffect)(() => {
-    setCurrentRenderToolCalls(
-      (prev) => prev === allRenderToolCalls ? prev : allRenderToolCalls
-    );
+    setCurrentRenderToolCalls((prev) => {
+      const keyOf = (rc) => `${rc?.agentId ?? ""}:${rc?.name ?? ""}`;
+      const computedMap = /* @__PURE__ */ new Map();
+      for (const rc of allRenderToolCalls) {
+        computedMap.set(keyOf(rc), rc);
+      }
+      const merged = [...computedMap.values()];
+      for (const rc of prev) {
+        const k = keyOf(rc);
+        if (!computedMap.has(k)) merged.push(rc);
+      }
+      const sameLength = merged.length === prev.length;
+      if (sameLength) {
+        let same = true;
+        for (let i = 0; i < merged.length; i++) {
+          if (merged[i] !== prev[i]) {
+            same = false;
+            break;
+          }
+        }
+        if (same) return prev;
+      }
+      return merged;
+    });
   }, [allRenderToolCalls]);
   (0, import_react5.useEffect)(() => {
     copilotkit.setRuntimeUrl(runtimeUrl);
@@ -1076,10 +1119,7 @@ var useCopilotKit = () => {
   }
   (0, import_react5.useEffect)(() => {
     const unsubscribe = context.copilotkit.subscribe({
-      onRuntimeLoaded: () => {
-        forceUpdate();
-      },
-      onRuntimeLoadError: () => {
+      onRuntimeConnectionStatusChanged: () => {
         forceUpdate();
       }
     });
@@ -1091,38 +1131,76 @@ var useCopilotKit = () => {
 };
 
 // src/hooks/use-render-tool-call.tsx
-var import_shared = require("@copilotkitnext/shared");
+var import_shared2 = require("@copilotkitnext/shared");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function useRenderToolCall() {
-  const { currentRenderToolCalls } = useCopilotKit();
+  const { currentRenderToolCalls, copilotkit } = useCopilotKit();
+  const { agentId } = useCopilotChatConfiguration();
+  const [executingToolCallIds, setExecutingToolCallIds] = (0, import_react6.useState)(() => /* @__PURE__ */ new Set());
+  (0, import_react6.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 = (0, import_react6.useCallback)(
     ({
       toolCall,
       toolMessage,
-      isLoading
+      isRunning
     }) => {
-      const renderConfig = currentRenderToolCalls.find(
+      const exactMatches = currentRenderToolCalls.filter(
         (rc) => rc.name === toolCall.function.name
-      ) || currentRenderToolCalls.find((rc) => rc.name === "*");
+      );
+      const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || currentRenderToolCalls.find((rc) => rc.name === "*");
       if (!renderConfig) {
         return null;
       }
       const RenderComponent = renderConfig.render;
-      const args = (0, import_shared.partialJSONParse)(toolCall.function.arguments);
+      const args = (0, import_shared2.partialJSONParse)(toolCall.function.arguments);
+      const toolName = toolCall.function.name;
       if (toolMessage) {
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           RenderComponent,
           {
+            name: toolName,
             args,
             status: import_core2.ToolCallStatus.Complete,
             result: toolMessage.content
           },
           toolCall.id
         );
-      } else if (isLoading) {
+      } else if (executingToolCallIds.has(toolCall.id)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: import_core2.ToolCallStatus.Executing,
+            result: void 0
+          },
+          toolCall.id
+        );
+      } else if (isRunning) {
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           RenderComponent,
           {
+            name: toolName,
             args,
             status: import_core2.ToolCallStatus.InProgress,
             result: void 0
@@ -1133,6 +1211,7 @@ function useRenderToolCall() {
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           RenderComponent,
           {
+            name: toolName,
             args,
             status: import_core2.ToolCallStatus.Complete,
             result: ""
@@ -1141,7 +1220,7 @@ function useRenderToolCall() {
         );
       }
     },
-    [currentRenderToolCalls]
+    [currentRenderToolCalls, executingToolCallIds, agentId]
   );
   return renderToolCall;
 }
@@ -1149,36 +1228,36 @@ function useRenderToolCall() {
 // src/hooks/use-frontend-tool.tsx
 var import_react7 = require("react");
 function useFrontendTool(tool) {
-  const { renderToolCalls, copilotkit, setCurrentRenderToolCalls } = useCopilotKit();
+  const { copilotkit, setCurrentRenderToolCalls } = useCopilotKit();
   (0, import_react7.useEffect)(() => {
-    if (tool.name in copilotkit.tools) {
+    const name = tool.name;
+    if (copilotkit.getTool({ toolName: name, agentId: tool.agentId })) {
       console.warn(
-        `Tool '${tool.name}' already exists. It will be overridden.`
+        `Tool '${name}' already exists for agent '${tool.agentId || "global"}'. Overriding with latest registration.`
       );
+      copilotkit.removeTool(name, tool.agentId);
     }
     copilotkit.addTool(tool);
-    if (tool.render && tool.name in renderToolCalls) {
-      console.warn(
-        `Render component for tool '${tool.name}' already exists. It will be overridden.`
-      );
-    }
-    if (tool.render && tool.parameters) {
-      setCurrentRenderToolCalls((prev) => [
-        ...prev,
-        {
-          name: tool.name,
-          args: tool.parameters,
-          render: tool.render
-        }
-      ]);
+    if (tool.render) {
+      setCurrentRenderToolCalls((prev) => {
+        const replaced = prev.filter(
+          (rc) => !(rc.name === name && rc.agentId === tool.agentId)
+        );
+        return [
+          ...replaced,
+          {
+            name,
+            args: tool.parameters,
+            agentId: tool.agentId,
+            render: tool.render
+          }
+        ];
+      });
     }
     return () => {
-      copilotkit.removeTool(tool.name);
-      setCurrentRenderToolCalls(
-        (prev) => prev.filter((rc) => rc.name !== tool.name)
-      );
+      copilotkit.removeTool(name, tool.agentId);
     };
-  }, [tool, copilotkit, renderToolCalls, setCurrentRenderToolCalls]);
+  }, [tool.name, copilotkit, setCurrentRenderToolCalls]);
 }
 
 // src/hooks/use-human-in-the-loop.tsx
@@ -1188,7 +1267,10 @@ function useHumanInTheLoop(tool) {
   const [status, setStatus] = (0, import_react8.useState)(
     "inProgress"
   );
+  const statusRef = (0, import_react8.useRef)(status);
   const resolvePromiseRef = (0, import_react8.useRef)(null);
+  const { setCurrentRenderToolCalls } = useCopilotKit();
+  statusRef.current = status;
   const respond = (0, import_react8.useCallback)(async (result) => {
     if (resolvePromiseRef.current) {
       resolvePromiseRef.current(result);
@@ -1205,7 +1287,8 @@ function useHumanInTheLoop(tool) {
   const RenderComponent = (0, import_react8.useCallback)(
     (props) => {
       const ToolComponent = tool.render;
-      if (status === "inProgress" && props.status === "inProgress") {
+      const currentStatus = statusRef.current;
+      if (currentStatus === "inProgress" && props.status === "inProgress") {
         const enhancedProps = {
           ...props,
           name: tool.name,
@@ -1213,7 +1296,7 @@ function useHumanInTheLoop(tool) {
           respond: void 0
         };
         return import_react9.default.createElement(ToolComponent, enhancedProps);
-      } else if (status === "executing" && props.status === "executing") {
+      } else if (currentStatus === "executing" && props.status === "executing") {
         const enhancedProps = {
           ...props,
           name: tool.name,
@@ -1221,7 +1304,7 @@ function useHumanInTheLoop(tool) {
           respond
         };
         return import_react9.default.createElement(ToolComponent, enhancedProps);
-      } else if (status === "complete" && props.status === "complete") {
+      } else if (currentStatus === "complete" && props.status === "complete") {
         const enhancedProps = {
           ...props,
           name: tool.name,
@@ -1232,7 +1315,7 @@ function useHumanInTheLoop(tool) {
       }
       return import_react9.default.createElement(ToolComponent, props);
     },
-    [tool.render, tool.name, tool.description, status, respond]
+    [tool.render, tool.name, tool.description, respond]
   );
   const frontendTool = {
     ...tool,
@@ -1240,42 +1323,75 @@ function useHumanInTheLoop(tool) {
     render: RenderComponent
   };
   useFrontendTool(frontendTool);
+  (0, import_react8.useEffect)(() => {
+    return () => {
+      setCurrentRenderToolCalls(
+        (prev) => prev.filter(
+          (rc) => rc.name !== tool.name || rc.agentId !== tool.agentId
+        )
+      );
+    };
+  }, [setCurrentRenderToolCalls, tool.name, tool.agentId]);
 }
 
 // src/hooks/use-agent.tsx
 var import_react10 = require("react");
-var import_shared2 = require("@copilotkitnext/shared");
-function useAgent({ agentId } = {}) {
-  agentId ??= import_shared2.DEFAULT_AGENT_ID;
+var import_shared3 = require("@copilotkitnext/shared");
+var ALL_UPDATES = [
+  "OnMessagesChanged" /* OnMessagesChanged */,
+  "OnStateChanged" /* OnStateChanged */,
+  "OnRunStatusChanged" /* OnRunStatusChanged */
+];
+function useAgent({ agentId, updates } = {}) {
+  agentId ??= import_shared3.DEFAULT_AGENT_ID;
   const { copilotkit } = useCopilotKit();
   const [, forceUpdate] = (0, import_react10.useReducer)((x) => x + 1, 0);
-  const [isRunning, setIsRunning] = (0, import_react10.useState)(false);
+  const updateFlags = (0, import_react10.useMemo)(
+    () => updates ?? ALL_UPDATES,
+    [JSON.stringify(updates)]
+  );
   const agent = (0, import_react10.useMemo)(() => {
     return copilotkit.getAgent(agentId);
-  }, [agentId, copilotkit.agents, copilotkit.didLoadRuntime, copilotkit]);
+  }, [
+    agentId,
+    copilotkit.agents,
+    copilotkit.runtimeConnectionStatus,
+    copilotkit
+  ]);
   (0, import_react10.useEffect)(() => {
-    const subscription = agent?.subscribe({
-      onMessagesChanged() {
+    if (!agent) {
+      return;
+    }
+    if (updateFlags.length === 0) {
+      return;
+    }
+    const handlers = {};
+    if (updateFlags.includes("OnMessagesChanged" /* OnMessagesChanged */)) {
+      handlers.onMessagesChanged = () => {
         forceUpdate();
-      },
-      onStateChanged() {
+      };
+    }
+    if (updateFlags.includes("OnStateChanged" /* OnStateChanged */)) {
+      handlers.onStateChanged = () => {
         forceUpdate();
-      },
-      onRunInitialized() {
-        setIsRunning(true);
-      },
-      onRunFinalized() {
-        setIsRunning(false);
-      },
-      onRunFailed() {
-        setIsRunning(false);
-      }
-    });
-    return () => subscription?.unsubscribe();
-  }, [agent]);
+      };
+    }
+    if (updateFlags.includes("OnRunStatusChanged" /* OnRunStatusChanged */)) {
+      handlers.onRunInitialized = () => {
+        forceUpdate();
+      };
+      handlers.onRunFinalized = () => {
+        forceUpdate();
+      };
+      handlers.onRunFailed = () => {
+        forceUpdate();
+      };
+    }
+    const subscription = agent.subscribe(handlers);
+    return () => subscription.unsubscribe();
+  }, [agent, forceUpdate, JSON.stringify(updateFlags)]);
   return {
-    agent,
-    isRunning
+    agent
   };
 }
 
@@ -1299,7 +1415,7 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
 function CopilotChatToolCallsView({
   message,
   messages = [],
-  isLoading = false
+  isRunning = false
 }) {
   const renderToolCall = useRenderToolCall();
   if (!message.toolCalls || message.toolCalls.length === 0) {
@@ -1312,7 +1428,7 @@ function CopilotChatToolCallsView({
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react12.default.Fragment, { children: renderToolCall({
       toolCall,
       toolMessage,
-      isLoading
+      isRunning
     }) }, toolCall.id);
   }) });
 }
@@ -1323,7 +1439,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 function CopilotChatAssistantMessage({
   message,
   messages,
-  isLoading,
+  isRunning,
   onThumbsUp,
   onThumbsDown,
   onReadAloud,
@@ -1412,9 +1528,11 @@ function CopilotChatAssistantMessage({
     {
       message,
       messages,
-      isLoading
+      isRunning
     }
   );
+  const hasContent = !!(message.content && message.content.trim().length > 0);
+  const shouldShowToolbar = toolbarVisible && hasContent;
   if (children) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: children({
       markdownRenderer: boundMarkdownRenderer,
@@ -1427,13 +1545,13 @@ function CopilotChatAssistantMessage({
       regenerateButton: boundRegenerateButton,
       message,
       messages,
-      isLoading,
+      isRunning,
       onThumbsUp,
       onThumbsDown,
       onReadAloud,
       onRegenerate,
       additionalToolbarItems,
-      toolbarVisible
+      toolbarVisible: shouldShowToolbar
     }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -1448,7 +1566,7 @@ function CopilotChatAssistantMessage({
       children: [
         boundMarkdownRenderer,
         boundToolCallsView,
-        toolbarVisible && boundToolbar
+        shouldShowToolbar && boundToolbar
       ]
     }
   );
@@ -1900,7 +2018,7 @@ function CopilotChatMessageView({
   assistantMessage,
   userMessage,
   cursor,
-  isLoading = false,
+  isRunning = false,
   children,
   className,
   ...props
@@ -1911,7 +2029,7 @@ function CopilotChatMessageView({
         key: message.id,
         message,
         messages,
-        isLoading
+        isRunning
       });
     } else if (message.role === "user") {
       return renderSlot(userMessage, CopilotChatUserMessage_default, {
@@ -1922,11 +2040,11 @@ function CopilotChatMessageView({
     return;
   }).filter(Boolean);
   if (children) {
-    return children({ messageElements, messages, isLoading });
+    return children({ messageElements, messages, isRunning });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_tailwind_merge6.twMerge)("flex flex-col", className), ...props, children: [
     messageElements,
-    isLoading && renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+    isRunning && renderSlot(cursor, CopilotChatMessageView.Cursor, {})
   ] });
 }
 CopilotChatMessageView.Cursor = function Cursor({
@@ -1962,6 +2080,8 @@ function CopilotChatView({
   disclaimer,
   messages = [],
   autoScroll = true,
+  inputProps,
+  isRunning = false,
   children,
   className,
   ...props
@@ -2001,9 +2121,14 @@ function CopilotChatView({
     };
   }, []);
   const BoundMessageView = renderSlot(messageView, CopilotChatMessageView_default, {
-    messages
+    messages,
+    isRunning
   });
-  const BoundInput = renderSlot(input, CopilotChatInput_default, {});
+  const BoundInput = renderSlot(
+    input,
+    CopilotChatInput_default,
+    inputProps ?? {}
+  );
   const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
   const BoundScrollView = renderSlot(scrollView, CopilotChatView.ScrollView, {
     autoScroll,
@@ -2221,83 +2346,101 @@ function CopilotChatView({
 var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
-var import_shared3 = require("@copilotkitnext/shared");
+var import_shared4 = require("@copilotkitnext/shared");
 var import_react16 = require("react");
 var import_ts_deepmerge = require("ts-deepmerge");
+var import_client = require("@ag-ui/client");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function CopilotChat({
-  agentId = import_shared3.DEFAULT_AGENT_ID,
+  agentId = import_shared4.DEFAULT_AGENT_ID,
   threadId,
   ...props
 }) {
   const { agent } = useAgent({ agentId });
-  const [isLoading, setIsLoading] = (0, import_react16.useState)(false);
-  threadId = threadId ?? (0, import_react16.useMemo)(() => (0, import_shared3.randomUUID)(), []);
-  const subscriber = {
-    onTextMessageStartEvent: () => setIsLoading(false),
-    onToolCallStartEvent: () => setIsLoading(false)
-  };
+  const { copilotkit } = useCopilotKit();
+  const resolvedThreadId = (0, import_react16.useMemo)(() => threadId ?? (0, import_shared4.randomUUID)(), [threadId]);
   (0, import_react16.useEffect)(() => {
-    const connect = async () => {
-      setIsLoading(true);
-      await agent?.runAgent(
-        {
-          forwardedProps: { __copilotkitConnect: true }
-        },
-        subscriber
-      );
-      setIsLoading(false);
+    const connect = async (agent2) => {
+      try {
+        await copilotkit.connectAgent({ agent: agent2, agentId });
+      } catch (error) {
+        if (error instanceof import_client.AGUIConnectNotImplementedError) {
+        } else {
+          throw error;
+        }
+      }
     };
     if (agent) {
-      agent.threadId = threadId;
-      if ("isCopilotKitAgent" in agent) {
-        connect();
-      } else {
-        setIsLoading(false);
-      }
+      agent.threadId = resolvedThreadId;
+      connect(agent);
     }
     return () => {
     };
-  }, [threadId, agent]);
-  const [inputValue, setInputValue] = (0, import_react16.useState)("");
+  }, [resolvedThreadId, agent, copilotkit, agentId]);
   const onSubmitInput = (0, import_react16.useCallback)(
     async (value) => {
-      setInputValue("");
       agent?.addMessage({
-        id: (0, import_shared3.randomUUID)(),
+        id: (0, import_shared4.randomUUID)(),
         role: "user",
         content: value
       });
-      setIsLoading(true);
-      await agent?.runAgent({}, subscriber);
-      setIsLoading(false);
+      if (agent) {
+        try {
+          await copilotkit.runAgent({ agent, agentId });
+        } catch (error) {
+          console.error("CopilotChat: runAgent failed", error);
+        }
+      }
     },
-    [agent]
+    [agent, copilotkit, agentId]
   );
+  const {
+    inputProps: providedInputProps,
+    messageView: providedMessageView,
+    ...restProps
+  } = props;
   const mergedProps = (0, import_ts_deepmerge.merge)(
     {
-      messageView: { isLoading }
+      isRunning: agent?.isRunning ?? false
     },
     {
-      ...props,
-      ...typeof props.messageView === "string" ? { messageView: { className: props.messageView } } : props.messageView !== void 0 ? { messageView: props.messageView } : {}
+      ...restProps,
+      ...typeof providedMessageView === "string" ? { messageView: { className: providedMessageView } } : providedMessageView !== void 0 ? { messageView: providedMessageView } : {}
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     CopilotChatConfigurationProvider,
     {
-      inputValue,
-      onSubmitInput,
-      onChangeInput: setInputValue,
+      agentId,
+      threadId: resolvedThreadId,
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         CopilotChatView,
         {
-          ...{ messages: agent?.messages ?? [], ...mergedProps }
+          ...{
+            messages: agent?.messages ?? [],
+            inputProps: {
+              onSubmitMessage: onSubmitInput,
+              ...providedInputProps
+            },
+            ...mergedProps
+          }
         }
       )
     }
   );
 }
+
+// src/types/defineToolCallRender.ts
+var import_zod2 = require("zod");
+function defineToolCallRender(def) {
+  const argsSchema = def.name === "*" && !def.args ? import_zod2.z.any() : def.args;
+  return {
+    name: def.name,
+    args: argsSchema,
+    render: def.render,
+    ...def.agentId ? { agentId: def.agentId } : {}
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AudioRecorderError,
@@ -2311,6 +2454,7 @@ function CopilotChat({
   CopilotChatUserMessage,
   CopilotChatView,
   CopilotKitProvider,
+  defineToolCallRender,
   useAgent,
   useAgentContext,
   useCopilotChatConfiguration,