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

package/dist/FloatingChat/components/AgentMessage.js

@@ -1,12 +1,13 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
+import { getCleanDocuments, getCleanOrders, getCleanProducts, getCleanReviews } from "../utils/functions.js";
 import { MessageVariant } from "../../Message/types/index.js";
 import { Message } from "../../Message/Message.js";
 import "../../Message/index.js";
 import { useSetAtom } from "../../node_modules/jotai/esm/react.js";
 import { Form } from "../../Form/Form.js";
 import "../../Form/index.js";
-import { getCleanDocuments, getCleanOrders, getCleanProducts, getCleanReviews } from "../utils/functions.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/ChatMessages.cjs

@@ -6,17 +6,17 @@ const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
 const require_resolveTheme = require('../../utils/resolveTheme.cjs');
+const require_functions = require('../utils/functions.cjs');
 const require_index$1 = require('../../Message/types/index.cjs');
 const require_Message = require('../../Message/Message.cjs');
 require('../../Message/index.cjs');
 const require_UserMessage = require('./UserMessage.cjs');
-const require_functions = require('../utils/functions.cjs');
 const require_AgentMessage = require('./AgentMessage.cjs');
 const require_MessageDivider = require('./MessageDivider.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");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 
 //#region src/components/FloatingChat/components/ChatMessages.tsx

package/dist/FloatingChat/components/ChatMessages.js

@@ -5,16 +5,16 @@ import { TypographyColor, TypographyVariant } from "../../Typography/types/index
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
+import { checkIfHideAgentName, getGroupableMessages } from "../utils/functions.js";
 import { MessageVariant } from "../../Message/types/index.js";
 import { Message } from "../../Message/Message.js";
 import "../../Message/index.js";
 import { UserMessage } from "./UserMessage.js";
-import { checkIfHideAgentName, getGroupableMessages } from "../utils/functions.js";
 import { AgentMessage } from "./AgentMessage.js";
 import { MessageDivider } from "./MessageDivider.js";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/FloatingChat/components/ChatMessages.tsx

package/dist/FloatingChat/components/Layout.cjs

@@ -6,12 +6,12 @@ const require_Container = require('../../Container/Container.cjs');
 require('../../Container/index.cjs');
 const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingChat/components/Layout.tsx
-const Layout = ({ id, className, style, testId, theme = require_theme.Theme.GLOBAL_CUSTOM, header, footer, welcomeMessage, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, isFloatingFooterLayout = false, debugBar }) => {
+const Layout = ({ id, className, style, testId, theme = require_theme.Theme.GLOBAL_CUSTOM, header, footer, welcomeMessage, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, isFloatingFooterLayout = false, debugBar, scrollContainerRef }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const hasWelcomeMessage = (0, react.isValidElement)(welcomeMessage);
 	const hasAnswerSuggestions = (0, react.isValidElement)(answerSuggestions);
@@ -29,6 +29,7 @@ const Layout = ({ id, className, style, testId, theme = require_theme.Theme.GLOB
 					children: header
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: scrollContainerRef,
 					className: "envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 						className: "envive-tw-h-full",

package/dist/FloatingChat/components/Layout.js

@@ -5,11 +5,11 @@ import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
 import { isValidElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/components/Layout.tsx
-const Layout = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, header, footer, welcomeMessage, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, isFloatingFooterLayout = false, debugBar }) => {
+const Layout = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, header, footer, welcomeMessage, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, isFloatingFooterLayout = false, debugBar, scrollContainerRef }) => {
 	const finalTheme = resolveTheme(theme);
 	const hasWelcomeMessage = isValidElement(welcomeMessage);
 	const hasAnswerSuggestions = isValidElement(answerSuggestions);
@@ -27,6 +27,7 @@ const Layout = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, hea
 					children: header
 				}),
 				/* @__PURE__ */ jsx("div", {
+					ref: scrollContainerRef,
 					className: "envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out",
 					children: /* @__PURE__ */ jsxs(Stack, {
 						className: "envive-tw-h-full",

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 classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#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 classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#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

@@ -0,0 +1,86 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
+const require_index = require('../../Typography/types/index.cjs');
+const require_Typography = require('../../Typography/Typography.cjs');
+require('../../Typography/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
+const require_types = require('../../SalesAgentProductCard/types/types.cjs');
+const require_SalesAgentProductCard = require('../../SalesAgentProductCard/SalesAgentProductCard.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/FloatingChat/components/ResultsGridView.tsx
+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",
+		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: searchQueryHeadingClassName,
+				children: [
+					"Results for \"",
+					searchQuery,
+					"\""
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				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,
+					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.NUM_COLUMNS_FPSA = NUM_COLUMNS_FPSA;
+exports.NUM_COLUMNS_MOBILE = NUM_COLUMNS_MOBILE;
+exports.ResultsGridView = ResultsGridView;

package/dist/FloatingChat/components/ResultsGridView.js

@@ -0,0 +1,82 @@
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
+import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
+import { Typography } from "../../Typography/Typography.js";
+import "../../Typography/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
+import { SalesAgentProductCardVariant } from "../../SalesAgentProductCard/types/types.js";
+import { SalesAgentProductCard } from "../../SalesAgentProductCard/SalesAgentProductCard.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/FloatingChat/components/ResultsGridView.tsx
+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",
+		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: searchQueryHeadingClassName,
+				children: [
+					"Results for \"",
+					searchQuery,
+					"\""
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: classNames("envive-tw-grid", gridClassName),
+				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 { NUM_COLUMNS_FPSA, NUM_COLUMNS_MOBILE, ResultsGridView };

package/dist/FloatingChat/components/SalesAgentBadgeContent.cjs

@@ -7,9 +7,9 @@ require('../../Typography/index.cjs');
 const require_functions = require('../utils/functions.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingChat/components/SalesAgentBadgeContent.tsx
 const SalesAgentBadgeContent = ({ totalProducts, displayLimit = require_functions.MOST_RELEVANT_DISPLAY_LIMIT, onExploreAllResults }) => {

package/dist/FloatingChat/components/SalesAgentBadgeContent.js

@@ -5,8 +5,8 @@ import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
 import { MOST_RELEVANT_DISPLAY_LIMIT } from "../utils/functions.js";
 import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/components/SalesAgentBadgeContent.tsx
 const SalesAgentBadgeContent = ({ totalProducts, displayLimit = MOST_RELEVANT_DISPLAY_LIMIT, onExploreAllResults }) => {

package/dist/FloatingChat/components/SlideChatContent.cjs

@@ -0,0 +1,47 @@
+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, 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,
+		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",
+		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,46 @@
+import { NUM_COLUMNS_MOBILE, 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, resultsGridColumns = NUM_COLUMNS_MOBILE }) => {
+	const resultsViewContent = resultsViewData && /* @__PURE__ */ jsx(ResultsGridView, {
+		theme,
+		searchQuery: resultsViewData.searchQuery,
+		products: resultsViewData.products,
+		onBackToChat,
+		onProductCardClick,
+		gridCols: resultsGridColumns
+	});
+	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,7 @@
 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');
 const require_OrderLookupCardCarousel = require('./OrderLookupCardCarousel.cjs');
@@ -13,6 +16,9 @@ const require_ModalSheet = require('./ModalSheet.cjs');
 //#region src/components/FloatingChat/components/index.ts
 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,
 	ChatMessages: require_ChatMessages.ChatMessages,

package/dist/FloatingChat/components/index.js

@@ -1,4 +1,7 @@
 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";
 import { OrderLookupCardCarousel } from "./OrderLookupCardCarousel.js";
@@ -13,6 +16,9 @@ import { ModalSheet } from "./ModalSheet.js";
 //#region src/components/FloatingChat/components/index.ts
 const FloatingChatComponents = {
 	Layout,
+	ResultsGridView,
+	ProductResultsModal,
+	SlideChatContent,
 	UserMessage,
 	AgentMessage,
 	ChatMessages,

package/dist/FloatingChat/hooks/useProductResultsView.cjs

@@ -0,0 +1,49 @@
+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 }) => {
+	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);
+	};
+	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,
+			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,
+		handleExploreAllResults
+	};
+};
+
+//#endregion
+exports.useProductResultsView = useProductResultsView;