@envive-ai/react-toolkit-v3 0.3.6 → 0.3.8

package/dist/FloatingChat/hooks/usePreventScroll.js

@@ -0,0 +1,116 @@
+import { useRef } from "react";
+
+//#region src/components/FloatingChat/hooks/usePreventScroll.ts
+/**
+* Prevent the body element from scrolling when a modal (partial view) is open.
+*
+* @returns
+*/
+const usePreventScroll = () => {
+	const gestureRef = useRef(null);
+	/**
+	* Calculate the angle of a user gesture (grab/drop).
+	*
+	* @param startX
+	* @param startY
+	* @param endX
+	* @param endY
+	* @returns
+	*/
+	const calculateAngle = (startX, startY, endX, endY) => {
+		const deltaX = endX - startX;
+		const deltaY = endY - startY;
+		return (Math.atan2(deltaY, deltaX) * (180 / Math.PI) + 360) % 360;
+	};
+	/**
+	* Test if an element has scrollable capabilities.
+	*
+	* @param node
+	* @returns
+	*/
+	const isScrollable = (node) => {
+		const style = window.getComputedStyle(node);
+		return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+	};
+	/**
+	* Find the parent node that has scrollable capabilities.
+	*
+	* @param node
+	* @returns
+	*/
+	const getScrollParent = (node, ignoreCurrentNode = false) => {
+		let parentNode = ignoreCurrentNode ? node?.parentElement : node;
+		if (!parentNode) return null;
+		if (isScrollable(parentNode)) return parentNode;
+		while (parentNode && !isScrollable(parentNode)) parentNode = parentNode.parentElement;
+		if (!parentNode && isScrollable(document.body)) return document.body;
+		return parentNode || document.scrollingElement || document.documentElement;
+	};
+	/**
+	* Get the scrollable directions an element can scroll.
+	*
+	* @returns
+	*/
+	const getScrollDirections = (scrollableElement) => {
+		const horizontalScroll = (scrollableElement?.scrollWidth || 0) > (scrollableElement?.clientWidth || 0);
+		const verticalScroll = (scrollableElement?.scrollHeight || 0) > (scrollableElement?.clientHeight || 0);
+		const scrollDirections = [];
+		if (horizontalScroll) scrollDirections.push("horizontal");
+		if (verticalScroll) scrollDirections.push("vertical");
+		return scrollDirections;
+	};
+	/**
+	* Determine the direction of a gesture event based on the angle of a grab/drop event.
+	*
+	* @param fingerX
+	* @param fingerY
+	* @returns
+	*/
+	const getGestureDirection = (fingerX, fingerY) => {
+		const directionAngle = calculateAngle(gestureRef?.current?.event?.clientX || 0, gestureRef?.current?.event?.clientY || 0, fingerX, fingerY);
+		if (directionAngle < 45 || directionAngle > 315) return "right";
+		if (directionAngle > 45 && directionAngle < 135) return "down";
+		if (directionAngle > 135 && directionAngle < 225) return "left";
+		return "up";
+	};
+	/**
+	* Determine whether the direction of the gesture can scroll the element in context.
+	*
+	* @param param0
+	* @param direction
+	* @returns
+	*/
+	const isScrollDirectionAllowed = ({ element, scrollableDirections }, direction) => {
+		if (element?.tagName === "BODY" || element?.tagName === "HTML" || scrollableDirections?.length === 0) return false;
+		const { clientHeight = 0, clientWidth = 0, scrollHeight = 0, scrollWidth = 0, scrollTop = 0, scrollLeft = 0 } = element || {};
+		const atTop = scrollTop === 0;
+		const atLeft = scrollLeft === 0;
+		const atBottom = 100 / scrollHeight * (scrollTop + clientHeight) > 99.9;
+		const atRight = 100 / scrollWidth * (scrollLeft + clientWidth) > 99.9;
+		const verticalScrollBlocked = atBottom && direction === "up" || atTop && direction === "down" || direction === "left" || direction === "right";
+		if (scrollableDirections?.includes("vertical") && verticalScrollBlocked) return false;
+		const horizontalScrollBlocked = atRight && direction === "left" || atLeft && direction === "right" || direction === "up" || direction === "down";
+		if (scrollableDirections?.includes("horizontal") && horizontalScrollBlocked) return false;
+		return true;
+	};
+	/**
+	* Test if the selected scrollable element can scroll in the direction of the grab/drop event.
+	*
+	* @param direction
+	* @returns
+	*/
+	const isScrollableArea = (direction) => {
+		const { scrollableElements } = gestureRef.current || {};
+		return scrollableElements?.some((el) => isScrollDirectionAllowed(el, direction));
+	};
+	return {
+		gestureRef,
+		getScrollParent,
+		isScrollableArea,
+		getGestureDirection,
+		getScrollDirections
+	};
+};
+
+//#endregion
+export { usePreventScroll };

package/dist/FloatingChat/hooks/useScrollToBottom.cjs

@@ -2,8 +2,15 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 let react = require("react");
 
 //#region src/components/FloatingChat/hooks/useScrollToBottom.ts
-const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30 }) => {
+const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30, useFloatingLayout = false, footerHeight = 120, isOpen = true }) => {
 	const [showScrollButton, setShowScrollButton] = (0, react.useState)(false);
+	const [isFloatingLayout, setIsFloatingLayout] = (0, react.useState)(false);
+	const isTransitioningLayoutRef = (0, react.useRef)(false);
+	const lastScrollTopRef = (0, react.useRef)(0);
+	const scrollDirectionRef = (0, react.useRef)(null);
+	const isInitialMountRef = (0, react.useRef)(true);
+	const previousIsOpenRef = (0, react.useRef)(isOpen);
+	const blockLayoutChangeRef = (0, react.useRef)(false);
 	const getScrollableContainer = (0, react.useCallback)(() => {
 		return messagesRef.current?.closest(".envive-tw-overflow-y-auto");
 	}, [messagesRef]);
@@ -13,36 +20,127 @@ const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThr
 		const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
 		return scrollHeight - scrollTop - clientHeight < scrollThreshold;
 	}, [getScrollableContainer, scrollThreshold]);
+	(0, react.useEffect)(() => {
+		if (isOpen && !previousIsOpenRef.current) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			isTransitioningLayoutRef.current = false;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+		previousIsOpenRef.current = isOpen;
+	}, [isOpen]);
+	(0, react.useEffect)(() => {
+		if (useFloatingLayout) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+	}, [useFloatingLayout]);
+	(0, react.useEffect)(() => {
+		if (!useFloatingLayout) return;
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return;
+		const shouldBeFloating = showScrollButton;
+		if (shouldBeFloating !== isFloatingLayout && !isTransitioningLayoutRef.current) {
+			isTransitioningLayoutRef.current = true;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			const scrollFromBottom = scrollHeight - scrollTop - clientHeight;
+			setIsFloatingLayout(shouldBeFloating);
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					setTimeout(() => {
+						const newScrollTop = scrollableContainer.scrollHeight - scrollableContainer.clientHeight - scrollFromBottom;
+						if (scrollFromBottom > scrollThreshold) scrollableContainer.scrollTop = Math.max(0, newScrollTop);
+						setTimeout(() => {
+							isTransitioningLayoutRef.current = false;
+						}, 250);
+					}, 50);
+				});
+			});
+		}
+	}, [
+		showScrollButton,
+		isFloatingLayout,
+		getScrollableContainer,
+		useFloatingLayout,
+		scrollThreshold
+	]);
 	(0, react.useEffect)(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (scrollableContainer) requestAnimationFrame(() => {
 			scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
 			setShowScrollButton(false);
+			if (useFloatingLayout) {
+				setIsFloatingLayout(false);
+				isInitialMountRef.current = true;
+			}
 		});
-	}, [...autoScrollDependencies, getScrollableContainer]);
+	}, [
+		...autoScrollDependencies,
+		getScrollableContainer,
+		useFloatingLayout
+	]);
 	(0, react.useEffect)(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (!scrollableContainer) return;
 		const handleScroll = () => {
-			setShowScrollButton(!checkIfScrolledToBottom());
+			if (isTransitioningLayoutRef.current || blockLayoutChangeRef.current) return;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			if (scrollTop > lastScrollTopRef.current) scrollDirectionRef.current = "down";
+			else if (scrollTop < lastScrollTopRef.current) scrollDirectionRef.current = "up";
+			lastScrollTopRef.current = scrollTop;
+			const contentBelowViewport = scrollHeight - scrollTop - clientHeight;
+			const upThreshold = scrollThreshold * 2;
+			if (showScrollButton) {
+				if (scrollDirectionRef.current === "down") {
+					if (contentBelowViewport <= footerHeight + 40) setShowScrollButton(false);
+				} else if (contentBelowViewport <= scrollThreshold) setShowScrollButton(false);
+			} else if (contentBelowViewport > upThreshold) setShowScrollButton(true);
 		};
 		scrollableContainer.addEventListener("scroll", handleScroll);
-		handleScroll();
+		if (!isInitialMountRef.current) handleScroll();
+		else isInitialMountRef.current = false;
 		return () => {
 			scrollableContainer.removeEventListener("scroll", handleScroll);
 		};
-	}, [getScrollableContainer, checkIfScrolledToBottom]);
+	}, [
+		getScrollableContainer,
+		checkIfScrolledToBottom,
+		scrollThreshold,
+		showScrollButton,
+		footerHeight
+	]);
 	return {
 		showScrollButton,
 		scrollToBottom: (0, react.useCallback)(() => {
 			const scrollableContainer = getScrollableContainer();
-			if (scrollableContainer) requestAnimationFrame(() => {
-				scrollableContainer.scrollTo({
-					top: scrollableContainer.scrollHeight,
-					behavior: "smooth"
+			if (scrollableContainer) {
+				blockLayoutChangeRef.current = true;
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						const targetScroll = scrollableContainer.scrollHeight;
+						scrollableContainer.scrollTo({
+							top: targetScroll,
+							behavior: "smooth"
+						});
+						setTimeout(() => {
+							blockLayoutChangeRef.current = false;
+							setShowScrollButton(false);
+							if (useFloatingLayout) setIsFloatingLayout(false);
+						}, 500);
+					});
 				});
-			});
-		}, [getScrollableContainer])
+			}
+		}, [getScrollableContainer, useFloatingLayout]),
+		isFloatingLayout: useFloatingLayout ? isFloatingLayout : false
 	};
 };
 

package/dist/FloatingChat/hooks/useScrollToBottom.js

@@ -1,8 +1,15 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/components/FloatingChat/hooks/useScrollToBottom.ts
-const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30 }) => {
+const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30, useFloatingLayout = false, footerHeight = 120, isOpen = true }) => {
 	const [showScrollButton, setShowScrollButton] = useState(false);
+	const [isFloatingLayout, setIsFloatingLayout] = useState(false);
+	const isTransitioningLayoutRef = useRef(false);
+	const lastScrollTopRef = useRef(0);
+	const scrollDirectionRef = useRef(null);
+	const isInitialMountRef = useRef(true);
+	const previousIsOpenRef = useRef(isOpen);
+	const blockLayoutChangeRef = useRef(false);
 	const getScrollableContainer = useCallback(() => {
 		return messagesRef.current?.closest(".envive-tw-overflow-y-auto");
 	}, [messagesRef]);
@@ -12,36 +19,127 @@ const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThr
 		const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
 		return scrollHeight - scrollTop - clientHeight < scrollThreshold;
 	}, [getScrollableContainer, scrollThreshold]);
+	useEffect(() => {
+		if (isOpen && !previousIsOpenRef.current) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			isTransitioningLayoutRef.current = false;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+		previousIsOpenRef.current = isOpen;
+	}, [isOpen]);
+	useEffect(() => {
+		if (useFloatingLayout) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+	}, [useFloatingLayout]);
+	useEffect(() => {
+		if (!useFloatingLayout) return;
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return;
+		const shouldBeFloating = showScrollButton;
+		if (shouldBeFloating !== isFloatingLayout && !isTransitioningLayoutRef.current) {
+			isTransitioningLayoutRef.current = true;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			const scrollFromBottom = scrollHeight - scrollTop - clientHeight;
+			setIsFloatingLayout(shouldBeFloating);
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					setTimeout(() => {
+						const newScrollTop = scrollableContainer.scrollHeight - scrollableContainer.clientHeight - scrollFromBottom;
+						if (scrollFromBottom > scrollThreshold) scrollableContainer.scrollTop = Math.max(0, newScrollTop);
+						setTimeout(() => {
+							isTransitioningLayoutRef.current = false;
+						}, 250);
+					}, 50);
+				});
+			});
+		}
+	}, [
+		showScrollButton,
+		isFloatingLayout,
+		getScrollableContainer,
+		useFloatingLayout,
+		scrollThreshold
+	]);
 	useEffect(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (scrollableContainer) requestAnimationFrame(() => {
 			scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
 			setShowScrollButton(false);
+			if (useFloatingLayout) {
+				setIsFloatingLayout(false);
+				isInitialMountRef.current = true;
+			}
 		});
-	}, [...autoScrollDependencies, getScrollableContainer]);
+	}, [
+		...autoScrollDependencies,
+		getScrollableContainer,
+		useFloatingLayout
+	]);
 	useEffect(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (!scrollableContainer) return;
 		const handleScroll = () => {
-			setShowScrollButton(!checkIfScrolledToBottom());
+			if (isTransitioningLayoutRef.current || blockLayoutChangeRef.current) return;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			if (scrollTop > lastScrollTopRef.current) scrollDirectionRef.current = "down";
+			else if (scrollTop < lastScrollTopRef.current) scrollDirectionRef.current = "up";
+			lastScrollTopRef.current = scrollTop;
+			const contentBelowViewport = scrollHeight - scrollTop - clientHeight;
+			const upThreshold = scrollThreshold * 2;
+			if (showScrollButton) {
+				if (scrollDirectionRef.current === "down") {
+					if (contentBelowViewport <= footerHeight + 40) setShowScrollButton(false);
+				} else if (contentBelowViewport <= scrollThreshold) setShowScrollButton(false);
+			} else if (contentBelowViewport > upThreshold) setShowScrollButton(true);
 		};
 		scrollableContainer.addEventListener("scroll", handleScroll);
-		handleScroll();
+		if (!isInitialMountRef.current) handleScroll();
+		else isInitialMountRef.current = false;
 		return () => {
 			scrollableContainer.removeEventListener("scroll", handleScroll);
 		};
-	}, [getScrollableContainer, checkIfScrolledToBottom]);
+	}, [
+		getScrollableContainer,
+		checkIfScrolledToBottom,
+		scrollThreshold,
+		showScrollButton,
+		footerHeight
+	]);
 	return {
 		showScrollButton,
 		scrollToBottom: useCallback(() => {
 			const scrollableContainer = getScrollableContainer();
-			if (scrollableContainer) requestAnimationFrame(() => {
-				scrollableContainer.scrollTo({
-					top: scrollableContainer.scrollHeight,
-					behavior: "smooth"
+			if (scrollableContainer) {
+				blockLayoutChangeRef.current = true;
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						const targetScroll = scrollableContainer.scrollHeight;
+						scrollableContainer.scrollTo({
+							top: targetScroll,
+							behavior: "smooth"
+						});
+						setTimeout(() => {
+							blockLayoutChangeRef.current = false;
+							setShowScrollButton(false);
+							if (useFloatingLayout) setIsFloatingLayout(false);
+						}, 500);
+					});
 				});
-			});
-		}, [getScrollableContainer])
+			}
+		}, [getScrollableContainer, useFloatingLayout]),
+		isFloatingLayout: useFloatingLayout ? isFloatingLayout : false
 	};
 };
 

package/dist/FloatingChat/hooks/useSnapCalculator.cjs

@@ -0,0 +1,37 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/FloatingChat/hooks/useSnapCalculator.ts
+let Unit = /* @__PURE__ */ function(Unit$1) {
+	Unit$1["PERCENT"] = "percent";
+	Unit$1["PIXEL"] = "pixel";
+	return Unit$1;
+}({});
+const useSnapCalculator = (snaps, maxHeight, unit) => {
+	const viewportHeightPx = document.documentElement.clientHeight;
+	const swipeviewHeightPx = unit === Unit.PERCENT ? Math.floor(viewportHeightPx * (maxHeight / 100)) : maxHeight;
+	const snapsToPixels = (0, react.useMemo)(() => snaps?.map((snap) => Math.abs((unit === Unit.PERCENT ? Math.floor(swipeviewHeightPx * (snap / 100)) : snap) - swipeviewHeightPx)), [
+		swipeviewHeightPx,
+		unit,
+		snaps
+	]);
+	const getPixelToSnap = (pixels) => {
+		const snapIdx = snapsToPixels?.indexOf(pixels) || 0;
+		return snaps?.[snapIdx] || 0;
+	};
+	const getSnapToPixel = (snap) => {
+		const snapIdx = snaps?.indexOf(snap) || 0;
+		return snapsToPixels?.[snapIdx] || 0;
+	};
+	return {
+		viewportHeightPx,
+		snapsToPixels,
+		swipeviewHeightPx,
+		getPixelToSnap,
+		getSnapToPixel
+	};
+};
+
+//#endregion
+exports.Unit = Unit;
+exports.useSnapCalculator = useSnapCalculator;

package/dist/FloatingChat/hooks/useSnapCalculator.js

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+
+//#region src/components/FloatingChat/hooks/useSnapCalculator.ts
+let Unit = /* @__PURE__ */ function(Unit$1) {
+	Unit$1["PERCENT"] = "percent";
+	Unit$1["PIXEL"] = "pixel";
+	return Unit$1;
+}({});
+const useSnapCalculator = (snaps, maxHeight, unit) => {
+	const viewportHeightPx = document.documentElement.clientHeight;
+	const swipeviewHeightPx = unit === Unit.PERCENT ? Math.floor(viewportHeightPx * (maxHeight / 100)) : maxHeight;
+	const snapsToPixels = useMemo(() => snaps?.map((snap) => Math.abs((unit === Unit.PERCENT ? Math.floor(swipeviewHeightPx * (snap / 100)) : snap) - swipeviewHeightPx)), [
+		swipeviewHeightPx,
+		unit,
+		snaps
+	]);
+	const getPixelToSnap = (pixels) => {
+		const snapIdx = snapsToPixels?.indexOf(pixels) || 0;
+		return snaps?.[snapIdx] || 0;
+	};
+	const getSnapToPixel = (snap) => {
+		const snapIdx = snaps?.indexOf(snap) || 0;
+		return snapsToPixels?.[snapIdx] || 0;
+	};
+	return {
+		viewportHeightPx,
+		snapsToPixels,
+		swipeviewHeightPx,
+		getPixelToSnap,
+		getSnapToPixel
+	};
+};
+
+//#endregion
+export { Unit, useSnapCalculator };

package/dist/FloatingChat/hooks/useSnapControl.cjs

@@ -0,0 +1,82 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useSnapCalculator = require('./useSnapCalculator.cjs');
+let react = require("react");
+let framer_motion = require("framer-motion");
+
+//#region src/components/FloatingChat/hooks/useSnapControl.ts
+const MIDDLE_SNAP_OFFSET = 5;
+const useSnapControl = ({ animationKey, animation, height, unit, snaps, initSnap, onSnapComplete, overlayOpacity }) => {
+	const [scope, animate] = (0, framer_motion.useAnimate)();
+	const defaultAnimationKey = (0, framer_motion.useMotionValue)(-1);
+	const animatedY = animationKey || defaultAnimationKey;
+	const { swipeviewHeightPx, snapsToPixels, getPixelToSnap, getSnapToPixel } = require_useSnapCalculator.useSnapCalculator(snaps, height, unit);
+	const contentHeight = (0, framer_motion.useTransform)(animatedY, [0, swipeviewHeightPx], [swipeviewHeightPx, 0]);
+	const snapOverlayReference = (0, react.useMemo)(() => [
+		getSnapToPixel(snaps[0]),
+		getSnapToPixel(snaps[1]) - MIDDLE_SNAP_OFFSET,
+		getSnapToPixel(snaps[2])
+	], [getSnapToPixel, snaps]);
+	const displayOverlay = (0, framer_motion.useTransform)(() => animatedY.get() === -1 ? "none" : (0, framer_motion.transform)(animatedY.get(), snapOverlayReference, [
+		"none",
+		"none",
+		"block"
+	]));
+	const opacityOverlay = (0, framer_motion.useTransform)(() => animatedY.get() === -1 ? 0 : (0, framer_motion.transform)(animatedY.get(), snapOverlayReference, [
+		0,
+		0,
+		overlayOpacity
+	]));
+	const initSnapInPixels = snapsToPixels?.[initSnap];
+	const getInitSnap = () => snaps?.[initSnap];
+	const [currentSnap, setCurrentSnap] = (0, react.useState)(getInitSnap());
+	const defineNextSnapByPosition = () => {
+		const currentY = animatedY.get();
+		let closestSnap = snapsToPixels[0];
+		let minDistance = Math.abs(currentY - snapsToPixels[0]);
+		snapsToPixels.forEach((snapPx) => {
+			const distance = Math.abs(currentY - snapPx);
+			if (distance < minDistance) {
+				minDistance = distance;
+				closestSnap = snapPx;
+			}
+		});
+		return closestSnap;
+	};
+	const jumpTo = (snapPx) => {
+		const collapsed = snapPx === swipeviewHeightPx;
+		const nextSnap = getPixelToSnap(snapPx);
+		animate(scope.current, { y: snapPx }, {
+			...animation,
+			onComplete: () => {
+				onSnapComplete(currentSnap, nextSnap, collapsed);
+				setCurrentSnap(nextSnap);
+			}
+		});
+		return {
+			nextSnap,
+			collapsed
+		};
+	};
+	const resetControls = () => {
+		setCurrentSnap(getInitSnap());
+		return 0;
+	};
+	return {
+		scope,
+		animatedY,
+		animate,
+		swipeviewHeightPx,
+		initSnapInPixels,
+		contentHeight,
+		currentSnap,
+		displayOverlay,
+		opacityOverlay,
+		getSnapToPixel,
+		jumpTo,
+		defineNextSnapByPosition,
+		resetControls
+	};
+};
+
+//#endregion
+exports.useSnapControl = useSnapControl;

package/dist/FloatingChat/hooks/useSnapControl.js

@@ -0,0 +1,81 @@
+import { useSnapCalculator } from "./useSnapCalculator.js";
+import { useMemo, useState } from "react";
+import { transform, useAnimate, useMotionValue, useTransform } from "framer-motion";
+
+//#region src/components/FloatingChat/hooks/useSnapControl.ts
+const MIDDLE_SNAP_OFFSET = 5;
+const useSnapControl = ({ animationKey, animation, height, unit, snaps, initSnap, onSnapComplete, overlayOpacity }) => {
+	const [scope, animate] = useAnimate();
+	const defaultAnimationKey = useMotionValue(-1);
+	const animatedY = animationKey || defaultAnimationKey;
+	const { swipeviewHeightPx, snapsToPixels, getPixelToSnap, getSnapToPixel } = useSnapCalculator(snaps, height, unit);
+	const contentHeight = useTransform(animatedY, [0, swipeviewHeightPx], [swipeviewHeightPx, 0]);
+	const snapOverlayReference = useMemo(() => [
+		getSnapToPixel(snaps[0]),
+		getSnapToPixel(snaps[1]) - MIDDLE_SNAP_OFFSET,
+		getSnapToPixel(snaps[2])
+	], [getSnapToPixel, snaps]);
+	const displayOverlay = useTransform(() => animatedY.get() === -1 ? "none" : transform(animatedY.get(), snapOverlayReference, [
+		"none",
+		"none",
+		"block"
+	]));
+	const opacityOverlay = useTransform(() => animatedY.get() === -1 ? 0 : transform(animatedY.get(), snapOverlayReference, [
+		0,
+		0,
+		overlayOpacity
+	]));
+	const initSnapInPixels = snapsToPixels?.[initSnap];
+	const getInitSnap = () => snaps?.[initSnap];
+	const [currentSnap, setCurrentSnap] = useState(getInitSnap());
+	const defineNextSnapByPosition = () => {
+		const currentY = animatedY.get();
+		let closestSnap = snapsToPixels[0];
+		let minDistance = Math.abs(currentY - snapsToPixels[0]);
+		snapsToPixels.forEach((snapPx) => {
+			const distance = Math.abs(currentY - snapPx);
+			if (distance < minDistance) {
+				minDistance = distance;
+				closestSnap = snapPx;
+			}
+		});
+		return closestSnap;
+	};
+	const jumpTo = (snapPx) => {
+		const collapsed = snapPx === swipeviewHeightPx;
+		const nextSnap = getPixelToSnap(snapPx);
+		animate(scope.current, { y: snapPx }, {
+			...animation,
+			onComplete: () => {
+				onSnapComplete(currentSnap, nextSnap, collapsed);
+				setCurrentSnap(nextSnap);
+			}
+		});
+		return {
+			nextSnap,
+			collapsed
+		};
+	};
+	const resetControls = () => {
+		setCurrentSnap(getInitSnap());
+		return 0;
+	};
+	return {
+		scope,
+		animatedY,
+		animate,
+		swipeviewHeightPx,
+		initSnapInPixels,
+		contentHeight,
+		currentSnap,
+		displayOverlay,
+		opacityOverlay,
+		getSnapToPixel,
+		jumpTo,
+		defineNextSnapByPosition,
+		resetControls
+	};
+};
+
+//#endregion
+export { useSnapControl };