@copilotkit/react-ui 1.4.0-pre-1-4-0-alpha.10 → 1.4.0-pre-1-4-0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +190 -26
- package/dist/{chunk-QK6XA3PL.mjs → chunk-H5CXJBR5.mjs} +3 -3
- package/dist/{chunk-TEZWY2BL.mjs → chunk-M2NVAJQA.mjs} +2 -2
- package/dist/{chunk-C5KOJ3IH.mjs → chunk-ORHE7FYT.mjs} +2 -2
- package/dist/{chunk-OJ5NVSTU.mjs → chunk-PY7YBFPA.mjs} +2 -2
- package/dist/{chunk-CPMIEVKK.mjs → chunk-RKPANT3F.mjs} +65 -15
- package/dist/chunk-RKPANT3F.mjs.map +1 -0
- package/dist/components/chat/Chat.js +62 -13
- package/dist/components/chat/Chat.js.map +1 -1
- package/dist/components/chat/Chat.mjs +2 -2
- package/dist/components/chat/Messages.d.ts +6 -1
- package/dist/components/chat/Messages.js +66 -15
- package/dist/components/chat/Messages.js.map +1 -1
- package/dist/components/chat/Messages.mjs +5 -3
- package/dist/components/chat/Modal.js +62 -13
- package/dist/components/chat/Modal.js.map +1 -1
- package/dist/components/chat/Modal.mjs +3 -3
- package/dist/components/chat/Popup.js +62 -13
- package/dist/components/chat/Popup.js.map +1 -1
- package/dist/components/chat/Popup.mjs +4 -4
- package/dist/components/chat/Sidebar.js +62 -13
- package/dist/components/chat/Sidebar.js.map +1 -1
- package/dist/components/chat/Sidebar.mjs +4 -4
- package/dist/components/chat/index.js +62 -13
- package/dist/components/chat/index.js.map +1 -1
- package/dist/components/chat/index.mjs +5 -5
- package/dist/components/index.js +62 -13
- package/dist/components/index.js.map +1 -1
- package/dist/components/index.mjs +5 -5
- package/dist/index.js +62 -13
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -5
- package/package.json +7 -7
- package/src/components/chat/Messages.tsx +72 -15
- package/dist/chunk-CPMIEVKK.mjs.map +0 -1
- /package/dist/{chunk-QK6XA3PL.mjs.map → chunk-H5CXJBR5.mjs.map} +0 -0
- /package/dist/{chunk-TEZWY2BL.mjs.map → chunk-M2NVAJQA.mjs.map} +0 -0
- /package/dist/{chunk-C5KOJ3IH.mjs.map → chunk-ORHE7FYT.mjs.map} +0 -0
- /package/dist/{chunk-OJ5NVSTU.mjs.map → chunk-PY7YBFPA.mjs.map} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,43 +1,207 @@
|
|
|
1
1
|
# ui
|
|
2
2
|
|
|
3
|
-
## 1.4.0-pre-1-4-0
|
|
3
|
+
## 1.4.0-pre-1-4-0.14
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- lgc & lgjs alpha release
|
|
8
8
|
|
|
9
9
|
### Patch Changes
|
|
10
10
|
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
11
|
+
- a5efccd: Revert rxjs changes
|
|
12
|
+
- Updated dependencies [a5efccd]
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
- @copilotkit/react-core@1.4.0-pre-1-4-0.14
|
|
15
|
+
- @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.14
|
|
16
|
+
- @copilotkit/shared@1.4.0-pre-1-4-0.14
|
|
17
|
+
|
|
18
|
+
## 1.4.0-pre-1-4-0.13
|
|
19
|
+
|
|
20
|
+
### Minor Changes
|
|
21
|
+
|
|
22
|
+
- lgc & lgjs alpha
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
- @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.13
|
|
28
|
+
- @copilotkit/react-core@1.4.0-pre-1-4-0.13
|
|
29
|
+
- @copilotkit/shared@1.4.0-pre-1-4-0.13
|
|
30
|
+
|
|
31
|
+
## 1.4.0-pre-1-4-0.12
|
|
32
|
+
|
|
33
|
+
### Minor Changes
|
|
34
|
+
|
|
35
|
+
- c6b489d: LangGraph Platform and LangGraph JS support
|
|
36
|
+
- 7cc6cc8: LangGraph Cloud and LangGraphJS alpha release
|
|
37
|
+
- prerelease lgc and lgjs
|
|
38
|
+
- Add LangGraph Platform and LangGraph JS support
|
|
39
|
+
- b318b18: Add LangGraph Cloud support
|
|
40
|
+
|
|
41
|
+
### Patch Changes
|
|
42
|
+
|
|
43
|
+
- 9ea9db1: update tsup config
|
|
44
|
+
- d52c1f9: update entry
|
|
45
|
+
- e71d469: export langchain module
|
|
14
46
|
- 8a77944: Improve LangSmith support
|
|
15
|
-
-
|
|
16
|
-
-
|
|
47
|
+
- 3caa5d5: Ensure intermediate state config is sent as snake case
|
|
48
|
+
- cf3a787: update entry in tsup config
|
|
17
49
|
- 8a77944: Ensure the last message is sent to LangSmith
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
50
|
+
- 264a693: update entry
|
|
51
|
+
- dd99f00: Update exports
|
|
52
|
+
- a28fb90: Update exports
|
|
21
53
|
- 332d744: Add support for Azure OpenAI
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
- Updated dependencies [
|
|
25
|
-
- Updated dependencies
|
|
26
|
-
- Updated dependencies [
|
|
27
|
-
- Updated dependencies [
|
|
54
|
+
- 1f8032e: Export LangGraph functions
|
|
55
|
+
- c3576f6: Update lockfile
|
|
56
|
+
- Updated dependencies [9ea9db1]
|
|
57
|
+
- Updated dependencies [d52c1f9]
|
|
58
|
+
- Updated dependencies [c6b489d]
|
|
59
|
+
- Updated dependencies [7cc6cc8]
|
|
60
|
+
- Updated dependencies [e71d469]
|
|
28
61
|
- Updated dependencies [8a77944]
|
|
29
|
-
- Updated dependencies [
|
|
30
|
-
- Updated dependencies [
|
|
62
|
+
- Updated dependencies [3caa5d5]
|
|
63
|
+
- Updated dependencies [cf3a787]
|
|
64
|
+
- Updated dependencies
|
|
65
|
+
- Updated dependencies
|
|
31
66
|
- Updated dependencies [8a77944]
|
|
32
|
-
- Updated dependencies [
|
|
33
|
-
- Updated dependencies [
|
|
34
|
-
- Updated dependencies [
|
|
67
|
+
- Updated dependencies [264a693]
|
|
68
|
+
- Updated dependencies [dd99f00]
|
|
69
|
+
- Updated dependencies [a28fb90]
|
|
35
70
|
- Updated dependencies [332d744]
|
|
36
|
-
- Updated dependencies [
|
|
37
|
-
- Updated dependencies [
|
|
38
|
-
|
|
39
|
-
- @copilotkit/
|
|
40
|
-
- @copilotkit/
|
|
71
|
+
- Updated dependencies [b318b18]
|
|
72
|
+
- Updated dependencies [1f8032e]
|
|
73
|
+
- Updated dependencies [c3576f6]
|
|
74
|
+
- @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.12
|
|
75
|
+
- @copilotkit/react-core@1.4.0-pre-1-4-0.12
|
|
76
|
+
- @copilotkit/shared@1.4.0-pre-1-4-0.12
|
|
77
|
+
|
|
78
|
+
## 1.4.0-pre-1-4-0.11
|
|
79
|
+
|
|
80
|
+
### Minor Changes
|
|
81
|
+
|
|
82
|
+
- LangGraph Platform and LangGraph JS support
|
|
83
|
+
|
|
84
|
+
### Patch Changes
|
|
85
|
+
|
|
86
|
+
- Updated dependencies
|
|
87
|
+
- @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.11
|
|
88
|
+
- @copilotkit/react-core@1.4.0-pre-1-4-0.11
|
|
89
|
+
- @copilotkit/shared@1.4.0-pre-1-4-0.11
|
|
90
|
+
|
|
91
|
+
## 1.4.0-pre-1-4-0.10
|
|
92
|
+
|
|
93
|
+
### Minor Changes
|
|
94
|
+
|
|
95
|
+
- LangGraph Cloud and LangGraphJS alpha release
|
|
96
|
+
- b318b18: Add LangGraph Cloud support
|
|
97
|
+
|
|
98
|
+
### Patch Changes
|
|
99
|
+
|
|
100
|
+
- Updated dependencies
|
|
101
|
+
- Updated dependencies [b318b18]
|
|
102
|
+
- @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.10
|
|
103
|
+
- @copilotkit/react-core@1.4.0-pre-1-4-0.10
|
|
104
|
+
- @copilotkit/shared@1.4.0-pre-1-4-0.10
|
|
105
|
+
|
|
106
|
+
## 1.3.16-mme-lgc-langgraph-package.9
|
|
107
|
+
|
|
108
|
+
### Patch Changes
|
|
109
|
+
|
|
110
|
+
- update entry
|
|
111
|
+
- Updated dependencies
|
|
112
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.9
|
|
113
|
+
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.9
|
|
114
|
+
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.9
|
|
115
|
+
|
|
116
|
+
## 1.3.16-mme-lgc-langgraph-package.8
|
|
117
|
+
|
|
118
|
+
### Patch Changes
|
|
119
|
+
|
|
120
|
+
- update entry
|
|
121
|
+
- Updated dependencies
|
|
122
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.8
|
|
123
|
+
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.8
|
|
124
|
+
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.8
|
|
125
|
+
|
|
126
|
+
## 1.3.16-mme-lgc-langgraph-package.7
|
|
127
|
+
|
|
128
|
+
### Patch Changes
|
|
129
|
+
|
|
130
|
+
- update entry in tsup config
|
|
131
|
+
- Updated dependencies
|
|
132
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.7
|
|
133
|
+
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.7
|
|
134
|
+
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.7
|
|
135
|
+
|
|
136
|
+
## 1.3.16-mme-lgc-langgraph-package.6
|
|
137
|
+
|
|
138
|
+
### Patch Changes
|
|
139
|
+
|
|
140
|
+
- Update exports
|
|
141
|
+
- Updated dependencies
|
|
142
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.6
|
|
143
|
+
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.6
|
|
144
|
+
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.6
|
|
145
|
+
|
|
146
|
+
## 1.3.16-mme-lgc-langgraph-package.5
|
|
147
|
+
|
|
148
|
+
### Patch Changes
|
|
149
|
+
|
|
150
|
+
- update tsup config
|
|
151
|
+
- Updated dependencies
|
|
152
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.5
|
|
153
|
+
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.5
|
|
154
|
+
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.5
|
|
155
|
+
|
|
156
|
+
## 1.3.16-mme-lgc-langgraph-package.4
|
|
157
|
+
|
|
158
|
+
### Patch Changes
|
|
159
|
+
|
|
160
|
+
- Update exports
|
|
161
|
+
- Updated dependencies
|
|
162
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.4
|
|
163
|
+
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.4
|
|
164
|
+
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.4
|
|
165
|
+
|
|
166
|
+
## 1.3.16-mme-lgc-langgraph-package.3
|
|
167
|
+
|
|
168
|
+
### Patch Changes
|
|
169
|
+
|
|
170
|
+
- export langchain module
|
|
171
|
+
- Updated dependencies
|
|
172
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.3
|
|
173
|
+
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.3
|
|
174
|
+
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.3
|
|
175
|
+
|
|
176
|
+
## 1.3.16-mme-sdk-js.2
|
|
177
|
+
|
|
178
|
+
### Patch Changes
|
|
179
|
+
|
|
180
|
+
- Ensure intermediate state config is sent as snake case
|
|
181
|
+
- Updated dependencies
|
|
182
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-sdk-js.2
|
|
183
|
+
- @copilotkit/react-core@1.3.16-mme-sdk-js.2
|
|
184
|
+
- @copilotkit/shared@1.3.16-mme-sdk-js.2
|
|
185
|
+
|
|
186
|
+
## 1.3.16-mme-sdk-js.1
|
|
187
|
+
|
|
188
|
+
### Patch Changes
|
|
189
|
+
|
|
190
|
+
- Update lockfile
|
|
191
|
+
- Updated dependencies
|
|
192
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-sdk-js.1
|
|
193
|
+
- @copilotkit/react-core@1.3.16-mme-sdk-js.1
|
|
194
|
+
- @copilotkit/shared@1.3.16-mme-sdk-js.1
|
|
195
|
+
|
|
196
|
+
## 1.3.16-mme-sdk-js.0
|
|
197
|
+
|
|
198
|
+
### Patch Changes
|
|
199
|
+
|
|
200
|
+
- Export LangGraph functions
|
|
201
|
+
- Updated dependencies
|
|
202
|
+
- @copilotkit/react-core@1.3.16-mme-sdk-js.0
|
|
203
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-sdk-js.0
|
|
204
|
+
- @copilotkit/shared@1.3.16-mme-sdk-js.0
|
|
41
205
|
|
|
42
206
|
## 1.3.15
|
|
43
207
|
|
|
@@ -9,13 +9,13 @@ import {
|
|
|
9
9
|
} from "./chunk-RQNJNK2W.mjs";
|
|
10
10
|
import {
|
|
11
11
|
CopilotChat
|
|
12
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-ORHE7FYT.mjs";
|
|
13
13
|
import {
|
|
14
14
|
Input
|
|
15
15
|
} from "./chunk-4LUMV4YO.mjs";
|
|
16
16
|
import {
|
|
17
17
|
Messages
|
|
18
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-RKPANT3F.mjs";
|
|
19
19
|
import {
|
|
20
20
|
ResponseButton
|
|
21
21
|
} from "./chunk-3XAXY2Z3.mjs";
|
|
@@ -88,4 +88,4 @@ var CopilotModal = ({
|
|
|
88
88
|
export {
|
|
89
89
|
CopilotModal
|
|
90
90
|
};
|
|
91
|
-
//# sourceMappingURL=chunk-
|
|
91
|
+
//# sourceMappingURL=chunk-H5CXJBR5.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
CopilotModal
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-H5CXJBR5.mjs";
|
|
4
4
|
import {
|
|
5
5
|
__spreadProps,
|
|
6
6
|
__spreadValues
|
|
@@ -27,4 +27,4 @@ function CopilotSidebar(props) {
|
|
|
27
27
|
export {
|
|
28
28
|
CopilotSidebar
|
|
29
29
|
};
|
|
30
|
-
//# sourceMappingURL=chunk-
|
|
30
|
+
//# sourceMappingURL=chunk-M2NVAJQA.mjs.map
|
|
@@ -22,7 +22,7 @@ import {
|
|
|
22
22
|
} from "./chunk-4LUMV4YO.mjs";
|
|
23
23
|
import {
|
|
24
24
|
Messages
|
|
25
|
-
} from "./chunk-
|
|
25
|
+
} from "./chunk-RKPANT3F.mjs";
|
|
26
26
|
import {
|
|
27
27
|
ResponseButton
|
|
28
28
|
} from "./chunk-3XAXY2Z3.mjs";
|
|
@@ -198,4 +198,4 @@ export {
|
|
|
198
198
|
WrappedCopilotChat,
|
|
199
199
|
useCopilotChatLogic
|
|
200
200
|
};
|
|
201
|
-
//# sourceMappingURL=chunk-
|
|
201
|
+
//# sourceMappingURL=chunk-ORHE7FYT.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
CopilotModal
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-H5CXJBR5.mjs";
|
|
4
4
|
import {
|
|
5
5
|
__spreadProps,
|
|
6
6
|
__spreadValues
|
|
@@ -18,4 +18,4 @@ function CopilotPopup(props) {
|
|
|
18
18
|
export {
|
|
19
19
|
CopilotPopup
|
|
20
20
|
};
|
|
21
|
-
//# sourceMappingURL=chunk-
|
|
21
|
+
//# sourceMappingURL=chunk-PY7YBFPA.mjs.map
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-CBBFRI3Q.mjs";
|
|
4
4
|
|
|
5
5
|
// src/components/chat/Messages.tsx
|
|
6
|
-
import
|
|
6
|
+
import { useEffect, useMemo, useRef } from "react";
|
|
7
7
|
import {
|
|
8
8
|
ResultMessage,
|
|
9
9
|
TextMessage,
|
|
@@ -37,18 +37,8 @@ var Messages = ({
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
|
-
const messagesEndRef =
|
|
41
|
-
|
|
42
|
-
if (messagesEndRef.current) {
|
|
43
|
-
messagesEndRef.current.scrollIntoView({
|
|
44
|
-
behavior: "auto"
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
useEffect(() => {
|
|
49
|
-
scrollToBottom();
|
|
50
|
-
}, [messages]);
|
|
51
|
-
return /* @__PURE__ */ jsxs("div", { className: "copilotKitMessages", children: [
|
|
40
|
+
const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);
|
|
41
|
+
return /* @__PURE__ */ jsxs("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
|
|
52
42
|
messages.map((message, index) => {
|
|
53
43
|
const isCurrentMessage = index === messages.length - 1;
|
|
54
44
|
if (message.isTextMessage()) {
|
|
@@ -117,8 +107,68 @@ function makeInitialMessages(initial) {
|
|
|
117
107
|
})
|
|
118
108
|
);
|
|
119
109
|
}
|
|
110
|
+
function useScrollToBottom(messages) {
|
|
111
|
+
const messagesEndRef = useRef(null);
|
|
112
|
+
const messagesContainerRef = useRef(null);
|
|
113
|
+
const isProgrammaticScrollRef = useRef(false);
|
|
114
|
+
const isUserScrollUpRef = useRef(false);
|
|
115
|
+
const scrollToBottom = () => {
|
|
116
|
+
if (messagesEndRef.current) {
|
|
117
|
+
isProgrammaticScrollRef.current = true;
|
|
118
|
+
messagesEndRef.current.scrollIntoView({
|
|
119
|
+
behavior: "auto"
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
const handleScroll = () => {
|
|
124
|
+
if (isProgrammaticScrollRef.current) {
|
|
125
|
+
isProgrammaticScrollRef.current = false;
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
if (messagesContainerRef.current) {
|
|
129
|
+
const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
|
|
130
|
+
isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
useEffect(() => {
|
|
134
|
+
const container = messagesContainerRef.current;
|
|
135
|
+
if (container) {
|
|
136
|
+
container.addEventListener("scroll", handleScroll);
|
|
137
|
+
}
|
|
138
|
+
return () => {
|
|
139
|
+
if (container) {
|
|
140
|
+
container.removeEventListener("scroll", handleScroll);
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
}, []);
|
|
144
|
+
useEffect(() => {
|
|
145
|
+
const container = messagesContainerRef.current;
|
|
146
|
+
if (!container) {
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
const mutationObserver = new MutationObserver(() => {
|
|
150
|
+
if (!isUserScrollUpRef.current) {
|
|
151
|
+
scrollToBottom();
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
mutationObserver.observe(container, {
|
|
155
|
+
childList: true,
|
|
156
|
+
subtree: true,
|
|
157
|
+
characterData: true
|
|
158
|
+
});
|
|
159
|
+
return () => {
|
|
160
|
+
mutationObserver.disconnect();
|
|
161
|
+
};
|
|
162
|
+
}, []);
|
|
163
|
+
useEffect(() => {
|
|
164
|
+
isUserScrollUpRef.current = false;
|
|
165
|
+
scrollToBottom();
|
|
166
|
+
}, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);
|
|
167
|
+
return { messagesEndRef, messagesContainerRef };
|
|
168
|
+
}
|
|
120
169
|
|
|
121
170
|
export {
|
|
122
|
-
Messages
|
|
171
|
+
Messages,
|
|
172
|
+
useScrollToBottom
|
|
123
173
|
};
|
|
124
|
-
//# sourceMappingURL=chunk-
|
|
174
|
+
//# sourceMappingURL=chunk-RKPANT3F.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/chat/Messages.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport {\n ActionExecutionMessage,\n Message,\n ResultMessage,\n TextMessage,\n Role,\n AgentStateMessage,\n} from \"@copilotkit/runtime-client-gql\";\n\nexport const Messages = ({\n messages,\n inProgress,\n children,\n RenderTextMessage,\n RenderActionExecutionMessage,\n RenderAgentStateMessage,\n RenderResultMessage,\n}: MessagesProps) => {\n const context = useChatContext();\n const initialMessages = useMemo(\n () => makeInitialMessages(context.labels.initial),\n [context.labels.initial],\n );\n messages = [...initialMessages, ...messages];\n\n const actionResults: Record<string, string> = {};\n\n for (let i = 0; i < messages.length; i++) {\n if (messages[i].isActionExecutionMessage()) {\n const id = messages[i].id;\n const resultMessage: ResultMessage | undefined = messages.find(\n (message) => message.isResultMessage() && message.actionExecutionId === id,\n ) as ResultMessage | undefined;\n\n if (resultMessage) {\n actionResults[id] = ResultMessage.decodeResult(resultMessage.result || \"\");\n }\n }\n }\n\n const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);\n\n return (\n <div className=\"copilotKitMessages\" ref={messagesContainerRef}>\n {messages.map((message, index) => {\n const isCurrentMessage = index === messages.length - 1;\n\n if (message.isTextMessage()) {\n return (\n <RenderTextMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n />\n );\n } else if (message.isActionExecutionMessage()) {\n return (\n <RenderActionExecutionMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n actionResult={actionResults[message.id]}\n />\n );\n } else if (message.isAgentStateMessage()) {\n return (\n <RenderAgentStateMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n />\n );\n } else if (message.isResultMessage()) {\n return (\n <RenderResultMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n />\n );\n }\n })}\n <footer ref={messagesEndRef}>{children}</footer>\n </div>\n );\n};\n\nfunction makeInitialMessages(initial?: string | string[]): Message[] {\n let initialArray: string[] = [];\n if (initial) {\n if (Array.isArray(initial)) {\n initialArray.push(...initial);\n } else {\n initialArray.push(initial);\n }\n }\n\n return initialArray.map(\n (message) =>\n new TextMessage({\n role: Role.Assistant,\n content: message,\n }),\n );\n}\nexport function useScrollToBottom(messages: any[]) {\n const messagesEndRef = useRef<HTMLDivElement>(null);\n const messagesContainerRef = useRef<HTMLDivElement | null>(null);\n const isProgrammaticScrollRef = useRef(false);\n const isUserScrollUpRef = useRef(false);\n\n const scrollToBottom = () => {\n if (messagesEndRef.current) {\n isProgrammaticScrollRef.current = true;\n messagesEndRef.current.scrollIntoView({\n behavior: \"auto\",\n });\n }\n };\n\n const handleScroll = () => {\n if (isProgrammaticScrollRef.current) {\n isProgrammaticScrollRef.current = false;\n return;\n }\n\n if (messagesContainerRef.current) {\n const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;\n isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;\n }\n };\n\n useEffect(() => {\n const container = messagesContainerRef.current;\n if (container) {\n container.addEventListener(\"scroll\", handleScroll);\n }\n return () => {\n if (container) {\n container.removeEventListener(\"scroll\", handleScroll);\n }\n };\n }, []);\n\n useEffect(() => {\n const container = messagesContainerRef.current;\n if (!container) {\n return;\n }\n\n const mutationObserver = new MutationObserver(() => {\n if (!isUserScrollUpRef.current) {\n scrollToBottom();\n }\n });\n\n mutationObserver.observe(container, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n\n return () => {\n mutationObserver.disconnect();\n };\n }, []);\n\n useEffect(() => {\n isUserScrollUpRef.current = false;\n scrollToBottom();\n }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);\n\n return { messagesEndRef, messagesContainerRef };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -388,7 +388,7 @@ var ChatContextProvider = ({
|
|
|
388
388
|
};
|
|
389
389
|
|
|
390
390
|
// src/components/chat/Messages.tsx
|
|
391
|
-
var import_react2 =
|
|
391
|
+
var import_react2 = require("react");
|
|
392
392
|
var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
|
|
393
393
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
394
394
|
var Messages = ({
|
|
@@ -418,18 +418,8 @@ var Messages = ({
|
|
|
418
418
|
}
|
|
419
419
|
}
|
|
420
420
|
}
|
|
421
|
-
const messagesEndRef =
|
|
422
|
-
|
|
423
|
-
if (messagesEndRef.current) {
|
|
424
|
-
messagesEndRef.current.scrollIntoView({
|
|
425
|
-
behavior: "auto"
|
|
426
|
-
});
|
|
427
|
-
}
|
|
428
|
-
};
|
|
429
|
-
(0, import_react2.useEffect)(() => {
|
|
430
|
-
scrollToBottom();
|
|
431
|
-
}, [messages]);
|
|
432
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitMessages", children: [
|
|
421
|
+
const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);
|
|
422
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
|
|
433
423
|
messages.map((message, index) => {
|
|
434
424
|
const isCurrentMessage = index === messages.length - 1;
|
|
435
425
|
if (message.isTextMessage()) {
|
|
@@ -498,6 +488,65 @@ function makeInitialMessages(initial) {
|
|
|
498
488
|
})
|
|
499
489
|
);
|
|
500
490
|
}
|
|
491
|
+
function useScrollToBottom(messages) {
|
|
492
|
+
const messagesEndRef = (0, import_react2.useRef)(null);
|
|
493
|
+
const messagesContainerRef = (0, import_react2.useRef)(null);
|
|
494
|
+
const isProgrammaticScrollRef = (0, import_react2.useRef)(false);
|
|
495
|
+
const isUserScrollUpRef = (0, import_react2.useRef)(false);
|
|
496
|
+
const scrollToBottom = () => {
|
|
497
|
+
if (messagesEndRef.current) {
|
|
498
|
+
isProgrammaticScrollRef.current = true;
|
|
499
|
+
messagesEndRef.current.scrollIntoView({
|
|
500
|
+
behavior: "auto"
|
|
501
|
+
});
|
|
502
|
+
}
|
|
503
|
+
};
|
|
504
|
+
const handleScroll = () => {
|
|
505
|
+
if (isProgrammaticScrollRef.current) {
|
|
506
|
+
isProgrammaticScrollRef.current = false;
|
|
507
|
+
return;
|
|
508
|
+
}
|
|
509
|
+
if (messagesContainerRef.current) {
|
|
510
|
+
const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
|
|
511
|
+
isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
|
|
512
|
+
}
|
|
513
|
+
};
|
|
514
|
+
(0, import_react2.useEffect)(() => {
|
|
515
|
+
const container = messagesContainerRef.current;
|
|
516
|
+
if (container) {
|
|
517
|
+
container.addEventListener("scroll", handleScroll);
|
|
518
|
+
}
|
|
519
|
+
return () => {
|
|
520
|
+
if (container) {
|
|
521
|
+
container.removeEventListener("scroll", handleScroll);
|
|
522
|
+
}
|
|
523
|
+
};
|
|
524
|
+
}, []);
|
|
525
|
+
(0, import_react2.useEffect)(() => {
|
|
526
|
+
const container = messagesContainerRef.current;
|
|
527
|
+
if (!container) {
|
|
528
|
+
return;
|
|
529
|
+
}
|
|
530
|
+
const mutationObserver = new MutationObserver(() => {
|
|
531
|
+
if (!isUserScrollUpRef.current) {
|
|
532
|
+
scrollToBottom();
|
|
533
|
+
}
|
|
534
|
+
});
|
|
535
|
+
mutationObserver.observe(container, {
|
|
536
|
+
childList: true,
|
|
537
|
+
subtree: true,
|
|
538
|
+
characterData: true
|
|
539
|
+
});
|
|
540
|
+
return () => {
|
|
541
|
+
mutationObserver.disconnect();
|
|
542
|
+
};
|
|
543
|
+
}, []);
|
|
544
|
+
(0, import_react2.useEffect)(() => {
|
|
545
|
+
isUserScrollUpRef.current = false;
|
|
546
|
+
scrollToBottom();
|
|
547
|
+
}, [messages.filter((m) => m.isTextMessage() && m.role === import_runtime_client_gql.Role.User).length]);
|
|
548
|
+
return { messagesEndRef, messagesContainerRef };
|
|
549
|
+
}
|
|
501
550
|
|
|
502
551
|
// src/components/chat/Input.tsx
|
|
503
552
|
var import_react5 = require("react");
|