@copilotkit/react-core 1.10.6 → 1.50.0-beta.0

package/src/hooks/use-coagent.ts

@@ -88,17 +88,10 @@
  * </PropertyReference>
  */
 
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { CopilotContextParams, useCopilotContext } from "../context";
-import { CoagentState } from "../types/coagent-state";
-import { useCopilotChat } from "./use-copilot-chat_internal";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Message } from "@copilotkit/shared";
-import { useAsyncCallback } from "../components/error-boundary/error-utils";
-import { useToast } from "../components/toast/toast-provider";
-import { useCopilotRuntimeClient } from "./use-copilot-runtime-client";
-import { parseJson, CopilotKitAgentDiscoveryError } from "@copilotkit/shared";
-import { useMessagesTap } from "../components/copilot-provider/copilot-messages";
-import { Message as GqlMessage } from "@copilotkit/runtime-client-gql";
+import { useAgent } from "@copilotkitnext/react";
+import { type AgentSubscriber } from "@ag-ui/client";
 
 interface UseCoagentOptionsBase {
   /**
@@ -186,7 +179,7 @@ export interface UseCoagentReturnType<T> {
    * A function to re-run the agent. The hint function can be used to provide a hint to the agent
    * about why it is being re-run again.
    */
-  run: (hint?: HintFunction) => Promise<void>;
+  run: (...args: any[]) => Promise<any>;
 }
 
 export interface HintFunctionParams {
@@ -209,230 +202,152 @@ export type HintFunction = (params: HintFunctionParams) => Message | undefined;
  * we refer to as CoAgents, checkout the documentation at https://docs.copilotkit.ai/coagents/quickstart/langgraph.
  */
 export function useCoAgent<T = any>(options: UseCoagentOptions<T>): UseCoagentReturnType<T> {
-  const context = useCopilotContext();
-  const { availableAgents, onError } = context;
-  const { setBannerError } = useToast();
-  const lastLoadedThreadId = useRef<string>();
-  const lastLoadedState = useRef<any>();
+  const { agent } = useAgent({ agentId: options.name });
+  const nodeNameRef = useRef<string>("start");
 
-  const { name } = options;
-  useEffect(() => {
-    if (availableAgents?.length && !availableAgents.some((a) => a.name === name)) {
-      const message = `(useCoAgent): Agent "${name}" not found. Make sure the agent exists and is properly configured.`;
-      console.warn(message);
-
-      // Route to banner instead of toast for consistency
-      const agentError = new CopilotKitAgentDiscoveryError({
-        agentName: name,
-        availableAgents: availableAgents.map((a) => ({ name: a.name, id: a.id })),
-      });
-      setBannerError(agentError);
-    }
-  }, [availableAgents]);
-
-  const { getMessagesFromTap } = useMessagesTap();
-
-  const { coagentStates, coagentStatesRef, setCoagentStatesWithRef, threadId, copilotApiConfig } =
-    context;
-  const { sendMessage, runChatCompletion } = useCopilotChat();
-  const headers = {
-    ...(copilotApiConfig.headers || {}),
-  };
-
-  const runtimeClient = useCopilotRuntimeClient({
-    url: copilotApiConfig.chatApiEndpoint,
-    publicApiKey: copilotApiConfig.publicApiKey,
-    headers,
-    credentials: copilotApiConfig.credentials,
-    showDevConsole: context.showDevConsole,
-    onError,
-  });
-
-  // if we manage state internally, we need to provide a function to set the state
-  const setState = useCallback(
+  const handleStateUpdate = useCallback(
     (newState: T | ((prevState: T | undefined) => T)) => {
-      // coagentStatesRef.current || {}
-      let coagentState: CoagentState = getCoagentState({ coagentStates, name, options });
-      const updatedState =
-        typeof newState === "function" ? (newState as Function)(coagentState.state) : newState;
+      if (!agent) return;
 
-      setCoagentStatesWithRef({
-        ...coagentStatesRef.current,
-        [name]: {
-          ...coagentState,
-          state: updatedState,
-        },
-      });
+      if (typeof newState === "function") {
+        const updater = newState as (prevState: T | undefined) => T;
+        agent.setState(updater(agent.state));
+      } else {
+        agent.setState({ ...agent.state, ...newState });
+      }
     },
-    [coagentStates, name],
+    [agent?.state, agent?.setState],
   );
 
-  useEffect(() => {
-    const fetchAgentState = async () => {
-      if (!threadId || threadId === lastLoadedThreadId.current) return;
-
-      const result = await runtimeClient.loadAgentState({
-        threadId,
-        agentName: name,
-      });
-
-      // Runtime client handles errors automatically via handleGQLErrors
-      if (result.error) {
-        return; // Don't process data on error
-      }
-
-      const newState = result.data?.loadAgentState?.state;
-      if (newState === lastLoadedState.current) return;
-
-      if (result.data?.loadAgentState?.threadExists && newState && newState != "{}") {
-        lastLoadedState.current = newState;
-        lastLoadedThreadId.current = threadId;
-        const fetchedState = parseJson(newState, {});
-        isExternalStateManagement(options)
-          ? options.setState(fetchedState)
-          : setState(fetchedState);
-      }
-    };
-    void fetchAgentState();
-  }, [threadId]);
+  const externalStateStr = useMemo(
+    () => (isExternalStateManagement(options) ? JSON.stringify(options.state) : undefined),
+    [isExternalStateManagement(options) ? JSON.stringify(options.state) : undefined],
+  );
 
   // Sync internal state with external state if state management is external
+  useEffect(() => {
+    if (
+      agent?.state &&
+      isExternalStateManagement(options) &&
+      JSON.stringify(options.state) !== JSON.stringify(agent.state)
+    ) {
+      handleStateUpdate(options.state);
+    }
+  }, [agent, externalStateStr, handleStateUpdate]);
+
+  const hasStateValues = useCallback((value?: Record<string, any>) => {
+    return Boolean(value && Object.keys(value).length);
+  }, []);
+
+  const initialStateRef = useRef<any>(
+    isExternalStateManagement(options)
+      ? options.state
+      : "initialState" in options
+        ? options.initialState
+        : undefined,
+  );
+
   useEffect(() => {
     if (isExternalStateManagement(options)) {
-      setState(options.state);
-    } else if (coagentStates[name] === undefined) {
-      setState(options.initialState === undefined ? {} : options.initialState);
+      initialStateRef.current = options.state;
+    } else if ("initialState" in options) {
+      initialStateRef.current = options.initialState;
     }
   }, [
-    isExternalStateManagement(options) ? JSON.stringify(options.state) : undefined,
-    // reset initialstate on reset
-    coagentStates[name] === undefined,
+    isExternalStateManagement(options)
+      ? JSON.stringify(options.state)
+      : "initialState" in options
+        ? JSON.stringify(options.initialState)
+        : undefined,
   ]);
 
-  // Sync config when runtime configuration changes
   useEffect(() => {
-    const newConfig = options.config
-      ? options.config
-      : options.configurable
-        ? { configurable: options.configurable }
-        : undefined;
-
-    if (newConfig === undefined) return;
-
-    setCoagentStatesWithRef((prev) => {
-      const existing = prev[name] ?? {
-        name,
-        state: isInternalStateManagementWithInitial(options) ? options.initialState : {},
-        config: {},
-        running: false,
-        active: false,
-        threadId: undefined,
-        nodeName: undefined,
-        runId: undefined,
-      };
-
-      if (JSON.stringify(existing.config) === JSON.stringify(newConfig)) {
-        return prev;
-      }
-
-      return {
-        ...prev,
-        [name]: {
-          ...existing,
-          config: newConfig,
-        },
-      };
-    });
-  }, [JSON.stringify(options.config), JSON.stringify(options.configurable)]);
-
-  const runAgentCallback = useAsyncCallback(
-    async (hint?: HintFunction) => {
-      await runAgent(name, context, getMessagesFromTap(), sendMessage, runChatCompletion, hint);
-    },
-    [name, context, sendMessage, runChatCompletion],
-  );
-
-  // Return the state and setState function
-  return useMemo(() => {
-    const coagentState = getCoagentState({ coagentStates, name, options });
-    return {
-      name,
-      nodeName: coagentState.nodeName,
-      threadId: coagentState.threadId,
-      running: coagentState.running,
-      state: coagentState.state,
-      setState: isExternalStateManagement(options) ? options.setState : setState,
-      start: () => startAgent(name, context),
-      stop: () => stopAgent(name, context),
-      run: runAgentCallback,
+    if (!agent) return;
+    const subscriber: AgentSubscriber = {
+      onStateChanged: (args: any) => {
+        if (isExternalStateManagement(options)) {
+          options.setState(args.state);
+        }
+      },
+      onRunInitialized: (args: any) => {
+        const runHasState = hasStateValues(args.state);
+        if (runHasState) {
+          handleStateUpdate(args.state);
+          return;
+        }
+
+        if (hasStateValues(agent.state)) {
+          return;
+        }
+
+        if (initialStateRef.current !== undefined) {
+          handleStateUpdate(initialStateRef.current);
+        }
+      },
+      onStepStartedEvent: ({ event }) => {
+        nodeNameRef.current = event.stepName;
+      },
+      onRunStartedEvent: () => {
+        nodeNameRef.current = "start";
+      },
+      onRunFinishedEvent: () => {
+        nodeNameRef.current = "end";
+      },
     };
-  }, [name, coagentStates, options, setState, runAgentCallback]);
-}
 
-export function startAgent(name: string, context: CopilotContextParams) {
-  const { setAgentSession } = context;
-  setAgentSession({
-    agentName: name,
-  });
-}
-
-export function stopAgent(name: string, context: CopilotContextParams) {
-  const { agentSession, setAgentSession } = context;
-  if (agentSession && agentSession.agentName === name) {
-    setAgentSession(null);
-    context.setCoagentStates((prevAgentStates) => {
+    const subscription = agent.subscribe(subscriber);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [agent, handleStateUpdate, hasStateValues]);
+
+  // Return a consistent shape whether or not the agent is available
+  return useMemo<UseCoagentReturnType<T>>(() => {
+    if (!agent) {
+      const noop = () => {};
+      const noopAsync = async () => {};
+      const initialState =
+        // prefer externally provided state if available
+        ("state" in options && (options as any).state) ??
+        // then initialState if provided
+        ("initialState" in options && (options as any).initialState) ??
+        ({} as T);
       return {
-        ...prevAgentStates,
-        [name]: {
-          ...prevAgentStates[name],
-          running: false,
-          active: false,
-          threadId: undefined,
-          nodeName: undefined,
-          runId: undefined,
-        },
+        name: options.name,
+        nodeName: nodeNameRef.current,
+        threadId: undefined,
+        running: false,
+        state: initialState as T,
+        setState: noop,
+        start: noop,
+        stop: noop,
+        run: noopAsync,
       };
-    });
-  } else {
-    console.warn(`No agent session found for ${name}`);
-  }
-}
-
-export async function runAgent(
-  name: string,
-  context: CopilotContextParams,
-  messages: GqlMessage[],
-  sendMessage: (message: Message) => Promise<void>,
-  runChatCompletion: () => Promise<Message[]>,
-  hint?: HintFunction,
-) {
-  const { agentSession, setAgentSession } = context;
-  if (!agentSession || agentSession.agentName !== name) {
-    setAgentSession({
-      agentName: name,
-    });
-  }
-
-  let previousState: any = null;
-  for (let i = messages.length - 1; i >= 0; i--) {
-    const message = messages[i];
-    if (message.isAgentStateMessage() && message.agentName === name) {
-      previousState = message.state;
     }
-  }
-
-  let state = context.coagentStatesRef.current?.[name]?.state || {};
 
-  if (hint) {
-    const hintMessage = hint({ previousState, currentState: state });
-    if (hintMessage) {
-      await sendMessage(hintMessage);
-    } else {
-      await runChatCompletion();
-    }
-  } else {
-    await runChatCompletion();
-  }
+    return {
+      name: agent?.agentId ?? options.name,
+      nodeName: nodeNameRef.current,
+      threadId: agent.threadId,
+      running: agent.isRunning,
+      state: agent.state,
+      setState: handleStateUpdate,
+      // TODO: start and run both have same thing. need to figure out
+      start: agent.runAgent,
+      stop: agent.abortRun,
+      run: agent.runAgent,
+    };
+  }, [
+    agent?.state,
+    agent?.runAgent,
+    agent?.abortRun,
+    agent?.runAgent,
+    agent?.threadId,
+    agent?.isRunning,
+    agent?.agentId,
+    handleStateUpdate,
+    options.name,
+  ]);
 }
 
 const isExternalStateManagement = <T>(
@@ -440,38 +355,3 @@ const isExternalStateManagement = <T>(
 ): options is WithExternalStateManagement<T> => {
   return "state" in options && "setState" in options;
 };
-
-const isInternalStateManagementWithInitial = <T>(
-  options: UseCoagentOptions<T>,
-): options is WithInternalStateManagementAndInitial<T> => {
-  return "initialState" in options;
-};
-
-const getCoagentState = <T>({
-  coagentStates,
-  name,
-  options,
-}: {
-  coagentStates: Record<string, CoagentState>;
-  name: string;
-  options: UseCoagentOptions<T>;
-}) => {
-  if (coagentStates[name]) {
-    return coagentStates[name];
-  } else {
-    return {
-      name,
-      state: isInternalStateManagementWithInitial<T>(options) ? options.initialState : {},
-      config: options.config
-        ? options.config
-        : options.configurable
-          ? { configurable: options.configurable }
-          : {},
-      running: false,
-      active: false,
-      threadId: undefined,
-      nodeName: undefined,
-      runId: undefined,
-    };
-  }
-};

package/src/hooks/use-configure-chat-suggestions.tsx

@@ -0,0 +1,85 @@
+import {
+  useConfigureSuggestions,
+  useCopilotChatConfiguration,
+  useCopilotKit,
+  useSuggestions,
+} from "@copilotkitnext/react";
+import { StaticSuggestionsConfig, Suggestion } from "@copilotkitnext/core";
+import { useCopilotContext } from "../context";
+import { useEffect, useMemo } from "react";
+
+type StaticSuggestionInput = Omit<Suggestion, "isLoading"> & Partial<Pick<Suggestion, "isLoading">>;
+
+type StaticSuggestionsConfigInput = Omit<StaticSuggestionsConfig, "suggestions"> & {
+  suggestions: StaticSuggestionInput[];
+};
+
+type DynamicSuggestionsConfigInput = {
+  /**
+   * A prompt or instructions for the GPT to generate suggestions.
+   */
+  instructions: string;
+  /**
+   * The minimum number of suggestions to generate. Defaults to `1`.
+   * @default 1
+   */
+  minSuggestions?: number;
+  /**
+   * The maximum number of suggestions to generate. Defaults to `3`.
+   * @default 1
+   */
+  maxSuggestions?: number;
+
+  /**
+   * Whether the suggestions are available. Defaults to `enabled`.
+   * @default enabled
+   */
+  available?: "enabled" | "disabled" | "always" | "before-first-message" | "after-first-message";
+
+  /**
+   * An optional class name to apply to the suggestions.
+   */
+  className?: string;
+};
+
+export type UseCopilotChatSuggestionsConfiguration =
+  | DynamicSuggestionsConfigInput
+  | StaticSuggestionsConfigInput;
+
+export function useConfigureChatSuggestions(
+  config: UseCopilotChatSuggestionsConfiguration,
+  dependencies: any[] = [],
+): ReturnType<typeof useSuggestions> {
+  const { agentSession } = useCopilotContext();
+  const { copilotkit } = useCopilotKit();
+
+  const available = config.available === "enabled" ? "always" : config.available;
+
+  const finalSuggestionConfig = {
+    ...config,
+    available,
+    consumerAgentId: agentSession?.agentName, // Use chatConfig.agentId here
+  };
+  useConfigureSuggestions(finalSuggestionConfig, { deps: dependencies });
+
+  const result = useSuggestions({ agentId: agentSession?.agentName });
+
+  useEffect(() => {
+    if (finalSuggestionConfig.available === "disabled") return;
+    const subscription = copilotkit.subscribe({
+      onAgentsChanged: () => {
+        // When agents change, check if our target agent now exists and reload
+        const agent = copilotkit.getAgent(agentSession?.agentName!);
+        if (agent && !agent.isRunning && !result.suggestions.length) {
+          copilotkit.reloadSuggestions(agentSession?.agentName!);
+        }
+      },
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  return result;
+}