@copilotkit/react-core 0.38.0-mme-pre.0 → 0.38.0-mme-alpha.0

package/src/hooks/use-chat.ts

@@ -1,31 +1,26 @@
-import { useRef, useState, useContext, useEffect } from "react";
-import { CopilotContext } from "../context/copilot-context";
+import { useRef } from "react";
 import {
-  Message,
-  ToolDefinition,
   FunctionCallHandler,
-  encodeResult,
-  FunctionCall,
   COPILOT_CLOUD_PUBLIC_API_KEY_HEADER,
+  Action,
+  actionParametersToJsonSchema,
 } from "@copilotkit/shared";
+import {
+  Message,
+  TextMessage,
+  ActionExecutionMessage,
+  ResultMessage,
+  CopilotRuntimeClient,
+  convertMessagesToGqlInput,
+  convertGqlOutputToMessages,
+  MessageStatusCode,
+  MessageRole,
+  Role,
+} from "@copilotkit/runtime-client-gql";
 
-import { nanoid } from "nanoid";
-import { fetchAndDecodeChatCompletion } from "../utils/fetch-chat-completion";
 import { CopilotApiConfig } from "../context";
-import untruncateJson from "untruncate-json";
 
 export type UseChatOptions = {
-  /**
-   * The API endpoint that accepts a `{ messages: Message[] }` object and returns
-   * a stream of tokens of the AI chat response. Defaults to `/api/chat`.
-   */
-  api?: string;
-  /**
-   * A unique identifier for the chat. If not provided, a random one will be
-   * generated. When provided, the `useChat` hook with the same `id` will
-   * have shared states across components.
-   */
-  id?: string;
   /**
    * System messages of the chat. Defaults to an empty array.
    */
@@ -35,51 +30,17 @@ export type UseChatOptions = {
    * If the function returns a `ChatRequest` object, the request will be sent
    * automatically to the API and will be used to update the chat.
    */
-  onFunctionCall?: React.MutableRefObject<FunctionCallHandler>;
-  /**
-   * HTTP headers to be sent with the API request.
-   */
-  headers?: Record<string, string> | Headers;
-  /**
-   * Extra body object to be sent with the API request.
-   * @example
-   * Send a `sessionId` to the API along with the messages.
-   * ```js
-   * useChat({
-   *   body: {
-   *     sessionId: '123',
-   *   }
-   * })
-   * ```
-   */
-  body?: object;
+  onFunctionCall?: FunctionCallHandler;
   /**
    * Function definitions to be sent to the API.
    */
-  tools?: React.MutableRefObject<ToolDefinition[]>;
-};
+  actions: Action[];
 
-export type UseChatHelpers = {
-  /**
-   * Append a user message to the chat list. This triggers the API call to fetch
-   * the assistant's response.
-   * @param message The message to append
-   */
-  append: (message: Message) => Promise<void>;
   /**
-   * Reload the last AI chat response for the given chat history. If the last
-   * message isn't from the assistant, it will request the API to generate a
-   * new response.
-   */
-  reload: () => Promise<void>;
-  /**
-   * Abort the current request immediately, keep the generated tokens if any.
+   * The CopilotKit API configuration.
    */
-  stop: () => void;
-};
-
-export type UseChatOptionsWithCopilotConfig = UseChatOptions & {
   copilotConfig: CopilotApiConfig;
+
   /**
    * The current list of messages in the chat.
    */
@@ -92,7 +53,7 @@ export type UseChatOptionsWithCopilotConfig = UseChatOptions & {
   /**
    * A callback to get the latest system message.
    */
-  makeSystemMessageCallback: () => Message;
+  makeSystemMessageCallback: () => TextMessage;
 
   /**
    * Whether the API request is in progress
@@ -105,78 +66,130 @@ export type UseChatOptionsWithCopilotConfig = UseChatOptions & {
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export function useChat(options: UseChatOptionsWithCopilotConfig): UseChatHelpers {
-  const { messages, setMessages, makeSystemMessageCallback } = options;
+export type UseChatHelpers = {
+  /**
+   * Append a user message to the chat list. This triggers the API call to fetch
+   * the assistant's response.
+   * @param message The message to append
+   */
+  append: (message: Message) => Promise<void>;
+  /**
+   * Reload the last AI chat response for the given chat history. If the last
+   * message isn't from the assistant, it will request the API to generate a
+   * new response.
+   */
+  reload: () => Promise<void>;
+  /**
+   * Abort the current request immediately, keep the generated tokens if any.
+   */
+  stop: () => void;
+};
+
+export function useChat(options: UseChatOptions): UseChatHelpers {
+  const {
+    messages,
+    setMessages,
+    makeSystemMessageCallback,
+    copilotConfig,
+    setIsLoading,
+    initialMessages,
+    isLoading,
+    actions,
+    onFunctionCall,
+  } = options;
   const abortControllerRef = useRef<AbortController>();
   const threadIdRef = useRef<string | null>(null);
   const runIdRef = useRef<string | null>(null);
-  const publicApiKey = options.copilotConfig.publicApiKey;
+  const publicApiKey = copilotConfig.publicApiKey;
   const headers = {
-    ...(options.headers || {}),
+    ...(copilotConfig.headers || {}),
     ...(publicApiKey ? { [COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {}),
   };
 
-  const runChatCompletion = async (messages: Message[]): Promise<Message[]> => {
-    options.setIsLoading(true);
+  const runtimeClient = new CopilotRuntimeClient({
+    url: copilotConfig.chatApiEndpoint,
+    publicApiKey: copilotConfig.publicApiKey,
+    headers,
+  });
+
+  const runChatCompletion = async (previousMessages: Message[]): Promise<Message[]> => {
+    setIsLoading(true);
 
-    const newMessages: Message[] = [
-      {
-        id: nanoid(),
-        createdAt: new Date(),
+    // this message is just a placeholder. It will disappear once the first real message
+    // is received
+    let newMessages: Message[] = [
+      new TextMessage({
         content: "",
-        role: "assistant",
-      },
+        role: Role.Assistant,
+      }),
     ];
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
 
-    setMessages([...messages, ...newMessages]);
-    // add threadId and runId to the body if it exists
-    const copilotConfigBody = options.copilotConfig.body || {};
-    if (threadIdRef.current) {
-      copilotConfigBody.threadId = threadIdRef.current;
-    }
-    if (runIdRef.current) {
-      copilotConfigBody.runId = runIdRef.current;
-    }
+    setMessages([...previousMessages, ...newMessages]);
 
     const systemMessage = makeSystemMessageCallback();
 
-    const messagesWithContext = [systemMessage, ...(options.initialMessages || []), ...messages];
-    const response = await fetchAndDecodeChatCompletion({
-      copilotConfig: { ...options.copilotConfig, body: copilotConfigBody },
-      messages: messagesWithContext,
-      tools: options.tools?.current,
-      headers: headers,
-      signal: abortController.signal,
-    });
-
-    if (response.headers.get("threadid")) {
-      threadIdRef.current = response.headers.get("threadid");
-    }
+    const messagesWithContext = [systemMessage, ...(initialMessages || []), ...previousMessages];
 
-    if (response.headers.get("runid")) {
-      runIdRef.current = response.headers.get("runid");
-    }
-
-    if (!response.events) {
-      setMessages([
-        ...messages,
-        {
-          id: nanoid(),
-          createdAt: new Date(),
-          content: response.statusText,
-          role: "assistant",
+    const stream = CopilotRuntimeClient.asStream(
+      runtimeClient.generateCopilotResponse({
+        frontend: {
+          actions: actions.map((action) => ({
+            name: action.name,
+            description: action.description || "",
+            jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters || [])),
+          })),
         },
-      ]);
-      options.setIsLoading(false);
-      throw new Error("Failed to fetch chat completion");
-    }
-
-    const reader = response.events.getReader();
-
-    // Whether to feed back the new messages to GPT
-    let feedback = false;
+        threadId: threadIdRef.current,
+        runId: runIdRef.current,
+        messages: convertMessagesToGqlInput(messagesWithContext),
+        ...(copilotConfig.cloud
+          ? {
+              cloud: {
+                guardrails: {
+                  inputValidationRules: {
+                    allowList: copilotConfig.cloud.guardrails.input.restrictToTopic.validTopics,
+                    denyList: copilotConfig.cloud.guardrails.input.restrictToTopic.invalidTopics,
+                  },
+                },
+              },
+            }
+          : {}),
+      }),
+    );
+
+    const guardrailsEnabled =
+      copilotConfig.cloud?.guardrails?.input?.restrictToTopic.enabled || false;
+
+    // TODO-PROTOCOL make sure all options are included in the final version
+    //
+    // const response = await fetchAndDecodeChatCompletion({
+    //   copilotConfig: { ...options.copilotConfig, body: copilotConfigBody },
+    //   messages: messagesWithContext,
+    //   tools: options.tools,
+    //   headers: headers,
+    //   signal: abortController.signal,
+    // });
+
+    // TODO-PROTOCOL handle errors
+    // if (!response.events) {
+    //   setMessages([
+    //     ...messages,
+    //     {
+    //       id: nanoid(),
+    //       createdAt: new Date(),
+    //       content: response.statusText,
+    //       role: "assistant",
+    //     },
+    //   ]);
+    //   options.setIsLoading(false);
+    //   throw new Error("Failed to fetch chat completion");
+    // }
+
+    const reader = stream.getReader();
+
+    let results: { [id: string]: string } = {};
 
     try {
       while (true) {
@@ -186,116 +199,94 @@ export function useChat(options: UseChatOptionsWithCopilotConfig): UseChatHelper
           break;
         }
 
-        let currentMessage = Object.assign({}, newMessages[newMessages.length - 1]);
-
-        if (value.type === "content") {
-          if (currentMessage.function_call || currentMessage.role === "function") {
-            // Create a new message if the previous one is a function call or result
-            currentMessage = {
-              id: nanoid(),
-              createdAt: new Date(),
-              content: "",
-              role: "assistant",
-            };
-            newMessages.push(currentMessage);
-          }
-          currentMessage.content += value.content;
-          newMessages[newMessages.length - 1] = currentMessage;
-          setMessages([...messages, ...newMessages]);
-        } else if (value.type === "result") {
-          // When we get a result message, it is already complete
-          currentMessage = {
-            id: nanoid(),
-            role: "function",
-            content: value.content,
-            name: value.name,
-          };
-          newMessages.push(currentMessage);
-          setMessages([...messages, ...newMessages]);
-
-          // After receiving a result, feed back the new messages to GPT
-          feedback = true;
-        } else if (value.type === "function" || value.type === "partial") {
-          // Create a new message if the previous one is not empty
-          if (
-            currentMessage.content != "" ||
-            currentMessage.function_call ||
-            currentMessage.role == "function"
-          ) {
-            currentMessage = {
-              id: nanoid(),
-              createdAt: new Date(),
-              content: "",
-              role: "assistant",
-            };
-            newMessages.push(currentMessage);
-          }
-          if (value.type === "function") {
-            currentMessage.function_call = {
-              name: value.name,
-              arguments: JSON.stringify(value.arguments),
-              scope: value.scope,
-            };
-          } else if (value.type === "partial") {
-            let partialArguments: any = {};
-            try {
-              partialArguments = JSON.parse(untruncateJson(value.arguments));
-            } catch (e) {}
-
-            currentMessage.partialFunctionCall = {
-              name: value.name,
-              arguments: partialArguments,
-            };
-          }
+        if (!value.generateCopilotResponse) {
+          continue;
+        }
+
+        threadIdRef.current = value.generateCopilotResponse.threadId || null;
+        runIdRef.current = value.generateCopilotResponse.runId || null;
+
+        const messages = convertGqlOutputToMessages(value.generateCopilotResponse.messages);
+
+        if (messages.length === 0) {
+          continue;
+        }
+
+        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 || "",
+            }),
+          ];
+        }
 
-          newMessages[newMessages.length - 1] = currentMessage;
-          setMessages([...messages, ...newMessages]);
-
-          if (value.type === "function") {
-            // Execute the function call
-            try {
-              if (options.onFunctionCall?.current && value.scope === "client") {
-                const result = await options.onFunctionCall.current(
-                  messages,
-                  currentMessage.function_call as FunctionCall,
-                );
-
-                currentMessage = {
-                  id: nanoid(),
-                  role: "function",
-                  content: encodeResult(result),
-                  name: (currentMessage.function_call! as FunctionCall).name!,
-                };
-                newMessages.push(currentMessage);
-                setMessages([...messages, ...newMessages]);
-
-                // After a function call, feed back the new messages to GPT
-                feedback = true;
+        // add messages to the chat
+        else {
+          for (const message of messages) {
+            newMessages.push(message);
+
+            if (
+              message instanceof ActionExecutionMessage &&
+              message.status.code !== MessageStatusCode.Pending &&
+              message.scope === "client" &&
+              onFunctionCall
+            ) {
+              if (!(message.id in results)) {
+                // 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
+                const result = await onFunctionCall({
+                  messages: previousMessages,
+                  name: message.name,
+                  args: message.arguments,
+                });
+                results[message.id] = result;
               }
-            } catch (error) {
-              console.error("Failed to execute function call", error);
-              // TODO: Handle error
-              // this should go to the message itself
+
+              // add the result message
+              newMessages.push(
+                new ResultMessage({
+                  result: ResultMessage.encodeResult(results[message.id]),
+                  actionExecutionId: message.id,
+                  actionName: message.name,
+                }),
+              );
             }
           }
         }
+
+        if (newMessages.length > 0) {
+          setMessages([...previousMessages, ...newMessages]);
+        }
       }
 
-      // If we want feedback, run the completion again and return the results
-      if (feedback) {
+      if (
+        // if we have client side results
+        Object.values(results).length ||
+        // or the last message we received is a result
+        (newMessages.length && newMessages[newMessages.length - 1] instanceof ResultMessage)
+      ) {
+        // run the completion again and return the result
+
         // wait for next tick to make sure all the react state updates
-        // TODO: This is a hack, is there a more robust way to do this?
         // - tried using react-dom's flushSync, but it did not work
         await new Promise((resolve) => setTimeout(resolve, 10));
 
-        return await runChatCompletion([...messages, ...newMessages]);
-      }
-      // otherwise, return the new messages
-      else {
+        return await runChatCompletion([...previousMessages, ...newMessages]);
+      } else {
         return newMessages.slice();
       }
     } finally {
-      options.setIsLoading(false);
+      setIsLoading(false);
     }
   };
 
@@ -304,7 +295,7 @@ export function useChat(options: UseChatOptionsWithCopilotConfig): UseChatHelper
   };
 
   const append = async (message: Message): Promise<void> => {
-    if (options.isLoading) {
+    if (isLoading) {
       return;
     }
     const newMessages = [...messages, message];
@@ -313,15 +304,16 @@ export function useChat(options: UseChatOptionsWithCopilotConfig): UseChatHelper
   };
 
   const reload = async (): Promise<void> => {
-    if (options.isLoading || messages.length === 0) {
+    if (isLoading || messages.length === 0) {
       return;
     }
     let newMessages = [...messages];
     const lastMessage = messages[messages.length - 1];
 
-    if (lastMessage.role === "assistant") {
+    if (lastMessage instanceof TextMessage && lastMessage.role === "assistant") {
       newMessages = newMessages.slice(0, -1);
     }
+
     setMessages(newMessages);
 
     return runChatCompletionAndHandleFunctionCall(newMessages);

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

@@ -17,16 +17,15 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
   action: FrontendAction<T>,
   dependencies?: any[],
 ): void {
-  const { setEntryPoint, removeEntryPoint, entryPoints, chatComponentsCache } =
-    useContext(CopilotContext);
+  const { setAction, removeAction, actions, chatComponentsCache } = useContext(CopilotContext);
   const idRef = useRef<string>(nanoid());
 
   // If the developer doesn't provide dependencies, we assume they want to
   // update handler and render function when the action object changes.
   // This ensures that any captured variables in the handler are up to date.
   if (dependencies === undefined) {
-    if (entryPoints[idRef.current]) {
-      entryPoints[idRef.current].handler = action.handler as any;
+    if (actions[idRef.current]) {
+      actions[idRef.current].handler = action.handler as any;
       if (typeof action.render === "function") {
         if (chatComponentsCache.current !== null) {
           chatComponentsCache.current[action.name] = action.render;
@@ -36,18 +35,18 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
   }
 
   useEffect(() => {
-    setEntryPoint(idRef.current, action as any);
+    setAction(idRef.current, action as any);
     if (chatComponentsCache.current !== null && action.render !== undefined) {
       chatComponentsCache.current[action.name] = action.render;
     }
     return () => {
       // NOTE: For now, we don't remove the chatComponentsCache entry when the action is removed.
       // This is because we currently don't have access to the messages array in CopilotContext.
-      removeEntryPoint(idRef.current);
+      removeAction(idRef.current);
     };
   }, [
-    setEntryPoint,
-    removeEntryPoint,
+    setAction,
+    removeAction,
     action.description,
     action.name,
     // This should be faster than deep equality checking

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

@@ -26,12 +26,13 @@
  * - `isLoading`: A boolean indicating if the chat is loading.
  *
  */
-import { useMemo, useContext, useRef, useEffect, useCallback } from "react";
+import { useContext, useRef, useEffect, useCallback } from "react";
 import { CopilotContext } from "../context/copilot-context";
-import { Message, ToolDefinition } from "@copilotkit/shared";
+import { Message, Role, TextMessage } from "@copilotkit/runtime-client-gql";
 import { SystemMessageFunction } from "../types";
 import { useChat } from "./use-chat";
 import { defaultCopilotContextCategories } from "../components";
+import { MessageStatusCode } from "@copilotkit/runtime-client-gql";
 
 export interface UseCopilotChatOptions {
   /**
@@ -86,7 +87,6 @@ export function useCopilotChat({
 }: UseCopilotChatOptions = {}): UseCopilotChatReturn {
   const {
     getContextString,
-    getChatCompletionFunctionDescriptions,
     getFunctionCallHandler,
     copilotApiConfig,
     messages,
@@ -94,6 +94,7 @@ export function useCopilotChat({
     isLoading,
     setIsLoading,
     chatInstructions,
+    actions,
   } = useContext(CopilotContext);
 
   // We need to ensure that makeSystemMessageCallback always uses the latest
@@ -111,31 +112,18 @@ export function useCopilotChat({
     // this always gets the latest context string
     const contextString = latestGetContextString.current([], defaultCopilotContextCategories); // TODO: make the context categories configurable
 
-    return {
-      id: "system",
+    return new TextMessage({
       content: systemMessageMaker(contextString, chatInstructions),
-      role: "system",
-    } as Message;
+      role: Role.System,
+    });
   }, [getContextString, makeSystemMessage, chatInstructions]);
 
-  const functionDescriptions: ToolDefinition[] = useMemo(() => {
-    return getChatCompletionFunctionDescriptions();
-  }, [getChatCompletionFunctionDescriptions]);
-
-  const tools = useUpdatedRef(functionDescriptions);
-  const onFunctionCall = useUpdatedRef(getFunctionCallHandler());
-
   const { append, reload, stop } = useChat({
     ...options,
+    actions: Object.values(actions),
     copilotConfig: copilotApiConfig,
-    id: options.id,
     initialMessages: options.initialMessages || [],
-    tools: tools,
-    onFunctionCall: onFunctionCall,
-    headers: { ...options.headers },
-    body: {
-      ...options.body,
-    },
+    onFunctionCall: getFunctionCallHandler(),
     messages,
     setMessages,
     makeSystemMessageCallback,
@@ -143,13 +131,8 @@ export function useCopilotChat({
     setIsLoading,
   });
 
-  const visibleMessages = messages.filter(
-    (message) =>
-      message.role === "user" || message.role === "assistant" || message.role === "function",
-  );
-
   return {
-    visibleMessages,
+    visibleMessages: messages,
     appendMessage: append,
     setMessages,
     reloadMessages: reload,
@@ -159,15 +142,8 @@ export function useCopilotChat({
   };
 }
 
-/**
- * A lot of our functions get called in the same run loop. Hooks get called with state,
- * then process async long running loops. If the hook gets called with the new state,
- * we want ongoing runloops to use the latest state.
- *
- * For example, the first action updated the context, now the second action should
- * see the latest context.
- */
-
+// store `value` in a ref and update
+// it whenever it changes.
 function useUpdatedRef<T>(value: T) {
   const ref = useRef(value);
 

package/src/hooks/use-make-copilot-actionable.ts

@@ -12,7 +12,7 @@ export function useMakeCopilotActionable<ActionInput extends any[]>(
   dependencies: any[],
 ) {
   const idRef = useRef(nanoid()); // generate a unique id
-  const { setEntryPoint, removeEntryPoint } = useContext(CopilotContext);
+  const { setAction, removeAction } = useContext(CopilotContext);
 
   const memoizedAnnotatedFunction: AnnotatedFunction<ActionInput> = useMemo(
     () => ({
@@ -26,10 +26,10 @@ export function useMakeCopilotActionable<ActionInput extends any[]>(
 
   useEffect(() => {
     const action = annotatedFunctionToAction(memoizedAnnotatedFunction as AnnotatedFunction<any[]>);
-    setEntryPoint(idRef.current, action);
+    setAction(idRef.current, action);
 
     return () => {
-      removeEntryPoint(idRef.current);
+      removeAction(idRef.current);
     };
-  }, [memoizedAnnotatedFunction, setEntryPoint, removeEntryPoint]);
+  }, [memoizedAnnotatedFunction, setAction, removeAction]);
 }