@copilotkit/react-core 1.4.0-pre-1-4-0.14 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +70 -165
- package/dist/{chunk-RYDEG77L.mjs → chunk-7LKXEJXM.mjs} +19 -6
- package/dist/chunk-7LKXEJXM.mjs.map +1 -0
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +18 -5
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/index.mjs +11 -11
- package/dist/hooks/use-coagent.mjs +1 -1
- package/dist/hooks/use-copilot-action.d.ts +124 -1
- package/dist/hooks/use-copilot-action.js +18 -5
- package/dist/hooks/use-copilot-action.js.map +1 -1
- package/dist/hooks/use-copilot-action.mjs +1 -1
- package/dist/hooks/use-copilot-chat.mjs +1 -1
- package/dist/index.js +18 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +11 -11
- package/dist/types/frontend-action.d.ts +15 -2
- package/dist/types/frontend-action.js.map +1 -1
- package/package.json +5 -5
- package/src/hooks/use-copilot-action.ts +114 -43
- package/src/types/frontend-action.ts +17 -2
- package/dist/chunk-RYDEG77L.mjs.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -9,25 +9,21 @@ import {
|
|
|
9
9
|
CopilotTask
|
|
10
10
|
} from "./chunk-7DFHFZJT.mjs";
|
|
11
11
|
import "./chunk-BWYAGPEF.mjs";
|
|
12
|
-
import {
|
|
13
|
-
useCopilotReadable
|
|
14
|
-
} from "./chunk-ANOG3W5S.mjs";
|
|
15
|
-
import {
|
|
16
|
-
useMakeCopilotDocumentReadable
|
|
17
|
-
} from "./chunk-TRXKPXDE.mjs";
|
|
18
|
-
import {
|
|
19
|
-
useCoAgentStateRender
|
|
20
|
-
} from "./chunk-27IPQFJP.mjs";
|
|
21
12
|
import {
|
|
22
13
|
useCoAgent
|
|
23
14
|
} from "./chunk-XACBOJF5.mjs";
|
|
24
15
|
import {
|
|
25
16
|
useCopilotAction
|
|
26
|
-
} from "./chunk-
|
|
17
|
+
} from "./chunk-7LKXEJXM.mjs";
|
|
27
18
|
import {
|
|
28
19
|
useCopilotChat
|
|
29
20
|
} from "./chunk-MX2OYLRS.mjs";
|
|
30
|
-
import
|
|
21
|
+
import {
|
|
22
|
+
useCopilotReadable
|
|
23
|
+
} from "./chunk-ANOG3W5S.mjs";
|
|
24
|
+
import {
|
|
25
|
+
useMakeCopilotDocumentReadable
|
|
26
|
+
} from "./chunk-TRXKPXDE.mjs";
|
|
31
27
|
import "./chunk-JD7BAH7U.mjs";
|
|
32
28
|
import "./chunk-SPCZTZCY.mjs";
|
|
33
29
|
import {
|
|
@@ -37,11 +33,15 @@ import {
|
|
|
37
33
|
import "./chunk-XXR4QFAQ.mjs";
|
|
38
34
|
import "./chunk-5FHSUKQL.mjs";
|
|
39
35
|
import "./chunk-6U3UH3KO.mjs";
|
|
36
|
+
import "./chunk-YPSGKPDA.mjs";
|
|
40
37
|
import {
|
|
41
38
|
CopilotMessagesContext,
|
|
42
39
|
useCopilotMessagesContext
|
|
43
40
|
} from "./chunk-DCTJZ742.mjs";
|
|
44
41
|
import "./chunk-G2K6T2QU.mjs";
|
|
42
|
+
import {
|
|
43
|
+
useCoAgentStateRender
|
|
44
|
+
} from "./chunk-27IPQFJP.mjs";
|
|
45
45
|
import {
|
|
46
46
|
CopilotContext,
|
|
47
47
|
useCopilotContext
|
|
@@ -40,32 +40,41 @@ interface InProgressStateWait<T extends Parameter[] | [] = []> {
|
|
|
40
40
|
interface ExecutingStateWait<T extends Parameter[] | [] = []> {
|
|
41
41
|
status: "executing";
|
|
42
42
|
args: MappedParameterTypes<T>;
|
|
43
|
+
/** @deprecated use respond instead */
|
|
43
44
|
handler: (result: any) => void;
|
|
45
|
+
respond: (result: any) => void;
|
|
44
46
|
result: undefined;
|
|
45
47
|
}
|
|
46
48
|
interface CompleteStateWait<T extends Parameter[] | [] = []> {
|
|
47
49
|
status: "complete";
|
|
48
50
|
args: MappedParameterTypes<T>;
|
|
51
|
+
/** @deprecated use respond instead */
|
|
49
52
|
handler: undefined;
|
|
53
|
+
respond: undefined;
|
|
50
54
|
result: any;
|
|
51
55
|
}
|
|
52
56
|
interface InProgressStateNoArgsWait<T extends Parameter[] | [] = []> {
|
|
53
57
|
status: "inProgress";
|
|
54
58
|
args: Partial<MappedParameterTypes<T>>;
|
|
59
|
+
/** @deprecated use respond instead */
|
|
55
60
|
handler: undefined;
|
|
61
|
+
respond: undefined;
|
|
56
62
|
result: undefined;
|
|
57
63
|
}
|
|
58
64
|
interface ExecutingStateNoArgsWait<T extends Parameter[] | [] = []> {
|
|
59
65
|
status: "executing";
|
|
60
66
|
args: MappedParameterTypes<T>;
|
|
67
|
+
/** @deprecated use respond instead */
|
|
61
68
|
handler: (result: any) => void;
|
|
69
|
+
respond: (result: any) => void;
|
|
62
70
|
result: undefined;
|
|
63
71
|
}
|
|
64
72
|
interface CompleteStateNoArgsWait<T extends Parameter[] | [] = []> {
|
|
65
73
|
status: "complete";
|
|
66
74
|
args: MappedParameterTypes<T>;
|
|
75
|
+
/** @deprecated use respond instead */
|
|
67
76
|
handler: undefined;
|
|
68
|
-
|
|
77
|
+
respond: undefined;
|
|
69
78
|
}
|
|
70
79
|
type ActionRenderProps<T extends Parameter[] | [] = []> = CompleteState<T> | ExecutingState<T> | InProgressState<T>;
|
|
71
80
|
type ActionRenderPropsNoArgs<T extends Parameter[] | [] = []> = CompleteStateNoArgs<T> | ExecutingStateNoArgs<T> | InProgressStateNoArgs<T>;
|
|
@@ -76,10 +85,14 @@ type FrontendAction<T extends Parameter[] | [] = []> = Action<T> & {
|
|
|
76
85
|
followUp?: boolean;
|
|
77
86
|
} & ({
|
|
78
87
|
render?: string | (T extends [] ? (props: ActionRenderPropsNoArgs<T>) => string | React.ReactElement : (props: ActionRenderProps<T>) => string | React.ReactElement);
|
|
88
|
+
/** @deprecated use renderAndWaitForResponse instead */
|
|
79
89
|
renderAndWait?: never;
|
|
90
|
+
renderAndWaitForResponse?: never;
|
|
80
91
|
} | {
|
|
81
92
|
render?: never;
|
|
82
|
-
|
|
93
|
+
/** @deprecated use renderAndWaitForResponse instead */
|
|
94
|
+
renderAndWait?: T extends [] ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement : (props: ActionRenderPropsWait<T>) => React.ReactElement;
|
|
95
|
+
renderAndWaitForResponse?: T extends [] ? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement : (props: ActionRenderPropsWait<T>) => React.ReactElement;
|
|
83
96
|
handler?: never;
|
|
84
97
|
});
|
|
85
98
|
type RenderFunctionStatus = ActionRenderProps<any>["status"];
|
|
@@ -1 +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
|
|
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 /** @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
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"publishConfig": {
|
|
10
10
|
"access": "public"
|
|
11
11
|
},
|
|
12
|
-
"version": "1.4.0
|
|
12
|
+
"version": "1.4.0",
|
|
13
13
|
"sideEffects": false,
|
|
14
14
|
"main": "./dist/index.js",
|
|
15
15
|
"module": "./dist/index.mjs",
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"tsup": "^6.7.0",
|
|
37
37
|
"typescript": "^5.2.3",
|
|
38
38
|
"@types/react-dom": "^18.2.4",
|
|
39
|
-
"eslint-config-custom": "1.4.0
|
|
40
|
-
"tsconfig": "1.4.0
|
|
39
|
+
"eslint-config-custom": "1.4.0",
|
|
40
|
+
"tsconfig": "1.4.0"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@scarf/scarf": "^1.3.0",
|
|
44
44
|
"untruncate-json": "^0.0.1",
|
|
45
|
-
"@copilotkit/runtime-client-gql": "1.4.0
|
|
46
|
-
"@copilotkit/shared": "1.4.0
|
|
45
|
+
"@copilotkit/runtime-client-gql": "1.4.0",
|
|
46
|
+
"@copilotkit/shared": "1.4.0"
|
|
47
47
|
},
|
|
48
48
|
"keywords": [
|
|
49
49
|
"copilotkit",
|
|
@@ -1,3 +1,78 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Example usage of useCopilotAction with complex parameters:
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* useCopilotAction({
|
|
6
|
+
* name: "myAction",
|
|
7
|
+
* parameters: [
|
|
8
|
+
* { name: "arg1", type: "string", enum: ["option1", "option2", "option3"], required: false },
|
|
9
|
+
* { name: "arg2", type: "number" },
|
|
10
|
+
* {
|
|
11
|
+
* name: "arg3",
|
|
12
|
+
* type: "object",
|
|
13
|
+
* attributes: [
|
|
14
|
+
* { name: "nestedArg1", type: "boolean" },
|
|
15
|
+
* { name: "xyz", required: false },
|
|
16
|
+
* ],
|
|
17
|
+
* },
|
|
18
|
+
* { name: "arg4", type: "number[]" },
|
|
19
|
+
* ],
|
|
20
|
+
* handler: ({ arg1, arg2, arg3, arg4 }) => {
|
|
21
|
+
* const x = arg3.nestedArg1;
|
|
22
|
+
* const z = arg3.xyz;
|
|
23
|
+
* console.log(arg1, arg2, arg3);
|
|
24
|
+
* },
|
|
25
|
+
* });
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* // Simple action without parameters
|
|
29
|
+
* useCopilotAction({
|
|
30
|
+
* name: "myAction",
|
|
31
|
+
* handler: () => {
|
|
32
|
+
* console.log("No parameters provided.");
|
|
33
|
+
* },
|
|
34
|
+
* });
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* // Interactive action with UI rendering and response handling
|
|
38
|
+
* useCopilotAction({
|
|
39
|
+
* name: "handleMeeting",
|
|
40
|
+
* description: "Handle a meeting by booking or canceling",
|
|
41
|
+
* parameters: [
|
|
42
|
+
* {
|
|
43
|
+
* name: "meeting",
|
|
44
|
+
* type: "string",
|
|
45
|
+
* description: "The meeting to handle",
|
|
46
|
+
* required: true,
|
|
47
|
+
* },
|
|
48
|
+
* {
|
|
49
|
+
* name: "date",
|
|
50
|
+
* type: "string",
|
|
51
|
+
* description: "The date of the meeting",
|
|
52
|
+
* required: true,
|
|
53
|
+
* },
|
|
54
|
+
* {
|
|
55
|
+
* name: "title",
|
|
56
|
+
* type: "string",
|
|
57
|
+
* description: "The title of the meeting",
|
|
58
|
+
* required: true,
|
|
59
|
+
* },
|
|
60
|
+
* ],
|
|
61
|
+
* renderAndWaitForResponse: ({ args, respond, status }) => {
|
|
62
|
+
* const { meeting, date, title } = args;
|
|
63
|
+
* return (
|
|
64
|
+
* <MeetingConfirmationDialog
|
|
65
|
+
* meeting={meeting}
|
|
66
|
+
* date={date}
|
|
67
|
+
* title={title}
|
|
68
|
+
* onConfirm={() => respond('meeting confirmed')}
|
|
69
|
+
* onCancel={() => respond('meeting canceled')}
|
|
70
|
+
* />
|
|
71
|
+
* );
|
|
72
|
+
* },
|
|
73
|
+
* });
|
|
74
|
+
*/
|
|
75
|
+
|
|
1
76
|
/**
|
|
2
77
|
* <img src="/images/use-copilot-action/useCopilotAction.gif" width="500" />
|
|
3
78
|
* `useCopilotAction` is a React hook that you can use in your application to provide
|
|
@@ -46,10 +121,15 @@
|
|
|
46
121
|
*
|
|
47
122
|
* 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.
|
|
48
123
|
*/
|
|
49
|
-
import { useRef, useEffect } from "react";
|
|
50
|
-
import { FrontendAction, ActionRenderProps, ActionRenderPropsWait } from "../types/frontend-action";
|
|
51
|
-
import { useCopilotContext } from "../context/copilot-context";
|
|
52
124
|
import { Parameter, randomId } from "@copilotkit/shared";
|
|
125
|
+
import { createElement, Fragment, useEffect, useRef } from "react";
|
|
126
|
+
import { useCopilotContext } from "../context/copilot-context";
|
|
127
|
+
import {
|
|
128
|
+
ActionRenderProps,
|
|
129
|
+
ActionRenderPropsNoArgsWait,
|
|
130
|
+
ActionRenderPropsWait,
|
|
131
|
+
FrontendAction,
|
|
132
|
+
} from "../types/frontend-action";
|
|
53
133
|
|
|
54
134
|
// We implement useCopilotAction dependency handling so that
|
|
55
135
|
// the developer has the option to not provide any dependencies.
|
|
@@ -66,19 +146,18 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
|
|
|
66
146
|
): void {
|
|
67
147
|
const { setAction, removeAction, actions, chatComponentsCache } = useCopilotContext();
|
|
68
148
|
const idRef = useRef<string>(randomId());
|
|
69
|
-
const renderAndWaitRef = useRef<
|
|
149
|
+
const renderAndWaitRef = useRef<RenderAndWaitForResponse | null>(null);
|
|
70
150
|
|
|
71
151
|
// clone the action to avoid mutating the original object
|
|
72
152
|
action = { ...action };
|
|
73
153
|
|
|
74
154
|
// If the developer provides a renderAndWait function, we transform the action
|
|
75
155
|
// to use a promise internally, so that we can treat it like a normal action.
|
|
76
|
-
if (action.renderAndWait) {
|
|
77
|
-
const renderAndWait = action.renderAndWait
|
|
78
|
-
|
|
156
|
+
if (action.renderAndWait || action.renderAndWaitForResponse) {
|
|
157
|
+
const renderAndWait = action.renderAndWait || action.renderAndWaitForResponse;
|
|
79
158
|
// remove the renderAndWait function from the action
|
|
80
159
|
action.renderAndWait = undefined;
|
|
81
|
-
|
|
160
|
+
action.renderAndWaitForResponse = undefined;
|
|
82
161
|
// add a handler that will be called when the action is executed
|
|
83
162
|
action.handler = (async () => {
|
|
84
163
|
// we create a new promise when the handler is called
|
|
@@ -94,14 +173,36 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
|
|
|
94
173
|
}) as any;
|
|
95
174
|
|
|
96
175
|
// add a render function that will be called when the action is rendered
|
|
97
|
-
action.render = ((props: ActionRenderProps<
|
|
98
|
-
|
|
99
|
-
|
|
176
|
+
action.render = ((props: ActionRenderProps<T>): React.ReactElement => {
|
|
177
|
+
// Create type safe waitProps based on whether T extends empty array or not
|
|
178
|
+
const waitProps = {
|
|
179
|
+
status: props.status,
|
|
100
180
|
args: props.args,
|
|
101
181
|
result: props.result,
|
|
102
182
|
handler: props.status === "executing" ? renderAndWaitRef.current!.resolve : undefined,
|
|
183
|
+
respond: props.status === "executing" ? renderAndWaitRef.current!.resolve : undefined,
|
|
184
|
+
} as T extends [] ? ActionRenderPropsNoArgsWait<T> : ActionRenderPropsWait<T>;
|
|
185
|
+
|
|
186
|
+
// Type guard to check if renderAndWait is for no args case
|
|
187
|
+
const isNoArgsRenderWait = (
|
|
188
|
+
_fn:
|
|
189
|
+
| ((props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement)
|
|
190
|
+
| ((props: ActionRenderPropsWait<T>) => React.ReactElement),
|
|
191
|
+
): _fn is (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement => {
|
|
192
|
+
return action.parameters?.length === 0;
|
|
103
193
|
};
|
|
104
|
-
|
|
194
|
+
|
|
195
|
+
// Safely call renderAndWait with correct props type
|
|
196
|
+
if (renderAndWait) {
|
|
197
|
+
if (isNoArgsRenderWait(renderAndWait)) {
|
|
198
|
+
return renderAndWait(waitProps as ActionRenderPropsNoArgsWait<T>);
|
|
199
|
+
} else {
|
|
200
|
+
return renderAndWait(waitProps as ActionRenderPropsWait<T>);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// Return empty Fragment instead of null
|
|
205
|
+
return createElement(Fragment);
|
|
105
206
|
}) as any;
|
|
106
207
|
}
|
|
107
208
|
|
|
@@ -145,38 +246,8 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
|
|
|
145
246
|
]);
|
|
146
247
|
}
|
|
147
248
|
|
|
148
|
-
interface
|
|
249
|
+
interface RenderAndWaitForResponse {
|
|
149
250
|
promise: Promise<any>;
|
|
150
251
|
resolve: (result: any) => void;
|
|
151
252
|
reject: (error: any) => void;
|
|
152
253
|
}
|
|
153
|
-
|
|
154
|
-
// Usage Example:
|
|
155
|
-
// useCopilotAction({
|
|
156
|
-
// name: "myAction",
|
|
157
|
-
// parameters: [
|
|
158
|
-
// { name: "arg1", type: "string", enum: ["option1", "option2", "option3"], required: false },
|
|
159
|
-
// { name: "arg2", type: "number" },
|
|
160
|
-
// {
|
|
161
|
-
// name: "arg3",
|
|
162
|
-
// type: "object",
|
|
163
|
-
// attributes: [
|
|
164
|
-
// { name: "nestedArg1", type: "boolean" },
|
|
165
|
-
// { name: "xyz", required: false },
|
|
166
|
-
// ],
|
|
167
|
-
// },
|
|
168
|
-
// { name: "arg4", type: "number[]" },
|
|
169
|
-
// ],
|
|
170
|
-
// handler: ({ arg1, arg2, arg3, arg4 }) => {
|
|
171
|
-
// const x = arg3.nestedArg1;
|
|
172
|
-
// const z = arg3.xyz;
|
|
173
|
-
// console.log(arg1, arg2, arg3);
|
|
174
|
-
// },
|
|
175
|
-
// });
|
|
176
|
-
|
|
177
|
-
// useCopilotAction({
|
|
178
|
-
// name: "myAction",
|
|
179
|
-
// handler: () => {
|
|
180
|
-
// console.log("No parameters provided.");
|
|
181
|
-
// },
|
|
182
|
-
// });
|
|
@@ -47,36 +47,45 @@ interface InProgressStateWait<T extends Parameter[] | [] = []> {
|
|
|
47
47
|
interface ExecutingStateWait<T extends Parameter[] | [] = []> {
|
|
48
48
|
status: "executing";
|
|
49
49
|
args: MappedParameterTypes<T>;
|
|
50
|
+
/** @deprecated use respond instead */
|
|
50
51
|
handler: (result: any) => void;
|
|
52
|
+
respond: (result: any) => void;
|
|
51
53
|
result: undefined;
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
interface CompleteStateWait<T extends Parameter[] | [] = []> {
|
|
55
57
|
status: "complete";
|
|
56
58
|
args: MappedParameterTypes<T>;
|
|
59
|
+
/** @deprecated use respond instead */
|
|
57
60
|
handler: undefined;
|
|
61
|
+
respond: undefined;
|
|
58
62
|
result: any;
|
|
59
63
|
}
|
|
60
64
|
|
|
61
65
|
interface InProgressStateNoArgsWait<T extends Parameter[] | [] = []> {
|
|
62
66
|
status: "inProgress";
|
|
63
67
|
args: Partial<MappedParameterTypes<T>>;
|
|
68
|
+
/** @deprecated use respond instead */
|
|
64
69
|
handler: undefined;
|
|
70
|
+
respond: undefined;
|
|
65
71
|
result: undefined;
|
|
66
72
|
}
|
|
67
73
|
|
|
68
74
|
interface ExecutingStateNoArgsWait<T extends Parameter[] | [] = []> {
|
|
69
75
|
status: "executing";
|
|
70
76
|
args: MappedParameterTypes<T>;
|
|
77
|
+
/** @deprecated use respond instead */
|
|
71
78
|
handler: (result: any) => void;
|
|
79
|
+
respond: (result: any) => void;
|
|
72
80
|
result: undefined;
|
|
73
81
|
}
|
|
74
82
|
|
|
75
83
|
interface CompleteStateNoArgsWait<T extends Parameter[] | [] = []> {
|
|
76
84
|
status: "complete";
|
|
77
85
|
args: MappedParameterTypes<T>;
|
|
86
|
+
/** @deprecated use respond instead */
|
|
78
87
|
handler: undefined;
|
|
79
|
-
|
|
88
|
+
respond: undefined;
|
|
80
89
|
}
|
|
81
90
|
|
|
82
91
|
export type ActionRenderProps<T extends Parameter[] | [] = []> =
|
|
@@ -109,11 +118,17 @@ export type FrontendAction<T extends Parameter[] | [] = []> = Action<T> & {
|
|
|
109
118
|
| (T extends []
|
|
110
119
|
? (props: ActionRenderPropsNoArgs<T>) => string | React.ReactElement
|
|
111
120
|
: (props: ActionRenderProps<T>) => string | React.ReactElement);
|
|
121
|
+
/** @deprecated use renderAndWaitForResponse instead */
|
|
112
122
|
renderAndWait?: never;
|
|
123
|
+
renderAndWaitForResponse?: never;
|
|
113
124
|
}
|
|
114
125
|
| {
|
|
115
126
|
render?: never;
|
|
116
|
-
|
|
127
|
+
/** @deprecated use renderAndWaitForResponse instead */
|
|
128
|
+
renderAndWait?: T extends []
|
|
129
|
+
? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement
|
|
130
|
+
: (props: ActionRenderPropsWait<T>) => React.ReactElement;
|
|
131
|
+
renderAndWaitForResponse?: T extends []
|
|
117
132
|
? (props: ActionRenderPropsNoArgsWait<T>) => React.ReactElement
|
|
118
133
|
: (props: ActionRenderPropsWait<T>) => React.ReactElement;
|
|
119
134
|
handler?: never;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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":[]}
|