@copilotkit/react-core 1.4.8-no-pino-redact.1 → 1.4.8

package/src/hooks/use-chat.ts

@@ -26,6 +26,7 @@ import { CoagentState } from "../types/coagent-state";
 import { AgentSession } from "../context/copilot-context";
 import { useToast } from "../components/toast/toast-provider";
 import { useCopilotRuntimeClient } from "./use-copilot-runtime-client";
+import { useAsyncCallback } from "../components/error-boundary/error-utils";
 
 export type UseChatOptions = {
   /**
@@ -167,292 +168,318 @@ export function useChat(options: UseChatOptions): UseChatHelpers {
     credentials: copilotConfig.credentials,
   });
 
-  const runChatCompletion = async (previousMessages: Message[]): Promise<Message[]> => {
-    setIsLoading(true);
-
-    // this message is just a placeholder. It will disappear once the first real message
-    // is received
-    let newMessages: Message[] = [
-      new TextMessage({
-        content: "",
-        role: Role.Assistant,
-      }),
-    ];
-    const abortController = new AbortController();
-    abortControllerRef.current = abortController;
-
-    setMessages([...previousMessages, ...newMessages]);
-
-    const systemMessage = makeSystemMessageCallback();
-
-    const messagesWithContext = [systemMessage, ...(initialMessages || []), ...previousMessages];
-
-    const stream = runtimeClient.asStream(
-      runtimeClient.generateCopilotResponse({
-        data: {
-          frontend: {
-            actions: actions
-              .filter(
-                (action) =>
-                  action.available !== ActionInputAvailability.Disabled || !action.disabled,
-              )
-              .map((action) => {
-                let available: ActionInputAvailability | undefined =
-                  ActionInputAvailability.Enabled;
-                if (action.disabled) {
-                  available = ActionInputAvailability.Disabled;
-                } else if (action.available === "disabled") {
-                  available = ActionInputAvailability.Disabled;
-                } else if (action.available === "remote") {
-                  available = ActionInputAvailability.Remote;
-                }
-                return {
-                  name: action.name,
-                  description: action.description || "",
-                  jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters || [])),
-                  available,
-                };
-              }),
-            url: window.location.href,
-          },
-          threadId: threadIdRef.current,
-          runId: runIdRef.current,
-          messages: convertMessagesToGqlInput(filterAgentStateMessages(messagesWithContext)),
-          ...(copilotConfig.cloud
-            ? {
-                cloud: {
-                  ...(copilotConfig.cloud.guardrails?.input?.restrictToTopic?.enabled
-                    ? {
-                        guardrails: {
-                          inputValidationRules: {
-                            allowList:
-                              copilotConfig.cloud.guardrails.input.restrictToTopic.validTopics,
-                            denyList:
-                              copilotConfig.cloud.guardrails.input.restrictToTopic.invalidTopics,
+  const runChatCompletion = useAsyncCallback(
+    async (previousMessages: Message[]): Promise<Message[]> => {
+      setIsLoading(true);
+
+      // this message is just a placeholder. It will disappear once the first real message
+      // is received
+      let newMessages: Message[] = [
+        new TextMessage({
+          content: "",
+          role: Role.Assistant,
+        }),
+      ];
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      setMessages([...previousMessages, ...newMessages]);
+
+      const systemMessage = makeSystemMessageCallback();
+
+      const messagesWithContext = [systemMessage, ...(initialMessages || []), ...previousMessages];
+
+      const stream = runtimeClient.asStream(
+        runtimeClient.generateCopilotResponse({
+          data: {
+            frontend: {
+              actions: actions
+                .filter(
+                  (action) =>
+                    action.available !== ActionInputAvailability.Disabled || !action.disabled,
+                )
+                .map((action) => {
+                  let available: ActionInputAvailability | undefined =
+                    ActionInputAvailability.Enabled;
+                  if (action.disabled) {
+                    available = ActionInputAvailability.Disabled;
+                  } else if (action.available === "disabled") {
+                    available = ActionInputAvailability.Disabled;
+                  } else if (action.available === "remote") {
+                    available = ActionInputAvailability.Remote;
+                  }
+                  return {
+                    name: action.name,
+                    description: action.description || "",
+                    jsonSchema: JSON.stringify(
+                      actionParametersToJsonSchema(action.parameters || []),
+                    ),
+                    available,
+                  };
+                }),
+              url: window.location.href,
+            },
+            threadId: threadIdRef.current,
+            runId: runIdRef.current,
+            messages: convertMessagesToGqlInput(filterAgentStateMessages(messagesWithContext)),
+            ...(copilotConfig.cloud
+              ? {
+                  cloud: {
+                    ...(copilotConfig.cloud.guardrails?.input?.restrictToTopic?.enabled
+                      ? {
+                          guardrails: {
+                            inputValidationRules: {
+                              allowList:
+                                copilotConfig.cloud.guardrails.input.restrictToTopic.validTopics,
+                              denyList:
+                                copilotConfig.cloud.guardrails.input.restrictToTopic.invalidTopics,
+                            },
                           },
-                        },
-                      }
-                    : {}),
-                },
-              }
-            : {}),
-          metadata: {
-            requestType: CopilotRequestType.Chat,
+                        }
+                      : {}),
+                  },
+                }
+              : {}),
+            metadata: {
+              requestType: CopilotRequestType.Chat,
+            },
+            ...(agentSessionRef.current
+              ? {
+                  agentSession: agentSessionRef.current,
+                }
+              : {}),
+            agentStates: Object.values(coagentStatesRef.current!).map((state) => ({
+              agentName: state.name,
+              state: JSON.stringify(state.state),
+            })),
           },
-          ...(agentSessionRef.current
-            ? {
-                agentSession: agentSessionRef.current,
-              }
-            : {}),
-          agentStates: Object.values(coagentStatesRef.current!).map((state) => ({
-            agentName: state.name,
-            state: JSON.stringify(state.state),
-          })),
-        },
-        properties: copilotConfig.properties,
-        signal: abortControllerRef.current?.signal,
-      }),
-    );
-
-    const guardrailsEnabled =
-      copilotConfig.cloud?.guardrails?.input?.restrictToTopic.enabled || false;
-
-    const reader = stream.getReader();
-
-    let actionResults: { [id: string]: string } = {};
-    let executedCoAgentStateRenders: string[] = [];
-    let followUp: FrontendAction["followUp"] = undefined;
-
-    try {
-      while (true) {
-        let done, value;
-
-        try {
-          const readResult = await reader.read();
-          done = readResult.done;
-          value = readResult.value;
-        } catch (readError) {
-          break;
-        }
-
-        if (done) {
-          break;
-        }
+          properties: copilotConfig.properties,
+          signal: abortControllerRef.current?.signal,
+        }),
+      );
+
+      const guardrailsEnabled =
+        copilotConfig.cloud?.guardrails?.input?.restrictToTopic.enabled || false;
+
+      const reader = stream.getReader();
+
+      let actionResults: { [id: string]: string } = {};
+      let executedCoAgentStateRenders: string[] = [];
+      let followUp: FrontendAction["followUp"] = undefined;
+
+      try {
+        while (true) {
+          let done, value;
+
+          try {
+            const readResult = await reader.read();
+            done = readResult.done;
+            value = readResult.value;
+          } catch (readError) {
+            break;
+          }
 
-        if (!value?.generateCopilotResponse) {
-          continue;
-        }
+          if (done) {
+            break;
+          }
 
-        threadIdRef.current = value.generateCopilotResponse.threadId || null;
-        runIdRef.current = value.generateCopilotResponse.runId || null;
+          if (!value?.generateCopilotResponse) {
+            continue;
+          }
 
-        const messages = convertGqlOutputToMessages(
-          filterAdjacentAgentStateMessages(value.generateCopilotResponse.messages),
-        );
+          threadIdRef.current = value.generateCopilotResponse.threadId || null;
+          runIdRef.current = value.generateCopilotResponse.runId || null;
 
-        if (messages.length === 0) {
-          continue;
-        }
+          const messages = convertGqlOutputToMessages(
+            filterAdjacentAgentStateMessages(value.generateCopilotResponse.messages),
+          );
 
-        newMessages = [];
+          if (messages.length === 0) {
+            continue;
+          }
 
-        // request failed, display error message
-        if (
-          value.generateCopilotResponse.status?.__typename === "FailedResponseStatus" &&
-          value.generateCopilotResponse.status.reason === "GUARDRAILS_VALIDATION_FAILED"
-        ) {
-          newMessages = [
-            new TextMessage({
-              role: MessageRole.Assistant,
-              content: value.generateCopilotResponse.status.details?.guardrailsReason || "",
-            }),
-          ];
-        }
+          newMessages = [];
+
+          // request failed, display error message
+          if (
+            value.generateCopilotResponse.status?.__typename === "FailedResponseStatus" &&
+            value.generateCopilotResponse.status.reason === "GUARDRAILS_VALIDATION_FAILED"
+          ) {
+            newMessages = [
+              new TextMessage({
+                role: MessageRole.Assistant,
+                content: value.generateCopilotResponse.status.details?.guardrailsReason || "",
+              }),
+            ];
+          }
 
-        // add messages to the chat
-        else {
-          for (const message of messages) {
-            newMessages.push(message);
-            // execute regular action executions
-            if (
-              message.isActionExecutionMessage() &&
-              message.status.code !== MessageStatusCode.Pending &&
-              message.scope === "client" &&
-              onFunctionCall
-            ) {
-              if (!(message.id in actionResults)) {
-                // Do not execute a function call if guardrails are enabled but the status is not known
+          // add messages to the chat
+          else {
+            for (const message of messages) {
+              newMessages.push(message);
+              // execute regular action executions
+              if (
+                message.isActionExecutionMessage() &&
+                message.status.code !== MessageStatusCode.Pending &&
+                message.scope === "client" &&
+                onFunctionCall
+              ) {
+                if (!(message.id in actionResults)) {
+                  // Do not execute a function call if guardrails are enabled but the status is not known
+                  if (guardrailsEnabled && value.generateCopilotResponse.status === undefined) {
+                    break;
+                  }
+                  // execute action
+                  try {
+                    // We update the message state before calling the handler so that the render
+                    // function can be called with `executing` state
+                    setMessages([...previousMessages, ...newMessages]);
+
+                    const action = actions.find((action) => action.name === message.name);
+
+                    if (action) {
+                      followUp = action.followUp;
+                    }
+
+                    const result = await onFunctionCall({
+                      messages: previousMessages,
+                      name: message.name,
+                      args: message.arguments,
+                    });
+                    actionResults[message.id] = result;
+                  } catch (e) {
+                    actionResults[message.id] = `Failed to execute action ${message.name}`;
+                    console.error(`Failed to execute action ${message.name}: ${e}`);
+                  }
+                }
+                // add the result message
+                newMessages.push(
+                  new ResultMessage({
+                    result: ResultMessage.encodeResult(actionResults[message.id]),
+                    actionExecutionId: message.id,
+                    actionName: message.name,
+                  }),
+                );
+              }
+              // execute coagent actions
+              if (
+                message.isAgentStateMessage() &&
+                !message.active &&
+                !executedCoAgentStateRenders.includes(message.id) &&
+                onCoAgentStateRender
+              ) {
+                // Do not execute a coagent action if guardrails are enabled but the status is not known
                 if (guardrailsEnabled && value.generateCopilotResponse.status === undefined) {
                   break;
                 }
-                // execute action
-                try {
-                  // We update the message state before calling the handler so that the render
-                  // function can be called with `executing` state
-                  setMessages([...previousMessages, ...newMessages]);
-
-                  const action = actions.find((action) => action.name === message.name);
-
-                  if (action) {
-                    followUp = action.followUp;
-                  }
-
-                  const result = await onFunctionCall({
-                    messages: previousMessages,
-                    name: message.name,
-                    args: message.arguments,
-                  });
-                  actionResults[message.id] = result;
-                } catch (e) {
-                  actionResults[message.id] = `Failed to execute action ${message.name}`;
-                  console.error(`Failed to execute action ${message.name}: ${e}`);
-                }
+                // execute coagent action
+                await onCoAgentStateRender({
+                  name: message.agentName,
+                  nodeName: message.nodeName,
+                  state: message.state,
+                });
+                executedCoAgentStateRenders.push(message.id);
               }
-              // add the result message
-              newMessages.push(
-                new ResultMessage({
-                  result: ResultMessage.encodeResult(actionResults[message.id]),
-                  actionExecutionId: message.id,
-                  actionName: message.name,
-                }),
-              );
             }
-            // execute coagent actions
-            if (
-              message.isAgentStateMessage() &&
-              !message.active &&
-              !executedCoAgentStateRenders.includes(message.id) &&
-              onCoAgentStateRender
-            ) {
-              // Do not execute a coagent action if guardrails are enabled but the status is not known
-              if (guardrailsEnabled && value.generateCopilotResponse.status === undefined) {
-                break;
+
+            const lastAgentStateMessage = [...messages]
+              .reverse()
+              .find((message) => message.isAgentStateMessage());
+
+            if (lastAgentStateMessage) {
+              setCoagentStatesWithRef((prevAgentStates) => ({
+                ...prevAgentStates,
+                [lastAgentStateMessage.agentName]: {
+                  name: lastAgentStateMessage.agentName,
+                  state: lastAgentStateMessage.state,
+                  running: lastAgentStateMessage.running,
+                  active: lastAgentStateMessage.active,
+                  threadId: lastAgentStateMessage.threadId,
+                  nodeName: lastAgentStateMessage.nodeName,
+                  runId: lastAgentStateMessage.runId,
+                },
+              }));
+              if (lastAgentStateMessage.running) {
+                setAgentSession({
+                  threadId: lastAgentStateMessage.threadId,
+                  agentName: lastAgentStateMessage.agentName,
+                  nodeName: lastAgentStateMessage.nodeName,
+                });
+              } else {
+                setAgentSession(null);
               }
-              // execute coagent action
-              await onCoAgentStateRender({
-                name: message.agentName,
-                nodeName: message.nodeName,
-                state: message.state,
-              });
-              executedCoAgentStateRenders.push(message.id);
             }
           }
 
-          const lastAgentStateMessage = [...messages]
-            .reverse()
-            .find((message) => message.isAgentStateMessage());
-
-          if (lastAgentStateMessage) {
-            setCoagentStatesWithRef((prevAgentStates) => ({
-              ...prevAgentStates,
-              [lastAgentStateMessage.agentName]: {
-                name: lastAgentStateMessage.agentName,
-                state: lastAgentStateMessage.state,
-                running: lastAgentStateMessage.running,
-                active: lastAgentStateMessage.active,
-                threadId: lastAgentStateMessage.threadId,
-                nodeName: lastAgentStateMessage.nodeName,
-                runId: lastAgentStateMessage.runId,
-              },
-            }));
-            if (lastAgentStateMessage.running) {
-              setAgentSession({
-                threadId: lastAgentStateMessage.threadId,
-                agentName: lastAgentStateMessage.agentName,
-                nodeName: lastAgentStateMessage.nodeName,
-              });
-            } else {
-              setAgentSession(null);
-            }
+          if (newMessages.length > 0) {
+            // Update message state
+            setMessages([...previousMessages, ...newMessages]);
           }
         }
 
-        if (newMessages.length > 0) {
-          // Update message state
-          setMessages([...previousMessages, ...newMessages]);
-        }
-      }
+        if (
+          // if followUp is not explicitly false
+          followUp !== false &&
+          // if we have client side results
+          (Object.values(actionResults).length ||
+            // or the last message we received is a result
+            (newMessages.length && newMessages[newMessages.length - 1].isResultMessage()))
+        ) {
+          // run the completion again and return the result
 
-      if (
-        // if followUp is not explicitly false
-        followUp !== false &&
-        // if we have client side results
-        (Object.values(actionResults).length ||
-          // or the last message we received is a result
-          (newMessages.length && newMessages[newMessages.length - 1].isResultMessage()))
-      ) {
-        // run the completion again and return the result
-
-        // wait for next tick to make sure all the react state updates
-        // - tried using react-dom's flushSync, but it did not work
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        return await runChatCompletionRef.current!([...previousMessages, ...newMessages]);
-      } else {
-        return newMessages.slice();
+          // wait for next tick to make sure all the react state updates
+          // - tried using react-dom's flushSync, but it did not work
+          await new Promise((resolve) => setTimeout(resolve, 10));
+
+          return await runChatCompletionRef.current!([...previousMessages, ...newMessages]);
+        } else {
+          return newMessages.slice();
+        }
+      } finally {
+        setIsLoading(false);
       }
-    } finally {
-      setIsLoading(false);
-    }
-  };
+    },
+    [
+      messages,
+      setMessages,
+      makeSystemMessageCallback,
+      copilotConfig,
+      setIsLoading,
+      initialMessages,
+      isLoading,
+      actions,
+      onFunctionCall,
+      onCoAgentStateRender,
+      setCoagentStatesWithRef,
+      coagentStatesRef,
+      agentSession,
+      setAgentSession,
+    ],
+  );
 
   runChatCompletionRef.current = runChatCompletion;
 
-  const runChatCompletionAndHandleFunctionCall = async (messages: Message[]): Promise<void> => {
-    await runChatCompletionRef.current!(messages);
-  };
-
-  const append = async (message: Message): Promise<void> => {
-    if (isLoading) {
-      return;
-    }
+  const runChatCompletionAndHandleFunctionCall = useAsyncCallback(
+    async (messages: Message[]): Promise<void> => {
+      await runChatCompletionRef.current!(messages);
+    },
+    [messages],
+  );
+
+  const append = useAsyncCallback(
+    async (message: Message): Promise<void> => {
+      if (isLoading) {
+        return;
+      }
 
-    const newMessages = [...messages, message];
-    setMessages(newMessages);
-    return runChatCompletionAndHandleFunctionCall(newMessages);
-  };
+      const newMessages = [...messages, message];
+      setMessages(newMessages);
+      return runChatCompletionAndHandleFunctionCall(newMessages);
+    },
+    [isLoading, messages, setMessages, runChatCompletionAndHandleFunctionCall],
+  );
 
-  const reload = async (): Promise<void> => {
+  const reload = useAsyncCallback(async (): Promise<void> => {
     if (isLoading || messages.length === 0) {
       return;
     }
@@ -466,7 +493,7 @@ export function useChat(options: UseChatOptions): UseChatHelpers {
     setMessages(newMessages);
 
     return runChatCompletionAndHandleFunctionCall(newMessages);
-  };
+  }, [isLoading, messages, setMessages, runChatCompletionAndHandleFunctionCall]);
 
   const stop = (): void => {
     abortControllerRef.current?.abort();

package/src/hooks/use-coagent-state-render.ts

@@ -12,13 +12,13 @@
  * ### Simple Usage
  *
  * ```tsx
- * import { useCoagentStateRender } from "@copilotkit/react-core";
+ * import { useCoAgentStateRender } from "@copilotkit/react-core";
  *
  * type YourAgentState = {
  *   agent_state_property: string;
  * }
  *
- * useCoagentStateRender<YourAgentState>({
+ * useCoAgentStateRender<YourAgentState>({
  *   name: "basic_agent",
  *   nodeName: "optionally_specify_a_specific_node",
  *   render: ({ status, state, nodeName }) => {

package/src/hooks/use-coagent.ts

@@ -99,6 +99,7 @@ import { CoagentState } from "../types/coagent-state";
 import { useCopilotChat } from "./use-copilot-chat";
 import { Message } from "@copilotkit/runtime-client-gql";
 import { flushSync } from "react-dom";
+import { useAsyncCallback } from "../components/error-boundary/error-utils";
 
 interface WithInternalStateManagementAndInitial<T> {
   /**
@@ -266,22 +267,24 @@ export function useCoAgent<T = any>(options: UseCoagentOptions<T>): UseCoagentRe
     }
   }, [isExternalStateManagement(options) ? JSON.stringify(options.state) : undefined]);
 
+  const runAgentCallback = useAsyncCallback(
+    async (hint?: HintFunction) => {
+      await runAgent(name, context, appendMessage, runChatCompletion, hint);
+    },
+    [name, context, appendMessage, runChatCompletion],
+  );
+
   // Return the state and setState function
   return {
     name,
     nodeName: coagentState.nodeName,
-    state,
-    setState,
+    threadId: coagentState.threadId,
     running: coagentState.running,
-    start: () => {
-      startAgent(name, context);
-    },
-    stop: () => {
-      stopAgent(name, context);
-    },
-    run: (hint?: HintFunction) => {
-      return runAgent(name, context, appendMessage, runChatCompletion, hint);
-    },
+    state: coagentState.state,
+    setState: isExternalStateManagement(options) ? options.setState : setState,
+    start: () => startAgent(name, context),
+    stop: () => stopAgent(name, context),
+    run: runAgentCallback,
   };
 }