@uipath/apollo-wind 2.66.1 → 2.67.0
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/dist/components/ui/attachment.cjs +174 -0
- package/dist/components/ui/attachment.d.ts +39 -0
- package/dist/components/ui/attachment.js +113 -0
- package/dist/components/ui/bubble.cjs +123 -0
- package/dist/components/ui/bubble.d.ts +28 -0
- package/dist/components/ui/bubble.js +77 -0
- package/dist/components/ui/index.cjs +268 -213
- package/dist/components/ui/index.d.ts +6 -1
- package/dist/components/ui/index.js +6 -1
- package/dist/components/ui/marker.cjs +89 -0
- package/dist/components/ui/marker.d.ts +16 -0
- package/dist/components/ui/marker.js +46 -0
- package/dist/components/ui/message-scroller/index.cjs +58 -0
- package/dist/components/ui/message-scroller/index.d.ts +1 -0
- package/dist/components/ui/message-scroller/index.js +1 -0
- package/dist/components/ui/message-scroller/message-scroller.cjs +137 -0
- package/dist/components/ui/message-scroller/message-scroller.d.ts +60 -0
- package/dist/components/ui/message-scroller/message-scroller.js +73 -0
- package/dist/components/ui/message-scroller/primitive/components.cjs +357 -0
- package/dist/components/ui/message-scroller/primitive/components.d.ts +28 -0
- package/dist/components/ui/message-scroller/primitive/components.js +299 -0
- package/dist/components/ui/message-scroller/primitive/geometry.cjs +232 -0
- package/dist/components/ui/message-scroller/primitive/geometry.d.ts +54 -0
- package/dist/components/ui/message-scroller/primitive/geometry.js +153 -0
- package/dist/components/ui/message-scroller/primitive/index.cjs +53 -0
- package/dist/components/ui/message-scroller/primitive/index.d.ts +23 -0
- package/dist/components/ui/message-scroller/primitive/index.js +10 -0
- package/dist/components/ui/message-scroller/primitive/stores.cjs +81 -0
- package/dist/components/ui/message-scroller/primitive/stores.d.ts +6 -0
- package/dist/components/ui/message-scroller/primitive/stores.js +38 -0
- package/dist/components/ui/message-scroller/primitive/types.cjs +82 -0
- package/dist/components/ui/message-scroller/primitive/types.d.ts +89 -0
- package/dist/components/ui/message-scroller/primitive/types.js +24 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-commands.cjs +213 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-commands.d.ts +18 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-commands.js +179 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-controller.cjs +474 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-controller.d.ts +6 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-controller.js +440 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-refs.cjs +124 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-refs.d.ts +52 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-refs.js +84 -0
- package/dist/components/ui/message-scroller/primitive/use-render.cjs +116 -0
- package/dist/components/ui/message-scroller/primitive/use-render.d.ts +21 -0
- package/dist/components/ui/message-scroller/primitive/use-render.js +76 -0
- package/dist/components/ui/message-scroller/primitive/utils.cjs +41 -0
- package/dist/components/ui/message-scroller/primitive/utils.d.ts +3 -0
- package/dist/components/ui/message-scroller/primitive/utils.js +7 -0
- package/dist/components/ui/message.cjs +96 -0
- package/dist/components/ui/message.d.ts +17 -0
- package/dist/components/ui/message.js +47 -0
- package/dist/index.cjs +164 -51
- package/dist/index.d.ts +10 -0
- package/dist/index.js +6 -1
- package/dist/styles.css +720 -0
- package/dist/tailwind.utilities.css +223 -0
- package/package.json +1 -1
|
@@ -0,0 +1,440 @@
|
|
|
1
|
+
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
|
|
2
|
+
import { getContentBottom, getElementTop, getElementViewportTop, getFirstVisibleMessageItem, getFlexGap, getLastScrollAnchor, getMessageScrollerItems, getMessageScrollerScrollable, getMessageScrollerVisibilityState, getNewScrollAnchor, getUnanchoredScrollAnchor, hasMultipleNewScrollAnchors } from "./geometry.js";
|
|
3
|
+
import { DEFAULT_SCROLL_EDGE_THRESHOLD, DEFAULT_SCROLL_MARGIN, DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK, EMPTY_MESSAGE_SCROLLER_VISIBILITY_STATE, SCROLL_POSITION_EPSILON } from "./types.js";
|
|
4
|
+
import { useMessageScrollerCommands } from "./use-message-scroller-commands.js";
|
|
5
|
+
import { clearPendingDefaultScroll, markDefaultScrollPositionApplied, useMessageScrollerRefs } from "./use-message-scroller-refs.js";
|
|
6
|
+
function useElementRef(elementRef, onMount) {
|
|
7
|
+
return useCallback((element)=>{
|
|
8
|
+
elementRef.current = element;
|
|
9
|
+
if (element) onMount();
|
|
10
|
+
}, [
|
|
11
|
+
elementRef,
|
|
12
|
+
onMount
|
|
13
|
+
]);
|
|
14
|
+
}
|
|
15
|
+
function useMessageScrollerController({ autoScroll = false, defaultScrollPosition = 'end', scrollEdgeThreshold = DEFAULT_SCROLL_EDGE_THRESHOLD, scrollPreviousItemPeek = DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK, scrollMargin = DEFAULT_SCROLL_MARGIN }) {
|
|
16
|
+
const refs = useMessageScrollerRefs({
|
|
17
|
+
autoScroll,
|
|
18
|
+
defaultScrollPosition,
|
|
19
|
+
scrollEdgeThreshold,
|
|
20
|
+
scrollMargin,
|
|
21
|
+
scrollPreviousItemPeek
|
|
22
|
+
});
|
|
23
|
+
const { streamingTurnRef, autoScrollRef, autoscrollingRef, autoscrollingTimeoutRef, contentRef, defaultScrollPositionAppliedRef, firstItemRef, itemCountRef, lastScrollTopRef, messageElementsRef, modeRef, pendingScrollFrameRef, pendingScrollToMessageRef, prependRestoreRef, preserveScrollOnPrependRef, pendingDefaultScrollStore, rootRef, scrollEdgeThresholdRef, scrollMarginRef, scrollPreviousItemPeekRef, spacerGapRef, spacerHeightRef, spacerRef, stateFrameRef, stateStore, viewportRef, visibilityFrameRef, visibilityObserverRef, visibilityStore, visibleMessageIdsRef, handledScrollAnchorsRef } = refs;
|
|
24
|
+
const previousDefaultScrollPositionRef = useRef(defaultScrollPosition);
|
|
25
|
+
if (previousDefaultScrollPositionRef.current !== defaultScrollPosition) {
|
|
26
|
+
previousDefaultScrollPositionRef.current = defaultScrollPosition;
|
|
27
|
+
defaultScrollPositionAppliedRef.current = false;
|
|
28
|
+
}
|
|
29
|
+
const writeStateAttributes = useCallback((state)=>{
|
|
30
|
+
const root = rootRef.current;
|
|
31
|
+
const viewport = viewportRef.current;
|
|
32
|
+
const scrollable = [
|
|
33
|
+
state.start && 'start',
|
|
34
|
+
state.end && 'end'
|
|
35
|
+
].filter(Boolean).join(' ');
|
|
36
|
+
const autoScrolling = autoscrollingRef.current;
|
|
37
|
+
for (const element of [
|
|
38
|
+
root,
|
|
39
|
+
viewport
|
|
40
|
+
])if (element) {
|
|
41
|
+
if (scrollable) element.setAttribute('data-scrollable', scrollable);
|
|
42
|
+
else element.removeAttribute('data-scrollable');
|
|
43
|
+
element.toggleAttribute('data-autoscrolling', autoScrolling);
|
|
44
|
+
}
|
|
45
|
+
}, []);
|
|
46
|
+
const reconcileFollowMode = useCallback((scrollable)=>{
|
|
47
|
+
const scrollTop = viewportRef.current?.scrollTop ?? 0;
|
|
48
|
+
const scrolledUp = scrollTop < lastScrollTopRef.current - SCROLL_POSITION_EPSILON;
|
|
49
|
+
lastScrollTopRef.current = scrollTop;
|
|
50
|
+
if (autoScrollRef.current && !scrollable.end && 'settling-jump' !== modeRef.current && 'anchored-to-message' !== modeRef.current) modeRef.current = 'following-bottom';
|
|
51
|
+
else if ('following-bottom' === modeRef.current && scrollable.end && scrolledUp && !autoscrollingRef.current) modeRef.current = 'free-scrolling';
|
|
52
|
+
}, []);
|
|
53
|
+
const commitScrollState = useCallback(()=>{
|
|
54
|
+
const nextState = getMessageScrollerScrollable({
|
|
55
|
+
content: contentRef.current,
|
|
56
|
+
scrollEdgeThreshold: scrollEdgeThresholdRef.current,
|
|
57
|
+
spacer: spacerRef.current,
|
|
58
|
+
viewport: viewportRef.current
|
|
59
|
+
});
|
|
60
|
+
reconcileFollowMode(nextState);
|
|
61
|
+
const publishedState = 'following-bottom' === modeRef.current ? {
|
|
62
|
+
...nextState,
|
|
63
|
+
end: false
|
|
64
|
+
} : nextState;
|
|
65
|
+
writeStateAttributes(publishedState);
|
|
66
|
+
stateStore.setSnapshot(publishedState);
|
|
67
|
+
}, [
|
|
68
|
+
reconcileFollowMode,
|
|
69
|
+
stateStore,
|
|
70
|
+
writeStateAttributes
|
|
71
|
+
]);
|
|
72
|
+
const scheduleStateCommit = useCallback(()=>{
|
|
73
|
+
if (null !== stateFrameRef.current) return;
|
|
74
|
+
stateFrameRef.current = window.requestAnimationFrame(()=>{
|
|
75
|
+
stateFrameRef.current = null;
|
|
76
|
+
commitScrollState();
|
|
77
|
+
});
|
|
78
|
+
}, [
|
|
79
|
+
commitScrollState
|
|
80
|
+
]);
|
|
81
|
+
const scheduleVisibilitySync = useCallback(()=>{
|
|
82
|
+
if (!visibilityStore.hasListeners()) return;
|
|
83
|
+
if (null !== visibilityFrameRef.current) return;
|
|
84
|
+
visibilityFrameRef.current = window.requestAnimationFrame(()=>{
|
|
85
|
+
visibilityFrameRef.current = null;
|
|
86
|
+
if (!visibilityStore.hasListeners()) return;
|
|
87
|
+
visibilityStore.setSnapshot(getMessageScrollerVisibilityState({
|
|
88
|
+
content: contentRef.current,
|
|
89
|
+
scrollMargin: scrollMarginRef.current,
|
|
90
|
+
scrollPreviousItemPeek: scrollPreviousItemPeekRef.current,
|
|
91
|
+
spacer: spacerRef.current,
|
|
92
|
+
viewport: viewportRef.current,
|
|
93
|
+
visibleMessageIds: visibleMessageIdsRef.current
|
|
94
|
+
}));
|
|
95
|
+
});
|
|
96
|
+
}, [
|
|
97
|
+
visibilityStore
|
|
98
|
+
]);
|
|
99
|
+
const { flushPendingScrollToMessage, reanchorToAnchoredMessage, scrollToElement, scrollToEnd, scrollToMessage, scrollToStart } = useMessageScrollerCommands({
|
|
100
|
+
refs,
|
|
101
|
+
commitScrollState,
|
|
102
|
+
scheduleStateCommit,
|
|
103
|
+
scheduleVisibilitySync
|
|
104
|
+
});
|
|
105
|
+
const restorePrependedAnchor = useCallback(()=>{
|
|
106
|
+
const anchor = prependRestoreRef.current;
|
|
107
|
+
const viewport = viewportRef.current;
|
|
108
|
+
if (!anchor || !viewport || !anchor.element.isConnected) return false;
|
|
109
|
+
const nextViewportTop = getElementViewportTop(anchor.element, viewport);
|
|
110
|
+
const delta = nextViewportTop - anchor.viewportTop;
|
|
111
|
+
if (Math.abs(delta) <= SCROLL_POSITION_EPSILON) return false;
|
|
112
|
+
viewport.scrollTop += delta;
|
|
113
|
+
anchor.viewportTop = getElementViewportTop(anchor.element, viewport);
|
|
114
|
+
scheduleStateCommit();
|
|
115
|
+
scheduleVisibilitySync();
|
|
116
|
+
return true;
|
|
117
|
+
}, [
|
|
118
|
+
scheduleStateCommit,
|
|
119
|
+
scheduleVisibilitySync
|
|
120
|
+
]);
|
|
121
|
+
const capturePrependAnchor = useCallback(()=>{
|
|
122
|
+
const content = contentRef.current;
|
|
123
|
+
const viewport = viewportRef.current;
|
|
124
|
+
if (!content || !viewport) {
|
|
125
|
+
prependRestoreRef.current = null;
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
const anchor = getFirstVisibleMessageItem({
|
|
129
|
+
content,
|
|
130
|
+
spacer: spacerRef.current,
|
|
131
|
+
viewport
|
|
132
|
+
});
|
|
133
|
+
prependRestoreRef.current = anchor ? {
|
|
134
|
+
element: anchor,
|
|
135
|
+
viewportTop: getElementViewportTop(anchor, viewport)
|
|
136
|
+
} : null;
|
|
137
|
+
}, []);
|
|
138
|
+
const schedulePendingScrollToMessageFlush = useCallback(()=>{
|
|
139
|
+
if (null !== pendingScrollFrameRef.current) return;
|
|
140
|
+
pendingScrollFrameRef.current = window.requestAnimationFrame(()=>{
|
|
141
|
+
pendingScrollFrameRef.current = null;
|
|
142
|
+
if (flushPendingScrollToMessage()) capturePrependAnchor();
|
|
143
|
+
});
|
|
144
|
+
}, [
|
|
145
|
+
capturePrependAnchor,
|
|
146
|
+
flushPendingScrollToMessage
|
|
147
|
+
]);
|
|
148
|
+
const applyDefaultScrollPosition = useCallback(()=>{
|
|
149
|
+
if (!defaultScrollPosition || defaultScrollPositionAppliedRef.current || 0 === itemCountRef.current) return false;
|
|
150
|
+
let handled = false;
|
|
151
|
+
if ('last-anchor' === defaultScrollPosition) {
|
|
152
|
+
const content = contentRef.current;
|
|
153
|
+
const viewport = viewportRef.current;
|
|
154
|
+
const anchor = content && viewport ? getLastScrollAnchor(getMessageScrollerItems(content, spacerRef.current)) : null;
|
|
155
|
+
if (content && viewport && anchor) {
|
|
156
|
+
const anchorTop = getElementTop(anchor, viewport);
|
|
157
|
+
const contentBottom = getContentBottom({
|
|
158
|
+
content,
|
|
159
|
+
spacer: spacerRef.current,
|
|
160
|
+
viewport
|
|
161
|
+
});
|
|
162
|
+
const lastTurnFits = contentBottom - anchorTop <= viewport.clientHeight;
|
|
163
|
+
handled = lastTurnFits ? scrollToEnd({
|
|
164
|
+
behavior: 'auto'
|
|
165
|
+
}) : scrollToElement(anchor, {
|
|
166
|
+
align: 'start'
|
|
167
|
+
}, {
|
|
168
|
+
keepPreviousPeek: true
|
|
169
|
+
});
|
|
170
|
+
} else handled = scrollToEnd({
|
|
171
|
+
behavior: 'auto'
|
|
172
|
+
});
|
|
173
|
+
} else handled = 'end' === defaultScrollPosition ? scrollToEnd({
|
|
174
|
+
behavior: 'auto'
|
|
175
|
+
}) : scrollToStart({
|
|
176
|
+
behavior: 'auto'
|
|
177
|
+
});
|
|
178
|
+
if (!handled) return false;
|
|
179
|
+
markDefaultScrollPositionApplied(refs);
|
|
180
|
+
return true;
|
|
181
|
+
}, [
|
|
182
|
+
defaultScrollPosition,
|
|
183
|
+
scrollToElement,
|
|
184
|
+
scrollToEnd,
|
|
185
|
+
scrollToStart
|
|
186
|
+
]);
|
|
187
|
+
const handleContentChange = useCallback(()=>{
|
|
188
|
+
const content = contentRef.current;
|
|
189
|
+
if (!content) return;
|
|
190
|
+
const items = getMessageScrollerItems(content, spacerRef.current);
|
|
191
|
+
const previousItemCount = itemCountRef.current;
|
|
192
|
+
const previousFirstItem = firstItemRef.current;
|
|
193
|
+
itemCountRef.current = items.length;
|
|
194
|
+
firstItemRef.current = items[0] ?? null;
|
|
195
|
+
const reconcileScrollPosition = ()=>{
|
|
196
|
+
if (flushPendingScrollToMessage()) return;
|
|
197
|
+
if (0 === previousItemCount) {
|
|
198
|
+
if (applyDefaultScrollPosition()) return;
|
|
199
|
+
if (items.length > 0 && autoScrollRef.current && scrollToEnd({
|
|
200
|
+
behavior: 'auto'
|
|
201
|
+
})) return;
|
|
202
|
+
commitScrollState();
|
|
203
|
+
scheduleVisibilitySync();
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
const previousFirstItemIndex = previousFirstItem ? items.indexOf(previousFirstItem) : -1;
|
|
207
|
+
const didPrepend = preserveScrollOnPrependRef.current && previousFirstItemIndex > 0;
|
|
208
|
+
if (didPrepend) return void restorePrependedAnchor();
|
|
209
|
+
if (items.length > previousItemCount) {
|
|
210
|
+
const anchor = getNewScrollAnchor(items, previousItemCount);
|
|
211
|
+
if (anchor) {
|
|
212
|
+
if (autoScrollRef.current && 'following-bottom' === modeRef.current && hasMultipleNewScrollAnchors(items, previousItemCount)) return void scrollToEnd({
|
|
213
|
+
behavior: 'auto'
|
|
214
|
+
});
|
|
215
|
+
scrollToElement(anchor, {
|
|
216
|
+
align: 'start'
|
|
217
|
+
}, {
|
|
218
|
+
keepPreviousPeek: true
|
|
219
|
+
});
|
|
220
|
+
handledScrollAnchorsRef.current.add(anchor);
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
if (items.length === previousItemCount) {
|
|
225
|
+
const anchor = getUnanchoredScrollAnchor(items, handledScrollAnchorsRef.current);
|
|
226
|
+
if (anchor) {
|
|
227
|
+
scrollToElement(anchor, {
|
|
228
|
+
align: 'start'
|
|
229
|
+
}, {
|
|
230
|
+
keepPreviousPeek: true
|
|
231
|
+
});
|
|
232
|
+
handledScrollAnchorsRef.current.add(anchor);
|
|
233
|
+
return;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
if ('following-bottom' === modeRef.current && autoScrollRef.current) scrollToEnd({
|
|
237
|
+
behavior: 'auto'
|
|
238
|
+
});
|
|
239
|
+
else {
|
|
240
|
+
commitScrollState();
|
|
241
|
+
scheduleVisibilitySync();
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
reconcileScrollPosition();
|
|
245
|
+
capturePrependAnchor();
|
|
246
|
+
}, [
|
|
247
|
+
applyDefaultScrollPosition,
|
|
248
|
+
capturePrependAnchor,
|
|
249
|
+
commitScrollState,
|
|
250
|
+
flushPendingScrollToMessage,
|
|
251
|
+
restorePrependedAnchor,
|
|
252
|
+
scheduleVisibilitySync,
|
|
253
|
+
scrollToElement,
|
|
254
|
+
scrollToEnd
|
|
255
|
+
]);
|
|
256
|
+
const handleResize = useCallback(()=>{
|
|
257
|
+
if ('following-bottom' === modeRef.current && autoScrollRef.current) return void scrollToEnd({
|
|
258
|
+
behavior: 'auto'
|
|
259
|
+
});
|
|
260
|
+
const previousSpacerHeight = spacerHeightRef.current;
|
|
261
|
+
if (reanchorToAnchoredMessage()) {
|
|
262
|
+
if (autoScrollRef.current && previousSpacerHeight > 0 && 0 === spacerHeightRef.current) scrollToEnd({
|
|
263
|
+
behavior: 'auto'
|
|
264
|
+
});
|
|
265
|
+
return;
|
|
266
|
+
}
|
|
267
|
+
scheduleStateCommit();
|
|
268
|
+
scheduleVisibilitySync();
|
|
269
|
+
}, [
|
|
270
|
+
reanchorToAnchoredMessage,
|
|
271
|
+
scheduleStateCommit,
|
|
272
|
+
scheduleVisibilitySync,
|
|
273
|
+
scrollToEnd
|
|
274
|
+
]);
|
|
275
|
+
const observeVisibility = useCallback(()=>{
|
|
276
|
+
const viewport = viewportRef.current;
|
|
277
|
+
if (!viewport || !visibilityStore.hasListeners()) return;
|
|
278
|
+
if ("u" < typeof IntersectionObserver) return void scheduleVisibilitySync();
|
|
279
|
+
if (!visibilityObserverRef.current) visibilityObserverRef.current = new IntersectionObserver((entries)=>{
|
|
280
|
+
for (const entry of entries){
|
|
281
|
+
const messageId = entry.target.dataset.messageId;
|
|
282
|
+
if (messageId) if (entry.isIntersecting) visibleMessageIdsRef.current.add(messageId);
|
|
283
|
+
else visibleMessageIdsRef.current.delete(messageId);
|
|
284
|
+
}
|
|
285
|
+
scheduleVisibilitySync();
|
|
286
|
+
}, {
|
|
287
|
+
root: viewport,
|
|
288
|
+
rootMargin: `${-(scrollMarginRef.current + scrollPreviousItemPeekRef.current)}px 0px 0px 0px`,
|
|
289
|
+
threshold: [
|
|
290
|
+
0,
|
|
291
|
+
0.01,
|
|
292
|
+
0.5,
|
|
293
|
+
1
|
|
294
|
+
]
|
|
295
|
+
});
|
|
296
|
+
messageElementsRef.current.forEach((element)=>{
|
|
297
|
+
visibilityObserverRef.current?.observe(element);
|
|
298
|
+
});
|
|
299
|
+
scheduleVisibilitySync();
|
|
300
|
+
}, [
|
|
301
|
+
scheduleVisibilitySync,
|
|
302
|
+
visibilityStore
|
|
303
|
+
]);
|
|
304
|
+
const unobserveVisibility = useCallback(()=>{
|
|
305
|
+
if (null !== visibilityFrameRef.current) {
|
|
306
|
+
window.cancelAnimationFrame(visibilityFrameRef.current);
|
|
307
|
+
visibilityFrameRef.current = null;
|
|
308
|
+
}
|
|
309
|
+
visibilityObserverRef.current?.disconnect();
|
|
310
|
+
visibilityObserverRef.current = null;
|
|
311
|
+
visibleMessageIdsRef.current.clear();
|
|
312
|
+
visibilityStore.setSnapshot(EMPTY_MESSAGE_SCROLLER_VISIBILITY_STATE);
|
|
313
|
+
}, [
|
|
314
|
+
visibilityStore
|
|
315
|
+
]);
|
|
316
|
+
const registerMessage = useCallback((messageId, element, removedElement)=>{
|
|
317
|
+
if (element) {
|
|
318
|
+
messageElementsRef.current.set(messageId, element);
|
|
319
|
+
visibilityObserverRef.current?.observe(element);
|
|
320
|
+
scheduleVisibilitySync();
|
|
321
|
+
if (pendingScrollToMessageRef.current?.messageId === messageId) schedulePendingScrollToMessageFlush();
|
|
322
|
+
return;
|
|
323
|
+
}
|
|
324
|
+
if (removedElement && messageElementsRef.current.get(messageId) === removedElement) {
|
|
325
|
+
messageElementsRef.current.delete(messageId);
|
|
326
|
+
visibleMessageIdsRef.current.delete(messageId);
|
|
327
|
+
visibilityObserverRef.current?.unobserve(removedElement);
|
|
328
|
+
scheduleVisibilitySync();
|
|
329
|
+
}
|
|
330
|
+
}, [
|
|
331
|
+
schedulePendingScrollToMessageFlush,
|
|
332
|
+
scheduleVisibilitySync
|
|
333
|
+
]);
|
|
334
|
+
const userScrollIntent = useCallback(()=>{
|
|
335
|
+
if ('following-bottom' === modeRef.current || 'anchored-to-message' === modeRef.current || 'settling-jump' === modeRef.current) {
|
|
336
|
+
streamingTurnRef.current = null;
|
|
337
|
+
modeRef.current = 'free-scrolling';
|
|
338
|
+
}
|
|
339
|
+
}, []);
|
|
340
|
+
const mirrorStateAttributes = useCallback(()=>writeStateAttributes(stateStore.getSnapshot()), [
|
|
341
|
+
stateStore,
|
|
342
|
+
writeStateAttributes
|
|
343
|
+
]);
|
|
344
|
+
const setRootElement = useElementRef(rootRef, mirrorStateAttributes);
|
|
345
|
+
const setViewportElement = useElementRef(viewportRef, mirrorStateAttributes);
|
|
346
|
+
const setContentElement = useCallback((element)=>{
|
|
347
|
+
contentRef.current = element;
|
|
348
|
+
}, []);
|
|
349
|
+
const setSpacerElement = useCallback((element)=>{
|
|
350
|
+
spacerRef.current = element;
|
|
351
|
+
spacerGapRef.current = getFlexGap(element?.parentElement ?? null);
|
|
352
|
+
}, []);
|
|
353
|
+
const syncAfterScroll = useCallback(()=>{
|
|
354
|
+
commitScrollState();
|
|
355
|
+
scheduleVisibilitySync();
|
|
356
|
+
capturePrependAnchor();
|
|
357
|
+
}, [
|
|
358
|
+
capturePrependAnchor,
|
|
359
|
+
commitScrollState,
|
|
360
|
+
scheduleVisibilitySync
|
|
361
|
+
]);
|
|
362
|
+
const context = useMemo(()=>({
|
|
363
|
+
handleContentChange,
|
|
364
|
+
handleResize,
|
|
365
|
+
observeVisibility,
|
|
366
|
+
pendingDefaultScrollStore,
|
|
367
|
+
preserveScrollOnPrependRef,
|
|
368
|
+
scrollToEnd,
|
|
369
|
+
scrollToMessage,
|
|
370
|
+
scrollToStart,
|
|
371
|
+
setContentElement,
|
|
372
|
+
setRootElement,
|
|
373
|
+
setSpacerElement,
|
|
374
|
+
setViewportElement,
|
|
375
|
+
stateStore,
|
|
376
|
+
syncAfterScroll,
|
|
377
|
+
unobserveVisibility,
|
|
378
|
+
userScrollIntent,
|
|
379
|
+
viewportRef,
|
|
380
|
+
visibilityStore
|
|
381
|
+
}), [
|
|
382
|
+
handleContentChange,
|
|
383
|
+
handleResize,
|
|
384
|
+
observeVisibility,
|
|
385
|
+
pendingDefaultScrollStore,
|
|
386
|
+
scrollToEnd,
|
|
387
|
+
scrollToMessage,
|
|
388
|
+
scrollToStart,
|
|
389
|
+
setContentElement,
|
|
390
|
+
setRootElement,
|
|
391
|
+
setSpacerElement,
|
|
392
|
+
setViewportElement,
|
|
393
|
+
stateStore,
|
|
394
|
+
syncAfterScroll,
|
|
395
|
+
unobserveVisibility,
|
|
396
|
+
userScrollIntent,
|
|
397
|
+
visibilityStore
|
|
398
|
+
]);
|
|
399
|
+
useLayoutEffect(()=>{
|
|
400
|
+
if (applyDefaultScrollPosition()) return;
|
|
401
|
+
if (0 === itemCountRef.current) clearPendingDefaultScroll(refs);
|
|
402
|
+
}, [
|
|
403
|
+
applyDefaultScrollPosition
|
|
404
|
+
]);
|
|
405
|
+
useEffect(()=>()=>{
|
|
406
|
+
if (null !== stateFrameRef.current) {
|
|
407
|
+
window.cancelAnimationFrame(stateFrameRef.current);
|
|
408
|
+
stateFrameRef.current = null;
|
|
409
|
+
}
|
|
410
|
+
if (null !== visibilityFrameRef.current) {
|
|
411
|
+
window.cancelAnimationFrame(visibilityFrameRef.current);
|
|
412
|
+
visibilityFrameRef.current = null;
|
|
413
|
+
}
|
|
414
|
+
if (null !== autoscrollingTimeoutRef.current) {
|
|
415
|
+
window.clearTimeout(autoscrollingTimeoutRef.current);
|
|
416
|
+
autoscrollingTimeoutRef.current = null;
|
|
417
|
+
}
|
|
418
|
+
if (null !== pendingScrollFrameRef.current) {
|
|
419
|
+
window.cancelAnimationFrame(pendingScrollFrameRef.current);
|
|
420
|
+
pendingScrollFrameRef.current = null;
|
|
421
|
+
}
|
|
422
|
+
visibilityObserverRef.current?.disconnect();
|
|
423
|
+
visibilityObserverRef.current = null;
|
|
424
|
+
}, []);
|
|
425
|
+
useLayoutEffect(()=>{
|
|
426
|
+
if (autoScroll && 'following-bottom' === modeRef.current && itemCountRef.current > 0) return void scrollToEnd({
|
|
427
|
+
behavior: 'auto'
|
|
428
|
+
});
|
|
429
|
+
commitScrollState();
|
|
430
|
+
}, [
|
|
431
|
+
autoScroll,
|
|
432
|
+
commitScrollState,
|
|
433
|
+
scrollToEnd
|
|
434
|
+
]);
|
|
435
|
+
return {
|
|
436
|
+
context,
|
|
437
|
+
registerMessage
|
|
438
|
+
};
|
|
439
|
+
}
|
|
440
|
+
export { useMessageScrollerController };
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
clearPendingDefaultScroll: ()=>clearPendingDefaultScroll,
|
|
28
|
+
markDefaultScrollPositionApplied: ()=>markDefaultScrollPositionApplied,
|
|
29
|
+
useMessageScrollerRefs: ()=>useMessageScrollerRefs
|
|
30
|
+
});
|
|
31
|
+
const external_react_namespaceObject = require("react");
|
|
32
|
+
const external_stores_cjs_namespaceObject = require("./stores.cjs");
|
|
33
|
+
const external_types_cjs_namespaceObject = require("./types.cjs");
|
|
34
|
+
function useMessageScrollerRefs({ autoScroll, defaultScrollPosition, scrollEdgeThreshold, scrollMargin, scrollPreviousItemPeek }) {
|
|
35
|
+
const autoScrollRef = external_react_namespaceObject.useRef(autoScroll);
|
|
36
|
+
const autoscrollingRef = external_react_namespaceObject.useRef(false);
|
|
37
|
+
const contentRef = external_react_namespaceObject.useRef(null);
|
|
38
|
+
const defaultScrollPositionAppliedRef = external_react_namespaceObject.useRef(false);
|
|
39
|
+
const scrollEdgeThresholdRef = external_react_namespaceObject.useRef(scrollEdgeThreshold);
|
|
40
|
+
const itemCountRef = external_react_namespaceObject.useRef(0);
|
|
41
|
+
const firstItemRef = external_react_namespaceObject.useRef(null);
|
|
42
|
+
const lastScrollTopRef = external_react_namespaceObject.useRef(0);
|
|
43
|
+
const modeRef = external_react_namespaceObject.useRef(autoScroll ? 'following-bottom' : 'free-scrolling');
|
|
44
|
+
const messageElementsRef = external_react_namespaceObject.useRef(new Map());
|
|
45
|
+
const pendingScrollToMessageRef = external_react_namespaceObject.useRef(null);
|
|
46
|
+
const prependRestoreRef = external_react_namespaceObject.useRef(null);
|
|
47
|
+
const streamingTurnRef = external_react_namespaceObject.useRef(null);
|
|
48
|
+
const scrollPreviousItemPeekRef = external_react_namespaceObject.useRef(scrollPreviousItemPeek);
|
|
49
|
+
const preserveScrollOnPrependRef = external_react_namespaceObject.useRef(true);
|
|
50
|
+
const rootRef = external_react_namespaceObject.useRef(null);
|
|
51
|
+
const scrollMarginRef = external_react_namespaceObject.useRef(scrollMargin);
|
|
52
|
+
const pendingScrollFrameRef = external_react_namespaceObject.useRef(null);
|
|
53
|
+
const spacerGapRef = external_react_namespaceObject.useRef(0);
|
|
54
|
+
const spacerHeightRef = external_react_namespaceObject.useRef(0);
|
|
55
|
+
const spacerRef = external_react_namespaceObject.useRef(null);
|
|
56
|
+
const stateFrameRef = external_react_namespaceObject.useRef(null);
|
|
57
|
+
const pendingDefaultScrollStoreRef = external_react_namespaceObject.useRef(null);
|
|
58
|
+
const stateStoreRef = external_react_namespaceObject.useRef(null);
|
|
59
|
+
const autoscrollingTimeoutRef = external_react_namespaceObject.useRef(null);
|
|
60
|
+
const viewportRef = external_react_namespaceObject.useRef(null);
|
|
61
|
+
const visibilityFrameRef = external_react_namespaceObject.useRef(null);
|
|
62
|
+
const visibilityObserverRef = external_react_namespaceObject.useRef(null);
|
|
63
|
+
const visibilityStoreRef = external_react_namespaceObject.useRef(null);
|
|
64
|
+
const visibleMessageIdsRef = external_react_namespaceObject.useRef(new Set());
|
|
65
|
+
const handledScrollAnchorsRef = external_react_namespaceObject.useRef(new WeakSet());
|
|
66
|
+
if (null === pendingDefaultScrollStoreRef.current) pendingDefaultScrollStoreRef.current = (0, external_stores_cjs_namespaceObject.createMessageScrollerStore)('end' === defaultScrollPosition || 'last-anchor' === defaultScrollPosition, (current, next)=>current === next);
|
|
67
|
+
if (null === stateStoreRef.current) stateStoreRef.current = (0, external_stores_cjs_namespaceObject.createMessageScrollerStore)(external_types_cjs_namespaceObject.EMPTY_MESSAGE_SCROLLER_SCROLLABLE, external_stores_cjs_namespaceObject.areScrollStatesEqual);
|
|
68
|
+
if (null === visibilityStoreRef.current) visibilityStoreRef.current = (0, external_stores_cjs_namespaceObject.createMessageScrollerVisibilityStore)();
|
|
69
|
+
autoScrollRef.current = autoScroll;
|
|
70
|
+
scrollEdgeThresholdRef.current = scrollEdgeThreshold;
|
|
71
|
+
scrollMarginRef.current = scrollMargin;
|
|
72
|
+
scrollPreviousItemPeekRef.current = scrollPreviousItemPeek;
|
|
73
|
+
return {
|
|
74
|
+
autoScrollRef,
|
|
75
|
+
autoscrollingRef,
|
|
76
|
+
autoscrollingTimeoutRef,
|
|
77
|
+
streamingTurnRef,
|
|
78
|
+
contentRef,
|
|
79
|
+
defaultScrollPositionAppliedRef,
|
|
80
|
+
firstItemRef,
|
|
81
|
+
itemCountRef,
|
|
82
|
+
lastScrollTopRef,
|
|
83
|
+
messageElementsRef,
|
|
84
|
+
modeRef,
|
|
85
|
+
pendingScrollFrameRef,
|
|
86
|
+
pendingScrollToMessageRef,
|
|
87
|
+
prependRestoreRef,
|
|
88
|
+
preserveScrollOnPrependRef,
|
|
89
|
+
pendingDefaultScrollStore: pendingDefaultScrollStoreRef.current,
|
|
90
|
+
rootRef,
|
|
91
|
+
scrollEdgeThresholdRef,
|
|
92
|
+
scrollMarginRef,
|
|
93
|
+
scrollPreviousItemPeekRef,
|
|
94
|
+
spacerGapRef,
|
|
95
|
+
spacerHeightRef,
|
|
96
|
+
spacerRef,
|
|
97
|
+
stateFrameRef,
|
|
98
|
+
stateStore: stateStoreRef.current,
|
|
99
|
+
viewportRef,
|
|
100
|
+
visibilityFrameRef,
|
|
101
|
+
visibilityObserverRef,
|
|
102
|
+
visibilityStore: visibilityStoreRef.current,
|
|
103
|
+
visibleMessageIdsRef,
|
|
104
|
+
handledScrollAnchorsRef
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
function clearPendingDefaultScroll(refs) {
|
|
108
|
+
refs.pendingDefaultScrollStore.setSnapshot(false);
|
|
109
|
+
}
|
|
110
|
+
function markDefaultScrollPositionApplied(refs) {
|
|
111
|
+
refs.defaultScrollPositionAppliedRef.current = true;
|
|
112
|
+
clearPendingDefaultScroll(refs);
|
|
113
|
+
}
|
|
114
|
+
exports.clearPendingDefaultScroll = __webpack_exports__.clearPendingDefaultScroll;
|
|
115
|
+
exports.markDefaultScrollPositionApplied = __webpack_exports__.markDefaultScrollPositionApplied;
|
|
116
|
+
exports.useMessageScrollerRefs = __webpack_exports__.useMessageScrollerRefs;
|
|
117
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
118
|
+
"clearPendingDefaultScroll",
|
|
119
|
+
"markDefaultScrollPositionApplied",
|
|
120
|
+
"useMessageScrollerRefs"
|
|
121
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
122
|
+
Object.defineProperty(exports, '__esModule', {
|
|
123
|
+
value: true
|
|
124
|
+
});
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { MessageScrollerDefaultScrollPosition, MessageScrollerMode, MessageScrollerScrollable, MessageScrollerScrollOptions, MessageScrollerStore, MessageScrollerVisibilityStore } from './types';
|
|
3
|
+
type MessageScrollerRefs = {
|
|
4
|
+
autoScrollRef: React.RefObject<boolean>;
|
|
5
|
+
autoscrollingRef: React.RefObject<boolean>;
|
|
6
|
+
autoscrollingTimeoutRef: React.RefObject<number | null>;
|
|
7
|
+
streamingTurnRef: React.RefObject<HTMLElement | null>;
|
|
8
|
+
contentRef: React.RefObject<HTMLDivElement | null>;
|
|
9
|
+
defaultScrollPositionAppliedRef: React.RefObject<boolean>;
|
|
10
|
+
firstItemRef: React.RefObject<HTMLElement | null>;
|
|
11
|
+
itemCountRef: React.RefObject<number>;
|
|
12
|
+
lastScrollTopRef: React.RefObject<number>;
|
|
13
|
+
messageElementsRef: React.RefObject<Map<string, HTMLElement>>;
|
|
14
|
+
modeRef: React.RefObject<MessageScrollerMode>;
|
|
15
|
+
pendingScrollFrameRef: React.RefObject<number | null>;
|
|
16
|
+
pendingScrollToMessageRef: React.RefObject<{
|
|
17
|
+
messageId: string;
|
|
18
|
+
options?: MessageScrollerScrollOptions;
|
|
19
|
+
} | null>;
|
|
20
|
+
prependRestoreRef: React.RefObject<{
|
|
21
|
+
element: HTMLElement;
|
|
22
|
+
viewportTop: number;
|
|
23
|
+
} | null>;
|
|
24
|
+
preserveScrollOnPrependRef: React.RefObject<boolean>;
|
|
25
|
+
pendingDefaultScrollStore: MessageScrollerStore<boolean>;
|
|
26
|
+
rootRef: React.RefObject<HTMLDivElement | null>;
|
|
27
|
+
scrollEdgeThresholdRef: React.RefObject<number>;
|
|
28
|
+
scrollMarginRef: React.RefObject<number>;
|
|
29
|
+
scrollPreviousItemPeekRef: React.RefObject<number>;
|
|
30
|
+
spacerGapRef: React.RefObject<number>;
|
|
31
|
+
spacerHeightRef: React.RefObject<number>;
|
|
32
|
+
spacerRef: React.RefObject<HTMLDivElement | null>;
|
|
33
|
+
stateFrameRef: React.RefObject<number | null>;
|
|
34
|
+
stateStore: MessageScrollerStore<MessageScrollerScrollable>;
|
|
35
|
+
viewportRef: React.RefObject<HTMLDivElement | null>;
|
|
36
|
+
visibilityFrameRef: React.RefObject<number | null>;
|
|
37
|
+
visibilityObserverRef: React.RefObject<IntersectionObserver | null>;
|
|
38
|
+
visibilityStore: MessageScrollerVisibilityStore;
|
|
39
|
+
visibleMessageIdsRef: React.RefObject<Set<string>>;
|
|
40
|
+
handledScrollAnchorsRef: React.RefObject<WeakSet<HTMLElement>>;
|
|
41
|
+
};
|
|
42
|
+
declare function useMessageScrollerRefs({ autoScroll, defaultScrollPosition, scrollEdgeThreshold, scrollMargin, scrollPreviousItemPeek, }: {
|
|
43
|
+
autoScroll: boolean;
|
|
44
|
+
defaultScrollPosition: MessageScrollerDefaultScrollPosition;
|
|
45
|
+
scrollEdgeThreshold: number;
|
|
46
|
+
scrollMargin: number;
|
|
47
|
+
scrollPreviousItemPeek: number;
|
|
48
|
+
}): MessageScrollerRefs;
|
|
49
|
+
declare function clearPendingDefaultScroll(refs: MessageScrollerRefs): void;
|
|
50
|
+
declare function markDefaultScrollPositionApplied(refs: MessageScrollerRefs): void;
|
|
51
|
+
export { clearPendingDefaultScroll, markDefaultScrollPositionApplied, useMessageScrollerRefs };
|
|
52
|
+
export type { MessageScrollerRefs };
|