diff --git a/packages/chat/src/components/input.tsx b/packages/chat/src/components/input.tsx index 52397ad..dde2ad6 100644 --- a/packages/chat/src/components/input.tsx +++ b/packages/chat/src/components/input.tsx @@ -87,7 +87,7 @@ export default function InputComponent({ >({}); const measurementRefs = React.useRef(new Map()); + const shouldRestoreBottomOnResizeRef = React.useRef(false); const hasValidChatUser = Number.isSafeInteger(userId) && userId > 0; const hasSharedSecret = sharedSecret.length > 0; @@ -225,8 +226,22 @@ export default function Screen() { } const handleResize = () => { + if (scrollRef.current) { + shouldRestoreBottomOnResizeRef.current = + getDistanceFromBottom(scrollRef.current) <= stickyBottomThreshold; + } + requestAnimationFrame(() => { virtualizer.measure(); + + requestAnimationFrame(() => { + if (!scrollRef.current || !shouldRestoreBottomOnResizeRef.current) { + return; + } + + scrollRef.current.scrollTop = scrollRef.current.scrollHeight; + shouldRestoreBottomOnResizeRef.current = false; + }); }); }; @@ -234,7 +249,7 @@ export default function Screen() { return () => { window.removeEventListener("resize", handleResize); }; - }, [virtualizer]); + }, [stickyBottomThreshold, virtualizer]); React.useLayoutEffect(() => { const element = inputBoxRef.current;