@copilotkit/react-ui 0.22.0 → 0.36.0-mme-pre.1
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/.turbo/turbo-build.log +211 -178
- package/CHANGELOG.md +24 -0
- package/dist/chunk-4MKP23AD.mjs +97 -0
- package/dist/chunk-4MKP23AD.mjs.map +1 -0
- package/dist/{chunk-T3WYKWNC.mjs → chunk-6XLZXLM5.mjs} +6 -6
- package/dist/chunk-6XLZXLM5.mjs.map +1 -0
- package/dist/{chunk-73EBDGYK.mjs → chunk-7FES2IQA.mjs} +5 -5
- package/dist/chunk-7FES2IQA.mjs.map +1 -0
- package/dist/chunk-ANO23V2M.mjs +135 -0
- package/dist/chunk-ANO23V2M.mjs.map +1 -0
- package/dist/chunk-BL65ZC6L.mjs +83 -0
- package/dist/chunk-BL65ZC6L.mjs.map +1 -0
- package/dist/{chunk-YEHO5VMA.mjs → chunk-CE7PJAAO.mjs} +2 -2
- package/dist/{chunk-7YXG7D47.mjs → chunk-FZC7X5PK.mjs} +57 -2
- package/dist/chunk-FZC7X5PK.mjs.map +1 -0
- package/dist/chunk-LTCJCXCP.mjs +29 -0
- package/dist/chunk-LTCJCXCP.mjs.map +1 -0
- package/dist/chunk-MRFF7GSQ.mjs +1 -0
- package/dist/{chunk-7JYUCW7H.mjs → chunk-PAQWLSA4.mjs} +2 -2
- package/dist/{chunk-YTIGBBTC.mjs → chunk-RT2XG2T7.mjs} +2 -2
- package/dist/chunk-RT2XG2T7.mjs.map +1 -0
- package/dist/chunk-T26KLXLH.mjs +1 -0
- package/dist/{chunk-6U3O2JZP.mjs → chunk-T3JTSIHT.mjs} +32 -39
- package/dist/chunk-T3JTSIHT.mjs.map +1 -0
- package/dist/{chunk-MBYUBR3F.mjs → chunk-UPTB2MVO.mjs} +2 -2
- package/dist/chunk-VUZA5AFH.mjs +73 -0
- package/dist/chunk-VUZA5AFH.mjs.map +1 -0
- package/dist/{chunk-YAORLSQ3.mjs → chunk-XRODMID5.mjs} +6 -6
- package/dist/chunk-XRODMID5.mjs.map +1 -0
- package/dist/{chunk-WDHLWSSU.mjs → chunk-YQ3D5IQV.mjs} +2 -2
- package/dist/{chunk-WM6BS77F.mjs → chunk-YQFVRDNC.mjs} +2 -2
- package/dist/{chunk-WM6BS77F.mjs.map → chunk-YQFVRDNC.mjs.map} +1 -1
- package/dist/chunk-ZO3GLN23.mjs +137 -0
- package/dist/chunk-ZO3GLN23.mjs.map +1 -0
- package/dist/components/chat/Button.js.map +1 -1
- package/dist/components/chat/Button.mjs +3 -3
- package/dist/components/chat/Chat.d.ts +66 -46
- package/dist/components/chat/Chat.js +433 -278
- package/dist/components/chat/Chat.js.map +1 -1
- package/dist/components/chat/Chat.mjs +15 -14
- package/dist/components/chat/ChatContext.d.ts +16 -16
- package/dist/components/chat/ChatContext.js +43 -27
- package/dist/components/chat/ChatContext.js.map +1 -1
- package/dist/components/chat/ChatContext.mjs +2 -2
- package/dist/components/chat/CodeBlock.js.map +1 -1
- package/dist/components/chat/CodeBlock.mjs +2 -2
- package/dist/components/chat/Header.js.map +1 -1
- package/dist/components/chat/Header.mjs +3 -3
- package/dist/components/chat/Icons.d.ts +7 -5
- package/dist/components/chat/Icons.js +57 -0
- package/dist/components/chat/Icons.js.map +1 -1
- package/dist/components/chat/Icons.mjs +5 -1
- package/dist/components/chat/Input.d.ts +1 -1
- package/dist/components/chat/Input.js +148 -11
- package/dist/components/chat/Input.js.map +1 -1
- package/dist/components/chat/Input.mjs +5 -4
- package/dist/components/chat/Markdown.js.map +1 -1
- package/dist/components/chat/Markdown.mjs +3 -3
- package/dist/components/chat/Messages.d.ts +1 -1
- package/dist/components/chat/Messages.js +2 -2
- package/dist/components/chat/Messages.js.map +1 -1
- package/dist/components/chat/Messages.mjs +5 -5
- package/dist/components/chat/Modal.d.ts +50 -0
- package/dist/components/chat/Modal.js +1584 -0
- package/dist/components/chat/Modal.js.map +1 -0
- package/dist/components/chat/Modal.mjs +23 -0
- package/dist/components/chat/Modal.mjs.map +1 -0
- package/dist/components/chat/Popup.d.ts +56 -4
- package/dist/components/chat/Popup.js +428 -78
- package/dist/components/chat/Popup.js.map +1 -1
- package/dist/components/chat/Popup.mjs +15 -12
- package/dist/components/chat/Response.js.map +1 -1
- package/dist/components/chat/Response.mjs +3 -3
- package/dist/components/chat/Sidebar.d.ts +7 -8
- package/dist/components/chat/Sidebar.js +430 -80
- package/dist/components/chat/Sidebar.js.map +1 -1
- package/dist/components/chat/Sidebar.mjs +15 -12
- package/dist/components/chat/Suggestion.d.ts +13 -0
- package/dist/components/chat/Suggestion.js +172 -0
- package/dist/components/chat/Suggestion.js.map +1 -0
- package/dist/components/chat/Suggestion.mjs +11 -0
- package/dist/components/chat/Suggestion.mjs.map +1 -0
- package/dist/components/chat/Textarea.d.ts +4 -4
- package/dist/components/chat/Textarea.js +1 -1
- package/dist/components/chat/Textarea.js.map +1 -1
- package/dist/components/chat/Textarea.mjs +1 -1
- package/dist/components/chat/index.d.ts +4 -2
- package/dist/components/chat/index.js +436 -84
- package/dist/components/chat/index.js.map +1 -1
- package/dist/components/chat/index.mjs +22 -16
- package/dist/components/chat/props.d.ts +10 -3
- package/dist/components/chat/props.js.map +1 -1
- package/dist/components/index.d.ts +4 -2
- package/dist/components/index.js +436 -84
- package/dist/components/index.js.map +1 -1
- package/dist/components/index.mjs +22 -16
- package/dist/hooks/index.d.ts +1 -2
- package/dist/hooks/index.js +36 -0
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/index.mjs +8 -1
- package/dist/hooks/use-copilot-chat-suggestions.d.ts +87 -0
- package/dist/hooks/use-copilot-chat-suggestions.js +53 -0
- package/dist/hooks/use-copilot-chat-suggestions.js.map +1 -0
- package/dist/hooks/use-copilot-chat-suggestions.mjs +8 -0
- package/dist/hooks/use-copilot-chat-suggestions.mjs.map +1 -0
- package/dist/hooks/use-push-to-talk.d.ts +19 -0
- package/dist/hooks/use-push-to-talk.js +177 -0
- package/dist/hooks/use-push-to-talk.js.map +1 -0
- package/dist/hooks/use-push-to-talk.mjs +12 -0
- package/dist/hooks/use-push-to-talk.mjs.map +1 -0
- package/dist/index.css +101 -13
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +5 -2
- package/dist/index.js +465 -86
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +29 -19
- package/dist/types/suggestions.d.ts +8 -0
- package/dist/types/suggestions.js +19 -0
- package/dist/types/suggestions.js.map +1 -0
- package/dist/types/suggestions.mjs +1 -0
- package/dist/types/suggestions.mjs.map +1 -0
- package/package.json +6 -6
- package/src/components/chat/Button.tsx +1 -2
- package/src/components/chat/Chat.tsx +163 -104
- package/src/components/chat/ChatContext.tsx +36 -38
- package/src/components/chat/Icons.tsx +44 -0
- package/src/components/chat/Input.tsx +38 -7
- package/src/components/chat/Messages.tsx +3 -3
- package/src/components/chat/Modal.tsx +115 -0
- package/src/components/chat/Popup.tsx +53 -7
- package/src/components/chat/Sidebar.tsx +62 -9
- package/src/components/chat/Suggestion.tsx +109 -0
- package/src/components/chat/Textarea.tsx +1 -1
- package/src/components/chat/index.tsx +1 -0
- package/src/components/chat/props.ts +10 -2
- package/src/css/input.css +18 -8
- package/src/css/messages.css +7 -1
- package/src/css/panel.css +38 -0
- package/src/css/response.css +1 -4
- package/src/css/suggestions.css +35 -0
- package/src/css/window.css +3 -1
- package/src/hooks/index.ts +1 -1
- package/src/hooks/use-copilot-chat-suggestions.tsx +117 -0
- package/src/hooks/use-push-to-talk.tsx +162 -0
- package/src/styles.css +2 -0
- package/src/types/suggestions.ts +6 -0
- package/typedoc.json +4 -0
- package/dist/chunk-6U3O2JZP.mjs.map +0 -1
- package/dist/chunk-73EBDGYK.mjs.map +0 -1
- package/dist/chunk-7LMXXGJT.mjs +0 -75
- package/dist/chunk-7LMXXGJT.mjs.map +0 -1
- package/dist/chunk-7YXG7D47.mjs.map +0 -1
- package/dist/chunk-H4VKQGVU.mjs +0 -1
- package/dist/chunk-KE3N45ZY.mjs +0 -63
- package/dist/chunk-KE3N45ZY.mjs.map +0 -1
- package/dist/chunk-T3WYKWNC.mjs.map +0 -1
- package/dist/chunk-UGQQ4WEQ.mjs +0 -1
- package/dist/chunk-YAORLSQ3.mjs.map +0 -1
- package/dist/chunk-YTIGBBTC.mjs.map +0 -1
- /package/dist/{chunk-YEHO5VMA.mjs.map → chunk-CE7PJAAO.mjs.map} +0 -0
- /package/dist/{chunk-H4VKQGVU.mjs.map → chunk-MRFF7GSQ.mjs.map} +0 -0
- /package/dist/{chunk-7JYUCW7H.mjs.map → chunk-PAQWLSA4.mjs.map} +0 -0
- /package/dist/{chunk-UGQQ4WEQ.mjs.map → chunk-T26KLXLH.mjs.map} +0 -0
- /package/dist/{chunk-MBYUBR3F.mjs.map → chunk-UPTB2MVO.mjs.map} +0 -0
- /package/dist/{chunk-WDHLWSSU.mjs.map → chunk-YQ3D5IQV.mjs.map} +0 -0
|
@@ -1,34 +1,32 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Messages
|
|
3
|
-
} from "./chunk-73EBDGYK.mjs";
|
|
4
|
-
import {
|
|
5
|
-
ResponseButton
|
|
6
|
-
} from "./chunk-YEHO5VMA.mjs";
|
|
7
1
|
import {
|
|
8
2
|
Window
|
|
9
3
|
} from "./chunk-B7DNOYVQ.mjs";
|
|
4
|
+
import {
|
|
5
|
+
Header
|
|
6
|
+
} from "./chunk-PAQWLSA4.mjs";
|
|
10
7
|
import {
|
|
11
8
|
Button
|
|
12
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-RT2XG2T7.mjs";
|
|
13
10
|
import {
|
|
14
|
-
|
|
15
|
-
} from "./chunk-
|
|
11
|
+
CopilotChat
|
|
12
|
+
} from "./chunk-ZO3GLN23.mjs";
|
|
16
13
|
import {
|
|
17
14
|
Input
|
|
18
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-BL65ZC6L.mjs";
|
|
19
16
|
import {
|
|
20
|
-
|
|
21
|
-
} from "./chunk-
|
|
17
|
+
Messages
|
|
18
|
+
} from "./chunk-7FES2IQA.mjs";
|
|
22
19
|
import {
|
|
23
|
-
|
|
24
|
-
} from "./chunk-
|
|
20
|
+
ResponseButton
|
|
21
|
+
} from "./chunk-CE7PJAAO.mjs";
|
|
22
|
+
import {
|
|
23
|
+
ChatContextProvider
|
|
24
|
+
} from "./chunk-VUZA5AFH.mjs";
|
|
25
25
|
|
|
26
|
-
// src/components/chat/
|
|
27
|
-
import React
|
|
28
|
-
import { useCopilotChat } from "@copilotkit/react-core";
|
|
29
|
-
import { nanoid } from "nanoid";
|
|
26
|
+
// src/components/chat/Modal.tsx
|
|
27
|
+
import React from "react";
|
|
30
28
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
31
|
-
var
|
|
29
|
+
var CopilotModal = ({
|
|
32
30
|
instructions,
|
|
33
31
|
defaultOpen = false,
|
|
34
32
|
clickOutsideToClose = true,
|
|
@@ -50,27 +48,11 @@ var CopilotChat = ({
|
|
|
50
48
|
className,
|
|
51
49
|
children
|
|
52
50
|
}) => {
|
|
53
|
-
const { visibleMessages, append, reload, stop, isLoading, input, setInput } = useCopilotChat({
|
|
54
|
-
id: nanoid(),
|
|
55
|
-
makeSystemMessage,
|
|
56
|
-
additionalInstructions: instructions
|
|
57
|
-
});
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
onInProgress == null ? void 0 : onInProgress(isLoading);
|
|
60
|
-
}, [isLoading]);
|
|
61
51
|
const [openState, setOpenState] = React.useState(defaultOpen);
|
|
62
52
|
const setOpen = (open) => {
|
|
63
53
|
onSetOpen == null ? void 0 : onSetOpen(open);
|
|
64
54
|
setOpenState(open);
|
|
65
55
|
};
|
|
66
|
-
const sendMessage = (message) => __async(void 0, null, function* () {
|
|
67
|
-
onSubmitMessage == null ? void 0 : onSubmitMessage(message);
|
|
68
|
-
append({
|
|
69
|
-
id: nanoid(),
|
|
70
|
-
content: message,
|
|
71
|
-
role: "user"
|
|
72
|
-
});
|
|
73
|
-
});
|
|
74
56
|
return /* @__PURE__ */ jsxs(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: [
|
|
75
57
|
children,
|
|
76
58
|
/* @__PURE__ */ jsxs("div", { className, children: [
|
|
@@ -85,8 +67,19 @@ var CopilotChat = ({
|
|
|
85
67
|
hitEscapeToClose,
|
|
86
68
|
children: [
|
|
87
69
|
/* @__PURE__ */ jsx(Header2, { open: openState, setOpen }),
|
|
88
|
-
/* @__PURE__ */ jsx(
|
|
89
|
-
|
|
70
|
+
/* @__PURE__ */ jsx(
|
|
71
|
+
CopilotChat,
|
|
72
|
+
{
|
|
73
|
+
instructions,
|
|
74
|
+
makeSystemMessage,
|
|
75
|
+
onInProgress,
|
|
76
|
+
onSubmitMessage,
|
|
77
|
+
showResponseButton,
|
|
78
|
+
Messages: Messages2,
|
|
79
|
+
Input: Input2,
|
|
80
|
+
ResponseButton: ResponseButton2
|
|
81
|
+
}
|
|
82
|
+
)
|
|
90
83
|
]
|
|
91
84
|
}
|
|
92
85
|
)
|
|
@@ -95,6 +88,6 @@ var CopilotChat = ({
|
|
|
95
88
|
};
|
|
96
89
|
|
|
97
90
|
export {
|
|
98
|
-
|
|
91
|
+
CopilotModal
|
|
99
92
|
};
|
|
100
|
-
//# sourceMappingURL=chunk-
|
|
93
|
+
//# sourceMappingURL=chunk-T3JTSIHT.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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={setOpenState}>\n {children}\n <div className={className}>\n <Button open={openState} setOpen={setOpen}></Button>\n <Window\n open={openState}\n setOpen={setOpen}\n clickOutsideToClose={clickOutsideToClose}\n shortcut={shortcut}\n hitEscapeToClose={hitEscapeToClose}\n >\n <Header open={openState} setOpen={setOpen} />\n <CopilotChat\n instructions={instructions}\n makeSystemMessage={makeSystemMessage}\n onInProgress={onInProgress}\n onSubmitMessage={onSubmitMessage}\n showResponseButton={showResponseButton}\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,SAAS,cAC1E;AAAA;AAAA,IACD,qBAAC,SAAI,WACH;AAAA,0BAACJ,SAAA,EAAO,MAAM,WAAW,SAAkB;AAAA,MAC3C;AAAA,QAACD;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA,gCAACE,SAAA,EAAO,MAAM,WAAW,SAAkB;AAAA,YAC3C;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"]}
|
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
CheckIcon,
|
|
3
3
|
CopyIcon,
|
|
4
4
|
DownloadIcon
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-FZC7X5PK.mjs";
|
|
6
6
|
import {
|
|
7
7
|
useCopyToClipboard
|
|
8
8
|
} from "./chunk-54JAUBUJ.mjs";
|
|
@@ -392,4 +392,4 @@ export {
|
|
|
392
392
|
generateRandomString,
|
|
393
393
|
CodeBlock
|
|
394
394
|
};
|
|
395
|
-
//# sourceMappingURL=chunk-
|
|
395
|
+
//# sourceMappingURL=chunk-UPTB2MVO.mjs.map
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ActivityIcon,
|
|
3
|
+
CloseIcon,
|
|
4
|
+
HeaderCloseIcon,
|
|
5
|
+
OpenIcon,
|
|
6
|
+
PushToTalkIcon,
|
|
7
|
+
RegenerateIcon,
|
|
8
|
+
SendIcon,
|
|
9
|
+
SpinnerIcon,
|
|
10
|
+
StopIcon
|
|
11
|
+
} from "./chunk-FZC7X5PK.mjs";
|
|
12
|
+
import {
|
|
13
|
+
__spreadProps,
|
|
14
|
+
__spreadValues
|
|
15
|
+
} from "./chunk-MRXNTQOX.mjs";
|
|
16
|
+
|
|
17
|
+
// src/components/chat/ChatContext.tsx
|
|
18
|
+
import React from "react";
|
|
19
|
+
import { jsx } from "react/jsx-runtime";
|
|
20
|
+
var ChatContext = React.createContext(void 0);
|
|
21
|
+
function useChatContext() {
|
|
22
|
+
const context = React.useContext(ChatContext);
|
|
23
|
+
if (context === void 0) {
|
|
24
|
+
throw new Error(
|
|
25
|
+
"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?"
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
return context;
|
|
29
|
+
}
|
|
30
|
+
var ChatContextProvider = ({
|
|
31
|
+
// temperature,
|
|
32
|
+
// instructions,
|
|
33
|
+
// maxFeedback,
|
|
34
|
+
labels,
|
|
35
|
+
icons,
|
|
36
|
+
children,
|
|
37
|
+
open,
|
|
38
|
+
setOpen
|
|
39
|
+
}) => {
|
|
40
|
+
const context = {
|
|
41
|
+
labels: __spreadValues(__spreadValues({}, {
|
|
42
|
+
initial: "",
|
|
43
|
+
title: "CopilotKit",
|
|
44
|
+
placeholder: "Type a message...",
|
|
45
|
+
error: "\u274C An error occurred. Please try again.",
|
|
46
|
+
stopGenerating: "Stop generating",
|
|
47
|
+
regenerateResponse: "Regenerate response"
|
|
48
|
+
}), labels),
|
|
49
|
+
icons: __spreadProps(__spreadValues({}, {
|
|
50
|
+
openIcon: OpenIcon,
|
|
51
|
+
closeIcon: CloseIcon,
|
|
52
|
+
headerCloseIcon: HeaderCloseIcon,
|
|
53
|
+
sendIcon: SendIcon,
|
|
54
|
+
activityIcon: ActivityIcon,
|
|
55
|
+
spinnerIcon: SpinnerIcon,
|
|
56
|
+
stopIcon: StopIcon,
|
|
57
|
+
regenerateIcon: RegenerateIcon,
|
|
58
|
+
pushToTalkIcon: PushToTalkIcon
|
|
59
|
+
}), {
|
|
60
|
+
icons
|
|
61
|
+
}),
|
|
62
|
+
open,
|
|
63
|
+
setOpen
|
|
64
|
+
};
|
|
65
|
+
return /* @__PURE__ */ jsx(ChatContext.Provider, { value: context, children });
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export {
|
|
69
|
+
ChatContext,
|
|
70
|
+
useChatContext,
|
|
71
|
+
ChatContextProvider
|
|
72
|
+
};
|
|
73
|
+
//# sourceMappingURL=chunk-VUZA5AFH.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/chat/ChatContext.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n /**\n * The icon to use for the open chat button.\n * @default <OpenIcon />\n */\n openIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button.\n * @default <CloseIcon />\n */\n closeIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button in the header.\n * @default <HeaderCloseIcon />\n */\n headerCloseIcon?: React.ReactNode;\n\n /**\n * The icon to use for the send button.\n * @default <SendIcon />\n */\n sendIcon?: React.ReactNode;\n\n /**\n * The icon to use for the activity indicator.\n * @default <ActivityIcon />\n */\n activityIcon?: React.ReactNode;\n\n /**\n * The icon to use for the spinner.\n * @default <SpinnerIcon />\n */\n spinnerIcon?: React.ReactNode;\n\n /**\n * The icon to use for the stop button.\n * @default <StopIcon />\n */\n stopIcon?: React.ReactNode;\n\n /**\n * The icon to use for the regenerate button.\n * @default <RegenerateIcon />\n */\n regenerateIcon?: React.ReactNode;\n\n /**\n * The icons to use for push to talk.\n * @default <PushToTalkIcon />\n */\n\n pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n /**\n * The initial message(s) to display in the chat window.\n */\n initial?: string | string[];\n\n /**\n * The title to display in the header.\n * @default \"CopilotKit\"\n */\n title?: string;\n\n /**\n * The placeholder to display in the input.\n * @default \"Type a message...\"\n */\n placeholder?: string;\n\n /**\n * The message to display when an error occurs.\n * @default \"❌ An error occurred. Please try again.\"\n */\n error?: string;\n\n /**\n * The label to display on the stop button.\n * @default \"Stop generating\"\n */\n stopGenerating?: string;\n\n /**\n * The label to display on the regenerate button.\n * @default \"Regenerate response\"\n */\n regenerateResponse?: string;\n}\n\ninterface ChatContext {\n labels: Required<CopilotChatLabels>;\n icons: Required<CopilotChatIcons>;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n const context = React.useContext(ChatContext);\n if (context === undefined) {\n throw new Error(\n \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n );\n }\n return context;\n}\n\ninterface ChatContextProps {\n // temperature?: number;\n // instructions?: string;\n // maxFeedback?: number;\n labels?: CopilotChatLabels;\n icons?: CopilotChatIcons;\n children?: React.ReactNode;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n // temperature,\n // instructions,\n // maxFeedback,\n labels,\n icons,\n children,\n open,\n setOpen,\n}: ChatContextProps) => {\n const context = {\n labels: {\n ...{\n initial: \"\",\n title: \"CopilotKit\",\n placeholder: \"Type a message...\",\n error: \"❌ An error occurred. Please try again.\",\n stopGenerating: \"Stop generating\",\n regenerateResponse: \"Regenerate response\",\n },\n ...labels,\n },\n\n icons: {\n ...{\n openIcon: DefaultIcons.OpenIcon,\n closeIcon: DefaultIcons.CloseIcon,\n headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n sendIcon: DefaultIcons.SendIcon,\n activityIcon: DefaultIcons.ActivityIcon,\n spinnerIcon: DefaultIcons.SpinnerIcon,\n stopIcon: DefaultIcons.StopIcon,\n regenerateIcon: DefaultIcons.RegenerateIcon,\n pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n },\n icons,\n },\n open,\n setOpen,\n };\n return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,WAAkC;AA6KhC;AA/DF,IAAM,cAAc,MAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,MAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAaO,IAAM,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA,EAIlC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,QAAM,UAAU;AAAA,IACd,QAAQ,kCACH;AAAA,MACD,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,IACtB,IACG;AAAA,IAGL,OAAO,iCACF;AAAA,MACD,UAAuB;AAAA,MACvB,WAAwB;AAAA,MACxB,iBAA8B;AAAA,MAC9B,UAAuB;AAAA,MACvB,cAA2B;AAAA,MAC3B,aAA0B;AAAA,MAC1B,UAAuB;AAAA,MACvB,gBAA6B;AAAA,MAC7B,gBAA6B;AAAA,IAC/B,IAXK;AAAA,MAYL;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAS;AACzD;","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "./chunk-
|
|
2
|
+
CopilotModal
|
|
3
|
+
} from "./chunk-T3JTSIHT.mjs";
|
|
4
4
|
import {
|
|
5
5
|
__spreadProps,
|
|
6
6
|
__spreadValues
|
|
@@ -8,14 +8,14 @@ import {
|
|
|
8
8
|
|
|
9
9
|
// src/components/chat/Popup.tsx
|
|
10
10
|
import { jsx } from "react/jsx-runtime";
|
|
11
|
-
|
|
11
|
+
function CopilotPopup(props) {
|
|
12
12
|
props = __spreadProps(__spreadValues({}, props), {
|
|
13
13
|
className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup"
|
|
14
14
|
});
|
|
15
|
-
return /* @__PURE__ */ jsx(
|
|
16
|
-
}
|
|
15
|
+
return /* @__PURE__ */ jsx(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
|
|
16
|
+
}
|
|
17
17
|
|
|
18
18
|
export {
|
|
19
19
|
CopilotPopup
|
|
20
20
|
};
|
|
21
|
-
//# sourceMappingURL=chunk-
|
|
21
|
+
//# sourceMappingURL=chunk-XRODMID5.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/chat/Popup.tsx"],"sourcesContent":["/**\n * A chatbot popup component for CopilotKit.\n *\n * <img src=\"/images/CopilotPopup/CopilotPopup.gif\" width=\"500\" />\n *\n * <img referrerPolicy=\"no-referrer-when-downgrade\" src=\"https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be\" />\n *\n * A chatbot popup component for the CopilotKit framework. The component allows for a high degree\n * of customization through various props and custom CSS.\n *\n * See [CopilotSidebar](./CopilotSidebar) for a sidebar version of this component.\n *\n * <RequestExample>\n * ```jsx CopilotPopup Example\n * import { CopilotPopup } from \"@copilotkit/react-ui\";\n *\n * <CopilotPopup\n * labels={{\n * title: \"Your Assistant\",\n * initial: \"Hi! 👋 How can I assist you today?\",\n * }}\n * />\n * ```\n * </RequestExample>\n *\n * ## Custom CSS\n *\n * You can customize the colors of the chat window by overriding the CSS variables\n * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).\n *\n * For example, to set the primary color to purple:\n *\n * ```jsx\n * <div style={{ \"--copilot-kit-primary-color\": \"#7D5BA6\" }}>\n * <CopilotPopup />\n * </div>\n * ```\n *\n * To further customize the chat window, you can override the CSS classes defined\n * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).\n *\n * For example:\n *\n * ```css\n * .copilotKitButton {\n * border-radius: 0;\n * }\n * ```\n */\n\nimport { CopilotModal, CopilotModalProps } from \"./Modal\";\n\nexport function CopilotPopup(props: CopilotModalProps) {\n props = {\n ...props,\n className: props.className ? props.className + \" copilotKitPopup\" : \"copilotKitPopup\",\n };\n return <CopilotModal {...props}>{props.children}</CopilotModal>;\n}\n"],"mappings":";;;;;;;;;AAyDS;AALF,SAAS,aAAa,OAA0B;AACrD,UAAQ,iCACH,QADG;AAAA,IAEN,WAAW,MAAM,YAAY,MAAM,YAAY,qBAAqB;AAAA,EACtE;AACA,SAAO,oBAAC,+CAAiB,QAAjB,EAAyB,gBAAM,WAAS;AAClD;","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
CodeBlock
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-UPTB2MVO.mjs";
|
|
4
4
|
import {
|
|
5
5
|
__objRest,
|
|
6
6
|
__spreadProps,
|
|
@@ -72,4 +72,4 @@ var components = {
|
|
|
72
72
|
export {
|
|
73
73
|
Markdown
|
|
74
74
|
};
|
|
75
|
-
//# sourceMappingURL=chunk-
|
|
75
|
+
//# sourceMappingURL=chunk-YQ3D5IQV.mjs.map
|
|
@@ -36,7 +36,7 @@ var AutoResizingTextarea = forwardRef(
|
|
|
36
36
|
onKeyDown,
|
|
37
37
|
placeholder,
|
|
38
38
|
style: {
|
|
39
|
-
overflow: "
|
|
39
|
+
overflow: "auto",
|
|
40
40
|
resize: "none",
|
|
41
41
|
maxHeight: `${maxHeight}px`
|
|
42
42
|
},
|
|
@@ -50,4 +50,4 @@ var Textarea_default = AutoResizingTextarea;
|
|
|
50
50
|
export {
|
|
51
51
|
Textarea_default
|
|
52
52
|
};
|
|
53
|
-
//# sourceMappingURL=chunk-
|
|
53
|
+
//# sourceMappingURL=chunk-YQFVRDNC.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/chat/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from \"react\";\n\ninterface AutoResizingTextareaProps {\n maxRows?: number;\n placeholder?: string;\n value: string;\n onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n autoFocus?: boolean;\n}\n\nconst AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(\n ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {\n const internalTextareaRef = useRef<HTMLTextAreaElement>(null);\n const [maxHeight, setMaxHeight] = useState<number>(0);\n\n useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);\n\n useEffect(() => {\n const calculateMaxHeight = () => {\n const textarea = internalTextareaRef.current;\n if (textarea) {\n textarea.style.height = \"auto\";\n const singleRowHeight = textarea.scrollHeight;\n setMaxHeight(singleRowHeight * maxRows);\n if (autoFocus) {\n textarea.focus();\n }\n }\n };\n\n calculateMaxHeight();\n }, [maxRows]);\n\n useEffect(() => {\n const textarea = internalTextareaRef.current;\n if (textarea) {\n textarea.style.height = \"auto\";\n textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;\n }\n }, [value, maxHeight]);\n\n return (\n <textarea\n ref={internalTextareaRef}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n style={{\n overflow: \"
|
|
1
|
+
{"version":3,"sources":["../src/components/chat/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from \"react\";\n\ninterface AutoResizingTextareaProps {\n maxRows?: number;\n placeholder?: string;\n value: string;\n onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n autoFocus?: boolean;\n}\n\nconst AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(\n ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {\n const internalTextareaRef = useRef<HTMLTextAreaElement>(null);\n const [maxHeight, setMaxHeight] = useState<number>(0);\n\n useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);\n\n useEffect(() => {\n const calculateMaxHeight = () => {\n const textarea = internalTextareaRef.current;\n if (textarea) {\n textarea.style.height = \"auto\";\n const singleRowHeight = textarea.scrollHeight;\n setMaxHeight(singleRowHeight * maxRows);\n if (autoFocus) {\n textarea.focus();\n }\n }\n };\n\n calculateMaxHeight();\n }, [maxRows]);\n\n useEffect(() => {\n const textarea = internalTextareaRef.current;\n if (textarea) {\n textarea.style.height = \"auto\";\n textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;\n }\n }, [value, maxHeight]);\n\n return (\n <textarea\n ref={internalTextareaRef}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n style={{\n overflow: \"auto\",\n resize: \"none\",\n maxHeight: `${maxHeight}px`,\n }}\n rows={1}\n />\n );\n },\n);\n\nexport default AutoResizingTextarea;\n"],"mappings":";AAAA,SAAgB,UAAU,QAAQ,WAAW,YAAY,2BAA2B;AA2C9E;AAhCN,IAAM,uBAAuB;AAAA,EAC3B,CAAC,EAAE,UAAU,GAAG,aAAa,OAAO,UAAU,WAAW,UAAU,GAAG,QAAQ;AAC5E,UAAM,sBAAsB,OAA4B,IAAI;AAC5D,UAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,CAAC;AAEpD,wBAAoB,KAAK,MAAM,oBAAoB,OAA8B;AAEjF,cAAU,MAAM;AACd,YAAM,qBAAqB,MAAM;AAC/B,cAAM,WAAW,oBAAoB;AACrC,YAAI,UAAU;AACZ,mBAAS,MAAM,SAAS;AACxB,gBAAM,kBAAkB,SAAS;AACjC,uBAAa,kBAAkB,OAAO;AACtC,cAAI,WAAW;AACb,qBAAS,MAAM;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAEA,yBAAmB;AAAA,IACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,cAAU,MAAM;AACd,YAAM,WAAW,oBAAoB;AACrC,UAAI,UAAU;AACZ,iBAAS,MAAM,SAAS;AACxB,iBAAS,MAAM,SAAS,GAAG,KAAK,IAAI,SAAS,cAAc,SAAS;AAAA,MACtE;AAAA,IACF,GAAG,CAAC,OAAO,SAAS,CAAC;AAErB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAW,GAAG;AAAA,QAChB;AAAA,QACA,MAAM;AAAA;AAAA,IACR;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":[]}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Suggestion,
|
|
3
|
+
reloadSuggestions
|
|
4
|
+
} from "./chunk-4MKP23AD.mjs";
|
|
5
|
+
import {
|
|
6
|
+
Input
|
|
7
|
+
} from "./chunk-BL65ZC6L.mjs";
|
|
8
|
+
import {
|
|
9
|
+
Messages
|
|
10
|
+
} from "./chunk-7FES2IQA.mjs";
|
|
11
|
+
import {
|
|
12
|
+
ResponseButton
|
|
13
|
+
} from "./chunk-CE7PJAAO.mjs";
|
|
14
|
+
import {
|
|
15
|
+
ChatContext,
|
|
16
|
+
ChatContextProvider
|
|
17
|
+
} from "./chunk-VUZA5AFH.mjs";
|
|
18
|
+
import {
|
|
19
|
+
__async
|
|
20
|
+
} from "./chunk-MRXNTQOX.mjs";
|
|
21
|
+
|
|
22
|
+
// src/components/chat/Chat.tsx
|
|
23
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
24
|
+
import { useCopilotChat, useCopilotContext } from "@copilotkit/react-core";
|
|
25
|
+
import { nanoid } from "nanoid";
|
|
26
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
27
|
+
function CopilotChat({
|
|
28
|
+
instructions,
|
|
29
|
+
onSubmitMessage,
|
|
30
|
+
icons,
|
|
31
|
+
labels,
|
|
32
|
+
makeSystemMessage,
|
|
33
|
+
showResponseButton = true,
|
|
34
|
+
onInProgress,
|
|
35
|
+
Messages: Messages2 = Messages,
|
|
36
|
+
Input: Input2 = Input,
|
|
37
|
+
ResponseButton: ResponseButton2 = ResponseButton,
|
|
38
|
+
className
|
|
39
|
+
}) {
|
|
40
|
+
const { visibleMessages, isLoading, currentSuggestions, sendMessage, stop, reload } = useCopilotChatLogic(instructions, makeSystemMessage, onInProgress, onSubmitMessage);
|
|
41
|
+
const context = React.useContext(ChatContext);
|
|
42
|
+
let open = true;
|
|
43
|
+
let setOpen = () => {
|
|
44
|
+
};
|
|
45
|
+
if (context) {
|
|
46
|
+
icons = context.icons;
|
|
47
|
+
labels = context.labels;
|
|
48
|
+
open = context.open;
|
|
49
|
+
setOpen = context.setOpen;
|
|
50
|
+
}
|
|
51
|
+
return /* @__PURE__ */ jsx(ChatContextProvider, { icons, labels, open, setOpen, children: /* @__PURE__ */ jsxs("div", { className: `copilotKitPanel ${className}`, children: [
|
|
52
|
+
/* @__PURE__ */ jsxs(Messages2, { messages: visibleMessages, inProgress: isLoading, children: [
|
|
53
|
+
currentSuggestions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
|
|
54
|
+
/* @__PURE__ */ jsx("h6", { children: "Suggested:" }),
|
|
55
|
+
/* @__PURE__ */ jsx("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
|
|
56
|
+
Suggestion,
|
|
57
|
+
{
|
|
58
|
+
title: suggestion.title,
|
|
59
|
+
message: suggestion.message,
|
|
60
|
+
partial: suggestion.partial,
|
|
61
|
+
className: suggestion.className,
|
|
62
|
+
onClick: (message) => sendMessage(message)
|
|
63
|
+
},
|
|
64
|
+
index
|
|
65
|
+
)) })
|
|
66
|
+
] }),
|
|
67
|
+
showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ jsx(ResponseButton2, { onClick: isLoading ? stop : reload, inProgress: isLoading })
|
|
68
|
+
] }),
|
|
69
|
+
/* @__PURE__ */ jsx(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible: true })
|
|
70
|
+
] }) });
|
|
71
|
+
}
|
|
72
|
+
var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
|
|
73
|
+
var useCopilotChatLogic = (instructions, makeSystemMessage, onInProgress, onSubmitMessage) => {
|
|
74
|
+
const { visibleMessages, append, reload, stop, isLoading, input, setInput } = useCopilotChat({
|
|
75
|
+
id: nanoid(),
|
|
76
|
+
makeSystemMessage,
|
|
77
|
+
additionalInstructions: instructions
|
|
78
|
+
});
|
|
79
|
+
const [currentSuggestions, setCurrentSuggestions] = useState([]);
|
|
80
|
+
const suggestionsAbortControllerRef = useRef(null);
|
|
81
|
+
const debounceTimerRef = useRef();
|
|
82
|
+
const abortSuggestions = () => {
|
|
83
|
+
var _a;
|
|
84
|
+
(_a = suggestionsAbortControllerRef.current) == null ? void 0 : _a.abort();
|
|
85
|
+
suggestionsAbortControllerRef.current = null;
|
|
86
|
+
};
|
|
87
|
+
const context = useCopilotContext();
|
|
88
|
+
useEffect(() => {
|
|
89
|
+
onInProgress == null ? void 0 : onInProgress(isLoading);
|
|
90
|
+
abortSuggestions();
|
|
91
|
+
debounceTimerRef.current = setTimeout(
|
|
92
|
+
() => {
|
|
93
|
+
if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {
|
|
94
|
+
suggestionsAbortControllerRef.current = new AbortController();
|
|
95
|
+
reloadSuggestions(
|
|
96
|
+
context,
|
|
97
|
+
context.chatSuggestionConfiguration,
|
|
98
|
+
setCurrentSuggestions,
|
|
99
|
+
suggestionsAbortControllerRef
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT
|
|
104
|
+
);
|
|
105
|
+
return () => {
|
|
106
|
+
clearTimeout(debounceTimerRef.current);
|
|
107
|
+
};
|
|
108
|
+
}, [isLoading, context.chatSuggestionConfiguration]);
|
|
109
|
+
const sendMessage = (messageContent) => __async(void 0, null, function* () {
|
|
110
|
+
abortSuggestions();
|
|
111
|
+
setCurrentSuggestions([]);
|
|
112
|
+
onSubmitMessage == null ? void 0 : onSubmitMessage(messageContent);
|
|
113
|
+
const message = {
|
|
114
|
+
id: nanoid(),
|
|
115
|
+
content: messageContent,
|
|
116
|
+
role: "user"
|
|
117
|
+
};
|
|
118
|
+
append(message);
|
|
119
|
+
return message;
|
|
120
|
+
});
|
|
121
|
+
return {
|
|
122
|
+
visibleMessages,
|
|
123
|
+
isLoading,
|
|
124
|
+
currentSuggestions,
|
|
125
|
+
sendMessage,
|
|
126
|
+
stop,
|
|
127
|
+
reload,
|
|
128
|
+
input,
|
|
129
|
+
setInput
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
export {
|
|
134
|
+
CopilotChat,
|
|
135
|
+
useCopilotChatLogic
|
|
136
|
+
};
|
|
137
|
+
//# sourceMappingURL=chunk-ZO3GLN23.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/chat/Chat.tsx"],"sourcesContent":["/**\n * An embeddable chat panel for CopilotKit.\n *\n * <img src=\"/images/CopilotChat/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 * <RequestExample>\n * ```jsx CopilotChat Example\n * import { CopilotChat } from \"@copilotkit/react-ui\";\n *\n * <CopilotChat\n * labels={{\n * title: \"Your Assistant\",\n * initial: \"Hi! 👋 How can I assist you today?\",\n * }}\n * />\n * ```\n * </RequestExample>\n *\n * ## Custom CSS\n *\n * You can customize the colors of the panel by overriding the CSS variables\n * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).\n *\n * For example, to set the primary color to purple:\n *\n * ```jsx\n * <div style={{ \"--copilot-kit-primary-color\": \"#7D5BA6\" }}>\n * <CopilotPopup />\n * </div>\n * ```\n *\n * To further customize the panel, you can override the CSS classes defined\n * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).\n *\n * For example:\n *\n * ```css\n * .copilotKitButton {\n * border-radius: 0;\n * }\n * ```\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 { Suggestion } from \"./Suggestion\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { SystemMessageFunction, useCopilotChat, useCopilotContext } from \"@copilotkit/react-core\";\nimport { nanoid } from \"nanoid\";\nimport { reloadSuggestions } from \"./Suggestion\";\nimport { CopilotChatSuggestion } from \"../../types/suggestions\";\nimport { Message } from \"@copilotkit/shared\";\nimport { InputProps, MessagesProps, ResponseButtonProps } from \"./props\";\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;\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 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 icons,\n labels,\n makeSystemMessage,\n showResponseButton = true,\n onInProgress,\n Messages = DefaultMessages,\n Input = DefaultInput,\n ResponseButton = DefaultResponseButton,\n className,\n}: CopilotChatProps) {\n const { visibleMessages, isLoading, currentSuggestions, sendMessage, stop, reload } =\n useCopilotChatLogic(instructions, makeSystemMessage, onInProgress, onSubmitMessage);\n\n const context = React.useContext(ChatContext);\n let open = true;\n let setOpen: (open: boolean) => void = () => {};\n if (context) {\n icons = context.icons;\n labels = context.labels;\n open = context.open;\n setOpen = context.setOpen;\n }\n\n return (\n <ChatContextProvider icons={icons} labels={labels} open={open} setOpen={setOpen}>\n <div className={`copilotKitPanel ${className}`}>\n <Messages messages={visibleMessages} inProgress={isLoading}>\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 onClick={isLoading ? stop : reload} inProgress={isLoading} />\n )}\n </Messages>\n <Input inProgress={isLoading} onSend={sendMessage} isVisible={true} />\n </div>\n </ChatContextProvider>\n );\n}\n\nconst SUGGESTIONS_DEBOUNCE_TIMEOUT = 1000;\n\nexport const useCopilotChatLogic = (\n instructions?: string,\n makeSystemMessage?: SystemMessageFunction,\n onInProgress?: (isLoading: boolean) => void,\n onSubmitMessage?: (messageContent: string) => void,\n) => {\n const { visibleMessages, append, reload, stop, isLoading, input, setInput } = useCopilotChat({\n id: nanoid(),\n makeSystemMessage,\n additionalInstructions: instructions,\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 context = useCopilotContext();\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 onSubmitMessage?.(messageContent);\n const message: Message = {\n id: nanoid(),\n content: messageContent,\n role: \"user\",\n };\n append(message);\n return message;\n };\n\n return {\n visibleMessages,\n isLoading,\n currentSuggestions,\n sendMessage,\n stop,\n reload,\n input,\n setInput,\n };\n};\n"],"mappings":"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","names":["Messages","Input","ResponseButton"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/chat/Button.tsx","../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { ButtonProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\n\nexport const Button = ({ open, setOpen }: ButtonProps) => {\n const context = useChatContext();\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/chat/Button.tsx","../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { ButtonProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\n\nexport const Button = ({ open, setOpen }: ButtonProps) => {\n const context = useChatContext();\n\n return (\n <div onClick={() => setOpen(!open)}>\n <button\n className={`copilotKitButton ${open ? \"open\" : \"\"}`}\n aria-label={open ? \"Close Chat\" : \"Open Chat\"}\n >\n <div className=\"copilotKitButtonIcon copilotKitButtonIconOpen\">\n {context.icons.openIcon}\n </div>\n <div className=\"copilotKitButtonIcon copilotKitButtonIconClose\">\n {context.icons.closeIcon}\n </div>\n </button>\n </div>\n );\n};\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n /**\n * The icon to use for the open chat button.\n * @default <OpenIcon />\n */\n openIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button.\n * @default <CloseIcon />\n */\n closeIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button in the header.\n * @default <HeaderCloseIcon />\n */\n headerCloseIcon?: React.ReactNode;\n\n /**\n * The icon to use for the send button.\n * @default <SendIcon />\n */\n sendIcon?: React.ReactNode;\n\n /**\n * The icon to use for the activity indicator.\n * @default <ActivityIcon />\n */\n activityIcon?: React.ReactNode;\n\n /**\n * The icon to use for the spinner.\n * @default <SpinnerIcon />\n */\n spinnerIcon?: React.ReactNode;\n\n /**\n * The icon to use for the stop button.\n * @default <StopIcon />\n */\n stopIcon?: React.ReactNode;\n\n /**\n * The icon to use for the regenerate button.\n * @default <RegenerateIcon />\n */\n regenerateIcon?: React.ReactNode;\n\n /**\n * The icons to use for push to talk.\n * @default <PushToTalkIcon />\n */\n\n pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n /**\n * The initial message(s) to display in the chat window.\n */\n initial?: string | string[];\n\n /**\n * The title to display in the header.\n * @default \"CopilotKit\"\n */\n title?: string;\n\n /**\n * The placeholder to display in the input.\n * @default \"Type a message...\"\n */\n placeholder?: string;\n\n /**\n * The message to display when an error occurs.\n * @default \"❌ An error occurred. Please try again.\"\n */\n error?: string;\n\n /**\n * The label to display on the stop button.\n * @default \"Stop generating\"\n */\n stopGenerating?: string;\n\n /**\n * The label to display on the regenerate button.\n * @default \"Regenerate response\"\n */\n regenerateResponse?: string;\n}\n\ninterface ChatContext {\n labels: Required<CopilotChatLabels>;\n icons: Required<CopilotChatIcons>;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n const context = React.useContext(ChatContext);\n if (context === undefined) {\n throw new Error(\n \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n );\n }\n return context;\n}\n\ninterface ChatContextProps {\n // temperature?: number;\n // instructions?: string;\n // maxFeedback?: number;\n labels?: CopilotChatLabels;\n icons?: CopilotChatIcons;\n children?: React.ReactNode;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n // temperature,\n // instructions,\n // maxFeedback,\n labels,\n icons,\n children,\n open,\n setOpen,\n}: ChatContextProps) => {\n const context = {\n labels: {\n ...{\n initial: \"\",\n title: \"CopilotKit\",\n placeholder: \"Type a message...\",\n error: \"❌ An error occurred. Please try again.\",\n stopGenerating: \"Stop generating\",\n regenerateResponse: \"Regenerate response\",\n },\n ...labels,\n },\n\n icons: {\n ...{\n openIcon: DefaultIcons.OpenIcon,\n closeIcon: DefaultIcons.CloseIcon,\n headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n sendIcon: DefaultIcons.SendIcon,\n activityIcon: DefaultIcons.ActivityIcon,\n spinnerIcon: DefaultIcons.SpinnerIcon,\n stopIcon: DefaultIcons.StopIcon,\n regenerateIcon: DefaultIcons.RegenerateIcon,\n pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n },\n icons,\n },\n open,\n setOpen,\n };\n return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyC;AA6KhC;AA/DF,IAAM,cAAc,aAAAA,QAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,aAAAA,QAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;;;ADhHM,IAAAC,sBAAA;AALC,IAAM,SAAS,CAAC,EAAE,MAAM,QAAQ,MAAmB;AACxD,QAAM,UAAU,eAAe;AAE/B,SACE,6CAAC,SAAI,SAAS,MAAM,QAAQ,CAAC,IAAI,GAC/B;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oBAAoB,OAAO,SAAS;AAAA,MAC/C,cAAY,OAAO,eAAe;AAAA,MAElC;AAAA,qDAAC,SAAI,WAAU,iDACZ,kBAAQ,MAAM,UACjB;AAAA,QACA,6CAAC,SAAI,WAAU,kDACZ,kBAAQ,MAAM,WACjB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":["React","import_jsx_runtime"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Button
|
|
3
|
-
} from "../../chunk-
|
|
4
|
-
import "../../chunk-
|
|
5
|
-
import "../../chunk-
|
|
3
|
+
} from "../../chunk-RT2XG2T7.mjs";
|
|
4
|
+
import "../../chunk-VUZA5AFH.mjs";
|
|
5
|
+
import "../../chunk-FZC7X5PK.mjs";
|
|
6
6
|
import "../../chunk-MRXNTQOX.mjs";
|
|
7
7
|
export {
|
|
8
8
|
Button
|