@copilotkit/react-ui 1.3.16-mme-lgc-langgraph-package.11 → 1.3.16-mme-revert-rxjs-changes.10
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 +35 -119
- 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,124 +1,40 @@
|
|
|
1
1
|
# ui
|
|
2
2
|
|
|
3
|
-
## 1.3.16-mme-
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
- Updated dependencies
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
-
|
|
38
|
-
- Updated dependencies
|
|
39
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.8
|
|
40
|
-
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.8
|
|
41
|
-
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.8
|
|
42
|
-
|
|
43
|
-
## 1.3.16-mme-lgc-langgraph-package.7
|
|
44
|
-
|
|
45
|
-
### Patch Changes
|
|
46
|
-
|
|
47
|
-
- update entry in tsup config
|
|
48
|
-
- Updated dependencies
|
|
49
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.7
|
|
50
|
-
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.7
|
|
51
|
-
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.7
|
|
52
|
-
|
|
53
|
-
## 1.3.16-mme-lgc-langgraph-package.6
|
|
54
|
-
|
|
55
|
-
### Patch Changes
|
|
56
|
-
|
|
57
|
-
- Update exports
|
|
58
|
-
- Updated dependencies
|
|
59
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.6
|
|
60
|
-
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.6
|
|
61
|
-
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.6
|
|
62
|
-
|
|
63
|
-
## 1.3.16-mme-lgc-langgraph-package.5
|
|
64
|
-
|
|
65
|
-
### Patch Changes
|
|
66
|
-
|
|
67
|
-
- update tsup config
|
|
68
|
-
- Updated dependencies
|
|
69
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.5
|
|
70
|
-
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.5
|
|
71
|
-
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.5
|
|
72
|
-
|
|
73
|
-
## 1.3.16-mme-lgc-langgraph-package.4
|
|
74
|
-
|
|
75
|
-
### Patch Changes
|
|
76
|
-
|
|
77
|
-
- Update exports
|
|
78
|
-
- Updated dependencies
|
|
79
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.4
|
|
80
|
-
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.4
|
|
81
|
-
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.4
|
|
82
|
-
|
|
83
|
-
## 1.3.16-mme-lgc-langgraph-package.3
|
|
84
|
-
|
|
85
|
-
### Patch Changes
|
|
86
|
-
|
|
87
|
-
- export langchain module
|
|
88
|
-
- Updated dependencies
|
|
89
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.3
|
|
90
|
-
- @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.3
|
|
91
|
-
- @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.3
|
|
92
|
-
|
|
93
|
-
## 1.3.16-mme-sdk-js.2
|
|
94
|
-
|
|
95
|
-
### Patch Changes
|
|
96
|
-
|
|
97
|
-
- Ensure intermediate state config is sent as snake case
|
|
98
|
-
- Updated dependencies
|
|
99
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-sdk-js.2
|
|
100
|
-
- @copilotkit/react-core@1.3.16-mme-sdk-js.2
|
|
101
|
-
- @copilotkit/shared@1.3.16-mme-sdk-js.2
|
|
102
|
-
|
|
103
|
-
## 1.3.16-mme-sdk-js.1
|
|
104
|
-
|
|
105
|
-
### Patch Changes
|
|
106
|
-
|
|
107
|
-
- Update lockfile
|
|
108
|
-
- Updated dependencies
|
|
109
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-sdk-js.1
|
|
110
|
-
- @copilotkit/react-core@1.3.16-mme-sdk-js.1
|
|
111
|
-
- @copilotkit/shared@1.3.16-mme-sdk-js.1
|
|
112
|
-
|
|
113
|
-
## 1.3.16-mme-sdk-js.0
|
|
114
|
-
|
|
115
|
-
### Patch Changes
|
|
116
|
-
|
|
117
|
-
- Export LangGraph functions
|
|
118
|
-
- Updated dependencies
|
|
119
|
-
- @copilotkit/react-core@1.3.16-mme-sdk-js.0
|
|
120
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-sdk-js.0
|
|
121
|
-
- @copilotkit/shared@1.3.16-mme-sdk-js.0
|
|
3
|
+
## 1.3.16-mme-revert-rxjs-changes.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- f6fab28: update tsup config
|
|
8
|
+
- f6fab28: update entry
|
|
9
|
+
- f6fab28: export langchain module
|
|
10
|
+
- 8a77944: Improve LangSmith support
|
|
11
|
+
- f6fab28: Ensure intermediate state config is sent as snake case
|
|
12
|
+
- f6fab28: update entry in tsup config
|
|
13
|
+
- 8a77944: Ensure the last message is sent to LangSmith
|
|
14
|
+
- Revert rxjs changes
|
|
15
|
+
- f6fab28: update entry
|
|
16
|
+
- f6fab28: Update exports
|
|
17
|
+
- f6fab28: Update exports
|
|
18
|
+
- 332d744: Add support for Azure OpenAI
|
|
19
|
+
- f6fab28: Export LangGraph functions
|
|
20
|
+
- f6fab28: Update lockfile
|
|
21
|
+
- Updated dependencies [f6fab28]
|
|
22
|
+
- Updated dependencies [f6fab28]
|
|
23
|
+
- Updated dependencies [f6fab28]
|
|
24
|
+
- Updated dependencies [8a77944]
|
|
25
|
+
- Updated dependencies [f6fab28]
|
|
26
|
+
- Updated dependencies [f6fab28]
|
|
27
|
+
- Updated dependencies [8a77944]
|
|
28
|
+
- Updated dependencies
|
|
29
|
+
- Updated dependencies [f6fab28]
|
|
30
|
+
- Updated dependencies [f6fab28]
|
|
31
|
+
- Updated dependencies [f6fab28]
|
|
32
|
+
- Updated dependencies [332d744]
|
|
33
|
+
- Updated dependencies [f6fab28]
|
|
34
|
+
- Updated dependencies [f6fab28]
|
|
35
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-revert-rxjs-changes.10
|
|
36
|
+
- @copilotkit/react-core@1.3.16-mme-revert-rxjs-changes.10
|
|
37
|
+
- @copilotkit/shared@1.3.16-mme-revert-rxjs-changes.10
|
|
122
38
|
|
|
123
39
|
## 1.3.15
|
|
124
40
|
|
|
@@ -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");
|