All files / src/components/chat/chat-view/utils scrollUtils.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Utility functions for scroll behavior and management
 */
 
import debounce from "debounce"
import { VirtuosoHandle } from "react-virtuoso"
 
/**
 * Create a debounced smooth scroll function
 */
export function createSmoothScrollToBottom(virtuosoRef: React.RefObject<VirtuosoHandle>) {
	return debounce(
		() => {
			virtuosoRef.current?.scrollTo({
				top: Number.MAX_SAFE_INTEGER,
				behavior: "smooth",
			})
		},
		10,
		{ immediate: true },
	)
}
 
/**
 * Scroll to bottom with auto behavior
 */
export function scrollToBottomAuto(virtuosoRef: React.RefObject<VirtuosoHandle>) {
	virtuosoRef.current?.scrollTo({
		top: Number.MAX_SAFE_INTEGER,
		behavior: "auto", // instant causes crash
	})
}
 
/**
 * Handle wheel events to detect user scroll
 */
export function createWheelHandler(
	scrollContainerRef: React.RefObject<HTMLDivElement>,
	disableAutoScrollRef: React.MutableRefObject<boolean>,
) {
	return (event: Event) => {
		const wheelEvent = event as WheelEvent
		if (wheelEvent.deltaY && wheelEvent.deltaY < 0) {
			if (scrollContainerRef.current?.contains(wheelEvent.target as Node)) {
				// user scrolled up
				disableAutoScrollRef.current = true
			}
		}
	}
}
 
/**
 * Constants for scroll behavior
 */
export const SCROLL_CONSTANTS = {
	AT_BOTTOM_THRESHOLD: 10,
	VIEWPORT_INCREASE_TOP: 3_000,
	VIEWPORT_INCREASE_BOTTOM: Number.MAX_SAFE_INTEGER,
	FOOTER_HEIGHT: 5,
} as const