Merge branch 'main' into mme/discover-actions

Author: mme

CopilotKit/examples/next-openai/src/app/presentation/components/main/Presentation.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useCopilotReadable } from "@copilotkit/react-core";
+import { useCoAgent, useCopilotAction, useCopilotReadable } from "@copilotkit/react-core";
 import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
 import { useCallback, useMemo, useState } from "react";
 import { Slide } from "./Slide";

CopilotKit/packages/react-core/src/hooks/use-chat.ts

@@ -140,7 +140,15 @@ export function useChat(options: UseChatOptions): UseChatHelpers {
   const threadIdRef = useRef<string | null>(null);
   const runIdRef = useRef<string | null>(null);
 
+
   const runChatCompletionRef = useRef<(previousMessages: Message[]) => Promise<Message[]>>();
+  // We need to keep a ref of coagent states because of renderAndWait - making sure
+  // the latest state is sent to the API
+  // This is a workaround and needs to be addressed in the future
+  const coagentStatesRef = useRef<Record<string, CoagentState>>(coagentStates);
+  coagentStatesRef.current = coagentStates;
+  const agentSessionRef = useRef<AgentSession | null>(agentSession);
+  agentSessionRef.current = agentSession;
 
   const publicApiKey = copilotConfig.publicApiKey;
 
@@ -180,11 +188,13 @@ export function useChat(options: UseChatOptions): UseChatHelpers {
       runtimeClient.generateCopilotResponse({
         data: {
           frontend: {
-            actions: actions.map((action) => ({
-              name: action.name,
-              description: action.description || "",
-              jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters || [])),
-            })),
+            actions: actions
+              .filter((action) => !action.disabled)
+              .map((action) => ({
+                name: action.name,
+                description: action.description || "",
+                jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters || [])),
+              })),
             url: window.location.href,
           },
           threadId: threadIdRef.current,
@@ -211,12 +221,12 @@ export function useChat(options: UseChatOptions): UseChatHelpers {
           metadata: {
             requestType: CopilotRequestType.Chat,
           },
-          ...(agentSession
+          ...(agentSessionRef.current
             ? {
-                agentSession,
+                agentSession: agentSessionRef.current,
               }
             : {}),
-          agentStates: Object.values(coagentStates).map((state) => ({
+          agentStates: Object.values(coagentStatesRef.current).map((state) => ({
             agentName: state.name,
             state: JSON.stringify(state.state),
           })),
@@ -290,6 +300,10 @@ export function useChat(options: UseChatOptions): UseChatHelpers {
                 }
                 // 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 result = await onFunctionCall({
                     messages: previousMessages,
                     name: message.name,
@@ -336,6 +350,7 @@ export function useChat(options: UseChatOptions): UseChatHelpers {
             .find((message) => message instanceof AgentStateMessage);
 
           if (lastAgentStateMessage) {
+            console.log(lastAgentStateMessage);
             if (lastAgentStateMessage.running) {
               setCoagentStates((prevAgentStates) => ({
                 ...prevAgentStates,

CopilotKit/packages/react-core/src/hooks/use-copilot-action.ts

@@ -1,5 +1,5 @@
 import { useRef, useEffect } from "react";
-import { FrontendAction } from "../types/frontend-action";
+import { FrontendAction, ActionRenderProps, ActionRenderPropsWait } from "../types/frontend-action";
 import { useCopilotContext } from "../context/copilot-context";
 import { Parameter, randomId } from "@copilotkit/shared";
 
@@ -18,6 +18,44 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
 ): void {
   const { setAction, removeAction, actions, chatComponentsCache } = useCopilotContext();
   const idRef = useRef<string>(randomId());
+  const renderAndWaitRef = useRef<RenderAndWait | null>(null);
+
+  // clone the action to avoid mutating the original object
+  action = { ...action };
+
+  // If the developer provides a renderAndWait function, we transform the action
+  // to use a promise internally, so that we can treat it like a normal action.
+  if (action.renderAndWait) {
+    const renderAndWait = action.renderAndWait!;
+
+    // remove the renderAndWait function from the action
+    action.renderAndWait = undefined;
+
+    // add a handler that will be called when the action is executed
+    action.handler = (async () => {
+      // we create a new promise when the handler is called
+      let resolve: (result: any) => void;
+      let reject: (error: any) => void;
+      const promise = new Promise<any>((resolvePromise, rejectPromise) => {
+        resolve = resolvePromise;
+        reject = rejectPromise;
+      });
+      renderAndWaitRef.current = { promise, resolve: resolve!, reject: reject! };
+      // then we await the promise (it will be resolved in the original renderAndWait function)
+      return await promise;
+    }) as any;
+
+    // add a render function that will be called when the action is rendered
+    action.render = ((props: ActionRenderProps<any>): React.ReactElement => {
+      const waitProps: ActionRenderPropsWait<any> = {
+        status: props.status as any,
+        args: props.args,
+        result: props.result,
+        handler: props.status === "executing" ? renderAndWaitRef.current!.resolve : undefined,
+      };
+      return renderAndWait(waitProps);
+    }) as any;
+  }
 
   // If the developer doesn't provide dependencies, we assume they want to
   // update handler and render function when the action object changes.
@@ -34,9 +72,6 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
   }
 
   useEffect(() => {
-    if (action.disabled) {
-      return;
-    }
     setAction(idRef.current, action as any);
     if (chatComponentsCache.current !== null && action.render !== undefined) {
       chatComponentsCache.current.actions[action.name] = action.render;
@@ -62,6 +97,12 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
   ]);
 }
 
+interface RenderAndWait {
+  promise: Promise<any>;
+  resolve: (result: any) => void;
+  reject: (error: any) => void;
+}
+
 // Usage Example:
 // useCopilotAction({
 //   name: "myAction",

CopilotKit/packages/react-core/src/types/frontend-action.ts

@@ -37,6 +37,48 @@ interface CompleteStateNoArgs<T extends Parameter[] | [] = []> {
   result: any;
 }
 
+interface InProgressStateWait<T extends Parameter[] | [] = []> {
+  status: "inProgress";
+  args: Partial<MappedParameterTypes<T>>;
+  handler: undefined;
+  result: undefined;
+}
+
+interface ExecutingStateWait<T extends Parameter[] | [] = []> {
+  status: "executing";
+  args: MappedParameterTypes<T>;
+  handler: (result: any) => void;
+  result: undefined;
+}
+
+interface CompleteStateWait<T extends Parameter[] | [] = []> {
+  status: "complete";
+  args: MappedParameterTypes<T>;
+  handler: undefined;
+  result: any;
+}
+
+interface InProgressStateNoArgsWait<T extends Parameter[] | [] = []> {
+  status: "inProgress";
+  args: Partial<MappedParameterTypes<T>>;
+  handler: undefined;
+  result: undefined;
+}
+
+interface ExecutingStateNoArgsWait<T extends Parameter[] | [] = []> {
+  status: "executing";
+  args: MappedParameterTypes<T>;
+  handler: (result: any) => void;
+  result: undefined;
+}
+
+interface CompleteStateNoArgsWait<T extends Parameter[] | [] = []> {
+  status: "complete";
+  args: MappedParameterTypes<T>;
+  handler: undefined;
+  result: any;
+}
+
 export type ActionRenderProps<T extends Parameter[] | [] = []> =
   | CompleteState<T>
   | ExecutingState<T>
@@ -47,13 +89,34 @@ export type ActionRenderPropsNoArgs<T extends Parameter[] | [] = []> =
   | ExecutingStateNoArgs<T>
   | InProgressStateNoArgs<T>;
 
+export type ActionRenderPropsWait<T extends Parameter[] | [] = []> =
+  | CompleteStateWait<T>
+  | ExecutingStateWait<T>
+  | InProgressStateWait<T>;
+
+export type ActionRenderPropsNoArgsWait<T extends Parameter[] | [] = []> =
+  | CompleteStateNoArgsWait<T>
+  | ExecutingStateNoArgsWait<T>
+  | InProgressStateNoArgsWait<T>;
+
 export type FrontendAction<T extends Parameter[] | [] = []> = Action<T> & {
   disabled?: boolean;
-  render?:
-    | string
-    | (T extends []
-        ? (props: ActionRenderPropsNoArgs<T>) => string | React.ReactElement
-        : (props: ActionRenderProps<T>) => string | React.ReactElement);
-};
+} & (
+    | {
+        render?:
+          | string
+          | (T extends []
+              ? (props: ActionRenderPropsNoArgs<T>) => string | React.ReactElement
+              : (props: ActionRenderProps<T>) => string | React.ReactElement);
+        renderAndWait?: never;
+      }
+    | {
+        render?: never;
+        renderAndWait: T extends []
+          ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement
+          : (props: ActionRenderPropsWait<T>) => React.ReactElement;
+        handler?: never;
+      }
+  );
 
 export type RenderFunctionStatus = ActionRenderProps<any>["status"];

docs/pages/_meta.tsx

@@ -17,15 +17,35 @@ export default {
   "what-is-copilotkit": {
     title: "What is CopilotKit?",
   },
-  "quickstart-chatbot": {
-    title: "Quickstart: Chatbot",
+  "quickstart": {
+    title: "Quickstart",
     theme: {
       toc: false,
     },
   },
+  "___guides": {
+    type: "separator",
+    title: "Guides",
+  },
+  "quickstart-leftover": {
+    title: "Quickstart Leftover",
+    theme: {
+      toc: false,
+    },
+  },
+  "___other": {
+    type: "separator",
+    title: "Other",
+  },
   "coagents": {
     title: "CoAgents (Early Access)",
   },
+
+  "___tutorials": {
+    type: "separator",
+    title: "Tutorials",
+  },
+
   "tutorial-ai-todo-list-copilot": {
     title: "Tutorial: Todo List Copilot",
   },

docs/pages/concepts/_meta.tsx

@@ -12,8 +12,8 @@ export default {
   "self-hosting": {
     title: <SideNavTitleWithIcon title="Self Hosting" icon={HiOutlineServerStack} />,
   },
-  "different-llm-providers": {
-    title: <SideNavTitleWithIcon title="LLM Providers" icon={HiOutlineServerStack} />,
+  "different-llm-adapters": {
+    title: <SideNavTitleWithIcon title="LLM Adapters" icon={HiOutlineServerStack} />,
   },
   "agents": {
     title: <SideNavTitleWithIcon title="Agents (LangChain)" icon={PiGraphDuotone} />,

docs/pages/concepts/different-llm-adapters.mdx

@@ -0,0 +1,4 @@
+import LlmServiceAdapters from "@/snippets/llm-adapters.mdx";
+
+# LLM Adapters 
+<LlmServiceAdapters />

docs/pages/concepts/different-llm-providers.mdx

@@ -3,7 +3,7 @@ import { Frame } from "@/components";
 import { Steps } from 'nextra/components'
 import SelfHostingCopilotRuntimeCreateEndpoint from "@/snippets/self-hosting-copilot-runtime-create-endpoint.mdx";
 import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/self-hosting-copilot-runtime-configure-copilotkit-provider.mdx";
-import LlmServiceAdapters from "@/snippets/llm-service-adapters.mdx";
+import LlmServiceAdapters from "@/snippets/llm-adapters.mdx";
 
 # Self Hosting (Copilot Runtime)
 
@@ -25,14 +25,14 @@ You may choose to self-host the Copilot Runtime, or [use Copilot Cloud](https://
 
 </Steps>
 
-## LLM Provider Service Adapters 
+## LLM Adapters 
 <LlmServiceAdapters />
 
 
 ## Further Reading
 
 - [`CopilotRuntime` Class Reference](/reference/classes/copilot-runtime/CopilotRuntime)
-- [Service Adapters](/reference/classes/CopilotRuntime/service-adapters/OpenAIAdapter)
+- [LLM Adapters](/reference/classes/CopilotRuntime/llm-adapters/OpenAIAdapter)
 
 <Frame>
   <div className="w-full pb-4">