@copilotkit/react-ui 1.3.16-mme-reset-chat.10 → 1.3.16-mme-reset-chat.11
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 +25 -53
- package/dist/{chunk-3QOICFXX.mjs → chunk-2BAND4IT.mjs} +2 -2
- package/dist/{chunk-P54DK2TL.mjs → chunk-5XQEL3WQ.mjs} +2 -2
- package/dist/{chunk-SEY3XSCD.mjs → chunk-DXMPY4SG.mjs} +2 -2
- package/dist/{chunk-H7LLXN6X.mjs → chunk-OG2XHQQM.mjs} +3 -3
- 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-3QOICFXX.mjs.map → chunk-2BAND4IT.mjs.map} +0 -0
- /package/dist/{chunk-P54DK2TL.mjs.map → chunk-5XQEL3WQ.mjs.map} +0 -0
- /package/dist/{chunk-SEY3XSCD.mjs.map → chunk-DXMPY4SG.mjs.map} +0 -0
- /package/dist/{chunk-H7LLXN6X.mjs.map → chunk-OG2XHQQM.mjs.map} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,33 @@
|
|
|
1
1
|
# ui
|
|
2
2
|
|
|
3
|
-
## 1.3.16-mme-reset-chat.
|
|
3
|
+
## 1.3.16-mme-reset-chat.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 164ce73: Add reset and threadId to useCopilotChat
|
|
8
|
+
- f3ce10a: Add custom stop/reload
|
|
9
|
+
- Merge main
|
|
10
|
+
- c7df09a: Move threadId to context
|
|
11
|
+
- Updated dependencies [164ce73]
|
|
12
|
+
- Updated dependencies [f3ce10a]
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
- Updated dependencies [c7df09a]
|
|
15
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-reset-chat.11
|
|
16
|
+
- @copilotkit/react-core@1.3.16-mme-reset-chat.11
|
|
17
|
+
- @copilotkit/shared@1.3.16-mme-reset-chat.11
|
|
18
|
+
|
|
19
|
+
## 1.3.16-mme-revert-rxjs-changes.10
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
6
22
|
|
|
7
23
|
- f6fab28: update tsup config
|
|
8
24
|
- f6fab28: update entry
|
|
9
25
|
- f6fab28: export langchain module
|
|
10
|
-
-
|
|
11
|
-
- 164ce73: Add reset and threadId to useCopilotChat
|
|
26
|
+
- 8a77944: Improve LangSmith support
|
|
12
27
|
- f6fab28: Ensure intermediate state config is sent as snake case
|
|
13
28
|
- f6fab28: update entry in tsup config
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
- c7df09a: Move threadId to context
|
|
29
|
+
- 8a77944: Ensure the last message is sent to LangSmith
|
|
30
|
+
- Revert rxjs changes
|
|
17
31
|
- f6fab28: update entry
|
|
18
32
|
- f6fab28: Update exports
|
|
19
33
|
- f6fab28: Update exports
|
|
@@ -23,62 +37,20 @@
|
|
|
23
37
|
- Updated dependencies [f6fab28]
|
|
24
38
|
- Updated dependencies [f6fab28]
|
|
25
39
|
- Updated dependencies [f6fab28]
|
|
26
|
-
- Updated dependencies [
|
|
27
|
-
- Updated dependencies [164ce73]
|
|
40
|
+
- Updated dependencies [8a77944]
|
|
28
41
|
- Updated dependencies [f6fab28]
|
|
29
42
|
- Updated dependencies [f6fab28]
|
|
43
|
+
- Updated dependencies [8a77944]
|
|
30
44
|
- Updated dependencies
|
|
31
|
-
- Updated dependencies [af119bf]
|
|
32
|
-
- Updated dependencies [c7df09a]
|
|
33
45
|
- Updated dependencies [f6fab28]
|
|
34
46
|
- Updated dependencies [f6fab28]
|
|
35
47
|
- Updated dependencies [f6fab28]
|
|
36
48
|
- Updated dependencies [332d744]
|
|
37
49
|
- Updated dependencies [f6fab28]
|
|
38
50
|
- Updated dependencies [f6fab28]
|
|
39
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-
|
|
40
|
-
- @copilotkit/react-core@1.3.16-mme-
|
|
41
|
-
- @copilotkit/shared@1.3.16-mme-
|
|
42
|
-
|
|
43
|
-
## 1.3.16-mme-reset-chat.3
|
|
44
|
-
|
|
45
|
-
### Patch Changes
|
|
46
|
-
|
|
47
|
-
- Move threadId to context
|
|
48
|
-
- Updated dependencies
|
|
49
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-reset-chat.3
|
|
50
|
-
- @copilotkit/react-core@1.3.16-mme-reset-chat.3
|
|
51
|
-
- @copilotkit/shared@1.3.16-mme-reset-chat.3
|
|
52
|
-
|
|
53
|
-
## 1.3.16-mme-reset-chat.2
|
|
54
|
-
|
|
55
|
-
### Patch Changes
|
|
56
|
-
|
|
57
|
-
- Add reset and threadId to useCopilotChat
|
|
58
|
-
- Updated dependencies
|
|
59
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-reset-chat.2
|
|
60
|
-
- @copilotkit/react-core@1.3.16-mme-reset-chat.2
|
|
61
|
-
- @copilotkit/shared@1.3.16-mme-reset-chat.2
|
|
62
|
-
|
|
63
|
-
## 1.3.16-mme-improve-langsmith.1
|
|
64
|
-
|
|
65
|
-
### Patch Changes
|
|
66
|
-
|
|
67
|
-
- Ensure the last message is sent to LangSmith
|
|
68
|
-
- Updated dependencies
|
|
69
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-improve-langsmith.1
|
|
70
|
-
- @copilotkit/react-core@1.3.16-mme-improve-langsmith.1
|
|
71
|
-
- @copilotkit/shared@1.3.16-mme-improve-langsmith.1
|
|
72
|
-
|
|
73
|
-
## 1.3.16-mme-improve-langsmith.0
|
|
74
|
-
|
|
75
|
-
### Patch Changes
|
|
76
|
-
|
|
77
|
-
- Improve LangSmith support
|
|
78
|
-
- Updated dependencies
|
|
79
|
-
- @copilotkit/react-core@1.3.16-mme-improve-langsmith.0
|
|
80
|
-
- @copilotkit/runtime-client-gql@1.3.16-mme-improve-langsmith.0
|
|
81
|
-
- @copilotkit/shared@1.3.16-mme-improve-langsmith.0
|
|
51
|
+
- @copilotkit/runtime-client-gql@1.3.16-mme-revert-rxjs-changes.10
|
|
52
|
+
- @copilotkit/react-core@1.3.16-mme-revert-rxjs-changes.10
|
|
53
|
+
- @copilotkit/shared@1.3.16-mme-revert-rxjs-changes.10
|
|
82
54
|
|
|
83
55
|
## 1.3.15
|
|
84
56
|
|
|
@@ -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";
|
|
@@ -294,4 +294,4 @@ export {
|
|
|
294
294
|
WrappedCopilotChat,
|
|
295
295
|
useCopilotChatLogic
|
|
296
296
|
};
|
|
297
|
-
//# sourceMappingURL=chunk-
|
|
297
|
+
//# sourceMappingURL=chunk-2BAND4IT.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
CopilotModal
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-OG2XHQQM.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-5XQEL3WQ.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
CopilotModal
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-OG2XHQQM.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-DXMPY4SG.mjs.map
|
|
@@ -9,13 +9,13 @@ import {
|
|
|
9
9
|
} from "./chunk-RQNJNK2W.mjs";
|
|
10
10
|
import {
|
|
11
11
|
CopilotChat
|
|
12
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-2BAND4IT.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";
|
|
@@ -92,4 +92,4 @@ var CopilotModal = ({
|
|
|
92
92
|
export {
|
|
93
93
|
CopilotModal
|
|
94
94
|
};
|
|
95
|
-
//# sourceMappingURL=chunk-
|
|
95
|
+
//# sourceMappingURL=chunk-OG2XHQQM.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");
|