@copilotkit/react-core 1.4.0-pre.16 → 1.4.0

package/dist/types/frontend-action.d.ts

@@ -40,32 +40,41 @@ interface InProgressStateWait<T extends Parameter[] | [] = []> {
 interface ExecutingStateWait<T extends Parameter[] | [] = []> {
     status: "executing";
     args: MappedParameterTypes<T>;
+    /** @deprecated use respond instead */
     handler: (result: any) => void;
+    respond: (result: any) => void;
     result: undefined;
 }
 interface CompleteStateWait<T extends Parameter[] | [] = []> {
     status: "complete";
     args: MappedParameterTypes<T>;
+    /** @deprecated use respond instead */
     handler: undefined;
+    respond: undefined;
     result: any;
 }
 interface InProgressStateNoArgsWait<T extends Parameter[] | [] = []> {
     status: "inProgress";
     args: Partial<MappedParameterTypes<T>>;
+    /** @deprecated use respond instead */
     handler: undefined;
+    respond: undefined;
     result: undefined;
 }
 interface ExecutingStateNoArgsWait<T extends Parameter[] | [] = []> {
     status: "executing";
     args: MappedParameterTypes<T>;
+    /** @deprecated use respond instead */
     handler: (result: any) => void;
+    respond: (result: any) => void;
     result: undefined;
 }
 interface CompleteStateNoArgsWait<T extends Parameter[] | [] = []> {
     status: "complete";
     args: MappedParameterTypes<T>;
+    /** @deprecated use respond instead */
     handler: undefined;
-    result: any;
+    respond: undefined;
 }
 type ActionRenderProps<T extends Parameter[] | [] = []> = CompleteState<T> | ExecutingState<T> | InProgressState<T>;
 type ActionRenderPropsNoArgs<T extends Parameter[] | [] = []> = CompleteStateNoArgs<T> | ExecutingStateNoArgs<T> | InProgressStateNoArgs<T>;
@@ -76,10 +85,14 @@ type FrontendAction<T extends Parameter[] | [] = []> = Action<T> & {
     followUp?: boolean;
 } & ({
     render?: string | (T extends [] ? (props: ActionRenderPropsNoArgs<T>) => string | React.ReactElement : (props: ActionRenderProps<T>) => string | React.ReactElement);
+    /** @deprecated use renderAndWaitForResponse instead */
     renderAndWait?: never;
+    renderAndWaitForResponse?: never;
 } | {
     render?: never;
-    renderAndWait: T extends [] ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement : (props: ActionRenderPropsWait<T>) => React.ReactElement;
+    /** @deprecated use renderAndWaitForResponse instead */
+    renderAndWait?: T extends [] ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement : (props: ActionRenderPropsWait<T>) => React.ReactElement;
+    renderAndWaitForResponse?: T extends [] ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement : (props: ActionRenderPropsWait<T>) => React.ReactElement;
     handler?: never;
 });
 type RenderFunctionStatus = ActionRenderProps<any>["status"];

package/dist/types/frontend-action.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/frontend-action.ts"],"sourcesContent":["import { Action, Parameter, MappedParameterTypes } from \"@copilotkit/shared\";\nimport React from \"react\";\n\ninterface InProgressState<T extends Parameter[] | [] = []> {\n  status: \"inProgress\";\n  args: Partial<MappedParameterTypes<T>>;\n  result: undefined;\n}\n\ninterface ExecutingState<T extends Parameter[] | [] = []> {\n  status: \"executing\";\n  args: MappedParameterTypes<T>;\n  result: undefined;\n}\n\ninterface CompleteState<T extends Parameter[] | [] = []> {\n  status: \"complete\";\n  args: MappedParameterTypes<T>;\n  result: any;\n}\n\ninterface InProgressStateNoArgs<T extends Parameter[] | [] = []> {\n  status: \"inProgress\";\n  args: Partial<MappedParameterTypes<T>>;\n  result: undefined;\n}\n\ninterface ExecutingStateNoArgs<T extends Parameter[] | [] = []> {\n  status: \"executing\";\n  args: MappedParameterTypes<T>;\n  result: undefined;\n}\n\ninterface CompleteStateNoArgs<T extends Parameter[] | [] = []> {\n  status: \"complete\";\n  args: MappedParameterTypes<T>;\n  result: any;\n}\n\ninterface InProgressStateWait<T extends Parameter[] | [] = []> {\n  status: \"inProgress\";\n  args: Partial<MappedParameterTypes<T>>;\n  handler: undefined;\n  result: undefined;\n}\n\ninterface ExecutingStateWait<T extends Parameter[] | [] = []> {\n  status: \"executing\";\n  args: MappedParameterTypes<T>;\n  handler: (result: any) => void;\n  result: undefined;\n}\n\ninterface CompleteStateWait<T extends Parameter[] | [] = []> {\n  status: \"complete\";\n  args: MappedParameterTypes<T>;\n  handler: undefined;\n  result: any;\n}\n\ninterface InProgressStateNoArgsWait<T extends Parameter[] | [] = []> {\n  status: \"inProgress\";\n  args: Partial<MappedParameterTypes<T>>;\n  handler: undefined;\n  result: undefined;\n}\n\ninterface ExecutingStateNoArgsWait<T extends Parameter[] | [] = []> {\n  status: \"executing\";\n  args: MappedParameterTypes<T>;\n  handler: (result: any) => void;\n  result: undefined;\n}\n\ninterface CompleteStateNoArgsWait<T extends Parameter[] | [] = []> {\n  status: \"complete\";\n  args: MappedParameterTypes<T>;\n  handler: undefined;\n  result: any;\n}\n\nexport type ActionRenderProps<T extends Parameter[] | [] = []> =\n  | CompleteState<T>\n  | ExecutingState<T>\n  | InProgressState<T>;\n\nexport type ActionRenderPropsNoArgs<T extends Parameter[] | [] = []> =\n  | CompleteStateNoArgs<T>\n  | ExecutingStateNoArgs<T>\n  | InProgressStateNoArgs<T>;\n\nexport type ActionRenderPropsWait<T extends Parameter[] | [] = []> =\n  | CompleteStateWait<T>\n  | ExecutingStateWait<T>\n  | InProgressStateWait<T>;\n\nexport type ActionRenderPropsNoArgsWait<T extends Parameter[] | [] = []> =\n  | CompleteStateNoArgsWait<T>\n  | ExecutingStateNoArgsWait<T>\n  | InProgressStateNoArgsWait<T>;\n\nexport type FrontendAction<T extends Parameter[] | [] = []> = Action<T> & {\n  disabled?: boolean;\n  followUp?: boolean;\n} & (\n    | {\n        render?:\n          | string\n          | (T extends []\n              ? (props: ActionRenderPropsNoArgs<T>) => string | React.ReactElement\n              : (props: ActionRenderProps<T>) => string | React.ReactElement);\n        renderAndWait?: never;\n      }\n    | {\n        render?: never;\n        renderAndWait: T extends []\n          ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement\n          : (props: ActionRenderPropsWait<T>) => React.ReactElement;\n        handler?: never;\n      }\n  );\n\nexport type RenderFunctionStatus = ActionRenderProps<any>[\"status\"];\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../src/types/frontend-action.ts"],"sourcesContent":["import { Action, Parameter, MappedParameterTypes } from \"@copilotkit/shared\";\nimport React from \"react\";\n\ninterface InProgressState<T extends Parameter[] | [] = []> {\n  status: \"inProgress\";\n  args: Partial<MappedParameterTypes<T>>;\n  result: undefined;\n}\n\ninterface ExecutingState<T extends Parameter[] | [] = []> {\n  status: \"executing\";\n  args: MappedParameterTypes<T>;\n  result: undefined;\n}\n\ninterface CompleteState<T extends Parameter[] | [] = []> {\n  status: \"complete\";\n  args: MappedParameterTypes<T>;\n  result: any;\n}\n\ninterface InProgressStateNoArgs<T extends Parameter[] | [] = []> {\n  status: \"inProgress\";\n  args: Partial<MappedParameterTypes<T>>;\n  result: undefined;\n}\n\ninterface ExecutingStateNoArgs<T extends Parameter[] | [] = []> {\n  status: \"executing\";\n  args: MappedParameterTypes<T>;\n  result: undefined;\n}\n\ninterface CompleteStateNoArgs<T extends Parameter[] | [] = []> {\n  status: \"complete\";\n  args: MappedParameterTypes<T>;\n  result: any;\n}\n\ninterface InProgressStateWait<T extends Parameter[] | [] = []> {\n  status: \"inProgress\";\n  args: Partial<MappedParameterTypes<T>>;\n  handler: undefined;\n  result: undefined;\n}\n\ninterface ExecutingStateWait<T extends Parameter[] | [] = []> {\n  status: \"executing\";\n  args: MappedParameterTypes<T>;\n  /** @deprecated use respond instead */\n  handler: (result: any) => void;\n  respond: (result: any) => void;\n  result: undefined;\n}\n\ninterface CompleteStateWait<T extends Parameter[] | [] = []> {\n  status: \"complete\";\n  args: MappedParameterTypes<T>;\n  /** @deprecated use respond instead */\n  handler: undefined;\n  respond: undefined;\n  result: any;\n}\n\ninterface InProgressStateNoArgsWait<T extends Parameter[] | [] = []> {\n  status: \"inProgress\";\n  args: Partial<MappedParameterTypes<T>>;\n  /** @deprecated use respond instead */\n  handler: undefined;\n  respond: undefined;\n  result: undefined;\n}\n\ninterface ExecutingStateNoArgsWait<T extends Parameter[] | [] = []> {\n  status: \"executing\";\n  args: MappedParameterTypes<T>;\n  /** @deprecated use respond instead */\n  handler: (result: any) => void;\n  respond: (result: any) => void;\n  result: undefined;\n}\n\ninterface CompleteStateNoArgsWait<T extends Parameter[] | [] = []> {\n  status: \"complete\";\n  args: MappedParameterTypes<T>;\n  /** @deprecated use respond instead */\n  handler: undefined;\n  respond: undefined;\n}\n\nexport type ActionRenderProps<T extends Parameter[] | [] = []> =\n  | CompleteState<T>\n  | ExecutingState<T>\n  | InProgressState<T>;\n\nexport type ActionRenderPropsNoArgs<T extends Parameter[] | [] = []> =\n  | CompleteStateNoArgs<T>\n  | ExecutingStateNoArgs<T>\n  | InProgressStateNoArgs<T>;\n\nexport type ActionRenderPropsWait<T extends Parameter[] | [] = []> =\n  | CompleteStateWait<T>\n  | ExecutingStateWait<T>\n  | InProgressStateWait<T>;\n\nexport type ActionRenderPropsNoArgsWait<T extends Parameter[] | [] = []> =\n  | CompleteStateNoArgsWait<T>\n  | ExecutingStateNoArgsWait<T>\n  | InProgressStateNoArgsWait<T>;\n\nexport type FrontendAction<T extends Parameter[] | [] = []> = Action<T> & {\n  disabled?: boolean;\n  followUp?: boolean;\n} & (\n    | {\n        render?:\n          | string\n          | (T extends []\n              ? (props: ActionRenderPropsNoArgs<T>) => string | React.ReactElement\n              : (props: ActionRenderProps<T>) => string | React.ReactElement);\n        /** @deprecated use renderAndWaitForResponse instead */\n        renderAndWait?: never;\n        renderAndWaitForResponse?: never;\n      }\n    | {\n        render?: never;\n        /** @deprecated use renderAndWaitForResponse instead */\n        renderAndWait?: T extends []\n          ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement\n          : (props: ActionRenderPropsWait<T>) => React.ReactElement;\n        renderAndWaitForResponse?: T extends []\n          ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement\n          : (props: ActionRenderPropsWait<T>) => React.ReactElement;\n        handler?: never;\n      }\n  );\n\nexport type RenderFunctionStatus = ActionRenderProps<any>[\"status\"];\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.4.0-pre.16",
+  "version": "1.4.0",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -36,14 +36,14 @@
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
     "@types/react-dom": "^18.2.4",
-    "eslint-config-custom": "1.4.0-pre.16",
-    "tsconfig": "1.4.0-pre.16"
+    "eslint-config-custom": "1.4.0",
+    "tsconfig": "1.4.0"
   },
   "dependencies": {
     "@scarf/scarf": "^1.3.0",
     "untruncate-json": "^0.0.1",
-    "@copilotkit/runtime-client-gql": "1.4.0-pre.16",
-    "@copilotkit/shared": "1.4.0-pre.16"
+    "@copilotkit/runtime-client-gql": "1.4.0",
+    "@copilotkit/shared": "1.4.0"
   },
   "keywords": [
     "copilotkit",

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

@@ -1,3 +1,78 @@
+/**
+ * Example usage of useCopilotAction with complex parameters:
+ *
+ * @example
+ * useCopilotAction({
+ *   name: "myAction",
+ *   parameters: [
+ *     { name: "arg1", type: "string", enum: ["option1", "option2", "option3"], required: false },
+ *     { name: "arg2", type: "number" },
+ *     {
+ *       name: "arg3",
+ *       type: "object",
+ *       attributes: [
+ *         { name: "nestedArg1", type: "boolean" },
+ *         { name: "xyz", required: false },
+ *       ],
+ *     },
+ *     { name: "arg4", type: "number[]" },
+ *   ],
+ *   handler: ({ arg1, arg2, arg3, arg4 }) => {
+ *     const x = arg3.nestedArg1;
+ *     const z = arg3.xyz;
+ *     console.log(arg1, arg2, arg3);
+ *   },
+ * });
+ *
+ * @example
+ * // Simple action without parameters
+ * useCopilotAction({
+ *   name: "myAction",
+ *   handler: () => {
+ *     console.log("No parameters provided.");
+ *   },
+ * });
+ *
+ * @example
+ * // Interactive action with UI rendering and response handling
+ * useCopilotAction({
+ *   name: "handleMeeting",
+ *   description: "Handle a meeting by booking or canceling",
+ *   parameters: [
+ *     {
+ *       name: "meeting",
+ *       type: "string",
+ *       description: "The meeting to handle",
+ *       required: true,
+ *     },
+ *     {
+ *       name: "date",
+ *       type: "string",
+ *       description: "The date of the meeting",
+ *       required: true,
+ *     },
+ *     {
+ *       name: "title",
+ *       type: "string",
+ *       description: "The title of the meeting",
+ *       required: true,
+ *     },
+ *   ],
+ *   renderAndWaitForResponse: ({ args, respond, status }) => {
+ *     const { meeting, date, title } = args;
+ *     return (
+ *       <MeetingConfirmationDialog
+ *         meeting={meeting}
+ *         date={date}
+ *         title={title}
+ *         onConfirm={() => respond('meeting confirmed')}
+ *         onCancel={() => respond('meeting canceled')}
+ *       />
+ *     );
+ *   },
+ * });
+ */
+
 /**
  * <img src="/images/use-copilot-action/useCopilotAction.gif" width="500" />
  * `useCopilotAction` is a React hook that you can use in your application to provide
@@ -46,10 +121,15 @@
  *
  * This hooks enables you to dynamically generate UI elements and render them in the copilot chat. For more information, check out the [Generative UI](/concepts/generative-ui) page.
  */
-import { useRef, useEffect } from "react";
-import { FrontendAction, ActionRenderProps, ActionRenderPropsWait } from "../types/frontend-action";
-import { useCopilotContext } from "../context/copilot-context";
 import { Parameter, randomId } from "@copilotkit/shared";
+import { createElement, Fragment, useEffect, useRef } from "react";
+import { useCopilotContext } from "../context/copilot-context";
+import {
+  ActionRenderProps,
+  ActionRenderPropsNoArgsWait,
+  ActionRenderPropsWait,
+  FrontendAction,
+} from "../types/frontend-action";
 
 // We implement useCopilotAction dependency handling so that
 // the developer has the option to not provide any dependencies.
@@ -66,19 +146,18 @@ 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);
+  const renderAndWaitRef = useRef<RenderAndWaitForResponse | 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!;
-
+  if (action.renderAndWait || action.renderAndWaitForResponse) {
+    const renderAndWait = action.renderAndWait || action.renderAndWaitForResponse;
     // remove the renderAndWait function from the action
     action.renderAndWait = undefined;
-
+    action.renderAndWaitForResponse = 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
@@ -94,14 +173,36 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
     }) 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,
+    action.render = ((props: ActionRenderProps<T>): React.ReactElement => {
+      // Create type safe waitProps based on whether T extends empty array or not
+      const waitProps = {
+        status: props.status,
         args: props.args,
         result: props.result,
         handler: props.status === "executing" ? renderAndWaitRef.current!.resolve : undefined,
+        respond: props.status === "executing" ? renderAndWaitRef.current!.resolve : undefined,
+      } as T extends [] ? ActionRenderPropsNoArgsWait<T> : ActionRenderPropsWait<T>;
+
+      // Type guard to check if renderAndWait is for no args case
+      const isNoArgsRenderWait = (
+        _fn:
+          | ((props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement)
+          | ((props: ActionRenderPropsWait<T>) => React.ReactElement),
+      ): _fn is (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement => {
+        return action.parameters?.length === 0;
       };
-      return renderAndWait(waitProps);
+
+      // Safely call renderAndWait with correct props type
+      if (renderAndWait) {
+        if (isNoArgsRenderWait(renderAndWait)) {
+          return renderAndWait(waitProps as ActionRenderPropsNoArgsWait<T>);
+        } else {
+          return renderAndWait(waitProps as ActionRenderPropsWait<T>);
+        }
+      }
+
+      // Return empty Fragment instead of null
+      return createElement(Fragment);
     }) as any;
   }
 
@@ -145,38 +246,8 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
   ]);
 }
 
-interface RenderAndWait {
+interface RenderAndWaitForResponse {
   promise: Promise<any>;
   resolve: (result: any) => void;
   reject: (error: any) => void;
 }
-
-// Usage Example:
-// useCopilotAction({
-//   name: "myAction",
-//   parameters: [
-//     { name: "arg1", type: "string", enum: ["option1", "option2", "option3"], required: false },
-//     { name: "arg2", type: "number" },
-//     {
-//       name: "arg3",
-//       type: "object",
-//       attributes: [
-//         { name: "nestedArg1", type: "boolean" },
-//         { name: "xyz", required: false },
-//       ],
-//     },
-//     { name: "arg4", type: "number[]" },
-//   ],
-//   handler: ({ arg1, arg2, arg3, arg4 }) => {
-//     const x = arg3.nestedArg1;
-//     const z = arg3.xyz;
-//     console.log(arg1, arg2, arg3);
-//   },
-// });
-
-// useCopilotAction({
-//   name: "myAction",
-//   handler: () => {
-//     console.log("No parameters provided.");
-//   },
-// });

package/src/types/frontend-action.ts

@@ -47,36 +47,45 @@ interface InProgressStateWait<T extends Parameter[] | [] = []> {
 interface ExecutingStateWait<T extends Parameter[] | [] = []> {
   status: "executing";
   args: MappedParameterTypes<T>;
+  /** @deprecated use respond instead */
   handler: (result: any) => void;
+  respond: (result: any) => void;
   result: undefined;
 }
 
 interface CompleteStateWait<T extends Parameter[] | [] = []> {
   status: "complete";
   args: MappedParameterTypes<T>;
+  /** @deprecated use respond instead */
   handler: undefined;
+  respond: undefined;
   result: any;
 }
 
 interface InProgressStateNoArgsWait<T extends Parameter[] | [] = []> {
   status: "inProgress";
   args: Partial<MappedParameterTypes<T>>;
+  /** @deprecated use respond instead */
   handler: undefined;
+  respond: undefined;
   result: undefined;
 }
 
 interface ExecutingStateNoArgsWait<T extends Parameter[] | [] = []> {
   status: "executing";
   args: MappedParameterTypes<T>;
+  /** @deprecated use respond instead */
   handler: (result: any) => void;
+  respond: (result: any) => void;
   result: undefined;
 }
 
 interface CompleteStateNoArgsWait<T extends Parameter[] | [] = []> {
   status: "complete";
   args: MappedParameterTypes<T>;
+  /** @deprecated use respond instead */
   handler: undefined;
-  result: any;
+  respond: undefined;
 }
 
 export type ActionRenderProps<T extends Parameter[] | [] = []> =
@@ -109,11 +118,17 @@ export type FrontendAction<T extends Parameter[] | [] = []> = Action<T> & {
           | (T extends []
               ? (props: ActionRenderPropsNoArgs<T>) => string | React.ReactElement
               : (props: ActionRenderProps<T>) => string | React.ReactElement);
+        /** @deprecated use renderAndWaitForResponse instead */
         renderAndWait?: never;
+        renderAndWaitForResponse?: never;
       }
     | {
         render?: never;
-        renderAndWait: T extends []
+        /** @deprecated use renderAndWaitForResponse instead */
+        renderAndWait?: T extends []
+          ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement
+          : (props: ActionRenderPropsWait<T>) => React.ReactElement;
+        renderAndWaitForResponse?: T extends []
           ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement
           : (props: ActionRenderPropsWait<T>) => React.ReactElement;
         handler?: never;

package/dist/chunk-RYDEG77L.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-copilot-action.ts"],"sourcesContent":["/**\n * <img src=\"/images/use-copilot-action/useCopilotAction.gif\" width=\"500\" />\n * `useCopilotAction` is a React hook that you can use in your application to provide\n * custom actions that can be called by the AI. Essentially, it allows the Copilot to\n * execute these actions contextually during a chat, based on the user's interactions\n * and needs.\n *\n * Here's how it works:\n *\n * Use `useCopilotAction` to set up actions that the Copilot can call. To provide\n * more context to the Copilot, you can provide it with a `description` (for example to explain\n * what the action does, under which conditions it can be called, etc.).\n *\n * Then you define the parameters of the action, which can be simple, e.g. primitives like strings or numbers,\n * or complex, e.g. objects or arrays.\n *\n * Finally, you provide a `handler` function that receives the parameters and returns a result.\n * CopilotKit takes care of automatically inferring the parameter types, so you get type safety\n * and autocompletion for free.\n *\n * To render a custom UI for the action, you can provide a `render()` function. This function\n * lets you render a custom component or return a string to display.\n *\n * ## Usage\n *\n * ### Simple Usage\n *\n * ```tsx\n * useCopilotAction({\n *   name: \"sayHello\",\n *   description: \"Say hello to someone.\",\n *   parameters: [\n *     {\n *       name: \"name\",\n *       type: \"string\",\n *       description: \"name of the person to say greet\",\n *     },\n *   ],\n *   handler: async ({ name }) => {\n *     alert(`Hello, ${name}!`);\n *   },\n * });\n * ```\n *\n * ## Generative UI\n *\n * This hooks enables you to dynamically generate UI elements and render them in the copilot chat. For more information, check out the [Generative UI](/concepts/generative-ui) page.\n */\nimport { useRef, useEffect } from \"react\";\nimport { FrontendAction, ActionRenderProps, ActionRenderPropsWait } from \"../types/frontend-action\";\nimport { useCopilotContext } from \"../context/copilot-context\";\nimport { Parameter, randomId } from \"@copilotkit/shared\";\n\n// We implement useCopilotAction dependency handling so that\n// the developer has the option to not provide any dependencies.\n// In this case, we assume they want to update the handler on each rerender.\n// To avoid getting stuck in an infinite loop, we update the handler directly,\n// skipping React state updates.\n// This is ok in this case, because the handler is not part of any UI that\n// needs to be updated.\n// useCallback, useMemo or other memoization techniques are not suitable here,\n// because they will cause a infinite rerender loop.\nexport function useCopilotAction<const T extends Parameter[] | [] = []>(\n  action: FrontendAction<T>,\n  dependencies?: any[],\n): void {\n  const { setAction, removeAction, actions, chatComponentsCache } = useCopilotContext();\n  const idRef = useRef<string>(randomId());\n  const renderAndWaitRef = useRef<RenderAndWait | null>(null);\n\n  // clone the action to avoid mutating the original object\n  action = { ...action };\n\n  // If the developer provides a renderAndWait function, we transform the action\n  // to use a promise internally, so that we can treat it like a normal action.\n  if (action.renderAndWait) {\n    const renderAndWait = action.renderAndWait!;\n\n    // remove the renderAndWait function from the action\n    action.renderAndWait = undefined;\n\n    // add a handler that will be called when the action is executed\n    action.handler = (async () => {\n      // we create a new promise when the handler is called\n      let resolve: (result: any) => void;\n      let reject: (error: any) => void;\n      const promise = new Promise<any>((resolvePromise, rejectPromise) => {\n        resolve = resolvePromise;\n        reject = rejectPromise;\n      });\n      renderAndWaitRef.current = { promise, resolve: resolve!, reject: reject! };\n      // then we await the promise (it will be resolved in the original renderAndWait function)\n      return await promise;\n    }) as any;\n\n    // add a render function that will be called when the action is rendered\n    action.render = ((props: ActionRenderProps<any>): React.ReactElement => {\n      const waitProps: ActionRenderPropsWait<any> = {\n        status: props.status as any,\n        args: props.args,\n        result: props.result,\n        handler: props.status === \"executing\" ? renderAndWaitRef.current!.resolve : undefined,\n      };\n      return renderAndWait(waitProps);\n    }) as any;\n  }\n\n  // If the developer doesn't provide dependencies, we assume they want to\n  // update handler and render function when the action object changes.\n  // This ensures that any captured variables in the handler are up to date.\n  if (dependencies === undefined) {\n    if (actions[idRef.current]) {\n      actions[idRef.current].handler = action.handler as any;\n      if (typeof action.render === \"function\") {\n        if (chatComponentsCache.current !== null) {\n          chatComponentsCache.current.actions[action.name] = action.render;\n        }\n      }\n    }\n  }\n\n  useEffect(() => {\n    setAction(idRef.current, action as any);\n    if (chatComponentsCache.current !== null && action.render !== undefined) {\n      chatComponentsCache.current.actions[action.name] = action.render;\n    }\n    return () => {\n      // NOTE: For now, we don't remove the chatComponentsCache entry when the action is removed.\n      // This is because we currently don't have access to the messages array in CopilotContext.\n      removeAction(idRef.current);\n    };\n  }, [\n    setAction,\n    removeAction,\n    action.description,\n    action.name,\n    action.disabled,\n    // This should be faster than deep equality checking\n    // In addition, all major JS engines guarantee the order of object keys\n    JSON.stringify(action.parameters),\n    // include render only if it's a string\n    typeof action.render === \"string\" ? action.render : undefined,\n    // dependencies set by the developer\n    ...(dependencies || []),\n  ]);\n}\n\ninterface RenderAndWait {\n  promise: Promise<any>;\n  resolve: (result: any) => void;\n  reject: (error: any) => void;\n}\n\n// Usage Example:\n// useCopilotAction({\n//   name: \"myAction\",\n//   parameters: [\n//     { name: \"arg1\", type: \"string\", enum: [\"option1\", \"option2\", \"option3\"], required: false },\n//     { name: \"arg2\", type: \"number\" },\n//     {\n//       name: \"arg3\",\n//       type: \"object\",\n//       attributes: [\n//         { name: \"nestedArg1\", type: \"boolean\" },\n//         { name: \"xyz\", required: false },\n//       ],\n//     },\n//     { name: \"arg4\", type: \"number[]\" },\n//   ],\n//   handler: ({ arg1, arg2, arg3, arg4 }) => {\n//     const x = arg3.nestedArg1;\n//     const z = arg3.xyz;\n//     console.log(arg1, arg2, arg3);\n//   },\n// });\n\n// useCopilotAction({\n//   name: \"myAction\",\n//   handler: () => {\n//     console.log(\"No parameters provided.\");\n//   },\n// });\n"],"mappings":";;;;;;;;;AAgDA,SAAS,QAAQ,iBAAiB;AAGlC,SAAoB,gBAAgB;AAW7B,SAAS,iBACd,QACA,cACM;AACN,QAAM,EAAE,WAAW,cAAc,SAAS,oBAAoB,IAAI,kBAAkB;AACpF,QAAM,QAAQ,OAAe,SAAS,CAAC;AACvC,QAAM,mBAAmB,OAA6B,IAAI;AAG1D,WAAS,mBAAK;AAId,MAAI,OAAO,eAAe;AACxB,UAAM,gBAAgB,OAAO;AAG7B,WAAO,gBAAgB;AAGvB,WAAO,UAAW,MAAY;AAE5B,UAAI;AACJ,UAAI;AACJ,YAAM,UAAU,IAAI,QAAa,CAAC,gBAAgB,kBAAkB;AAClE,kBAAU;AACV,iBAAS;AAAA,MACX,CAAC;AACD,uBAAiB,UAAU,EAAE,SAAS,SAAmB,OAAgB;AAEzE,aAAO,MAAM;AAAA,IACf;AAGA,WAAO,SAAU,CAAC,UAAsD;AACtE,YAAM,YAAwC;AAAA,QAC5C,QAAQ,MAAM;AAAA,QACd,MAAM,MAAM;AAAA,QACZ,QAAQ,MAAM;AAAA,QACd,SAAS,MAAM,WAAW,cAAc,iBAAiB,QAAS,UAAU;AAAA,MAC9E;AACA,aAAO,cAAc,SAAS;AAAA,IAChC;AAAA,EACF;AAKA,MAAI,iBAAiB,QAAW;AAC9B,QAAI,QAAQ,MAAM,OAAO,GAAG;AAC1B,cAAQ,MAAM,OAAO,EAAE,UAAU,OAAO;AACxC,UAAI,OAAO,OAAO,WAAW,YAAY;AACvC,YAAI,oBAAoB,YAAY,MAAM;AACxC,8BAAoB,QAAQ,QAAQ,OAAO,IAAI,IAAI,OAAO;AAAA,QAC5D;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;AACd,cAAU,MAAM,SAAS,MAAa;AACtC,QAAI,oBAAoB,YAAY,QAAQ,OAAO,WAAW,QAAW;AACvE,0BAAoB,QAAQ,QAAQ,OAAO,IAAI,IAAI,OAAO;AAAA,IAC5D;AACA,WAAO,MAAM;AAGX,mBAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA;AAAA;AAAA,IAGP,KAAK,UAAU,OAAO,UAAU;AAAA;AAAA,IAEhC,OAAO,OAAO,WAAW,WAAW,OAAO,SAAS;AAAA;AAAA,IAEpD,GAAI,gBAAgB,CAAC;AAAA,EACvB,CAAC;AACH;","names":[]}