@copilotkit/react-ui 1.10.0-next.4 → 1.10.0-next.5

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.
Files changed (48) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/{chunk-WYEGK6BP.mjs → chunk-BXX6RM44.mjs} +2 -2
  3. package/dist/chunk-BXX6RM44.mjs.map +1 -0
  4. package/dist/chunk-BY42E5VF.mjs +203 -0
  5. package/dist/chunk-BY42E5VF.mjs.map +1 -0
  6. package/dist/{chunk-P6O2MZGT.mjs → chunk-K344MVUT.mjs} +58 -5
  7. package/dist/chunk-K344MVUT.mjs.map +1 -0
  8. package/dist/{chunk-2TABXABK.mjs → chunk-MYWIJSW6.mjs} +2 -2
  9. package/dist/chunk-MYWIJSW6.mjs.map +1 -0
  10. package/dist/components/chat/Chat.d.ts +10 -5
  11. package/dist/components/chat/Chat.js +54 -7
  12. package/dist/components/chat/Chat.js.map +1 -1
  13. package/dist/components/chat/Chat.mjs +1 -1
  14. package/dist/components/chat/Modal.d.ts +1 -1
  15. package/dist/components/chat/Modal.js +157 -52
  16. package/dist/components/chat/Modal.js.map +1 -1
  17. package/dist/components/chat/Modal.mjs +2 -2
  18. package/dist/components/chat/Popup.js +157 -52
  19. package/dist/components/chat/Popup.js.map +1 -1
  20. package/dist/components/chat/Popup.mjs +3 -3
  21. package/dist/components/chat/Sidebar.js +157 -52
  22. package/dist/components/chat/Sidebar.js.map +1 -1
  23. package/dist/components/chat/Sidebar.mjs +3 -3
  24. package/dist/components/chat/index.d.ts +1 -1
  25. package/dist/components/chat/index.js +157 -52
  26. package/dist/components/chat/index.js.map +1 -1
  27. package/dist/components/chat/index.mjs +4 -4
  28. package/dist/components/chat/props.d.ts +39 -1
  29. package/dist/components/chat/props.js.map +1 -1
  30. package/dist/components/index.d.ts +1 -1
  31. package/dist/components/index.js +157 -52
  32. package/dist/components/index.js.map +1 -1
  33. package/dist/components/index.mjs +4 -4
  34. package/dist/index.d.ts +1 -1
  35. package/dist/index.js +161 -56
  36. package/dist/index.js.map +1 -1
  37. package/dist/index.mjs +4 -4
  38. package/package.json +4 -4
  39. package/src/components/chat/Chat.tsx +98 -4
  40. package/src/components/chat/Modal.tsx +107 -41
  41. package/src/components/chat/Popup.tsx +20 -0
  42. package/src/components/chat/Sidebar.tsx +22 -0
  43. package/src/components/chat/props.ts +46 -0
  44. package/dist/chunk-2TABXABK.mjs.map +0 -1
  45. package/dist/chunk-P6O2MZGT.mjs.map +0 -1
  46. package/dist/chunk-QKDRZ7WA.mjs +0 -144
  47. package/dist/chunk-QKDRZ7WA.mjs.map +0 -1
  48. package/dist/chunk-WYEGK6BP.mjs.map +0 -1
package/dist/index.mjs CHANGED
@@ -4,12 +4,12 @@ import "./chunk-MMVDU6DF.mjs";
4
4
  import "./chunk-SC6JRFAJ.mjs";
5
5
  import {
6
6
  CopilotSidebar
7
- } from "./chunk-2TABXABK.mjs";
7
+ } from "./chunk-MYWIJSW6.mjs";
8
8
  import "./chunk-WB3YULQ4.mjs";
9
9
  import {
10
10
  CopilotPopup
11
- } from "./chunk-WYEGK6BP.mjs";
12
- import "./chunk-QKDRZ7WA.mjs";
11
+ } from "./chunk-BXX6RM44.mjs";
12
+ import "./chunk-BY42E5VF.mjs";
13
13
  import "./chunk-C3GSYRC3.mjs";
14
14
  import "./chunk-GDSZGYCE.mjs";
15
15
  import "./chunk-V7W6IM2V.mjs";
@@ -26,7 +26,7 @@ import "./chunk-BH6PCAAL.mjs";
26
26
  import "./chunk-UFN2VWSR.mjs";
27
27
  import {
28
28
  CopilotChat
29
- } from "./chunk-P6O2MZGT.mjs";
29
+ } from "./chunk-K344MVUT.mjs";
30
30
  import "./chunk-JHUTTP5C.mjs";
31
31
  import {
32
32
  AssistantMessage
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "publishConfig": {
10
10
  "access": "public"
11
11
  },
12
- "version": "1.10.0-next.4",
12
+ "version": "1.10.0-next.5",
13
13
  "sideEffects": [
14
14
  "**/*.css"
15
15
  ],
@@ -51,9 +51,9 @@
51
51
  "rehype-raw": "^7.0.0",
52
52
  "remark-gfm": "^4.0.1",
53
53
  "remark-math": "^6.0.0",
54
- "@copilotkit/react-core": "1.10.0-next.4",
55
- "@copilotkit/runtime-client-gql": "1.10.0-next.4",
56
- "@copilotkit/shared": "1.10.0-next.4"
54
+ "@copilotkit/react-core": "1.10.0-next.5",
55
+ "@copilotkit/runtime-client-gql": "1.10.0-next.5",
56
+ "@copilotkit/shared": "1.10.0-next.5"
57
57
  },
58
58
  "keywords": [
59
59
  "copilotkit",
@@ -27,6 +27,23 @@
27
27
  * />
28
28
  * ```
29
29
  *
30
+ * ### With Observability Hooks
31
+ *
32
+ * To monitor user interactions, provide the `observabilityHooks` prop.
33
+ * **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
34
+ *
35
+ * ```tsx
36
+ * <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
37
+ * <CopilotChat
38
+ * observabilityHooks={{
39
+ * onMessageSent: (message) => {
40
+ * console.log("Message sent:", message);
41
+ * },
42
+ * }}
43
+ * />
44
+ * </CopilotKit>
45
+ * ```
46
+ *
30
47
  * ### Look & Feel
31
48
  *
32
49
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
@@ -65,11 +82,19 @@ import {
65
82
  useCopilotMessagesContext,
66
83
  } from "@copilotkit/react-core";
67
84
  import type { SuggestionItem } from "@copilotkit/react-core";
68
- import { Message } from "@copilotkit/shared";
85
+ import {
86
+ CopilotKitError,
87
+ CopilotKitErrorCode,
88
+ Message,
89
+ Severity,
90
+ ErrorVisibility,
91
+ styledConsole,
92
+ } from "@copilotkit/shared";
69
93
  import { randomId } from "@copilotkit/shared";
70
94
  import {
71
95
  AssistantMessageProps,
72
96
  ComponentsMap,
97
+ CopilotObservabilityHooks,
73
98
  ImageRendererProps,
74
99
  InputProps,
75
100
  MessagesProps,
@@ -250,6 +275,12 @@ export interface CopilotChatProps {
250
275
  children?: React.ReactNode;
251
276
 
252
277
  hideStopButton?: boolean;
278
+
279
+ /**
280
+ * Event hooks for CopilotKit chat events.
281
+ * These hooks only work when publicApiKey is provided.
282
+ */
283
+ observabilityHooks?: CopilotObservabilityHooks;
253
284
  }
254
285
 
255
286
  interface OnStopGenerationArguments {
@@ -336,11 +367,34 @@ export function CopilotChat({
336
367
  imageUploadsEnabled,
337
368
  inputFileAccept = "image/*",
338
369
  hideStopButton,
370
+ observabilityHooks,
339
371
  }: CopilotChatProps) {
340
- const { additionalInstructions, setChatInstructions } = useCopilotContext();
372
+ const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } =
373
+ useCopilotContext();
341
374
  const [selectedImages, setSelectedImages] = useState<Array<ImageUpload>>([]);
342
375
  const fileInputRef = useRef<HTMLInputElement>(null);
343
376
 
377
+ // Helper function to trigger event hooks only if publicApiKey is provided
378
+ const triggerObservabilityHook = useCallback(
379
+ (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {
380
+ if (copilotApiConfig.publicApiKey && observabilityHooks?.[hookName]) {
381
+ (observabilityHooks[hookName] as any)(...args);
382
+ }
383
+ if (observabilityHooks?.[hookName] && !copilotApiConfig.publicApiKey) {
384
+ setBannerError(
385
+ new CopilotKitError({
386
+ message: "observabilityHooks requires a publicApiKey to function.",
387
+ code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
388
+ severity: Severity.CRITICAL,
389
+ visibility: ErrorVisibility.BANNER,
390
+ }),
391
+ );
392
+ styledConsole.publicApiKeyRequired("observabilityHooks");
393
+ }
394
+ },
395
+ [copilotApiConfig.publicApiKey, observabilityHooks],
396
+ );
397
+
344
398
  // Clipboard paste handler
345
399
  useEffect(() => {
346
400
  if (!imageUploadsEnabled) return;
@@ -430,6 +484,19 @@ export function CopilotChat({
430
484
  onReloadMessages,
431
485
  );
432
486
 
487
+ // Track loading state changes for chat start/stop events
488
+ const prevIsLoading = useRef(isLoading);
489
+ useEffect(() => {
490
+ if (prevIsLoading.current !== isLoading) {
491
+ if (isLoading) {
492
+ triggerObservabilityHook("onChatStarted");
493
+ } else {
494
+ triggerObservabilityHook("onChatStopped");
495
+ }
496
+ prevIsLoading.current = isLoading;
497
+ }
498
+ }, [isLoading, triggerObservabilityHook]);
499
+
433
500
  // Wrapper for sendMessage to clear selected images
434
501
  const handleSendMessage = (text: string) => {
435
502
  const images = selectedImages;
@@ -438,6 +505,9 @@ export function CopilotChat({
438
505
  fileInputRef.current.value = "";
439
506
  }
440
507
 
508
+ // Trigger message sent event
509
+ triggerObservabilityHook("onMessageSent", text);
510
+
441
511
  return sendMessage(text, images);
442
512
  };
443
513
 
@@ -449,6 +519,9 @@ export function CopilotChat({
449
519
  onRegenerate(messageId);
450
520
  }
451
521
 
522
+ // Trigger message regenerated event
523
+ triggerObservabilityHook("onMessageRegenerated", messageId);
524
+
452
525
  reloadMessages(messageId);
453
526
  };
454
527
 
@@ -456,6 +529,9 @@ export function CopilotChat({
456
529
  if (onCopy) {
457
530
  onCopy(message);
458
531
  }
532
+
533
+ // Trigger message copied event
534
+ triggerObservabilityHook("onMessageCopied", message);
459
535
  };
460
536
 
461
537
  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -496,6 +572,24 @@ export function CopilotChat({
496
572
  setSelectedImages((prev) => prev.filter((_, i) => i !== index));
497
573
  };
498
574
 
575
+ const handleThumbsUp = (message: Message) => {
576
+ if (onThumbsUp) {
577
+ onThumbsUp(message);
578
+ }
579
+
580
+ // Trigger feedback given event
581
+ triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsUp");
582
+ };
583
+
584
+ const handleThumbsDown = (message: Message) => {
585
+ if (onThumbsDown) {
586
+ onThumbsDown(message);
587
+ }
588
+
589
+ // Trigger feedback given event
590
+ triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
591
+ };
592
+
499
593
  return (
500
594
  <WrappedCopilotChat icons={icons} labels={labels} className={className}>
501
595
  <Messages
@@ -506,8 +600,8 @@ export function CopilotChat({
506
600
  inProgress={isLoading}
507
601
  onRegenerate={handleRegenerate}
508
602
  onCopy={handleCopy}
509
- onThumbsUp={onThumbsUp}
510
- onThumbsDown={onThumbsDown}
603
+ onThumbsUp={handleThumbsUp}
604
+ onThumbsDown={handleThumbsDown}
511
605
  markdownTagRenderers={markdownTagRenderers}
512
606
  ImageRenderer={ImageRenderer}
513
607
  >
@@ -1,6 +1,6 @@
1
- import React, { useMemo } from "react";
2
- import { ChatContextProvider } from "./ChatContext";
3
- import { ButtonProps, HeaderProps, WindowProps } from "./props";
1
+ import React, { useMemo, useCallback, useEffect, useRef } from "react";
2
+ import { ChatContextProvider, useChatContext } from "./ChatContext";
3
+ import { ButtonProps, HeaderProps, WindowProps, CopilotObservabilityHooks } from "./props";
4
4
  import { Window as DefaultWindow } from "./Window";
5
5
  import { Button as DefaultButton } from "./Button";
6
6
  import { Header as DefaultHeader } from "./Header";
@@ -9,6 +9,7 @@ import { Input as DefaultInput } from "./Input";
9
9
  import { CopilotChat, CopilotChatProps } from "./Chat";
10
10
  import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
11
11
  import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
12
+ import { useCopilotContext } from "@copilotkit/react-core";
12
13
 
13
14
  export interface CopilotModalProps extends CopilotChatProps {
14
15
  /**
@@ -57,6 +58,78 @@ export interface CopilotModalProps extends CopilotChatProps {
57
58
  Header?: React.ComponentType<HeaderProps>;
58
59
  }
59
60
 
61
+ // Inner component that has access to the Copilot context
62
+ const CopilotModalInner = ({
63
+ observabilityHooks,
64
+ onSetOpen,
65
+ clickOutsideToClose,
66
+ hitEscapeToClose,
67
+ shortcut,
68
+ className,
69
+ children,
70
+ Window,
71
+ Button,
72
+ Header,
73
+ ...chatProps
74
+ }: Omit<CopilotModalProps, "icons" | "labels" | "defaultOpen"> & {
75
+ Window: React.ComponentType<WindowProps>;
76
+ Button: React.ComponentType<ButtonProps>;
77
+ Header: React.ComponentType<HeaderProps>;
78
+ clickOutsideToClose: boolean;
79
+ hitEscapeToClose: boolean;
80
+ shortcut: string;
81
+ }) => {
82
+ const { copilotApiConfig } = useCopilotContext();
83
+
84
+ // Helper function to trigger event hooks only if publicApiKey is provided
85
+ const triggerObservabilityHook = useCallback(
86
+ (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {
87
+ if (copilotApiConfig.publicApiKey && observabilityHooks?.[hookName]) {
88
+ (observabilityHooks[hookName] as any)(...args);
89
+ }
90
+ },
91
+ [copilotApiConfig.publicApiKey, observabilityHooks],
92
+ );
93
+
94
+ const { open } = useChatContext();
95
+ const prevOpen = useRef(open);
96
+
97
+ // Monitor open state changes and trigger event hooks
98
+ useEffect(() => {
99
+ if (prevOpen.current !== open) {
100
+ onSetOpen?.(open);
101
+
102
+ // Trigger chat minimize/expand events
103
+ if (open) {
104
+ triggerObservabilityHook("onChatExpanded");
105
+ } else {
106
+ triggerObservabilityHook("onChatMinimized");
107
+ }
108
+ prevOpen.current = open;
109
+ }
110
+ }, [open, onSetOpen, triggerObservabilityHook]);
111
+
112
+ const memoizedHeader = useMemo(() => <Header />, [Header]);
113
+ const memoizedChildren = useMemo(() => children, [children]);
114
+
115
+ return (
116
+ <>
117
+ {memoizedChildren}
118
+ <div className={className}>
119
+ <Button></Button>
120
+ <Window
121
+ clickOutsideToClose={clickOutsideToClose}
122
+ shortcut={shortcut}
123
+ hitEscapeToClose={hitEscapeToClose}
124
+ >
125
+ {memoizedHeader}
126
+ <CopilotChat {...chatProps} observabilityHooks={observabilityHooks} />
127
+ </Window>
128
+ </div>
129
+ </>
130
+ );
131
+ };
132
+
60
133
  export const CopilotModal = ({
61
134
  instructions,
62
135
  defaultOpen = false,
@@ -85,49 +158,42 @@ export const CopilotModal = ({
85
158
  markdownTagRenderers,
86
159
  className,
87
160
  children,
161
+ observabilityHooks,
88
162
  ...props
89
163
  }: CopilotModalProps) => {
90
164
  const [openState, setOpenState] = React.useState(defaultOpen);
91
165
 
92
- const setOpen = (open: boolean) => {
93
- onSetOpen?.(open);
94
- setOpenState(open);
95
- };
96
-
97
- const memoizedHeader = useMemo(() => <Header />, [Header]);
98
- const memoizedChildren = useMemo(() => children, [children]);
99
-
100
166
  return (
101
- <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpen}>
102
- {memoizedChildren}
103
- <div className={className}>
104
- <Button></Button>
105
- <Window
106
- clickOutsideToClose={clickOutsideToClose}
107
- shortcut={shortcut}
108
- hitEscapeToClose={hitEscapeToClose}
109
- >
110
- {memoizedHeader}
111
- <CopilotChat
112
- {...props}
113
- instructions={instructions}
114
- onSubmitMessage={onSubmitMessage}
115
- onStopGeneration={onStopGeneration}
116
- onReloadMessages={onReloadMessages}
117
- makeSystemMessage={makeSystemMessage}
118
- onInProgress={onInProgress}
119
- Messages={Messages}
120
- Input={Input}
121
- AssistantMessage={AssistantMessage}
122
- UserMessage={UserMessage}
123
- onThumbsUp={onThumbsUp}
124
- onThumbsDown={onThumbsDown}
125
- onCopy={onCopy}
126
- onRegenerate={onRegenerate}
127
- markdownTagRenderers={markdownTagRenderers}
128
- />
129
- </Window>
130
- </div>
167
+ <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpenState}>
168
+ <CopilotModalInner
169
+ observabilityHooks={observabilityHooks}
170
+ onSetOpen={onSetOpen}
171
+ clickOutsideToClose={clickOutsideToClose ?? true}
172
+ hitEscapeToClose={hitEscapeToClose ?? true}
173
+ shortcut={shortcut ?? "/"}
174
+ className={className}
175
+ Window={Window}
176
+ Button={Button}
177
+ Header={Header}
178
+ instructions={instructions}
179
+ onSubmitMessage={onSubmitMessage}
180
+ onStopGeneration={onStopGeneration}
181
+ onReloadMessages={onReloadMessages}
182
+ makeSystemMessage={makeSystemMessage}
183
+ onInProgress={onInProgress}
184
+ Messages={Messages}
185
+ Input={Input}
186
+ AssistantMessage={AssistantMessage}
187
+ UserMessage={UserMessage}
188
+ onThumbsUp={onThumbsUp}
189
+ onThumbsDown={onThumbsDown}
190
+ onCopy={onCopy}
191
+ onRegenerate={onRegenerate}
192
+ markdownTagRenderers={markdownTagRenderers}
193
+ {...props}
194
+ >
195
+ {children}
196
+ </CopilotModalInner>
131
197
  </ChatContextProvider>
132
198
  );
133
199
  };
@@ -28,6 +28,26 @@
28
28
  * />
29
29
  * ```
30
30
  *
31
+ * ### With Observability Hooks
32
+ *
33
+ * To monitor user interactions, provide the `observabilityHooks` prop.
34
+ * **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
35
+ *
36
+ * ```tsx
37
+ * <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
38
+ * <CopilotPopup
39
+ * observabilityHooks={{
40
+ * onChatExpanded: () => {
41
+ * console.log("Popup opened");
42
+ * },
43
+ * onChatMinimized: () => {
44
+ * console.log("Popup closed");
45
+ * },
46
+ * }}
47
+ * />
48
+ * </CopilotKit>
49
+ * ```
50
+ *
31
51
  * ### Look & Feel
32
52
  *
33
53
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
@@ -30,6 +30,28 @@
30
30
  * </CopilotSidebar>
31
31
  * ```
32
32
  *
33
+ * ### With Observability Hooks
34
+ *
35
+ * To monitor user interactions, provide the `observabilityHooks` prop.
36
+ * **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
37
+ *
38
+ * ```tsx
39
+ * <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
40
+ * <CopilotSidebar
41
+ * observabilityHooks={{
42
+ * onChatExpanded: () => {
43
+ * console.log("Sidebar opened");
44
+ * },
45
+ * onChatMinimized: () => {
46
+ * console.log("Sidebar closed");
47
+ * },
48
+ * }}
49
+ * >
50
+ * <YourApp/>
51
+ * </CopilotSidebar>
52
+ * </CopilotKit>
53
+ * ```
54
+ *
33
55
  * ### Look & Feel
34
56
  *
35
57
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
@@ -3,6 +3,52 @@ import { CopilotChatSuggestion } from "../../types/suggestions";
3
3
  import { ReactNode } from "react";
4
4
  import { ImageData } from "@copilotkit/shared";
5
5
 
6
+ /**
7
+ * Event hooks for CopilotKit chat events.
8
+ * These hooks only work when publicApiKey is provided.
9
+ */
10
+ export interface CopilotObservabilityHooks {
11
+ /**
12
+ * Called when a message is sent by the user
13
+ */
14
+ onMessageSent?: (message: string) => void;
15
+
16
+ /**
17
+ * Called when the chat is minimized/closed
18
+ */
19
+ onChatMinimized?: () => void;
20
+
21
+ /**
22
+ * Called when the chat is expanded/opened
23
+ */
24
+ onChatExpanded?: () => void;
25
+
26
+ /**
27
+ * Called when a message is regenerated
28
+ */
29
+ onMessageRegenerated?: (messageId: string) => void;
30
+
31
+ /**
32
+ * Called when a message is copied
33
+ */
34
+ onMessageCopied?: (content: string) => void;
35
+
36
+ /**
37
+ * Called when feedback is given (thumbs up/down)
38
+ */
39
+ onFeedbackGiven?: (messageId: string, type: "thumbsUp" | "thumbsDown") => void;
40
+
41
+ /**
42
+ * Called when chat generation starts
43
+ */
44
+ onChatStarted?: () => void;
45
+
46
+ /**
47
+ * Called when chat generation stops
48
+ */
49
+ onChatStopped?: () => void;
50
+ }
51
+
6
52
  export interface ButtonProps {}
7
53
 
8
54
  export interface WindowProps {
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/chat/Sidebar.tsx"],"sourcesContent":["/**\n * <br/>\n * <img src=\"https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotSidebar.gif\" width=\"500\" />\n *\n * A chatbot sidebar component for the CopilotKit framework. Highly customizable through various props and custom CSS.\n *\n * See [CopilotPopup](/reference/components/chat/CopilotPopup) for a popup version of this component.\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 { CopilotSidebar } from \"@copilotkit/react-ui\";\n * import \"@copilotkit/react-ui/styles.css\";\n *\n * <CopilotSidebar\n * labels={{\n * title: \"Your Assistant\",\n * initial: \"Hi! 👋 How can I assist you today?\",\n * }}\n * >\n * <YourApp/>\n * </CopilotSidebar>\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 */\nimport React, { useState } from \"react\";\nimport { CopilotModal, CopilotModalProps } from \"./Modal\";\n\nexport function CopilotSidebar(props: CopilotModalProps) {\n props = {\n ...props,\n className: props.className ? props.className + \" copilotKitSidebar\" : \"copilotKitSidebar\",\n };\n const [expandedClassName, setExpandedClassName] = useState(\n props.defaultOpen ? \"sidebarExpanded\" : \"\",\n );\n\n const onSetOpen = (open: boolean) => {\n props.onSetOpen?.(open);\n setExpandedClassName(open ? \"sidebarExpanded\" : \"\");\n };\n\n return (\n <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>\n <CopilotModal {...props} {...{ onSetOpen }}>\n {props.children}\n </CopilotModal>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;AAiDA,SAAgB,gBAAgB;AAmB1B;AAhBC,SAAS,eAAe,OAA0B;AACvD,UAAQ,iCACH,QADG;AAAA,IAEN,WAAW,MAAM,YAAY,MAAM,YAAY,uBAAuB;AAAA,EACxE;AACA,QAAM,CAAC,mBAAmB,oBAAoB,IAAI;AAAA,IAChD,MAAM,cAAc,oBAAoB;AAAA,EAC1C;AAEA,QAAM,YAAY,CAAC,SAAkB;AA7DvC;AA8DI,gBAAM,cAAN,+BAAkB;AAClB,yBAAqB,OAAO,oBAAoB,EAAE;AAAA,EACpD;AAEA,SACE,oBAAC,SAAI,WAAW,mCAAmC,qBACjD,8BAAC,8DAAiB,QAAW,EAAE,UAAU,IAAxC,EACE,gBAAM,WACT,GACF;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/chat/Chat.tsx"],"sourcesContent":["/**\n * <br/>\n * <img src=\"https://cdn.copilotkit.ai/docs/copilotkit/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 { RenderMessage as DefaultRenderMessage } from \"./messages/RenderMessage\";\nimport { AssistantMessage as DefaultAssistantMessage } from \"./messages/AssistantMessage\";\nimport { UserMessage as DefaultUserMessage } from \"./messages/UserMessage\";\nimport { ImageRenderer as DefaultImageRenderer } from \"./messages/ImageRenderer\";\nimport React, { useEffect, useRef, useState, useCallback, useMemo } from \"react\";\nimport {\n SystemMessageFunction,\n useCopilotChatInternal as useCopilotChat,\n useCopilotContext,\n useCopilotMessagesContext,\n} from \"@copilotkit/react-core\";\nimport type { SuggestionItem } from \"@copilotkit/react-core\";\nimport { Message } from \"@copilotkit/shared\";\nimport { randomId } from \"@copilotkit/shared\";\nimport {\n AssistantMessageProps,\n ComponentsMap,\n ImageRendererProps,\n InputProps,\n MessagesProps,\n RenderMessageProps,\n RenderSuggestionsListProps,\n UserMessageProps,\n} from \"./props\";\n\nimport { HintFunction, runAgent, stopAgent } from \"@copilotkit/react-core\";\nimport { ImageUploadQueue } from \"./ImageUploadQueue\";\nimport { Suggestions as DefaultRenderSuggestionsList } from \"./Suggestions\";\n\n/**\n * The type of suggestions to use in the chat.\n *\n * `auto` - Suggestions are generated automatically.\n * `manual` - Suggestions are controlled programmatically.\n * `SuggestionItem[]` - Static suggestions array.\n */\nexport type ChatSuggestions = \"auto\" | \"manual\" | SuggestionItem[];\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 * Controls the behavior of suggestions in the chat interface.\n *\n * `auto` (default) - Suggestions are generated automatically:\n * - When the chat is first opened (empty state)\n * - After each message exchange completes\n * - Uses configuration from `useCopilotChatSuggestions` hooks\n *\n * `manual` - Suggestions are controlled programmatically:\n * - Use `setSuggestions()` to set custom suggestions\n * - Use `generateSuggestions()` to trigger AI generation\n * - Access via `useCopilotChat` hook\n *\n * `SuggestionItem[]` - Static suggestions array:\n * - Always shows the same suggestions\n * - No AI generation involved\n */\n suggestions?: ChatSuggestions;\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 * A custom stop generation function.\n */\n onStopGeneration?: OnStopGeneration;\n\n /**\n * A custom reload messages function.\n */\n onReloadMessages?: OnReloadMessages;\n\n /**\n * A callback function to regenerate the assistant's response\n */\n onRegenerate?: (messageId: string) => void;\n\n /**\n * A callback function when the message is copied\n */\n onCopy?: (message: string) => void;\n\n /**\n * A callback function for thumbs up feedback\n */\n onThumbsUp?: (message: Message) => void;\n\n /**\n * A callback function for thumbs down feedback\n */\n onThumbsDown?: (message: Message) => void;\n\n /**\n * A list of markdown components to render in assistant message.\n * Useful when you want to render custom elements in the message (e.g a reference tag element)\n */\n markdownTagRenderers?: ComponentsMap;\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 * Enable image upload button (image inputs only supported on some models)\n */\n imageUploadsEnabled?: boolean;\n\n /**\n * The 'accept' attribute for the file input used for image uploads.\n * Defaults to \"image/*\".\n */\n inputFileAccept?: string;\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 * A custom assistant message component to use instead of the default.\n */\n AssistantMessage?: React.ComponentType<AssistantMessageProps>;\n\n /**\n * A custom user message component to use instead of the default.\n */\n UserMessage?: React.ComponentType<UserMessageProps>;\n\n /**\n * A custom Messages component to use instead of the default.\n */\n Messages?: React.ComponentType<MessagesProps>;\n\n /**\n * A custom RenderMessage component to use instead of the default.\n *\n * **Warning**: This is a break-glass solution to allow for custom\n * rendering of messages. You are most likely looking to swap out\n * the AssistantMessage and UserMessage components instead which\n * are also props.\n */\n RenderMessage?: React.ComponentType<RenderMessageProps>;\n\n /**\n * A custom suggestions list component to use instead of the default.\n */\n RenderSuggestionsList?: React.ComponentType<RenderSuggestionsListProps>;\n\n /**\n * A custom Input component to use instead of the default.\n */\n Input?: React.ComponentType<InputProps>;\n\n /**\n * A custom image rendering component to use instead of the default.\n */\n ImageRenderer?: React.ComponentType<ImageRendererProps>;\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 hideStopButton?: boolean;\n}\n\ninterface OnStopGenerationArguments {\n /**\n * The name of the currently executing agent.\n */\n currentAgentName: string | undefined;\n\n /**\n * The messages in the chat.\n */\n messages: Message[];\n\n /**\n * Set the messages in the chat.\n */\n setMessages: (messages: Message[]) => void;\n\n /**\n * Stop chat generation.\n */\n stopGeneration: () => void;\n\n /**\n * Restart the currently executing agent.\n */\n restartCurrentAgent: () => void;\n\n /**\n * Stop the currently executing agent.\n */\n stopCurrentAgent: () => void;\n\n /**\n * Run the currently executing agent.\n */\n runCurrentAgent: (hint?: HintFunction) => Promise<void>;\n\n /**\n * Set the state of the currently executing agent.\n */\n setCurrentAgentState: (state: any) => void;\n}\n\nexport type OnReloadMessagesArguments = OnStopGenerationArguments & {\n /**\n * The message on which \"regenerate\" was pressed\n */\n messageId: string;\n};\n\nexport type OnStopGeneration = (args: OnStopGenerationArguments) => void;\n\nexport type OnReloadMessages = (args: OnReloadMessagesArguments) => void;\n\nexport type ImageUpload = {\n contentType: string;\n bytes: string;\n};\n\nexport function CopilotChat({\n instructions,\n suggestions = \"auto\",\n onSubmitMessage,\n makeSystemMessage,\n onInProgress,\n onStopGeneration,\n onReloadMessages,\n onRegenerate,\n onCopy,\n onThumbsUp,\n onThumbsDown,\n markdownTagRenderers,\n Messages = DefaultMessages,\n RenderMessage = DefaultRenderMessage,\n RenderSuggestionsList = DefaultRenderSuggestionsList,\n Input = DefaultInput,\n className,\n icons,\n labels,\n AssistantMessage = DefaultAssistantMessage,\n UserMessage = DefaultUserMessage,\n ImageRenderer = DefaultImageRenderer,\n imageUploadsEnabled,\n inputFileAccept = \"image/*\",\n hideStopButton,\n}: CopilotChatProps) {\n const { additionalInstructions, setChatInstructions } = useCopilotContext();\n const [selectedImages, setSelectedImages] = useState<Array<ImageUpload>>([]);\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n // Clipboard paste handler\n useEffect(() => {\n if (!imageUploadsEnabled) return;\n\n const handlePaste = async (e: ClipboardEvent) => {\n const target = e.target as HTMLElement;\n if (!target.parentElement?.classList.contains(\"copilotKitInput\")) return;\n\n const items = Array.from(e.clipboardData?.items || []);\n const imageItems = items.filter((item) => item.type.startsWith(\"image/\"));\n\n if (imageItems.length === 0) return;\n\n e.preventDefault(); // Prevent default paste behavior for images\n\n const imagePromises: Promise<ImageUpload | null>[] = imageItems.map((item) => {\n const file = item.getAsFile();\n if (!file) return Promise.resolve(null);\n\n return new Promise<ImageUpload | null>((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (e) => {\n const base64String = (e.target?.result as string)?.split(\",\")[1];\n if (base64String) {\n resolve({\n contentType: file.type,\n bytes: base64String,\n });\n } else {\n resolve(null);\n }\n };\n reader.onerror = reject;\n reader.readAsDataURL(file);\n });\n });\n\n try {\n const loadedImages = (await Promise.all(imagePromises)).filter((img) => img !== null);\n setSelectedImages((prev) => [...prev, ...loadedImages]);\n } catch (error) {\n // TODO: Show an error message to the user\n console.error(\"Error processing pasted images:\", error);\n }\n };\n\n document.addEventListener(\"paste\", handlePaste);\n return () => document.removeEventListener(\"paste\", handlePaste);\n }, [imageUploadsEnabled]);\n\n useEffect(() => {\n if (!additionalInstructions?.length) {\n setChatInstructions(instructions || \"\");\n return;\n }\n\n /*\n Will result in a prompt like:\n\n You are a helpful assistant. \n Additionally, follow these instructions:\n - Do not answer questions about the weather.\n - Do not answer questions about the stock market.\"\n */\n const combinedAdditionalInstructions = [\n instructions,\n \"Additionally, follow these instructions:\",\n ...additionalInstructions.map((instruction) => `- ${instruction}`),\n ];\n\n setChatInstructions(combinedAdditionalInstructions.join(\"\\n\") || \"\");\n }, [instructions, additionalInstructions]);\n\n const {\n visibleMessages,\n isLoading,\n sendMessage,\n stopGeneration,\n reloadMessages,\n suggestions: currentSuggestions,\n } = useCopilotChatLogic(\n suggestions,\n makeSystemMessage,\n onInProgress,\n onSubmitMessage,\n onStopGeneration,\n onReloadMessages,\n );\n\n // Wrapper for sendMessage to clear selected images\n const handleSendMessage = (text: string) => {\n const images = selectedImages;\n setSelectedImages([]);\n if (fileInputRef.current) {\n fileInputRef.current.value = \"\";\n }\n\n return sendMessage(text, images);\n };\n\n const chatContext = React.useContext(ChatContext);\n const isVisible = chatContext ? chatContext.open : true;\n\n const handleRegenerate = (messageId: string) => {\n if (onRegenerate) {\n onRegenerate(messageId);\n }\n\n reloadMessages(messageId);\n };\n\n const handleCopy = (message: string) => {\n if (onCopy) {\n onCopy(message);\n }\n };\n\n const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {\n if (!event.target.files || event.target.files.length === 0) {\n return;\n }\n\n const files = Array.from(event.target.files).filter((file) => file.type.startsWith(\"image/\"));\n if (files.length === 0) return;\n\n const fileReadPromises = files.map((file) => {\n return new Promise<{ contentType: string; bytes: string }>((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (e) => {\n const base64String = (e.target?.result as string)?.split(\",\")[1] || \"\";\n if (base64String) {\n resolve({\n contentType: file.type,\n bytes: base64String,\n });\n }\n };\n reader.onerror = reject;\n reader.readAsDataURL(file);\n });\n });\n\n try {\n const loadedImages = await Promise.all(fileReadPromises);\n setSelectedImages((prev) => [...prev, ...loadedImages]);\n } catch (error) {\n // TODO: Show an error message to the user\n console.error(\"Error reading files:\", error);\n }\n };\n\n const removeSelectedImage = (index: number) => {\n setSelectedImages((prev) => prev.filter((_, i) => i !== index));\n };\n\n return (\n <WrappedCopilotChat icons={icons} labels={labels} className={className}>\n <Messages\n AssistantMessage={AssistantMessage}\n UserMessage={UserMessage}\n RenderMessage={RenderMessage}\n messages={visibleMessages}\n inProgress={isLoading}\n onRegenerate={handleRegenerate}\n onCopy={handleCopy}\n onThumbsUp={onThumbsUp}\n onThumbsDown={onThumbsDown}\n markdownTagRenderers={markdownTagRenderers}\n ImageRenderer={ImageRenderer}\n >\n {currentSuggestions.length > 0 && (\n <RenderSuggestionsList\n onSuggestionClick={handleSendMessage}\n suggestions={currentSuggestions}\n />\n )}\n </Messages>\n\n {imageUploadsEnabled && (\n <>\n <ImageUploadQueue images={selectedImages} onRemoveImage={removeSelectedImage} />\n <input\n type=\"file\"\n multiple\n ref={fileInputRef}\n onChange={handleImageUpload}\n accept={inputFileAccept}\n style={{ display: \"none\" }}\n />\n </>\n )}\n <Input\n inProgress={isLoading}\n onSend={handleSendMessage}\n isVisible={isVisible}\n onStop={stopGeneration}\n onUpload={imageUploadsEnabled ? () => fileInputRef.current?.click() : undefined}\n hideStopButton={hideStopButton}\n />\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\nexport const useCopilotChatLogic = (\n chatSuggestions: ChatSuggestions,\n makeSystemMessage?: SystemMessageFunction,\n onInProgress?: (isLoading: boolean) => void,\n onSubmitMessage?: (messageContent: string) => Promise<void> | void,\n onStopGeneration?: OnStopGeneration,\n onReloadMessages?: OnReloadMessages,\n) => {\n const {\n visibleMessages,\n appendMessage,\n setMessages,\n reloadMessages: defaultReloadMessages,\n stopGeneration: defaultStopGeneration,\n runChatCompletion,\n isLoading,\n suggestions,\n setSuggestions,\n generateSuggestions,\n resetSuggestions: resetSuggestionsFromHook,\n isLoadingSuggestions,\n } = useCopilotChat({\n makeSystemMessage,\n });\n\n const generalContext = useCopilotContext();\n const messagesContext = useCopilotMessagesContext();\n\n // Get actions from context for message conversion\n const { actions } = generalContext;\n\n // Suggestion state management\n const [suggestionsFailed, setSuggestionsFailed] = useState(false);\n const hasGeneratedInitialSuggestions = useRef<boolean>(false);\n\n // Handle static suggestions (when suggestions prop is an array)\n useEffect(() => {\n if (Array.isArray(chatSuggestions)) {\n setSuggestions(chatSuggestions);\n hasGeneratedInitialSuggestions.current = true;\n }\n }, [JSON.stringify(chatSuggestions), setSuggestions]);\n\n // Error handling wrapper\n const generateSuggestionsWithErrorHandling = useCallback(\n async (context: string) => {\n try {\n await generateSuggestions();\n } catch (error) {\n console.error(\"Failed to generate suggestions:\", error);\n setSuggestionsFailed(true);\n }\n },\n [generateSuggestions],\n );\n\n // Automatic suggestion generation logic\n useEffect(() => {\n // Only proceed if in auto mode, not currently loading, and not failed\n if (chatSuggestions !== \"auto\" || isLoadingSuggestions || suggestionsFailed) {\n return;\n }\n\n // Don't run during chat loading (when the assistant is responding)\n if (isLoading) {\n return;\n }\n\n // Check if we have any configurations\n if (Object.keys(generalContext.chatSuggestionConfiguration).length === 0) {\n return;\n }\n\n // Generate initial suggestions when chat is empty\n if (visibleMessages.length === 0 && !hasGeneratedInitialSuggestions.current) {\n hasGeneratedInitialSuggestions.current = true;\n generateSuggestionsWithErrorHandling(\"initial\");\n return;\n }\n\n // Generate post-message suggestions after assistant responds\n if (visibleMessages.length > 0 && suggestions.length === 0) {\n generateSuggestionsWithErrorHandling(\"post-message\");\n return;\n }\n }, [\n chatSuggestions,\n isLoadingSuggestions,\n suggestionsFailed,\n visibleMessages.length,\n isLoading,\n suggestions.length,\n Object.keys(generalContext.chatSuggestionConfiguration).join(\",\"), // Use stable string instead of object reference\n generateSuggestionsWithErrorHandling,\n ]);\n\n // Reset suggestion state when switching away from auto mode\n useEffect(() => {\n if (chatSuggestions !== \"auto\") {\n hasGeneratedInitialSuggestions.current = false;\n setSuggestionsFailed(false);\n }\n }, [chatSuggestions]);\n\n // Memoize context to prevent infinite re-renders\n const stableContext = useMemo(\n () => ({\n ...generalContext,\n ...messagesContext,\n }),\n [\n // Only include stable dependencies\n generalContext.actions,\n messagesContext.messages.length,\n generalContext.isLoading,\n ],\n );\n\n // Wrapper for resetSuggestions that also resets local state\n const resetSuggestions = useCallback(() => {\n resetSuggestionsFromHook();\n setSuggestionsFailed(false);\n hasGeneratedInitialSuggestions.current = false;\n }, [resetSuggestionsFromHook]);\n\n useEffect(() => {\n onInProgress?.(isLoading);\n }, [onInProgress, isLoading]);\n\n const sendMessage = async (\n messageContent: string,\n imagesToUse?: Array<{ contentType: string; bytes: string }>,\n ) => {\n const images = imagesToUse || [];\n\n // Clear existing suggestions when user sends a message\n // This prevents stale suggestions from remaining visible during new conversation flow\n if (chatSuggestions === \"auto\" || chatSuggestions === \"manual\") {\n setSuggestions([]);\n }\n\n let firstMessage: Message | null = null;\n\n // Send text message if content provided\n if (messageContent.trim().length > 0) {\n const textMessage: Message = {\n id: randomId(),\n role: \"user\",\n content: messageContent,\n };\n\n // Call user-provided submit handler if available\n if (onSubmitMessage) {\n try {\n await onSubmitMessage(messageContent);\n } catch (error) {\n console.error(\"Error in onSubmitMessage:\", error);\n }\n }\n\n // Send the message and clear suggestions for auto/manual modes\n await appendMessage(textMessage, {\n followUp: images.length === 0,\n clearSuggestions: chatSuggestions === \"auto\" || chatSuggestions === \"manual\",\n });\n\n if (!firstMessage) {\n firstMessage = textMessage;\n }\n }\n\n // Send image messages\n if (images.length > 0) {\n for (let i = 0; i < images.length; i++) {\n const imageMessage = {\n id: randomId(),\n role: \"user\" as const,\n image: {\n format: images[i].contentType.replace(\"image/\", \"\"),\n bytes: images[i].bytes,\n },\n } as unknown as Message;\n await appendMessage(imageMessage, { followUp: i === images.length - 1 });\n if (!firstMessage) {\n firstMessage = imageMessage;\n }\n }\n }\n\n if (!firstMessage) {\n // Should not happen if send button is properly disabled, but handle just in case\n return { role: \"user\", content: \"\", id: randomId() } as Message; // Return a dummy message\n }\n\n // The hook implicitly triggers API call on appendMessage.\n // We return the first message sent (either text or first image)\n return firstMessage;\n };\n\n const messages = visibleMessages;\n const currentAgentName = generalContext.agentSession?.agentName;\n const restartCurrentAgent = async (hint?: HintFunction) => {\n if (generalContext.agentSession) {\n generalContext.setAgentSession({\n ...generalContext.agentSession,\n nodeName: undefined,\n threadId: undefined,\n });\n generalContext.setCoagentStates((prevAgentStates) => {\n return {\n ...prevAgentStates,\n [generalContext.agentSession!.agentName]: {\n ...prevAgentStates[generalContext.agentSession!.agentName],\n threadId: undefined,\n nodeName: undefined,\n runId: undefined,\n },\n };\n });\n }\n };\n const runCurrentAgent = async (hint?: HintFunction) => {\n if (generalContext.agentSession) {\n await runAgent(\n generalContext.agentSession.agentName,\n stableContext,\n appendMessage,\n runChatCompletion,\n hint,\n );\n }\n };\n const stopCurrentAgent = () => {\n if (generalContext.agentSession) {\n stopAgent(generalContext.agentSession.agentName, stableContext);\n }\n };\n const setCurrentAgentState = (state: any) => {\n if (generalContext.agentSession) {\n generalContext.setCoagentStates((prevAgentStates) => {\n return {\n ...prevAgentStates,\n [generalContext.agentSession!.agentName]: {\n state,\n },\n } as any;\n });\n }\n };\n\n function stopGeneration() {\n // Clear suggestions when stopping generation\n setSuggestions([]);\n\n if (onStopGeneration) {\n onStopGeneration({\n messages: messages,\n setMessages,\n stopGeneration: defaultStopGeneration,\n currentAgentName,\n restartCurrentAgent,\n stopCurrentAgent,\n runCurrentAgent,\n setCurrentAgentState,\n });\n } else {\n defaultStopGeneration();\n }\n }\n function reloadMessages(messageId: string) {\n if (onReloadMessages) {\n onReloadMessages({\n messages: messages,\n setMessages,\n stopGeneration: defaultStopGeneration,\n currentAgentName,\n restartCurrentAgent,\n stopCurrentAgent,\n runCurrentAgent,\n setCurrentAgentState,\n messageId,\n });\n } else {\n defaultReloadMessages(messageId);\n }\n }\n\n return {\n messages,\n visibleMessages,\n isLoading,\n suggestions,\n sendMessage,\n stopGeneration,\n reloadMessages,\n resetSuggestions,\n context: stableContext,\n actions,\n };\n};\n"],"mappings":"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","names":["Messages","RenderMessage","Input","AssistantMessage","UserMessage","ImageRenderer","e","_a","_b"]}