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

package/dist/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('../tokens/theme/theme.cjs');
-const require_Stack = require('../Stack/Stack.cjs');
-require('../Stack/index.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_runtime10 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_runtime10.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_runtime28 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_runtime28.JSX.Element;
+}: FloatingChatProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 export { FloatingChat };

package/dist/FloatingChat/FloatingChat.js

@@ -1,6 +1,4 @@
 import { Theme } from "../tokens/theme/theme.js";
-import { Stack } from "../Stack/Stack.js";
-import "../Stack/index.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
 import { PromptButtonVariant } from "../PromptButton/types/index.js";
 import "../PromptButton/index.js";
@@ -9,32 +7,34 @@ import { PromptCarousel } from "../PromptCarousel/PromptCarousel.js";
 import "../PromptCarousel/index.js";
 import { ChatFooter } from "../ChatFooter/ChatFooter.js";
 import "../ChatFooter/index.js";
-import { ChatHeaderOptions } from "../ChatHeader/types/index.js";
+import { ChatHeaderOptions, HandleState } from "../ChatHeader/types/index.js";
 import { ChatHeader } from "../ChatHeader/ChatHeader.js";
 import "../ChatHeader/index.js";
+import { Unit } from "./hooks/useSnapCalculator.js";
+import { ModalSheet } from "./components/ModalSheet.js";
 import { FloatingChatComponents } from "./components/index.js";
 import { useScrollToBottom } from "./hooks/useScrollToBottom.js";
+import { useSnapSetup } from "./hooks/useSnapSetup.js";
+import { useChatSuggestions } from "./hooks/useChatSuggestions.js";
 import { WelcomeMessage } from "../WelcomeMessage/WelcomeMessage.js";
-import { useEffect, useRef, useState } from "react";
+import { useFilteredChatMessages } from "./hooks/useFilteredChatMessages.js";
+import { useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
 
 //#region src/components/FloatingChat/FloatingChat.tsx
-const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, lookAndFeelConfig, isCXButtonSwitchEnabled, onClose, onToggleCXButton }) => {
+const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, lookAndFeelConfig, isCXButtonSwitchEnabled, isFloatingChatOpen, onClose, onToggleCXButton }) => {
 	const finalTheme = resolveTheme(theme);
 	const [query, setQuery] = useState("");
 	const chatMessagesRef = 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] = 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]);
+	const { answerSuggestions, generalSuggestions, showAnswerSuggestions, setAnswerSuggestions, setGeneralSuggestions } = useChatSuggestions({
+		suggestions,
+		isPendingResponse,
+		isResponseStreaming
+	});
 	const handleToggleCXButton = (item) => {
 		if (item === ChatHeaderOptions.LIVE_SUPPORT) {
 			onToggleCXButton?.();
@@ -52,6 +52,13 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		],
 		scrollThreshold: 30
 	});
+	const { modalSheetControl, maxSwipeableViewHeight, isOpen, isMobile, snaps, initialSnap, shouldAutoExpand, currentSnapPercentage, handleSnapChange, animationKey, mobileHeaderHeight, shouldShowHeader, shouldShowScrolled, isFullView, isPartialView } = useSnapSetup({ isFloatingChatOpen });
+	const { filteredMessages, hasFilteredMessages, handlePreviousDiscussions } = useFilteredChatMessages({
+		messages,
+		isMobile,
+		currentSnapPercentage,
+		modalSheetControl
+	});
 	const header = /* @__PURE__ */ jsx(ChatHeader, {
 		logoDark: chatHeaderLogoDarkSrc,
 		logoLight: chatHeaderLogoLightSrc,
@@ -66,32 +73,62 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		variant: headerMode,
 		headerBgColor: headerBackgroundColor
 	});
-	const footer = /* @__PURE__ */ jsx(Stack, {
-		direction: "column",
-		gap: 4,
-		children: /* @__PURE__ */ jsx(ChatFooter, {
+	const mobileHeader = /* @__PURE__ */ jsx(motion.div, {
+		style: {
+			maxHeight: mobileHeaderHeight,
+			overflow: "hidden"
+		},
+		children: /* @__PURE__ */ jsx(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: ChatHeaderOptions.ASSISTANT,
+			onToggle: handleToggleCXButton,
+			onClose
 		})
 	});
+	const handler = /* @__PURE__ */ jsx(ChatHeader, {
+		theme: finalTheme,
+		variant: headerMode,
+		headerBgColor: headerBackgroundColor,
+		showHandle: true,
+		handleState: isFullView ? HandleState.OPEN : HandleState.CLOSED,
+		handleAnimationKey: animationKey,
+		showMainContent: false,
+		selectedOption: ChatHeaderOptions.ASSISTANT,
+		onToggle: handleToggleCXButton,
+		onClose
+	});
+	const footer = /* @__PURE__ */ jsx(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__ */ jsx(WelcomeMessage, {
 		sparkleIconColor: welcomeMessageIconColor,
 		title: welcomeMessageTitle,
@@ -103,11 +140,14 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		ref: chatMessagesRef,
 		isLoading: isPendingResponse && !isResponseStreaming,
 		agentName,
-		messages,
+		messages: filteredMessages,
+		hasFilteredMessages,
+		handlePreviousDiscussions,
 		isResponseStreaming,
 		ignoreFirstModelResponse,
 		neverShowSingleProductCards,
-		showVerifiedBuyer
+		showVerifiedBuyer,
+		isPartialView
 	});
 	const answerSuggestionsComponent = /* @__PURE__ */ jsx(PromptCarousel, {
 		className: "envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end",
@@ -122,7 +162,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 			setGeneralSuggestions([]);
 		}
 	});
-	return /* @__PURE__ */ jsx(FloatingChatComponents.Layout, {
+	const desktopLayout = /* @__PURE__ */ jsx(FloatingChatComponents.Layout, {
 		id,
 		className,
 		style,
@@ -135,6 +175,33 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
 		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0
 	});
+	const mobileLayout = /* @__PURE__ */ jsx(FloatingChatComponents.Layout, {
+		id,
+		className,
+		style,
+		testId,
+		theme: finalTheme,
+		header: shouldShowHeader ? mobileHeader : void 0,
+		footer,
+		welcomeMessage,
+		chatMessages,
+		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
+		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0
+	});
+	return isMobile ? /* @__PURE__ */ jsx(ModalSheet, {
+		animationKey,
+		open: isOpen,
+		height: maxSwipeableViewHeight,
+		handler,
+		unit: Unit.PERCENT,
+		snaps,
+		initSnap: initialSnap,
+		onSnap: handleSnapChange,
+		onClose,
+		controlRef: modalSheetControl,
+		disableDrag: shouldAutoExpand,
+		children: mobileLayout
+	}) : desktopLayout;
 };
 
 //#endregion

package/dist/FloatingChat/components/AgentMessage.cjs

@@ -15,7 +15,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 
 //#region src/components/FloatingChat/components/AgentMessage.tsx
-const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, neverShowSingleProductCards = false, showVerifiedBuyer = false }) => {
+const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, isPartialView }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	if (new Set([
 		__envive_ai_react_hooks_application_models.MessageType.Text,
@@ -42,7 +42,8 @@ const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, ty
 			hideNavigation: products.length === 1,
 			products,
 			numberOfProducts: products.length,
-			theme: finalTheme
+			theme: finalTheme,
+			isPartialView
 		});
 	}
 	if (type === __envive_ai_react_hooks_application_models.MessageType.Page) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DocumentRetrievalCardsCarousel.DocumentRetrievalCardsCarousel, {

package/dist/FloatingChat/components/AgentMessage.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 import { MessageType } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/FloatingChat/components/AgentMessage.tsx
-const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, neverShowSingleProductCards = false, showVerifiedBuyer = false }) => {
+const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, isPartialView }) => {
 	const finalTheme = resolveTheme(theme);
 	if (new Set([
 		MessageType.Text,
@@ -41,7 +41,8 @@ const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages,
 			hideNavigation: products.length === 1,
 			products,
 			numberOfProducts: products.length,
-			theme: finalTheme
+			theme: finalTheme,
+			isPartialView
 		});
 	}
 	if (type === MessageType.Page) return /* @__PURE__ */ jsx(DocumentRetrievalCardsCarousel, {