@copilotkit/react-core/dist/index.mjs.map

<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />

{"version":3,"file":"index.mjs","names":["useRenderToolCall","DeprecatedGqlMessage"],"sources":["../src/utils/suggestions-constants.ts","../src/hooks/use-lazy-tool-renderer.tsx","../src/hooks/use-copilot-chat_internal.ts","../src/hooks/use-copilot-chat.ts","../src/hooks/use-copilot-chat-headless_c.ts","../src/hooks/use-frontend-tool.ts","../src/hooks/use-render-tool-call.ts","../src/hooks/use-human-in-the-loop.ts","../src/hooks/use-copilot-action.ts","../src/hooks/use-coagent-state-render.ts","../src/hooks/use-make-copilot-document-readable.ts","../src/hooks/use-copilot-readable.ts","../src/hooks/use-agent-nodename.ts","../src/hooks/use-coagent.ts","../src/hooks/use-copilot-runtime-client.ts","../src/hooks/use-copilot-authenticated-action.ts","../src/hooks/use-langgraph-interrupt.ts","../src/hooks/use-copilot-additional-instructions.ts","../src/hooks/use-default-tool.ts","../src/hooks/use-copilot-chat-suggestions.tsx","../src/types/frontend-action.ts","../src/lib/copilot-task.ts"],"sourcesContent":["/**\n * Constants for suggestions retry logic\n */\n\nexport const SUGGESTION_RETRY_CONFIG = {\n  MAX_RETRIES: 3,\n  COOLDOWN_MS: 5000, // 5 seconds\n} as const;\n","import { useRenderToolCall } from \"../v2\";\nimport { AIMessage, Message, ToolResult } from \"@copilotkit/shared\";\nimport React, { useCallback } from \"react\";\n\nexport function useLazyToolRenderer(): (\n  message?: AIMessage,\n  messages?: Message[],\n) => null | (() => ReturnType<ReturnType<typeof useRenderToolCall>> | null) {\n  const renderToolCall = useRenderToolCall();\n\n  return useCallback(\n    (message?: AIMessage, messages?: Message[]) => {\n      if (!message?.toolCalls?.length) return null;\n\n      const toolCall = message.toolCalls[0];\n      if (!toolCall) return null;\n\n      const toolMessage = messages?.find(\n        (m) => m.role === \"tool\" && m.toolCallId === toolCall.id,\n      ) as ToolResult;\n\n      return () =>\n        renderToolCall({\n          toolCall,\n          toolMessage,\n        });\n    },\n    [renderToolCall],\n  );\n}\n","import React, {\n  useRef,\n  useEffect,\n  useCallback,\n  useMemo,\n  useState,\n  createElement,\n} from \"react\";\nimport { useCopilotContext } from \"../context/copilot-context\";\nimport { SystemMessageFunction } from \"../types\";\nimport { useAsyncCallback } from \"../components/error-boundary/error-utils\";\nimport { Message } from \"@copilotkit/shared\";\nimport {\n  gqlToAGUI,\n  Message as DeprecatedGqlMessage,\n} from \"@copilotkit/runtime-client-gql\";\nimport {\n  useAgent,\n  useCopilotChatConfiguration,\n  useCopilotKit,\n  useRenderCustomMessages,\n  useSuggestions,\n} from \"../v2\";\nimport {\n  Suggestion,\n  CopilotKitCoreRuntimeConnectionStatus,\n} from \"@copilotkit/core\";\nimport { useLazyToolRenderer } from \"./use-lazy-tool-renderer\";\nimport {\n  AbstractAgent,\n  AGUIConnectNotImplementedError,\n  HttpAgent,\n} from \"@ag-ui/client\";\nimport {\n  CoAgentStateRenderBridge,\n  type CoAgentStateRenderBridgeProps,\n} from \"./use-coagent-state-render-bridge\";\n\n/**\n * The type of suggestions to use in the chat.\n *\n * `auto` - Suggestions are generated automatically.\n * `manual` - Suggestions are controlled programmatically.\n * `SuggestionItem[]` - Static suggestions array.\n */\nexport type ChatSuggestions =\n  | \"auto\"\n  | \"manual\"\n  | Omit<Suggestion, \"isLoading\">[];\n\nexport interface AppendMessageOptions {\n  /**\n   * Whether to run the chat completion after appending the message. Defaults to `true`.\n   */\n  followUp?: boolean;\n  /**\n   * Whether to clear the suggestions after appending the message. Defaults to `true`.\n   */\n  clearSuggestions?: boolean;\n}\n\nexport interface OnStopGenerationArguments {\n  /**\n   * The name of the currently executing agent.\n   */\n  currentAgentName: string | undefined;\n\n  /**\n   * The messages in the chat.\n   */\n  messages: Message[];\n}\n\nexport type OnReloadMessagesArguments = OnStopGenerationArguments & {\n  /**\n   * The message on which \"regenerate\" was pressed\n   */\n  messageId: string;\n};\n\nexport type OnStopGeneration = (args: OnStopGenerationArguments) => void;\n\nexport type OnReloadMessages = (args: OnReloadMessagesArguments) => void;\n\nexport interface UseCopilotChatOptions {\n  /**\n   * A unique identifier for the chat. If not provided, a random one will be\n   * generated. When provided, the `useChat` hook with the same `id` will\n   * have shared states across components.\n   */\n  id?: string;\n\n  /**\n   * HTTP headers to be sent with the API request.\n   */\n  headers?: Record<string, string> | Headers;\n\n  /**\n   * Initial messages to populate the chat with.\n   */\n  initialMessages?: Message[];\n\n  /**\n   * A function to generate the system message. Defaults to `defaultSystemMessage`.\n   */\n  makeSystemMessage?: SystemMessageFunction;\n\n  /**\n   * Disables inclusion of CopilotKit’s default system message. When true, no system message is sent (this also suppresses any custom message from <code>makeSystemMessage</code>).\n   */\n  disableSystemMessage?: boolean;\n  /**\n   * Controls the behavior of suggestions in the chat interface.\n   *\n   * `auto` (default) - Suggestions are generated automatically:\n   *   - When the chat is first opened (empty state)\n   *   - After each message exchange completes\n   *   - Uses configuration from `useCopilotChatSuggestions` hooks\n   *\n   * `manual` - Suggestions are controlled programmatically:\n   *   - Use `setSuggestions()` to set custom suggestions\n   *   - Use `generateSuggestions()` to trigger AI generation\n   *   - Access via `useCopilotChat` hook\n   *\n   * `SuggestionItem[]` - Static suggestions array:\n   *   - Always shows the same suggestions\n   *   - No AI generation involved\n   */\n  suggestions?: ChatSuggestions;\n\n  onInProgress?: (isLoading: boolean) => void;\n  onSubmitMessage?: (messageContent: string) => Promise<void> | void;\n  onStopGeneration?: OnStopGeneration;\n  onReloadMessages?: OnReloadMessages;\n}\n\nexport interface MCPServerConfig {\n  endpoint: string;\n  apiKey?: string;\n}\n\n// Old suggestion item interface, for returning from useCopilotChatInternal\ninterface SuggestionItem {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n}\n\nexport interface UseCopilotChatReturn {\n  /**\n   * @deprecated use `messages` instead, this is an old non ag-ui version of the messages\n   * Array of messages currently visible in the chat interface\n   *\n   * This is the visible messages, not the raw messages from the runtime client.\n   */\n  visibleMessages: DeprecatedGqlMessage[];\n\n  /**\n   * The messages that are currently in the chat in AG-UI format.\n   */\n  messages: Message[];\n\n  /** @deprecated use `sendMessage` in `useCopilotChatHeadless_c` instead. This will be removed in a future major version. */\n  appendMessage: (\n    message: DeprecatedGqlMessage,\n    options?: AppendMessageOptions,\n  ) => Promise<void>;\n\n  /**\n   * Send a new message to the chat\n   *\n   * ```tsx\n   * await sendMessage({\n   *   id: \"123\",\n   *   role: \"user\",\n   *   content: \"Hello, process this request\",\n   * });\n   * ```\n   */\n  sendMessage: (\n    message: Message,\n    options?: AppendMessageOptions,\n  ) => Promise<void>;\n\n  /**\n   * Replace all messages in the chat\n   *\n   * ```tsx\n   * setMessages([\n   *   { id: \"123\", role: \"user\", content: \"Hello, process this request\" },\n   *   { id: \"456\", role: \"assistant\", content: \"Hello, I'm the assistant\" },\n   * ]);\n   * ```\n   *\n   * **Deprecated** non-ag-ui version:\n   *\n   * ```tsx\n   * setMessages([\n   *   new TextMessage({\n   *     content: \"Hello, process this request\",\n   *     role: gqlRole.User,\n   *   }),\n   *   new TextMessage({\n   *     content: \"Hello, I'm the assistant\",\n   *     role: gqlRole.Assistant,\n   * ]);\n   * ```\n   *\n   */\n  setMessages: (messages: Message[] | DeprecatedGqlMessage[]) => void;\n\n  /**\n   * Remove a specific message by ID\n   *\n   * ```tsx\n   * deleteMessage(\"123\");\n   * ```\n   */\n  deleteMessage: (messageId: string) => void;\n\n  /**\n   * Regenerate the response for a specific message\n   *\n   * ```tsx\n   * reloadMessages(\"123\");\n   * ```\n   */\n  reloadMessages: (messageId: string) => Promise<void>;\n\n  /**\n   * Stop the current message generation\n   *\n   * ```tsx\n   * if (isLoading) {\n   *   stopGeneration();\n   * }\n   * ```\n   */\n  stopGeneration: () => void;\n\n  /**\n   * Clear all messages and reset chat state\n   *\n   * ```tsx\n   * reset();\n   * console.log(messages); // []\n   * ```\n   */\n  reset: () => void;\n\n  /**\n   * Whether the chat is currently generating a response\n   *\n   * ```tsx\n   * if (isLoading) {\n   *   console.log(\"Loading...\");\n   * } else {\n   *   console.log(\"Not loading\");\n   * }\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether the chat agent is available to generate responses\n   *\n   * ```tsx\n   * if (isAvailable) {\n   *   console.log(\"Loading...\");\n   * } else {\n   *   console.log(\"Not loading\");\n   * }\n   */\n  isAvailable: boolean;\n\n  /** Manually trigger chat completion (advanced usage) */\n  runChatCompletion: () => Promise<Message[]>;\n\n  /** MCP (Model Context Protocol) server configurations */\n  mcpServers: MCPServerConfig[];\n\n  /** Update MCP server configurations */\n  setMcpServers: (mcpServers: MCPServerConfig[]) => void;\n\n  /**\n   * Current suggestions array\n   * Use this to read the current suggestions or in conjunction with setSuggestions for manual control\n   */\n  suggestions: Suggestion[];\n\n  /**\n   * Manually set suggestions\n   * Useful for manual mode or custom suggestion workflows\n   */\n  setSuggestions: (suggestions: Omit<Suggestion, \"isLoading\">[]) => void;\n\n  /**\n   * Trigger AI-powered suggestion generation\n   * Uses configurations from useCopilotChatSuggestions hooks\n   * Respects global debouncing - only one generation can run at a time\n   *\n   * ```tsx\n   * generateSuggestions();\n   * console.log(suggestions); // [suggestion1, suggestion2, suggestion3]\n   * ```\n   */\n  generateSuggestions: () => Promise<void>;\n\n  /**\n   * Clear all current suggestions\n   * Also resets suggestion generation state\n   */\n  resetSuggestions: () => void;\n\n  /** Whether suggestions are currently being generated */\n  isLoadingSuggestions: boolean;\n\n  /** Interrupt content for human-in-the-loop workflows */\n  interrupt: string | React.ReactElement | null;\n\n  agent?: ReturnType<typeof useAgent>[\"agent\"];\n\n  threadId?: string;\n}\n\nexport function useCopilotChatInternal({\n  suggestions,\n  onInProgress,\n  onSubmitMessage,\n  onStopGeneration,\n  onReloadMessages,\n}: UseCopilotChatOptions = {}): UseCopilotChatReturn {\n  const { copilotkit } = useCopilotKit();\n  const { threadId, agentSession } = useCopilotContext();\n  const existingConfig = useCopilotChatConfiguration();\n  const [agentAvailable, setAgentAvailable] = useState(false);\n\n  // Apply priority: props > existing config > defaults\n  const resolvedAgentId = existingConfig?.agentId ?? \"default\";\n  const { agent } = useAgent({\n    agentId: resolvedAgentId,\n  });\n\n  // Track the last agent instance we called connect() on. Without this,\n  // connect() fires on every render where status is Connected — including\n  // unrelated context re-renders and StrictMode double-invocations.\n  // The ref is reset in the cleanup so that remounts (StrictMode, real\n  // unmount/remount) always trigger a fresh connect.\n  const lastConnectedAgentRef = useRef<AbstractAgent | null>(null);\n\n  useEffect(() => {\n    let detached = false;\n\n    // Create a fresh AbortController so we can cancel the HTTP request on cleanup.\n    // Mirrors the V2 CopilotChat pattern: HttpAgent uses abortController.signal in\n    // its fetch config.  connectAgent() does NOT create a new AbortController\n    // automatically, so we must set one before connecting.\n    const connectAbortController = new AbortController();\n    if (agent instanceof HttpAgent) {\n      agent.abortController = connectAbortController;\n    }\n\n    const connect = async (agent: AbstractAgent) => {\n      setAgentAvailable(false);\n      try {\n        await copilotkit.connectAgent({ agent });\n        // Guard against setting state after cleanup (e.g. React StrictMode unmount)\n        if (!detached) {\n          setAgentAvailable(true);\n        }\n      } catch (error) {\n        // Ignore errors from aborted connections (e.g. React StrictMode cleanup)\n        if (detached) return;\n        if (error instanceof AGUIConnectNotImplementedError) {\n          // connect not implemented, ignore\n        } else {\n          console.error(\"CopilotChat: connectAgent failed\", error);\n          // Error will be reported through subscription\n        }\n      }\n    };\n    if (\n      agent &&\n      agent !== lastConnectedAgentRef.current &&\n      copilotkit.runtimeConnectionStatus ===\n        CopilotKitCoreRuntimeConnectionStatus.Connected\n    ) {\n      lastConnectedAgentRef.current = agent;\n      connect(agent);\n    }\n    return () => {\n      // Abort the HTTP request and detach the active run.\n      // This is critical for React StrictMode which unmounts+remounts in dev,\n      // preventing duplicate /connect requests from reaching the server.\n      // Reset the ref so remounts always trigger a fresh connect.\n      lastConnectedAgentRef.current = null;\n      detached = true;\n      connectAbortController.abort();\n      agent?.detachActiveRun();\n    };\n  }, [\n    existingConfig?.threadId,\n    agent,\n    copilotkit,\n    copilotkit.runtimeConnectionStatus,\n    resolvedAgentId,\n  ]);\n\n  useEffect(() => {\n    onInProgress?.(Boolean(agent?.isRunning));\n  }, [agent?.isRunning, onInProgress]);\n\n  // Subscribe to copilotkit.interruptElement so the v1 return type stays\n  // reactive. The element is published by useInterrupt (v2) when user code\n  // calls useLangGraphInterrupt({ render, ... }).\n  const [interrupt, setInterrupt] = useState<React.ReactElement | null>(null);\n  useEffect(() => {\n    setInterrupt(copilotkit.interruptElement);\n    const subscription = copilotkit.subscribe({\n      onInterruptElementChanged: ({ interruptElement }) => {\n        setInterrupt(interruptElement);\n      },\n    });\n    return () => subscription.unsubscribe();\n  }, [copilotkit]);\n\n  const reset = () => {\n    agent?.setMessages([]);\n    agent?.setState(null);\n  };\n\n  const deleteMessage = useCallback(\n    (messageId: string) => {\n      const filteredMessages = (agent?.messages ?? []).filter(\n        (message) => message.id !== messageId,\n      );\n      agent?.setMessages(filteredMessages);\n    },\n    [agent?.setMessages, agent?.messages],\n  );\n\n  const latestDelete = useUpdatedRef(deleteMessage);\n  const latestDeleteFunc = useCallback(\n    (messageId: string) => {\n      return latestDelete.current(messageId);\n    },\n    [latestDelete],\n  );\n\n  const currentSuggestions = useSuggestions({ agentId: resolvedAgentId });\n\n  const reload = useAsyncCallback(\n    async (reloadMessageId: string): Promise<void> => {\n      if (!agent) return;\n      const messages = agent?.messages ?? [];\n      const isLoading = agent.isRunning;\n      if (isLoading || messages.length === 0) {\n        return;\n      }\n\n      const reloadMessageIndex = messages.findIndex(\n        (msg) => msg.id === reloadMessageId,\n      );\n      if (reloadMessageIndex === -1) {\n        console.warn(`Message with id ${reloadMessageId} not found`);\n        return;\n      }\n\n      const reloadMessageRole = messages[reloadMessageIndex].role;\n      if (reloadMessageRole !== \"assistant\") {\n        console.warn(\n          `Regenerate cannot be performed on ${reloadMessageRole} role`,\n        );\n        return;\n      }\n      let historyCutoff: Message[] = [messages[0]];\n\n      if (messages.length > 2 && reloadMessageIndex !== 0) {\n        // message to regenerate from is now first.\n        // Work backwards to find the first the closest user message\n        const lastUserMessageBeforeRegenerate = messages\n          .slice(0, reloadMessageIndex)\n          .toReversed()\n          .find((msg) => msg.role === \"user\");\n\n        if (!lastUserMessageBeforeRegenerate) {\n          historyCutoff = [messages[0]];\n        } else {\n          const indexOfLastUserMessageBeforeRegenerate = messages.findIndex(\n            (msg) => msg.id === lastUserMessageBeforeRegenerate.id,\n          );\n          // Include the user message, remove everything after it\n          historyCutoff = messages.slice(\n            0,\n            indexOfLastUserMessageBeforeRegenerate + 1,\n          );\n        }\n      } else if (messages.length > 2 && reloadMessageIndex === 0) {\n        historyCutoff = [messages[0], messages[1]];\n      }\n\n      agent?.setMessages(historyCutoff);\n\n      if (agent) {\n        try {\n          await copilotkit.runAgent({ agent });\n        } catch (error) {\n          console.error(\"CopilotChat: runAgent failed during reload\", error);\n          // Error will be reported through subscription\n        }\n      }\n      return;\n    },\n    [\n      agent?.messages.length,\n      agent?.isRunning,\n      agent?.setMessages,\n      copilotkit?.runAgent,\n    ],\n  );\n\n  const latestSendMessageFunc = useAsyncCallback(\n    async (message: Message, options?: AppendMessageOptions) => {\n      if (!agent) return;\n      const followUp = options?.followUp ?? true;\n      if (options?.clearSuggestions) {\n        copilotkit.clearSuggestions(resolvedAgentId);\n      }\n\n      // Call onSubmitMessage BEFORE adding message and running agent\n      // This allows users to perform actions (e.g., open chat window) before agent starts processing\n      if (onSubmitMessage) {\n        const content =\n          typeof message.content === \"string\"\n            ? message.content\n            : message.content && \"text\" in message.content\n              ? message.content.text\n              : message.content && \"filename\" in message.content\n                ? message.content.filename\n                : \"\";\n        try {\n          await onSubmitMessage(content);\n        } catch (error) {\n          console.error(\"Error in onSubmitMessage:\", error);\n        }\n      }\n\n      agent?.addMessage(message);\n      if (followUp) {\n        try {\n          await copilotkit.runAgent({ agent });\n        } catch (error) {\n          console.error(\"CopilotChat: runAgent failed\", error);\n          // Error will be reported through subscription\n        }\n      }\n    },\n    [agent, copilotkit, resolvedAgentId, onSubmitMessage],\n  );\n\n  const latestAppendFunc = useAsyncCallback(\n    async (message: DeprecatedGqlMessage, options?: AppendMessageOptions) => {\n      return latestSendMessageFunc(gqlToAGUI([message])[0], options);\n    },\n    [latestSendMessageFunc],\n  );\n\n  const latestSetMessagesFunc = useCallback(\n    (messages: Message[] | DeprecatedGqlMessage[]) => {\n      if (\n        messages.every((message) => message instanceof DeprecatedGqlMessage)\n      ) {\n        return agent?.setMessages?.(gqlToAGUI(messages));\n      }\n      return agent?.setMessages?.(messages);\n    },\n    [agent?.setMessages, agent],\n  );\n\n  const latestReload = useUpdatedRef(reload);\n  const latestReloadFunc = useAsyncCallback(\n    async (messageId: string) => {\n      onReloadMessages?.({\n        messageId,\n        currentAgentName: agent?.agentId,\n        messages: agent?.messages ?? [],\n      });\n      return await latestReload.current(messageId);\n    },\n    [latestReload, agent, onReloadMessages],\n  );\n\n  const latestStopFunc = useCallback(() => {\n    onStopGeneration?.({\n      currentAgentName: agent?.agentId,\n      messages: agent?.messages ?? [],\n    });\n    return agent?.abortRun?.();\n  }, [onStopGeneration, agent]);\n\n  const latestReset = useUpdatedRef(reset);\n  const latestResetFunc = useCallback(() => {\n    return latestReset.current();\n  }, [latestReset]);\n\n  const lazyToolRendered = useLazyToolRenderer();\n  const renderCustomMessage = useRenderCustomMessages();\n  const legacyCustomMessageRenderer = useLegacyCoagentRenderer({\n    copilotkit,\n    agent,\n    agentId: resolvedAgentId,\n    threadId: existingConfig?.threadId ?? threadId,\n  });\n  const allMessages = agent?.messages ?? [];\n  const resolvedMessages = useMemo(() => {\n    let processedMessages = allMessages.map((message) => {\n      if (message.role !== \"assistant\") {\n        return message;\n      }\n\n      const lazyRendered = lazyToolRendered(message, allMessages);\n      if (lazyRendered) {\n        const renderedGenUi = lazyRendered();\n        if (renderedGenUi) {\n          return { ...message, generativeUI: () => renderedGenUi };\n        }\n      }\n\n      const bridgeRenderer =\n        legacyCustomMessageRenderer || renderCustomMessage\n          ? () => {\n              if (legacyCustomMessageRenderer) {\n                return legacyCustomMessageRenderer({\n                  message,\n                  position: \"before\",\n                });\n              }\n              try {\n                return (\n                  renderCustomMessage?.({ message, position: \"before\" }) ?? null\n                );\n              } catch (error) {\n                console.warn(\n                  \"[CopilotKit] renderCustomMessages failed, falling back to legacy renderer\",\n                  error,\n                );\n                return null;\n              }\n            }\n          : null;\n\n      if (bridgeRenderer) {\n        // Attach a position so react-ui can render the custom UI above the assistant content.\n        return {\n          ...message,\n          generativeUI: bridgeRenderer,\n          generativeUIPosition: \"before\" as const,\n        };\n      }\n      return message;\n    });\n\n    const hasAssistantMessages = processedMessages.some(\n      (msg) => msg.role === \"assistant\",\n    );\n    const canUseCustomRenderer = Boolean(\n      renderCustomMessage && copilotkit?.getAgent?.(resolvedAgentId),\n    );\n    const placeholderRenderer = legacyCustomMessageRenderer\n      ? legacyCustomMessageRenderer\n      : canUseCustomRenderer\n        ? renderCustomMessage\n        : null;\n\n    const shouldRenderPlaceholder =\n      Boolean(agent?.isRunning) ||\n      Boolean(agent?.state && Object.keys(agent.state).length);\n\n    const effectiveThreadId = threadId ?? agent?.threadId ?? \"default\";\n    let latestUserIndex = -1;\n    for (let i = processedMessages.length - 1; i >= 0; i -= 1) {\n      if (processedMessages[i].role === \"user\") {\n        latestUserIndex = i;\n        break;\n      }\n    }\n    const latestUserMessageId =\n      latestUserIndex >= 0 ? processedMessages[latestUserIndex].id : undefined;\n    const currentRunId = latestUserMessageId\n      ? copilotkit.getRunIdForMessage(\n          resolvedAgentId,\n          effectiveThreadId,\n          latestUserMessageId,\n        ) || `pending:${latestUserMessageId}`\n      : undefined;\n    const hasAssistantForCurrentRun =\n      latestUserIndex >= 0\n        ? processedMessages\n            .slice(latestUserIndex + 1)\n            .some((msg) => msg.role === \"assistant\")\n        : hasAssistantMessages;\n\n    // Insert a placeholder assistant message so state snapshots can render before any\n    // assistant text exists for the current run.\n    if (\n      placeholderRenderer &&\n      shouldRenderPlaceholder &&\n      !hasAssistantForCurrentRun\n    ) {\n      const placeholderId = currentRunId\n        ? `coagent-state-render-${resolvedAgentId}-${currentRunId}`\n        : `coagent-state-render-${resolvedAgentId}`;\n      const placeholderMessage: Message = {\n        id: placeholderId,\n        role: \"assistant\",\n        content: \"\",\n        name: \"coagent-state-render\",\n        runId: currentRunId,\n      };\n      processedMessages = [\n        ...processedMessages,\n        {\n          ...placeholderMessage,\n          generativeUIPosition: \"before\" as const,\n          generativeUI: () =>\n            placeholderRenderer({\n              message: placeholderMessage,\n              position: \"before\",\n            }),\n        } as Message,\n      ];\n    }\n\n    return processedMessages;\n  }, [\n    agent?.messages,\n    lazyToolRendered,\n    allMessages,\n    renderCustomMessage,\n    legacyCustomMessageRenderer,\n    resolvedAgentId,\n    copilotkit,\n    agent?.isRunning,\n    agent?.state,\n  ]);\n\n  const renderedSuggestions = useMemo(() => {\n    if (Array.isArray(suggestions)) {\n      return {\n        suggestions: suggestions.map((s) => ({ ...s, isLoading: false })),\n        isLoading: false,\n      };\n    }\n    return currentSuggestions;\n  }, [suggestions, currentSuggestions]);\n\n  // @ts-ignore\n  return {\n    messages: resolvedMessages,\n    sendMessage: latestSendMessageFunc,\n    appendMessage: latestAppendFunc,\n    setMessages: latestSetMessagesFunc,\n    reloadMessages: latestReloadFunc,\n    stopGeneration: latestStopFunc,\n    reset: latestResetFunc,\n    deleteMessage: latestDeleteFunc,\n    isAvailable: agentAvailable,\n    isLoading: Boolean(agent?.isRunning),\n    // mcpServers,\n    // setMcpServers,\n    suggestions: renderedSuggestions.suggestions,\n    setSuggestions: (suggestions: Omit<Suggestion, \"isLoading\">[]) =>\n      copilotkit.addSuggestionsConfig({ suggestions }),\n    generateSuggestions: async () =>\n      copilotkit.reloadSuggestions(resolvedAgentId),\n    resetSuggestions: () => copilotkit.clearSuggestions(resolvedAgentId),\n    isLoadingSuggestions: renderedSuggestions.isLoading,\n    interrupt,\n    agent,\n    threadId,\n  };\n}\n\n// store `value` in a ref and update\n// it whenever it changes.\nfunction useUpdatedRef<T>(value: T) {\n  const ref = useRef(value);\n\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref;\n}\n\ntype LegacyRenderParams = {\n  message: Message;\n  position: \"before\" | \"after\";\n};\n\ntype LegacyRenderer = ((args: LegacyRenderParams) => any) | null;\n\nfunction useLegacyCoagentRenderer({\n  copilotkit,\n  agent,\n  agentId,\n  threadId,\n}: {\n  copilotkit: ReturnType<typeof useCopilotKit>[\"copilotkit\"];\n  agent?: AbstractAgent;\n  agentId: string;\n  threadId?: string;\n}): LegacyRenderer {\n  return useMemo(() => {\n    if (!copilotkit || !agent) {\n      return null;\n    }\n\n    return ({ message, position }: LegacyRenderParams) => {\n      const effectiveThreadId = threadId ?? agent.threadId ?? \"default\";\n      const providedRunId = (message as any).runId as string | undefined;\n      const existingRunId = providedRunId\n        ? providedRunId\n        : copilotkit.getRunIdForMessage(agentId, effectiveThreadId, message.id);\n      const runId = existingRunId || `pending:${message.id}`;\n      const messageIndex = Math.max(\n        agent.messages.findIndex((msg) => msg.id === message.id),\n        0,\n      );\n\n      const bridgeProps: CoAgentStateRenderBridgeProps = {\n        message: message as any,\n        position,\n        runId,\n        messageIndex,\n        messageIndexInRun: 0,\n        numberOfMessagesInRun: 1,\n        agentId,\n        stateSnapshot: (message as any).state,\n      };\n\n      return createElement(CoAgentStateRenderBridge, bridgeProps) as any;\n    };\n  }, [agent, agentId, copilotkit, threadId]);\n}\n\nexport function defaultSystemMessage(\n  contextString: string,\n  additionalInstructions?: string,\n): string {\n  return (\n    `\nPlease act as an efficient, competent, conscientious, and industrious professional assistant.\n\nHelp the user achieve their goals, and you do so in a way that is as efficient as possible, without unnecessary fluff, but also without sacrificing professionalism.\nAlways be polite and respectful, and prefer brevity over verbosity.\n\nThe user has provided you with the following context:\n\\`\\`\\`\n${contextString}\n\\`\\`\\`\n\nThey have also provided you with functions you can call to initiate actions on their behalf, or functions you can call to receive more information.\n\nPlease assist them as best you can.\n\nYou can ask them for clarifying questions if needed, but don't be annoying about it. If you can reasonably 'fill in the blanks' yourself, do so.\n\nIf you would like to call a function, call it without saying anything else.\nIn case of a function error:\n- If this error stems from incorrect function parameters or syntax, you may retry with corrected arguments.\n- If the error's source is unclear or seems unrelated to your input, do not attempt further retries.\n` + (additionalInstructions ? `\\n\\n${additionalInstructions}` : \"\")\n  );\n}\n","/**\n * `useCopilotChat` is a lightweight React hook for headless chat interactions.\n * Perfect for controlling the prebuilt chat components programmatically.\n *\n * **Open Source Friendly** - Works without requiring a free public license key.\n *\n * <Callout title=\"Looking for fully headless UI?\">\n * Get started with [useCopilotChatHeadless_c](https://docs.copilotkit.ai/reference/v2/hooks/useCopilotChatHeadless_c).\n * </Callout>\n *\n * ## Use Cases\n *\n * - **Programmatic Messaging**: Send messages without displaying chat UI\n * - **Programmatic control**: Control prebuilt component programmatically\n * - **Background Operations**: Trigger AI interactions in the background\n * - **Fire-and-Forget**: Send messages without needing to read responses\n *\n * ## Usage\n *\n * ```tsx\n * import { TextMessage, MessageRole } from \"@copilotkit/runtime-client-gql\";\n *\n * const { appendMessage } = useCopilotChat();\n *\n * // Example usage without naming conflicts\n * const handleSendMessage = async (content: string) => {\n *   await appendMessage(\n *     new TextMessage({\n *       role: MessageRole.User,\n *       content,\n *     })\n *   );\n * };\n * ```\n *\n * ## Return Values\n * The following properties are returned from the hook:\n *\n * <PropertyReference name=\"visibleMessages\" type=\"DeprecatedGqlMessage[]\" deprecated>\n * Array of messages in old non-AG-UI format, use for compatibility only\n * </PropertyReference>\n *\n * <PropertyReference name=\"appendMessage\" type=\"(message: DeprecatedGqlMessage, options?) => Promise<void>\" deprecated>\n * Append message using old format, use `sendMessage` instead\n * </PropertyReference>\n *\n * <PropertyReference name=\"reloadMessages\" type=\"(messageId: string) => Promise<void>\">\n * Regenerate the response for a specific message by ID\n * </PropertyReference>\n *\n * <PropertyReference name=\"stopGeneration\" type=\"() => void\">\n * Stop the current message generation process\n * </PropertyReference>\n *\n * <PropertyReference name=\"reset\" type=\"() => void\">\n * Clear all messages and reset chat state completely\n * </PropertyReference>\n *\n * <PropertyReference name=\"isLoading\" type=\"boolean\">\n * Whether the chat is currently generating a response\n * </PropertyReference>\n *\n * <PropertyReference name=\"runChatCompletion\" type=\"() => Promise<Message[]>\">\n * Manually trigger chat completion for advanced usage\n * </PropertyReference>\n *\n * <PropertyReference name=\"mcpServers\" type=\"MCPServerConfig[]\">\n * Array of Model Context Protocol server configurations\n * </PropertyReference>\n *\n * <PropertyReference name=\"setMcpServers\" type=\"(servers: MCPServerConfig[]) => void\">\n * Update MCP server configurations for enhanced context\n * </PropertyReference>\n */\n\nimport type {\n  UseCopilotChatOptions,\n  UseCopilotChatReturn as UseCopilotChatReturnInternal,\n} from \"./use-copilot-chat_internal\";\nimport { useCopilotChatInternal } from \"./use-copilot-chat_internal\";\n\n// Create a type that excludes message-related properties from the internal type\nexport type UseCopilotChatReturn = Omit<\n  UseCopilotChatReturnInternal,\n  | \"messages\"\n  | \"sendMessage\"\n  | \"suggestions\"\n  | \"setSuggestions\"\n  | \"generateSuggestions\"\n  | \"isLoadingSuggestions\"\n  | \"resetSuggestions\"\n  | \"interrupt\"\n  | \"setMessages\"\n  | \"deleteMessage\"\n>;\n\n/**\n * A lightweight React hook for headless chat interactions.\n * Perfect for programmatic messaging, background operations, and custom UI implementations.\n *\n * **Open Source Friendly** - Works without requiring a `publicApiKey`.\n */\n// TODO: Do we need this? If so, does it work properly? test.\nexport function useCopilotChat(\n  options: UseCopilotChatOptions = {},\n): UseCopilotChatReturn {\n  const {\n    visibleMessages,\n    appendMessage,\n    reloadMessages,\n    stopGeneration,\n    reset,\n    isLoading,\n    isAvailable,\n    runChatCompletion,\n    mcpServers,\n    setMcpServers,\n  } = useCopilotChatInternal(options);\n\n  return {\n    visibleMessages,\n    appendMessage,\n    reloadMessages,\n    stopGeneration,\n    reset,\n    isLoading,\n    isAvailable,\n    runChatCompletion,\n    mcpServers,\n    setMcpServers,\n  };\n}\n","/**\n * `useCopilotChatHeadless_c` is for building fully custom UI (headless UI) implementations.\n *\n * <Callout title=\"This is a premium-only feature\">\n * Sign up for free on [Copilot Cloud](https://cloud.copilotkit.ai) to get your public license key or read more about <a href=\"/premium/overview\">premium features</a>.\n *\n * Usage is generous, **free** to get started, and works with **either self-hosted or Copilot Cloud** environments.\n * </Callout>\n *\n * ## Key Features\n *\n * - **Fully headless**: Build your own fully custom UI's for your agentic applications.\n * - **Advanced Suggestions**: Direct access to suggestions array with full control\n * - **Interrupt Handling**: Support for advanced interrupt functionality\n * - **MCP Server Support**: Model Context Protocol server configurations\n * - **Chat Controls**: Complete set of chat management functions\n * - **Loading States**: Comprehensive loading state management\n *\n *\n * ## Usage\n *\n * ### Basic Setup\n *\n * ```tsx\n * import { CopilotKit } from \"@copilotkit/react-core\";\n * import { useCopilotChatHeadless_c } from \"@copilotkit/react-core\";\n *\n * export function App() {\n *   return (\n *     <CopilotKit publicApiKey=\"your-free-public-license-key\">\n *       <YourComponent />\n *     </CopilotKit>\n *   );\n * }\n *\n * export function YourComponent() {\n *   const { messages, sendMessage, isLoading } = useCopilotChatHeadless_c();\n *\n *   const handleSendMessage = async () => {\n *     await sendMessage({\n *       id: \"123\",\n *       role: \"user\",\n *       content: \"Hello World\",\n *     });\n *   };\n *\n *   return (\n *     <div>\n *       {messages.map(msg => <div key={msg.id}>{msg.content}</div>)}\n *       <button onClick={handleSendMessage} disabled={isLoading}>\n *         Send Message\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n *\n * ### Working with Suggestions\n *\n * ```tsx\n * import { useCopilotChatHeadless_c, useCopilotChatSuggestions } from \"@copilotkit/react-core\";\n *\n * export function SuggestionExample() {\n *   const {\n *     suggestions,\n *     setSuggestions,\n *     generateSuggestions,\n *     isLoadingSuggestions\n *   } = useCopilotChatHeadless_c();\n *\n *   // Configure AI suggestion generation\n *   useCopilotChatSuggestions({\n *     instructions: \"Suggest helpful actions based on the current context\",\n *     maxSuggestions: 3\n *   });\n *\n *   return (\n *     <div>\n *       {suggestions.map(suggestion => (\n *         <button key={suggestion.title}>{suggestion.title}</button>\n *       ))}\n *       <button onClick={generateSuggestions} disabled={isLoadingSuggestions}>\n *         Generate Suggestions\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n *\n * ## Return Values\n * The following properties are returned from the hook:\n *\n * <PropertyReference name=\"messages\" type=\"Message[]\">\n * The messages currently in the chat in AG-UI format\n * </PropertyReference>\n *\n * <PropertyReference name=\"sendMessage\" type=\"(message: Message, options?) => Promise<void>\">\n * Send a new message to the chat and trigger AI response\n * </PropertyReference>\n *\n * <PropertyReference name=\"setMessages\" type=\"(messages: Message[] | DeprecatedGqlMessage[]) => void\">\n * Replace all messages in the chat with new array\n * </PropertyReference>\n *\n * <PropertyReference name=\"deleteMessage\" type=\"(messageId: string) => void\">\n * Remove a specific message by ID from the chat\n * </PropertyReference>\n *\n * <PropertyReference name=\"reloadMessages\" type=\"(messageId: string) => Promise<void>\">\n * Regenerate the response for a specific message by ID\n * </PropertyReference>\n *\n * <PropertyReference name=\"stopGeneration\" type=\"() => void\">\n * Stop the current message generation process\n * </PropertyReference>\n *\n * <PropertyReference name=\"reset\" type=\"() => void\">\n * Clear all messages and reset chat state completely\n * </PropertyReference>\n *\n * <PropertyReference name=\"isLoading\" type=\"boolean\">\n * Whether the chat is currently generating a response\n * </PropertyReference>\n *\n * <PropertyReference name=\"runChatCompletion\" type=\"() => Promise<Message[]>\">\n * Manually trigger chat completion for advanced usage\n * </PropertyReference>\n *\n * <PropertyReference name=\"mcpServers\" type=\"MCPServerConfig[]\">\n * Array of Model Context Protocol server configurations\n * </PropertyReference>\n *\n * <PropertyReference name=\"setMcpServers\" type=\"(servers: MCPServerConfig[]) => void\">\n * Update MCP server configurations for enhanced context\n * </PropertyReference>\n *\n * <PropertyReference name=\"suggestions\" type=\"SuggestionItem[]\">\n * Current suggestions array for reading or manual control\n * </PropertyReference>\n *\n * <PropertyReference name=\"setSuggestions\" type=\"(suggestions: SuggestionItem[]) => void\">\n * Manually set suggestions for custom workflows\n * </PropertyReference>\n *\n * <PropertyReference name=\"generateSuggestions\" type=\"() => Promise<void>\">\n * Trigger AI-powered suggestion generation using configured settings\n * </PropertyReference>\n *\n * <PropertyReference name=\"resetSuggestions\" type=\"() => void\">\n * Clear all current suggestions and reset generation state\n * </PropertyReference>\n *\n * <PropertyReference name=\"isLoadingSuggestions\" type=\"boolean\">\n * Whether suggestions are currently being generated\n * </PropertyReference>\n *\n * <PropertyReference name=\"interrupt\" type=\"string | React.ReactElement | null\">\n * Interrupt content for human-in-the-loop workflows\n * </PropertyReference>\n */\nimport { useEffect } from \"react\";\nimport { useCopilotContext } from \"../context/copilot-context\";\nimport {\n  useCopilotChatInternal,\n  defaultSystemMessage,\n  UseCopilotChatOptions as UseCopilotChatOptions_c,\n  UseCopilotChatReturn as UseCopilotChatReturn_c,\n  MCPServerConfig,\n} from \"./use-copilot-chat_internal\";\n\nimport {\n  ErrorVisibility,\n  Severity,\n  CopilotKitError,\n  CopilotKitErrorCode,\n  styledConsole,\n} from \"@copilotkit/shared\";\n\n// Non-functional fallback implementation\nconst createNonFunctionalReturn = (): UseCopilotChatReturn_c => ({\n  visibleMessages: [],\n  messages: [],\n  sendMessage: async () => {},\n  appendMessage: async () => {},\n  setMessages: () => {},\n  deleteMessage: () => {},\n  reloadMessages: async () => {},\n  stopGeneration: () => {},\n  reset: () => {},\n  isLoading: false,\n  isAvailable: false,\n  runChatCompletion: async () => [],\n  mcpServers: [],\n  setMcpServers: () => {},\n  suggestions: [],\n  setSuggestions: () => {},\n  generateSuggestions: async () => {},\n  resetSuggestions: () => {},\n  isLoadingSuggestions: false,\n  interrupt: null,\n});\n/**\n * Enterprise React hook that provides complete chat functionality for fully custom UI implementations.\n * Includes all advanced features like direct message access, suggestions array, interrupt handling, and MCP support.\n *\n * **Requires a publicApiKey** - Sign up for free at https://cloud.copilotkit.ai/\n *\n * @param options - Configuration options for the chat\n * @returns Complete chat interface with all enterprise features\n *\n * @example\n * ```tsx\n * const { messages, sendMessage, suggestions, interrupt } = useCopilotChatHeadless_c();\n * ```\n */\nfunction useCopilotChatHeadless_c(\n  options: UseCopilotChatOptions_c = {},\n): UseCopilotChatReturn_c {\n  const { copilotApiConfig, setBannerError } = useCopilotContext();\n\n  // Check if publicApiKey is available\n  const hasPublicApiKey = Boolean(copilotApiConfig.publicApiKey);\n\n  // Always call the internal hook (follows rules of hooks)\n  const internalResult = useCopilotChatInternal(options);\n\n  // Set banner error when no public API key is provided\n  useEffect(() => {\n    if (!hasPublicApiKey) {\n      setBannerError(\n        new CopilotKitError({\n          message:\n            // add link to documentation here\n            \"You're using useCopilotChatHeadless_c, a premium-only feature, which offers extensive headless chat capabilities. To continue, you'll need to provide a free public license key.\",\n          code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,\n          severity: Severity.WARNING,\n          visibility: ErrorVisibility.BANNER,\n        }),\n      );\n      styledConsole.logCopilotKitPlatformMessage();\n    } else {\n      setBannerError(null); // Clear banner when API key is provided\n    }\n  }, [hasPublicApiKey]); // Removed setBannerError dependency\n\n  // Return internal result if publicApiKey is available, otherwise return fallback\n  if (hasPublicApiKey) {\n    return internalResult;\n  }\n\n  // Return non-functional fallback when no publicApiKey\n  return createNonFunctionalReturn();\n}\n\nexport { defaultSystemMessage, useCopilotChatHeadless_c };\nexport type {\n  UseCopilotChatOptions_c,\n  UseCopilotChatReturn_c,\n  MCPServerConfig,\n};\n\nconst noKeyWarning = () => {\n  styledConsole.logCopilotKitPlatformMessage();\n};\n","import React, { useEffect, useMemo, useRef } from \"react\";\nimport { ActionRenderProps, FrontendAction } from \"../types/frontend-action\";\nimport {\n  Parameter,\n  getZodParameters,\n  MappedParameterTypes,\n} from \"@copilotkit/shared\";\nimport { parseJson } from \"@copilotkit/shared\";\nimport { ToolCallStatus } from \"@copilotkit/core\";\nimport {\n  type ReactFrontendTool,\n  useFrontendTool as useFrontendToolVNext,\n} from \"../v2\";\n\ntype FrontendToolOptions<T extends Parameter[] | []> = ReactFrontendTool<\n  MappedParameterTypes<T>\n>;\ntype FrontendToolRenderArgs<T extends Parameter[] | []> =\n  | {\n      name: string;\n      args: Partial<MappedParameterTypes<T>>;\n      status: ToolCallStatus.InProgress;\n      result: undefined;\n    }\n  | {\n      name: string;\n      args: MappedParameterTypes<T>;\n      status: ToolCallStatus.Executing;\n      result: undefined;\n    }\n  | {\n      name: string;\n      args: MappedParameterTypes<T>;\n      status: ToolCallStatus.Complete;\n      result: string;\n    };\n\nexport type UseFrontendToolArgs<T extends Parameter[] | [] = []> = {\n  available?: \"disabled\" | \"enabled\";\n} & Pick<\n  FrontendAction<T>,\n  \"name\" | \"description\" | \"parameters\" | \"handler\" | \"followUp\" | \"render\"\n>;\n\nexport function useFrontendTool<const T extends Parameter[] = []>(\n  tool: UseFrontendToolArgs<T>,\n  dependencies?: any[],\n) {\n  const { name, description, parameters, render, followUp, available } = tool;\n  const zodParameters = getZodParameters(parameters);\n\n  const renderRef = useRef<typeof render>(render);\n\n  useEffect(() => {\n    renderRef.current = render;\n  }, [render, ...(dependencies ?? [])]);\n\n  const normalizedRender: FrontendToolOptions<T>[\"render\"] | undefined =\n    useMemo(() => {\n      if (typeof render === \"undefined\") {\n        return undefined;\n      }\n\n      return ((args: FrontendToolRenderArgs<T>) => {\n        const currentRender = renderRef.current;\n\n        if (typeof currentRender === \"undefined\") {\n          return null;\n        }\n\n        if (typeof currentRender === \"string\") {\n          return React.createElement(React.Fragment, null, currentRender);\n        }\n\n        const renderArgs = {\n          ...args,\n          result:\n            typeof args.result === \"string\"\n              ? parseJson(args.result, args.result)\n              : args.result,\n        } as ActionRenderProps<T>;\n\n        const rendered = currentRender(renderArgs);\n\n        if (typeof rendered === \"string\") {\n          return React.createElement(React.Fragment, null, rendered);\n        }\n\n        return rendered ?? null;\n      }) as FrontendToolOptions<T>[\"render\"];\n    }, []);\n\n  // Handler ref to avoid stale closures\n  const handlerRef = useRef<typeof tool.handler>(tool.handler);\n\n  useEffect(() => {\n    handlerRef.current = tool.handler;\n  }, [tool.handler, ...(dependencies ?? [])]);\n\n  const normalizedHandler = tool.handler\n    ? (args: MappedParameterTypes<T>) => handlerRef.current?.(args)\n    : undefined;\n\n  useFrontendToolVNext<MappedParameterTypes<T>>({\n    name,\n    description,\n    parameters: zodParameters,\n    handler: normalizedHandler,\n    followUp,\n    render: normalizedRender,\n    available: available === undefined ? undefined : available !== \"disabled\",\n  });\n}\n","import { type Parameter, getZodParameters } from \"@copilotkit/shared\";\nimport { parseJson } from \"@copilotkit/shared\";\nimport { defineToolCallRenderer, useCopilotKit } from \"../v2\";\nimport type React from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport {\n  type ActionRenderProps,\n  type ActionRenderPropsNoArgs,\n  ActionRenderPropsWait,\n  type FrontendAction,\n} from \"../types\";\n\ntype ToolCallRendererDefinition = Parameters<typeof defineToolCallRenderer>[0];\n\nexport type UseRenderToolCallArgs<T extends Parameter[] | [] = []> = Pick<\n  FrontendAction<T>,\n  \"name\" | \"description\" | \"parameters\"\n> & {\n  available?: \"disabled\" | \"enabled\";\n  render: T extends []\n    ? (props: ActionRenderPropsNoArgs<T>) => React.ReactElement\n    : (props: ActionRenderProps<T>) => React.ReactElement;\n};\n\nexport function useRenderToolCall<const T extends Parameter[] | [] = []>(\n  tool: UseRenderToolCallArgs<T>,\n  dependencies?: any[],\n) {\n  const { copilotkit } = useCopilotKit();\n\n  // Track whether we've already added this renderer to avoid duplicates\n  const hasAddedRef = useRef(false);\n\n  useEffect(() => {\n    const { name, parameters, render } = tool;\n    const zodParameters = getZodParameters(parameters);\n\n    const renderToolCall =\n      name === \"*\"\n        ? defineToolCallRenderer({\n            name: \"*\",\n            render: ((args) => {\n              return render({\n                ...args,\n                result: args.result\n                  ? parseJson(args.result, args.result)\n                  : args.result,\n              });\n            }) as ToolCallRendererDefinition[\"render\"],\n          })\n        : defineToolCallRenderer({\n            name,\n            args: zodParameters,\n            render: ((args) => {\n              return render({\n                ...args,\n                result: args.result\n                  ? parseJson(args.result, args.result)\n                  : args.result,\n              });\n            }) as ToolCallRendererDefinition[\"render\"],\n          });\n\n    // Remove any existing renderer with the same name\n    const existingIndex = copilotkit.renderToolCalls.findIndex(\n      (r) => r.name === name,\n    );\n    if (existingIndex !== -1) {\n      copilotkit.renderToolCalls.splice(existingIndex, 1);\n    }\n\n    // Add the new renderer\n    copilotkit.renderToolCalls.push(renderToolCall);\n    hasAddedRef.current = true;\n\n    // Cleanup: remove this renderer when the component unmounts or tool changes\n    return () => {\n      if (hasAddedRef.current) {\n        const index = copilotkit.renderToolCalls.findIndex(\n          (r) => r.name === name,\n        );\n        if (index !== -1) {\n          copilotkit.renderToolCalls.splice(index, 1);\n        }\n        hasAddedRef.current = false;\n      }\n    };\n  }, [tool, ...(dependencies ?? [])]);\n}\n","import {\n  ActionRenderProps,\n  ActionRenderPropsWait,\n  FrontendAction,\n} from \"../types\";\nimport {\n  CopilotKitError,\n  CopilotKitErrorCode,\n  MappedParameterTypes,\n  Parameter,\n  getZodParameters,\n  parseJson,\n} from \"@copilotkit/shared\";\nimport { useHumanInTheLoop as useHumanInTheLoopVNext } from \"../v2\";\nimport { ToolCallStatus } from \"@copilotkit/core\";\nimport React, {\n  ComponentType,\n  FunctionComponent,\n  useEffect,\n  useRef,\n} from \"react\";\n\ntype HumanInTheLoopOptions = Parameters<typeof useHumanInTheLoopVNext>[0];\ntype HumanInTheLoopRender = HumanInTheLoopOptions[\"render\"];\ntype HumanInTheLoopRenderArgs = HumanInTheLoopRender extends (\n  props: infer P,\n) => any\n  ? P\n  : never;\n\nexport type UseHumanInTheLoopArgs<T extends Parameter[] | [] = []> = {\n  available?: \"disabled\" | \"enabled\";\n  render: FrontendAction<T>[\"renderAndWaitForResponse\"];\n  followUp?: FrontendAction<T>[\"followUp\"];\n} & Pick<FrontendAction<T>, \"name\" | \"description\" | \"parameters\">;\n\ntype HitlRendererArgs =\n  | {\n      name: string;\n      description: string;\n      args: Partial<Record<string, unknown>>;\n      status: ToolCallStatus.InProgress;\n      result: undefined;\n      respond: undefined;\n    }\n  | {\n      name: string;\n      description: string;\n