@copilotkitnext/react 0.0.7 → 0.0.9-alpha.0

package/dist/index.mjs

@@ -11,6 +11,7 @@ import { Plus, Settings2, Mic, ArrowUp, X, Check } from "lucide-react";
 
 // src/providers/CopilotChatConfigurationProvider.tsx
 import { createContext, useContext } from "react";
+import { DEFAULT_AGENT_ID } from "@copilotkitnext/shared";
 import { jsx } from "react/jsx-runtime";
 var CopilotChatDefaultLabels = {
   chatInputPlaceholder: "Type a message...",
@@ -31,16 +32,20 @@ var CopilotChatDefaultLabels = {
   chatDisclaimerText: "AI can make mistakes. Please verify important information."
 };
 var CopilotChatConfiguration = 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 ?? DEFAULT_AGENT_ID,
+    threadId
   };
   return /* @__PURE__ */ jsx(CopilotChatConfiguration.Provider, { value: configurationValue, children });
 };
@@ -490,10 +495,14 @@ function CopilotChatInput({
   className,
   ...props
 }) {
-  const { inputValue, onSubmitInput, onChangeInput } = useCopilotChatConfiguration();
-  value ??= inputValue;
-  onSubmitMessage ??= onSubmitInput;
-  onChange ??= onChangeInput;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(() => value ?? "");
+  useEffect2(() => {
+    if (!isControlled && value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [isControlled, value]);
+  const resolvedValue = isControlled ? value ?? "" : internalValue;
   const inputRef = useRef2(null);
   const audioRecorderRef = useRef2(null);
   useEffect2(() => {
@@ -510,7 +519,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) {
@@ -519,17 +532,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
@@ -543,7 +564,7 @@ function CopilotChatInput({
   );
   const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {
     onClick: send,
-    disabled: !value?.trim() || !onSubmitMessage
+    disabled: !resolvedValue.trim() || !onSubmitMessage
   });
   const BoundStartTranscribeButton = renderSlot(
     startTranscribeButton,
@@ -879,7 +900,7 @@ import "katex/dist/katex.min.css";
 import { completePartialMarkdown } from "@copilotkitnext/core";
 
 // src/hooks/use-render-tool-call.tsx
-import { useCallback } from "react";
+import { useCallback, useEffect as useEffect4, useState as useState3 } from "react";
 import { ToolCallStatus } from "@copilotkitnext/core";
 
 // src/providers/CopilotKitProvider.tsx
@@ -979,13 +1000,9 @@ var CopilotKitProvider = ({
     return { tools: processedTools, renderToolCalls: processedRenderToolCalls };
   }, [humanInTheLoopList]);
   const allTools = 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 = useMemo(() => {
@@ -1015,9 +1032,30 @@ var CopilotKitProvider = ({
     return copilotkit2;
   }, [allTools]);
   useEffect3(() => {
-    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]);
   useEffect3(() => {
     copilotkit.setRuntimeUrl(runtimeUrl);
@@ -1046,10 +1084,7 @@ var useCopilotKit = () => {
   }
   useEffect3(() => {
     const unsubscribe = context.copilotkit.subscribe({
-      onRuntimeLoaded: () => {
-        forceUpdate();
-      },
-      onRuntimeLoadError: () => {
+      onRuntimeConnectionStatusChanged: () => {
         forceUpdate();
       }
     });
@@ -1064,35 +1099,73 @@ var useCopilotKit = () => {
 import { partialJSONParse } from "@copilotkitnext/shared";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function useRenderToolCall() {
-  const { currentRenderToolCalls } = useCopilotKit();
+  const { currentRenderToolCalls, copilotkit } = useCopilotKit();
+  const { agentId } = useCopilotChatConfiguration();
+  const [executingToolCallIds, setExecutingToolCallIds] = useState3(() => /* @__PURE__ */ new Set());
+  useEffect4(() => {
+    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,
-      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 = partialJSONParse(toolCall.function.arguments);
+      const toolName = toolCall.function.name;
       if (toolMessage) {
         return /* @__PURE__ */ jsx8(
           RenderComponent,
           {
+            name: toolName,
             args,
             status: ToolCallStatus.Complete,
             result: toolMessage.content
           },
           toolCall.id
         );
-      } else if (isLoading) {
+      } else if (executingToolCallIds.has(toolCall.id)) {
+        return /* @__PURE__ */ jsx8(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: ToolCallStatus.Executing,
+            result: void 0
+          },
+          toolCall.id
+        );
+      } else if (isRunning) {
         return /* @__PURE__ */ jsx8(
           RenderComponent,
           {
+            name: toolName,
             args,
             status: ToolCallStatus.InProgress,
             result: void 0
@@ -1103,6 +1176,7 @@ function useRenderToolCall() {
         return /* @__PURE__ */ jsx8(
           RenderComponent,
           {
+            name: toolName,
             args,
             status: ToolCallStatus.Complete,
             result: ""
@@ -1111,54 +1185,57 @@ function useRenderToolCall() {
         );
       }
     },
-    [currentRenderToolCalls]
+    [currentRenderToolCalls, executingToolCallIds, agentId]
   );
   return renderToolCall;
 }
 
 // src/hooks/use-frontend-tool.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 function useFrontendTool(tool) {
-  const { renderToolCalls, copilotkit, setCurrentRenderToolCalls } = useCopilotKit();
-  useEffect4(() => {
-    if (tool.name in copilotkit.tools) {
+  const { copilotkit, setCurrentRenderToolCalls } = useCopilotKit();
+  useEffect5(() => {
+    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
-import { useState as useState3, useCallback as useCallback2, useRef as useRef4 } from "react";
+import { useState as useState4, useCallback as useCallback2, useRef as useRef4, useEffect as useEffect6 } from "react";
 import React6 from "react";
 function useHumanInTheLoop(tool) {
-  const [status, setStatus] = useState3(
+  const [status, setStatus] = useState4(
     "inProgress"
   );
+  const statusRef = useRef4(status);
   const resolvePromiseRef = useRef4(null);
+  const { setCurrentRenderToolCalls } = useCopilotKit();
+  statusRef.current = status;
   const respond = useCallback2(async (result) => {
     if (resolvePromiseRef.current) {
       resolvePromiseRef.current(result);
@@ -1175,7 +1252,8 @@ function useHumanInTheLoop(tool) {
   const RenderComponent = useCallback2(
     (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,
@@ -1183,7 +1261,7 @@ function useHumanInTheLoop(tool) {
           respond: void 0
         };
         return React6.createElement(ToolComponent, enhancedProps);
-      } else if (status === "executing" && props.status === "executing") {
+      } else if (currentStatus === "executing" && props.status === "executing") {
         const enhancedProps = {
           ...props,
           name: tool.name,
@@ -1191,7 +1269,7 @@ function useHumanInTheLoop(tool) {
           respond
         };
         return React6.createElement(ToolComponent, enhancedProps);
-      } else if (status === "complete" && props.status === "complete") {
+      } else if (currentStatus === "complete" && props.status === "complete") {
         const enhancedProps = {
           ...props,
           name: tool.name,
@@ -1202,7 +1280,7 @@ function useHumanInTheLoop(tool) {
       }
       return React6.createElement(ToolComponent, props);
     },
-    [tool.render, tool.name, tool.description, status, respond]
+    [tool.render, tool.name, tool.description, respond]
   );
   const frontendTool = {
     ...tool,
@@ -1210,51 +1288,84 @@ function useHumanInTheLoop(tool) {
     render: RenderComponent
   };
   useFrontendTool(frontendTool);
+  useEffect6(() => {
+    return () => {
+      setCurrentRenderToolCalls(
+        (prev) => prev.filter(
+          (rc) => rc.name !== tool.name || rc.agentId !== tool.agentId
+        )
+      );
+    };
+  }, [setCurrentRenderToolCalls, tool.name, tool.agentId]);
 }
 
 // src/hooks/use-agent.tsx
-import { useMemo as useMemo2, useEffect as useEffect5, useReducer as useReducer2, useState as useState4 } from "react";
-import { DEFAULT_AGENT_ID } from "@copilotkitnext/shared";
-function useAgent({ agentId } = {}) {
-  agentId ??= DEFAULT_AGENT_ID;
+import { useMemo as useMemo2, useEffect as useEffect7, useReducer as useReducer2 } from "react";
+import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID2 } from "@copilotkitnext/shared";
+var ALL_UPDATES = [
+  "OnMessagesChanged" /* OnMessagesChanged */,
+  "OnStateChanged" /* OnStateChanged */,
+  "OnRunStatusChanged" /* OnRunStatusChanged */
+];
+function useAgent({ agentId, updates } = {}) {
+  agentId ??= DEFAULT_AGENT_ID2;
   const { copilotkit } = useCopilotKit();
   const [, forceUpdate] = useReducer2((x) => x + 1, 0);
-  const [isRunning, setIsRunning] = useState4(false);
+  const updateFlags = useMemo2(
+    () => updates ?? ALL_UPDATES,
+    [JSON.stringify(updates)]
+  );
   const agent = useMemo2(() => {
     return copilotkit.getAgent(agentId);
-  }, [agentId, copilotkit.agents, copilotkit.didLoadRuntime, copilotkit]);
-  useEffect5(() => {
-    const subscription = agent?.subscribe({
-      onMessagesChanged() {
+  }, [
+    agentId,
+    copilotkit.agents,
+    copilotkit.runtimeConnectionStatus,
+    copilotkit
+  ]);
+  useEffect7(() => {
+    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
   };
 }
 
 // src/hooks/use-agent-context.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect8 } from "react";
 function useAgentContext(context) {
   const { description, value } = context;
   const { copilotkit } = useCopilotKit();
-  useEffect6(() => {
+  useEffect8(() => {
     if (!copilotkit) return;
     const id = copilotkit.addContext(context);
     return () => {
@@ -1269,7 +1380,7 @@ import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
 function CopilotChatToolCallsView({
   message,
   messages = [],
-  isLoading = false
+  isRunning = false
 }) {
   const renderToolCall = useRenderToolCall();
   if (!message.toolCalls || message.toolCalls.length === 0) {
@@ -1282,7 +1393,7 @@ function CopilotChatToolCallsView({
     return /* @__PURE__ */ jsx9(React7.Fragment, { children: renderToolCall({
       toolCall,
       toolMessage,
-      isLoading
+      isRunning
     }) }, toolCall.id);
   }) });
 }
@@ -1293,7 +1404,7 @@ import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-ru
 function CopilotChatAssistantMessage({
   message,
   messages,
-  isLoading,
+  isRunning,
   onThumbsUp,
   onThumbsDown,
   onReadAloud,
@@ -1382,7 +1493,7 @@ function CopilotChatAssistantMessage({
     {
       message,
       messages,
-      isLoading
+      isRunning
     }
   );
   if (children) {
@@ -1397,7 +1508,7 @@ function CopilotChatAssistantMessage({
       regenerateButton: boundRegenerateButton,
       message,
       messages,
-      isLoading,
+      isRunning,
       onThumbsUp,
       onThumbsDown,
       onReadAloud,
@@ -1870,7 +1981,7 @@ function CopilotChatMessageView({
   assistantMessage,
   userMessage,
   cursor,
-  isLoading = false,
+  isRunning = false,
   children,
   className,
   ...props
@@ -1881,7 +1992,7 @@ function CopilotChatMessageView({
         key: message.id,
         message,
         messages,
-        isLoading
+        isRunning
       });
     } else if (message.role === "user") {
       return renderSlot(userMessage, CopilotChatUserMessage_default, {
@@ -1892,11 +2003,11 @@ function CopilotChatMessageView({
     return;
   }).filter(Boolean);
   if (children) {
-    return children({ messageElements, messages, isLoading });
+    return children({ messageElements, messages, isRunning });
   }
   return /* @__PURE__ */ jsxs6("div", { className: twMerge6("flex flex-col", className), ...props, children: [
     messageElements,
-    isLoading && renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+    isRunning && renderSlot(cursor, CopilotChatMessageView.Cursor, {})
   ] });
 }
 CopilotChatMessageView.Cursor = function Cursor({
@@ -1917,7 +2028,7 @@ CopilotChatMessageView.Cursor = function Cursor({
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-import React8, { useRef as useRef5, useState as useState7, useEffect as useEffect7 } from "react";
+import React8, { useRef as useRef5, useState as useState7, useEffect as useEffect9 } from "react";
 import { twMerge as twMerge7 } from "tailwind-merge";
 import { StickToBottom, useStickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { ChevronDown } from "lucide-react";
@@ -1932,6 +2043,8 @@ function CopilotChatView({
   disclaimer,
   messages = [],
   autoScroll = true,
+  inputProps,
+  isRunning = false,
   children,
   className,
   ...props
@@ -1940,7 +2053,7 @@ function CopilotChatView({
   const [inputContainerHeight, setInputContainerHeight] = useState7(0);
   const [isResizing, setIsResizing] = useState7(false);
   const resizeTimeoutRef = useRef5(null);
-  useEffect7(() => {
+  useEffect9(() => {
     const element = inputContainerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -1971,9 +2084,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,
@@ -2055,10 +2173,10 @@ function CopilotChatView({
     const [hasMounted, setHasMounted] = useState7(false);
     const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
     const [showScrollButton, setShowScrollButton] = useState7(false);
-    useEffect7(() => {
+    useEffect9(() => {
       setHasMounted(true);
     }, []);
-    useEffect7(() => {
+    useEffect9(() => {
       if (autoScroll) return;
       const scrollElement = scrollRef.current;
       if (!scrollElement) return;
@@ -2191,83 +2309,100 @@ function CopilotChatView({
 var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
-import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID2, randomUUID } from "@copilotkitnext/shared";
-import { useCallback as useCallback3, useState as useState8, useEffect as useEffect8, useMemo as useMemo3 } from "react";
+import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID3, randomUUID } from "@copilotkitnext/shared";
+import { useCallback as useCallback3, useEffect as useEffect10, useMemo as useMemo3 } from "react";
 import { merge } from "ts-deepmerge";
+import { AGUIConnectNotImplementedError } from "@ag-ui/client";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function CopilotChat({
-  agentId = DEFAULT_AGENT_ID2,
+  agentId = DEFAULT_AGENT_ID3,
   threadId,
   ...props
 }) {
   const { agent } = useAgent({ agentId });
-  const [isLoading, setIsLoading] = useState8(false);
-  threadId = threadId ?? useMemo3(() => randomUUID(), []);
-  const subscriber = {
-    onTextMessageStartEvent: () => setIsLoading(false),
-    onToolCallStartEvent: () => setIsLoading(false)
-  };
-  useEffect8(() => {
-    const connect = async () => {
-      setIsLoading(true);
-      await agent?.runAgent(
-        {
-          forwardedProps: { __copilotkitConnect: true }
-        },
-        subscriber
-      );
-      setIsLoading(false);
+  const { copilotkit } = useCopilotKit();
+  const resolvedThreadId = useMemo3(() => threadId ?? randomUUID(), [threadId]);
+  useEffect10(() => {
+    const connect = async (agent2) => {
+      try {
+        await copilotkit.connectAgent({ agent: agent2, agentId });
+      } catch (error) {
+        if (error instanceof 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] = useState8("");
+  }, [resolvedThreadId, agent, copilotkit, agentId]);
   const onSubmitInput = useCallback3(
     async (value) => {
-      setInputValue("");
       agent?.addMessage({
         id: 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 = 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__ */ jsx14(
     CopilotChatConfigurationProvider,
     {
-      inputValue,
-      onSubmitInput,
-      onChangeInput: setInputValue,
+      agentId,
+      threadId: resolvedThreadId,
       children: /* @__PURE__ */ jsx14(
         CopilotChatView,
         {
-          ...{ messages: agent?.messages ?? [], ...mergedProps }
+          ...{
+            messages: agent?.messages ?? [],
+            inputProps: {
+              onSubmitMessage: onSubmitInput,
+              ...providedInputProps
+            },
+            ...mergedProps
+          }
         }
       )
     }
   );
 }
+
+// src/types/defineToolCallRender.ts
+function defineToolCallRender(def) {
+  return {
+    name: def.name,
+    args: def.args,
+    // Coerce to ComponentType to align with ReactToolCallRender
+    render: def.render,
+    ...def.agentId ? { agentId: def.agentId } : {}
+  };
+}
 export {
   AudioRecorderError,
   CopilotChat,
@@ -2280,6 +2415,7 @@ export {
   CopilotChatUserMessage_default as CopilotChatUserMessage,
   CopilotChatView_default as CopilotChatView,
   CopilotKitProvider,
+  defineToolCallRender,
   useAgent,
   useAgentContext,
   useCopilotChatConfiguration,