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

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_theme = require('../packages/components-v3/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,36 +11,42 @@ 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_Disclaimer = require('../Disclaimer/Disclaimer.cjs');
+require('../Disclaimer/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, hardcopyContent, 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 } = floatingChatConfig;
+	const { welcomeMessageTitle, welcomeMessageText, chatFooterTextFieldPlaceholderText, disclaimerText } = hardcopyContent?.values ?? {};
 	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 { messages, isResponseStreaming, isPendingResponse, suggestions, onSuggestionClicked, onTypedMessageSubmitted, onFormResponseSubmitted } = salesAgentData;
+	const { answerSuggestions, generalSuggestions, showAnswerSuggestions, setAnswerSuggestions, setGeneralSuggestions } = require_useChatSuggestions.useChatSuggestions({
+		suggestions,
+		isPendingResponse,
+		isResponseStreaming
+	});
 	const handleToggleCXButton = (item) => {
 		if (item === require_index.ChatHeaderOptions.LIVE_SUPPORT) {
 			onToggleCXButton?.();
 			onClose();
 		}
 	};
-	const { showScrollButton, scrollToBottom } = require_useScrollToBottom.useScrollToBottom({
+	const { modalSheetControl, maxSwipeableViewHeight, isOpen, isMobile, snaps, initialSnap, shouldAutoExpand, currentSnapPercentage, handleSnapChange, animationKey, mobileHeaderHeight, shouldShowHeader, isFullView, isPartialView } = require_useSnapSetup.useSnapSetup({ isFloatingChatOpen });
+	const { showScrollButton, scrollToBottom, isFloatingLayout } = require_useScrollToBottom.useScrollToBottom({
 		messagesRef: chatMessagesRef,
 		autoScrollDependencies: [
 			messages,
@@ -51,7 +55,16 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 			answerSuggestions,
 			generalSuggestions
 		],
-		scrollThreshold: 30
+		scrollThreshold: 100,
+		useFloatingLayout: isMobile && isPartialView,
+		footerHeight: 160,
+		isOpen: 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,
@@ -67,32 +80,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 ? isFloatingLayout : 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 +147,15 @@ 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,
+		onFormResponseSubmitted
 	});
 	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 +170,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,
@@ -134,8 +181,38 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		welcomeMessage,
 		chatMessages,
 		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0
+		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0,
+		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Disclaimer.Disclaimer, { disclaimerMarkdown: disclaimerText }) : 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,
+		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Disclaimer.Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0,
+		isFloatingFooterLayout: isFloatingLayout
 	});
+	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_runtime25 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -10,10 +10,12 @@ declare const FloatingChat: ({
   theme,
   salesAgentData,
   floatingChatConfig,
+  hardcopyContent,
   lookAndFeelConfig,
   isCXButtonSwitchEnabled,
+  isFloatingChatOpen,
   onClose,
   onToggleCXButton
-}: FloatingChatProps) => react_jsx_runtime10.JSX.Element;
+}: FloatingChatProps) => react_jsx_runtime25.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_runtime25 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -10,10 +10,12 @@ declare const FloatingChat: ({
   theme,
   salesAgentData,
   floatingChatConfig,
+  hardcopyContent,
   lookAndFeelConfig,
   isCXButtonSwitchEnabled,
+  isFloatingChatOpen,
   onClose,
   onToggleCXButton
-}: FloatingChatProps) => react_jsx_runtime28.JSX.Element;
+}: FloatingChatProps) => react_jsx_runtime25.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 { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
 import { PromptButtonVariant } from "../PromptButton/types/index.js";
 import "../PromptButton/index.js";
@@ -9,39 +7,45 @@ 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 { Disclaimer } from "../Disclaimer/Disclaimer.js";
+import "../Disclaimer/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, hardcopyContent, 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 } = floatingChatConfig;
+	const { welcomeMessageTitle, welcomeMessageText, chatFooterTextFieldPlaceholderText, disclaimerText } = hardcopyContent?.values ?? {};
 	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 { messages, isResponseStreaming, isPendingResponse, suggestions, onSuggestionClicked, onTypedMessageSubmitted, onFormResponseSubmitted } = salesAgentData;
+	const { answerSuggestions, generalSuggestions, showAnswerSuggestions, setAnswerSuggestions, setGeneralSuggestions } = useChatSuggestions({
+		suggestions,
+		isPendingResponse,
+		isResponseStreaming
+	});
 	const handleToggleCXButton = (item) => {
 		if (item === ChatHeaderOptions.LIVE_SUPPORT) {
 			onToggleCXButton?.();
 			onClose();
 		}
 	};
-	const { showScrollButton, scrollToBottom } = useScrollToBottom({
+	const { modalSheetControl, maxSwipeableViewHeight, isOpen, isMobile, snaps, initialSnap, shouldAutoExpand, currentSnapPercentage, handleSnapChange, animationKey, mobileHeaderHeight, shouldShowHeader, isFullView, isPartialView } = useSnapSetup({ isFloatingChatOpen });
+	const { showScrollButton, scrollToBottom, isFloatingLayout } = useScrollToBottom({
 		messagesRef: chatMessagesRef,
 		autoScrollDependencies: [
 			messages,
@@ -50,7 +54,16 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 			answerSuggestions,
 			generalSuggestions
 		],
-		scrollThreshold: 30
+		scrollThreshold: 100,
+		useFloatingLayout: isMobile && isPartialView,
+		footerHeight: 160,
+		isOpen: isFloatingChatOpen
+	});
+	const { filteredMessages, hasFilteredMessages, handlePreviousDiscussions } = useFilteredChatMessages({
+		messages,
+		isMobile,
+		currentSnapPercentage,
+		modalSheetControl
 	});
 	const header = /* @__PURE__ */ jsx(ChatHeader, {
 		logoDark: chatHeaderLogoDarkSrc,
@@ -66,32 +79,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 ? isFloatingLayout : 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 +146,15 @@ 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,
+		onFormResponseSubmitted
 	});
 	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 +169,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,
@@ -133,8 +180,38 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		welcomeMessage,
 		chatMessages,
 		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0
+		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0,
+		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ jsx(Disclaimer, { disclaimerMarkdown: disclaimerText }) : 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,
+		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ jsx(Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0,
+		isFloatingFooterLayout: isFloatingLayout
 	});
+	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

@@ -1,9 +1,10 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_index = require('../../Message/types/index.cjs');
 const require_Message = require('../../Message/Message.cjs');
 require('../../Message/index.cjs');
+const require_react = require('../../node_modules/jotai/esm/react.cjs');
 const require_Form = require('../../Form/Form.cjs');
 require('../../Form/index.cjs');
 const require_ReviewCardsCarousel = require('./ReviewCardsCarousel.cjs');
@@ -13,9 +14,11 @@ const require_OrderLookupCardCarousel = require('./OrderLookupCardCarousel.cjs')
 const require_functions = require('../utils/functions.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 
 //#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, onFormResponseSubmitted }) => {
+	const handleFormSubmittedAtomFallback = require_react.useSetAtom(__envive_ai_react_hooks_atoms_chat.handleFormSubmittedAtom);
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	if (new Set([
 		__envive_ai_react_hooks_application_models.MessageType.Text,
@@ -42,32 +45,54 @@ const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, ty
 			hideNavigation: products.length === 1,
 			products,
 			numberOfProducts: products.length,
+			theme: finalTheme,
+			isPartialView
+		});
+	}
+	if (type === __envive_ai_react_hooks_application_models.MessageType.Page) {
+		const documents = require_functions.getCleanDocuments(messages);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DocumentRetrievalCardsCarousel.DocumentRetrievalCardsCarousel, {
+			hideNavigation: documents.length === 1,
+			documents,
 			theme: finalTheme
 		});
 	}
-	if (type === __envive_ai_react_hooks_application_models.MessageType.Page) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DocumentRetrievalCardsCarousel.DocumentRetrievalCardsCarousel, {
-		documents: require_functions.getCleanDocuments(messages),
-		theme: finalTheme
-	});
-	if (type === __envive_ai_react_hooks_application_models.MessageType.Form) return messages.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Form).map((msg) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Form.Form, {
-		textFields: msg.metadata.fields.map((field) => ({
-			label: field.title,
-			isRequired: field.required,
-			type: field.format === "email" ? "email" : "text"
-		})),
-		submitButton: {
-			label: "Submit",
-			ariaLabel: "Submit",
-			isDisabled: false
-		},
-		onSubmit: (values) => {
-			console.log("submitted", values);
-		}
-	}, msg.id));
-	if (type === __envive_ai_react_hooks_application_models.MessageType.Order) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OrderLookupCardCarousel.OrderLookupCardCarousel, {
-		orders: require_functions.getCleanOrders(messages),
-		theme: finalTheme
+	if (type === __envive_ai_react_hooks_application_models.MessageType.Form) return messages.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Form).map((msg) => {
+		const { fields } = msg.metadata;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Form.Form, {
+			textFields: fields.map((field) => ({
+				label: field.title,
+				isRequired: field.required,
+				type: field.format === "email" ? "email" : "text"
+			})),
+			submitButton: {
+				label: "Submit",
+				ariaLabel: "Submit",
+				isDisabled: false
+			},
+			onSubmit: (values) => {
+				const filledSchema = {};
+				fields.forEach((field, index) => {
+					filledSchema[field.key] = values[index]?.value ?? "";
+				});
+				const payload = {
+					filledSchema,
+					formResponseId: msg.id,
+					formType: msg.metadata.formType ?? "order_lookup"
+				};
+				if (onFormResponseSubmitted) onFormResponseSubmitted(payload);
+				else handleFormSubmittedAtomFallback(payload);
+			}
+		}, msg.id);
 	});
+	if (type === __envive_ai_react_hooks_application_models.MessageType.Order) {
+		const orders = require_functions.getCleanOrders(messages);
+		if (!orders || orders.length === 0) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OrderLookupCardCarousel.OrderLookupCardCarousel, {
+			orders,
+			theme: finalTheme
+		});
+	}
 	return null;
 };