@copilotkit/react-core 1.10.7-next.0 → 1.50.0-beta.0

package/src/components/CopilotListeners.tsx

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useAgent, useCopilotChatConfiguration, useCopilotKit } from "@copilotkitnext/react";
+import { CopilotKitError, parseJson } from "@copilotkit/shared";
+import { useCopilotContext } from "../context";
+import { AbstractAgent, AgentSubscriber, AGUIConnectNotImplementedError } from "@ag-ui/client";
+import { useErrorToast } from "./error-boundary/error-utils";
+import { CopilotKitCoreSubscriber } from "@copilotkitnext/core";
+import { useToast } from "./toast/toast-provider";
+import { CopilotKitLowLevelError } from "@copilotkit/shared";
+
+const usePredictStateSubscription = (agent?: AbstractAgent) => {
+  const predictStateToolsRef = useRef<
+    {
+      tool: string;
+      state_key: string;
+      tool_argument: string;
+    }[]
+  >([]);
+
+  const getSubscriber = useCallback(
+    (agent: AbstractAgent): AgentSubscriber => ({
+      onCustomEvent: ({ event }) => {
+        if (event.name === "PredictState") {
+          predictStateToolsRef.current = event.value;
+        }
+      },
+      onToolCallArgsEvent: ({ partialToolCallArgs, toolCallName }) => {
+        predictStateToolsRef.current.forEach((t) => {
+          if (t?.tool !== toolCallName) return;
+
+          const emittedState =
+            typeof partialToolCallArgs === "string"
+              ? parseJson(partialToolCallArgs as unknown as string, partialToolCallArgs)
+              : partialToolCallArgs;
+
+          agent.setState({
+            [t.state_key]: emittedState[t.state_key],
+          });
+        });
+      },
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    if (!agent) return;
+
+    const subscriber = getSubscriber(agent);
+    const { unsubscribe } = agent.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, [agent, getSubscriber]);
+};
+
+export function CopilotListeners() {
+  const { copilotkit } = useCopilotKit();
+  const { agentSession } = useCopilotContext();
+  const existingConfig = useCopilotChatConfiguration();
+  const resolvedAgentId = agentSession?.agentName ?? existingConfig?.agentId ?? "default";
+  const { setBannerError } = useToast();
+
+  const { agent } = useAgent({ agentId: resolvedAgentId });
+
+  usePredictStateSubscription(agent);
+
+  useEffect(() => {
+    const subscriber: CopilotKitCoreSubscriber = {
+      onError: ({ error }) => {
+        // @ts-expect-error -- for now, choose a random CPK error type to display the error toast
+        setBannerError(new CopilotKitLowLevelError({ error, message: error.message }));
+      },
+    };
+    const subscription = copilotkit.subscribe(subscriber);
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [copilotkit?.subscribe]);
+
+  return null;
+}

package/src/components/copilot-provider/copilot-messages.tsx

@@ -29,7 +29,7 @@ import {
   CopilotKitError,
   CopilotKitErrorCode,
 } from "@copilotkit/shared";
-import { SuggestionItem } from "../../utils/suggestions";
+import { Suggestion } from "@copilotkitnext/core";
 
 // Helper to determine if error should show as banner based on visibility and legacy patterns
 function shouldShowAsBanner(gqlError: GraphQLError): boolean {
@@ -118,14 +118,13 @@ export function MessagesTapProvider({ children }: { children: React.ReactNode })
 
 export function CopilotMessages({ children }: { children: ReactNode }) {
   const [messages, setMessages] = useState<Message[]>([]);
-  const lastLoadedThreadId = useRef<string>();
-  const lastLoadedAgentName = useRef<string>();
-  const lastLoadedMessages = useRef<string>();
+  const lastLoadedThreadId = useRef<string>(undefined!);
+  const lastLoadedAgentName = useRef<string>(undefined!);
+  const lastLoadedMessages = useRef<string>(undefined!);
 
   const { updateTapMessages } = useMessagesTap();
 
-  const { threadId, agentSession, runtimeClient, showDevConsole, onError, copilotApiConfig } =
-    useCopilotContext();
+  const { threadId, agentSession, showDevConsole, onError, copilotApiConfig } = useCopilotContext();
   const { setBannerError } = useToast();
 
   // Helper function to trace UI errors (similar to useCopilotRuntimeClient)
@@ -253,53 +252,53 @@ export function CopilotMessages({ children }: { children: ReactNode }) {
     [setBannerError, showDevConsole, traceUIError],
   );
 
-  useEffect(() => {
-    if (!threadId || threadId === lastLoadedThreadId.current) return;
-    if (
-      threadId === lastLoadedThreadId.current &&
-      agentSession?.agentName === lastLoadedAgentName.current
-    ) {
-      return;
-    }
-
-    const fetchMessages = async () => {
-      if (!agentSession?.agentName) return;
-
-      const result = await runtimeClient.loadAgentState({
-        threadId,
-        agentName: agentSession?.agentName,
-      });
-
-      // Check for GraphQL errors and manually trigger error handling
-      if (result.error) {
-        // Update refs to prevent infinite retries of the same failed request
-        lastLoadedThreadId.current = threadId;
-        lastLoadedAgentName.current = agentSession?.agentName;
-        handleGraphQLErrors(result.error);
-        return; // Don't try to process the data if there's an error
-      }
-
-      const newMessages = result.data?.loadAgentState?.messages;
-      if (newMessages === lastLoadedMessages.current) return;
-
-      if (result.data?.loadAgentState) {
-        lastLoadedMessages.current = newMessages;
-        lastLoadedThreadId.current = threadId;
-        lastLoadedAgentName.current = agentSession?.agentName;
-
-        const messages = loadMessagesFromJsonRepresentation(JSON.parse(newMessages || "[]"));
-        setMessages(messages);
-      }
-    };
-    void fetchMessages();
-  }, [threadId, agentSession?.agentName]);
+  // useEffect(() => {
+  //   if (!threadId || threadId === lastLoadedThreadId.current) return;
+  //   if (
+  //     threadId === lastLoadedThreadId.current &&
+  //     agentSession?.agentName === lastLoadedAgentName.current
+  //   ) {
+  //     return;
+  //   }
+  //
+  //   const fetchMessages = async () => {
+  //     if (!agentSession?.agentName) return;
+  //
+  //     const result = await runtimeClient.loadAgentState({
+  //       threadId,
+  //       agentName: agentSession?.agentName,
+  //     });
+  //
+  //     // Check for GraphQL errors and manually trigger error handling
+  //     if (result.error) {
+  //       // Update refs to prevent infinite retries of the same failed request
+  //       lastLoadedThreadId.current = threadId;
+  //       lastLoadedAgentName.current = agentSession?.agentName;
+  //       handleGraphQLErrors(result.error);
+  //       return; // Don't try to process the data if there's an error
+  //     }
+  //
+  //     const newMessages = result.data?.loadAgentState?.messages;
+  //     if (newMessages === lastLoadedMessages.current) return;
+  //
+  //     if (result.data?.loadAgentState) {
+  //       lastLoadedMessages.current = newMessages;
+  //       lastLoadedThreadId.current = threadId;
+  //       lastLoadedAgentName.current = agentSession?.agentName;
+  //
+  //       const messages = loadMessagesFromJsonRepresentation(JSON.parse(newMessages || "[]"));
+  //       setMessages(messages);
+  //     }
+  //   };
+  //   void fetchMessages();
+  // }, [threadId, agentSession?.agentName]);
 
   useEffect(() => {
     updateTapMessages(messages);
   }, [messages, updateTapMessages]);
 
   const memoizedChildren = useMemo(() => children, [children]);
-  const [suggestions, setSuggestions] = useState<SuggestionItem[]>([]);
+  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
 
   return (
     <CopilotMessagesContext.Provider

package/src/components/copilot-provider/copilotkit-props.tsx

@@ -2,11 +2,18 @@ import { ForwardedParametersInput } from "@copilotkit/runtime-client-gql";
 import { ReactNode } from "react";
 import { AuthState } from "../../context/copilot-context";
 import { CopilotErrorHandler } from "@copilotkit/shared";
+import { CopilotKitProviderProps } from "@copilotkitnext/react";
 /**
  * Props for CopilotKit.
  */
 
-export interface CopilotKitProps {
+/**
+ * We shouldn't need this `Omit` here, but using it because `CopilotKitProps`
+ * and `CopilotKitProviderProps` have non-identical `children` types
+ *
+ * TODO: Remove this `Omit` once this is resolved.
+ */
+export interface CopilotKitProps extends Omit<CopilotKitProviderProps, "children"> {
   /**
    * Your Copilot Cloud API key.
    *

package/src/components/copilot-provider/copilotkit.tsx

@@ -15,6 +15,7 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState, SetStateAction } from "react";
+import { CopilotChatConfigurationProvider, CopilotKitProvider } from "@copilotkitnext/react";
 import {
   CopilotContext,
   CopilotApiConfig,
@@ -40,20 +41,23 @@ import {
 import { FrontendAction } from "../../types/frontend-action";
 import useFlatCategoryStore from "../../hooks/use-flat-category-store";
 import { CopilotKitProps } from "./copilotkit-props";
-import { CoAgentStateRender } from "../../types/coagent-action";
 import { CoagentState } from "../../types/coagent-state";
 import { CopilotMessages, MessagesTapProvider } from "./copilot-messages";
 import { ToastProvider } from "../toast/toast-provider";
 import { getErrorActions, UsageBanner } from "../usage-banner";
-import { useCopilotRuntimeClient } from "../../hooks/use-copilot-runtime-client";
 import { shouldShowDevConsole } from "../../utils";
 import { CopilotErrorBoundary } from "../error-boundary/error-boundary";
 import { Agent, ExtensionsInput } from "@copilotkit/runtime-client-gql";
 import {
-  LangGraphInterruptAction,
+  LangGraphInterruptRender,
   LangGraphInterruptActionSetterArgs,
+  QueuedInterruptEvent,
 } from "../../types/interrupt-action";
 import { ConsoleTrigger } from "../dev-console/console-trigger";
+import { CoAgentStateRendersProvider } from "../../context/coagent-state-renders-context";
+import { CoAgentStateRenderBridge } from "../../hooks/use-coagent-state-render-bridge";
+import { ThreadsProvider, useThreads } from "../../context/threads-context";
+import { CopilotListeners } from "../CopilotListeners";
 
 export function CopilotKit({ children, ...props }: CopilotKitProps) {
   const enabled = shouldShowDevConsole(props.showDevConsole);
@@ -61,10 +65,20 @@ export function CopilotKit({ children, ...props }: CopilotKitProps) {
   // Use API key if provided, otherwise use the license key
   const publicApiKey = props.publicApiKey || props.publicLicenseKey;
 
+  const renderArr = useMemo(() => [{ render: CoAgentStateRenderBridge }], []);
+
   return (
     <ToastProvider enabled={enabled}>
       <CopilotErrorBoundary publicApiKey={publicApiKey} showUsageBanner={enabled}>
-        <CopilotKitInternal {...props}>{children}</CopilotKitInternal>
+        <ThreadsProvider threadId={props.threadId}>
+          <CopilotKitProvider
+            runtimeUrl={props.runtimeUrl}
+            renderCustomMessages={renderArr}
+            useSingleEndpoint={true}
+          >
+            <CopilotKitInternal {...props}>{children}</CopilotKitInternal>
+          </CopilotKitProvider>
+        </ThreadsProvider>
       </CopilotErrorBoundary>
     </ToastProvider>
   );
@@ -84,9 +98,11 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
   const chatApiEndpoint = props.runtimeUrl || COPILOT_CLOUD_CHAT_URL;
 
   const [actions, setActions] = useState<Record<string, FrontendAction<any>>>({});
-  const [coAgentStateRenders, setCoAgentStateRenders] = useState<
-    Record<string, CoAgentStateRender<any>>
-  >({});
+
+  // State for registered actions from useCopilotAction
+  const [registeredActionConfigs, setRegisteredActionConfigs] = useState<
+    Map<string, { type: string; action: any; component: any }>
+  >(new Map());
 
   const chatComponentsCache = useRef<ChatComponentsCache>({
     actions: {},
@@ -124,23 +140,6 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     });
   }, []);
 
-  const setCoAgentStateRender = useCallback((id: string, stateRender: CoAgentStateRender<any>) => {
-    setCoAgentStateRenders((prevPoints) => {
-      return {
-        ...prevPoints,
-        [id]: stateRender,
-      };
-    });
-  }, []);
-
-  const removeCoAgentStateRender = useCallback((id: string) => {
-    setCoAgentStateRenders((prevPoints) => {
-      const newPoints = { ...prevPoints };
-      delete newPoints[id];
-      return newPoints;
-    });
-  }, []);
-
   const getContextString = useCallback(
     (documents: DocumentPointer[], categories: string[]) => {
       const documentsString = documents
@@ -318,15 +317,6 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     [copilotApiConfig.publicApiKey],
   );
 
-  const runtimeClient = useCopilotRuntimeClient({
-    url: copilotApiConfig.chatApiEndpoint,
-    publicApiKey: publicApiKey,
-    headers,
-    credentials: copilotApiConfig.credentials,
-    showDevConsole: shouldShowDevConsole(props.showDevConsole),
-    onError: handleErrors,
-  });
-
   const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = useState<{
     [key: string]: CopilotChatSuggestionConfiguration;
   }>({});
@@ -365,20 +355,6 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     },
     [],
   );
-  const hasLoadedAgents = useRef(false);
-
-  useEffect(() => {
-    if (hasLoadedAgents.current) return;
-
-    const fetchData = async () => {
-      const result = await runtimeClient.availableAgents();
-      if (result.data?.availableAgents) {
-        setAvailableAgents(result.data.availableAgents.agents);
-      }
-      hasLoadedAgents.current = true;
-    };
-    void fetchData();
-  }, []);
 
   let initialAgentSession: AgentSession | null = null;
   if (props.agent) {
@@ -400,7 +376,8 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     }
   }, [props.agent]);
 
-  const [internalThreadId, setInternalThreadId] = useState<string>(props.threadId || randomUUID());
+  const { threadId, setThreadId: setInternalThreadId } = useThreads();
+
   const setThreadId = useCallback(
     (value: SetStateAction<string>) => {
       if (props.threadId) {
@@ -411,45 +388,59 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     [props.threadId],
   );
 
-  // update the internal threadId if the props.threadId changes
-  useEffect(() => {
-    if (props.threadId !== undefined) {
-      setInternalThreadId(props.threadId);
-    }
-  }, [props.threadId]);
-
   const [runId, setRunId] = useState<string | null>(null);
 
   const chatAbortControllerRef = useRef<AbortController | null>(null);
 
   const showDevConsole = shouldShowDevConsole(props.showDevConsole);
 
-  const [langGraphInterruptActions, _setLangGraphInterruptAction] = useState<
-    Record<string, LangGraphInterruptAction | null>
+  const [interruptActions, _setInterruptActions] = useState<
+    Record<string, LangGraphInterruptRender>
   >({});
-  const setLangGraphInterruptAction = useCallback(
+  const setInterruptAction = useCallback(
     (threadId: string, action: LangGraphInterruptActionSetterArgs) => {
-      _setLangGraphInterruptAction((prev) => {
-        if (action == null)
-          return {
-            ...prev,
-            [threadId]: null,
-          };
-        let event = prev[threadId]?.event;
-        if (action.event) {
-          // @ts-ignore
-          event = { ...(prev[threadId]?.event || {}), ...action.event };
+      _setInterruptActions((prev) => {
+        if (action == null || !action.id) {
+          // Cannot set action without id
+          return prev;
         }
         return {
           ...prev,
-          [threadId]: { ...(prev[threadId] ?? {}), ...action, event } as LangGraphInterruptAction,
+          [action.id]: { ...(prev[action.id] ?? {}), ...action } as LangGraphInterruptRender,
         };
       });
     },
     [],
   );
-  const removeLangGraphInterruptAction = useCallback((threadId: string): void => {
-    setLangGraphInterruptAction(threadId, null);
+  const removeInterruptAction = useCallback((actionId: string): void => {
+    _setInterruptActions((prev) => {
+      const { [actionId]: _, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+
+  const [interruptEventQueue, setInterruptEventQueue] = useState<
+    Record<string, QueuedInterruptEvent[]>
+  >({});
+
+  const addInterruptEvent = useCallback((queuedEvent: QueuedInterruptEvent) => {
+    setInterruptEventQueue((prev) => {
+      const threadQueue = prev[queuedEvent.threadId] || [];
+      return {
+        ...prev,
+        [queuedEvent.threadId]: [...threadQueue, queuedEvent],
+      };
+    });
+  }, []);
+
+  const removeInterruptEvent = useCallback((threadId: string, eventId: string) => {
+    setInterruptEventQueue((prev) => {
+      const threadQueue = prev[threadId] || [];
+      return {
+        ...prev,
+        [threadId]: threadQueue.filter((event) => event.eventId !== eventId),
+      };
+    });
   }, []);
 
   const memoizedChildren = useMemo(() => children, [children]);
@@ -494,81 +485,123 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     [setAuthStates],
   );
 
+  const handleSetRegisteredActions = useCallback((actionConfig: any): string => {
+    const key = actionConfig.action.name || randomUUID();
+    setRegisteredActionConfigs((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(key, actionConfig);
+      return newMap;
+    });
+    return key;
+  }, []);
+
+  const handleRemoveRegisteredAction = useCallback((actionKey: string) => {
+    setRegisteredActionConfigs((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(actionKey);
+      return newMap;
+    });
+  }, []);
+
+  // Component to render all registered actions
+  const RegisteredActionsRenderer = useMemo(() => {
+    return () => (
+      <>
+        {Array.from(registeredActionConfigs.entries()).map(([key, config]) => {
+          const Component = config.component;
+          return <Component key={key} action={config.action} />;
+        })}
+      </>
+    );
+  }, [registeredActionConfigs]);
+
   return (
-    <CopilotContext.Provider
-      value={{
-        actions,
-        chatComponentsCache,
-        getFunctionCallHandler,
-        setAction,
-        removeAction,
-        coAgentStateRenders,
-        setCoAgentStateRender,
-        removeCoAgentStateRender,
-        getContextString,
-        addContext,
-        removeContext,
-        getAllContext,
-        getDocumentsContext,
-        addDocumentContext,
-        removeDocumentContext,
-        copilotApiConfig: copilotApiConfig,
-        isLoading,
-        setIsLoading,
-        chatSuggestionConfiguration,
-        addChatSuggestionConfiguration,
-        removeChatSuggestionConfiguration,
-        chatInstructions,
-        setChatInstructions,
-        additionalInstructions,
-        setAdditionalInstructions,
-        showDevConsole,
-        coagentStates,
-        setCoagentStates,
-        coagentStatesRef,
-        setCoagentStatesWithRef,
-        agentSession,
-        setAgentSession,
-        runtimeClient,
-        forwardedParameters,
-        agentLock,
-        threadId: internalThreadId,
-        setThreadId,
-        runId,
-        setRunId,
-        chatAbortControllerRef,
-        availableAgents,
-        authConfig_c: props.authConfig_c,
-        authStates_c: authStates,
-        setAuthStates_c: updateAuthStates,
-        extensions,
-        setExtensions: updateExtensions,
-        langGraphInterruptAction: langGraphInterruptActions[internalThreadId] ?? null,
-        setLangGraphInterruptAction,
-        removeLangGraphInterruptAction,
-        bannerError,
-        setBannerError,
-        onError: handleErrors,
-        internalErrorHandlers,
-        setInternalErrorHandler,
-        removeInternalErrorHandler,
-      }}
+    <CopilotChatConfigurationProvider
+      // labels={labels}
+      // isModalDefaultOpen={isModalDefaultOpen}
+      agentId={agentSession?.agentName ?? "default"}
+      threadId={threadId}
     >
-      <MessagesTapProvider>
-        <CopilotMessages>
-          {memoizedChildren}
-          {showDevConsole && <ConsoleTrigger />}
-        </CopilotMessages>
-      </MessagesTapProvider>
-      {bannerError && showDevConsole && (
-        <UsageBanner
-          severity={bannerError.severity}
-          message={bannerError.message}
-          onClose={() => setBannerError(null)}
-          actions={getErrorActions(bannerError)}
-        />
-      )}
-    </CopilotContext.Provider>
+      <CopilotContext.Provider
+        value={{
+          actions,
+          chatComponentsCache,
+          getFunctionCallHandler,
+          setAction,
+          removeAction,
+          setRegisteredActions: handleSetRegisteredActions,
+          removeRegisteredAction: handleRemoveRegisteredAction,
+          getContextString,
+          addContext,
+          removeContext,
+          getAllContext,
+          getDocumentsContext,
+          addDocumentContext,
+          removeDocumentContext,
+          copilotApiConfig: copilotApiConfig,
+          isLoading,
+          setIsLoading,
+          chatSuggestionConfiguration,
+          addChatSuggestionConfiguration,
+          removeChatSuggestionConfiguration,
+          chatInstructions,
+          setChatInstructions,
+          additionalInstructions,
+          setAdditionalInstructions,
+          showDevConsole,
+          coagentStates,
+          setCoagentStates,
+          coagentStatesRef,
+          setCoagentStatesWithRef,
+          agentSession,
+          setAgentSession,
+          forwardedParameters,
+          agentLock,
+          threadId,
+          setThreadId,
+          runId,
+          setRunId,
+          chatAbortControllerRef,
+          availableAgents,
+          authConfig_c: props.authConfig_c,
+          authStates_c: authStates,
+          setAuthStates_c: updateAuthStates,
+          extensions,
+          setExtensions: updateExtensions,
+          interruptActions,
+          setInterruptAction,
+          removeInterruptAction,
+          interruptEventQueue,
+          addInterruptEvent,
+          removeInterruptEvent,
+          bannerError,
+          setBannerError,
+          onError: handleErrors,
+          internalErrorHandlers,
+          setInternalErrorHandler,
+          removeInternalErrorHandler,
+        }}
+      >
+        <CopilotListeners />
+        <CoAgentStateRendersProvider>
+          <MessagesTapProvider>
+            <CopilotMessages>
+              {memoizedChildren}
+              {showDevConsole && <ConsoleTrigger />}
+              <RegisteredActionsRenderer />
+            </CopilotMessages>
+          </MessagesTapProvider>
+          {bannerError && showDevConsole && (
+            <UsageBanner
+              severity={bannerError.severity}
+              message={bannerError.message}
+              onClose={() => setBannerError(null)}
+              actions={getErrorActions(bannerError)}
+            />
+          )}
+        </CoAgentStateRendersProvider>
+      </CopilotContext.Provider>
+    </CopilotChatConfigurationProvider>
   );
 }
 

package/src/components/error-boundary/error-utils.tsx

@@ -60,8 +60,8 @@ export function useErrorToast() {
   const { addToast } = useToast();
 
   return useCallback(
-    (error: (Error | GraphQLError)[]) => {
-      const errorId = error
+    (errors: (Error | GraphQLError)[]) => {
+      const errorId = errors
         .map((err) => {
           const message =
             "extensions" in err
@@ -75,7 +75,7 @@ export function useErrorToast() {
       addToast({
         type: "error",
         id: errorId, // Toast libraries typically dedupe by id
-        message: <ErrorToast errors={error} />,
+        message: <ErrorToast errors={errors} />,
       });
     },
     [addToast],