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

package/src/hooks/use-copilot-chat_internal.ts

@@ -1,23 +1,48 @@
-import { useRef, useEffect, useCallback, useState, useMemo } from "react";
-import { AgentSession, useCopilotContext, CopilotContextParams } from "../context/copilot-context";
-import { useCopilotMessagesContext, CopilotMessagesContextParams } from "../context";
+import { useRef, useEffect, useCallback, useMemo, useState, createElement } from "react";
+import { useCopilotContext } from "../context/copilot-context";
 import { SystemMessageFunction } from "../types";
-import { useChat, AppendMessageOptions } from "./use-chat";
-import { defaultCopilotContextCategories } from "../components";
-import { CoAgentStateRenderHandlerArguments } from "@copilotkit/shared";
 import { useAsyncCallback } from "../components/error-boundary/error-utils";
-import { reloadSuggestions as generateSuggestions } from "../utils";
-import type { SuggestionItem } from "../utils";
-
 import { Message } from "@copilotkit/shared";
-import {
-  Role as gqlRole,
-  TextMessage,
-  aguiToGQL,
-  gqlToAGUI,
-  Message as DeprecatedGqlMessage,
-} from "@copilotkit/runtime-client-gql";
+import { gqlToAGUI, Message as DeprecatedGqlMessage } from "@copilotkit/runtime-client-gql";
 import { useLangGraphInterruptRender } from "./use-langgraph-interrupt-render";
+import {
+  useAgent,
+  useCopilotChatConfiguration,
+  useCopilotKit,
+  useRenderCustomMessages,
+  useSuggestions,
+} from "@copilotkitnext/react";
+import { Suggestion } from "@copilotkitnext/core";
+import { useLazyToolRenderer } from "./use-lazy-tool-renderer";
+import {
+  useConfigureChatSuggestions,
+  UseCopilotChatSuggestionsConfiguration,
+} from "./use-configure-chat-suggestions";
+import { AbstractAgent, AGUIConnectNotImplementedError } from "@ag-ui/client";
+import {
+  CoAgentStateRenderBridge,
+  type CoAgentStateRenderBridgeProps,
+} from "./use-coagent-state-render-bridge";
+
+/**
+ * The type of suggestions to use in the chat.
+ *
+ * `auto` - Suggestions are generated automatically.
+ * `manual` - Suggestions are controlled programmatically.
+ * `SuggestionItem[]` - Static suggestions array.
+ */
+export type ChatSuggestions = "auto" | "manual" | Omit<Suggestion, "isLoading">[];
+
+export interface AppendMessageOptions {
+  /**
+   * Whether to run the chat completion after appending the message. Defaults to `true`.
+   */
+  followUp?: boolean;
+  /**
+   * Whether to clear the suggestions after appending the message. Defaults to `true`.
+   */
+  clearSuggestions?: boolean;
+}
 
 export interface UseCopilotChatOptions {
   /**
@@ -46,6 +71,8 @@ export interface UseCopilotChatOptions {
    * Disables inclusion of CopilotKit’s default system message. When true, no system message is sent (this also suppresses any custom message from <code>makeSystemMessage</code>).
    */
   disableSystemMessage?: boolean;
+
+  suggestions?: ChatSuggestions;
 }
 
 export interface MCPServerConfig {
@@ -53,6 +80,14 @@ export interface MCPServerConfig {
   apiKey?: string;
 }
 
+// Old suggestion item interface, for returning from useCopilotChatInternal
+interface SuggestionItem {
+  title: string;
+  message: string;
+  partial?: boolean;
+  className?: string;
+}
+
 export interface UseCopilotChatReturn {
   /**
    * @deprecated use `messages` instead, this is an old non ag-ui version of the messages
@@ -161,6 +196,18 @@ export interface UseCopilotChatReturn {
    */
   isLoading: boolean;
 
+  /**
+   * Whether the chat agent is available to generate responses
+   *
+   * ```tsx
+   * if (isAvailable) {
+   *   console.log("Loading...");
+   * } else {
+   *   console.log("Not loading");
+   * }
+   */
+  isAvailable: boolean;
+
   /** Manually trigger chat completion (advanced usage) */
   runChatCompletion: () => Promise<Message[]>;
 
@@ -174,13 +221,13 @@ export interface UseCopilotChatReturn {
    * Current suggestions array
    * Use this to read the current suggestions or in conjunction with setSuggestions for manual control
    */
-  suggestions: SuggestionItem[];
+  suggestions: Suggestion[];
 
   /**
    * Manually set suggestions
    * Useful for manual mode or custom suggestion workflows
    */
-  setSuggestions: (suggestions: SuggestionItem[]) => void;
+  setSuggestions: (suggestions: Suggestion[]) => void;
 
   /**
    * Trigger AI-powered suggestion generation
@@ -205,214 +252,182 @@ export interface UseCopilotChatReturn {
 
   /** Interrupt content for human-in-the-loop workflows */
   interrupt: string | React.ReactElement | null;
+
+  agent?: ReturnType<typeof useAgent>["agent"];
+
+  threadId?: string;
 }
 
-let globalSuggestionPromise: Promise<void> | null = null;
-
-export function useCopilotChat(options: UseCopilotChatOptions = {}): UseCopilotChatReturn {
-  const makeSystemMessage = options.makeSystemMessage ?? defaultSystemMessage;
-  const {
-    getContextString,
-    getFunctionCallHandler,
-    copilotApiConfig,
-    isLoading,
-    setIsLoading,
-    chatInstructions,
-    actions,
-    coagentStatesRef,
-    setCoagentStatesWithRef,
-    coAgentStateRenders,
-    agentSession,
-    setAgentSession,
-    forwardedParameters,
-    agentLock,
-    threadId,
-    setThreadId,
-    runId,
-    setRunId,
-    chatAbortControllerRef,
-    extensions,
-    setExtensions,
-    langGraphInterruptAction,
-    setLangGraphInterruptAction,
-    chatSuggestionConfiguration,
-
-    runtimeClient,
-  } = useCopilotContext();
-  const { messages, setMessages, suggestions, setSuggestions } = useCopilotMessagesContext();
-
-  // Simple state for MCP servers (keep for interface compatibility)
-  const [mcpServers, setLocalMcpServers] = useState<MCPServerConfig[]>([]);
-
-  // Basic suggestion state for programmatic control
-  const suggestionsAbortControllerRef = useRef<AbortController | null>(null);
-  const isLoadingSuggestionsRef = useRef<boolean>(false);
-
-  const abortSuggestions = useCallback(
-    (clear: boolean = true) => {
-      suggestionsAbortControllerRef.current?.abort("suggestions aborted by user");
-      suggestionsAbortControllerRef.current = null;
-      if (clear) {
-        setSuggestions([]);
-      }
-    },
-    [setSuggestions],
-  );
+function useConfigureSuggestions(suggestions?: UseCopilotChatOptions["suggestions"]) {
+  let suggestionsConfig: UseCopilotChatSuggestionsConfiguration;
 
-  // Memoize context with stable dependencies only
-  const stableContext = useMemo(() => {
-    return {
-      actions,
-      copilotApiConfig,
-      chatSuggestionConfiguration,
-      messages,
-      setMessages,
-      getContextString,
-      runtimeClient,
+  if (Array.isArray(suggestions)) {
+    suggestionsConfig = {
+      suggestions,
+      available: "always",
     };
-  }, [
-    JSON.stringify(Object.keys(actions)),
-    copilotApiConfig.chatApiEndpoint,
-    messages.length,
-    Object.keys(chatSuggestionConfiguration).length,
-  ]);
+  } else if (suggestions === "auto") {
+    suggestionsConfig = {
+      available: suggestions === "auto" ? "always" : "disabled",
+      instructions:
+        "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls.",
+    };
+  } else {
+    suggestionsConfig = { available: "disabled" } as UseCopilotChatSuggestionsConfiguration;
+  }
 
-  // Programmatic suggestion generation function
-  const generateSuggestionsFunc = useCallback(async () => {
-    // If a global suggestion is running, ignore this call
-    if (globalSuggestionPromise) {
-      return globalSuggestionPromise;
-    }
+  useConfigureChatSuggestions(suggestionsConfig);
+}
+
+export function useCopilotChatInternal({
+  suggestions,
+}: UseCopilotChatOptions = {}): UseCopilotChatReturn {
+  const { copilotkit } = useCopilotKit();
+  const { threadId, agentSession } = useCopilotContext();
+  const existingConfig = useCopilotChatConfiguration();
+  const [agentAvailable, setAgentAvailable] = useState(false);
+  useConfigureSuggestions(suggestions);
 
-    globalSuggestionPromise = (async () => {
+  // Apply priority: props > existing config > defaults
+  const resolvedAgentId = agentSession?.agentName ?? existingConfig?.agentId ?? "default";
+  const { agent } = useAgent({ agentId: resolvedAgentId });
+
+  useEffect(() => {
+    const connect = async (agent: AbstractAgent) => {
+      setAgentAvailable(false);
       try {
-        abortSuggestions();
-        isLoadingSuggestionsRef.current = true;
-        suggestionsAbortControllerRef.current = new AbortController();
-
-        setSuggestions([]);
-
-        await generateSuggestions(
-          stableContext as CopilotContextParams & CopilotMessagesContextParams,
-          chatSuggestionConfiguration,
-          setSuggestions,
-          suggestionsAbortControllerRef,
-        );
+        await copilotkit.connectAgent({ agent });
+        setAgentAvailable(true);
       } catch (error) {
-        // Re-throw to allow caller to handle the error
-        throw error;
-      } finally {
-        isLoadingSuggestionsRef.current = false;
-        globalSuggestionPromise = null;
+        if (error instanceof AGUIConnectNotImplementedError) {
+          // connect not implemented, ignore
+        } else {
+          throw error;
+        }
       }
-    })();
+    };
+    if (agent && existingConfig?.threadId && agent.threadId !== existingConfig.threadId) {
+      agent.threadId = existingConfig.threadId;
+      connect(agent);
+    }
+    return () => {};
+  }, [existingConfig?.threadId, agent, copilotkit, resolvedAgentId]);
 
-    return globalSuggestionPromise;
-  }, [stableContext, chatSuggestionConfiguration, setSuggestions, abortSuggestions]);
+  const interrupt = useLangGraphInterruptRender(agent);
 
-  const resetSuggestions = useCallback(() => {
-    setSuggestions([]);
-  }, [setSuggestions]);
+  const reset = () => {
+    agent?.setMessages([]);
+    agent?.setState(null);
+  };
 
-  // MCP servers logic
-  useEffect(() => {
-    if (mcpServers.length > 0) {
-      const serversCopy = [...mcpServers];
-      copilotApiConfig.mcpServers = serversCopy;
-      if (!copilotApiConfig.properties) {
-        copilotApiConfig.properties = {};
-      }
-      copilotApiConfig.properties.mcpServers = serversCopy;
-    }
-  }, [mcpServers, copilotApiConfig]);
-
-  const setMcpServers = useCallback((servers: MCPServerConfig[]) => {
-    setLocalMcpServers(servers);
-  }, []);
-
-  // Move these function declarations above the useChat call
-  const onCoAgentStateRender = useAsyncCallback(
-    async (args: CoAgentStateRenderHandlerArguments) => {
-      const { name, nodeName, state } = args;
-      let action = Object.values(coAgentStateRenders).find(
-        (action) => action.name === name && action.nodeName === nodeName,
+  const deleteMessage = useCallback(
+    (messageId: string) => {
+      const filteredMessages = (agent?.messages ?? []).filter(
+        (message) => message.id !== messageId,
       );
-      if (!action) {
-        action = Object.values(coAgentStateRenders).find(
-          (action) => action.name === name && !action.nodeName,
-        );
-      }
-      if (action) {
-        await action.handler?.({ state, nodeName });
-      }
+      agent?.setMessages(filteredMessages);
+    },
+    [agent?.setMessages, agent?.messages],
+  );
+
+  const latestDelete = useUpdatedRef(deleteMessage);
+  const latestDeleteFunc = useCallback(
+    (messageId: string) => {
+      return latestDelete.current(messageId);
     },
-    [coAgentStateRenders],
+    [latestDelete],
   );
 
-  const makeSystemMessageCallback = useCallback(() => {
-    const systemMessageMaker = makeSystemMessage || defaultSystemMessage;
-    // this always gets the latest context string
-    const contextString = getContextString([], defaultCopilotContextCategories); // TODO: make the context categories configurable
+  const currentSuggestions = useSuggestions({ agentId: resolvedAgentId });
 
-    return new TextMessage({
-      content: systemMessageMaker(contextString, chatInstructions),
-      role: gqlRole.System,
-    });
-  }, [getContextString, makeSystemMessage, chatInstructions]);
+  const reload = useAsyncCallback(
+    async (reloadMessageId: string): Promise<void> => {
+      const messages = agent?.messages ?? [];
+      // TODO: get isLoading
+      const isLoading = false;
+      if (isLoading || messages.length === 0) {
+        return;
+      }
 
-  const deleteMessage = useCallback(
-    (messageId: string) => {
-      setMessages((prev) => prev.filter((message) => message.id !== messageId));
+      const reloadMessageIndex = messages.findIndex((msg) => msg.id === reloadMessageId);
+      if (reloadMessageIndex === -1) {
+        console.warn(`Message with id ${reloadMessageId} not found`);
+        return;
+      }
+
+      const reloadMessageRole = messages[reloadMessageIndex].role;
+      if (reloadMessageRole !== "assistant") {
+        console.warn(`Regenerate cannot be performed on ${reloadMessageRole} role`);
+        return;
+      }
+      let historyCutoff: Message[] = [messages[0]];
+
+      if (messages.length > 2 && reloadMessageIndex !== 0) {
+        // message to regenerate from is now first.
+        // Work backwards to find the first the closest user message
+        const lastUserMessageBeforeRegenerate = messages
+          .slice(0, reloadMessageIndex)
+          .reverse()
+          .find((msg) => msg.role === "user");
+
+        if (!lastUserMessageBeforeRegenerate) {
+          historyCutoff = [messages[0]];
+        } else {
+          const indexOfLastUserMessageBeforeRegenerate = messages.findIndex(
+            (msg) => msg.id === lastUserMessageBeforeRegenerate.id,
+          );
+          // Include the user message, remove everything after it
+          historyCutoff = messages.slice(0, indexOfLastUserMessageBeforeRegenerate + 1);
+        }
+      } else if (messages.length > 2 && reloadMessageIndex === 0) {
+        historyCutoff = [messages[0], messages[1]];
+      }
+
+      agent?.setMessages(historyCutoff);
+
+      if (agent) {
+        copilotkit.runAgent({ agent });
+      }
+      return;
     },
-    [setMessages],
+    [agent?.setMessages, copilotkit?.runAgent],
   );
 
-  // Get chat helpers with updated config
-  const { append, reload, stop, runChatCompletion } = useChat({
-    ...options,
-    actions: Object.values(actions),
-    copilotConfig: copilotApiConfig,
-    initialMessages: aguiToGQL(options.initialMessages || []),
-    onFunctionCall: getFunctionCallHandler(),
-    onCoAgentStateRender,
-    messages,
-    setMessages,
-    makeSystemMessageCallback,
-    isLoading,
-    setIsLoading,
-    coagentStatesRef,
-    setCoagentStatesWithRef,
-    agentSession,
-    setAgentSession,
-    forwardedParameters,
-    threadId,
-    setThreadId,
-    runId,
-    setRunId,
-    chatAbortControllerRef,
-    agentLock,
-    extensions,
-    setExtensions,
-    langGraphInterruptAction,
-    setLangGraphInterruptAction,
-    disableSystemMessage: options.disableSystemMessage,
-  });
+  const latestSendMessageFunc = useAsyncCallback(
+    async (message: Message, options?: AppendMessageOptions) => {
+      if (!agent) return;
+      const followUp = options?.followUp ?? true;
+      if (options?.clearSuggestions) {
+        copilotkit.clearSuggestions(resolvedAgentId);
+      }
+      agent?.addMessage(message);
+      if (followUp) {
+        try {
+          await copilotkit.runAgent({ agent });
+        } catch (error) {
+          console.error("CopilotChat: runAgent failed", error);
+        }
+      }
+    },
+    [agent, copilotkit, resolvedAgentId],
+  );
 
-  const latestAppend = useUpdatedRef(append);
   const latestAppendFunc = useAsyncCallback(
     async (message: DeprecatedGqlMessage, options?: AppendMessageOptions) => {
-      abortSuggestions(options?.clearSuggestions);
-      return await latestAppend.current(message, options);
+      return latestSendMessageFunc(gqlToAGUI([message])[0], options);
     },
-    [latestAppend],
+    [latestSendMessageFunc],
   );
 
-  const latestSendMessageFunc = useAsyncCallback(
-    async (message: Message, options?: AppendMessageOptions) => {
-      abortSuggestions(options?.clearSuggestions);
-      return await latestAppend.current(aguiToGQL([message])[0] as DeprecatedGqlMessage, options);
+  const latestSetMessages = useUpdatedRef(agent?.setMessages);
+  const latestSetMessagesFunc = useCallback(
+    (messages: Message[] | DeprecatedGqlMessage[]) => {
+      if (messages.every((message) => message instanceof DeprecatedGqlMessage)) {
+        return latestSetMessages.current?.(gqlToAGUI(messages));
+      }
+      return latestSetMessages.current?.(messages);
     },
-    [latestAppend],
+    [latestSetMessages, agent],
   );
 
   const latestReload = useUpdatedRef(reload);
@@ -423,69 +438,94 @@ export function useCopilotChat(options: UseCopilotChatOptions = {}): UseCopilotC
     [latestReload],
   );
 
-  const latestStop = useUpdatedRef(stop);
+  const latestStop = useUpdatedRef(agent?.abortRun);
   const latestStopFunc = useCallback(() => {
-    return latestStop.current();
+    return latestStop.current?.();
   }, [latestStop]);
 
-  const latestDelete = useUpdatedRef(deleteMessage);
-  const latestDeleteFunc = useCallback(
-    (messageId: string) => {
-      return latestDelete.current(messageId);
-    },
-    [latestDelete],
-  );
+  const latestReset = useUpdatedRef(reset);
+  const latestResetFunc = useCallback(() => {
+    return latestReset.current();
+  }, [latestReset]);
 
-  const latestSetMessages = useUpdatedRef(setMessages);
-  const latestSetMessagesFunc = useCallback(
-    (messages: Message[] | DeprecatedGqlMessage[]) => {
-      if (messages.every((message) => message instanceof DeprecatedGqlMessage)) {
-        return latestSetMessages.current(messages as DeprecatedGqlMessage[]);
+  const lazyToolRendered = useLazyToolRenderer();
+  const renderCustomMessage = useRenderCustomMessages();
+  const legacyCustomMessageRenderer = useLegacyCoagentRenderer({
+    copilotkit,
+    agent,
+    agentId: resolvedAgentId,
+    threadId: existingConfig?.threadId ?? threadId,
+  });
+  const allMessages = agent?.messages ?? [];
+  const resolvedMessages = useMemo(() => {
+    let processedMessages = allMessages.map((message) => {
+      if (message.role !== "assistant") {
+        return message;
       }
-      return latestSetMessages.current(aguiToGQL(messages));
-    },
-    [latestSetMessages],
-  );
 
-  const latestRunChatCompletion = useUpdatedRef(runChatCompletion);
-  const latestRunChatCompletionFunc = useAsyncCallback(async () => {
-    return await latestRunChatCompletion.current!();
-  }, [latestRunChatCompletion]);
-
-  const reset = useCallback(() => {
-    latestStopFunc();
-    setMessages([]);
-    setRunId(null);
-    setCoagentStatesWithRef({});
-    let initialAgentSession: AgentSession | null = null;
-    if (agentLock) {
-      initialAgentSession = {
-        agentName: agentLock,
+      const lazyRendered = lazyToolRendered(message, allMessages);
+      if (lazyRendered) {
+        const renderedGenUi = lazyRendered();
+        if (renderedGenUi) {
+          return { ...message, generativeUI: () => renderedGenUi };
+        }
+      }
+
+      const bridgeRenderer = legacyCustomMessageRenderer || renderCustomMessage
+        ? () => {
+            const customRender = renderCustomMessage?.({
+              message,
+              position: "before",
+            });
+            if (customRender) {
+              return customRender;
+            }
+            return legacyCustomMessageRenderer?.({ message, position: "before" });
+          }
+        : null;
+
+      if (bridgeRenderer) {
+        return { ...message, generativeUI: bridgeRenderer };
+      }
+      return message;
+    });
+
+    const hasAssistantMessages = processedMessages.some((msg) => msg.role === "assistant");
+
+    if (legacyCustomMessageRenderer && !hasAssistantMessages) {
+      const placeholderId = `coagent-state-render-${resolvedAgentId}`;
+      const placeholderMessage: Message = {
+        id: placeholderId,
+        role: "assistant",
+        content: "",
+        name: "coagent-state-render",
       };
+      processedMessages = [
+        ...processedMessages,
+        {
+          ...placeholderMessage,
+          generativeUI: () =>
+            legacyCustomMessageRenderer({
+              message: placeholderMessage,
+              position: "before",
+            }),
+        } as Message,
+      ];
     }
-    setAgentSession(initialAgentSession);
-    // Reset suggestions when chat is reset
-    resetSuggestions();
+
+    return processedMessages;
   }, [
-    latestStopFunc,
-    setMessages,
-    setThreadId,
-    setCoagentStatesWithRef,
-    setAgentSession,
-    agentLock,
-    resetSuggestions,
+    agent?.messages,
+    lazyToolRendered,
+    allMessages,
+    renderCustomMessage,
+    legacyCustomMessageRenderer,
+    resolvedAgentId,
   ]);
 
-  const latestReset = useUpdatedRef(reset);
-  const latestResetFunc = useCallback(() => {
-    return latestReset.current();
-  }, [latestReset]);
-
-  const interrupt = useLangGraphInterruptRender();
-
+  // @ts-ignore
   return {
-    visibleMessages: messages,
-    messages: gqlToAGUI(messages, actions, coAgentStateRenders),
+    messages: resolvedMessages,
     sendMessage: latestSendMessageFunc,
     appendMessage: latestAppendFunc,
     setMessages: latestSetMessagesFunc,
@@ -493,16 +533,18 @@ export function useCopilotChat(options: UseCopilotChatOptions = {}): UseCopilotC
     stopGeneration: latestStopFunc,
     reset: latestResetFunc,
     deleteMessage: latestDeleteFunc,
-    runChatCompletion: latestRunChatCompletionFunc,
-    isLoading,
-    mcpServers,
-    setMcpServers,
-    suggestions,
-    setSuggestions,
-    generateSuggestions: generateSuggestionsFunc,
-    resetSuggestions,
-    isLoadingSuggestions: isLoadingSuggestionsRef.current,
+    isAvailable: !agentAvailable,
+    isLoading: Boolean(agent?.isRunning),
+    // mcpServers,
+    // setMcpServers,
+    suggestions: currentSuggestions.suggestions,
+    setSuggestions: (suggestions: Suggestion[]) => copilotkit.addSuggestionsConfig({ suggestions }),
+    generateSuggestions: async () => copilotkit.reloadSuggestions(resolvedAgentId),
+    resetSuggestions: () => copilotkit.clearSuggestions(resolvedAgentId),
+    isLoadingSuggestions: currentSuggestions.isLoading,
     interrupt,
+    agent,
+    threadId,
   };
 }
 
@@ -518,6 +560,55 @@ function useUpdatedRef<T>(value: T) {
   return ref;
 }
 
+type LegacyRenderParams = {
+  message: Message;
+  position: "before" | "after";
+};
+
+type LegacyRenderer = ((args: LegacyRenderParams) => any) | null;
+
+function useLegacyCoagentRenderer({
+  copilotkit,
+  agent,
+  agentId,
+  threadId,
+}: {
+  copilotkit: ReturnType<typeof useCopilotKit>["copilotkit"];
+  agent?: AbstractAgent;
+  agentId: string;
+  threadId?: string;
+}): LegacyRenderer {
+  return useMemo(() => {
+    if (!copilotkit || !agent) {
+      return null;
+    }
+
+    return ({ message, position }: LegacyRenderParams) => {
+      const effectiveThreadId = threadId ?? agent.threadId ?? "default";
+      const existingRunId = copilotkit.getRunIdForMessage(
+        agentId,
+        effectiveThreadId,
+        message.id,
+      );
+      const runId = existingRunId || `pending:${message.id}`;
+      const messageIndex = Math.max(agent.messages.findIndex((msg) => msg.id === message.id), 0);
+
+      const bridgeProps: CoAgentStateRenderBridgeProps = {
+        message: message as any,
+        position,
+        runId,
+        messageIndex,
+        messageIndexInRun: 0,
+        numberOfMessagesInRun: 1,
+        agentId,
+        stateSnapshot: (message as any).state,
+      };
+
+      return createElement(CoAgentStateRenderBridge, bridgeProps) as any;
+    };
+  }, [agent, agentId, copilotkit, threadId]);
+}
+
 export function defaultSystemMessage(
   contextString: string,
   additionalInstructions?: string,