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

package/dist/DocumentRetrievalCard/types/index.d.cts

@@ -1,4 +1,4 @@
-import { Theme } from "../../components-v3/tokens/theme/theme.cjs";
+import { Theme } from "../../tokens/theme/theme.cjs";
 
 //#region src/components/DocumentRetrievalCard/types/index.d.ts
 

package/dist/DocumentRetrievalCard/types/index.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../../components-v3/tokens/theme/theme.js";
+import { Theme } from "../../tokens/theme/theme.js";
 
 //#region src/components/DocumentRetrievalCard/types/index.d.ts
 

package/dist/DocumentRetrievalCard/utils/functions.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../components-v3/tokens/theme/theme.cjs');
+const require_theme = require('../../tokens/theme/theme.cjs');
 const require_index = require('../types/index.cjs');
 
 //#region src/components/DocumentRetrievalCard/utils/functions.ts

package/dist/DocumentRetrievalCard/utils/functions.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../components-v3/tokens/theme/theme.js";
+import { Theme } from "../../tokens/theme/theme.js";
 import { DocumentRetrievalCardVariant } from "../types/index.js";
 
 //#region src/components/DocumentRetrievalCard/utils/functions.ts

package/dist/FloatingButton/FloatingButton.cjs

@@ -4,7 +4,7 @@ const require_index = require('./components/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingButton/FloatingButton.tsx
-const FloatingButton = ({ id, testId, className, style, customIcon, variant = require_types.FloatingButtonVariant.ATTACHED, mode, show, location, backgroundColor, hasInteractionHappened, onClick, ariaLabel }) => {
+const FloatingButton = ({ id, testId, className, style, customIcon, variant = require_types.FloatingButtonVariant.ATTACHED, mode, show, location, backgroundColor, hasInteractionHappened, onClick, ariaLabel, previewMode = false }) => {
 	const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FloatingButtonComponents.Button, {
 		variant,
 		mode,
@@ -26,6 +26,7 @@ const FloatingButton = ({ id, testId, className, style, customIcon, variant = re
 		hasInteractionHappened,
 		className,
 		style,
+		previewMode,
 		children: variant === require_types.FloatingButtonVariant.ATTACHED ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FloatingButtonComponents.Wrapper, {
 			location,
 			children: button

package/dist/FloatingButton/FloatingButton.d.cts

@@ -1,5 +1,5 @@
 import { FloatingButtonProps } from "./types/types.cjs";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/components/FloatingButton/FloatingButton.d.ts
 declare const FloatingButton: ({
@@ -15,7 +15,8 @@ declare const FloatingButton: ({
   backgroundColor,
   hasInteractionHappened,
   onClick,
-  ariaLabel
-}: FloatingButtonProps) => react_jsx_runtime21.JSX.Element;
+  ariaLabel,
+  previewMode
+}: FloatingButtonProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 export { FloatingButton };

package/dist/FloatingButton/FloatingButton.d.ts

@@ -1,5 +1,5 @@
 import { FloatingButtonProps } from "./types/types.js";
-import * as react_jsx_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/FloatingButton/FloatingButton.d.ts
 declare const FloatingButton: ({
@@ -15,7 +15,8 @@ declare const FloatingButton: ({
   backgroundColor,
   hasInteractionHappened,
   onClick,
-  ariaLabel
-}: FloatingButtonProps) => react_jsx_runtime30.JSX.Element;
+  ariaLabel,
+  previewMode
+}: FloatingButtonProps) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { FloatingButton };

package/dist/FloatingButton/FloatingButton.js

@@ -3,7 +3,7 @@ import { FloatingButtonComponents } from "./components/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/FloatingButton/FloatingButton.tsx
-const FloatingButton = ({ id, testId, className, style, customIcon, variant = FloatingButtonVariant.ATTACHED, mode, show, location, backgroundColor, hasInteractionHappened, onClick, ariaLabel }) => {
+const FloatingButton = ({ id, testId, className, style, customIcon, variant = FloatingButtonVariant.ATTACHED, mode, show, location, backgroundColor, hasInteractionHappened, onClick, ariaLabel, previewMode = false }) => {
 	const button = /* @__PURE__ */ jsx(FloatingButtonComponents.Button, {
 		variant,
 		mode,
@@ -25,6 +25,7 @@ const FloatingButton = ({ id, testId, className, style, customIcon, variant = Fl
 		hasInteractionHappened,
 		className,
 		style,
+		previewMode,
 		children: variant === FloatingButtonVariant.ATTACHED ? /* @__PURE__ */ jsx(FloatingButtonComponents.Wrapper, {
 			location,
 			children: button

package/dist/FloatingButton/components/Container.cjs

@@ -6,8 +6,8 @@ let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 
 //#region src/components/FloatingButton/components/Container.tsx
-const Container = ({ location = require_types.FloatingButtonLocation.BOTTOM_RIGHT, show = require_types.FloatingButtonShow.ALWAYS, variant = require_types.FloatingButtonVariant.ATTACHED, hasInteractionHappened = false, children, id, testId, className = "", style }) => {
-	const { positionClasses, locationClasses, zIndexClass, shouldRender } = require_useGetContainerProperties.useGetContainerProperties(location, show, variant, hasInteractionHappened);
+const Container = ({ location = require_types.FloatingButtonLocation.BOTTOM_RIGHT, show = require_types.FloatingButtonShow.ALWAYS, variant = require_types.FloatingButtonVariant.ATTACHED, hasInteractionHappened = false, children, id, testId, className = "", style, previewMode = false }) => {
+	const { positionClasses, locationClasses, zIndexClass, shouldRender } = require_useGetContainerProperties.useGetContainerProperties(location, show, variant, hasInteractionHappened, previewMode);
 	if (!shouldRender) return null;
 	const allClasses = (0, classnames.default)("envive-tw-group/floatingbutton", positionClasses, locationClasses, zIndexClass, "envive-tw-transition-all", "envive-tw-duration-300", "envive-tw-ease-in-out", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

package/dist/FloatingButton/components/Container.js

@@ -4,8 +4,8 @@ import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 
 //#region src/components/FloatingButton/components/Container.tsx
-const Container = ({ location = FloatingButtonLocation.BOTTOM_RIGHT, show = FloatingButtonShow.ALWAYS, variant = FloatingButtonVariant.ATTACHED, hasInteractionHappened = false, children, id, testId, className = "", style }) => {
-	const { positionClasses, locationClasses, zIndexClass, shouldRender } = useGetContainerProperties(location, show, variant, hasInteractionHappened);
+const Container = ({ location = FloatingButtonLocation.BOTTOM_RIGHT, show = FloatingButtonShow.ALWAYS, variant = FloatingButtonVariant.ATTACHED, hasInteractionHappened = false, children, id, testId, className = "", style, previewMode = false }) => {
+	const { positionClasses, locationClasses, zIndexClass, shouldRender } = useGetContainerProperties(location, show, variant, hasInteractionHappened, previewMode);
 	if (!shouldRender) return null;
 	const allClasses = classNames("envive-tw-group/floatingbutton", positionClasses, locationClasses, zIndexClass, "envive-tw-transition-all", "envive-tw-duration-300", "envive-tw-ease-in-out", className);
 	return /* @__PURE__ */ jsx("div", {

package/dist/FloatingButton/components/Icon.cjs

@@ -1,9 +1,10 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_CustomIcon = require('../../utils/CustomIcon.cjs');
 const require_types = require('../types/types.cjs');
-const require_Sparkles = require('../../icons/dist/Sparkles.cjs');
 const require_useGetIconProperties = require('../hooks/useGetIconProperties.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
+let __envive_ai_react_icons_Sparkles = require("@envive-ai/react-icons/Sparkles");
+__envive_ai_react_icons_Sparkles = require_rolldown_runtime.__toESM(__envive_ai_react_icons_Sparkles);
 
 //#region src/components/FloatingButton/components/Icon.tsx
 const removeSvgWidthAndHeight = (svgString) => {
@@ -16,7 +17,7 @@ const Icon = ({ variant = require_types.FloatingButtonVariant.ATTACHED, mode = r
 		dangerouslySetInnerHTML: { __html: removeSvgWidthAndHeight(customIcon) }
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CustomIcon.CustomIcon, {
-		IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sparkles.Sparkles_default, {}),
+		IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_Sparkles.default, {}),
 		className: iconClasses
 	});
 };

package/dist/FloatingButton/components/Icon.js

@@ -1,8 +1,8 @@
 import { CustomIcon } from "../../utils/CustomIcon.js";
 import { FloatingButtonMode, FloatingButtonVariant } from "../types/types.js";
-import { Sparkles_default } from "../../icons/dist/Sparkles.js";
 import { useGetIconProperties } from "../hooks/useGetIconProperties.js";
 import { jsx } from "react/jsx-runtime";
+import Sparkles from "@envive-ai/react-icons/Sparkles";
 
 //#region src/components/FloatingButton/components/Icon.tsx
 const removeSvgWidthAndHeight = (svgString) => {
@@ -15,7 +15,7 @@ const Icon = ({ variant = FloatingButtonVariant.ATTACHED, mode = FloatingButtonM
 		dangerouslySetInnerHTML: { __html: removeSvgWidthAndHeight(customIcon) }
 	});
 	return /* @__PURE__ */ jsx(CustomIcon, {
-		IconComponent: /* @__PURE__ */ jsx(Sparkles_default, {}),
+		IconComponent: /* @__PURE__ */ jsx(Sparkles, {}),
 		className: iconClasses
 	});
 };

package/dist/FloatingButton/hooks/useGetButtonProperties.cjs

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('../../components-v3/src/models/colorsConfig.cjs');
+const require_colorsConfig = require('../../src/models/colorsConfig.cjs');
 const require_types = require('../types/types.cjs');
 
 //#region src/components/FloatingButton/hooks/useGetButtonProperties.ts

package/dist/FloatingButton/hooks/useGetButtonProperties.js

@@ -1,4 +1,4 @@
-import { enviveColorVar } from "../../components-v3/src/models/colorsConfig.js";
+import { enviveColorVar } from "../../src/models/colorsConfig.js";
 import { FloatingButtonMode, FloatingButtonVariant } from "../types/types.js";
 
 //#region src/components/FloatingButton/hooks/useGetButtonProperties.ts

package/dist/FloatingButton/hooks/useGetContainerProperties.cjs

@@ -4,8 +4,8 @@ const require_types = require('../types/types.cjs');
 /**
 * Hook to get container properties for positioning and visibility.
 */
-const useGetContainerProperties = (location = require_types.FloatingButtonLocation.BOTTOM_RIGHT, show = require_types.FloatingButtonShow.ALWAYS, variant = require_types.FloatingButtonVariant.ATTACHED, hasInteractionHappened = false) => {
-	const positionClasses = "envive-tw-fixed";
+const useGetContainerProperties = (location = require_types.FloatingButtonLocation.BOTTOM_RIGHT, show = require_types.FloatingButtonShow.ALWAYS, variant = require_types.FloatingButtonVariant.ATTACHED, hasInteractionHappened = false, previewMode = false) => {
+	const positionClasses = previewMode ? "envive-tw-absolute" : "envive-tw-fixed";
 	let locationClasses = "";
 	if (variant === require_types.FloatingButtonVariant.ATTACHED) switch (location) {
 		case require_types.FloatingButtonLocation.MIDDLE_RIGHT:

package/dist/FloatingButton/hooks/useGetContainerProperties.js

@@ -4,8 +4,8 @@ import { FloatingButtonLocation, FloatingButtonShow, FloatingButtonVariant } fro
 /**
 * Hook to get container properties for positioning and visibility.
 */
-const useGetContainerProperties = (location = FloatingButtonLocation.BOTTOM_RIGHT, show = FloatingButtonShow.ALWAYS, variant = FloatingButtonVariant.ATTACHED, hasInteractionHappened = false) => {
-	const positionClasses = "envive-tw-fixed";
+const useGetContainerProperties = (location = FloatingButtonLocation.BOTTOM_RIGHT, show = FloatingButtonShow.ALWAYS, variant = FloatingButtonVariant.ATTACHED, hasInteractionHappened = false, previewMode = false) => {
+	const positionClasses = previewMode ? "envive-tw-absolute" : "envive-tw-fixed";
 	let locationClasses = "";
 	if (variant === FloatingButtonVariant.ATTACHED) switch (location) {
 		case FloatingButtonLocation.MIDDLE_RIGHT:

package/dist/FloatingButton/types/types.cjs

@@ -31,10 +31,10 @@ let FloatingButtonShow = /* @__PURE__ */ function(FloatingButtonShow$1) {
 * Determines the position of the button on the screen.
 */
 let FloatingButtonLocation = /* @__PURE__ */ function(FloatingButtonLocation$1) {
-	FloatingButtonLocation$1["MIDDLE_RIGHT"] = "middleRight";
-	FloatingButtonLocation$1["BOTTOM_RIGHT"] = "bottomRight";
-	FloatingButtonLocation$1["MIDDLE_LEFT"] = "middleLeft";
-	FloatingButtonLocation$1["BOTTOM_LEFT"] = "bottomLeft";
+	FloatingButtonLocation$1["MIDDLE_RIGHT"] = "middle-right";
+	FloatingButtonLocation$1["BOTTOM_RIGHT"] = "bottom-right";
+	FloatingButtonLocation$1["MIDDLE_LEFT"] = "middle-left";
+	FloatingButtonLocation$1["BOTTOM_LEFT"] = "bottom-left";
 	return FloatingButtonLocation$1;
 }({});
 

package/dist/FloatingButton/types/types.d.cts

@@ -1,4 +1,4 @@
-import { ColorNames } from "../../components-v3/src/models/colorsConfig.cjs";
+import { ColorNames } from "../../src/models/colorsConfig.cjs";
 
 //#region src/components/FloatingButton/types/types.d.ts
 
@@ -30,10 +30,10 @@ declare enum FloatingButtonShow {
  * Determines the position of the button on the screen.
  */
 declare enum FloatingButtonLocation {
-  MIDDLE_RIGHT = "middleRight",
-  BOTTOM_RIGHT = "bottomRight",
-  MIDDLE_LEFT = "middleLeft",
-  BOTTOM_LEFT = "bottomLeft",
+  MIDDLE_RIGHT = "middle-right",
+  BOTTOM_RIGHT = "bottom-right",
+  MIDDLE_LEFT = "middle-left",
+  BOTTOM_LEFT = "bottom-left",
 }
 type FloatingButtonBackgroundColor = Extract<ColorNames, 'background-primary' | 'background-secondary' | 'background-tertiary' | 'background-dark' | 'background-light'>;
 /**
@@ -92,6 +92,10 @@ type FloatingButtonProps = {
    * Accessible label for the button, used by screen readers.
    */
   ariaLabel: string;
+  /**
+   * Preview mode: uses absolute positioning instead of fixed
+   */
+  previewMode?: boolean;
 };
 //#endregion
 export { FloatingButtonBackgroundColor, FloatingButtonLocation, FloatingButtonMode, FloatingButtonProps, FloatingButtonShow, FloatingButtonVariant };

package/dist/FloatingButton/types/types.d.ts

@@ -1,4 +1,4 @@
-import { ColorNames } from "../../components-v3/src/models/colorsConfig.js";
+import { ColorNames } from "../../src/models/colorsConfig.js";
 
 //#region src/components/FloatingButton/types/types.d.ts
 
@@ -30,10 +30,10 @@ declare enum FloatingButtonShow {
  * Determines the position of the button on the screen.
  */
 declare enum FloatingButtonLocation {
-  MIDDLE_RIGHT = "middleRight",
-  BOTTOM_RIGHT = "bottomRight",
-  MIDDLE_LEFT = "middleLeft",
-  BOTTOM_LEFT = "bottomLeft",
+  MIDDLE_RIGHT = "middle-right",
+  BOTTOM_RIGHT = "bottom-right",
+  MIDDLE_LEFT = "middle-left",
+  BOTTOM_LEFT = "bottom-left",
 }
 type FloatingButtonBackgroundColor = Extract<ColorNames, 'background-primary' | 'background-secondary' | 'background-tertiary' | 'background-dark' | 'background-light'>;
 /**
@@ -92,6 +92,10 @@ type FloatingButtonProps = {
    * Accessible label for the button, used by screen readers.
    */
   ariaLabel: string;
+  /**
+   * Preview mode: uses absolute positioning instead of fixed
+   */
+  previewMode?: boolean;
 };
 //#endregion
 export { FloatingButtonBackgroundColor, FloatingButtonLocation, FloatingButtonMode, FloatingButtonProps, FloatingButtonShow, FloatingButtonVariant };

package/dist/FloatingButton/types/types.js

@@ -30,10 +30,10 @@ let FloatingButtonShow = /* @__PURE__ */ function(FloatingButtonShow$1) {
 * Determines the position of the button on the screen.
 */
 let FloatingButtonLocation = /* @__PURE__ */ function(FloatingButtonLocation$1) {
-	FloatingButtonLocation$1["MIDDLE_RIGHT"] = "middleRight";
-	FloatingButtonLocation$1["BOTTOM_RIGHT"] = "bottomRight";
-	FloatingButtonLocation$1["MIDDLE_LEFT"] = "middleLeft";
-	FloatingButtonLocation$1["BOTTOM_LEFT"] = "bottomLeft";
+	FloatingButtonLocation$1["MIDDLE_RIGHT"] = "middle-right";
+	FloatingButtonLocation$1["BOTTOM_RIGHT"] = "bottom-right";
+	FloatingButtonLocation$1["MIDDLE_LEFT"] = "middle-left";
+	FloatingButtonLocation$1["BOTTOM_LEFT"] = "bottom-left";
 	return FloatingButtonLocation$1;
 }({});
 

package/dist/FloatingChat/FloatingChat.cjs

@@ -1,7 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../components-v3/tokens/theme/theme.cjs');
-const require_Stack = require('../Stack/Stack.cjs');
-require('../Stack/index.cjs');
+const require_theme = require('../tokens/theme/theme.cjs');
 const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_PromptButton_types_index = require('../PromptButton/types/index.cjs');
 require('../PromptButton/index.cjs');
@@ -13,29 +11,31 @@ require('../ChatFooter/index.cjs');
 const require_index = require('../ChatHeader/types/index.cjs');
 const require_ChatHeader = require('../ChatHeader/ChatHeader.cjs');
 require('../ChatHeader/index.cjs');
+const require_useSnapCalculator = require('./hooks/useSnapCalculator.cjs');
+const require_ModalSheet = require('./components/ModalSheet.cjs');
 const require_index$1 = require('./components/index.cjs');
 const require_useScrollToBottom = require('./hooks/useScrollToBottom.cjs');
+const require_useSnapSetup = require('./hooks/useSnapSetup.cjs');
+const require_useChatSuggestions = require('./hooks/useChatSuggestions.cjs');
 const require_WelcomeMessage = require('../WelcomeMessage/WelcomeMessage.cjs');
+const require_useFilteredChatMessages = require('./hooks/useFilteredChatMessages.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
 
 //#region src/components/FloatingChat/FloatingChat.tsx
-const FloatingChat = ({ id, className, style, testId, theme = require_theme.Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, lookAndFeelConfig, isCXButtonSwitchEnabled, onClose, onToggleCXButton }) => {
+const FloatingChat = ({ id, className, style, testId, theme = require_theme.Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, lookAndFeelConfig, isCXButtonSwitchEnabled, isFloatingChatOpen, onClose, onToggleCXButton }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const [query, setQuery] = (0, react.useState)("");
 	const chatMessagesRef = (0, react.useRef)(null);
-	const { headerBackgroundColor, headerMode, welcomeMessageIconColor, showVerifiedBuyer, userQueryInputEnabled, showEnviveLogo, ignoreFirstModelResponse, neverShowSingleProductCards, welcomeMessageTitle, welcomeMessageText, chatFooterTextFieldPlaceholderText } = floatingChatConfig;
+	const { headerBackgroundColor, headerMode, welcomeMessageIconColor, showVerifiedBuyer, userQueryInputEnabled = true, showEnviveLogo, ignoreFirstModelResponse, neverShowSingleProductCards, welcomeMessageTitle, welcomeMessageText, chatFooterTextFieldPlaceholderText } = floatingChatConfig;
 	const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
 	const { messages, isResponseStreaming, isPendingResponse, suggestions, onSuggestionClicked, onTypedMessageSubmitted } = salesAgentData;
-	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]);
+	const { answerSuggestions, generalSuggestions, showAnswerSuggestions, setAnswerSuggestions, setGeneralSuggestions } = require_useChatSuggestions.useChatSuggestions({
+		suggestions,
+		isPendingResponse,
+		isResponseStreaming
+	});
 	const handleToggleCXButton = (item) => {
 		if (item === require_index.ChatHeaderOptions.LIVE_SUPPORT) {
 			onToggleCXButton?.();
@@ -53,6 +53,13 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		],
 		scrollThreshold: 30
 	});
+	const { modalSheetControl, maxSwipeableViewHeight, isOpen, isMobile, snaps, initialSnap, shouldAutoExpand, currentSnapPercentage, handleSnapChange, animationKey, mobileHeaderHeight, shouldShowHeader, shouldShowScrolled, isFullView, isPartialView } = require_useSnapSetup.useSnapSetup({ isFloatingChatOpen });
+	const { filteredMessages, hasFilteredMessages, handlePreviousDiscussions } = require_useFilteredChatMessages.useFilteredChatMessages({
+		messages,
+		isMobile,
+		currentSnapPercentage,
+		modalSheetControl
+	});
 	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatHeader.ChatHeader, {
 		logoDark: chatHeaderLogoDarkSrc,
 		logoLight: chatHeaderLogoLightSrc,
@@ -67,32 +74,62 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		variant: headerMode,
 		headerBgColor: headerBackgroundColor
 	});
-	const footer = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
-		direction: "column",
-		gap: 4,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatFooter.ChatFooter, {
+	const mobileHeader = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		style: {
+			maxHeight: mobileHeaderHeight,
+			overflow: "hidden"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatHeader.ChatHeader, {
+			logoDark: chatHeaderLogoDarkSrc,
+			logoLight: chatHeaderLogoLightSrc,
 			theme: finalTheme,
-			isScrolled: false,
-			onChange: setQuery,
-			onSubmit: () => {
-				onTypedMessageSubmitted({ query });
-				setAnswerSuggestions([]);
-				setGeneralSuggestions([]);
-			},
-			textFieldPlaceholderText: chatFooterTextFieldPlaceholderText,
-			promptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0 ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
-			handleButtonClick: (buttonText) => {
-				const suggestion = suggestions.find((s) => s.content === buttonText && !s.isAnswer);
-				if (suggestion) onSuggestionClicked(suggestion);
-				setAnswerSuggestions([]);
-				setGeneralSuggestions([]);
-			},
-			disabled: isPendingResponse || isResponseStreaming,
-			disabledInput: !userQueryInputEnabled,
-			isLoadingPromptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0,
-			hideEnviveWatermark: !showEnviveLogo
+			variant: headerMode,
+			headerBgColor: headerBackgroundColor,
+			showLogo: true,
+			showCXToggle: isCXButtonSwitchEnabled,
+			centralizeCXToggle: true,
+			selectedOption: require_index.ChatHeaderOptions.ASSISTANT,
+			onToggle: handleToggleCXButton,
+			onClose
 		})
 	});
+	const handler = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatHeader.ChatHeader, {
+		theme: finalTheme,
+		variant: headerMode,
+		headerBgColor: headerBackgroundColor,
+		showHandle: true,
+		handleState: isFullView ? require_index.HandleState.OPEN : require_index.HandleState.CLOSED,
+		handleAnimationKey: animationKey,
+		showMainContent: false,
+		selectedOption: require_index.ChatHeaderOptions.ASSISTANT,
+		onToggle: handleToggleCXButton,
+		onClose
+	});
+	const footer = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatFooter.ChatFooter, {
+		theme: finalTheme,
+		isScrolled: isMobile ? shouldShowScrolled : false,
+		onChange: setQuery,
+		onSubmit: () => {
+			onTypedMessageSubmitted({
+				query,
+				userTyped: true
+			});
+			setAnswerSuggestions([]);
+			setGeneralSuggestions([]);
+		},
+		textFieldPlaceholderText: chatFooterTextFieldPlaceholderText,
+		promptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0 ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
+		handleButtonClick: (buttonText) => {
+			const suggestion = suggestions.find((s) => s.content === buttonText && !s.isAnswer);
+			if (suggestion) onSuggestionClicked(suggestion);
+			setAnswerSuggestions([]);
+			setGeneralSuggestions([]);
+		},
+		disabled: isPendingResponse || isResponseStreaming,
+		disabledInput: !userQueryInputEnabled,
+		isLoadingPromptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0,
+		hideEnviveWatermark: !showEnviveLogo
+	});
 	const welcomeMessage = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WelcomeMessage.WelcomeMessage, {
 		sparkleIconColor: welcomeMessageIconColor,
 		title: welcomeMessageTitle,
@@ -104,11 +141,14 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		ref: chatMessagesRef,
 		isLoading: isPendingResponse && !isResponseStreaming,
 		agentName,
-		messages,
+		messages: filteredMessages,
+		hasFilteredMessages,
+		handlePreviousDiscussions,
 		isResponseStreaming,
 		ignoreFirstModelResponse,
 		neverShowSingleProductCards,
-		showVerifiedBuyer
+		showVerifiedBuyer,
+		isPartialView
 	});
 	const answerSuggestionsComponent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PromptCarousel.PromptCarousel, {
 		className: "envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end",
@@ -123,7 +163,7 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 			setGeneralSuggestions([]);
 		}
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.Layout, {
+	const desktopLayout = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.Layout, {
 		id,
 		className,
 		style,
@@ -136,6 +176,33 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
 		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0
 	});
+	const mobileLayout = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.Layout, {
+		id,
+		className,
+		style,
+		testId,
+		theme: finalTheme,
+		header: shouldShowHeader ? mobileHeader : void 0,
+		footer,
+		welcomeMessage,
+		chatMessages,
+		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
+		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0
+	});
+	return isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalSheet.ModalSheet, {
+		animationKey,
+		open: isOpen,
+		height: maxSwipeableViewHeight,
+		handler,
+		unit: require_useSnapCalculator.Unit.PERCENT,
+		snaps,
+		initSnap: initialSnap,
+		onSnap: handleSnapChange,
+		onClose,
+		controlRef: modalSheetControl,
+		disableDrag: shouldAutoExpand,
+		children: mobileLayout
+	}) : desktopLayout;
 };
 
 //#endregion

package/dist/FloatingChat/FloatingChat.d.cts

@@ -1,5 +1,5 @@
 import { FloatingChatProps } from "./types/types.cjs";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -12,8 +12,9 @@ declare const FloatingChat: ({
   floatingChatConfig,
   lookAndFeelConfig,
   isCXButtonSwitchEnabled,
+  isFloatingChatOpen,
   onClose,
   onToggleCXButton
-}: FloatingChatProps) => react_jsx_runtime6.JSX.Element;
+}: FloatingChatProps) => react_jsx_runtime28.JSX.Element;
 //#endregion
 export { FloatingChat };

package/dist/FloatingChat/FloatingChat.d.ts

@@ -1,5 +1,5 @@
 import { FloatingChatProps } from "./types/types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -12,8 +12,9 @@ declare const FloatingChat: ({
   floatingChatConfig,
   lookAndFeelConfig,
   isCXButtonSwitchEnabled,
+  isFloatingChatOpen,
   onClose,
   onToggleCXButton
-}: FloatingChatProps) => react_jsx_runtime0.JSX.Element;
+}: FloatingChatProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 export { FloatingChat };