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

package/dist/FloatingChat/components/SalesAgentProductCardsCarousel.js

@@ -5,14 +5,15 @@ import { SalesAgentProductCard } from "../../SalesAgentProductCard/SalesAgentPro
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx
-const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts }) => {
+const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts, variant = SalesAgentProductCardVariant.LARGE, isPartialView = false }) => {
 	const finalTheme = resolveTheme(theme);
+	const finalVariant = isPartialView ? SalesAgentProductCardVariant.SMALL : variant;
 	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
 	return /* @__PURE__ */ jsx(Carousel, {
 		hideNavigation,
 		badgeLabel: numberOfProducts && numberOfProducts > 1 ? `${numberOfProducts} Products` : void 0,
 		elements: products.map((product) => /* @__PURE__ */ jsx(SalesAgentProductCard, {
-			variant: SalesAgentProductCardVariant.LARGE,
+			variant: finalVariant,
 			productName: product.productName,
 			currentPrice: product.currentPrice,
 			previousPrice: product.previousPrice,

package/dist/FloatingChat/components/index.cjs

@@ -8,6 +8,7 @@ const require_AgentMessage = require('./AgentMessage.cjs');
 const require_MessageDivider = require('./MessageDivider.cjs');
 const require_ChatMessages = require('./ChatMessages.cjs');
 const require_ScrollToBottomButton = require('./ScrollToBottomButton.cjs');
+const require_ModalSheet = require('./ModalSheet.cjs');
 
 //#region src/components/FloatingChat/components/index.ts
 const FloatingChatComponents = {

package/dist/FloatingChat/components/index.js

@@ -8,6 +8,7 @@ import { AgentMessage } from "./AgentMessage.js";
 import { MessageDivider } from "./MessageDivider.js";
 import { ChatMessages } from "./ChatMessages.js";
 import { ScrollToBottomButton } from "./ScrollToBottomButton.js";
+import { ModalSheet } from "./ModalSheet.js";
 
 //#region src/components/FloatingChat/components/index.ts
 const FloatingChatComponents = {

package/dist/FloatingChat/hooks/useChatSuggestions.cjs

@@ -0,0 +1,25 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/FloatingChat/hooks/useChatSuggestions.ts
+const useChatSuggestions = ({ suggestions, isPendingResponse, isResponseStreaming }) => {
+	const [answerSuggestions, setAnswerSuggestions] = (0, react.useState)([]);
+	const [generalSuggestions, setGeneralSuggestions] = (0, react.useState)([]);
+	const showAnswerSuggestions = answerSuggestions.length > 0 && !isPendingResponse && !isResponseStreaming;
+	(0, react.useEffect)(() => {
+		if (suggestions.length > 0) {
+			setAnswerSuggestions(suggestions.filter((suggestion) => suggestion.isAnswer).map((suggestion) => suggestion.content));
+			setGeneralSuggestions(suggestions.filter((suggestion) => !suggestion.isAnswer).map((suggestion) => suggestion.content));
+		}
+	}, [suggestions]);
+	return {
+		answerSuggestions,
+		generalSuggestions,
+		showAnswerSuggestions,
+		setAnswerSuggestions,
+		setGeneralSuggestions
+	};
+};
+
+//#endregion
+exports.useChatSuggestions = useChatSuggestions;

package/dist/FloatingChat/hooks/useChatSuggestions.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+//#region src/components/FloatingChat/hooks/useChatSuggestions.ts
+const useChatSuggestions = ({ suggestions, isPendingResponse, isResponseStreaming }) => {
+	const [answerSuggestions, setAnswerSuggestions] = useState([]);
+	const [generalSuggestions, setGeneralSuggestions] = useState([]);
+	const showAnswerSuggestions = answerSuggestions.length > 0 && !isPendingResponse && !isResponseStreaming;
+	useEffect(() => {
+		if (suggestions.length > 0) {
+			setAnswerSuggestions(suggestions.filter((suggestion) => suggestion.isAnswer).map((suggestion) => suggestion.content));
+			setGeneralSuggestions(suggestions.filter((suggestion) => !suggestion.isAnswer).map((suggestion) => suggestion.content));
+		}
+	}, [suggestions]);
+	return {
+		answerSuggestions,
+		generalSuggestions,
+		showAnswerSuggestions,
+		setAnswerSuggestions,
+		setGeneralSuggestions
+	};
+};
+
+//#endregion
+export { useChatSuggestions };

package/dist/FloatingChat/hooks/useFilteredChatMessages.cjs

@@ -0,0 +1,24 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let __envive_ai_react_hooks_hooks_MessageFilter = require("@envive-ai/react-hooks/hooks/MessageFilter");
+
+//#region src/components/FloatingChat/hooks/useFilteredChatMessages.ts
+const useFilteredChatMessages = ({ messages, isMobile, currentSnapPercentage, modalSheetControl }) => {
+	const { getFilteredMessages } = (0, __envive_ai_react_hooks_hooks_MessageFilter.useMessageFilter)();
+	const keepMessagesExpanded = !isMobile || isMobile && currentSnapPercentage === 100;
+	const filteredMessages = (0, react.useMemo)(() => getFilteredMessages(messages, keepMessagesExpanded), [
+		getFilteredMessages,
+		messages,
+		keepMessagesExpanded
+	]);
+	const hasFilteredMessages = filteredMessages.length !== messages.length && isMobile;
+	const handlePreviousDiscussions = () => modalSheetControl.current?.jumpToSnap(2);
+	return {
+		filteredMessages,
+		hasFilteredMessages,
+		handlePreviousDiscussions
+	};
+};
+
+//#endregion
+exports.useFilteredChatMessages = useFilteredChatMessages;

package/dist/FloatingChat/hooks/useFilteredChatMessages.js

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { useMessageFilter } from "@envive-ai/react-hooks/hooks/MessageFilter";
+
+//#region src/components/FloatingChat/hooks/useFilteredChatMessages.ts
+const useFilteredChatMessages = ({ messages, isMobile, currentSnapPercentage, modalSheetControl }) => {
+	const { getFilteredMessages } = useMessageFilter();
+	const keepMessagesExpanded = !isMobile || isMobile && currentSnapPercentage === 100;
+	const filteredMessages = useMemo(() => getFilteredMessages(messages, keepMessagesExpanded), [
+		getFilteredMessages,
+		messages,
+		keepMessagesExpanded
+	]);
+	const hasFilteredMessages = filteredMessages.length !== messages.length && isMobile;
+	const handlePreviousDiscussions = () => modalSheetControl.current?.jumpToSnap(2);
+	return {
+		filteredMessages,
+		hasFilteredMessages,
+		handlePreviousDiscussions
+	};
+};
+
+//#endregion
+export { useFilteredChatMessages };

package/dist/FloatingChat/hooks/usePreventScroll.cjs

@@ -0,0 +1,117 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("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 = (0, react.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
+exports.usePreventScroll = usePreventScroll;

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/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 };

package/dist/FloatingChat/hooks/useSnapSetup.cjs

@@ -0,0 +1,59 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
+let react = require("react");
+let framer_motion = require("framer-motion");
+
+//#region src/components/FloatingChat/hooks/useSnapSetup.ts
+const useSnapSetup = ({ isFloatingChatOpen }) => {
+	const maxSwipeableViewHeight = 89;
+	const modalSheetControl = (0, react.useRef)(null);
+	const { viewportWidth } = require_useCheckIsMobile.useCheckIsMobile();
+	const isMobile = viewportWidth !== void 0 && viewportWidth < 512;
+	const shouldAutoExpand = Boolean(isMobile && window?._spiffy?.selectedCustomizeOption);
+	const snaps = shouldAutoExpand ? [43, 100] : [
+		0,
+		43,
+		100
+	];
+	const initialSnap = 1;
+	const [currentSnapPercentage, setCurrentSnapPercentage] = (0, react.useState)(snaps[initialSnap] || 43);
+	const animationKey = (0, framer_motion.useMotionValue)(0);
+	const snap43Percent = 57 / 100 * window.innerHeight;
+	const snap100Percent = 0;
+	const mobileHeaderHeight = (0, framer_motion.useTransform)(animationKey, [snap100Percent, snap43Percent], [56, 0]);
+	const [shouldShowHeader, setShouldShowHeader] = (0, react.useState)(false);
+	const [shouldShowScrolled, setShouldShowScrolled] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		return animationKey.on("change", (value) => {
+			setShouldShowHeader(value < snap43Percent - 10);
+			setShouldShowScrolled(value > snap43Percent);
+		});
+	}, [animationKey, snap43Percent]);
+	const isFullView = isMobile && currentSnapPercentage === 100;
+	const isPartialView = isMobile && currentSnapPercentage >= 0 && currentSnapPercentage <= 43;
+	const handleSnapChange = (snapPercentage) => {
+		setCurrentSnapPercentage(snapPercentage);
+	};
+	return {
+		modalSheetControl,
+		maxSwipeableViewHeight,
+		isOpen: window?._spiffy?.selectedCustomizeOption === "SalesAgent" ? true : Boolean(isFloatingChatOpen),
+		isMobile,
+		snaps,
+		initialSnap,
+		shouldAutoExpand,
+		currentSnapPercentage,
+		handleSnapChange,
+		animationKey,
+		mobileHeaderHeight,
+		snap43Percent,
+		snap100Percent,
+		shouldShowHeader,
+		shouldShowScrolled,
+		isFullView,
+		isPartialView
+	};
+};
+
+//#endregion
+exports.useSnapSetup = useSnapSetup;