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

package/dist/FloatingChat/FloatingChat.js

@@ -1,6 +1,4 @@
-import { Theme } from "../components-v3/tokens/theme/theme.js";
-import { Stack } from "../Stack/Stack.js";
-import "../Stack/index.js";
+import { Theme } from "../tokens/theme/theme.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

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../components-v3/tokens/theme/theme.cjs');
+const require_theme = require('../../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');
@@ -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

@@ -1,4 +1,4 @@
-import { Theme } from "../../components-v3/tokens/theme/theme.js";
+import { Theme } from "../../tokens/theme/theme.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
 import { MessageVariant } from "../../Message/types/index.js";
 import { Message } from "../../Message/Message.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, {

package/dist/FloatingChat/components/ChatMessages.cjs

@@ -1,9 +1,12 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../components-v3/tokens/theme/theme.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 "../../components-v3/tokens/theme/theme.js";
+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

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../components-v3/tokens/theme/theme.cjs');
+const require_theme = require('../../tokens/theme/theme.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
 const require_Container = require('../../Container/Container.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

@@ -1,4 +1,4 @@
-import { Theme } from "../../components-v3/tokens/theme/theme.js";
+import { Theme } from "../../tokens/theme/theme.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
 import { Container } from "../../Container/Container.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", {