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

package/dist/FloatingChat/components/ResultsGridView.cjs

@@ -0,0 +1,72 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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_types = require('../../SalesAgentProductCard/types/types.cjs');
+const require_SalesAgentProductCard = require('../../SalesAgentProductCard/SalesAgentProductCard.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/FloatingChat/components/ResultsGridView.tsx
+const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProductCardClick }) => {
+	const finalTheme = require_resolveTheme.resolveTheme(theme);
+	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+		direction: "column",
+		gap: "4",
+		className: "envive-tw-pb-4 envive-tw-pl-4 envive-tw-pr-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "envive-tw-top-0 envive-tw-sticky envive-tw-z-10 envive-tw-mb-2 envive-tw-bg-background-light envive-tw-pb-2 envive-tw-pt-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: onBackToChat,
+					className: "envive-tw-flex envive-tw-items-center envive-tw-gap-1 envive-tw-rounded-global-custom envive-tw-border envive-tw-border-border-medium envive-tw-bg-background-light envive-tw-p-2 envive-tw-shadow-sm hover:envive-tw-border-border-dark",
+					"aria-label": "Back to Chat",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "envive-tw-text-[--envive-colors-text-primary]",
+						"aria-hidden": true,
+						children: "←"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+						variant: require_index.TypographyVariant.B3_MD,
+						color: require_index.TypographyColor.TEXT_PRIMARY,
+						children: "Back to Chat"
+					})]
+				})
+			}),
+			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",
+				children: [
+					"Results for \"",
+					searchQuery,
+					"\""
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "envive-tw-grid envive-tw-grid-cols-2 envive-tw-gap-4",
+				children: products.map((product, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SalesAgentProductCard.SalesAgentProductCard, {
+					variant: require_types.SalesAgentProductCardVariant.LARGE,
+					productName: product.productName,
+					currentPrice: product.currentPrice,
+					previousPrice: product.previousPrice,
+					pricePrefix: product.pricePrefix ?? "$",
+					forceShowCurrentPriceSpace,
+					rate: product.rate,
+					numberOfReviews: product.numberOfReviews,
+					image: product.image,
+					url: product.url,
+					target: "_blank",
+					theme: finalTheme,
+					onClick: () => onProductCardClick?.(product)
+				}, product.id ?? `product-${index}`))
+			})
+		]
+	});
+};
+
+//#endregion
+exports.ResultsGridView = ResultsGridView;

package/dist/FloatingChat/components/ResultsGridView.js

@@ -0,0 +1,71 @@
+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 { SalesAgentProductCardVariant } from "../../SalesAgentProductCard/types/types.js";
+import { SalesAgentProductCard } from "../../SalesAgentProductCard/SalesAgentProductCard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/FloatingChat/components/ResultsGridView.tsx
+const ResultsGridView = ({ theme, searchQuery, products, onBackToChat, onProductCardClick }) => {
+	const finalTheme = resolveTheme(theme);
+	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "column",
+		gap: "4",
+		className: "envive-tw-pb-4 envive-tw-pl-4 envive-tw-pr-4",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "envive-tw-top-0 envive-tw-sticky envive-tw-z-10 envive-tw-mb-2 envive-tw-bg-background-light envive-tw-pb-2 envive-tw-pt-2",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: onBackToChat,
+					className: "envive-tw-flex envive-tw-items-center envive-tw-gap-1 envive-tw-rounded-global-custom envive-tw-border envive-tw-border-border-medium envive-tw-bg-background-light envive-tw-p-2 envive-tw-shadow-sm hover:envive-tw-border-border-dark",
+					"aria-label": "Back to Chat",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "envive-tw-text-[--envive-colors-text-primary]",
+						"aria-hidden": true,
+						children: "←"
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: TypographyVariant.B3_MD,
+						color: TypographyColor.TEXT_PRIMARY,
+						children: "Back to Chat"
+					})]
+				})
+			}),
+			searchQuery && /* @__PURE__ */ jsxs(Typography, {
+				variant: TypographyVariant.B3_MD,
+				color: TypographyColor.TEXT_PRIMARY,
+				className: "envive-tw-mb-2",
+				children: [
+					"Results for \"",
+					searchQuery,
+					"\""
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "envive-tw-grid envive-tw-grid-cols-2 envive-tw-gap-4",
+				children: products.map((product, index) => /* @__PURE__ */ jsx(SalesAgentProductCard, {
+					variant: SalesAgentProductCardVariant.LARGE,
+					productName: product.productName,
+					currentPrice: product.currentPrice,
+					previousPrice: product.previousPrice,
+					pricePrefix: product.pricePrefix ?? "$",
+					forceShowCurrentPriceSpace,
+					rate: product.rate,
+					numberOfReviews: product.numberOfReviews,
+					image: product.image,
+					url: product.url,
+					target: "_blank",
+					theme: finalTheme,
+					onClick: () => onProductCardClick?.(product)
+				}, product.id ?? `product-${index}`))
+			})
+		]
+	});
+};
+
+//#endregion
+export { ResultsGridView };

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_index = require('../../Typography/types/index.cjs');
+const require_Typography = require('../../Typography/Typography.cjs');
+require('../../Typography/index.cjs');
+const require_ArrowIcon = require('../../Carousel/components/ArrowIcon.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 { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
+import { Typography } from "../../Typography/Typography.js";
+import "../../Typography/index.js";
+import { ArrowIcon } from "../../Carousel/components/ArrowIcon.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/components/SlideChatContent.cjs

@@ -0,0 +1,46 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ResultsGridView = require('./ResultsGridView.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region src/components/FloatingChat/components/SlideChatContent.tsx
+const slideVariants = {
+	enter: (isResults) => ({ x: isResults ? "100%" : "-100%" }),
+	center: { x: 0 },
+	exit: (isResults) => ({ x: isResults ? "100%" : "-100%" })
+};
+const SlideChatContent = ({ isResultsView, isResultsViewRef, resultsViewData, onBackToChat, onProductCardClick, theme, chatMessages, scrollToBottom }) => {
+	const resultsViewContent = resultsViewData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResultsGridView.ResultsGridView, {
+		theme,
+		searchQuery: resultsViewData.searchQuery,
+		products: resultsViewData.products,
+		onBackToChat,
+		onProductCardClick
+	});
+	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",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
+			initial: false,
+			mode: "wait",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+				custom: isResultsView,
+				variants: slideVariants,
+				initial: "enter",
+				animate: "center",
+				exit: "exit",
+				transition: {
+					duration: .3,
+					ease: "easeInOut"
+				},
+				onAnimationComplete: () => {
+					if (!isResultsViewRef.current) scrollToBottom();
+				},
+				className: "envive-tw-w-full",
+				children: isResultsView ? resultsViewContent : chatMessages
+			}, isResultsView ? "results" : "chat")
+		})
+	});
+};
+
+//#endregion
+exports.SlideChatContent = SlideChatContent;

package/dist/FloatingChat/components/SlideChatContent.js

@@ -0,0 +1,45 @@
+import { ResultsGridView } from "./ResultsGridView.js";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+
+//#region src/components/FloatingChat/components/SlideChatContent.tsx
+const slideVariants = {
+	enter: (isResults) => ({ x: isResults ? "100%" : "-100%" }),
+	center: { x: 0 },
+	exit: (isResults) => ({ x: isResults ? "100%" : "-100%" })
+};
+const SlideChatContent = ({ isResultsView, isResultsViewRef, resultsViewData, onBackToChat, onProductCardClick, theme, chatMessages, scrollToBottom }) => {
+	const resultsViewContent = resultsViewData && /* @__PURE__ */ jsx(ResultsGridView, {
+		theme,
+		searchQuery: resultsViewData.searchQuery,
+		products: resultsViewData.products,
+		onBackToChat,
+		onProductCardClick
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "envive-tw-relative envive-tw-min-h-[200px] envive-tw-w-full envive-tw-overflow-hidden",
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "wait",
+			children: /* @__PURE__ */ jsx(motion.div, {
+				custom: isResultsView,
+				variants: slideVariants,
+				initial: "enter",
+				animate: "center",
+				exit: "exit",
+				transition: {
+					duration: .3,
+					ease: "easeInOut"
+				},
+				onAnimationComplete: () => {
+					if (!isResultsViewRef.current) scrollToBottom();
+				},
+				className: "envive-tw-w-full",
+				children: isResultsView ? resultsViewContent : chatMessages
+			}, isResultsView ? "results" : "chat")
+		})
+	});
+};
+
+//#endregion
+export { SlideChatContent };

package/dist/FloatingChat/components/index.cjs

@@ -1,4 +1,6 @@
 const require_Layout = require('./Layout.cjs');
+const require_ResultsGridView = require('./ResultsGridView.cjs');
+const require_SlideChatContent = require('./SlideChatContent.cjs');
 const require_UserMessage = require('./UserMessage.cjs');
 const require_DocumentRetrievalCardsCarousel = require('./DocumentRetrievalCardsCarousel.cjs');
 const require_OrderLookupCardCarousel = require('./OrderLookupCardCarousel.cjs');
@@ -13,6 +15,8 @@ const require_ModalSheet = require('./ModalSheet.cjs');
 //#region src/components/FloatingChat/components/index.ts
 const FloatingChatComponents = {
 	Layout: require_Layout.Layout,
+	ResultsGridView: require_ResultsGridView.ResultsGridView,
+	SlideChatContent: require_SlideChatContent.SlideChatContent,
 	UserMessage: require_UserMessage.UserMessage,
 	AgentMessage: require_AgentMessage.AgentMessage,
 	ChatMessages: require_ChatMessages.ChatMessages,

package/dist/FloatingChat/components/index.js

@@ -1,4 +1,6 @@
 import { Layout } from "./Layout.js";
+import { ResultsGridView } from "./ResultsGridView.js";
+import { SlideChatContent } from "./SlideChatContent.js";
 import { UserMessage } from "./UserMessage.js";
 import { DocumentRetrievalCardsCarousel } from "./DocumentRetrievalCardsCarousel.js";
 import { OrderLookupCardCarousel } from "./OrderLookupCardCarousel.js";
@@ -13,6 +15,8 @@ import { ModalSheet } from "./ModalSheet.js";
 //#region src/components/FloatingChat/components/index.ts
 const FloatingChatComponents = {
 	Layout,
+	ResultsGridView,
+	SlideChatContent,
 	UserMessage,
 	AgentMessage,
 	ChatMessages,

package/dist/FloatingChat/hooks/useProductResultsView.cjs

@@ -0,0 +1,36 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/FloatingChat/hooks/useProductResultsView.ts
+const useProductResultsView = ({ scrollToBottom }) => {
+	const [resultsViewData, setResultsViewData] = (0, react.useState)(null);
+	const isResultsView = resultsViewData !== null;
+	const scrollContainerRef = (0, react.useRef)(null);
+	const isResultsViewRef = (0, react.useRef)(isResultsView);
+	isResultsViewRef.current = isResultsView;
+	const handleBackToChat = () => {
+		setResultsViewData(null);
+	};
+	(0, react.useEffect)(() => {
+		if (isResultsView && scrollContainerRef.current) scrollContainerRef.current.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+	}, [isResultsView]);
+	const prevIsResultsViewRef = (0, react.useRef)(isResultsView);
+	(0, react.useEffect)(() => {
+		if (prevIsResultsViewRef.current && !isResultsView) scrollToBottom();
+		prevIsResultsViewRef.current = isResultsView;
+	}, [isResultsView, scrollToBottom]);
+	return {
+		resultsViewData,
+		setResultsViewData,
+		isResultsView,
+		scrollContainerRef,
+		isResultsViewRef,
+		handleBackToChat
+	};
+};
+
+//#endregion
+exports.useProductResultsView = useProductResultsView;

package/dist/FloatingChat/hooks/useProductResultsView.js

@@ -0,0 +1,35 @@
+import { useEffect, useRef, useState } from "react";
+
+//#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);
+	};
+	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
+	};
+};
+
+//#endregion
+export { useProductResultsView };

package/dist/FloatingChat/utils/functions.cjs

@@ -76,11 +76,38 @@ const getCleanOrders = (messages) => {
 		return null;
 	}).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;
+	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;
+exports.getSearchQueryFromMessageBlock = getSearchQueryFromMessageBlock;

package/dist/FloatingChat/utils/functions.js

@@ -75,6 +75,30 @@ const getCleanOrders = (messages) => {
 		return null;
 	}).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;
+	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, getSearchQueryFromMessageBlock };