@copilotkit/react-core 1.9.2-next.1 → 1.9.2-next.10

package/dist/hooks/use-coagent-state-render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-coagent-state-render.ts","../../src/context/copilot-context.tsx","../../src/components/toast/toast-provider.tsx"],"sourcesContent":["/**\n * The useCoAgentStateRender hook allows you to render UI or text based components on a Agentic Copilot's state in the chat.\n * This is particularly useful for showing intermediate state or progress during Agentic Copilot operations.\n *\n * ## Usage\n *\n * ### Simple Usage\n *\n * ```tsx\n * import { useCoAgentStateRender } from \"@copilotkit/react-core\";\n *\n * type YourAgentState = {\n *   agent_state_property: string;\n * }\n *\n * useCoAgentStateRender<YourAgentState>({\n *   name: \"basic_agent\",\n *   nodeName: \"optionally_specify_a_specific_node\",\n *   render: ({ status, state, nodeName }) => {\n *     return (\n *       <YourComponent\n *         agentStateProperty={state.agent_state_property}\n *         status={status}\n *         nodeName={nodeName}\n *       />\n *     );\n *   },\n * });\n * ```\n *\n * This allows for you to render UI components or text based on what is happening within the agent.\n *\n * ### Example\n * A great example of this is in our Perplexity Clone where we render the progress of an agent's internet search as it is happening.\n * You can play around with it below or learn how to build it with its [demo](/coagents/videos/perplexity-clone).\n *\n * <Callout type=\"info\">\n *   This example is hosted on Vercel and may take a few seconds to load.\n * </Callout>\n *\n * <iframe src=\"https://examples-coagents-ai-researcher-ui.vercel.app/\" className=\"w-full rounded-lg border h-[700px] my-4\" />\n */\n\nimport { useRef, useContext, useEffect } from \"react\";\nimport { CopilotContext } from \"../context/copilot-context\";\nimport { randomId, CopilotKitAgentDiscoveryError } from \"@copilotkit/shared\";\nimport { CoAgentStateRender } from \"../types/coagent-action\";\nimport { useToast } from \"../components/toast/toast-provider\";\n\n/**\n * This hook is used to render agent state with custom UI components or text. This is particularly\n * useful for showing intermediate state or progress during Agentic Copilot operations.\n * To get started using rendering intermediate state through this hook, checkout the documentation.\n *\n * https://docs.copilotkit.ai/coagents/shared-state/predictive-state-updates\n */\n\n// We implement useCoAgentStateRender dependency handling so that\n// the developer has the option to not provide any dependencies.\n// see useCopilotAction for more details about this approach.\nexport function useCoAgentStateRender<T = any>(\n  action: CoAgentStateRender<T>,\n  dependencies?: any[],\n): void {\n  const {\n    setCoAgentStateRender,\n    removeCoAgentStateRender,\n    coAgentStateRenders,\n    chatComponentsCache,\n    availableAgents,\n  } = useContext(CopilotContext);\n  const idRef = useRef<string>(randomId());\n  const { setBannerError, addToast } = useToast();\n\n  useEffect(() => {\n    if (availableAgents?.length && !availableAgents.some((a) => a.name === action.name)) {\n      const message = `(useCoAgentStateRender): Agent \"${action.name}\" not found. Make sure the agent exists and is properly configured.`;\n\n      // Route to banner instead of toast for consistency\n      const agentError = new CopilotKitAgentDiscoveryError({\n        agentName: action.name,\n        availableAgents: availableAgents.map((a) => ({ name: a.name, id: a.id })),\n      });\n      setBannerError(agentError);\n    }\n  }, [availableAgents]);\n\n  const key = `${action.name}-${action.nodeName || \"global\"}`;\n\n  if (dependencies === undefined) {\n    if (coAgentStateRenders[idRef.current]) {\n      coAgentStateRenders[idRef.current].handler = action.handler as any;\n      if (typeof action.render === \"function\") {\n        if (chatComponentsCache.current !== null) {\n          chatComponentsCache.current.coAgentStateRenders[key] = action.render;\n        }\n      }\n    }\n  }\n\n  useEffect(() => {\n    // Check for duplicates by comparing against all other actions\n    const currentId = idRef.current;\n    const hasDuplicate = Object.entries(coAgentStateRenders).some(([id, otherAction]) => {\n      // Skip comparing with self\n      if (id === currentId) return false;\n\n      // Different agent names are never duplicates\n      if (otherAction.name !== action.name) return false;\n\n      // Same agent names:\n      const hasNodeName = !!action.nodeName;\n      const hasOtherNodeName = !!otherAction.nodeName;\n\n      // If neither has nodeName, they're duplicates\n      if (!hasNodeName && !hasOtherNodeName) return true;\n\n      // If one has nodeName and other doesn't, they're not duplicates\n      if (hasNodeName !== hasOtherNodeName) return false;\n\n      // If both have nodeName, they're duplicates only if the names match\n      return action.nodeName === otherAction.nodeName;\n    });\n\n    if (hasDuplicate) {\n      const message = action.nodeName\n        ? `Found multiple state renders for agent ${action.name} and node ${action.nodeName}. State renders might get overridden`\n        : `Found multiple state renders for agent ${action.name}. State renders might get overridden`;\n\n      addToast({\n        type: \"warning\",\n        message,\n        id: `dup-action-${action.name}`,\n      });\n    }\n  }, [coAgentStateRenders]);\n\n  useEffect(() => {\n    setCoAgentStateRender(idRef.current, action as any);\n    if (chatComponentsCache.current !== null && action.render !== undefined) {\n      chatComponentsCache.current.coAgentStateRenders[key] = action.render;\n    }\n    return () => {\n      removeCoAgentStateRender(idRef.current);\n    };\n  }, [\n    setCoAgentStateRender,\n    removeCoAgentStateRender,\n    action.name,\n    // include render only if it's a string\n    typeof action.render === \"string\" ? action.render : undefined,\n    // dependencies set by the developer\n    ...(dependencies || []),\n  ]);\n}\n","import { CopilotCloudConfig, FunctionCallHandler } from \"@copilotkit/shared\";\nimport {\n  ActionRenderProps,\n  CatchAllActionRenderProps,\n  FrontendAction,\n} from \"../types/frontend-action\";\nimport React from \"react\";\nimport { TreeNodeId, Tree } from \"../hooks/use-tree\";\nimport { DocumentPointer } from \"../types\";\nimport { CopilotChatSuggestionConfiguration } from \"../types/chat-suggestion-configuration\";\nimport { CoAgentStateRender, CoAgentStateRenderProps } from \"../types/coagent-action\";\nimport { CoagentState } from \"../types/coagent-state\";\nimport {\n  CopilotRuntimeClient,\n  ExtensionsInput,\n  ForwardedParametersInput,\n} from \"@copilotkit/runtime-client-gql\";\nimport { Agent } from \"@copilotkit/runtime-client-gql\";\nimport {\n  LangGraphInterruptAction,\n  LangGraphInterruptActionSetter,\n} from \"../types/interrupt-action\";\n\n/**\n * Interface for the configuration of the Copilot API.\n */\nexport interface CopilotApiConfig {\n  /**\n   * The public API key for Copilot Cloud.\n   */\n  publicApiKey?: string;\n\n  /**\n   * The configuration for Copilot Cloud.\n   */\n  cloud?: CopilotCloudConfig;\n\n  /**\n   * The endpoint for the chat API.\n   */\n  chatApiEndpoint: string;\n\n  /**\n   * The endpoint for the Copilot transcribe audio service.\n   */\n  transcribeAudioUrl?: string;\n\n  /**\n   * The endpoint for the Copilot text to speech service.\n   */\n  textToSpeechUrl?: string;\n\n  /**\n   * additional headers to be sent with the request\n   * @default {}\n   * @example\n   * ```\n   * {\n   *   'Authorization': 'Bearer your_token_here'\n   * }\n   * ```\n   */\n  headers: Record<string, string>;\n\n  /**\n   * Custom properties to be sent with the request\n   * @default {}\n   * @example\n   * ```\n   * {\n   *   'user_id': 'user_id'\n   * }\n   * ```\n   */\n  properties?: Record<string, any>;\n\n  /**\n   * Indicates whether the user agent should send or receive cookies from the other domain\n   * in the case of cross-origin requests.\n   */\n  credentials?: RequestCredentials;\n\n  /**\n   * Optional configuration for connecting to Model Context Protocol (MCP) servers.\n   * This is typically derived from the CopilotKitProps and used internally.\n   * @experimental\n   */\n  mcpServers?: Array<{ endpoint: string; apiKey?: string }>;\n}\n\nexport type InChatRenderFunction<TProps = ActionRenderProps<any> | CatchAllActionRenderProps<any>> =\n  (props: TProps) => string | JSX.Element;\nexport type CoagentInChatRenderFunction = (\n  props: CoAgentStateRenderProps<any>,\n) => string | JSX.Element | undefined | null;\n\nexport interface ChatComponentsCache {\n  actions: Record<string, InChatRenderFunction | string>;\n  coAgentStateRenders: Record<string, CoagentInChatRenderFunction | string>;\n}\n\nexport interface AgentSession {\n  agentName: string;\n  threadId?: string;\n  nodeName?: string;\n}\n\nexport interface AuthState {\n  status: \"authenticated\" | \"unauthenticated\";\n  authHeaders: Record<string, string>;\n  userId?: string;\n  metadata?: Record<string, any>;\n}\n\nexport type ActionName = string;\nexport type ContextTree = Tree;\n\nexport interface CopilotContextParams {\n  // function-calling\n  actions: Record<string, FrontendAction<any>>;\n  setAction: (id: string, action: FrontendAction<any>) => void;\n  removeAction: (id: string) => void;\n\n  // coagent actions\n  coAgentStateRenders: Record<string, CoAgentStateRender<any>>;\n  setCoAgentStateRender: (id: string, stateRender: CoAgentStateRender<any>) => void;\n  removeCoAgentStateRender: (id: string) => void;\n\n  chatComponentsCache: React.RefObject<ChatComponentsCache>;\n\n  getFunctionCallHandler: (\n    customEntryPoints?: Record<string, FrontendAction<any>>,\n  ) => FunctionCallHandler;\n\n  // text context\n  addContext: (context: string, parentId?: string, categories?: string[]) => TreeNodeId;\n  removeContext: (id: TreeNodeId) => void;\n  getAllContext: () => Tree;\n  getContextString: (documents: DocumentPointer[], categories: string[]) => string;\n\n  // document context\n  addDocumentContext: (documentPointer: DocumentPointer, categories?: string[]) => TreeNodeId;\n  removeDocumentContext: (documentId: string) => void;\n  getDocumentsContext: (categories: string[]) => DocumentPointer[];\n\n  isLoading: boolean;\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;\n\n  chatSuggestionConfiguration: { [key: string]: CopilotChatSuggestionConfiguration };\n  addChatSuggestionConfiguration: (\n    id: string,\n    suggestion: CopilotChatSuggestionConfiguration,\n  ) => void;\n  removeChatSuggestionConfiguration: (id: string) => void;\n\n  chatInstructions: string;\n  setChatInstructions: React.Dispatch<React.SetStateAction<string>>;\n\n  additionalInstructions?: string[];\n  setAdditionalInstructions: React.Dispatch<React.SetStateAction<string[]>>;\n\n  // api endpoints\n  copilotApiConfig: CopilotApiConfig;\n\n  showDevConsole: boolean;\n\n  // agents\n  coagentStates: Record<string, CoagentState>;\n  setCoagentStates: React.Dispatch<React.SetStateAction<Record<string, CoagentState>>>;\n  coagentStatesRef: React.RefObject<Record<string, CoagentState>>;\n  setCoagentStatesWithRef: (\n    value:\n      | Record<string, CoagentState>\n      | ((prev: Record<string, CoagentState>) => Record<string, CoagentState>),\n  ) => void;\n\n  agentSession: AgentSession | null;\n  setAgentSession: React.Dispatch<React.SetStateAction<AgentSession | null>>;\n\n  agentLock: string | null;\n\n  threadId: string;\n  setThreadId: React.Dispatch<React.SetStateAction<string>>;\n\n  runId: string | null;\n  setRunId: React.Dispatch<React.SetStateAction<string | null>>;\n\n  // The chat abort controller can be used to stop generation globally,\n  // i.e. when using `stop()` from `useChat`\n  chatAbortControllerRef: React.MutableRefObject<AbortController | null>;\n\n  // runtime\n  runtimeClient: CopilotRuntimeClient;\n\n  /**\n   * The forwarded parameters to use for the task.\n   */\n  forwardedParameters?: Pick<ForwardedParametersInput, \"temperature\">;\n  availableAgents: Agent[];\n\n  /**\n   * The auth states for the CopilotKit.\n   */\n  authStates_c?: Record<ActionName, AuthState>;\n  setAuthStates_c?: React.Dispatch<React.SetStateAction<Record<ActionName, AuthState>>>;\n\n  /**\n   * The auth config for the CopilotKit.\n   */\n  authConfig_c?: {\n    SignInComponent: React.ComponentType<{\n      onSignInComplete: (authState: AuthState) => void;\n    }>;\n  };\n\n  extensions: ExtensionsInput;\n  setExtensions: React.Dispatch<React.SetStateAction<ExtensionsInput>>;\n  langGraphInterruptAction: LangGraphInterruptAction | null;\n  setLangGraphInterruptAction: LangGraphInterruptActionSetter;\n  removeLangGraphInterruptAction: () => void;\n}\n\nconst emptyCopilotContext: CopilotContextParams = {\n  actions: {},\n  setAction: () => {},\n  removeAction: () => {},\n\n  coAgentStateRenders: {},\n  setCoAgentStateRender: () => {},\n  removeCoAgentStateRender: () => {},\n\n  chatComponentsCache: { current: { actions: {}, coAgentStateRenders: {} } },\n  getContextString: (documents: DocumentPointer[], categories: string[]) =>\n    returnAndThrowInDebug(\"\"),\n  addContext: () => \"\",\n  removeContext: () => {},\n  getAllContext: () => [],\n\n  getFunctionCallHandler: () => returnAndThrowInDebug(async () => {}),\n\n  isLoading: false,\n  setIsLoading: () => returnAndThrowInDebug(false),\n\n  chatInstructions: \"\",\n  setChatInstructions: () => returnAndThrowInDebug(\"\"),\n\n  additionalInstructions: [],\n  setAdditionalInstructions: () => returnAndThrowInDebug([]),\n\n  getDocumentsContext: (categories: string[]) => returnAndThrowInDebug([]),\n  addDocumentContext: () => returnAndThrowInDebug(\"\"),\n  removeDocumentContext: () => {},\n  runtimeClient: {} as any,\n\n  copilotApiConfig: new (class implements CopilotApiConfig {\n    get chatApiEndpoint(): string {\n      throw new Error(\"Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!\");\n    }\n\n    get headers(): Record<string, string> {\n      return {};\n    }\n    get body(): Record<string, any> {\n      return {};\n    }\n  })(),\n\n  chatSuggestionConfiguration: {},\n  addChatSuggestionConfiguration: () => {},\n  removeChatSuggestionConfiguration: () => {},\n  showDevConsole: false,\n  coagentStates: {},\n  setCoagentStates: () => {},\n  coagentStatesRef: { current: {} },\n  setCoagentStatesWithRef: () => {},\n  agentSession: null,\n  setAgentSession: () => {},\n  forwardedParameters: {},\n  agentLock: null,\n  threadId: \"\",\n  setThreadId: () => {},\n  runId: null,\n  setRunId: () => {},\n  chatAbortControllerRef: { current: null },\n  availableAgents: [],\n  extensions: {},\n  setExtensions: () => {},\n  langGraphInterruptAction: null,\n  setLangGraphInterruptAction: () => null,\n  removeLangGraphInterruptAction: () => null,\n};\n\nexport const CopilotContext = React.createContext<CopilotContextParams>(emptyCopilotContext);\n\nexport function useCopilotContext(): CopilotContextParams {\n  const context = React.useContext(CopilotContext);\n  if (context === emptyCopilotContext) {\n    throw new Error(\"Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!\");\n  }\n  return context;\n}\n\nfunction returnAndThrowInDebug<T>(_value: T): T {\n  throw new Error(\"Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!\");\n}\n","import { GraphQLError } from \"@copilotkit/runtime-client-gql\";\nimport React, { createContext, useContext, useState, useCallback } from \"react\";\nimport { ErrorToast } from \"../error-boundary/error-utils\";\nimport { PartialBy, CopilotKitError, CopilotKitErrorCode, Severity } from \"@copilotkit/shared\";\nimport { renderCopilotKitUsage } from \"../usage-banner\";\n\ninterface Toast {\n  id: string;\n  message: string | React.ReactNode;\n  type: \"info\" | \"success\" | \"warning\" | \"error\";\n  duration?: number;\n}\n\ninterface ToastContextValue {\n  toasts: Toast[];\n  addToast: (toast: PartialBy<Toast, \"id\">) => void;\n  addGraphQLErrorsToast: (errors: GraphQLError[]) => void;\n  removeToast: (id: string) => void;\n  enabled: boolean;\n  // Banner management\n  bannerError: CopilotKitError | null;\n  setBannerError: (error: CopilotKitError | null) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | undefined>(undefined);\n\n// Helper functions for error banner styling\ntype ErrorSeverity = \"critical\" | \"warning\" | \"info\";\n\ninterface ErrorColors {\n  background: string;\n  border: string;\n  text: string;\n  icon: string;\n}\n\nfunction getErrorSeverity(error: CopilotKitError): ErrorSeverity {\n  // Use structured error severity if available\n  if (error.severity) {\n    switch (error.severity) {\n      case Severity.CRITICAL:\n        return \"critical\";\n      case Severity.WARNING:\n        return \"warning\";\n      case Severity.INFO:\n        return \"info\";\n      default:\n        return \"info\";\n    }\n  }\n\n  // Fallback: Check for API key errors which should always be critical\n  const message = error.message.toLowerCase();\n  if (\n    message.includes(\"api key\") ||\n    message.includes(\"401\") ||\n    message.includes(\"unauthorized\") ||\n    message.includes(\"authentication\") ||\n    message.includes(\"incorrect api key\")\n  ) {\n    return \"critical\";\n  }\n\n  // Default to info level\n  return \"info\";\n}\n\nfunction getErrorColors(severity: ErrorSeverity): ErrorColors {\n  switch (severity) {\n    case \"critical\":\n      return {\n        background: \"#fee2e2\",\n        border: \"#dc2626\",\n        text: \"#7f1d1d\",\n        icon: \"#dc2626\",\n      };\n    case \"warning\":\n      return {\n        background: \"#fef3c7\",\n        border: \"#d97706\",\n        text: \"#78350f\",\n        icon: \"#d97706\",\n      };\n    case \"info\":\n      return {\n        background: \"#dbeafe\",\n        border: \"#2563eb\",\n        text: \"#1e3a8a\",\n        icon: \"#2563eb\",\n      };\n  }\n}\n\nexport function useToast() {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error(\"useToast must be used within a ToastProvider\");\n  }\n  return context;\n}\n\nexport function ToastProvider({\n  enabled,\n  children,\n}: {\n  enabled: boolean;\n  children: React.ReactNode;\n}) {\n  const [toasts, setToasts] = useState<Toast[]>([]);\n  const [bannerError, setBannerErrorState] = useState<CopilotKitError | null>(null);\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const addToast = useCallback(\n    (toast: PartialBy<Toast, \"id\">) => {\n      // Respect the enabled flag for ALL toasts\n      if (!enabled) {\n        return;\n      }\n\n      const id = toast.id ?? Math.random().toString(36).substring(2, 9);\n\n      setToasts((currentToasts) => {\n        if (currentToasts.find((toast) => toast.id === id)) return currentToasts;\n        return [...currentToasts, { ...toast, id }];\n      });\n\n      if (toast.duration) {\n        setTimeout(() => {\n          removeToast(id);\n        }, toast.duration);\n      }\n    },\n    [enabled, removeToast],\n  );\n\n  const setBannerError = useCallback(\n    (error: CopilotKitError | null) => {\n      // Respect the enabled flag for ALL errors\n      if (!enabled && error !== null) {\n        return;\n      }\n      setBannerErrorState(error);\n    },\n    [enabled],\n  );\n\n  const addGraphQLErrorsToast = useCallback((errors: GraphQLError[]) => {\n    // DEPRECATED: All errors now route to banners for consistency\n    console.warn(\"addGraphQLErrorsToast is deprecated. All errors now show as banners.\");\n    // Function kept for backward compatibility - does nothing\n  }, []);\n\n  const value = {\n    toasts,\n    addToast,\n    addGraphQLErrorsToast,\n    removeToast,\n    enabled,\n    bannerError,\n    setBannerError,\n  };\n\n  return (\n    <ToastContext.Provider value={value}>\n      {/* Banner Error Display */}\n      {bannerError &&\n        (() => {\n          const severity = getErrorSeverity(bannerError);\n          const colors = getErrorColors(severity);\n\n          return (\n            <div\n              style={{\n                position: \"fixed\",\n                bottom: \"20px\",\n                left: \"50%\",\n                transform: \"translateX(-50%)\",\n                zIndex: 9999,\n                backgroundColor: colors.background,\n                border: `1px solid ${colors.border}`,\n                borderLeft: `4px solid ${colors.border}`,\n                borderRadius: \"8px\",\n                padding: \"10px 14px\",\n                fontSize: \"13px\",\n                boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.15)\",\n                backdropFilter: \"blur(8px)\",\n                maxWidth: \"500px\",\n                minWidth: \"350px\",\n              }}\n            >\n              <div\n                style={{\n                  display: \"flex\",\n                  justifyContent: \"space-between\",\n                  alignItems: \"center\",\n                  gap: \"10px\",\n                }}\n              >\n                <div style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\", flex: 1 }}>\n                  <div\n                    style={{\n                      width: \"12px\",\n                      height: \"12px\",\n                      borderRadius: \"50%\",\n                      backgroundColor: colors.border,\n                      flexShrink: 0,\n                    }}\n                  />\n                  <div style={{ display: \"flex\", alignItems: \"center\", gap: \"10px\", flex: 1 }}>\n                    <div\n                      style={{\n                        color: colors.text,\n                        lineHeight: \"1.4\",\n                        fontWeight: \"400\",\n                        fontSize: \"13px\",\n                        flex: 1,\n                        wordWrap: \"break-word\",\n                        overflowWrap: \"break-word\",\n                        hyphens: \"auto\",\n                      }}\n                    >\n                      {(() => {\n                        const message = bannerError.message;\n                        const markdownLinkRegex = /\\[([^\\]]+)\\]\\(([^)]+)\\)/g;\n                        const plainUrlRegex = /(https?:\\/\\/[^\\s)]+)/g;\n\n                        // Remove URLs and markdown links from the message, keep just the text\n                        let cleanMessage = message\n                          .replace(markdownLinkRegex, \"\") // Remove [text](url)\n                          .replace(plainUrlRegex, \"\") // Remove plain URLs\n                          .replace(/See more:\\s*/g, \"\") // Remove \"See more:\" text\n                          .replace(/\\s+/g, \" \") // Clean up extra spaces\n                          .trim();\n\n                        // Truncate very long messages for better display\n                        if (cleanMessage.length > 120) {\n                          cleanMessage = cleanMessage.substring(0, 117) + \"...\";\n                        }\n\n                        return cleanMessage;\n                      })()}\n                    </div>\n\n                    {(() => {\n                      const message = bannerError.message;\n                      const markdownLinkRegex = /\\[([^\\]]+)\\]\\(([^)]+)\\)/g;\n                      const plainUrlRegex = /(https?:\\/\\/[^\\s)]+)/g;\n\n                      // Extract the first URL found\n                      let url = null;\n                      let buttonText = \"See More\";\n\n                      // Check for markdown links first\n                      const markdownMatch = markdownLinkRegex.exec(message);\n                      if (markdownMatch) {\n                        url = markdownMatch[2];\n                        buttonText = \"See More\";\n                      } else {\n                        // Check for plain URLs\n                        const urlMatch = plainUrlRegex.exec(message);\n                        if (urlMatch) {\n                          url = urlMatch[0];\n                          buttonText = \"See More\";\n                        }\n                      }\n\n                      if (!url) return null;\n\n                      return (\n                        <button\n                          onClick={() => window.open(url, \"_blank\", \"noopener,noreferrer\")}\n                          style={{\n                            background: colors.border,\n                            color: \"white\",\n                            border: \"none\",\n                            borderRadius: \"5px\",\n                            padding: \"4px 10px\",\n                            fontSize: \"11px\",\n                            fontWeight: \"500\",\n                            cursor: \"pointer\",\n                            transition: \"all 0.2s ease\",\n                            flexShrink: 0,\n                          }}\n                          onMouseEnter={(e) => {\n                            e.currentTarget.style.opacity = \"0.9\";\n                            e.currentTarget.style.transform = \"translateY(-1px)\";\n                          }}\n                          onMouseLeave={(e) => {\n                            e.currentTarget.style.opacity = \"1\";\n                            e.currentTarget.style.transform = \"translateY(0)\";\n                          }}\n                        >\n                          {buttonText}\n                        </button>\n                      );\n                    })()}\n                  </div>\n                </div>\n                <button\n                  onClick={() => setBannerError(null)}\n                  style={{\n                    background: \"transparent\",\n                    border: \"none\",\n                    color: colors.text,\n                    cursor: \"pointer\",\n                    padding: \"2px\",\n                    borderRadius: \"3px\",\n                    fontSize: \"14px\",\n                    lineHeight: \"1\",\n                    opacity: 0.6,\n                    transition: \"all 0.2s ease\",\n                    flexShrink: 0,\n                  }}\n                  title=\"Dismiss\"\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.opacity = \"1\";\n                    e.currentTarget.style.background = \"rgba(0, 0, 0, 0.05)\";\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.opacity = \"0.6\";\n                    e.currentTarget.style.background = \"transparent\";\n                  }}\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          );\n        })()}\n\n      {/* Toast Display - Deprecated: All errors now show as banners */}\n      {children}\n    </ToastContext.Provider>\n  );\n}\n\n// Toast component removed - all errors now show as banners for consistency\n"],"mappings":"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","names":["import_react","React","import_shared","import_react"]}
+{"version":3,"sources":["../../src/hooks/use-coagent-state-render.ts","../../src/context/copilot-context.tsx","../../src/components/toast/toast-provider.tsx"],"sourcesContent":["/**\n * The useCoAgentStateRender hook allows you to render UI or text based components on a Agentic Copilot's state in the chat.\n * This is particularly useful for showing intermediate state or progress during Agentic Copilot operations.\n *\n * ## Usage\n *\n * ### Simple Usage\n *\n * ```tsx\n * import { useCoAgentStateRender } from \"@copilotkit/react-core\";\n *\n * type YourAgentState = {\n *   agent_state_property: string;\n * }\n *\n * useCoAgentStateRender<YourAgentState>({\n *   name: \"basic_agent\",\n *   nodeName: \"optionally_specify_a_specific_node\",\n *   render: ({ status, state, nodeName }) => {\n *     return (\n *       <YourComponent\n *         agentStateProperty={state.agent_state_property}\n *         status={status}\n *         nodeName={nodeName}\n *       />\n *     );\n *   },\n * });\n * ```\n *\n * This allows for you to render UI components or text based on what is happening within the agent.\n *\n * ### Example\n * A great example of this is in our Perplexity Clone where we render the progress of an agent's internet search as it is happening.\n * You can play around with it below or learn how to build it with its [demo](/coagents/videos/perplexity-clone).\n *\n * <Callout type=\"info\">\n *   This example is hosted on Vercel and may take a few seconds to load.\n * </Callout>\n *\n * <iframe src=\"https://examples-coagents-ai-researcher-ui.vercel.app/\" className=\"w-full rounded-lg border h-[700px] my-4\" />\n */\n\nimport { useRef, useContext, useEffect } from \"react\";\nimport { CopilotContext } from \"../context/copilot-context\";\nimport { randomId, CopilotKitAgentDiscoveryError } from \"@copilotkit/shared\";\nimport { CoAgentStateRender } from \"../types/coagent-action\";\nimport { useToast } from \"../components/toast/toast-provider\";\n\n/**\n * This hook is used to render agent state with custom UI components or text. This is particularly\n * useful for showing intermediate state or progress during Agentic Copilot operations.\n * To get started using rendering intermediate state through this hook, checkout the documentation.\n *\n * https://docs.copilotkit.ai/coagents/shared-state/predictive-state-updates\n */\n\n// We implement useCoAgentStateRender dependency handling so that\n// the developer has the option to not provide any dependencies.\n// see useCopilotAction for more details about this approach.\nexport function useCoAgentStateRender<T = any>(\n  action: CoAgentStateRender<T>,\n  dependencies?: any[],\n): void {\n  const {\n    setCoAgentStateRender,\n    removeCoAgentStateRender,\n    coAgentStateRenders,\n    chatComponentsCache,\n    availableAgents,\n  } = useContext(CopilotContext);\n  const idRef = useRef<string>(randomId());\n  const { setBannerError, addToast } = useToast();\n\n  useEffect(() => {\n    if (availableAgents?.length && !availableAgents.some((a) => a.name === action.name)) {\n      const message = `(useCoAgentStateRender): Agent \"${action.name}\" not found. Make sure the agent exists and is properly configured.`;\n\n      // Route to banner instead of toast for consistency\n      const agentError = new CopilotKitAgentDiscoveryError({\n        agentName: action.name,\n        availableAgents: availableAgents.map((a) => ({ name: a.name, id: a.id })),\n      });\n      setBannerError(agentError);\n    }\n  }, [availableAgents]);\n\n  const key = `${action.name}-${action.nodeName || \"global\"}`;\n\n  if (dependencies === undefined) {\n    if (coAgentStateRenders[idRef.current]) {\n      coAgentStateRenders[idRef.current].handler = action.handler as any;\n      if (typeof action.render === \"function\") {\n        if (chatComponentsCache.current !== null) {\n          chatComponentsCache.current.coAgentStateRenders[key] = action.render;\n        }\n      }\n    }\n  }\n\n  useEffect(() => {\n    // Check for duplicates by comparing against all other actions\n    const currentId = idRef.current;\n    const hasDuplicate = Object.entries(coAgentStateRenders).some(([id, otherAction]) => {\n      // Skip comparing with self\n      if (id === currentId) return false;\n\n      // Different agent names are never duplicates\n      if (otherAction.name !== action.name) return false;\n\n      // Same agent names:\n      const hasNodeName = !!action.nodeName;\n      const hasOtherNodeName = !!otherAction.nodeName;\n\n      // If neither has nodeName, they're duplicates\n      if (!hasNodeName && !hasOtherNodeName) return true;\n\n      // If one has nodeName and other doesn't, they're not duplicates\n      if (hasNodeName !== hasOtherNodeName) return false;\n\n      // If both have nodeName, they're duplicates only if the names match\n      return action.nodeName === otherAction.nodeName;\n    });\n\n    if (hasDuplicate) {\n      const message = action.nodeName\n        ? `Found multiple state renders for agent ${action.name} and node ${action.nodeName}. State renders might get overridden`\n        : `Found multiple state renders for agent ${action.name}. State renders might get overridden`;\n\n      addToast({\n        type: \"warning\",\n        message,\n        id: `dup-action-${action.name}`,\n      });\n    }\n  }, [coAgentStateRenders]);\n\n  useEffect(() => {\n    setCoAgentStateRender(idRef.current, action as any);\n    if (chatComponentsCache.current !== null && action.render !== undefined) {\n      chatComponentsCache.current.coAgentStateRenders[key] = action.render;\n    }\n    return () => {\n      removeCoAgentStateRender(idRef.current);\n    };\n  }, [\n    setCoAgentStateRender,\n    removeCoAgentStateRender,\n    action.name,\n    // include render only if it's a string\n    typeof action.render === \"string\" ? action.render : undefined,\n    // dependencies set by the developer\n    ...(dependencies || []),\n  ]);\n}\n","import { CopilotCloudConfig, FunctionCallHandler, CopilotTraceHandler } from \"@copilotkit/shared\";\nimport {\n  ActionRenderProps,\n  CatchAllActionRenderProps,\n  FrontendAction,\n} from \"../types/frontend-action\";\nimport React from \"react\";\nimport { TreeNodeId, Tree } from \"../hooks/use-tree\";\nimport { DocumentPointer } from \"../types\";\nimport { CopilotChatSuggestionConfiguration } from \"../types/chat-suggestion-configuration\";\nimport { CoAgentStateRender, CoAgentStateRenderProps } from \"../types/coagent-action\";\nimport { CoagentState } from \"../types/coagent-state\";\nimport {\n  CopilotRuntimeClient,\n  ExtensionsInput,\n  ForwardedParametersInput,\n} from \"@copilotkit/runtime-client-gql\";\nimport { Agent } from \"@copilotkit/runtime-client-gql\";\nimport {\n  LangGraphInterruptAction,\n  LangGraphInterruptActionSetter,\n} from \"../types/interrupt-action\";\n\n/**\n * Interface for the configuration of the Copilot API.\n */\nexport interface CopilotApiConfig {\n  /**\n   * The public API key for Copilot Cloud.\n   */\n  publicApiKey?: string;\n\n  /**\n   * The configuration for Copilot Cloud.\n   */\n  cloud?: CopilotCloudConfig;\n\n  /**\n   * The endpoint for the chat API.\n   */\n  chatApiEndpoint: string;\n\n  /**\n   * The endpoint for the Copilot transcribe audio service.\n   */\n  transcribeAudioUrl?: string;\n\n  /**\n   * The endpoint for the Copilot text to speech service.\n   */\n  textToSpeechUrl?: string;\n\n  /**\n   * additional headers to be sent with the request\n   * @default {}\n   * @example\n   * ```\n   * {\n   *   'Authorization': 'Bearer your_token_here'\n   * }\n   * ```\n   */\n  headers: Record<string, string>;\n\n  /**\n   * Custom properties to be sent with the request\n   * @default {}\n   * @example\n   * ```\n   * {\n   *   'user_id': 'user_id'\n   * }\n   * ```\n   */\n  properties?: Record<string, any>;\n\n  /**\n   * Indicates whether the user agent should send or receive cookies from the other domain\n   * in the case of cross-origin requests.\n   */\n  credentials?: RequestCredentials;\n\n  /**\n   * Optional configuration for connecting to Model Context Protocol (MCP) servers.\n   * This is typically derived from the CopilotKitProps and used internally.\n   * @experimental\n   */\n  mcpServers?: Array<{ endpoint: string; apiKey?: string }>;\n}\n\nexport type InChatRenderFunction<TProps = ActionRenderProps<any> | CatchAllActionRenderProps<any>> =\n  (props: TProps) => string | JSX.Element;\nexport type CoagentInChatRenderFunction = (\n  props: CoAgentStateRenderProps<any>,\n) => string | JSX.Element | undefined | null;\n\nexport interface ChatComponentsCache {\n  actions: Record<string, InChatRenderFunction | string>;\n  coAgentStateRenders: Record<string, CoagentInChatRenderFunction | string>;\n}\n\nexport interface AgentSession {\n  agentName: string;\n  threadId?: string;\n  nodeName?: string;\n}\n\nexport interface AuthState {\n  status: \"authenticated\" | \"unauthenticated\";\n  authHeaders: Record<string, string>;\n  userId?: string;\n  metadata?: Record<string, any>;\n}\n\nexport type ActionName = string;\nexport type ContextTree = Tree;\n\nexport interface CopilotContextParams {\n  // function-calling\n  actions: Record<string, FrontendAction<any>>;\n  setAction: (id: string, action: FrontendAction<any>) => void;\n  removeAction: (id: string) => void;\n\n  // coagent actions\n  coAgentStateRenders: Record<string, CoAgentStateRender<any>>;\n  setCoAgentStateRender: (id: string, stateRender: CoAgentStateRender<any>) => void;\n  removeCoAgentStateRender: (id: string) => void;\n\n  chatComponentsCache: React.RefObject<ChatComponentsCache>;\n\n  getFunctionCallHandler: (\n    customEntryPoints?: Record<string, FrontendAction<any>>,\n  ) => FunctionCallHandler;\n\n  // text context\n  addContext: (context: string, parentId?: string, categories?: string[]) => TreeNodeId;\n  removeContext: (id: TreeNodeId) => void;\n  getAllContext: () => Tree;\n  getContextString: (documents: DocumentPointer[], categories: string[]) => string;\n\n  // document context\n  addDocumentContext: (documentPointer: DocumentPointer, categories?: string[]) => TreeNodeId;\n  removeDocumentContext: (documentId: string) => void;\n  getDocumentsContext: (categories: string[]) => DocumentPointer[];\n\n  isLoading: boolean;\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;\n\n  chatSuggestionConfiguration: { [key: string]: CopilotChatSuggestionConfiguration };\n  addChatSuggestionConfiguration: (\n    id: string,\n    suggestion: CopilotChatSuggestionConfiguration,\n  ) => void;\n  removeChatSuggestionConfiguration: (id: string) => void;\n\n  chatInstructions: string;\n  setChatInstructions: React.Dispatch<React.SetStateAction<string>>;\n\n  additionalInstructions?: string[];\n  setAdditionalInstructions: React.Dispatch<React.SetStateAction<string[]>>;\n\n  // api endpoints\n  copilotApiConfig: CopilotApiConfig;\n\n  showDevConsole: boolean;\n\n  // agents\n  coagentStates: Record<string, CoagentState>;\n  setCoagentStates: React.Dispatch<React.SetStateAction<Record<string, CoagentState>>>;\n  coagentStatesRef: React.RefObject<Record<string, CoagentState>>;\n  setCoagentStatesWithRef: (\n    value:\n      | Record<string, CoagentState>\n      | ((prev: Record<string, CoagentState>) => Record<string, CoagentState>),\n  ) => void;\n\n  agentSession: AgentSession | null;\n  setAgentSession: React.Dispatch<React.SetStateAction<AgentSession | null>>;\n\n  agentLock: string | null;\n\n  threadId: string;\n  setThreadId: React.Dispatch<React.SetStateAction<string>>;\n\n  runId: string | null;\n  setRunId: React.Dispatch<React.SetStateAction<string | null>>;\n\n  // The chat abort controller can be used to stop generation globally,\n  // i.e. when using `stop()` from `useChat`\n  chatAbortControllerRef: React.MutableRefObject<AbortController | null>;\n\n  // runtime\n  runtimeClient: CopilotRuntimeClient;\n\n  /**\n   * The forwarded parameters to use for the task.\n   */\n  forwardedParameters?: Pick<ForwardedParametersInput, \"temperature\">;\n  availableAgents: Agent[];\n\n  /**\n   * The auth states for the CopilotKit.\n   */\n  authStates_c?: Record<ActionName, AuthState>;\n  setAuthStates_c?: React.Dispatch<React.SetStateAction<Record<ActionName, AuthState>>>;\n\n  /**\n   * The auth config for the CopilotKit.\n   */\n  authConfig_c?: {\n    SignInComponent: React.ComponentType<{\n      onSignInComplete: (authState: AuthState) => void;\n    }>;\n  };\n\n  extensions: ExtensionsInput;\n  setExtensions: React.Dispatch<React.SetStateAction<ExtensionsInput>>;\n  langGraphInterruptAction: LangGraphInterruptAction | null;\n  setLangGraphInterruptAction: LangGraphInterruptActionSetter;\n  removeLangGraphInterruptAction: () => void;\n\n  /**\n   * Optional trace handler for comprehensive debugging and observability.\n   */\n  onTrace?: CopilotTraceHandler;\n}\n\nconst emptyCopilotContext: CopilotContextParams = {\n  actions: {},\n  setAction: () => {},\n  removeAction: () => {},\n\n  coAgentStateRenders: {},\n  setCoAgentStateRender: () => {},\n  removeCoAgentStateRender: () => {},\n\n  chatComponentsCache: { current: { actions: {}, coAgentStateRenders: {} } },\n  getContextString: (documents: DocumentPointer[], categories: string[]) =>\n    returnAndThrowInDebug(\"\"),\n  addContext: () => \"\",\n  removeContext: () => {},\n  getAllContext: () => [],\n\n  getFunctionCallHandler: () => returnAndThrowInDebug(async () => {}),\n\n  isLoading: false,\n  setIsLoading: () => returnAndThrowInDebug(false),\n\n  chatInstructions: \"\",\n  setChatInstructions: () => returnAndThrowInDebug(\"\"),\n\n  additionalInstructions: [],\n  setAdditionalInstructions: () => returnAndThrowInDebug([]),\n\n  getDocumentsContext: (categories: string[]) => returnAndThrowInDebug([]),\n  addDocumentContext: () => returnAndThrowInDebug(\"\"),\n  removeDocumentContext: () => {},\n  runtimeClient: {} as any,\n\n  copilotApiConfig: new (class implements CopilotApiConfig {\n    get chatApiEndpoint(): string {\n      throw new Error(\"Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!\");\n    }\n\n    get headers(): Record<string, string> {\n      return {};\n    }\n    get body(): Record<string, any> {\n      return {};\n    }\n  })(),\n\n  chatSuggestionConfiguration: {},\n  addChatSuggestionConfiguration: () => {},\n  removeChatSuggestionConfiguration: () => {},\n  showDevConsole: false,\n  coagentStates: {},\n  setCoagentStates: () => {},\n  coagentStatesRef: { current: {} },\n  setCoagentStatesWithRef: () => {},\n  agentSession: null,\n  setAgentSession: () => {},\n  forwardedParameters: {},\n  agentLock: null,\n  threadId: \"\",\n  setThreadId: () => {},\n  runId: null,\n  setRunId: () => {},\n  chatAbortControllerRef: { current: null },\n  availableAgents: [],\n  extensions: {},\n  setExtensions: () => {},\n  langGraphInterruptAction: null,\n  setLangGraphInterruptAction: () => null,\n  removeLangGraphInterruptAction: () => null,\n  onTrace: undefined,\n};\n\nexport const CopilotContext = React.createContext<CopilotContextParams>(emptyCopilotContext);\n\nexport function useCopilotContext(): CopilotContextParams {\n  const context = React.useContext(CopilotContext);\n  if (context === emptyCopilotContext) {\n    throw new Error(\"Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!\");\n  }\n  return context;\n}\n\nfunction returnAndThrowInDebug<T>(_value: T): T {\n  throw new Error(\"Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!\");\n}\n","import { GraphQLError } from \"@copilotkit/runtime-client-gql\";\nimport React, { createContext, useContext, useState, useCallback } from \"react\";\nimport { ErrorToast } from \"../error-boundary/error-utils\";\nimport { PartialBy, CopilotKitError, CopilotKitErrorCode, Severity } from \"@copilotkit/shared\";\nimport { renderCopilotKitUsage } from \"../usage-banner\";\n\ninterface Toast {\n  id: string;\n  message: string | React.ReactNode;\n  type: \"info\" | \"success\" | \"warning\" | \"error\";\n  duration?: number;\n}\n\ninterface ToastContextValue {\n  toasts: Toast[];\n  addToast: (toast: PartialBy<Toast, \"id\">) => void;\n  addGraphQLErrorsToast: (errors: GraphQLError[]) => void;\n  removeToast: (id: string) => void;\n  enabled: boolean;\n  // Banner management\n  bannerError: CopilotKitError | null;\n  setBannerError: (error: CopilotKitError | null) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | undefined>(undefined);\n\n// Helper functions for error banner styling\ntype ErrorSeverity = \"critical\" | \"warning\" | \"info\";\n\ninterface ErrorColors {\n  background: string;\n  border: string;\n  text: string;\n  icon: string;\n}\n\nfunction getErrorSeverity(error: CopilotKitError): ErrorSeverity {\n  // Use structured error severity if available\n  if (error.severity) {\n    switch (error.severity) {\n      case Severity.CRITICAL:\n        return \"critical\";\n      case Severity.WARNING:\n        return \"warning\";\n      case Severity.INFO:\n        return \"info\";\n      default:\n        return \"info\";\n    }\n  }\n\n  // Fallback: Check for API key errors which should always be critical\n  const message = error.message.toLowerCase();\n  if (\n    message.includes(\"api key\") ||\n    message.includes(\"401\") ||\n    message.includes(\"unauthorized\") ||\n    message.includes(\"authentication\") ||\n    message.includes(\"incorrect api key\")\n  ) {\n    return \"critical\";\n  }\n\n  // Default to info level\n  return \"info\";\n}\n\nfunction getErrorColors(severity: ErrorSeverity): ErrorColors {\n  switch (severity) {\n    case \"critical\":\n      return {\n        background: \"#fee2e2\",\n        border: \"#dc2626\",\n        text: \"#7f1d1d\",\n        icon: \"#dc2626\",\n      };\n    case \"warning\":\n      return {\n        background: \"#fef3c7\",\n        border: \"#d97706\",\n        text: \"#78350f\",\n        icon: \"#d97706\",\n      };\n    case \"info\":\n      return {\n        background: \"#dbeafe\",\n        border: \"#2563eb\",\n        text: \"#1e3a8a\",\n        icon: \"#2563eb\",\n      };\n  }\n}\n\nexport function useToast() {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error(\"useToast must be used within a ToastProvider\");\n  }\n  return context;\n}\n\nexport function ToastProvider({\n  enabled,\n  children,\n}: {\n  enabled: boolean;\n  children: React.ReactNode;\n}) {\n  const [toasts, setToasts] = useState<Toast[]>([]);\n  const [bannerError, setBannerErrorState] = useState<CopilotKitError | null>(null);\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const addToast = useCallback(\n    (toast: PartialBy<Toast, \"id\">) => {\n      // Respect the enabled flag for ALL toasts\n      if (!enabled) {\n        return;\n      }\n\n      const id = toast.id ?? Math.random().toString(36).substring(2, 9);\n\n      setToasts((currentToasts) => {\n        if (currentToasts.find((toast) => toast.id === id)) return currentToasts;\n        return [...currentToasts, { ...toast, id }];\n      });\n\n      if (toast.duration) {\n        setTimeout(() => {\n          removeToast(id);\n        }, toast.duration);\n      }\n    },\n    [enabled, removeToast],\n  );\n\n  const setBannerError = useCallback(\n    (error: CopilotKitError | null) => {\n      // Respect the enabled flag for ALL errors\n      if (!enabled && error !== null) {\n        return;\n      }\n      setBannerErrorState(error);\n    },\n    [enabled],\n  );\n\n  const addGraphQLErrorsToast = useCallback((errors: GraphQLError[]) => {\n    // DEPRECATED: All errors now route to banners for consistency\n    console.warn(\"addGraphQLErrorsToast is deprecated. All errors now show as banners.\");\n    // Function kept for backward compatibility - does nothing\n  }, []);\n\n  const value = {\n    toasts,\n    addToast,\n    addGraphQLErrorsToast,\n    removeToast,\n    enabled,\n    bannerError,\n    setBannerError,\n  };\n\n  return (\n    <ToastContext.Provider value={value}>\n      {/* Banner Error Display */}\n      {bannerError &&\n        (() => {\n          const severity = getErrorSeverity(bannerError);\n          const colors = getErrorColors(severity);\n\n          return (\n            <div\n              style={{\n                position: \"fixed\",\n                bottom: \"20px\",\n                left: \"50%\",\n                transform: \"translateX(-50%)\",\n                zIndex: 9999,\n                backgroundColor: colors.background,\n                border: `1px solid ${colors.border}`,\n                borderLeft: `4px solid ${colors.border}`,\n                borderRadius: \"8px\",\n                padding: \"12px 16px\",\n                fontSize: \"13px\",\n                boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.15)\",\n                backdropFilter: \"blur(8px)\",\n                maxWidth: \"min(90vw, 700px)\",\n                width: \"100%\",\n                boxSizing: \"border-box\",\n                overflow: \"hidden\",\n              }}\n            >\n              <div\n                style={{\n                  display: \"flex\",\n                  justifyContent: \"space-between\",\n                  alignItems: \"center\",\n                  gap: \"10px\",\n                }}\n              >\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: \"8px\",\n                    flex: 1,\n                    minWidth: 0,\n                  }}\n                >\n                  <div\n                    style={{\n                      width: \"12px\",\n                      height: \"12px\",\n                      borderRadius: \"50%\",\n                      backgroundColor: colors.border,\n                      flexShrink: 0,\n                    }}\n                  />\n                  <div\n                    style={{\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"10px\",\n                      flex: 1,\n                      minWidth: 0,\n                    }}\n                  >\n                    <div\n                      style={{\n                        color: colors.text,\n                        lineHeight: \"1.4\",\n                        fontWeight: \"400\",\n                        fontSize: \"13px\",\n                        flex: 1,\n                        wordBreak: \"break-all\",\n                        overflowWrap: \"break-word\",\n                        maxWidth: \"550px\",\n                        overflow: \"hidden\",\n                        display: \"-webkit-box\",\n                        WebkitLineClamp: 10,\n                        WebkitBoxOrient: \"vertical\",\n                      }}\n                    >\n                      {(() => {\n                        let message = bannerError.message;\n\n                        // Try to extract the useful message from JSON first\n                        const jsonMatch = message.match(/'message':\\s*'([^']+)'/);\n                        if (jsonMatch) {\n                          return jsonMatch[1]; // Return the actual error message\n                        }\n\n                        // Strip technical garbage but keep the meaningful message\n                        message = message.split(\" - \")[0]; // Remove everything after \" - {\"\n                        message = message.split(\": Error code\")[0]; // Remove \": Error code: 401\"\n                        message = message.replace(/:\\s*\\d{3}$/, \"\"); // Remove trailing \": 401\"\n                        message = message.replace(/See more:.*$/g, \"\"); // Remove \"See more\" links\n                        message = message.trim();\n\n                        // If it's still garbage (contains { or '), use fallback\n                        // if (message.includes(\"{\") || message.includes(\"'\")) {\n                        //   return \"Configuration error.... Please check your setup.\";\n                        // }\n\n                        return message || \"Configuration error occurred.\";\n                      })()}\n                    </div>\n\n                    {(() => {\n                      const message = bannerError.message;\n                      const markdownLinkRegex = /\\[([^\\]]+)\\]\\(([^)]+)\\)/g;\n                      const plainUrlRegex = /(https?:\\/\\/[^\\s)]+)/g;\n\n                      // Extract the first URL found\n                      let url = null;\n                      let buttonText = \"See More\";\n\n                      // Check for markdown links first\n                      const markdownMatch = markdownLinkRegex.exec(message);\n                      if (markdownMatch) {\n                        url = markdownMatch[2];\n                        buttonText = \"See More\";\n                      } else {\n                        // Check for plain URLs\n                        const urlMatch = plainUrlRegex.exec(message);\n                        if (urlMatch) {\n                          url = urlMatch[0].replace(/[.,;:'\"]*$/, \"\"); // Remove trailing punctuation\n                          buttonText = \"See More\";\n                        }\n                      }\n\n                      if (!url) return null;\n\n                      return (\n                        <button\n                          onClick={() => window.open(url, \"_blank\", \"noopener,noreferrer\")}\n                          style={{\n                            background: colors.border,\n                            color: \"white\",\n                            border: \"none\",\n                            borderRadius: \"5px\",\n                            padding: \"4px 10px\",\n                            fontSize: \"11px\",\n                            fontWeight: \"500\",\n                            cursor: \"pointer\",\n                            transition: \"all 0.2s ease\",\n                            flexShrink: 0,\n                          }}\n                          onMouseEnter={(e) => {\n                            e.currentTarget.style.opacity = \"0.9\";\n                            e.currentTarget.style.transform = \"translateY(-1px)\";\n                          }}\n                          onMouseLeave={(e) => {\n                            e.currentTarget.style.opacity = \"1\";\n                            e.currentTarget.style.transform = \"translateY(0)\";\n                          }}\n                        >\n                          {buttonText}\n                        </button>\n                      );\n                    })()}\n                  </div>\n                </div>\n                <button\n                  onClick={() => setBannerError(null)}\n                  style={{\n                    background: \"transparent\",\n                    border: \"none\",\n                    color: colors.text,\n                    cursor: \"pointer\",\n                    padding: \"2px\",\n                    borderRadius: \"3px\",\n                    fontSize: \"14px\",\n                    lineHeight: \"1\",\n                    opacity: 0.6,\n                    transition: \"all 0.2s ease\",\n                    flexShrink: 0,\n                  }}\n                  title=\"Dismiss\"\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.opacity = \"1\";\n                    e.currentTarget.style.background = \"rgba(0, 0, 0, 0.05)\";\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.opacity = \"0.6\";\n                    e.currentTarget.style.background = \"transparent\";\n                  }}\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          );\n        })()}\n\n      {/* Toast Display - Deprecated: All errors now show as banners */}\n      {children}\n    </ToastContext.Provider>\n  );\n}\n\n// Toast component removed - all errors now show as banners for consistency\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CA,IAAAA,gBAA8C;;;ACrC9C,mBAAkB;AA6NlB,IAAM,sBAA4C;AAAA,EAChD,SAAS,CAAC;AAAA,EACV,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,cAAc,MAAM;AAAA,EAAC;AAAA,EAErB,qBAAqB,CAAC;AAAA,EACtB,uBAAuB,MAAM;AAAA,EAAC;AAAA,EAC9B,0BAA0B,MAAM;AAAA,EAAC;AAAA,EAEjC,qBAAqB,EAAE,SAAS,EAAE,SAAS,CAAC,GAAG,qBAAqB,CAAC,EAAE,EAAE;AAAA,EACzE,kBAAkB,CAAC,WAA8B,eAC/C,sBAAsB,EAAE;AAAA,EAC1B,YAAY,MAAM;AAAA,EAClB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe,MAAM,CAAC;AAAA,EAEtB,wBAAwB,MAAM,sBAAsB,MAAY;AAAA,EAAC,EAAC;AAAA,EAElE,WAAW;AAAA,EACX,cAAc,MAAM,sBAAsB,KAAK;AAAA,EAE/C,kBAAkB;AAAA,EAClB,qBAAqB,MAAM,sBAAsB,EAAE;AAAA,EAEnD,wBAAwB,CAAC;AAAA,EACzB,2BAA2B,MAAM,sBAAsB,CAAC,CAAC;AAAA,EAEzD,qBAAqB,CAAC,eAAyB,sBAAsB,CAAC,CAAC;AAAA,EACvE,oBAAoB,MAAM,sBAAsB,EAAE;AAAA,EAClD,uBAAuB,MAAM;AAAA,EAAC;AAAA,EAC9B,eAAe,CAAC;AAAA,EAEhB,kBAAkB,IAAK,MAAkC;AAAA,IACvD,IAAI,kBAA0B;AAC5B,YAAM,IAAI,MAAM,uEAAuE;AAAA,IACzF;AAAA,IAEA,IAAI,UAAkC;AACpC,aAAO,CAAC;AAAA,IACV;AAAA,IACA,IAAI,OAA4B;AAC9B,aAAO,CAAC;AAAA,IACV;AAAA,EACF,EAAG;AAAA,EAEH,6BAA6B,CAAC;AAAA,EAC9B,gCAAgC,MAAM;AAAA,EAAC;AAAA,EACvC,mCAAmC,MAAM;AAAA,EAAC;AAAA,EAC1C,gBAAgB;AAAA,EAChB,eAAe,CAAC;AAAA,EAChB,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,kBAAkB,EAAE,SAAS,CAAC,EAAE;AAAA,EAChC,yBAAyB,MAAM;AAAA,EAAC;AAAA,EAChC,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,qBAAqB,CAAC;AAAA,EACtB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,OAAO;AAAA,EACP,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,wBAAwB,EAAE,SAAS,KAAK;AAAA,EACxC,iBAAiB,CAAC;AAAA,EAClB,YAAY,CAAC;AAAA,EACb,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,0BAA0B;AAAA,EAC1B,6BAA6B,MAAM;AAAA,EACnC,gCAAgC,MAAM;AAAA,EACtC,SAAS;AACX;AAEO,IAAM,iBAAiB,aAAAC,QAAM,cAAoC,mBAAmB;AAU3F,SAAS,sBAAyB,QAAc;AAC9C,QAAM,IAAI,MAAM,uEAAuE;AACzF;;;ADzQA,IAAAC,iBAAwD;;;AE5CxD,IAAAC,gBAAwE;AAExE,oBAA0E;AAiNxD;AA5LlB,IAAM,mBAAe,6BAA6C,MAAS;AAqEpE,SAAS,WAAW;AACzB,QAAM,cAAU,0BAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,8CAA8C;AAAA,EAChE;AACA,SAAO;AACT;;;AFvCO,SAAS,sBACd,QACA,cACM;AACN,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,0BAAW,cAAc;AAC7B,QAAM,YAAQ,0BAAe,yBAAS,CAAC;AACvC,QAAM,EAAE,gBAAgB,SAAS,IAAI,SAAS;AAE9C,+BAAU,MAAM;AACd,SAAI,mDAAiB,WAAU,CAAC,gBAAgB,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,IAAI,GAAG;AACnF,YAAM,UAAU,mCAAmC,OAAO;AAG1D,YAAM,aAAa,IAAI,6CAA8B;AAAA,QACnD,WAAW,OAAO;AAAA,QAClB,iBAAiB,gBAAgB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE,GAAG,EAAE;AAAA,MAC1E,CAAC;AACD,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,MAAM,GAAG,OAAO,QAAQ,OAAO,YAAY;AAEjD,MAAI,iBAAiB,QAAW;AAC9B,QAAI,oBAAoB,MAAM,OAAO,GAAG;AACtC,0BAAoB,MAAM,OAAO,EAAE,UAAU,OAAO;AACpD,UAAI,OAAO,OAAO,WAAW,YAAY;AACvC,YAAI,oBAAoB,YAAY,MAAM;AACxC,8BAAoB,QAAQ,oBAAoB,GAAG,IAAI,OAAO;AAAA,QAChE;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,+BAAU,MAAM;AAEd,UAAM,YAAY,MAAM;AACxB,UAAM,eAAe,OAAO,QAAQ,mBAAmB,EAAE,KAAK,CAAC,CAAC,IAAI,WAAW,MAAM;AAEnF,UAAI,OAAO;AAAW,eAAO;AAG7B,UAAI,YAAY,SAAS,OAAO;AAAM,eAAO;AAG7C,YAAM,cAAc,CAAC,CAAC,OAAO;AAC7B,YAAM,mBAAmB,CAAC,CAAC,YAAY;AAGvC,UAAI,CAAC,eAAe,CAAC;AAAkB,eAAO;AAG9C,UAAI,gBAAgB;AAAkB,eAAO;AAG7C,aAAO,OAAO,aAAa,YAAY;AAAA,IACzC,CAAC;AAED,QAAI,cAAc;AAChB,YAAM,UAAU,OAAO,WACnB,0CAA0C,OAAO,iBAAiB,OAAO,iDACzE,0CAA0C,OAAO;AAErD,eAAS;AAAA,QACP,MAAM;AAAA,QACN;AAAA,QACA,IAAI,cAAc,OAAO;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAExB,+BAAU,MAAM;AACd,0BAAsB,MAAM,SAAS,MAAa;AAClD,QAAI,oBAAoB,YAAY,QAAQ,OAAO,WAAW,QAAW;AACvE,0BAAoB,QAAQ,oBAAoB,GAAG,IAAI,OAAO;AAAA,IAChE;AACA,WAAO,MAAM;AACX,+BAAyB,MAAM,OAAO;AAAA,IACxC;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA;AAAA,IAEP,OAAO,OAAO,WAAW,WAAW,OAAO,SAAS;AAAA;AAAA,IAEpD,GAAI,gBAAgB,CAAC;AAAA,EACvB,CAAC;AACH;","names":["import_react","React","import_shared","import_react"]}

package/dist/hooks/use-coagent-state-render.mjs

@@ -1,8 +1,8 @@
 import {
   useCoAgentStateRender
-} from "../chunk-2FW7HH6W.mjs";
-import "../chunk-VRXANACV.mjs";
-import "../chunk-6KGEF242.mjs";
+} from "../chunk-3YHYWAHK.mjs";
+import "../chunk-YAF2LATQ.mjs";
+import "../chunk-XFOTNHYA.mjs";
 import "../chunk-SKC7AJIV.mjs";
 export {
   useCoAgentStateRender

package/dist/hooks/use-coagent.d.ts

@@ -1,4 +1,4 @@
-import { a as CopilotContextParams } from '../copilot-context-f9b2b4c3.js';
+import { a as CopilotContextParams } from '../copilot-context-3da805ab.js';
 import { CopilotMessagesContextParams } from '../context/copilot-messages-context.js';
 import { Message } from '@copilotkit/runtime-client-gql';
 import '@copilotkit/shared';

package/dist/hooks/use-coagent.js

@@ -160,7 +160,8 @@ var emptyCopilotContext = {
   },
   langGraphInterruptAction: null,
   setLangGraphInterruptAction: () => null,
-  removeLangGraphInterruptAction: () => null
+  removeLangGraphInterruptAction: () => null,
+  onTrace: void 0
 };
 var CopilotContext = import_react.default.createContext(emptyCopilotContext);
 function useCopilotContext() {
@@ -253,8 +254,35 @@ function shouldShowDevConsole(showDevConsole) {
 // src/hooks/use-copilot-runtime-client.ts
 var useCopilotRuntimeClient = (options) => {
   const { setBannerError } = useToast();
-  const _a = options, { showDevConsole } = _a, runtimeOptions = __objRest(_a, ["showDevConsole"]);
+  const _a = options, { showDevConsole, onTrace } = _a, runtimeOptions = __objRest(_a, ["showDevConsole", "onTrace"]);
   const lastStructuredErrorRef = (0, import_react4.useRef)(null);
+  const traceUIError = (error, originalError) => __async(void 0, null, function* () {
+    if (!onTrace || !runtimeOptions.publicApiKey)
+      return;
+    try {
+      const traceEvent = {
+        type: "error",
+        timestamp: Date.now(),
+        context: {
+          source: "ui",
+          request: {
+            operation: "runtimeClient",
+            url: runtimeOptions.url,
+            startTime: Date.now()
+          },
+          technical: {
+            environment: "browser",
+            userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+            stackTrace: originalError instanceof Error ? originalError.stack : void 0
+          }
+        },
+        error
+      };
+      yield onTrace(traceEvent);
+    } catch (traceError) {
+      console.error("Error in onTrace handler:", traceError);
+    }
+  });
   const runtimeClient = (0, import_react4.useMemo)(() => {
     return new import_runtime_client_gql2.CopilotRuntimeClient(__spreadProps(__spreadValues({}, runtimeOptions), {
       handleGQLErrors: (error) => {
@@ -282,12 +310,14 @@ var useCopilotRuntimeClient = (options) => {
             const ckError = createStructuredError(gqlError);
             if (ckError) {
               setBannerError(ckError);
+              traceUIError(ckError, gqlError);
             } else {
               const fallbackError = new import_shared3.CopilotKitError({
                 message: gqlError.message,
                 code: import_shared3.CopilotKitErrorCode.UNKNOWN
               });
               setBannerError(fallbackError);
+              traceUIError(fallbackError, gqlError);
             }
           };
           graphQLErrors.forEach(routeError);
@@ -301,6 +331,7 @@ var useCopilotRuntimeClient = (options) => {
               code: import_shared3.CopilotKitErrorCode.UNKNOWN
             });
             setBannerError(fallbackError);
+            traceUIError(fallbackError, error);
           }
         }
       },
@@ -313,7 +344,7 @@ var useCopilotRuntimeClient = (options) => {
         setBannerError(warningError);
       }
     }));
-  }, [runtimeOptions, setBannerError, showDevConsole]);
+  }, [runtimeOptions, setBannerError, showDevConsole, onTrace]);
   return runtimeClient;
 };
 function createStructuredError(gqlError) {
@@ -485,6 +516,35 @@ function useChat(options) {
   } = options;
   const runChatCompletionRef = (0, import_react6.useRef)();
   const addErrorToast = useErrorToast();
+  const { setBannerError } = useToast();
+  const { onTrace } = useCopilotContext();
+  const traceUIError = (error, originalError) => __async(this, null, function* () {
+    if (!onTrace || !(copilotConfig == null ? void 0 : copilotConfig.publicApiKey))
+      return;
+    try {
+      const traceEvent = {
+        type: "error",
+        timestamp: Date.now(),
+        context: {
+          source: "ui",
+          request: {
+            operation: "useChatCompletion",
+            url: copilotConfig.chatApiEndpoint,
+            startTime: Date.now()
+          },
+          technical: {
+            environment: "browser",
+            userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+            stackTrace: originalError instanceof Error ? originalError.stack : void 0
+          }
+        },
+        error
+      };
+      yield onTrace(traceEvent);
+    } catch (traceError) {
+      console.error("Error in use-chat onTrace handler:", traceError);
+    }
+  });
   const agentSessionRef = (0, import_react6.useRef)(agentSession);
   agentSessionRef.current = agentSession;
   const runIdRef = (0, import_react6.useRef)(runId);
@@ -504,7 +564,7 @@ function useChat(options) {
   const pendingAppendsRef = (0, import_react6.useRef)([]);
   const runChatCompletion = useAsyncCallback(
     (previousMessages) => __async(this, null, function* () {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
       setIsLoading(true);
       const interruptEvent = langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.event;
       if ((interruptEvent == null ? void 0 : interruptEvent.name) === import_runtime_client_gql3.MetaEventName.LangGraphInterruptEvent && (interruptEvent == null ? void 0 : interruptEvent.value) && !(interruptEvent == null ? void 0 : interruptEvent.response) && agentSessionRef.current) {
@@ -636,20 +696,53 @@ function useChat(options) {
           messages2 = (0, import_runtime_client_gql3.convertGqlOutputToMessages)(
             (0, import_runtime_client_gql3.filterAdjacentAgentStateMessages)(rawMessagesResponse)
           );
-          if (messages2.length === 0) {
-            continue;
-          }
           newMessages = [];
           if (((_k = value.generateCopilotResponse.status) == null ? void 0 : _k.__typename) === "FailedResponseStatus" && value.generateCopilotResponse.status.reason === "GUARDRAILS_VALIDATION_FAILED") {
+            const guardrailsReason = ((_l = value.generateCopilotResponse.status.details) == null ? void 0 : _l.guardrailsReason) || "";
             newMessages = [
               new import_runtime_client_gql3.TextMessage({
                 role: import_runtime_client_gql3.MessageRole.Assistant,
-                content: ((_l = value.generateCopilotResponse.status.details) == null ? void 0 : _l.guardrailsReason) || ""
+                content: guardrailsReason
               })
             ];
+            const guardrailsError = new import_shared4.CopilotKitError({
+              message: `Guardrails validation failed: ${guardrailsReason}`,
+              code: import_shared4.CopilotKitErrorCode.MISUSE
+            });
+            yield traceUIError(guardrailsError, {
+              statusReason: value.generateCopilotResponse.status.reason,
+              statusDetails: value.generateCopilotResponse.status.details
+            });
             setMessages([...previousMessages, ...newMessages]);
             break;
-          } else {
+          }
+          if (((_m = value.generateCopilotResponse.status) == null ? void 0 : _m.__typename) === "FailedResponseStatus" && value.generateCopilotResponse.status.reason === "UNKNOWN_ERROR") {
+            const errorMessage = ((_n = value.generateCopilotResponse.status.details) == null ? void 0 : _n.description) || "An unknown error occurred";
+            const statusDetails = value.generateCopilotResponse.status.details;
+            const originalError = (statusDetails == null ? void 0 : statusDetails.originalError) || (statusDetails == null ? void 0 : statusDetails.error);
+            const originalCode = (originalError == null ? void 0 : originalError.code) || ((_o = originalError == null ? void 0 : originalError.extensions) == null ? void 0 : _o.code);
+            const originalSeverity = (originalError == null ? void 0 : originalError.severity) || ((_p = originalError == null ? void 0 : originalError.extensions) == null ? void 0 : _p.severity);
+            const originalVisibility = (originalError == null ? void 0 : originalError.visibility) || ((_q = originalError == null ? void 0 : originalError.extensions) == null ? void 0 : _q.visibility);
+            let errorCode = import_shared4.CopilotKitErrorCode.NETWORK_ERROR;
+            if (originalCode && Object.values(import_shared4.CopilotKitErrorCode).includes(originalCode)) {
+              errorCode = originalCode;
+            }
+            const structuredError = new import_shared4.CopilotKitError({
+              message: errorMessage,
+              code: errorCode,
+              severity: originalSeverity,
+              visibility: originalVisibility
+            });
+            setBannerError(structuredError);
+            yield traceUIError(structuredError, {
+              statusReason: value.generateCopilotResponse.status.reason,
+              statusDetails: value.generateCopilotResponse.status.details,
+              originalErrorCode: originalCode,
+              preservedStructure: !!originalCode
+            });
+            setIsLoading(false);
+            break;
+          } else if (messages2.length > 0) {
             newMessages = [...messages2];
             for (const message of messages2) {
               if (message.isAgentStateMessage() && !message.active && !executedCoAgentStateRenders.includes(message.id) && onCoAgentStateRender) {
@@ -780,11 +873,11 @@ function useChat(options) {
           followUp !== false && // and we executed an action
           (didExecuteAction || // the last message is a server side result
           !isAgentRun && finalMessages.length && finalMessages[finalMessages.length - 1].isResultMessage()) && // the user did not stop generation
-          !((_m = chatAbortControllerRef.current) == null ? void 0 : _m.signal.aborted)
+          !((_r = chatAbortControllerRef.current) == null ? void 0 : _r.signal.aborted)
         ) {
           yield new Promise((resolve) => setTimeout(resolve, 10));
           return yield runChatCompletionRef.current(finalMessages);
-        } else if ((_n = chatAbortControllerRef.current) == null ? void 0 : _n.signal.aborted) {
+        } else if ((_s = chatAbortControllerRef.current) == null ? void 0 : _s.signal.aborted) {
           const repairedMessages = finalMessages.filter((message, actionExecutionIndex) => {
             if (message.isActionExecutionMessage()) {
               return finalMessages.find(
@@ -795,7 +888,7 @@ function useChat(options) {
           });
           const repairedMessageIds = repairedMessages.map((message) => message.id);
           setMessages(repairedMessages);
-          if ((_o = agentSessionRef.current) == null ? void 0 : _o.nodeName) {
+          if ((_t = agentSessionRef.current) == null ? void 0 : _t.nodeName) {
             setAgentSession({
               threadId: agentSessionRef.current.threadId,
               agentName: agentSessionRef.current.agentName,
@@ -1271,6 +1364,9 @@ function useCoAgent(options) {
         threadId,
         agentName: name
       });
+      if (result.error) {
+        return;
+      }
       const newState = (_b = (_a = result.data) == null ? void 0 : _a.loadAgentState) == null ? void 0 : _b.state;
       if (newState === lastLoadedState.current)
         return;