@copilotkit/react-ui 1.4.0-pre-1-4-0-alpha.10 → 1.4.0-pre-1-4-0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/CHANGELOG.md +175 -26
  2. package/dist/{chunk-QK6XA3PL.mjs → chunk-H5CXJBR5.mjs} +3 -3
  3. package/dist/{chunk-TEZWY2BL.mjs → chunk-M2NVAJQA.mjs} +2 -2
  4. package/dist/{chunk-C5KOJ3IH.mjs → chunk-ORHE7FYT.mjs} +2 -2
  5. package/dist/{chunk-OJ5NVSTU.mjs → chunk-PY7YBFPA.mjs} +2 -2
  6. package/dist/{chunk-CPMIEVKK.mjs → chunk-RKPANT3F.mjs} +65 -15
  7. package/dist/chunk-RKPANT3F.mjs.map +1 -0
  8. package/dist/components/chat/Chat.js +62 -13
  9. package/dist/components/chat/Chat.js.map +1 -1
  10. package/dist/components/chat/Chat.mjs +2 -2
  11. package/dist/components/chat/Messages.d.ts +6 -1
  12. package/dist/components/chat/Messages.js +66 -15
  13. package/dist/components/chat/Messages.js.map +1 -1
  14. package/dist/components/chat/Messages.mjs +5 -3
  15. package/dist/components/chat/Modal.js +62 -13
  16. package/dist/components/chat/Modal.js.map +1 -1
  17. package/dist/components/chat/Modal.mjs +3 -3
  18. package/dist/components/chat/Popup.js +62 -13
  19. package/dist/components/chat/Popup.js.map +1 -1
  20. package/dist/components/chat/Popup.mjs +4 -4
  21. package/dist/components/chat/Sidebar.js +62 -13
  22. package/dist/components/chat/Sidebar.js.map +1 -1
  23. package/dist/components/chat/Sidebar.mjs +4 -4
  24. package/dist/components/chat/index.js +62 -13
  25. package/dist/components/chat/index.js.map +1 -1
  26. package/dist/components/chat/index.mjs +5 -5
  27. package/dist/components/index.js +62 -13
  28. package/dist/components/index.js.map +1 -1
  29. package/dist/components/index.mjs +5 -5
  30. package/dist/index.js +62 -13
  31. package/dist/index.js.map +1 -1
  32. package/dist/index.mjs +5 -5
  33. package/package.json +7 -7
  34. package/src/components/chat/Messages.tsx +72 -15
  35. package/dist/chunk-CPMIEVKK.mjs.map +0 -1
  36. /package/dist/{chunk-QK6XA3PL.mjs.map → chunk-H5CXJBR5.mjs.map} +0 -0
  37. /package/dist/{chunk-TEZWY2BL.mjs.map → chunk-M2NVAJQA.mjs.map} +0 -0
  38. /package/dist/{chunk-C5KOJ3IH.mjs.map → chunk-ORHE7FYT.mjs.map} +0 -0
  39. /package/dist/{chunk-OJ5NVSTU.mjs.map → chunk-PY7YBFPA.mjs.map} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,43 +1,192 @@
1
1
  # ui
2
2
 
3
- ## 1.4.0-pre-1-4-0-alpha.10
3
+ ## 1.4.0-pre-1-4-0.13
4
4
 
5
5
  ### Minor Changes
6
6
 
7
- - pre-release test
7
+ - lgc & lgjs alpha
8
8
 
9
9
  ### Patch Changes
10
10
 
11
- - f6fab28: update tsup config
12
- - f6fab28: update entry
13
- - f6fab28: export langchain module
11
+ - Updated dependencies
12
+ - @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.13
13
+ - @copilotkit/react-core@1.4.0-pre-1-4-0.13
14
+ - @copilotkit/shared@1.4.0-pre-1-4-0.13
15
+
16
+ ## 1.4.0-pre-1-4-0.12
17
+
18
+ ### Minor Changes
19
+
20
+ - c6b489d: LangGraph Platform and LangGraph JS support
21
+ - 7cc6cc8: LangGraph Cloud and LangGraphJS alpha release
22
+ - prerelease lgc and lgjs
23
+ - Add LangGraph Platform and LangGraph JS support
24
+ - b318b18: Add LangGraph Cloud support
25
+
26
+ ### Patch Changes
27
+
28
+ - 9ea9db1: update tsup config
29
+ - d52c1f9: update entry
30
+ - e71d469: export langchain module
14
31
  - 8a77944: Improve LangSmith support
15
- - f6fab28: Ensure intermediate state config is sent as snake case
16
- - f6fab28: update entry in tsup config
32
+ - 3caa5d5: Ensure intermediate state config is sent as snake case
33
+ - cf3a787: update entry in tsup config
17
34
  - 8a77944: Ensure the last message is sent to LangSmith
18
- - f6fab28: update entry
19
- - f6fab28: Update exports
20
- - f6fab28: Update exports
35
+ - 264a693: update entry
36
+ - dd99f00: Update exports
37
+ - a28fb90: Update exports
21
38
  - 332d744: Add support for Azure OpenAI
22
- - f6fab28: Export LangGraph functions
23
- - f6fab28: Update lockfile
24
- - Updated dependencies [f6fab28]
25
- - Updated dependencies
26
- - Updated dependencies [f6fab28]
27
- - Updated dependencies [f6fab28]
39
+ - 1f8032e: Export LangGraph functions
40
+ - c3576f6: Update lockfile
41
+ - Updated dependencies [9ea9db1]
42
+ - Updated dependencies [d52c1f9]
43
+ - Updated dependencies [c6b489d]
44
+ - Updated dependencies [7cc6cc8]
45
+ - Updated dependencies [e71d469]
28
46
  - Updated dependencies [8a77944]
29
- - Updated dependencies [f6fab28]
30
- - Updated dependencies [f6fab28]
47
+ - Updated dependencies [3caa5d5]
48
+ - Updated dependencies [cf3a787]
49
+ - Updated dependencies
50
+ - Updated dependencies
31
51
  - Updated dependencies [8a77944]
32
- - Updated dependencies [f6fab28]
33
- - Updated dependencies [f6fab28]
34
- - Updated dependencies [f6fab28]
52
+ - Updated dependencies [264a693]
53
+ - Updated dependencies [dd99f00]
54
+ - Updated dependencies [a28fb90]
35
55
  - Updated dependencies [332d744]
36
- - Updated dependencies [f6fab28]
37
- - Updated dependencies [f6fab28]
38
- - @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0-alpha.10
39
- - @copilotkit/react-core@1.4.0-pre-1-4-0-alpha.10
40
- - @copilotkit/shared@1.4.0-pre-1-4-0-alpha.10
56
+ - Updated dependencies [b318b18]
57
+ - Updated dependencies [1f8032e]
58
+ - Updated dependencies [c3576f6]
59
+ - @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.12
60
+ - @copilotkit/react-core@1.4.0-pre-1-4-0.12
61
+ - @copilotkit/shared@1.4.0-pre-1-4-0.12
62
+
63
+ ## 1.4.0-pre-1-4-0.11
64
+
65
+ ### Minor Changes
66
+
67
+ - LangGraph Platform and LangGraph JS support
68
+
69
+ ### Patch Changes
70
+
71
+ - Updated dependencies
72
+ - @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.11
73
+ - @copilotkit/react-core@1.4.0-pre-1-4-0.11
74
+ - @copilotkit/shared@1.4.0-pre-1-4-0.11
75
+
76
+ ## 1.4.0-pre-1-4-0.10
77
+
78
+ ### Minor Changes
79
+
80
+ - LangGraph Cloud and LangGraphJS alpha release
81
+ - b318b18: Add LangGraph Cloud support
82
+
83
+ ### Patch Changes
84
+
85
+ - Updated dependencies
86
+ - Updated dependencies [b318b18]
87
+ - @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.10
88
+ - @copilotkit/react-core@1.4.0-pre-1-4-0.10
89
+ - @copilotkit/shared@1.4.0-pre-1-4-0.10
90
+
91
+ ## 1.3.16-mme-lgc-langgraph-package.9
92
+
93
+ ### Patch Changes
94
+
95
+ - update entry
96
+ - Updated dependencies
97
+ - @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.9
98
+ - @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.9
99
+ - @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.9
100
+
101
+ ## 1.3.16-mme-lgc-langgraph-package.8
102
+
103
+ ### Patch Changes
104
+
105
+ - update entry
106
+ - Updated dependencies
107
+ - @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.8
108
+ - @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.8
109
+ - @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.8
110
+
111
+ ## 1.3.16-mme-lgc-langgraph-package.7
112
+
113
+ ### Patch Changes
114
+
115
+ - update entry in tsup config
116
+ - Updated dependencies
117
+ - @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.7
118
+ - @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.7
119
+ - @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.7
120
+
121
+ ## 1.3.16-mme-lgc-langgraph-package.6
122
+
123
+ ### Patch Changes
124
+
125
+ - Update exports
126
+ - Updated dependencies
127
+ - @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.6
128
+ - @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.6
129
+ - @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.6
130
+
131
+ ## 1.3.16-mme-lgc-langgraph-package.5
132
+
133
+ ### Patch Changes
134
+
135
+ - update tsup config
136
+ - Updated dependencies
137
+ - @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.5
138
+ - @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.5
139
+ - @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.5
140
+
141
+ ## 1.3.16-mme-lgc-langgraph-package.4
142
+
143
+ ### Patch Changes
144
+
145
+ - Update exports
146
+ - Updated dependencies
147
+ - @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.4
148
+ - @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.4
149
+ - @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.4
150
+
151
+ ## 1.3.16-mme-lgc-langgraph-package.3
152
+
153
+ ### Patch Changes
154
+
155
+ - export langchain module
156
+ - Updated dependencies
157
+ - @copilotkit/runtime-client-gql@1.3.16-mme-lgc-langgraph-package.3
158
+ - @copilotkit/react-core@1.3.16-mme-lgc-langgraph-package.3
159
+ - @copilotkit/shared@1.3.16-mme-lgc-langgraph-package.3
160
+
161
+ ## 1.3.16-mme-sdk-js.2
162
+
163
+ ### Patch Changes
164
+
165
+ - Ensure intermediate state config is sent as snake case
166
+ - Updated dependencies
167
+ - @copilotkit/runtime-client-gql@1.3.16-mme-sdk-js.2
168
+ - @copilotkit/react-core@1.3.16-mme-sdk-js.2
169
+ - @copilotkit/shared@1.3.16-mme-sdk-js.2
170
+
171
+ ## 1.3.16-mme-sdk-js.1
172
+
173
+ ### Patch Changes
174
+
175
+ - Update lockfile
176
+ - Updated dependencies
177
+ - @copilotkit/runtime-client-gql@1.3.16-mme-sdk-js.1
178
+ - @copilotkit/react-core@1.3.16-mme-sdk-js.1
179
+ - @copilotkit/shared@1.3.16-mme-sdk-js.1
180
+
181
+ ## 1.3.16-mme-sdk-js.0
182
+
183
+ ### Patch Changes
184
+
185
+ - Export LangGraph functions
186
+ - Updated dependencies
187
+ - @copilotkit/react-core@1.3.16-mme-sdk-js.0
188
+ - @copilotkit/runtime-client-gql@1.3.16-mme-sdk-js.0
189
+ - @copilotkit/shared@1.3.16-mme-sdk-js.0
41
190
 
42
191
  ## 1.3.15
43
192
 
@@ -9,13 +9,13 @@ import {
9
9
  } from "./chunk-RQNJNK2W.mjs";
10
10
  import {
11
11
  CopilotChat
12
- } from "./chunk-C5KOJ3IH.mjs";
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-CPMIEVKK.mjs";
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-QK6XA3PL.mjs.map
91
+ //# sourceMappingURL=chunk-H5CXJBR5.mjs.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  CopilotModal
3
- } from "./chunk-QK6XA3PL.mjs";
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-TEZWY2BL.mjs.map
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-CPMIEVKK.mjs";
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-C5KOJ3IH.mjs.map
201
+ //# sourceMappingURL=chunk-ORHE7FYT.mjs.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  CopilotModal
3
- } from "./chunk-QK6XA3PL.mjs";
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-OJ5NVSTU.mjs.map
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 React, { useEffect, useMemo } from "react";
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 = React.useRef(null);
41
- const scrollToBottom = () => {
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-CPMIEVKK.mjs.map
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 = __toESM(require("react"));
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 = import_react2.default.useRef(null);
422
- const scrollToBottom = () => {
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");