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

package/dist/FloatingChat/components/ChatMessages.cjs

@@ -2,8 +2,11 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../tokens/theme/theme.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
+const require_index = require('../../Typography/types/index.cjs');
+const require_Typography = require('../../Typography/Typography.cjs');
+require('../../Typography/index.cjs');
 const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-const require_index = require('../../Message/types/index.cjs');
+const require_index$1 = require('../../Message/types/index.cjs');
 const require_Message = require('../../Message/Message.cjs');
 require('../../Message/index.cjs');
 const require_UserMessage = require('./UserMessage.cjs');
@@ -17,52 +20,67 @@ classnames = require_rolldown_runtime.__toESM(classnames);
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 
 //#region src/components/FloatingChat/components/ChatMessages.tsx
-const ChatMessages = (0, react.forwardRef)(({ theme = require_theme.Theme.GLOBAL_CUSTOM, className, agentName, messages, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer }, ref) => {
+const ChatMessages = (0, react.forwardRef)(({ theme = require_theme.Theme.GLOBAL_CUSTOM, className, agentName, messages, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, isPartialView }, ref) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 		ref,
 		direction: "column",
 		className: (0, classnames.default)("envive-tw-px-4", className),
 		gap: 4,
-		children: [messages.map((message, index) => {
-			if (ignoreFirstModelResponse && index === 0 && message[0].role === __envive_ai_react_hooks_application_models.MessageRole.Assistant) return null;
-			const groupableMessages = require_functions.getGroupableMessages(message);
-			const firstMessageId = message[0]?.id || `message-${index}`;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-				direction: "column",
-				gap: 4,
-				children: [groupableMessages.find(([type]) => type === __envive_ai_react_hooks_application_models.MessageType.Separator) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MessageDivider.MessageDivider, { label: "New Discussion" }, `divider-${firstMessageId}`), groupableMessages.map(([type, content], indexSubMessage) => {
-					const isUser = content[0].role === __envive_ai_react_hooks_application_models.MessageRole.User;
-					const isAssistant = content[0].role === __envive_ai_react_hooks_application_models.MessageRole.Assistant;
-					const previousMessages = indexSubMessage > 0 ? groupableMessages[indexSubMessage - 1][1] : [];
-					const hideAgentName = indexSubMessage > 0 && require_functions.checkIfHideAgentName(previousMessages);
-					const isLastMessageTurn = index === messages.length - 1;
-					if (isUser) {
-						const userMessage = content[0];
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UserMessage.UserMessage, { message: userMessage }, userMessage.id);
-					}
-					if (isAssistant) {
-						const assistantMessages = content;
-						const assistantMessageId = assistantMessages[0]?.id || `agent-${firstMessageId}-${type}-${indexSubMessage}`;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AgentMessage.AgentMessage, {
-							theme: finalTheme,
-							hideAgentName,
-							agentName,
-							type,
-							messages: assistantMessages,
-							isResponseStreaming: isResponseStreaming && isLastMessageTurn,
-							neverShowSingleProductCards,
-							showVerifiedBuyer
-						}, assistantMessageId);
-					}
-					return null;
-				})]
-			}, firstMessageId);
-		}), isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Message.Message, {
-			isLoading: true,
-			agentName,
-			variant: require_index.MessageVariant.AGENT
-		})]
+		children: [
+			hasFilteredMessages && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "envive-tw-w-full envive-tw-cursor-pointer envive-tw-px-4 envive-tw-py-2 envive-tw-text-center",
+				onClick: handlePreviousDiscussions,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+					color: require_index.TypographyColor.TEXT_PRIMARY,
+					variant: require_index.TypographyVariant.B3_RG,
+					className: "hover:envive-tw-underline",
+					children: "View Previous Messages"
+				})
+			}),
+			messages.map((message, index) => {
+				if (ignoreFirstModelResponse && index === 0 && message[0].role === __envive_ai_react_hooks_application_models.MessageRole.Assistant) return null;
+				const groupableMessages = require_functions.getGroupableMessages(message);
+				const firstMessageId = message[0]?.id || `message-${index}`;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+					direction: "column",
+					gap: 4,
+					children: [groupableMessages.find(([type]) => type === __envive_ai_react_hooks_application_models.MessageType.Separator) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MessageDivider.MessageDivider, { label: "New Discussion" }, `divider-${firstMessageId}`), groupableMessages.map(([type, content], indexSubMessage) => {
+						const isUser = content[0].role === __envive_ai_react_hooks_application_models.MessageRole.User;
+						const isAssistant = content[0].role === __envive_ai_react_hooks_application_models.MessageRole.Assistant;
+						const previousMessages = indexSubMessage > 0 ? groupableMessages[indexSubMessage - 1][1] : [];
+						const hideAgentName = indexSubMessage > 0 && require_functions.checkIfHideAgentName(previousMessages);
+						const isLastMessageTurn = index === messages.length - 1;
+						if (isUser) {
+							const userMessage = content[0];
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UserMessage.UserMessage, { message: userMessage }, userMessage.id);
+						}
+						if (isAssistant) {
+							const assistantMessages = content;
+							const assistantMessageId = assistantMessages[0]?.id || `agent-${firstMessageId}-${type}-${indexSubMessage}`;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AgentMessage.AgentMessage, {
+								theme: finalTheme,
+								hideAgentName,
+								agentName,
+								type,
+								messages: assistantMessages,
+								isResponseStreaming: isResponseStreaming && isLastMessageTurn,
+								neverShowSingleProductCards,
+								showVerifiedBuyer,
+								isPartialView
+							}, assistantMessageId);
+						}
+						return null;
+					})]
+				}, firstMessageId);
+			}),
+			isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Message.Message, {
+				isLoading: true,
+				agentName,
+				variant: require_index$1.MessageVariant.AGENT
+			})
+		]
 	});
 });
 ChatMessages.displayName = "ChatMessages";

package/dist/FloatingChat/components/ChatMessages.js

@@ -1,6 +1,9 @@
 import { Theme } from "../../tokens/theme/theme.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
+import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
+import { Typography } from "../../Typography/Typography.js";
+import "../../Typography/index.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
 import { MessageVariant } from "../../Message/types/index.js";
 import { Message } from "../../Message/Message.js";
@@ -15,52 +18,67 @@ import classNames from "classnames";
 import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/FloatingChat/components/ChatMessages.tsx
-const ChatMessages = forwardRef(({ theme = Theme.GLOBAL_CUSTOM, className, agentName, messages, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer }, ref) => {
+const ChatMessages = forwardRef(({ theme = Theme.GLOBAL_CUSTOM, className, agentName, messages, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, isPartialView }, ref) => {
 	const finalTheme = resolveTheme(theme);
 	return /* @__PURE__ */ jsxs(Stack, {
 		ref,
 		direction: "column",
 		className: classNames("envive-tw-px-4", className),
 		gap: 4,
-		children: [messages.map((message, index) => {
-			if (ignoreFirstModelResponse && index === 0 && message[0].role === MessageRole.Assistant) return null;
-			const groupableMessages = getGroupableMessages(message);
-			const firstMessageId = message[0]?.id || `message-${index}`;
-			return /* @__PURE__ */ jsxs(Stack, {
-				direction: "column",
-				gap: 4,
-				children: [groupableMessages.find(([type]) => type === MessageType.Separator) && /* @__PURE__ */ jsx(MessageDivider, { label: "New Discussion" }, `divider-${firstMessageId}`), groupableMessages.map(([type, content], indexSubMessage) => {
-					const isUser = content[0].role === MessageRole.User;
-					const isAssistant = content[0].role === MessageRole.Assistant;
-					const previousMessages = indexSubMessage > 0 ? groupableMessages[indexSubMessage - 1][1] : [];
-					const hideAgentName = indexSubMessage > 0 && checkIfHideAgentName(previousMessages);
-					const isLastMessageTurn = index === messages.length - 1;
-					if (isUser) {
-						const userMessage = content[0];
-						return /* @__PURE__ */ jsx(UserMessage, { message: userMessage }, userMessage.id);
-					}
-					if (isAssistant) {
-						const assistantMessages = content;
-						const assistantMessageId = assistantMessages[0]?.id || `agent-${firstMessageId}-${type}-${indexSubMessage}`;
-						return /* @__PURE__ */ jsx(AgentMessage, {
-							theme: finalTheme,
-							hideAgentName,
-							agentName,
-							type,
-							messages: assistantMessages,
-							isResponseStreaming: isResponseStreaming && isLastMessageTurn,
-							neverShowSingleProductCards,
-							showVerifiedBuyer
-						}, assistantMessageId);
-					}
-					return null;
-				})]
-			}, firstMessageId);
-		}), isLoading && /* @__PURE__ */ jsx(Message, {
-			isLoading: true,
-			agentName,
-			variant: MessageVariant.AGENT
-		})]
+		children: [
+			hasFilteredMessages && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "envive-tw-w-full envive-tw-cursor-pointer envive-tw-px-4 envive-tw-py-2 envive-tw-text-center",
+				onClick: handlePreviousDiscussions,
+				children: /* @__PURE__ */ jsx(Typography, {
+					color: TypographyColor.TEXT_PRIMARY,
+					variant: TypographyVariant.B3_RG,
+					className: "hover:envive-tw-underline",
+					children: "View Previous Messages"
+				})
+			}),
+			messages.map((message, index) => {
+				if (ignoreFirstModelResponse && index === 0 && message[0].role === MessageRole.Assistant) return null;
+				const groupableMessages = getGroupableMessages(message);
+				const firstMessageId = message[0]?.id || `message-${index}`;
+				return /* @__PURE__ */ jsxs(Stack, {
+					direction: "column",
+					gap: 4,
+					children: [groupableMessages.find(([type]) => type === MessageType.Separator) && /* @__PURE__ */ jsx(MessageDivider, { label: "New Discussion" }, `divider-${firstMessageId}`), groupableMessages.map(([type, content], indexSubMessage) => {
+						const isUser = content[0].role === MessageRole.User;
+						const isAssistant = content[0].role === MessageRole.Assistant;
+						const previousMessages = indexSubMessage > 0 ? groupableMessages[indexSubMessage - 1][1] : [];
+						const hideAgentName = indexSubMessage > 0 && checkIfHideAgentName(previousMessages);
+						const isLastMessageTurn = index === messages.length - 1;
+						if (isUser) {
+							const userMessage = content[0];
+							return /* @__PURE__ */ jsx(UserMessage, { message: userMessage }, userMessage.id);
+						}
+						if (isAssistant) {
+							const assistantMessages = content;
+							const assistantMessageId = assistantMessages[0]?.id || `agent-${firstMessageId}-${type}-${indexSubMessage}`;
+							return /* @__PURE__ */ jsx(AgentMessage, {
+								theme: finalTheme,
+								hideAgentName,
+								agentName,
+								type,
+								messages: assistantMessages,
+								isResponseStreaming: isResponseStreaming && isLastMessageTurn,
+								neverShowSingleProductCards,
+								showVerifiedBuyer,
+								isPartialView
+							}, assistantMessageId);
+						}
+						return null;
+					})]
+				}, firstMessageId);
+			}),
+			isLoading && /* @__PURE__ */ jsx(Message, {
+				isLoading: true,
+				agentName,
+				variant: MessageVariant.AGENT
+			})
+		]
 	});
 });
 ChatMessages.displayName = "ChatMessages";

package/dist/FloatingChat/components/Layout.cjs

@@ -19,13 +19,13 @@ const Layout = ({ id, className, style, testId, theme = require_theme.Theme.GLOB
 		id,
 		testId,
 		style,
-		className: (0, classnames.default)("envive-tw-flex envive-tw-h-full envive-tw-w-[512px] envive-tw-flex-col envive-tw-bg-[#FFFFFF]", className),
+		className: (0, classnames.default)("envive-tw-flex envive-tw-h-full envive-tw-w-full envive-tw-max-w-[512px] envive-tw-flex-col envive-tw-bg-[#FFFFFF]", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 			direction: "column",
 			className: "envive-tw-relative envive-tw-h-full envive-tw-overflow-hidden",
 			children: [
 				header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "envive-tw-flex-shrink-0",
+					className: "envive-tw-flex-shrink-0 envive-tw-leading-[0]",
 					children: header
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

package/dist/FloatingChat/components/Layout.js

@@ -17,13 +17,13 @@ const Layout = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, hea
 		id,
 		testId,
 		style,
-		className: classNames("envive-tw-flex envive-tw-h-full envive-tw-w-[512px] envive-tw-flex-col envive-tw-bg-[#FFFFFF]", className),
+		className: classNames("envive-tw-flex envive-tw-h-full envive-tw-w-full envive-tw-max-w-[512px] envive-tw-flex-col envive-tw-bg-[#FFFFFF]", className),
 		children: /* @__PURE__ */ jsxs(Stack, {
 			direction: "column",
 			className: "envive-tw-relative envive-tw-h-full envive-tw-overflow-hidden",
 			children: [
 				header && /* @__PURE__ */ jsx("div", {
-					className: "envive-tw-flex-shrink-0",
+					className: "envive-tw-flex-shrink-0 envive-tw-leading-[0]",
 					children: header
 				}),
 				/* @__PURE__ */ jsx("div", {

package/dist/FloatingChat/components/ModalSheet.cjs

@@ -0,0 +1,184 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useSnapControl = require('../hooks/useSnapControl.cjs');
+const require_usePreventScroll = require('../hooks/usePreventScroll.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region src/components/FloatingChat/components/ModalSheet.tsx
+const BOTTOM_OFFSET = 100;
+const ModalSheet = ({ animationKey, children, open, height, unit, snaps = [], initSnap = 0, handler, animation = {
+	type: "spring",
+	stiffness: 300,
+	damping: 30
+}, controlRef, onClose, onSnap, disableDrag = false }) => {
+	const [layerRef] = (0, framer_motion.useAnimate)();
+	const [containerRef] = (0, framer_motion.useAnimate)();
+	const { gestureRef, isScrollableArea, getScrollParent, getGestureDirection, getScrollDirections } = require_usePreventScroll.usePreventScroll();
+	const onSnapComplete = (currentSnap$1, nextSnap, collapsed) => {
+		if (collapsed) {
+			onClose?.();
+			return;
+		}
+		if (currentSnap$1 !== nextSnap) onSnap?.(nextSnap);
+	};
+	const { scope, animatedY, swipeviewHeightPx, initSnapInPixels, contentHeight, currentSnap, displayOverlay, opacityOverlay, jumpTo, defineNextSnapByPosition, resetControls, getSnapToPixel } = require_useSnapControl.useSnapControl({
+		animationKey,
+		animation,
+		height,
+		unit,
+		snaps,
+		initSnap,
+		overlayOpacity: .5,
+		onSnapComplete
+	});
+	(0, react.useImperativeHandle)(controlRef, () => ({ jumpToSnap: (snapIndex) => {
+		jumpTo(getSnapToPixel(snaps[snapIndex]));
+	} }));
+	const expandToFullView = () => {
+		if (snaps.indexOf(currentSnap) === 1) jumpTo(getSnapToPixel(2));
+	};
+	const notifySnapChanges = (isModalOpen) => {
+		if (isModalOpen) {
+			onSnap?.(currentSnap);
+			return;
+		}
+		const snap = resetControls();
+		onSnap?.(snap);
+	};
+	(0, react.useEffect)(() => {
+		const preventDefault = (event) => event.preventDefault();
+		layerRef?.current?.addEventListener("touchmove", preventDefault, { passive: false });
+		return () => {
+			layerRef?.current?.removeEventListener("touchmove", preventDefault);
+		};
+	}, [layerRef?.current]);
+	(0, react.useEffect)(() => {
+		const preventScroll = (event) => {
+			if (!isScrollableArea(getGestureDirection(event.touches[0].clientX, event.touches[0].clientY))) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+		containerRef?.current?.addEventListener("touchmove", preventScroll, { passive: false });
+		notifySnapChanges(open);
+		return () => {
+			containerRef?.current?.removeEventListener("touchmove", preventScroll);
+		};
+	}, [open]);
+	const handleDragEnd = () => {
+		jumpTo(defineNextSnapByPosition());
+	};
+	const handleTouchStart = (event) => {
+		const scrollableElement = getScrollParent(event.target);
+		const scrollableDirections = getScrollDirections(scrollableElement);
+		const parentScrollableElement = getScrollParent(scrollableElement, true);
+		const parentScrollableDirections = getScrollDirections(parentScrollableElement);
+		const grandparentScrollableElement = getScrollParent(parentScrollableElement, true);
+		const grandparentScrollableDirections = getScrollDirections(grandparentScrollableElement);
+		gestureRef.current = {
+			event: event.touches?.[0],
+			scrollableElements: [
+				{
+					element: scrollableElement,
+					scrollableDirections
+				},
+				{
+					element: parentScrollableElement,
+					scrollableDirections: parentScrollableDirections
+				},
+				{
+					element: grandparentScrollableElement,
+					scrollableDirections: grandparentScrollableDirections
+				}
+			]
+		};
+	};
+	const handleTouchEnd = () => {
+		handleDragEnd();
+		gestureRef.current = {
+			scrollableElements: [],
+			event: null
+		};
+	};
+	const handleContentGesture = (fingerX, fingerY) => {
+		if (!gestureRef.current?.event) return;
+		const pointerDistance = (gestureRef.current?.event?.clientY || 0) - fingerY;
+		const distanceToTravel = getSnapToPixel(currentSnap) - pointerDistance;
+		const gestureDirection = getGestureDirection(fingerX, fingerY);
+		if (!(isScrollableArea(gestureDirection) || gestureDirection !== "down" && currentSnap === 100)) animatedY.set(distanceToTravel);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			ref: layerRef,
+			style: {
+				display: displayOverlay,
+				position: "fixed",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				opacity: opacityOverlay,
+				background: "black"
+			}
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			ref: scope,
+			drag: "y",
+			dragConstraints: {
+				top: 0,
+				bottom: swipeviewHeightPx
+			},
+			initial: { y: swipeviewHeightPx },
+			animate: { y: initSnapInPixels },
+			exit: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			transition: animation,
+			onDragEnd: handleDragEnd,
+			onClick: expandToFullView,
+			style: {
+				y: animatedY,
+				bottom: swipeviewHeightPx,
+				right: 0,
+				position: "fixed",
+				width: "100%",
+				zIndex: 2147483647
+			},
+			children: handler
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			ref: scope,
+			onTouchStart: handleTouchStart,
+			onTouchEnd: handleTouchEnd,
+			onTouchMove: (event) => handleContentGesture(event.touches[0].clientX, event.touches[0].clientY),
+			onPointerMove: disableDrag ? void 0 : (event) => handleContentGesture(event.clientX, event.clientY),
+			initial: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			animate: { y: initSnapInPixels },
+			exit: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			transition: animation,
+			style: {
+				y: animatedY,
+				width: "100%",
+				height: swipeviewHeightPx + BOTTOM_OFFSET,
+				position: "fixed",
+				bottom: -BOTTOM_OFFSET + 1,
+				right: 0,
+				boxSizing: "content-box",
+				zIndex: 2147483646
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+				ref: containerRef,
+				initial: { height: 0 },
+				style: {
+					width: "100%",
+					height: contentHeight,
+					userSelect: "none"
+				},
+				children
+			})
+		})
+	] }) });
+};
+
+//#endregion
+exports.ModalSheet = ModalSheet;

package/dist/FloatingChat/components/ModalSheet.js

@@ -0,0 +1,182 @@
+import { useSnapControl } from "../hooks/useSnapControl.js";
+import { usePreventScroll } from "../hooks/usePreventScroll.js";
+import React, { useEffect, useImperativeHandle } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useAnimate } from "framer-motion";
+
+//#region src/components/FloatingChat/components/ModalSheet.tsx
+const BOTTOM_OFFSET = 100;
+const ModalSheet = ({ animationKey, children, open, height, unit, snaps = [], initSnap = 0, handler, animation = {
+	type: "spring",
+	stiffness: 300,
+	damping: 30
+}, controlRef, onClose, onSnap, disableDrag = false }) => {
+	const [layerRef] = useAnimate();
+	const [containerRef] = useAnimate();
+	const { gestureRef, isScrollableArea, getScrollParent, getGestureDirection, getScrollDirections } = usePreventScroll();
+	const onSnapComplete = (currentSnap$1, nextSnap, collapsed) => {
+		if (collapsed) {
+			onClose?.();
+			return;
+		}
+		if (currentSnap$1 !== nextSnap) onSnap?.(nextSnap);
+	};
+	const { scope, animatedY, swipeviewHeightPx, initSnapInPixels, contentHeight, currentSnap, displayOverlay, opacityOverlay, jumpTo, defineNextSnapByPosition, resetControls, getSnapToPixel } = useSnapControl({
+		animationKey,
+		animation,
+		height,
+		unit,
+		snaps,
+		initSnap,
+		overlayOpacity: .5,
+		onSnapComplete
+	});
+	useImperativeHandle(controlRef, () => ({ jumpToSnap: (snapIndex) => {
+		jumpTo(getSnapToPixel(snaps[snapIndex]));
+	} }));
+	const expandToFullView = () => {
+		if (snaps.indexOf(currentSnap) === 1) jumpTo(getSnapToPixel(2));
+	};
+	const notifySnapChanges = (isModalOpen) => {
+		if (isModalOpen) {
+			onSnap?.(currentSnap);
+			return;
+		}
+		const snap = resetControls();
+		onSnap?.(snap);
+	};
+	useEffect(() => {
+		const preventDefault = (event) => event.preventDefault();
+		layerRef?.current?.addEventListener("touchmove", preventDefault, { passive: false });
+		return () => {
+			layerRef?.current?.removeEventListener("touchmove", preventDefault);
+		};
+	}, [layerRef?.current]);
+	useEffect(() => {
+		const preventScroll = (event) => {
+			if (!isScrollableArea(getGestureDirection(event.touches[0].clientX, event.touches[0].clientY))) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+		containerRef?.current?.addEventListener("touchmove", preventScroll, { passive: false });
+		notifySnapChanges(open);
+		return () => {
+			containerRef?.current?.removeEventListener("touchmove", preventScroll);
+		};
+	}, [open]);
+	const handleDragEnd = () => {
+		jumpTo(defineNextSnapByPosition());
+	};
+	const handleTouchStart = (event) => {
+		const scrollableElement = getScrollParent(event.target);
+		const scrollableDirections = getScrollDirections(scrollableElement);
+		const parentScrollableElement = getScrollParent(scrollableElement, true);
+		const parentScrollableDirections = getScrollDirections(parentScrollableElement);
+		const grandparentScrollableElement = getScrollParent(parentScrollableElement, true);
+		const grandparentScrollableDirections = getScrollDirections(grandparentScrollableElement);
+		gestureRef.current = {
+			event: event.touches?.[0],
+			scrollableElements: [
+				{
+					element: scrollableElement,
+					scrollableDirections
+				},
+				{
+					element: parentScrollableElement,
+					scrollableDirections: parentScrollableDirections
+				},
+				{
+					element: grandparentScrollableElement,
+					scrollableDirections: grandparentScrollableDirections
+				}
+			]
+		};
+	};
+	const handleTouchEnd = () => {
+		handleDragEnd();
+		gestureRef.current = {
+			scrollableElements: [],
+			event: null
+		};
+	};
+	const handleContentGesture = (fingerX, fingerY) => {
+		if (!gestureRef.current?.event) return;
+		const pointerDistance = (gestureRef.current?.event?.clientY || 0) - fingerY;
+		const distanceToTravel = getSnapToPixel(currentSnap) - pointerDistance;
+		const gestureDirection = getGestureDirection(fingerX, fingerY);
+		if (!(isScrollableArea(gestureDirection) || gestureDirection !== "down" && currentSnap === 100)) animatedY.set(distanceToTravel);
+	};
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(motion.div, {
+			ref: layerRef,
+			style: {
+				display: displayOverlay,
+				position: "fixed",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				opacity: opacityOverlay,
+				background: "black"
+			}
+		}),
+		/* @__PURE__ */ jsx(motion.div, {
+			ref: scope,
+			drag: "y",
+			dragConstraints: {
+				top: 0,
+				bottom: swipeviewHeightPx
+			},
+			initial: { y: swipeviewHeightPx },
+			animate: { y: initSnapInPixels },
+			exit: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			transition: animation,
+			onDragEnd: handleDragEnd,
+			onClick: expandToFullView,
+			style: {
+				y: animatedY,
+				bottom: swipeviewHeightPx,
+				right: 0,
+				position: "fixed",
+				width: "100%",
+				zIndex: 2147483647
+			},
+			children: handler
+		}),
+		/* @__PURE__ */ jsx(motion.div, {
+			ref: scope,
+			onTouchStart: handleTouchStart,
+			onTouchEnd: handleTouchEnd,
+			onTouchMove: (event) => handleContentGesture(event.touches[0].clientX, event.touches[0].clientY),
+			onPointerMove: disableDrag ? void 0 : (event) => handleContentGesture(event.clientX, event.clientY),
+			initial: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			animate: { y: initSnapInPixels },
+			exit: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			transition: animation,
+			style: {
+				y: animatedY,
+				width: "100%",
+				height: swipeviewHeightPx + BOTTOM_OFFSET,
+				position: "fixed",
+				bottom: -BOTTOM_OFFSET + 1,
+				right: 0,
+				boxSizing: "content-box",
+				zIndex: 2147483646
+			},
+			children: /* @__PURE__ */ jsx(motion.div, {
+				ref: containerRef,
+				initial: { height: 0 },
+				style: {
+					width: "100%",
+					height: contentHeight,
+					userSelect: "none"
+				},
+				children
+			})
+		})
+	] }) });
+};
+
+//#endregion
+export { ModalSheet };

package/dist/FloatingChat/components/SalesAgentProductCardsCarousel.cjs

@@ -6,14 +6,15 @@ const require_SalesAgentProductCard = require('../../SalesAgentProductCard/Sales
 let react_jsx_runtime = require("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 = require_types.SalesAgentProductCardVariant.LARGE, isPartialView = false }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
+	const finalVariant = isPartialView ? require_types.SalesAgentProductCardVariant.SMALL : variant;
 	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Carousel.Carousel, {
 		hideNavigation,
 		badgeLabel: numberOfProducts && numberOfProducts > 1 ? `${numberOfProducts} Products` : void 0,
 		elements: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SalesAgentProductCard.SalesAgentProductCard, {
-			variant: require_types.SalesAgentProductCardVariant.LARGE,
+			variant: finalVariant,
 			productName: product.productName,
 			currentPrice: product.currentPrice,
 			previousPrice: product.previousPrice,