@envive-ai/react-toolkit-v3 0.3.19 → 0.3.21

package/dist/FloatingChat/FloatingChat.js

@@ -20,7 +20,7 @@ import { useScrollToBottom } from "./hooks/useScrollToBottom.js";
 import { useSnapSetup } from "./hooks/useSnapSetup.js";
 import { useFilteredChatMessages } from "./hooks/useFilteredChatMessages.js";
 import { Unit } from "./hooks/useSnapCalculator.js";
-import { getCleanProducts, getSearchQueryFromMessageBlock } from "./utils/functions.js";
+import { trackProductCardClicked } from "./utils/trackProductCardInteraction.js";
 import { ModalSheet } from "./components/ModalSheet.js";
 import { FloatingChatComponents } from "./components/index.js";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -29,10 +29,10 @@ 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, MessageType } from "@envive-ai/react-hooks/application/models";
+import { ChatElementDisplayLocationV3 } 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 }) => {
+const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, hardcopyContent, lookAndFeelConfig, isCXButtonSwitchEnabled, isFloatingChatOpen, debugBar, onClose, onSwipeClose, onToggleCXButton, setIsResultsModalOpen }) => {
 	const finalTheme = resolveTheme(theme);
 	const { trackWidgetInteraction } = useWidgetInteraction();
 	const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.FLOATING_CHAT, (text) => text);
@@ -75,7 +75,15 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		footerHeight: 160,
 		isOpen: isFloatingChatOpen
 	});
-	const { resultsViewData, setResultsViewData, isResultsView, scrollContainerRef, isResultsViewRef, handleBackToChat } = useProductResultsView({ scrollToBottom });
+	const { resultsViewData, isResultsView, scrollContainerRef, isResultsViewRef, handleBackToChat, handleExploreAllResults } = useProductResultsView({ scrollToBottom });
+	useEffect(() => {
+		setIsResultsModalOpen?.(!isMobile && isResultsView && resultsViewData !== null);
+	}, [
+		isMobile,
+		isResultsView,
+		resultsViewData,
+		setIsResultsModalOpen
+	]);
 	useEffect(() => {
 		if (isFloatingChatOpen) trackWidgetInteraction({
 			eventName: EnviveMetricsEventName.WidgetInteraction,
@@ -111,14 +119,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		modalSheetControl
 	});
 	const handleProductCardClick = (product) => {
-		trackWidgetInteraction({
-			eventName: EnviveMetricsEventName.WidgetInteraction,
-			trigger: {
-				widget: WidgetInteractionComponent.FLOATING_CHAT,
-				widget_interaction: WidgetInteractionType.PRODUCT_CARD_CLICKED,
-				widget_interaction_data: { product_card_clicked: { product_id: product.id } }
-			}
-		});
+		trackProductCardClicked(trackWidgetInteraction, WidgetInteractionComponent.FLOATING_CHAT, product);
 	};
 	const header = /* @__PURE__ */ jsx(ChatHeader, {
 		logoDark: chatHeaderLogoDarkSrc,
@@ -205,16 +206,6 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		text: welcomeMessageText,
 		theme: finalTheme
 	});
-	const handleExploreAllResults = (firstProductMessageId) => {
-		const blockIndex = messages.findIndex((block) => block.some((msg) => msg.type === MessageType.Product && msg.id === firstProductMessageId));
-		if (blockIndex < 0) return;
-		const products = getCleanProducts(messages[blockIndex].filter((msg) => msg.type === MessageType.Product));
-		if (products.length === 0) return;
-		setResultsViewData({
-			products,
-			searchQuery: getSearchQueryFromMessageBlock(messages, blockIndex)
-		});
-	};
 	const chatMessages = /* @__PURE__ */ jsx(FloatingChatComponents.ChatMessages, {
 		theme: finalTheme,
 		ref: chatMessagesRef,
@@ -229,7 +220,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		showVerifiedBuyer,
 		onFormResponseSubmitted,
 		parentWidget: WidgetInteractionComponent.FLOATING_CHAT,
-		onExploreAllResults: handleExploreAllResults
+		onExploreAllResults: (firstProductMessageId) => handleExploreAllResults(firstProductMessageId, filteredMessages)
 	});
 	const middleContent = /* @__PURE__ */ jsx(FloatingChatComponents.SlideChatContent, {
 		isResultsView,
@@ -292,6 +283,18 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		isFloatingFooterLayout: isFloatingLayout,
 		scrollContainerRef
 	});
+	if (!isMobile && isResultsView && resultsViewData) return /* @__PURE__ */ jsx(FloatingChatComponents.ProductResultsModal, {
+		theme: finalTheme,
+		resultsViewData,
+		onBackToChat: handleBackToChat,
+		onProductCardClick: handleProductCardClick,
+		onClose,
+		logoDark: chatHeaderLogoDarkSrc,
+		logoLight: chatHeaderLogoLightSrc,
+		headerBgColor: headerBackgroundColor,
+		headerMode,
+		footer
+	});
 	return isMobile ? /* @__PURE__ */ jsx(ModalSheet, {
 		animationKey,
 		open: isOpen,

package/dist/FloatingChat/components/AgentMessage.cjs

@@ -8,6 +8,7 @@ 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_trackProductCardInteraction = require('../utils/trackProductCardInteraction.cjs');
 const require_DocumentRetrievalCardsCarousel = require('./DocumentRetrievalCardsCarousel.cjs');
 const require_OrderLookupCardCarousel = require('./OrderLookupCardCarousel.cjs');
 const require_ReviewCardsCarousel = require('./ReviewCardsCarousel.cjs');
@@ -40,14 +41,7 @@ const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, ty
 		});
 	};
 	const handleProductCardClick = (product) => {
-		trackWidgetInteraction({
-			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
-			trigger: {
-				widget: parentWidget,
-				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.PRODUCT_CARD_CLICKED,
-				widget_interaction_data: { product_card_clicked: { product_id: product.id } }
-			}
-		});
+		require_trackProductCardInteraction.trackProductCardClicked(trackWidgetInteraction, parentWidget, product);
 	};
 	const handleReviewCardClick = (review) => {
 		trackWidgetInteraction({

package/dist/FloatingChat/components/AgentMessage.js

@@ -7,6 +7,7 @@ import "../../Message/index.js";
 import { useSetAtom } from "../../node_modules/jotai/esm/react.js";
 import { Form } from "../../Form/Form.js";
 import "../../Form/index.js";
+import { trackProductCardClicked } from "../utils/trackProductCardInteraction.js";
 import { DocumentRetrievalCardsCarousel } from "./DocumentRetrievalCardsCarousel.js";
 import { OrderLookupCardCarousel } from "./OrderLookupCardCarousel.js";
 import { ReviewCardsCarousel } from "./ReviewCardsCarousel.js";
@@ -39,14 +40,7 @@ const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages,
 		});
 	};
 	const handleProductCardClick = (product) => {
-		trackWidgetInteraction({
-			eventName: EnviveMetricsEventName.WidgetInteraction,
-			trigger: {
-				widget: parentWidget,
-				widget_interaction: WidgetInteractionType.PRODUCT_CARD_CLICKED,
-				widget_interaction_data: { product_card_clicked: { product_id: product.id } }
-			}
-		});
+		trackProductCardClicked(trackWidgetInteraction, parentWidget, product);
 	};
 	const handleReviewCardClick = (review) => {
 		trackWidgetInteraction({

package/dist/FloatingChat/components/ProductResultsModal.cjs

@@ -0,0 +1,62 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../../ChatHeader/types/index.cjs');
+const require_ChatHeader = require('../../ChatHeader/ChatHeader.cjs');
+require('../../ChatHeader/index.cjs');
+const require_ResultsGridView = require('./ResultsGridView.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region src/components/FloatingChat/components/ProductResultsModal.tsx
+const overlayWrapperClasses = (0, classnames.default)("envive-tw-min-h-0 envive-tw-flex envive-tw-h-full envive-tw-w-full", "envive-tw-items-center envive-tw-justify-center envive-tw-p-4");
+const modalClasses = (0, classnames.default)("envive-tw-rounded-[16px] envive-tw-flex envive-tw-max-h-[90vh] envive-tw-w-full envive-tw-max-w-[900px]", "envive-tw-flex-col envive-tw-overflow-hidden envive-tw-bg-white envive-tw-shadow-lg");
+const headerWrapperClasses = (0, classnames.default)("envive-tw-rounded-t-[16px] envive-tw-flex-shrink-0 envive-tw-overflow-hidden");
+const scrollContentClasses = (0, classnames.default)("envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden");
+const footerWrapperClasses = (0, classnames.default)("envive-tw-w-full envive-tw-flex-shrink-0");
+/**
+* Desktop-only modal for "Explore All Results" view.
+*/
+const ProductResultsModal = ({ theme, resultsViewData, onBackToChat, onProductCardClick, logoDark, logoLight, headerBgColor, headerMode, footer }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: overlayWrapperClasses,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: modalClasses,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: headerWrapperClasses,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatHeader.ChatHeader, {
+						logoDark,
+						logoLight,
+						selectedOption: require_index.ChatHeaderOptions.ASSISTANT,
+						onToggle: () => {},
+						onClose: onBackToChat,
+						showLogo: true,
+						showCXToggle: false,
+						centralizeCXToggle: true,
+						theme,
+						variant: headerMode ?? require_index.ChatHeaderVariant.LIGHT,
+						headerBgColor
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: scrollContentClasses,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResultsGridView.ResultsGridView, {
+						theme,
+						searchQuery: resultsViewData.searchQuery,
+						products: resultsViewData.products,
+						onBackToChat,
+						onProductCardClick,
+						gridCols: 4
+					})
+				}),
+				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: footerWrapperClasses,
+					children: footer
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+exports.ProductResultsModal = ProductResultsModal;

package/dist/FloatingChat/components/ProductResultsModal.js

@@ -0,0 +1,60 @@
+import { ChatHeaderOptions, ChatHeaderVariant } from "../../ChatHeader/types/index.js";
+import { ChatHeader } from "../../ChatHeader/ChatHeader.js";
+import "../../ChatHeader/index.js";
+import { ResultsGridView } from "./ResultsGridView.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+
+//#region src/components/FloatingChat/components/ProductResultsModal.tsx
+const overlayWrapperClasses = classNames("envive-tw-min-h-0 envive-tw-flex envive-tw-h-full envive-tw-w-full", "envive-tw-items-center envive-tw-justify-center envive-tw-p-4");
+const modalClasses = classNames("envive-tw-rounded-[16px] envive-tw-flex envive-tw-max-h-[90vh] envive-tw-w-full envive-tw-max-w-[900px]", "envive-tw-flex-col envive-tw-overflow-hidden envive-tw-bg-white envive-tw-shadow-lg");
+const headerWrapperClasses = classNames("envive-tw-rounded-t-[16px] envive-tw-flex-shrink-0 envive-tw-overflow-hidden");
+const scrollContentClasses = classNames("envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden");
+const footerWrapperClasses = classNames("envive-tw-w-full envive-tw-flex-shrink-0");
+/**
+* Desktop-only modal for "Explore All Results" view.
+*/
+const ProductResultsModal = ({ theme, resultsViewData, onBackToChat, onProductCardClick, logoDark, logoLight, headerBgColor, headerMode, footer }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: overlayWrapperClasses,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: modalClasses,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: headerWrapperClasses,
+					children: /* @__PURE__ */ jsx(ChatHeader, {
+						logoDark,
+						logoLight,
+						selectedOption: ChatHeaderOptions.ASSISTANT,
+						onToggle: () => {},
+						onClose: onBackToChat,
+						showLogo: true,
+						showCXToggle: false,
+						centralizeCXToggle: true,
+						theme,
+						variant: headerMode ?? ChatHeaderVariant.LIGHT,
+						headerBgColor
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: scrollContentClasses,
+					children: /* @__PURE__ */ jsx(ResultsGridView, {
+						theme,
+						searchQuery: resultsViewData.searchQuery,
+						products: resultsViewData.products,
+						onBackToChat,
+						onProductCardClick,
+						gridCols: 4
+					})
+				}),
+				footer && /* @__PURE__ */ jsx("div", {
+					className: footerWrapperClasses,
+					children: footer
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+export { ProductResultsModal };

package/dist/FloatingChat/components/ResultsGridView.cjs

@@ -8,11 +8,23 @@ require('../../Typography/index.cjs');
 const require_types = require('../../SalesAgentProductCard/types/types.cjs');
 const require_SalesAgentProductCard = require('../../SalesAgentProductCard/SalesAgentProductCard.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
 
 //#region src/components/FloatingChat/components/ResultsGridView.tsx
-const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProductCardClick }) => {
+const NUM_COLUMNS_MOBILE = 2;
+const NUM_COLUMNS_FPSA = 3;
+const NUM_COLUMNS_DESKTOP_MODAL = 4;
+const gridClassNameByColumnCount = {
+	[NUM_COLUMNS_MOBILE]: "envive-tw-grid-cols-2 envive-tw-gap-4",
+	[NUM_COLUMNS_FPSA]: "envive-tw-grid-cols-3 envive-tw-gap-2",
+	[NUM_COLUMNS_DESKTOP_MODAL]: "envive-tw-grid-cols-4 envive-tw-gap-2"
+};
+const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProductCardClick, gridCols = NUM_COLUMNS_MOBILE }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
+	const gridClassName = gridClassNameByColumnCount[gridCols];
+	const searchQueryHeadingClassName = (0, classnames.default)("envive-tw-mb-2", { "envive-tw-text-center": gridCols !== NUM_COLUMNS_MOBILE });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 		direction: "column",
 		gap: "4",
@@ -39,7 +51,7 @@ const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProduct
 			searchQuery && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.Typography, {
 				variant: require_index.TypographyVariant.B3_MD,
 				color: require_index.TypographyColor.TEXT_PRIMARY,
-				className: "envive-tw-mb-2",
+				className: searchQueryHeadingClassName,
 				children: [
 					"Results for \"",
 					searchQuery,
@@ -47,7 +59,7 @@ const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProduct
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "envive-tw-grid envive-tw-grid-cols-2 envive-tw-gap-4",
+				className: (0, classnames.default)("envive-tw-grid", gridClassName),
 				children: products.map((product, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SalesAgentProductCard.SalesAgentProductCard, {
 					variant: require_types.SalesAgentProductCardVariant.LARGE,
 					productName: product.productName,
@@ -69,4 +81,6 @@ const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProduct
 };
 
 //#endregion
+exports.NUM_COLUMNS_FPSA = NUM_COLUMNS_FPSA;
+exports.NUM_COLUMNS_MOBILE = NUM_COLUMNS_MOBILE;
 exports.ResultsGridView = ResultsGridView;

package/dist/FloatingChat/components/ResultsGridView.js

@@ -7,11 +7,22 @@ import "../../Typography/index.js";
 import { SalesAgentProductCardVariant } from "../../SalesAgentProductCard/types/types.js";
 import { SalesAgentProductCard } from "../../SalesAgentProductCard/SalesAgentProductCard.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/FloatingChat/components/ResultsGridView.tsx
-const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProductCardClick }) => {
+const NUM_COLUMNS_MOBILE = 2;
+const NUM_COLUMNS_FPSA = 3;
+const NUM_COLUMNS_DESKTOP_MODAL = 4;
+const gridClassNameByColumnCount = {
+	[NUM_COLUMNS_MOBILE]: "envive-tw-grid-cols-2 envive-tw-gap-4",
+	[NUM_COLUMNS_FPSA]: "envive-tw-grid-cols-3 envive-tw-gap-2",
+	[NUM_COLUMNS_DESKTOP_MODAL]: "envive-tw-grid-cols-4 envive-tw-gap-2"
+};
+const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProductCardClick, gridCols = NUM_COLUMNS_MOBILE }) => {
 	const finalTheme = resolveTheme(theme);
 	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
+	const gridClassName = gridClassNameByColumnCount[gridCols];
+	const searchQueryHeadingClassName = classNames("envive-tw-mb-2", { "envive-tw-text-center": gridCols !== NUM_COLUMNS_MOBILE });
 	return /* @__PURE__ */ jsxs(Stack, {
 		direction: "column",
 		gap: "4",
@@ -38,7 +49,7 @@ const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProduct
 			searchQuery && /* @__PURE__ */ jsxs(Typography, {
 				variant: TypographyVariant.B3_MD,
 				color: TypographyColor.TEXT_PRIMARY,
-				className: "envive-tw-mb-2",
+				className: searchQueryHeadingClassName,
 				children: [
 					"Results for \"",
 					searchQuery,
@@ -46,7 +57,7 @@ const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProduct
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "envive-tw-grid envive-tw-grid-cols-2 envive-tw-gap-4",
+				className: classNames("envive-tw-grid", gridClassName),
 				children: products.map((product, index) => /* @__PURE__ */ jsx(SalesAgentProductCard, {
 					variant: SalesAgentProductCardVariant.LARGE,
 					productName: product.productName,
@@ -68,4 +79,4 @@ const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProduct
 };
 
 //#endregion
-export { ResultsGridView };
+export { NUM_COLUMNS_FPSA, NUM_COLUMNS_MOBILE, ResultsGridView };

package/dist/FloatingChat/components/SlideChatContent.cjs

@@ -9,13 +9,14 @@ const slideVariants = {
 	center: { x: 0 },
 	exit: (isResults) => ({ x: isResults ? "100%" : "-100%" })
 };
-const SlideChatContent = ({ isResultsView, isResultsViewRef, resultsViewData, onBackToChat, onProductCardClick, theme, chatMessages, scrollToBottom }) => {
+const SlideChatContent = ({ isResultsView, isResultsViewRef, resultsViewData, onBackToChat, onProductCardClick, theme, chatMessages, scrollToBottom, resultsGridColumns = require_ResultsGridView.NUM_COLUMNS_MOBILE }) => {
 	const resultsViewContent = resultsViewData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResultsGridView.ResultsGridView, {
 		theme,
 		searchQuery: resultsViewData.searchQuery,
 		products: resultsViewData.products,
 		onBackToChat,
-		onProductCardClick
+		onProductCardClick,
+		gridCols: resultsGridColumns
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "envive-tw-relative envive-tw-min-h-[200px] envive-tw-w-full envive-tw-overflow-hidden",

package/dist/FloatingChat/components/SlideChatContent.js

@@ -1,4 +1,4 @@
-import { ResultsGridView } from "./ResultsGridView.js";
+import { NUM_COLUMNS_MOBILE, ResultsGridView } from "./ResultsGridView.js";
 import { jsx } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "framer-motion";
 
@@ -8,13 +8,14 @@ const slideVariants = {
 	center: { x: 0 },
 	exit: (isResults) => ({ x: isResults ? "100%" : "-100%" })
 };
-const SlideChatContent = ({ isResultsView, isResultsViewRef, resultsViewData, onBackToChat, onProductCardClick, theme, chatMessages, scrollToBottom }) => {
+const SlideChatContent = ({ isResultsView, isResultsViewRef, resultsViewData, onBackToChat, onProductCardClick, theme, chatMessages, scrollToBottom, resultsGridColumns = NUM_COLUMNS_MOBILE }) => {
 	const resultsViewContent = resultsViewData && /* @__PURE__ */ jsx(ResultsGridView, {
 		theme,
 		searchQuery: resultsViewData.searchQuery,
 		products: resultsViewData.products,
 		onBackToChat,
-		onProductCardClick
+		onProductCardClick,
+		gridCols: resultsGridColumns
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "envive-tw-relative envive-tw-min-h-[200px] envive-tw-w-full envive-tw-overflow-hidden",

package/dist/FloatingChat/components/index.cjs

@@ -1,5 +1,6 @@
 const require_Layout = require('./Layout.cjs');
 const require_ResultsGridView = require('./ResultsGridView.cjs');
+const require_ProductResultsModal = require('./ProductResultsModal.cjs');
 const require_SlideChatContent = require('./SlideChatContent.cjs');
 const require_UserMessage = require('./UserMessage.cjs');
 const require_DocumentRetrievalCardsCarousel = require('./DocumentRetrievalCardsCarousel.cjs');
@@ -16,6 +17,7 @@ const require_ModalSheet = require('./ModalSheet.cjs');
 const FloatingChatComponents = {
 	Layout: require_Layout.Layout,
 	ResultsGridView: require_ResultsGridView.ResultsGridView,
+	ProductResultsModal: require_ProductResultsModal.ProductResultsModal,
 	SlideChatContent: require_SlideChatContent.SlideChatContent,
 	UserMessage: require_UserMessage.UserMessage,
 	AgentMessage: require_AgentMessage.AgentMessage,

package/dist/FloatingChat/components/index.js

@@ -1,5 +1,6 @@
 import { Layout } from "./Layout.js";
 import { ResultsGridView } from "./ResultsGridView.js";
+import { ProductResultsModal } from "./ProductResultsModal.js";
 import { SlideChatContent } from "./SlideChatContent.js";
 import { UserMessage } from "./UserMessage.js";
 import { DocumentRetrievalCardsCarousel } from "./DocumentRetrievalCardsCarousel.js";
@@ -16,6 +17,7 @@ import { ModalSheet } from "./ModalSheet.js";
 const FloatingChatComponents = {
 	Layout,
 	ResultsGridView,
+	ProductResultsModal,
 	SlideChatContent,
 	UserMessage,
 	AgentMessage,

package/dist/FloatingChat/hooks/useProductResultsView.cjs

@@ -1,5 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_functions = require('../utils/functions.cjs');
 let react = require("react");
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 
 //#region src/components/FloatingChat/hooks/useProductResultsView.ts
 const useProductResultsView = ({ scrollToBottom }) => {
@@ -11,6 +13,16 @@ const useProductResultsView = ({ scrollToBottom }) => {
 	const handleBackToChat = () => {
 		setResultsViewData(null);
 	};
+	const handleExploreAllResults = (0, react.useCallback)((firstProductMessageId, messages) => {
+		const blockIndex = messages.findIndex((block) => block.some((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product && msg.id === firstProductMessageId));
+		if (blockIndex < 0) return;
+		const products = require_functions.getCleanProductsForResultsGrid(messages[blockIndex].filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product));
+		if (products.length === 0) return;
+		setResultsViewData({
+			products,
+			searchQuery: require_functions.getSearchQueryFromMessageBlock(messages, blockIndex)
+		});
+	}, []);
 	(0, react.useEffect)(() => {
 		if (isResultsView && scrollContainerRef.current) scrollContainerRef.current.scrollTo({
 			top: 0,
@@ -28,7 +40,8 @@ const useProductResultsView = ({ scrollToBottom }) => {
 		isResultsView,
 		scrollContainerRef,
 		isResultsViewRef,
-		handleBackToChat
+		handleBackToChat,
+		handleExploreAllResults
 	};
 };
 

package/dist/FloatingChat/hooks/useProductResultsView.js

@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState } from "react";
+import { getCleanProductsForResultsGrid, getSearchQueryFromMessageBlock } from "../utils/functions.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { MessageType } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/FloatingChat/hooks/useProductResultsView.ts
 const useProductResultsView = ({ scrollToBottom }) => {
@@ -10,6 +12,16 @@ const useProductResultsView = ({ scrollToBottom }) => {
 	const handleBackToChat = () => {
 		setResultsViewData(null);
 	};
+	const handleExploreAllResults = useCallback((firstProductMessageId, messages) => {
+		const blockIndex = messages.findIndex((block) => block.some((msg) => msg.type === MessageType.Product && msg.id === firstProductMessageId));
+		if (blockIndex < 0) return;
+		const products = getCleanProductsForResultsGrid(messages[blockIndex].filter((msg) => msg.type === MessageType.Product));
+		if (products.length === 0) return;
+		setResultsViewData({
+			products,
+			searchQuery: getSearchQueryFromMessageBlock(messages, blockIndex)
+		});
+	}, []);
 	useEffect(() => {
 		if (isResultsView && scrollContainerRef.current) scrollContainerRef.current.scrollTo({
 			top: 0,
@@ -27,7 +39,8 @@ const useProductResultsView = ({ scrollToBottom }) => {
 		isResultsView,
 		scrollContainerRef,
 		isResultsViewRef,
-		handleBackToChat
+		handleBackToChat,
+		handleExploreAllResults
 	};
 };
 

package/dist/FloatingChat/hooks/useSnapSetup.cjs

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
+const require_utils_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 const require_snapConstants = require('../snapConstants.cjs');
 let react = require("react");
 let framer_motion = require("framer-motion");
@@ -9,7 +9,7 @@ const SNAPS_NO_AUTO_EXPAND = [0, 100];
 const useSnapSetup = ({ isFloatingChatOpen }) => {
 	const maxSwipeableViewHeight = require_snapConstants.MAX_SWIPEABLE_VIEW_HEIGHT;
 	const modalSheetControl = (0, react.useRef)(null);
-	const { viewportWidth } = require_useCheckIsMobile.useCheckIsMobile();
+	const { viewportWidth } = require_utils_useCheckIsMobile.useCheckIsMobile();
 	const isMobile = viewportWidth !== void 0 && viewportWidth < 512;
 	const shouldAutoExpand = Boolean(isMobile && window?._spiffy?.selectedCustomizeOption);
 	const snaps = shouldAutoExpand ? [100] : SNAPS_NO_AUTO_EXPAND;

package/dist/FloatingChat/types/types.d.cts

@@ -71,6 +71,10 @@ interface FloatingChatProps {
    * Debug bar to display in the chat.
    */
   debugBar?: React.ReactNode;
+  /**
+   * Updates whether the product results modal is open (desktop full-width grid view).
+   */
+  setIsResultsModalOpen?: (isOpen: boolean) => void;
 }
 //#endregion
 export { FloatingChatProps };

package/dist/FloatingChat/types/types.d.ts

@@ -71,6 +71,10 @@ interface FloatingChatProps {
    * Debug bar to display in the chat.
    */
   debugBar?: React.ReactNode;
+  /**
+   * Updates whether the product results modal is open (desktop full-width grid view).
+   */
+  setIsResultsModalOpen?: (isOpen: boolean) => void;
 }
 //#endregion
 export { FloatingChatProps };

package/dist/FloatingChat/utils/functions.cjs

@@ -21,23 +21,30 @@ const getGroupableMessages = (message) => {
 const checkIfHideAgentName = (messages) => {
 	return messages.some((msg) => msg.role === __envive_ai_react_hooks_application_models.MessageRole.Assistant && msg.type !== __envive_ai_react_hooks_application_models.MessageType.Separator);
 };
+const mapProductMessageToCardProps = (msg) => {
+	if (msg.type !== __envive_ai_react_hooks_application_models.MessageType.Product) return null;
+	return {
+		id: msg.id,
+		productName: msg.metadata.title,
+		currentPrice: msg.metadata.salePrice,
+		previousPrice: msg.metadata.originalPrice,
+		pricePrefix: "$",
+		rate: msg.metadata.averageRating,
+		numberOfReviews: msg.metadata.numberReviews,
+		url: msg.metadata.url,
+		image: {
+			src: msg.metadata.imageUrl,
+			alt: `${msg.metadata.title} image`
+		}
+	};
+};
+/** Product cards for carousels; excludes grid-only rows from the API (`isForGrid`). */
 const getCleanProducts = (messages) => {
-	return messages.map((msg) => {
-		if (msg.type === __envive_ai_react_hooks_application_models.MessageType.Product && !msg.metadata.isForGrid) return {
-			productName: msg.metadata.title,
-			currentPrice: msg.metadata.salePrice,
-			previousPrice: msg.metadata.originalPrice,
-			pricePrefix: "$",
-			rate: msg.metadata.averageRating,
-			numberOfReviews: msg.metadata.numberReviews,
-			url: msg.metadata.url,
-			image: {
-				src: msg.metadata.imageUrl,
-				alt: `${msg.metadata.title} image`
-			}
-		};
-		return null;
-	}).filter((product) => product !== null);
+	return messages.map((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product && !msg.metadata.isForGrid ? mapProductMessageToCardProps(msg) : null).filter((p) => p !== null);
+};
+/** All product rows in a turn, including `isForGrid`, for the full results grid. */
+const getCleanProductsForResultsGrid = (messages) => {
+	return messages.map((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product ? mapProductMessageToCardProps(msg) : null).filter((p) => p !== null);
 };
 const getCleanReviews = (messages) => {
 	return messages.map((msg) => {
@@ -107,6 +114,7 @@ exports.checkIfHideAgentName = checkIfHideAgentName;
 exports.getCleanDocuments = getCleanDocuments;
 exports.getCleanOrders = getCleanOrders;
 exports.getCleanProducts = getCleanProducts;
+exports.getCleanProductsForResultsGrid = getCleanProductsForResultsGrid;
 exports.getCleanReviews = getCleanReviews;
 exports.getGroupableMessages = getGroupableMessages;
 exports.getProductCarouselDisplayInfo = getProductCarouselDisplayInfo;