@copilotkit/react-ui 1.4.1-pre.6 → 1.4.2-tyler-reset-chat.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 +59 -0
- package/dist/{chunk-RS6UPR5N.mjs → chunk-2B57NCBA.mjs} +5 -1
- package/dist/chunk-2B57NCBA.mjs.map +1 -0
- package/dist/chunk-4T3TMQNJ.mjs +45 -0
- package/dist/chunk-4T3TMQNJ.mjs.map +1 -0
- package/dist/{chunk-H5CXJBR5.mjs → chunk-B6A6OMIG.mjs} +6 -2
- package/dist/chunk-B6A6OMIG.mjs.map +1 -0
- package/dist/chunk-KXE2JCUH.mjs +1 -0
- package/dist/chunk-KXE2JCUH.mjs.map +1 -0
- package/dist/{chunk-ORHE7FYT.mjs → chunk-OI5EKZPO.mjs} +110 -14
- package/dist/chunk-OI5EKZPO.mjs.map +1 -0
- package/dist/{chunk-ECPBML4L.mjs → chunk-RQRK6DEW.mjs} +2 -2
- package/dist/chunk-WOUWNTAV.mjs +72 -0
- package/dist/chunk-WOUWNTAV.mjs.map +1 -0
- package/dist/{chunk-TSIFZ5N5.mjs → chunk-Z2RXDT7O.mjs} +2 -2
- package/dist/components/chat/Chat.d.ts +50 -5
- package/dist/components/chat/Chat.js +260 -57
- package/dist/components/chat/Chat.js.map +1 -1
- package/dist/components/chat/Chat.mjs +7 -4
- package/dist/components/chat/Modal.d.ts +1 -1
- package/dist/components/chat/Modal.js +273 -66
- package/dist/components/chat/Modal.js.map +1 -1
- package/dist/components/chat/Modal.mjs +8 -5
- package/dist/components/chat/Popup.js +275 -68
- package/dist/components/chat/Popup.js.map +1 -1
- package/dist/components/chat/Popup.mjs +9 -6
- package/dist/components/chat/Sidebar.js +277 -70
- package/dist/components/chat/Sidebar.js.map +1 -1
- package/dist/components/chat/Sidebar.mjs +9 -6
- package/dist/components/chat/index.js +279 -72
- package/dist/components/chat/index.js.map +1 -1
- package/dist/components/chat/index.mjs +10 -7
- package/dist/components/dev-console/console.js +138 -32
- package/dist/components/dev-console/console.js.map +1 -1
- package/dist/components/dev-console/console.mjs +4 -1
- package/dist/components/dev-console/index.js +138 -32
- package/dist/components/dev-console/index.js.map +1 -1
- package/dist/components/dev-console/index.mjs +4 -1
- package/dist/components/help-modal/icons.d.ts +6 -0
- package/dist/components/help-modal/icons.js +70 -0
- package/dist/components/help-modal/icons.js.map +1 -0
- package/dist/components/help-modal/icons.mjs +10 -0
- package/dist/components/help-modal/icons.mjs.map +1 -0
- package/dist/components/help-modal/index.d.ts +2 -0
- package/dist/components/help-modal/index.js +135 -0
- package/dist/components/help-modal/index.js.map +1 -0
- package/dist/components/help-modal/index.mjs +10 -0
- package/dist/components/help-modal/index.mjs.map +1 -0
- package/dist/components/help-modal/modal.d.ts +5 -0
- package/dist/components/help-modal/modal.js +133 -0
- package/dist/components/help-modal/modal.js.map +1 -0
- package/dist/components/help-modal/modal.mjs +9 -0
- package/dist/components/help-modal/modal.mjs.map +1 -0
- package/dist/components/index.js +279 -72
- package/dist/components/index.js.map +1 -1
- package/dist/components/index.mjs +10 -7
- package/dist/index.js +283 -76
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10 -7
- package/package.json +7 -7
- package/src/components/chat/Chat.tsx +167 -8
- package/src/components/chat/Modal.tsx +4 -0
- package/src/components/dev-console/console.tsx +4 -1
- package/src/components/help-modal/icons.tsx +40 -0
- package/src/components/help-modal/index.tsx +1 -0
- package/src/components/help-modal/modal.tsx +91 -0
- package/dist/chunk-H5CXJBR5.mjs.map +0 -1
- package/dist/chunk-ORHE7FYT.mjs.map +0 -1
- package/dist/chunk-RS6UPR5N.mjs.map +0 -1
- /package/dist/{chunk-ECPBML4L.mjs.map → chunk-RQRK6DEW.mjs.map} +0 -0
- /package/dist/{chunk-TSIFZ5N5.mjs.map → chunk-Z2RXDT7O.mjs.map} +0 -0
package/dist/index.mjs
CHANGED
|
@@ -4,30 +4,33 @@ import "./chunk-MMVDU6DF.mjs";
|
|
|
4
4
|
import "./chunk-MRFF7GSQ.mjs";
|
|
5
5
|
import {
|
|
6
6
|
CopilotSidebar
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-RQRK6DEW.mjs";
|
|
8
8
|
import "./chunk-WB3YULQ4.mjs";
|
|
9
9
|
import {
|
|
10
10
|
CopilotPopup
|
|
11
|
-
} from "./chunk-
|
|
12
|
-
import "./chunk-
|
|
11
|
+
} from "./chunk-Z2RXDT7O.mjs";
|
|
12
|
+
import "./chunk-B6A6OMIG.mjs";
|
|
13
13
|
import "./chunk-YAGE7RCE.mjs";
|
|
14
14
|
import "./chunk-VEC45H6Q.mjs";
|
|
15
15
|
import "./chunk-RQNJNK2W.mjs";
|
|
16
16
|
import {
|
|
17
17
|
CopilotChat
|
|
18
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-OI5EKZPO.mjs";
|
|
19
|
+
import "./chunk-6INMITFA.mjs";
|
|
20
|
+
import "./chunk-RU73BEZM.mjs";
|
|
19
21
|
import "./chunk-V7W6IM2V.mjs";
|
|
20
22
|
import "./chunk-OMTPWC7T.mjs";
|
|
21
23
|
import "./chunk-ZABXREBH.mjs";
|
|
22
|
-
import "./chunk-6INMITFA.mjs";
|
|
23
|
-
import "./chunk-RU73BEZM.mjs";
|
|
24
24
|
import "./chunk-RJCZRKTV.mjs";
|
|
25
25
|
import {
|
|
26
26
|
CopilotDevConsole
|
|
27
|
-
} from "./chunk-
|
|
27
|
+
} from "./chunk-2B57NCBA.mjs";
|
|
28
28
|
import {
|
|
29
29
|
shouldShowDevConsole
|
|
30
30
|
} from "./chunk-4FIGRRFS.mjs";
|
|
31
|
+
import "./chunk-KXE2JCUH.mjs";
|
|
32
|
+
import "./chunk-WOUWNTAV.mjs";
|
|
33
|
+
import "./chunk-4T3TMQNJ.mjs";
|
|
31
34
|
import "./chunk-OTPAZXVR.mjs";
|
|
32
35
|
import "./chunk-4LUMV4YO.mjs";
|
|
33
36
|
import "./chunk-YQFVRDNC.mjs";
|
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"publishConfig": {
|
|
10
10
|
"access": "public"
|
|
11
11
|
},
|
|
12
|
-
"version": "1.4.
|
|
12
|
+
"version": "1.4.2-tyler-reset-chat.0",
|
|
13
13
|
"sideEffects": [
|
|
14
14
|
"**/*.css"
|
|
15
15
|
],
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"ts-jest": "^29.1.1",
|
|
41
41
|
"tsup": "^6.7.0",
|
|
42
42
|
"typescript": "^5.2.3",
|
|
43
|
-
"eslint-config-custom": "1.4.1
|
|
44
|
-
"tailwind-config": "1.4.1
|
|
45
|
-
"tsconfig": "1.4.1
|
|
43
|
+
"eslint-config-custom": "1.4.1",
|
|
44
|
+
"tailwind-config": "1.4.1",
|
|
45
|
+
"tsconfig": "1.4.1"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@headlessui/react": "^2.1.3",
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
"react-syntax-highlighter": "^15.5.0",
|
|
51
51
|
"remark-gfm": "^3.0.1",
|
|
52
52
|
"remark-math": "^5.1.1",
|
|
53
|
-
"@copilotkit/react-core": "1.4.
|
|
54
|
-
"@copilotkit/runtime-client-gql": "1.4.
|
|
55
|
-
"@copilotkit/shared": "1.4.
|
|
53
|
+
"@copilotkit/react-core": "1.4.2-tyler-reset-chat.0",
|
|
54
|
+
"@copilotkit/runtime-client-gql": "1.4.2-tyler-reset-chat.0",
|
|
55
|
+
"@copilotkit/shared": "1.4.2-tyler-reset-chat.0"
|
|
56
56
|
},
|
|
57
57
|
"keywords": [
|
|
58
58
|
"copilotkit",
|
|
@@ -73,6 +73,7 @@ import { InputProps, MessagesProps, RenderMessageProps, ResponseButtonProps } fr
|
|
|
73
73
|
import { randomId } from "@copilotkit/shared";
|
|
74
74
|
|
|
75
75
|
import { CopilotDevConsole } from "../dev-console";
|
|
76
|
+
import { HintFunction, runAgent, stopAgent } from "@copilotkit/react-core";
|
|
76
77
|
|
|
77
78
|
/**
|
|
78
79
|
* Props for CopilotChat component.
|
|
@@ -98,6 +99,16 @@ export interface CopilotChatProps {
|
|
|
98
99
|
*/
|
|
99
100
|
onSubmitMessage?: (message: string) => void | Promise<void>;
|
|
100
101
|
|
|
102
|
+
/**
|
|
103
|
+
* A custom stop generation function.
|
|
104
|
+
*/
|
|
105
|
+
onStopGeneration?: OnStopGeneration;
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* A custom reload messages function.
|
|
109
|
+
*/
|
|
110
|
+
onReloadMessages?: OnReloadMessages;
|
|
111
|
+
|
|
101
112
|
/**
|
|
102
113
|
* Icons can be used to set custom icons for the chat window.
|
|
103
114
|
*/
|
|
@@ -168,12 +179,62 @@ export interface CopilotChatProps {
|
|
|
168
179
|
children?: React.ReactNode;
|
|
169
180
|
}
|
|
170
181
|
|
|
182
|
+
interface OnStopGenerationArguments {
|
|
183
|
+
/**
|
|
184
|
+
* The name of the currently executing agent.
|
|
185
|
+
*/
|
|
186
|
+
currentAgentName: string | undefined;
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* The messages in the chat.
|
|
190
|
+
*/
|
|
191
|
+
messages: Message[];
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* Set the messages in the chat.
|
|
195
|
+
*/
|
|
196
|
+
setMessages: (messages: Message[]) => void;
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Stop chat generation.
|
|
200
|
+
*/
|
|
201
|
+
stopGeneration: () => void;
|
|
202
|
+
|
|
203
|
+
/**
|
|
204
|
+
* Restart the currently executing agent.
|
|
205
|
+
*/
|
|
206
|
+
restartCurrentAgent: () => void;
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* Stop the currently executing agent.
|
|
210
|
+
*/
|
|
211
|
+
stopCurrentAgent: () => void;
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* Run the currently executing agent.
|
|
215
|
+
*/
|
|
216
|
+
runCurrentAgent: (hint?: HintFunction) => Promise<void>;
|
|
217
|
+
|
|
218
|
+
/**
|
|
219
|
+
* Set the state of the currently executing agent.
|
|
220
|
+
*/
|
|
221
|
+
setCurrentAgentState: (state: any) => void;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
export type OnReloadMessagesArguments = OnStopGenerationArguments;
|
|
225
|
+
|
|
226
|
+
export type OnStopGeneration = (args: OnStopGenerationArguments) => void;
|
|
227
|
+
|
|
228
|
+
export type OnReloadMessages = (args: OnReloadMessagesArguments) => void;
|
|
229
|
+
|
|
171
230
|
export function CopilotChat({
|
|
172
231
|
instructions,
|
|
173
232
|
onSubmitMessage,
|
|
174
233
|
makeSystemMessage,
|
|
175
234
|
showResponseButton = true,
|
|
176
235
|
onInProgress,
|
|
236
|
+
onStopGeneration,
|
|
237
|
+
onReloadMessages,
|
|
177
238
|
Messages = DefaultMessages,
|
|
178
239
|
RenderTextMessage = DefaultRenderTextMessage,
|
|
179
240
|
RenderActionExecutionMessage = DefaultRenderActionExecutionMessage,
|
|
@@ -198,7 +259,13 @@ export function CopilotChat({
|
|
|
198
259
|
sendMessage,
|
|
199
260
|
stopGeneration,
|
|
200
261
|
reloadMessages,
|
|
201
|
-
} = useCopilotChatLogic(
|
|
262
|
+
} = useCopilotChatLogic(
|
|
263
|
+
makeSystemMessage,
|
|
264
|
+
onInProgress,
|
|
265
|
+
onSubmitMessage,
|
|
266
|
+
onStopGeneration,
|
|
267
|
+
onReloadMessages,
|
|
268
|
+
);
|
|
202
269
|
|
|
203
270
|
const chatContext = React.useContext(ChatContext);
|
|
204
271
|
const isVisible = chatContext ? chatContext.open : true;
|
|
@@ -271,12 +338,19 @@ export const useCopilotChatLogic = (
|
|
|
271
338
|
makeSystemMessage?: SystemMessageFunction,
|
|
272
339
|
onInProgress?: (isLoading: boolean) => void,
|
|
273
340
|
onSubmitMessage?: (messageContent: string) => Promise<void> | void,
|
|
341
|
+
onStopGeneration?: OnStopGeneration,
|
|
342
|
+
onReloadMessages?: OnReloadMessages,
|
|
274
343
|
) => {
|
|
275
|
-
const {
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
344
|
+
const {
|
|
345
|
+
visibleMessages,
|
|
346
|
+
appendMessage,
|
|
347
|
+
reloadMessages: defaultReloadMessages,
|
|
348
|
+
stopGeneration: defaultStopGeneration,
|
|
349
|
+
isLoading,
|
|
350
|
+
} = useCopilotChat({
|
|
351
|
+
id: randomId(),
|
|
352
|
+
makeSystemMessage,
|
|
353
|
+
});
|
|
280
354
|
|
|
281
355
|
const [currentSuggestions, setCurrentSuggestions] = useState<CopilotChatSuggestion[]>([]);
|
|
282
356
|
const suggestionsAbortControllerRef = useRef<AbortController | null>(null);
|
|
@@ -313,8 +387,14 @@ export const useCopilotChatLogic = (
|
|
|
313
387
|
|
|
314
388
|
return () => {
|
|
315
389
|
clearTimeout(debounceTimerRef.current);
|
|
316
|
-
}
|
|
317
|
-
}, [
|
|
390
|
+
}
|
|
391
|
+
}, [
|
|
392
|
+
isLoading,
|
|
393
|
+
context.chatSuggestionConfiguration,
|
|
394
|
+
// hackish way to trigger suggestions reload on reset, but better than moving suggestions to the
|
|
395
|
+
// global context
|
|
396
|
+
visibleMessages.length == 0,
|
|
397
|
+
]);
|
|
318
398
|
|
|
319
399
|
const sendMessage = async (messageContent: string) => {
|
|
320
400
|
abortSuggestions();
|
|
@@ -340,6 +420,85 @@ export const useCopilotChatLogic = (
|
|
|
340
420
|
return message;
|
|
341
421
|
};
|
|
342
422
|
|
|
423
|
+
const messages = visibleMessages;
|
|
424
|
+
const { setMessages } = messagesContext;
|
|
425
|
+
const currentAgentName = generalContext.agentSession?.agentName;
|
|
426
|
+
const restartCurrentAgent = async (hint?: HintFunction) => {
|
|
427
|
+
if (generalContext.agentSession) {
|
|
428
|
+
generalContext.setAgentSession({
|
|
429
|
+
...generalContext.agentSession,
|
|
430
|
+
nodeName: undefined,
|
|
431
|
+
threadId: undefined,
|
|
432
|
+
});
|
|
433
|
+
generalContext.setCoagentStates((prevAgentStates) => {
|
|
434
|
+
return {
|
|
435
|
+
...prevAgentStates,
|
|
436
|
+
[generalContext.agentSession!.agentName]: {
|
|
437
|
+
...prevAgentStates[generalContext.agentSession!.agentName],
|
|
438
|
+
threadId: undefined,
|
|
439
|
+
nodeName: undefined,
|
|
440
|
+
runId: undefined,
|
|
441
|
+
},
|
|
442
|
+
};
|
|
443
|
+
});
|
|
444
|
+
}
|
|
445
|
+
};
|
|
446
|
+
const runCurrentAgent = async (hint?: HintFunction) => {
|
|
447
|
+
if (generalContext.agentSession) {
|
|
448
|
+
await runAgent(generalContext.agentSession.agentName, context, appendMessage, hint);
|
|
449
|
+
}
|
|
450
|
+
};
|
|
451
|
+
const stopCurrentAgent = () => {
|
|
452
|
+
if (generalContext.agentSession) {
|
|
453
|
+
stopAgent(generalContext.agentSession.agentName, context);
|
|
454
|
+
}
|
|
455
|
+
};
|
|
456
|
+
const setCurrentAgentState = (state: any) => {
|
|
457
|
+
if (generalContext.agentSession) {
|
|
458
|
+
generalContext.setCoagentStates((prevAgentStates) => {
|
|
459
|
+
return {
|
|
460
|
+
...prevAgentStates,
|
|
461
|
+
[generalContext.agentSession!.agentName]: {
|
|
462
|
+
state,
|
|
463
|
+
},
|
|
464
|
+
} as any;
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
};
|
|
468
|
+
|
|
469
|
+
function stopGeneration() {
|
|
470
|
+
if (onStopGeneration) {
|
|
471
|
+
onStopGeneration({
|
|
472
|
+
messages,
|
|
473
|
+
setMessages,
|
|
474
|
+
stopGeneration: defaultStopGeneration,
|
|
475
|
+
currentAgentName,
|
|
476
|
+
restartCurrentAgent,
|
|
477
|
+
stopCurrentAgent,
|
|
478
|
+
runCurrentAgent,
|
|
479
|
+
setCurrentAgentState,
|
|
480
|
+
});
|
|
481
|
+
} else {
|
|
482
|
+
defaultStopGeneration();
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
function reloadMessages() {
|
|
486
|
+
if (onReloadMessages) {
|
|
487
|
+
onReloadMessages({
|
|
488
|
+
messages,
|
|
489
|
+
setMessages,
|
|
490
|
+
stopGeneration: defaultStopGeneration,
|
|
491
|
+
currentAgentName,
|
|
492
|
+
restartCurrentAgent,
|
|
493
|
+
stopCurrentAgent,
|
|
494
|
+
runCurrentAgent,
|
|
495
|
+
setCurrentAgentState,
|
|
496
|
+
});
|
|
497
|
+
} else {
|
|
498
|
+
defaultReloadMessages();
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
|
|
343
502
|
return {
|
|
344
503
|
visibleMessages,
|
|
345
504
|
isLoading,
|
|
@@ -63,6 +63,8 @@ export const CopilotModal = ({
|
|
|
63
63
|
hitEscapeToClose = true,
|
|
64
64
|
onSetOpen,
|
|
65
65
|
onSubmitMessage,
|
|
66
|
+
onStopGeneration,
|
|
67
|
+
onReloadMessages,
|
|
66
68
|
shortcut = "/",
|
|
67
69
|
icons,
|
|
68
70
|
labels,
|
|
@@ -99,6 +101,8 @@ export const CopilotModal = ({
|
|
|
99
101
|
<CopilotChat
|
|
100
102
|
instructions={instructions}
|
|
101
103
|
onSubmitMessage={onSubmitMessage}
|
|
104
|
+
onStopGeneration={onStopGeneration}
|
|
105
|
+
onReloadMessages={onReloadMessages}
|
|
102
106
|
makeSystemMessage={makeSystemMessage}
|
|
103
107
|
showResponseButton={showResponseButton}
|
|
104
108
|
onInProgress={onInProgress}
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
logReadables,
|
|
9
9
|
shouldShowDevConsole,
|
|
10
10
|
} from "./utils";
|
|
11
|
-
import { useEffect, useRef, useState } from "react";
|
|
11
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
12
12
|
import {
|
|
13
13
|
CheckIcon,
|
|
14
14
|
ChevronDownIcon,
|
|
@@ -19,6 +19,7 @@ import {
|
|
|
19
19
|
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
|
|
20
20
|
import { COPILOTKIT_VERSION } from "@copilotkit/shared";
|
|
21
21
|
import { SmallSpinnerIcon } from "../chat/Icons";
|
|
22
|
+
import { CopilotKitHelpModal } from "../help-modal";
|
|
22
23
|
|
|
23
24
|
type VersionStatus = "unknown" | "checking" | "latest" | "update-available" | "outdated";
|
|
24
25
|
|
|
@@ -138,6 +139,8 @@ export function CopilotDevConsole() {
|
|
|
138
139
|
latestVersion={latestVersion}
|
|
139
140
|
/>
|
|
140
141
|
|
|
142
|
+
<CopilotKitHelpModal />
|
|
143
|
+
|
|
141
144
|
<DebugMenuButton
|
|
142
145
|
setShowDevConsole={setShowDevConsole}
|
|
143
146
|
checkForUpdates={checkForUpdates}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
export const LifeBuoyIcon = () => (
|
|
4
|
+
<svg
|
|
5
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
+
width="24"
|
|
7
|
+
height="24"
|
|
8
|
+
viewBox="0 0 24 24"
|
|
9
|
+
fill="none"
|
|
10
|
+
stroke="currentColor"
|
|
11
|
+
strokeWidth="2"
|
|
12
|
+
strokeLinecap="round"
|
|
13
|
+
strokeLinejoin="round"
|
|
14
|
+
className="icon icon-tabler icons-tabler-outline icon-tabler-lifebuoy"
|
|
15
|
+
>
|
|
16
|
+
<g transform="translate(0, -1)">
|
|
17
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
18
|
+
<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
|
|
19
|
+
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
|
|
20
|
+
<path d="M15 15l3.35 3.35" />
|
|
21
|
+
<path d="M9 15l-3.35 3.35" />
|
|
22
|
+
<path d="M5.65 5.65l3.35 3.35" />
|
|
23
|
+
<path d="M18.35 5.65l-3.35 3.35" />
|
|
24
|
+
</g>
|
|
25
|
+
</svg>
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
export const CloseIcon = () => (
|
|
29
|
+
<svg
|
|
30
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
31
|
+
fill="none"
|
|
32
|
+
viewBox="0 0 24 24"
|
|
33
|
+
strokeWidth="1.5"
|
|
34
|
+
stroke="currentColor"
|
|
35
|
+
width="20"
|
|
36
|
+
height="20"
|
|
37
|
+
>
|
|
38
|
+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
39
|
+
</svg>
|
|
40
|
+
);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { CopilotKitHelpModal } from "./modal";
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { CloseIcon, LifeBuoyIcon } from "./icons";
|
|
3
|
+
|
|
4
|
+
export function CopilotKitHelpModal() {
|
|
5
|
+
const [showHelpModal, setShowHelpModal] = useState(false);
|
|
6
|
+
const [issueDescription, setIssueDescription] = useState("");
|
|
7
|
+
|
|
8
|
+
const handleSubmit = () => {
|
|
9
|
+
// submit issueDescription
|
|
10
|
+
setShowHelpModal(false);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const HelpButton = () => (
|
|
14
|
+
<button
|
|
15
|
+
onClick={() => setShowHelpModal(true)}
|
|
16
|
+
className="p-2 bg-transparent rounded-full shadow-lg hover:shadow-xl transition-shadow duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
17
|
+
aria-label="Open Help"
|
|
18
|
+
>
|
|
19
|
+
<LifeBuoyIcon />
|
|
20
|
+
</button>
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<>
|
|
25
|
+
<HelpButton />
|
|
26
|
+
{showHelpModal && (
|
|
27
|
+
<div
|
|
28
|
+
className="fixed inset-0 flex items-center justify-center p-4"
|
|
29
|
+
style={{ backgroundColor: "rgba(11, 15, 26, 0.5)", zIndex: 99 }}
|
|
30
|
+
>
|
|
31
|
+
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative">
|
|
32
|
+
<button
|
|
33
|
+
className="absolute text-gray-400 hover:text-gray-600 focus:outline-none"
|
|
34
|
+
style={{ top: "10px", right: "10px" }}
|
|
35
|
+
onClick={() => setShowHelpModal(false)}
|
|
36
|
+
aria-label="Close"
|
|
37
|
+
>
|
|
38
|
+
<CloseIcon />
|
|
39
|
+
</button>
|
|
40
|
+
<div className="w-full flex mb-6 justify-center">
|
|
41
|
+
<h2 className="text-2xl font-bold">Help Options</h2>
|
|
42
|
+
</div>
|
|
43
|
+
<div className="space-y-4 mb-4">
|
|
44
|
+
<div className="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
|
|
45
|
+
<a
|
|
46
|
+
href="https://go.copilotkit.ai/dev-console-support-discord"
|
|
47
|
+
target="_blank"
|
|
48
|
+
rel="noopener noreferrer"
|
|
49
|
+
>
|
|
50
|
+
Go to Discord Support Channel (Community Support)
|
|
51
|
+
</a>
|
|
52
|
+
</div>
|
|
53
|
+
<div className="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
|
|
54
|
+
<a
|
|
55
|
+
href="https://go.copilotkit.ai/dev-console-support-slack"
|
|
56
|
+
target="_blank"
|
|
57
|
+
rel="noopener noreferrer"
|
|
58
|
+
>
|
|
59
|
+
Apply for Priority Direct Slack Support
|
|
60
|
+
</a>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
{/*<form onSubmit={handleSubmit} className="flex flex-col space-y-4">*/}
|
|
64
|
+
{/* <div>*/}
|
|
65
|
+
{/* <label htmlFor="feedback" className="block text-sm font-medium text-gray-700 mb-1">*/}
|
|
66
|
+
{/* Let us know what your issue is:*/}
|
|
67
|
+
{/* </label>*/}
|
|
68
|
+
{/* <textarea*/}
|
|
69
|
+
{/* id="feedback"*/}
|
|
70
|
+
{/* rows={4}*/}
|
|
71
|
+
{/* className="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500"*/}
|
|
72
|
+
{/* placeholder="A Loom link / screen recording is always great!"*/}
|
|
73
|
+
{/* onChange={e => setIssueDescription(e.target.value)}*/}
|
|
74
|
+
{/* value={issueDescription}*/}
|
|
75
|
+
{/* ></textarea>*/}
|
|
76
|
+
{/* </div>*/}
|
|
77
|
+
{/* <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg">*/}
|
|
78
|
+
{/* <button*/}
|
|
79
|
+
{/* type="submit"*/}
|
|
80
|
+
{/* className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-500 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"*/}
|
|
81
|
+
{/* >*/}
|
|
82
|
+
{/* Submit*/}
|
|
83
|
+
{/* </button>*/}
|
|
84
|
+
{/* </div>*/}
|
|
85
|
+
{/*</form>*/}
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
)}
|
|
89
|
+
</>
|
|
90
|
+
);
|
|
91
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/chat/Modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { ChatContextProvider } from \"./ChatContext\";\nimport { ButtonProps, HeaderProps, WindowProps } from \"./props\";\nimport { Window as DefaultWindow } from \"./Window\";\nimport { Button as DefaultButton } from \"./Button\";\nimport { Header as DefaultHeader } from \"./Header\";\nimport { Messages as DefaultMessages } from \"./Messages\";\nimport { Input as DefaultInput } from \"./Input\";\nimport { ResponseButton as DefaultResponseButton } from \"./Response\";\nimport { CopilotChat, CopilotChatProps } from \"./Chat\";\n\nexport interface CopilotModalProps extends CopilotChatProps {\n /**\n * Whether the chat window should be open by default.\n * @default false\n */\n defaultOpen?: boolean;\n\n /**\n * If the chat window should close when the user clicks outside of it.\n * @default true\n */\n clickOutsideToClose?: boolean;\n\n /**\n * If the chat window should close when the user hits the Escape key.\n * @default true\n */\n hitEscapeToClose?: boolean;\n\n /**\n * The shortcut key to open the chat window.\n * Uses Command-[shortcut] on a Mac and Ctrl-[shortcut] on Windows.\n * @default '/'\n */\n shortcut?: string;\n\n /**\n * A callback that gets called when the chat window opens or closes.\n */\n onSetOpen?: (open: boolean) => void;\n\n /**\n * A custom Window component to use instead of the default.\n */\n Window?: React.ComponentType<WindowProps>;\n\n /**\n * A custom Button component to use instead of the default.\n */\n Button?: React.ComponentType<ButtonProps>;\n\n /**\n * A custom Header component to use instead of the default.\n */\n Header?: React.ComponentType<HeaderProps>;\n}\n\nexport const CopilotModal = ({\n instructions,\n defaultOpen = false,\n clickOutsideToClose = true,\n hitEscapeToClose = true,\n onSetOpen,\n onSubmitMessage,\n shortcut = \"/\",\n icons,\n labels,\n makeSystemMessage,\n showResponseButton = true,\n onInProgress,\n Window = DefaultWindow,\n Button = DefaultButton,\n Header = DefaultHeader,\n Messages = DefaultMessages,\n Input = DefaultInput,\n ResponseButton = DefaultResponseButton,\n className,\n children,\n}: CopilotModalProps) => {\n const [openState, setOpenState] = React.useState(defaultOpen);\n\n const setOpen = (open: boolean) => {\n onSetOpen?.(open);\n setOpenState(open);\n };\n\n return (\n <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpen}>\n {children}\n <div className={className}>\n <Button></Button>\n <Window\n clickOutsideToClose={clickOutsideToClose}\n shortcut={shortcut}\n hitEscapeToClose={hitEscapeToClose}\n >\n <Header />\n <CopilotChat\n instructions={instructions}\n onSubmitMessage={onSubmitMessage}\n makeSystemMessage={makeSystemMessage}\n showResponseButton={showResponseButton}\n onInProgress={onInProgress}\n Messages={Messages}\n Input={Input}\n ResponseButton={ResponseButton}\n />\n </Window>\n </div>\n </ChatContextProvider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,WAAW;AA2FV,cACA,YADA;AAjCD,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,cAAc;AAAA,EACd,sBAAsB;AAAA,EACtB,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,QAAAA,UAAS;AAAA,EACT,QAAAC,UAAS;AAAA,EACT,QAAAC,UAAS;AAAA,EACT,UAAAC,YAAW;AAAA,EACX,OAAAC,SAAQ;AAAA,EACR,gBAAAC,kBAAiB;AAAA,EACjB;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,WAAW;AAE5D,QAAM,UAAU,CAAC,SAAkB;AACjC,2CAAY;AACZ,iBAAa,IAAI;AAAA,EACnB;AAEA,SACE,qBAAC,uBAAoB,OAAc,QAAgB,MAAM,WAAW,SACjE;AAAA;AAAA,IACD,qBAAC,SAAI,WACH;AAAA,0BAACJ,SAAA,EAAO;AAAA,MACR;AAAA,QAACD;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA,gCAACE,SAAA,EAAO;AAAA,YACR;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,UAAUC;AAAA,gBACV,OAAOC;AAAA,gBACP,gBAAgBC;AAAA;AAAA,YAClB;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":["Window","Button","Header","Messages","Input","ResponseButton"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/chat/Chat.tsx"],"sourcesContent":["/**\n * <br/>\n * <img src=\"/images/CopilotChat.gif\" width=\"500\" />\n *\n * A chatbot panel component for the CopilotKit framework. The component allows for a high degree\n * of customization through various props and custom CSS.\n *\n * ## Install Dependencies\n *\n * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.\n *\n * ```shell npm2yarn \\\"@copilotkit/react-ui\"\\\n * npm install @copilotkit/react-core @copilotkit/react-ui\n * ```\n *\n * ## Usage\n *\n * ```tsx\n * import { CopilotChat } from \"@copilotkit/react-ui\";\n * import \"@copilotkit/react-ui/styles.css\";\n *\n * <CopilotChat\n * labels={{\n * title: \"Your Assistant\",\n * initial: \"Hi! 👋 How can I assist you today?\",\n * }}\n * />\n * ```\n *\n * ### Look & Feel\n *\n * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:\n * ```tsx title=\"YourRootComponent.tsx\"\n * ...\n * import \"@copilotkit/react-ui/styles.css\"; // [!code highlight]\n *\n * export function YourRootComponent() {\n * return (\n * <CopilotKit>\n * ...\n * </CopilotKit>\n * );\n * }\n * ```\n * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.\n */\n\nimport {\n ChatContext,\n ChatContextProvider,\n CopilotChatIcons,\n CopilotChatLabels,\n} from \"./ChatContext\";\nimport { Messages as DefaultMessages } from \"./Messages\";\nimport { Input as DefaultInput } from \"./Input\";\nimport { ResponseButton as DefaultResponseButton } from \"./Response\";\nimport { RenderTextMessage as DefaultRenderTextMessage } from \"./messages/RenderTextMessage\";\nimport { RenderActionExecutionMessage as DefaultRenderActionExecutionMessage } from \"./messages/RenderActionExecutionMessage\";\nimport { RenderResultMessage as DefaultRenderResultMessage } from \"./messages/RenderResultMessage\";\nimport { RenderAgentStateMessage as DefaultRenderAgentStateMessage } from \"./messages/RenderAgentStateMessage\";\nimport { Suggestion } from \"./Suggestion\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n SystemMessageFunction,\n useCopilotChat,\n useCopilotContext,\n useCopilotMessagesContext,\n} from \"@copilotkit/react-core\";\nimport { reloadSuggestions } from \"./Suggestion\";\nimport { CopilotChatSuggestion } from \"../../types/suggestions\";\nimport { Message, Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport { InputProps, MessagesProps, RenderMessageProps, ResponseButtonProps } from \"./props\";\nimport { randomId } from \"@copilotkit/shared\";\n\nimport { CopilotDevConsole } from \"../dev-console\";\n\n/**\n * Props for CopilotChat component.\n */\nexport interface CopilotChatProps {\n /**\n * Custom instructions to be added to the system message. Use this property to\n * provide additional context or guidance to the language model, influencing\n * its responses. These instructions can include specific directions,\n * preferences, or criteria that the model should consider when generating\n * its output, thereby tailoring the conversation more precisely to the\n * user's needs or the application's requirements.\n */\n instructions?: string;\n\n /**\n * A callback that gets called when the in progress state changes.\n */\n onInProgress?: (inProgress: boolean) => void;\n\n /**\n * A callback that gets called when a new message it submitted.\n */\n onSubmitMessage?: (message: string) => void | Promise<void>;\n\n /**\n * Icons can be used to set custom icons for the chat window.\n */\n icons?: CopilotChatIcons;\n\n /**\n * Labels can be used to set custom labels for the chat window.\n */\n labels?: CopilotChatLabels;\n\n /**\n * A function that takes in context string and instructions and returns\n * the system message to include in the chat request.\n * Use this to completely override the system message, when providing\n * instructions is not enough.\n */\n makeSystemMessage?: SystemMessageFunction;\n\n /**\n * Whether to show the response button.\n * @default true\n */\n showResponseButton?: boolean;\n\n /**\n * A custom Messages component to use instead of the default.\n */\n Messages?: React.ComponentType<MessagesProps>;\n\n /**\n * A custom RenderTextMessage component to use instead of the default.\n */\n RenderTextMessage?: React.ComponentType<RenderMessageProps>;\n\n /**\n * A custom RenderActionExecutionMessage component to use instead of the default.\n */\n RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;\n\n /**\n * A custom RenderAgentStateMessage component to use instead of the default.\n */\n RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;\n\n /**\n * A custom RenderResultMessage component to use instead of the default.\n */\n RenderResultMessage?: React.ComponentType<RenderMessageProps>;\n\n /**\n * A custom Input component to use instead of the default.\n */\n Input?: React.ComponentType<InputProps>;\n\n /**\n * A custom ResponseButton component to use instead of the default.\n */\n ResponseButton?: React.ComponentType<ResponseButtonProps>;\n\n /**\n * A class name to apply to the root element.\n */\n className?: string;\n\n /**\n * Children to render.\n */\n children?: React.ReactNode;\n}\n\nexport function CopilotChat({\n instructions,\n onSubmitMessage,\n makeSystemMessage,\n showResponseButton = true,\n onInProgress,\n Messages = DefaultMessages,\n RenderTextMessage = DefaultRenderTextMessage,\n RenderActionExecutionMessage = DefaultRenderActionExecutionMessage,\n RenderAgentStateMessage = DefaultRenderAgentStateMessage,\n RenderResultMessage = DefaultRenderResultMessage,\n Input = DefaultInput,\n ResponseButton = DefaultResponseButton,\n className,\n icons,\n labels,\n}: CopilotChatProps) {\n const context = useCopilotContext();\n\n useEffect(() => {\n context.setChatInstructions(instructions || \"\");\n }, [instructions]);\n\n const {\n visibleMessages,\n isLoading,\n currentSuggestions,\n sendMessage,\n stopGeneration,\n reloadMessages,\n } = useCopilotChatLogic(makeSystemMessage, onInProgress, onSubmitMessage);\n\n const chatContext = React.useContext(ChatContext);\n const isVisible = chatContext ? chatContext.open : true;\n\n return (\n <WrappedCopilotChat icons={icons} labels={labels} className={className}>\n <CopilotDevConsole />\n <Messages\n RenderTextMessage={RenderTextMessage}\n RenderActionExecutionMessage={RenderActionExecutionMessage}\n RenderAgentStateMessage={RenderAgentStateMessage}\n RenderResultMessage={RenderResultMessage}\n messages={visibleMessages}\n inProgress={isLoading}\n >\n {currentSuggestions.length > 0 && (\n <div>\n <h6>Suggested:</h6>\n <div className=\"suggestions\">\n {currentSuggestions.map((suggestion, index) => (\n <Suggestion\n key={index}\n title={suggestion.title}\n message={suggestion.message}\n partial={suggestion.partial}\n className={suggestion.className}\n onClick={(message) => sendMessage(message)}\n />\n ))}\n </div>\n </div>\n )}\n {showResponseButton && visibleMessages.length > 0 && (\n <ResponseButton\n onClick={isLoading ? stopGeneration : reloadMessages}\n inProgress={isLoading}\n />\n )}\n </Messages>\n <Input inProgress={isLoading} onSend={sendMessage} isVisible={isVisible} />\n </WrappedCopilotChat>\n );\n}\n\nexport function WrappedCopilotChat({\n children,\n icons,\n labels,\n className,\n}: {\n children: React.ReactNode;\n icons?: CopilotChatIcons;\n labels?: CopilotChatLabels;\n className?: string;\n}) {\n const chatContext = React.useContext(ChatContext);\n if (!chatContext) {\n return (\n <ChatContextProvider icons={icons} labels={labels} open={true} setOpen={() => {}}>\n <div className={`copilotKitChat ${className}`}>{children}</div>\n </ChatContextProvider>\n );\n }\n return <>{children}</>;\n}\n\nconst SUGGESTIONS_DEBOUNCE_TIMEOUT = 1000;\n\nexport const useCopilotChatLogic = (\n makeSystemMessage?: SystemMessageFunction,\n onInProgress?: (isLoading: boolean) => void,\n onSubmitMessage?: (messageContent: string) => Promise<void> | void,\n) => {\n const { visibleMessages, appendMessage, reloadMessages, stopGeneration, isLoading } =\n useCopilotChat({\n id: randomId(),\n makeSystemMessage,\n });\n\n const [currentSuggestions, setCurrentSuggestions] = useState<CopilotChatSuggestion[]>([]);\n const suggestionsAbortControllerRef = useRef<AbortController | null>(null);\n const debounceTimerRef = useRef<any>();\n\n const abortSuggestions = () => {\n suggestionsAbortControllerRef.current?.abort();\n suggestionsAbortControllerRef.current = null;\n };\n\n const generalContext = useCopilotContext();\n const messagesContext = useCopilotMessagesContext();\n const context = { ...generalContext, ...messagesContext };\n\n useEffect(() => {\n onInProgress?.(isLoading);\n\n abortSuggestions();\n\n debounceTimerRef.current = setTimeout(\n () => {\n if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {\n suggestionsAbortControllerRef.current = new AbortController();\n reloadSuggestions(\n context,\n context.chatSuggestionConfiguration,\n setCurrentSuggestions,\n suggestionsAbortControllerRef,\n );\n }\n },\n currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT,\n );\n\n return () => {\n clearTimeout(debounceTimerRef.current);\n };\n }, [isLoading, context.chatSuggestionConfiguration]);\n\n const sendMessage = async (messageContent: string) => {\n abortSuggestions();\n setCurrentSuggestions([]);\n\n const message: Message = new TextMessage({\n content: messageContent,\n role: Role.User,\n });\n\n if (onSubmitMessage) {\n try {\n await onSubmitMessage(messageContent);\n } catch (error) {\n console.error(\"Error in onSubmitMessage:\", error);\n }\n }\n // this needs to happen after onSubmitMessage, because it will trigger submission\n // of the message to the endpoint. Some users depend on performing some actions\n // before the message is submitted.\n appendMessage(message);\n\n return message;\n };\n\n return {\n visibleMessages,\n isLoading,\n currentSuggestions,\n sendMessage,\n stopGeneration,\n reloadMessages,\n };\n};\n"],"mappings":"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","names":["Messages","RenderTextMessage","RenderActionExecutionMessage","RenderAgentStateMessage","RenderResultMessage","Input","ResponseButton"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/dev-console/console.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCopilotContext, useCopilotMessagesContext } from \"@copilotkit/react-core\";\nimport {\n getPublishedCopilotKitVersion,\n logActions,\n logMessages,\n logReadables,\n shouldShowDevConsole,\n} from \"./utils\";\nimport { useEffect, useRef, useState } from \"react\";\nimport {\n CheckIcon,\n ChevronDownIcon,\n CopilotKitIcon,\n ExclamationMarkIcon,\n ExclamationMarkTriangleIcon,\n} from \"./icons\";\nimport { Menu, MenuButton, MenuItem, MenuItems } from \"@headlessui/react\";\nimport { COPILOTKIT_VERSION } from \"@copilotkit/shared\";\nimport { SmallSpinnerIcon } from \"../chat/Icons\";\n\ntype VersionStatus = \"unknown\" | \"checking\" | \"latest\" | \"update-available\" | \"outdated\";\n\nexport function CopilotDevConsole() {\n const currentVersion = COPILOTKIT_VERSION;\n const context = useCopilotContext();\n\n // to prevent hydration errors, ensure that the component renders the same content\n // server-side as it does during the initial client-side render to prevent a hydration\n // mismatch\n // see: https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only\n\n const [showDevConsole, setShowDevConsole] = useState(false);\n\n useEffect(() => {\n setShowDevConsole(shouldShowDevConsole(context.showDevConsole));\n }, [context.showDevConsole]);\n\n const dontRunTwiceInDevMode = useRef(false);\n const [versionStatus, setVersionStatus] = useState<VersionStatus>(\"unknown\");\n const [latestVersion, setLatestVersion] = useState<string>(\"\");\n const consoleRef = useRef<HTMLDivElement>(null);\n const [debugButtonMode, setDebugButtonMode] = useState<\"full\" | \"compact\">(\"full\");\n\n const checkForUpdates = (force: boolean = false) => {\n setVersionStatus(\"checking\");\n\n getPublishedCopilotKitVersion(currentVersion, force)\n .then((v) => {\n setLatestVersion(v.latest);\n let versionOk = false;\n\n // match exact version or a version with a letter (e.g. 1.0.0-alpha.1)\n if (v.current === v.latest) {\n versionOk = true;\n } else if (/[a-zA-Z]/.test(v.current)) {\n versionOk = true;\n }\n\n if (versionOk) {\n setVersionStatus(\"latest\");\n } else if (v.severity !== \"low\") {\n setVersionStatus(\"outdated\");\n } else {\n setVersionStatus(\"update-available\");\n }\n })\n .catch((e) => {\n console.error(e);\n setVersionStatus(\"unknown\");\n });\n };\n\n useEffect(() => {\n if (dontRunTwiceInDevMode.current === true) {\n return;\n }\n dontRunTwiceInDevMode.current = true;\n\n checkForUpdates();\n }, []);\n\n useEffect(() => {\n const handleResize = (entries: ResizeObserverEntry[]) => {\n for (let entry of entries) {\n if (entry.target === consoleRef.current) {\n const width = entry.contentRect.width;\n if (width < 400) {\n setDebugButtonMode(\"compact\");\n } else {\n setDebugButtonMode(\"full\");\n }\n }\n }\n };\n\n const observer = new ResizeObserver(handleResize);\n if (consoleRef.current) {\n observer.observe(consoleRef.current);\n\n const initialWidth = consoleRef.current.getBoundingClientRect().width;\n if (initialWidth < 400) {\n setDebugButtonMode(\"compact\");\n } else {\n setDebugButtonMode(\"full\");\n }\n }\n\n return () => {\n if (consoleRef.current) {\n observer.unobserve(consoleRef.current);\n }\n };\n }, [consoleRef.current]);\n\n if (!showDevConsole) {\n return null;\n }\n return (\n <div\n ref={consoleRef}\n className={\n \"copilotKitDevConsole \" +\n (versionStatus === \"update-available\" ? \"copilotKitDevConsoleUpgrade\" : \"\") +\n (versionStatus === \"outdated\" ? \"copilotKitDevConsoleWarnOutdated\" : \"\")\n }\n >\n <div className=\"copilotKitDevConsoleLogo\">\n <a href=\"https://copilotkit.ai\" target=\"_blank\">\n {CopilotKitIcon}\n </a>\n </div>\n <VersionInfo\n showDevConsole={context.showDevConsole}\n versionStatus={versionStatus}\n currentVersion={currentVersion}\n latestVersion={latestVersion}\n />\n\n <DebugMenuButton\n setShowDevConsole={setShowDevConsole}\n checkForUpdates={checkForUpdates}\n mode={debugButtonMode}\n />\n </div>\n );\n}\n\nfunction VersionInfo({\n showDevConsole,\n versionStatus,\n currentVersion,\n latestVersion,\n}: {\n showDevConsole: boolean | \"auto\";\n versionStatus: VersionStatus;\n currentVersion: string;\n latestVersion: string;\n}) {\n const [copyStatus, setCopyStatus] = useState<string>(\"\");\n\n let versionLabel = \"\";\n let versionIcon: any = \"\";\n let currentVersionLabel = currentVersion;\n\n if (versionStatus === \"latest\") {\n versionLabel = \"latest\";\n versionIcon = CheckIcon;\n } else if (versionStatus === \"checking\") {\n versionLabel = \"checking\";\n versionIcon = SmallSpinnerIcon;\n } else if (versionStatus === \"update-available\") {\n versionLabel = \"update available\";\n versionIcon = ExclamationMarkIcon;\n currentVersionLabel = `${currentVersion} → ${latestVersion}`;\n } else if (versionStatus === \"outdated\") {\n versionLabel = \"outdated\";\n versionIcon = ExclamationMarkTriangleIcon;\n currentVersionLabel = `${currentVersion} → ${latestVersion}`;\n }\n\n let asideLabel = \"\";\n if (showDevConsole === \"auto\") {\n asideLabel = \"(localhost only)\";\n } else if (showDevConsole === true) {\n asideLabel = \"(always on)\";\n }\n\n const installCommand = [\n `npm install`,\n `@copilotkit/react-core@${latestVersion}`,\n `@copilotkit/react-ui@${latestVersion}`,\n `@copilotkit/react-textarea@${latestVersion}`,\n ].join(\" \");\n\n const handleCopyClick = () => {\n navigator.clipboard.writeText(installCommand.trim()).then(() => {\n setCopyStatus(\"Command copied to clipboard!\");\n setTimeout(() => setCopyStatus(\"\"), 1000);\n });\n };\n\n return (\n <div className=\"copilotKitVersionInfo\">\n <header>\n COPILOTKIT DEV CONSOLE{showDevConsole === \"auto\" && <aside>{asideLabel}</aside>}\n </header>\n <section>\n Version: {versionLabel} ({currentVersionLabel}) {versionIcon}\n </section>\n {(versionStatus === \"update-available\" || versionStatus === \"outdated\") && (\n <footer>\n <button onClick={handleCopyClick}>{copyStatus || installCommand}</button>\n </footer>\n )}\n </div>\n );\n}\nexport default function DebugMenuButton({\n setShowDevConsole,\n checkForUpdates,\n mode,\n}: {\n setShowDevConsole: (show: boolean) => void;\n checkForUpdates: (force: boolean) => void;\n mode: \"full\" | \"compact\";\n}) {\n const context = useCopilotContext();\n const messagesContext = useCopilotMessagesContext();\n\n return (\n <div className=\"bg-black top-24 w-52 text-right\">\n <Menu>\n <MenuButton className={`copilotKitDebugMenuButton ${mode === \"compact\" ? \"compact\" : \"\"}`}>\n {mode == \"compact\" ? \"Debug\" : <>Debug {ChevronDownIcon}</>}\n </MenuButton>\n\n <MenuItems\n transition\n anchor=\"bottom end\"\n className=\"copilotKitDebugMenu\"\n style={{ zIndex: 40 }}\n >\n <MenuItem>\n <button className=\"copilotKitDebugMenuItem\" onClick={() => logReadables(context)}>\n Log Readables\n </button>\n </MenuItem>\n <MenuItem>\n <button className=\"copilotKitDebugMenuItem\" onClick={() => logActions(context)}>\n Log Actions\n </button>\n </MenuItem>\n <MenuItem>\n <button\n className=\"copilotKitDebugMenuItem\"\n onClick={() => logMessages(messagesContext)}\n >\n Log Messages\n </button>\n </MenuItem>\n <MenuItem>\n <button className=\"copilotKitDebugMenuItem\" onClick={() => checkForUpdates(true)}>\n Check for Updates\n </button>\n </MenuItem>\n <hr />\n <MenuItem>\n <button className=\"copilotKitDebugMenuItem\" onClick={() => setShowDevConsole(false)}>\n Hide Dev Console\n </button>\n </MenuItem>\n </MenuItems>\n </Menu>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
File without changes
|
|
File without changes
|