@envive-ai/react-toolkit-v3 0.3.16 → 0.3.18

package/dist/FloatingChat/FloatingChat.js

@@ -14,6 +14,7 @@ import "../ChatHeader/index.js";
 import { Disclaimer } from "../Disclaimer/Disclaimer.js";
 import "../Disclaimer/index.js";
 import { WelcomeMessage } from "../WelcomeMessage/WelcomeMessage.js";
+import { getCleanProducts } from "./utils/functions.js";
 import { Unit } from "./hooks/useSnapCalculator.js";
 import { ModalSheet } from "./components/ModalSheet.js";
 import { FloatingChatComponents } from "./components/index.js";
@@ -27,7 +28,7 @@ import { EnviveMetricsEventName } from "@envive-ai/react-hooks/contexts/amplitud
 import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { motion } from "framer-motion";
-import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
+import { ChatElementDisplayLocationV3, MessageType } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/FloatingChat/FloatingChat.tsx
 const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, hardcopyContent, lookAndFeelConfig, isCXButtonSwitchEnabled, isFloatingChatOpen, debugBar, onClose, onSwipeClose, onToggleCXButton }) => {
@@ -183,6 +184,13 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		text: welcomeMessageText,
 		theme: finalTheme
 	});
+	const handleExploreAllResults = (firstProductMessageId) => {
+		const products = getCleanProducts(messages.find((block) => block.some((msg) => msg.type === MessageType.Product && msg.id === firstProductMessageId))?.filter((msg) => msg.type === MessageType.Product) ?? []);
+		console.log("[INFO] [spiffy-ai] Explore All Results clicked", {
+			firstProductMessageId,
+			products
+		});
+	};
 	const chatMessages = /* @__PURE__ */ jsx(FloatingChatComponents.ChatMessages, {
 		theme: finalTheme,
 		ref: chatMessagesRef,
@@ -196,7 +204,8 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		neverShowSingleProductCards,
 		showVerifiedBuyer,
 		onFormResponseSubmitted,
-		parentWidget: WidgetInteractionComponent.FLOATING_CHAT
+		parentWidget: WidgetInteractionComponent.FLOATING_CHAT,
+		onExploreAllResults: handleExploreAllResults
 	});
 	const answerSuggestionsComponent = /* @__PURE__ */ jsx(PromptCarousel, {
 		className: "envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end",

package/dist/FloatingChat/components/AgentMessage.cjs

@@ -20,7 +20,7 @@ let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks
 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, isPendingResponse = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, onFormResponseSubmitted, parentWidget }) => {
+const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, isPendingResponse = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, onFormResponseSubmitted, parentWidget, onExploreAllResults }) => {
 	const handleFormSubmittedAtomFallback = require_react.useSetAtom(__envive_ai_react_hooks_atoms_chat.handleFormSubmittedAtom);
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
@@ -92,12 +92,17 @@ const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, ty
 	if (type === __envive_ai_react_hooks_application_models.MessageType.Product) {
 		const products = require_functions.getCleanProducts(messages);
 		if (products.length === 1 && neverShowSingleProductCards) return null;
+		const handleExploreAllResults = () => {
+			const firstProductMessageId = messages[0]?.id ?? "";
+			onExploreAllResults?.(firstProductMessageId);
+		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SalesAgentProductCardsCarousel.SalesAgentProductCardsCarousel, {
 			hideNavigation: products.length === 1,
 			products,
 			numberOfProducts: products.length,
 			theme: finalTheme,
-			onProductCardClick: handleProductCardClick
+			onProductCardClick: handleProductCardClick,
+			onExploreAllResults: handleExploreAllResults
 		});
 	}
 	if (type === __envive_ai_react_hooks_application_models.MessageType.Page) {

package/dist/FloatingChat/components/AgentMessage.js

@@ -19,7 +19,7 @@ import { MessageType } from "@envive-ai/react-hooks/application/models";
 import { handleFormSubmittedAtom } from "@envive-ai/react-hooks/atoms/chat";
 
 //#region src/components/FloatingChat/components/AgentMessage.tsx
-const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, isPendingResponse = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, onFormResponseSubmitted, parentWidget }) => {
+const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, isPendingResponse = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, onFormResponseSubmitted, parentWidget, onExploreAllResults }) => {
 	const handleFormSubmittedAtomFallback = useSetAtom(handleFormSubmittedAtom);
 	const finalTheme = resolveTheme(theme);
 	const { trackWidgetInteraction } = useWidgetInteraction();
@@ -91,12 +91,17 @@ const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages,
 	if (type === MessageType.Product) {
 		const products = getCleanProducts(messages);
 		if (products.length === 1 && neverShowSingleProductCards) return null;
+		const handleExploreAllResults = () => {
+			const firstProductMessageId = messages[0]?.id ?? "";
+			onExploreAllResults?.(firstProductMessageId);
+		};
 		return /* @__PURE__ */ jsx(SalesAgentProductCardsCarousel, {
 			hideNavigation: products.length === 1,
 			products,
 			numberOfProducts: products.length,
 			theme: finalTheme,
-			onProductCardClick: handleProductCardClick
+			onProductCardClick: handleProductCardClick,
+			onExploreAllResults: handleExploreAllResults
 		});
 	}
 	if (type === MessageType.Page) {

package/dist/FloatingChat/components/ChatMessages.cjs

@@ -1,11 +1,11 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.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$1 = require('../../Message/types/index.cjs');
 const require_Message = require('../../Message/Message.cjs');
 require('../../Message/index.cjs');
@@ -20,7 +20,7 @@ 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, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, onFormResponseSubmitted, parentWidget }, ref) => {
+const ChatMessages = (0, react.forwardRef)(({ theme = require_theme.Theme.GLOBAL_CUSTOM, className, agentName, messages, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, onFormResponseSubmitted, parentWidget, onExploreAllResults }, ref) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 		ref,
@@ -70,7 +70,8 @@ const ChatMessages = (0, react.forwardRef)(({ theme = require_theme.Theme.GLOBAL
 								neverShowSingleProductCards,
 								showVerifiedBuyer,
 								onFormResponseSubmitted,
-								parentWidget
+								parentWidget,
+								onExploreAllResults
 							}, assistantMessageId);
 						}
 						return null;

package/dist/FloatingChat/components/ChatMessages.js

@@ -1,10 +1,10 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
-import { resolveTheme } from "../../utils/resolveTheme.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";
 import "../../Message/index.js";
@@ -18,7 +18,7 @@ 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, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, onFormResponseSubmitted, parentWidget }, ref) => {
+const ChatMessages = forwardRef(({ theme = Theme.GLOBAL_CUSTOM, className, agentName, messages, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, onFormResponseSubmitted, parentWidget, onExploreAllResults }, ref) => {
 	const finalTheme = resolveTheme(theme);
 	return /* @__PURE__ */ jsxs(Stack, {
 		ref,
@@ -68,7 +68,8 @@ const ChatMessages = forwardRef(({ theme = Theme.GLOBAL_CUSTOM, className, agent
 								neverShowSingleProductCards,
 								showVerifiedBuyer,
 								onFormResponseSubmitted,
-								parentWidget
+								parentWidget,
+								onExploreAllResults
 							}, assistantMessageId);
 						}
 						return null;

package/dist/FloatingChat/components/Layout.cjs

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-const require_Container = require('../../Container/Container.cjs');
-require('../../Container/index.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
+const require_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");

package/dist/FloatingChat/components/Layout.js

@@ -1,9 +1,9 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
-import { Container } from "../../Container/Container.js";
-import "../../Container/index.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
+import { Container } from "../../Container/Container.js";
+import "../../Container/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";

package/dist/FloatingChat/components/SalesAgentBadgeContent.cjs

@@ -0,0 +1,59 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+const require_ArrowIcon = require('../../Carousel/components/ArrowIcon.cjs');
+const require_index = require('../../Typography/types/index.cjs');
+const require_Typography = require('../../Typography/Typography.cjs');
+require('../../Typography/index.cjs');
+const require_functions = require('../utils/functions.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region src/components/FloatingChat/components/SalesAgentBadgeContent.tsx
+const SalesAgentBadgeContent = ({ totalProducts, displayLimit = require_functions.MOST_RELEVANT_DISPLAY_LIMIT, onExploreAllResults }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+		direction: "row",
+		justify: "between",
+		align: "center",
+		gap: "1",
+		className: "envive-tw-w-full envive-tw-rounded-global-custom envive-tw-p-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.Typography, {
+			variant: require_index.TypographyVariant.B3_MD,
+			color: require_index.TypographyColor.TEXT_PRIMARY,
+			children: [
+				"Most Relevant (",
+				displayLimit,
+				")"
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			onClick: onExploreAllResults,
+			className: (0, classnames.default)("envive-tw-flex envive-tw-items-center envive-tw-gap-1", "envive-tw-bg-background-secondary envive-tw-p-2", "envive-tw-rounded-global-custom envive-tw-border envive-tw-border-border-medium", "hover:envive-tw-border-border-dark"),
+			"aria-label": `Explore all ${totalProducts} results`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.Typography, {
+				variant: require_index.TypographyVariant.B3_MD,
+				color: require_index.TypographyColor.TEXT_LINK,
+				children: [
+					"Explore All Results (",
+					totalProducts,
+					")"
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrowIcon.ArrowIcon, { direction: "right" })]
+		})]
+	});
+};
+const getBadgeContentAndLabel = ({ totalProducts, areProductsMoreThanDisplayLimit, onExploreAllResults, displayLimit = require_functions.MOST_RELEVANT_DISPLAY_LIMIT }) => {
+	return {
+		badgeContent: areProductsMoreThanDisplayLimit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SalesAgentBadgeContent, {
+			totalProducts,
+			displayLimit,
+			onExploreAllResults
+		}) : null,
+		badgeLabel: !areProductsMoreThanDisplayLimit && totalProducts > 1 ? `${totalProducts} Products` : null
+	};
+};
+
+//#endregion
+exports.getBadgeContentAndLabel = getBadgeContentAndLabel;

package/dist/FloatingChat/components/SalesAgentBadgeContent.js

@@ -0,0 +1,56 @@
+import { Stack } from "../../Stack/Stack.js";
+import { ArrowIcon } from "../../Carousel/components/ArrowIcon.js";
+import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
+import { Typography } from "../../Typography/Typography.js";
+import "../../Typography/index.js";
+import { MOST_RELEVANT_DISPLAY_LIMIT } from "../utils/functions.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+
+//#region src/components/FloatingChat/components/SalesAgentBadgeContent.tsx
+const SalesAgentBadgeContent = ({ totalProducts, displayLimit = MOST_RELEVANT_DISPLAY_LIMIT, onExploreAllResults }) => {
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		justify: "between",
+		align: "center",
+		gap: "1",
+		className: "envive-tw-w-full envive-tw-rounded-global-custom envive-tw-p-2",
+		children: [/* @__PURE__ */ jsxs(Typography, {
+			variant: TypographyVariant.B3_MD,
+			color: TypographyColor.TEXT_PRIMARY,
+			children: [
+				"Most Relevant (",
+				displayLimit,
+				")"
+			]
+		}), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: onExploreAllResults,
+			className: classNames("envive-tw-flex envive-tw-items-center envive-tw-gap-1", "envive-tw-bg-background-secondary envive-tw-p-2", "envive-tw-rounded-global-custom envive-tw-border envive-tw-border-border-medium", "hover:envive-tw-border-border-dark"),
+			"aria-label": `Explore all ${totalProducts} results`,
+			children: [/* @__PURE__ */ jsxs(Typography, {
+				variant: TypographyVariant.B3_MD,
+				color: TypographyColor.TEXT_LINK,
+				children: [
+					"Explore All Results (",
+					totalProducts,
+					")"
+				]
+			}), /* @__PURE__ */ jsx(ArrowIcon, { direction: "right" })]
+		})]
+	});
+};
+const getBadgeContentAndLabel = ({ totalProducts, areProductsMoreThanDisplayLimit, onExploreAllResults, displayLimit = MOST_RELEVANT_DISPLAY_LIMIT }) => {
+	return {
+		badgeContent: areProductsMoreThanDisplayLimit ? /* @__PURE__ */ jsx(SalesAgentBadgeContent, {
+			totalProducts,
+			displayLimit,
+			onExploreAllResults
+		}) : null,
+		badgeLabel: !areProductsMoreThanDisplayLimit && totalProducts > 1 ? `${totalProducts} Products` : null
+	};
+};
+
+//#endregion
+export { getBadgeContentAndLabel };

package/dist/FloatingChat/components/SalesAgentProductCardsCarousel.cjs

@@ -1,18 +1,27 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_Carousel = require('../../Carousel/Carousel.cjs');
+const require_functions = require('../utils/functions.cjs');
 const require_types = require('../../SalesAgentProductCard/types/types.cjs');
 const require_SalesAgentProductCard = require('../../SalesAgentProductCard/SalesAgentProductCard.cjs');
+const require_SalesAgentBadgeContent = require('./SalesAgentBadgeContent.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx
-const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts, variant = require_types.SalesAgentProductCardVariant.LARGE, onProductCardClick }) => {
+const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts, variant = require_types.SalesAgentProductCardVariant.LARGE, onProductCardClick, onExploreAllResults }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
-	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
+	const { totalProducts, areProductsMoreThanDisplayLimit, displayedProducts } = require_functions.getProductCarouselDisplayInfo(products, numberOfProducts);
+	const forceShowCurrentPriceSpace = displayedProducts.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
+	const { badgeContent, badgeLabel } = require_SalesAgentBadgeContent.getBadgeContentAndLabel({
+		totalProducts,
+		areProductsMoreThanDisplayLimit,
+		onExploreAllResults
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Carousel.Carousel, {
 		hideNavigation,
-		badgeLabel: numberOfProducts && numberOfProducts > 1 ? `${numberOfProducts} Products` : void 0,
-		elements: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SalesAgentProductCard.SalesAgentProductCard, {
+		badgeContent,
+		badgeLabel,
+		elements: displayedProducts.map((product, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SalesAgentProductCard.SalesAgentProductCard, {
 			variant,
 			productName: product.productName,
 			currentPrice: product.currentPrice,
@@ -26,7 +35,7 @@ const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = fals
 			target: "_blank",
 			theme: finalTheme,
 			onClick: () => onProductCardClick(product)
-		}, product.id)),
+		}, product.id ?? `product-${index}`)),
 		theme: finalTheme
 	});
 };

package/dist/FloatingChat/components/SalesAgentProductCardsCarousel.js

@@ -1,17 +1,26 @@
 import { resolveTheme } from "../../utils/resolveTheme.js";
 import { Carousel } from "../../Carousel/Carousel.js";
+import { getProductCarouselDisplayInfo } from "../utils/functions.js";
 import { SalesAgentProductCardVariant } from "../../SalesAgentProductCard/types/types.js";
 import { SalesAgentProductCard } from "../../SalesAgentProductCard/SalesAgentProductCard.js";
+import { getBadgeContentAndLabel } from "./SalesAgentBadgeContent.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx
-const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts, variant = SalesAgentProductCardVariant.LARGE, onProductCardClick }) => {
+const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts, variant = SalesAgentProductCardVariant.LARGE, onProductCardClick, onExploreAllResults }) => {
 	const finalTheme = resolveTheme(theme);
-	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
+	const { totalProducts, areProductsMoreThanDisplayLimit, displayedProducts } = getProductCarouselDisplayInfo(products, numberOfProducts);
+	const forceShowCurrentPriceSpace = displayedProducts.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
+	const { badgeContent, badgeLabel } = getBadgeContentAndLabel({
+		totalProducts,
+		areProductsMoreThanDisplayLimit,
+		onExploreAllResults
+	});
 	return /* @__PURE__ */ jsx(Carousel, {
 		hideNavigation,
-		badgeLabel: numberOfProducts && numberOfProducts > 1 ? `${numberOfProducts} Products` : void 0,
-		elements: products.map((product) => /* @__PURE__ */ jsx(SalesAgentProductCard, {
+		badgeContent,
+		badgeLabel,
+		elements: displayedProducts.map((product, index) => /* @__PURE__ */ jsx(SalesAgentProductCard, {
 			variant,
 			productName: product.productName,
 			currentPrice: product.currentPrice,
@@ -25,7 +34,7 @@ const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = fals
 			target: "_blank",
 			theme: finalTheme,
 			onClick: () => onProductCardClick(product)
-		}, product.id)),
+		}, product.id ?? `product-${index}`)),
 		theme: finalTheme
 	});
 };

package/dist/FloatingChat/utils/functions.cjs

@@ -76,11 +76,23 @@ const getCleanOrders = (messages) => {
 		return null;
 	}).filter((o) => o !== null);
 };
+const MOST_RELEVANT_DISPLAY_LIMIT = 8;
+const getProductCarouselDisplayInfo = (products, numberOfProducts, displayLimit = MOST_RELEVANT_DISPLAY_LIMIT) => {
+	const totalProducts = numberOfProducts ?? products.length;
+	const areProductsMoreThanDisplayLimit = totalProducts > displayLimit;
+	return {
+		totalProducts,
+		areProductsMoreThanDisplayLimit,
+		displayedProducts: areProductsMoreThanDisplayLimit ? products.slice(0, displayLimit) : products
+	};
+};
 
 //#endregion
+exports.MOST_RELEVANT_DISPLAY_LIMIT = MOST_RELEVANT_DISPLAY_LIMIT;
 exports.checkIfHideAgentName = checkIfHideAgentName;
 exports.getCleanDocuments = getCleanDocuments;
 exports.getCleanOrders = getCleanOrders;
 exports.getCleanProducts = getCleanProducts;
 exports.getCleanReviews = getCleanReviews;
-exports.getGroupableMessages = getGroupableMessages;
+exports.getGroupableMessages = getGroupableMessages;
+exports.getProductCarouselDisplayInfo = getProductCarouselDisplayInfo;

package/dist/FloatingChat/utils/functions.js

@@ -75,6 +75,16 @@ const getCleanOrders = (messages) => {
 		return null;
 	}).filter((o) => o !== null);
 };
+const MOST_RELEVANT_DISPLAY_LIMIT = 8;
+const getProductCarouselDisplayInfo = (products, numberOfProducts, displayLimit = MOST_RELEVANT_DISPLAY_LIMIT) => {
+	const totalProducts = numberOfProducts ?? products.length;
+	const areProductsMoreThanDisplayLimit = totalProducts > displayLimit;
+	return {
+		totalProducts,
+		areProductsMoreThanDisplayLimit,
+		displayedProducts: areProductsMoreThanDisplayLimit ? products.slice(0, displayLimit) : products
+	};
+};
 
 //#endregion
-export { checkIfHideAgentName, getCleanDocuments, getCleanOrders, getCleanProducts, getCleanReviews, getGroupableMessages };
+export { MOST_RELEVANT_DISPLAY_LIMIT, checkIfHideAgentName, getCleanDocuments, getCleanOrders, getCleanProducts, getCleanReviews, getGroupableMessages, getProductCarouselDisplayInfo };

package/dist/FullPageSalesAgent/FullPageSalesAgent.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-require('../Tokens/index.cjs');
 const require_resolveTheme = require('../utils/resolveTheme.cjs');
+require('../Tokens/index.cjs');
 const require_usePromptCarouselAnalytics = require('../PromptCarousel/hooks/usePromptCarouselAnalytics.cjs');
 const require_PromptButton_types_index = require('../PromptButton/types/index.cjs');
 require('../PromptButton/index.cjs');
@@ -19,6 +19,7 @@ const require_useScrollToBottom = require('../FloatingChat/hooks/useScrollToBott
 require('../WelcomeMessage/index.cjs');
 const require_useIsMobile = require('./hooks/useIsMobile.cjs');
 const require_useGetFooterStyles = require('./hooks/useGetFooterStyles.cjs');
+const require_useGetScrollContentStyles = require('./hooks/useGetScrollContentStyles.cjs');
 const require_index$1 = require('./components/index.cjs');
 const require_useGetMessagesStyles = require('./hooks/useGetMessagesStyles.cjs');
 let react = require("react");
@@ -37,6 +38,7 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 	const chatMessagesRef = (0, react.useRef)(null);
 	const { footerStyles, footerClasses } = require_useGetFooterStyles.useGetFooterStyles();
 	const { messageClasses } = require_useGetMessagesStyles.useGetMessagesStyles();
+	const { messageContainerClasses } = require_useGetScrollContentStyles.useGetScrollContentStyles();
 	const { isMobile } = require_useIsMobile.useIsMobile();
 	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
 	const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = require_usePromptCarouselAnalytics.usePromptCarouselAnalytics(__envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FULL_PAGE_SALES_AGENT, (text) => text);
@@ -80,11 +82,14 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 			}
 		});
 	};
-	const welcomeMessage = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WelcomeMessage.WelcomeMessage, {
-		sparkleIconColor: welcomeMessageIconColor,
-		title: welcomeMessageTitle,
-		text: welcomeMessageText,
-		theme: resolvedTheme
+	const welcomeMessage = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: messageContainerClasses,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WelcomeMessage.WelcomeMessage, {
+			sparkleIconColor: welcomeMessageIconColor,
+			title: welcomeMessageTitle,
+			text: welcomeMessageText,
+			theme: resolvedTheme
+		})
 	});
 	const footer = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatFooter.ChatFooter, {
 		className: footerClasses,

package/dist/FullPageSalesAgent/FullPageSalesAgent.d.cts

@@ -1,5 +1,5 @@
 import { Theme } from "../tokens/theme/theme.cjs";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
@@ -19,6 +19,6 @@ declare const FullPageSalesAgent: ({
   hardcopyContent,
   headerContainer,
   autoHeight
-}: FullPageSalesAgentProps) => react_jsx_runtime16.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime15.JSX.Element;
 //#endregion
 export { FullPageSalesAgent };

package/dist/FullPageSalesAgent/FullPageSalesAgent.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
@@ -19,6 +19,6 @@ declare const FullPageSalesAgent: ({
   hardcopyContent,
   headerContainer,
   autoHeight
-}: FullPageSalesAgentProps) => react_jsx_runtime31.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { FullPageSalesAgent };

package/dist/FullPageSalesAgent/FullPageSalesAgent.js

@@ -1,6 +1,6 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import "../Tokens/index.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
+import "../Tokens/index.js";
 import { usePromptCarouselAnalytics } from "../PromptCarousel/hooks/usePromptCarouselAnalytics.js";
 import { PromptButtonVariant } from "../PromptButton/types/index.js";
 import "../PromptButton/index.js";
@@ -18,6 +18,7 @@ import { useScrollToBottom } from "../FloatingChat/hooks/useScrollToBottom.js";
 import "../WelcomeMessage/index.js";
 import { useIsMobile } from "./hooks/useIsMobile.js";
 import { useGetFooterStyles } from "./hooks/useGetFooterStyles.js";
+import { useGetScrollContentStyles } from "./hooks/useGetScrollContentStyles.js";
 import { FullPageSAComponents } from "./components/index.js";
 import { useGetMessagesStyles } from "./hooks/useGetMessagesStyles.js";
 import { useRef, useState } from "react";
@@ -36,6 +37,7 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 	const chatMessagesRef = useRef(null);
 	const { footerStyles, footerClasses } = useGetFooterStyles();
 	const { messageClasses } = useGetMessagesStyles();
+	const { messageContainerClasses } = useGetScrollContentStyles();
 	const { isMobile } = useIsMobile();
 	const { trackWidgetInteraction } = useWidgetInteraction();
 	const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT, (text) => text);
@@ -79,11 +81,14 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 			}
 		});
 	};
-	const welcomeMessage = /* @__PURE__ */ jsx(WelcomeMessage, {
-		sparkleIconColor: welcomeMessageIconColor,
-		title: welcomeMessageTitle,
-		text: welcomeMessageText,
-		theme: resolvedTheme
+	const welcomeMessage = /* @__PURE__ */ jsx("div", {
+		className: messageContainerClasses,
+		children: /* @__PURE__ */ jsx(WelcomeMessage, {
+			sparkleIconColor: welcomeMessageIconColor,
+			title: welcomeMessageTitle,
+			text: welcomeMessageText,
+			theme: resolvedTheme
+		})
 	});
 	const footer = /* @__PURE__ */ jsx(ChatFooter, {
 		className: footerClasses,

package/dist/FullPageSalesAgent/components/Layout.cjs

@@ -16,7 +16,7 @@ const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions
 	const hasWelcomeMessage = (0, react.isValidElement)(welcomeMessage);
 	const hasAnswerSuggestions = (0, react.isValidElement)(answerSuggestions);
 	const { isMobile } = require_useIsMobile.useIsMobile();
-	const { contentClasses, messageContainerClasses } = require_useGetScrollContentStyles.useGetScrollContentStyles();
+	const { contentClasses } = require_useGetScrollContentStyles.useGetScrollContentStyles();
 	const { footerContainerClasses } = require_useGetFooterStyles.useGetFooterStyles();
 	const { containerClasses, containerStyles } = require_useGetContainerStyles.useGetContainerStyles({
 		headerContainer,
@@ -28,7 +28,6 @@ const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: contentClasses,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-				className: messageContainerClasses,
 				direction: "column",
 				justify: "between",
 				children: [welcomeMessage, disclaimer]

package/dist/FullPageSalesAgent/components/Layout.js

@@ -14,7 +14,7 @@ const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions
 	const hasWelcomeMessage = isValidElement(welcomeMessage);
 	const hasAnswerSuggestions = isValidElement(answerSuggestions);
 	const { isMobile } = useIsMobile();
-	const { contentClasses, messageContainerClasses } = useGetScrollContentStyles();
+	const { contentClasses } = useGetScrollContentStyles();
 	const { footerContainerClasses } = useGetFooterStyles();
 	const { containerClasses, containerStyles } = useGetContainerStyles({
 		headerContainer,
@@ -26,7 +26,6 @@ const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: contentClasses,
 			children: [/* @__PURE__ */ jsxs(Stack, {
-				className: messageContainerClasses,
 				direction: "column",
 				justify: "between",
 				children: [welcomeMessage, disclaimer]

package/dist/FullPageSalesAgent/hooks/useContainerResizerObserver.cjs

@@ -5,7 +5,10 @@ let react = require("react");
 const useContainerResizerObserver = ({ headerContainer, autoHeight }) => {
 	const [containerHeight, setContainerHeight] = (0, react.useState)("100%");
 	(0, react.useEffect)(() => {
-		if (!autoHeight) return () => {};
+		if (!autoHeight) {
+			setContainerHeight("100%");
+			return () => {};
+		}
 		const watchResizing = () => {
 			const { height = 0, top = 0 } = document.querySelector(headerContainer)?.getBoundingClientRect() || {};
 			setContainerHeight(window.innerHeight - (height + top));

package/dist/FullPageSalesAgent/hooks/useContainerResizerObserver.js

@@ -4,7 +4,10 @@ import { useEffect, useState } from "react";
 const useContainerResizerObserver = ({ headerContainer, autoHeight }) => {
 	const [containerHeight, setContainerHeight] = useState("100%");
 	useEffect(() => {
-		if (!autoHeight) return () => {};
+		if (!autoHeight) {
+			setContainerHeight("100%");
+			return () => {};
+		}
 		const watchResizing = () => {
 			const { height = 0, top = 0 } = document.querySelector(headerContainer)?.getBoundingClientRect() || {};
 			setContainerHeight(window.innerHeight - (height + top));

package/dist/Image/Image.d.cts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.cjs";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 
 //#region src/components/Image/Image.d.ts
 
@@ -25,6 +25,6 @@ declare const Image: ({
   role,
   "aria-hidden": ariaHidden,
   ...rest
-}: ImageProps) => react_jsx_runtime2.JSX.Element;
+}: ImageProps) => react_jsx_runtime25.JSX.Element;
 //#endregion
 export { Image };