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

package/dist/FloatingChat/hooks/useProductResultsView.js

@@ -0,0 +1,48 @@
+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 }) => {
+	const [resultsViewData, setResultsViewData] = useState(null);
+	const isResultsView = resultsViewData !== null;
+	const scrollContainerRef = useRef(null);
+	const isResultsViewRef = useRef(isResultsView);
+	isResultsViewRef.current = isResultsView;
+	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,
+			behavior: "smooth"
+		});
+	}, [isResultsView]);
+	const prevIsResultsViewRef = useRef(isResultsView);
+	useEffect(() => {
+		if (prevIsResultsViewRef.current && !isResultsView) scrollToBottom();
+		prevIsResultsViewRef.current = isResultsView;
+	}, [isResultsView, scrollToBottom]);
+	return {
+		resultsViewData,
+		setResultsViewData,
+		isResultsView,
+		scrollContainerRef,
+		isResultsViewRef,
+		handleBackToChat,
+		handleExploreAllResults
+	};
+};
+
+//#endregion
+export { useProductResultsView };

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) => {
@@ -77,6 +84,20 @@ const getCleanOrders = (messages) => {
 	}).filter((o) => o !== null);
 };
 const MOST_RELEVANT_DISPLAY_LIMIT = 8;
+/**
+* Extracts the search query from a message block (or previous blocks) that led to product results.
+* Looks for QueryTyped (metadata.content) or SuggestionClicked (metadata.suggestionContent).
+*/
+const getSearchQueryFromMessageBlock = (messages, productBlockIndex) => {
+	for (let i = productBlockIndex; i >= 0; i -= 1) {
+		const block = messages[i];
+		const queryTyped = block.find((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.QueryTyped);
+		if (queryTyped && "content" in queryTyped.metadata) return queryTyped.metadata.content ?? "";
+		const suggestionClicked = block.find((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.SuggestionClicked);
+		if (suggestionClicked && "suggestionContent" in suggestionClicked.metadata) return suggestionClicked.metadata.suggestionContent ?? "";
+	}
+	return "";
+};
 const getProductCarouselDisplayInfo = (products, numberOfProducts, displayLimit = MOST_RELEVANT_DISPLAY_LIMIT) => {
 	const totalProducts = numberOfProducts ?? products.length;
 	const areProductsMoreThanDisplayLimit = totalProducts > displayLimit;
@@ -93,6 +114,8 @@ exports.checkIfHideAgentName = checkIfHideAgentName;
 exports.getCleanDocuments = getCleanDocuments;
 exports.getCleanOrders = getCleanOrders;
 exports.getCleanProducts = getCleanProducts;
+exports.getCleanProductsForResultsGrid = getCleanProductsForResultsGrid;
 exports.getCleanReviews = getCleanReviews;
 exports.getGroupableMessages = getGroupableMessages;
-exports.getProductCarouselDisplayInfo = getProductCarouselDisplayInfo;
+exports.getProductCarouselDisplayInfo = getProductCarouselDisplayInfo;
+exports.getSearchQueryFromMessageBlock = getSearchQueryFromMessageBlock;

package/dist/FloatingChat/utils/functions.js

@@ -20,23 +20,30 @@ const getGroupableMessages = (message) => {
 const checkIfHideAgentName = (messages) => {
 	return messages.some((msg) => msg.role === MessageRole.Assistant && msg.type !== MessageType.Separator);
 };
+const mapProductMessageToCardProps = (msg) => {
+	if (msg.type !== 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 === 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 === 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 === MessageType.Product ? mapProductMessageToCardProps(msg) : null).filter((p) => p !== null);
 };
 const getCleanReviews = (messages) => {
 	return messages.map((msg) => {
@@ -76,6 +83,20 @@ const getCleanOrders = (messages) => {
 	}).filter((o) => o !== null);
 };
 const MOST_RELEVANT_DISPLAY_LIMIT = 8;
+/**
+* Extracts the search query from a message block (or previous blocks) that led to product results.
+* Looks for QueryTyped (metadata.content) or SuggestionClicked (metadata.suggestionContent).
+*/
+const getSearchQueryFromMessageBlock = (messages, productBlockIndex) => {
+	for (let i = productBlockIndex; i >= 0; i -= 1) {
+		const block = messages[i];
+		const queryTyped = block.find((msg) => msg.type === MessageType.QueryTyped);
+		if (queryTyped && "content" in queryTyped.metadata) return queryTyped.metadata.content ?? "";
+		const suggestionClicked = block.find((msg) => msg.type === MessageType.SuggestionClicked);
+		if (suggestionClicked && "suggestionContent" in suggestionClicked.metadata) return suggestionClicked.metadata.suggestionContent ?? "";
+	}
+	return "";
+};
 const getProductCarouselDisplayInfo = (products, numberOfProducts, displayLimit = MOST_RELEVANT_DISPLAY_LIMIT) => {
 	const totalProducts = numberOfProducts ?? products.length;
 	const areProductsMoreThanDisplayLimit = totalProducts > displayLimit;
@@ -87,4 +108,4 @@ const getProductCarouselDisplayInfo = (products, numberOfProducts, displayLimit
 };
 
 //#endregion
-export { MOST_RELEVANT_DISPLAY_LIMIT, checkIfHideAgentName, getCleanDocuments, getCleanOrders, getCleanProducts, getCleanReviews, getGroupableMessages, getProductCarouselDisplayInfo };
+export { MOST_RELEVANT_DISPLAY_LIMIT, checkIfHideAgentName, getCleanDocuments, getCleanOrders, getCleanProducts, getCleanProductsForResultsGrid, getCleanReviews, getGroupableMessages, getProductCarouselDisplayInfo, getSearchQueryFromMessageBlock };

package/dist/FloatingChat/utils/trackProductCardInteraction.cjs

@@ -0,0 +1,18 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
+let __envive_ai_react_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
+
+//#region src/components/FloatingChat/utils/trackProductCardInteraction.ts
+const trackProductCardClicked = (trackWidgetInteraction, widget, product) => {
+	trackWidgetInteraction({
+		eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+		trigger: {
+			widget,
+			widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.PRODUCT_CARD_CLICKED,
+			widget_interaction_data: { product_card_clicked: { product_id: product.id } }
+		}
+	});
+};
+
+//#endregion
+exports.trackProductCardClicked = trackProductCardClicked;

package/dist/FloatingChat/utils/trackProductCardInteraction.js

@@ -0,0 +1,17 @@
+import { EnviveMetricsEventName } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
+
+//#region src/components/FloatingChat/utils/trackProductCardInteraction.ts
+const trackProductCardClicked = (trackWidgetInteraction, widget, product) => {
+	trackWidgetInteraction({
+		eventName: EnviveMetricsEventName.WidgetInteraction,
+		trigger: {
+			widget,
+			widget_interaction: WidgetInteractionType.PRODUCT_CARD_CLICKED,
+			widget_interaction_data: { product_card_clicked: { product_id: product.id } }
+		}
+	});
+};
+
+//#endregion
+export { trackProductCardClicked };

package/dist/Form/Form.cjs

@@ -5,9 +5,9 @@ const require_buildSubmitButtonElement = require('./utils/buildSubmitButtonEleme
 const require_handleFormsSubmit = require('./utils/handleFormsSubmit.cjs');
 const require_mapTextFields = require('./utils/mapTextFields.cjs');
 let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Form/Form.tsx
 /**

package/dist/Form/Form.js

@@ -4,8 +4,8 @@ import { buildSubmitButtonElement } from "./utils/buildSubmitButtonElement.js";
 import { handleFormsSubmit } from "./utils/handleFormsSubmit.js";
 import { mapTextFields } from "./utils/mapTextFields.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Form/Form.tsx
 /**

package/dist/Form/components/Layout.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Form/components/Layout.tsx
 const Layout = ({ textFields, submitButton, onSubmit, ariaLabel, id, testId, className, style }) => {

package/dist/Form/components/Layout.js

@@ -1,7 +1,7 @@
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Form/components/Layout.tsx
 const Layout = ({ textFields, submitButton, onSubmit, ariaLabel, id, testId, className, style }) => {

package/dist/Form/components/SubmitButtonItem.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_useGetButtonProperties = require('../hooks/useGetButtonProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Form/components/SubmitButtonItem.tsx
 const SubmitButtonItem = ({ label, isDisabled = false, ariaLabel, id, testId, className, style }) => {

package/dist/Form/components/SubmitButtonItem.js

@@ -1,6 +1,6 @@
 import { useGetButtonProperties } from "../hooks/useGetButtonProperties.js";
-import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Form/components/SubmitButtonItem.tsx
 const SubmitButtonItem = ({ label, isDisabled = false, ariaLabel, id, testId, className, style }) => {

package/dist/Form/components/TextFieldItem.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_useGetTextFieldProperties = require('../hooks/useGetTextFieldProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Form/components/TextFieldItem.tsx
 const TextFieldItem = ({ label, value, onChange, type, error, ariaLabel, id, testId, className, style }) => {

package/dist/Form/components/TextFieldItem.js

@@ -1,6 +1,6 @@
 import { useGetTextFieldProperties } from "../hooks/useGetTextFieldProperties.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Form/components/TextFieldItem.tsx
 const TextFieldItem = ({ label, value, onChange, type, error, ariaLabel, id, testId, className, style }) => {

package/dist/FullPageSalesAgent/FullPageSalesAgent.cjs

@@ -13,9 +13,12 @@ require('../ChatFooter/index.cjs');
 const require_Disclaimer = require('../Disclaimer/Disclaimer.cjs');
 require('../Disclaimer/index.cjs');
 const require_WelcomeMessage = require('../WelcomeMessage/WelcomeMessage.cjs');
-const require_index = require('../FloatingChat/components/index.cjs');
 const require_useChatSuggestions = require('../FloatingChat/hooks/useChatSuggestions.cjs');
+const require_useProductResultsView = require('../FloatingChat/hooks/useProductResultsView.cjs');
 const require_useScrollToBottom = require('../FloatingChat/hooks/useScrollToBottom.cjs');
+const require_ResultsGridView = require('../FloatingChat/components/ResultsGridView.cjs');
+const require_trackProductCardInteraction = require('../FloatingChat/utils/trackProductCardInteraction.cjs');
+const require_index = require('../FloatingChat/components/index.cjs');
 require('../WelcomeMessage/index.cjs');
 const require_useIsMobile = require('./hooks/useIsMobile.cjs');
 const require_useGetFooterStyles = require('./hooks/useGetFooterStyles.cjs');
@@ -63,6 +66,7 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 			generalSuggestions
 		]
 	});
+	const { resultsViewData, isResultsView, scrollContainerRef, isResultsViewRef, handleBackToChat, handleExploreAllResults } = require_useProductResultsView.useProductResultsView({ scrollToBottom });
 	const handleScrollToBottom = () => {
 		scrollToBottom();
 		trackWidgetInteraction({
@@ -82,6 +86,9 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 			}
 		});
 	};
+	const handleProductCardClick = (product) => {
+		require_trackProductCardInteraction.trackProductCardClicked(trackWidgetInteraction, __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FULL_PAGE_SALES_AGENT, product);
+	};
 	const welcomeMessage = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: messageContainerClasses,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WelcomeMessage.WelcomeMessage, {
@@ -107,6 +114,7 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 			if (suggestion) onSuggestionClicked(suggestion, __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
+			handleBackToChat();
 		},
 		onChange: setQuery,
 		onSubmit: () => {
@@ -117,6 +125,7 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 			});
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
+			handleBackToChat();
 		},
 		onFocus: handleInputQueryFocus,
 		parentWidget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FULL_PAGE_SALES_AGENT
@@ -135,7 +144,19 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 		neverShowSingleProductCards,
 		showVerifiedBuyer,
 		onFormResponseSubmitted,
-		parentWidget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FULL_PAGE_SALES_AGENT
+		parentWidget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+		onExploreAllResults: (firstProductMessageId) => handleExploreAllResults(firstProductMessageId, messages)
+	});
+	const middleContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FloatingChatComponents.SlideChatContent, {
+		isResultsView,
+		isResultsViewRef,
+		resultsViewData,
+		onBackToChat: handleBackToChat,
+		onProductCardClick: handleProductCardClick,
+		theme: resolvedTheme,
+		chatMessages,
+		scrollToBottom,
+		resultsGridColumns: isMobile ? require_ResultsGridView.NUM_COLUMNS_MOBILE : require_ResultsGridView.NUM_COLUMNS_FPSA
 	});
 	const answerSuggestionsComponent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PromptCarousel.PromptCarousel, {
 		className: "envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end",
@@ -159,14 +180,15 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 	const disclaimer = disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Disclaimer.Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FullPageSAComponents.Layout, {
 		theme: resolvedTheme,
-		welcomeMessage,
+		welcomeMessage: isResultsView ? null : welcomeMessage,
 		footer,
-		chatMessages,
-		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : void 0,
-		disclaimer,
+		chatMessages: middleContent,
+		answerSuggestions: showAnswerSuggestions && !isResultsView ? answerSuggestionsComponent : void 0,
+		scrollToBottomButton: !isResultsView && showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : void 0,
+		disclaimer: isResultsView ? null : disclaimer,
 		headerContainer,
-		autoHeight
+		autoHeight,
+		scrollContainerRef
 	});
 };
 

package/dist/FullPageSalesAgent/FullPageSalesAgent.d.cts

@@ -1,5 +1,5 @@
 import { Theme } from "../tokens/theme/theme.cjs";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime28 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_runtime15.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime28.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_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime20 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_runtime21.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
 export { FullPageSalesAgent };

package/dist/FullPageSalesAgent/FullPageSalesAgent.js

@@ -12,9 +12,12 @@ import "../ChatFooter/index.js";
 import { Disclaimer } from "../Disclaimer/Disclaimer.js";
 import "../Disclaimer/index.js";
 import { WelcomeMessage } from "../WelcomeMessage/WelcomeMessage.js";
-import { FloatingChatComponents } from "../FloatingChat/components/index.js";
 import { useChatSuggestions } from "../FloatingChat/hooks/useChatSuggestions.js";
+import { useProductResultsView } from "../FloatingChat/hooks/useProductResultsView.js";
 import { useScrollToBottom } from "../FloatingChat/hooks/useScrollToBottom.js";
+import { NUM_COLUMNS_FPSA, NUM_COLUMNS_MOBILE } from "../FloatingChat/components/ResultsGridView.js";
+import { trackProductCardClicked } from "../FloatingChat/utils/trackProductCardInteraction.js";
+import { FloatingChatComponents } from "../FloatingChat/components/index.js";
 import "../WelcomeMessage/index.js";
 import { useIsMobile } from "./hooks/useIsMobile.js";
 import { useGetFooterStyles } from "./hooks/useGetFooterStyles.js";
@@ -62,6 +65,7 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 			generalSuggestions
 		]
 	});
+	const { resultsViewData, isResultsView, scrollContainerRef, isResultsViewRef, handleBackToChat, handleExploreAllResults } = useProductResultsView({ scrollToBottom });
 	const handleScrollToBottom = () => {
 		scrollToBottom();
 		trackWidgetInteraction({
@@ -81,6 +85,9 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 			}
 		});
 	};
+	const handleProductCardClick = (product) => {
+		trackProductCardClicked(trackWidgetInteraction, WidgetInteractionComponent.FULL_PAGE_SALES_AGENT, product);
+	};
 	const welcomeMessage = /* @__PURE__ */ jsx("div", {
 		className: messageContainerClasses,
 		children: /* @__PURE__ */ jsx(WelcomeMessage, {
@@ -106,6 +113,7 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 			if (suggestion) onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
+			handleBackToChat();
 		},
 		onChange: setQuery,
 		onSubmit: () => {
@@ -116,6 +124,7 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 			});
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
+			handleBackToChat();
 		},
 		onFocus: handleInputQueryFocus,
 		parentWidget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT
@@ -134,7 +143,19 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 		neverShowSingleProductCards,
 		showVerifiedBuyer,
 		onFormResponseSubmitted,
-		parentWidget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT
+		parentWidget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+		onExploreAllResults: (firstProductMessageId) => handleExploreAllResults(firstProductMessageId, messages)
+	});
+	const middleContent = /* @__PURE__ */ jsx(FloatingChatComponents.SlideChatContent, {
+		isResultsView,
+		isResultsViewRef,
+		resultsViewData,
+		onBackToChat: handleBackToChat,
+		onProductCardClick: handleProductCardClick,
+		theme: resolvedTheme,
+		chatMessages,
+		scrollToBottom,
+		resultsGridColumns: isMobile ? NUM_COLUMNS_MOBILE : NUM_COLUMNS_FPSA
 	});
 	const answerSuggestionsComponent = /* @__PURE__ */ jsx(PromptCarousel, {
 		className: "envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end",
@@ -158,14 +179,15 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 	const disclaimer = disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ jsx(Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0;
 	return /* @__PURE__ */ jsx(FullPageSAComponents.Layout, {
 		theme: resolvedTheme,
-		welcomeMessage,
+		welcomeMessage: isResultsView ? null : welcomeMessage,
 		footer,
-		chatMessages,
-		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : void 0,
-		disclaimer,
+		chatMessages: middleContent,
+		answerSuggestions: showAnswerSuggestions && !isResultsView ? answerSuggestionsComponent : void 0,
+		scrollToBottomButton: !isResultsView && showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : void 0,
+		disclaimer: isResultsView ? null : disclaimer,
 		headerContainer,
-		autoHeight
+		autoHeight,
+		scrollContainerRef
 	});
 };
 

package/dist/FullPageSalesAgent/components/Layout.cjs

@@ -7,12 +7,12 @@ const require_useIsMobile = require('../hooks/useIsMobile.cjs');
 const require_useGetFooterStyles = require('../hooks/useGetFooterStyles.cjs');
 const require_useGetScrollContentStyles = require('../hooks/useGetScrollContentStyles.cjs');
 let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FullPageSalesAgent/components/Layout.tsx
-const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, headerContainer, autoHeight }) => {
+const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, headerContainer, autoHeight, scrollContainerRef }) => {
 	const hasWelcomeMessage = (0, react.isValidElement)(welcomeMessage);
 	const hasAnswerSuggestions = (0, react.isValidElement)(answerSuggestions);
 	const { isMobile } = require_useIsMobile.useIsMobile();
@@ -26,6 +26,7 @@ const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions
 		className: containerClasses,
 		style: containerStyles,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: scrollContainerRef,
 			className: contentClasses,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 				direction: "column",

package/dist/FullPageSalesAgent/components/Layout.js

@@ -6,11 +6,11 @@ import { useIsMobile } from "../hooks/useIsMobile.js";
 import { useGetFooterStyles } from "../hooks/useGetFooterStyles.js";
 import { useGetScrollContentStyles } from "../hooks/useGetScrollContentStyles.js";
 import { isValidElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/FullPageSalesAgent/components/Layout.tsx
-const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, headerContainer, autoHeight }) => {
+const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, headerContainer, autoHeight, scrollContainerRef }) => {
 	const hasWelcomeMessage = isValidElement(welcomeMessage);
 	const hasAnswerSuggestions = isValidElement(answerSuggestions);
 	const { isMobile } = useIsMobile();
@@ -24,6 +24,7 @@ const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions
 		className: containerClasses,
 		style: containerStyles,
 		children: [/* @__PURE__ */ jsxs("div", {
+			ref: scrollContainerRef,
 			className: contentClasses,
 			children: [/* @__PURE__ */ jsxs(Stack, {
 				direction: "column",

package/dist/FullPageSalesAgent/hooks/useIsMobile.cjs

@@ -1,7 +1,7 @@
-const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
+const require_utils_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 
 //#region src/components/FullPageSalesAgent/hooks/useIsMobile.ts
-const useIsMobile = () => require_useCheckIsMobile.useCheckIsMobile("md");
+const useIsMobile = () => require_utils_useCheckIsMobile.useCheckIsMobile("md");
 
 //#endregion
 exports.useIsMobile = useIsMobile;

package/dist/Image/Image.cjs

@@ -7,9 +7,9 @@ const require_useGetRoundedProperties = require('./hooks/useGetRoundedProperties
 const require_useGetAccessibilityProperties = require('./hooks/useGetAccessibilityProperties.cjs');
 const require_useGetWidthProperties = require('./hooks/useGetWidthProperties.cjs');
 const require_useHandleImageLoading = require('./hooks/useHandleImageLoading.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Image/Image.tsx
 /**