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

package/dist/FloatingChat/FloatingChat.cjs

@@ -15,14 +15,15 @@ require('../ChatHeader/index.cjs');
 const require_Disclaimer = require('../Disclaimer/Disclaimer.cjs');
 require('../Disclaimer/index.cjs');
 const require_WelcomeMessage = require('../WelcomeMessage/WelcomeMessage.cjs');
-const require_functions = require('./utils/functions.cjs');
-const require_useSnapCalculator = require('./hooks/useSnapCalculator.cjs');
-const require_ModalSheet = require('./components/ModalSheet.cjs');
-const require_index$1 = require('./components/index.cjs');
 const require_useChatSuggestions = require('./hooks/useChatSuggestions.cjs');
+const require_useProductResultsView = require('./hooks/useProductResultsView.cjs');
 const require_useScrollToBottom = require('./hooks/useScrollToBottom.cjs');
 const require_useSnapSetup = require('./hooks/useSnapSetup.cjs');
 const require_useFilteredChatMessages = require('./hooks/useFilteredChatMessages.cjs');
+const require_useSnapCalculator = require('./hooks/useSnapCalculator.cjs');
+const require_functions = require('./utils/functions.cjs');
+const require_ModalSheet = require('./components/ModalSheet.cjs');
+const require_index$1 = require('./components/index.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
@@ -40,6 +41,13 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 	const chatMessagesRef = (0, react.useRef)(null);
 	const { headerBackgroundColor, headerMode, welcomeMessageIconColor, showVerifiedBuyer, userQueryInputEnabled = true, showEnviveLogo, ignoreFirstModelResponse, neverShowSingleProductCards } = floatingChatConfig;
 	const { welcomeMessageTitle, welcomeMessageText, chatFooterTextFieldPlaceholderText, disclaimerText, leftToggleLabel, rightToggleLabel } = hardcopyContent?.values ?? {};
+	const disclaimerTextString = (0, react.useMemo)(() => {
+		if (disclaimerText && typeof disclaimerText === "string") return disclaimerText;
+		if (disclaimerText && Array.isArray(disclaimerText)) {
+			const textString = disclaimerText[0];
+			if (textString && typeof textString === "string") return textString;
+		}
+	}, [disclaimerText]);
 	const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
 	const { messages, isResponseStreaming, isPendingResponse, suggestions, onSuggestionClicked, onTypedMessageSubmitted, onFormResponseSubmitted } = salesAgentData;
 	const { answerSuggestions, generalSuggestions, showAnswerSuggestions, setAnswerSuggestions, setGeneralSuggestions } = require_useChatSuggestions.useChatSuggestions({
@@ -68,6 +76,7 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		footerHeight: 160,
 		isOpen: isFloatingChatOpen
 	});
+	const { resultsViewData, setResultsViewData, isResultsView, scrollContainerRef, isResultsViewRef, handleBackToChat } = require_useProductResultsView.useProductResultsView({ scrollToBottom });
 	(0, react.useEffect)(() => {
 		if (isFloatingChatOpen) trackWidgetInteraction({
 			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
@@ -102,6 +111,16 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		currentSnapPercentage,
 		modalSheetControl
 	});
+	const handleProductCardClick = (product) => {
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FLOATING_CHAT,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.PRODUCT_CARD_CLICKED,
+				widget_interaction_data: { product_card_clicked: { product_id: product.id } }
+			}
+		});
+	};
 	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatHeader.ChatHeader, {
 		logoDark: chatHeaderLogoDarkSrc,
 		logoLight: chatHeaderLogoLightSrc,
@@ -163,6 +182,7 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 			});
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
+			handleBackToChat();
 		},
 		textFieldPlaceholderText: chatFooterTextFieldPlaceholderText,
 		promptSuggestions: isPendingResponse || isResponseStreaming ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
@@ -171,6 +191,7 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 			if (suggestion) onSuggestionClicked(suggestion, __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
+			handleBackToChat();
 		},
 		disabled: isPendingResponse || isResponseStreaming,
 		disabledInput: !userQueryInputEnabled,
@@ -186,10 +207,13 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		theme: finalTheme
 	});
 	const handleExploreAllResults = (firstProductMessageId) => {
-		const products = require_functions.getCleanProducts(messages.find((block) => block.some((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product && msg.id === firstProductMessageId))?.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product) ?? []);
-		console.log("[INFO] [spiffy-ai] Explore All Results clicked", {
-			firstProductMessageId,
-			products
+		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.getCleanProducts(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)
 		});
 	};
 	const chatMessages = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ChatMessages, {
@@ -208,6 +232,16 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		parentWidget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FLOATING_CHAT,
 		onExploreAllResults: handleExploreAllResults
 	});
+	const middleContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.SlideChatContent, {
+		isResultsView,
+		isResultsViewRef,
+		resultsViewData,
+		onBackToChat: handleBackToChat,
+		onProductCardClick: handleProductCardClick,
+		theme: finalTheme,
+		chatMessages,
+		scrollToBottom
+	});
 	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",
 		theme: finalTheme,
@@ -235,12 +269,13 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		theme: finalTheme,
 		header,
 		footer,
-		welcomeMessage,
-		chatMessages,
-		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : void 0,
-		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Disclaimer.Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0,
-		debugBar
+		welcomeMessage: isResultsView ? null : welcomeMessage,
+		chatMessages: middleContent,
+		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : null,
+		scrollToBottomButton: !isResultsView && showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : null,
+		disclaimer: disclaimerTextString ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Disclaimer.Disclaimer, { disclaimerMarkdown: disclaimerTextString }) : null,
+		debugBar,
+		scrollContainerRef
 	});
 	const mobileLayout = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.Layout, {
 		id,
@@ -250,12 +285,13 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		theme: finalTheme,
 		header: mobileHeader,
 		footer,
-		welcomeMessage,
-		chatMessages,
-		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : void 0,
-		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Disclaimer.Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0,
-		isFloatingFooterLayout: isFloatingLayout
+		welcomeMessage: isResultsView ? null : welcomeMessage,
+		chatMessages: middleContent,
+		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : null,
+		scrollToBottomButton: !isResultsView && showScrollButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : null,
+		disclaimer: disclaimerTextString ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Disclaimer.Disclaimer, { disclaimerMarkdown: disclaimerTextString }) : null,
+		isFloatingFooterLayout: isFloatingLayout,
+		scrollContainerRef
 	});
 	return isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalSheet.ModalSheet, {
 		animationKey,

package/dist/FloatingChat/FloatingChat.d.cts

@@ -1,5 +1,5 @@
 import { FloatingChatProps } from "./types/types.cjs";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -18,6 +18,6 @@ declare const FloatingChat: ({
   onClose,
   onSwipeClose,
   onToggleCXButton
-}: FloatingChatProps) => react_jsx_runtime20.JSX.Element;
+}: FloatingChatProps) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { FloatingChat };

package/dist/FloatingChat/FloatingChat.d.ts

@@ -1,5 +1,5 @@
 import { FloatingChatProps } from "./types/types.js";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -18,6 +18,6 @@ declare const FloatingChat: ({
   onClose,
   onSwipeClose,
   onToggleCXButton
-}: FloatingChatProps) => react_jsx_runtime27.JSX.Element;
+}: FloatingChatProps) => react_jsx_runtime25.JSX.Element;
 //#endregion
 export { FloatingChat };

package/dist/FloatingChat/FloatingChat.js

@@ -14,15 +14,16 @@ import "../ChatHeader/index.js";
 import { Disclaimer } from "../Disclaimer/Disclaimer.js";
 import "../Disclaimer/index.js";
 import { WelcomeMessage } from "../WelcomeMessage/WelcomeMessage.js";
-import { getCleanProducts } from "./utils/functions.js";
-import { Unit } from "./hooks/useSnapCalculator.js";
-import { ModalSheet } from "./components/ModalSheet.js";
-import { FloatingChatComponents } from "./components/index.js";
 import { useChatSuggestions } from "./hooks/useChatSuggestions.js";
+import { useProductResultsView } from "./hooks/useProductResultsView.js";
 import { useScrollToBottom } from "./hooks/useScrollToBottom.js";
 import { useSnapSetup } from "./hooks/useSnapSetup.js";
 import { useFilteredChatMessages } from "./hooks/useFilteredChatMessages.js";
-import { useEffect, useRef, useState } from "react";
+import { Unit } from "./hooks/useSnapCalculator.js";
+import { getCleanProducts, getSearchQueryFromMessageBlock } from "./utils/functions.js";
+import { ModalSheet } from "./components/ModalSheet.js";
+import { FloatingChatComponents } from "./components/index.js";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { EnviveMetricsEventName } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
@@ -39,6 +40,13 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 	const chatMessagesRef = useRef(null);
 	const { headerBackgroundColor, headerMode, welcomeMessageIconColor, showVerifiedBuyer, userQueryInputEnabled = true, showEnviveLogo, ignoreFirstModelResponse, neverShowSingleProductCards } = floatingChatConfig;
 	const { welcomeMessageTitle, welcomeMessageText, chatFooterTextFieldPlaceholderText, disclaimerText, leftToggleLabel, rightToggleLabel } = hardcopyContent?.values ?? {};
+	const disclaimerTextString = useMemo(() => {
+		if (disclaimerText && typeof disclaimerText === "string") return disclaimerText;
+		if (disclaimerText && Array.isArray(disclaimerText)) {
+			const textString = disclaimerText[0];
+			if (textString && typeof textString === "string") return textString;
+		}
+	}, [disclaimerText]);
 	const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
 	const { messages, isResponseStreaming, isPendingResponse, suggestions, onSuggestionClicked, onTypedMessageSubmitted, onFormResponseSubmitted } = salesAgentData;
 	const { answerSuggestions, generalSuggestions, showAnswerSuggestions, setAnswerSuggestions, setGeneralSuggestions } = useChatSuggestions({
@@ -67,6 +75,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		footerHeight: 160,
 		isOpen: isFloatingChatOpen
 	});
+	const { resultsViewData, setResultsViewData, isResultsView, scrollContainerRef, isResultsViewRef, handleBackToChat } = useProductResultsView({ scrollToBottom });
 	useEffect(() => {
 		if (isFloatingChatOpen) trackWidgetInteraction({
 			eventName: EnviveMetricsEventName.WidgetInteraction,
@@ -101,6 +110,16 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		currentSnapPercentage,
 		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 } }
+			}
+		});
+	};
 	const header = /* @__PURE__ */ jsx(ChatHeader, {
 		logoDark: chatHeaderLogoDarkSrc,
 		logoLight: chatHeaderLogoLightSrc,
@@ -162,6 +181,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 			});
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
+			handleBackToChat();
 		},
 		textFieldPlaceholderText: chatFooterTextFieldPlaceholderText,
 		promptSuggestions: isPendingResponse || isResponseStreaming ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
@@ -170,6 +190,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 			if (suggestion) onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
+			handleBackToChat();
 		},
 		disabled: isPendingResponse || isResponseStreaming,
 		disabledInput: !userQueryInputEnabled,
@@ -185,10 +206,13 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		theme: finalTheme
 	});
 	const handleExploreAllResults = (firstProductMessageId) => {
-		const products = getCleanProducts(messages.find((block) => block.some((msg) => msg.type === MessageType.Product && msg.id === firstProductMessageId))?.filter((msg) => msg.type === MessageType.Product) ?? []);
-		console.log("[INFO] [spiffy-ai] Explore All Results clicked", {
-			firstProductMessageId,
-			products
+		const 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, {
@@ -207,6 +231,16 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		parentWidget: WidgetInteractionComponent.FLOATING_CHAT,
 		onExploreAllResults: handleExploreAllResults
 	});
+	const middleContent = /* @__PURE__ */ jsx(FloatingChatComponents.SlideChatContent, {
+		isResultsView,
+		isResultsViewRef,
+		resultsViewData,
+		onBackToChat: handleBackToChat,
+		onProductCardClick: handleProductCardClick,
+		theme: finalTheme,
+		chatMessages,
+		scrollToBottom
+	});
 	const answerSuggestionsComponent = /* @__PURE__ */ jsx(PromptCarousel, {
 		className: "envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end",
 		theme: finalTheme,
@@ -234,12 +268,13 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		theme: finalTheme,
 		header,
 		footer,
-		welcomeMessage,
-		chatMessages,
-		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : void 0,
-		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ jsx(Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0,
-		debugBar
+		welcomeMessage: isResultsView ? null : welcomeMessage,
+		chatMessages: middleContent,
+		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : null,
+		scrollToBottomButton: !isResultsView && showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : null,
+		disclaimer: disclaimerTextString ? /* @__PURE__ */ jsx(Disclaimer, { disclaimerMarkdown: disclaimerTextString }) : null,
+		debugBar,
+		scrollContainerRef
 	});
 	const mobileLayout = /* @__PURE__ */ jsx(FloatingChatComponents.Layout, {
 		id,
@@ -249,12 +284,13 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		theme: finalTheme,
 		header: mobileHeader,
 		footer,
-		welcomeMessage,
-		chatMessages,
-		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : void 0,
-		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ jsx(Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0,
-		isFloatingFooterLayout: isFloatingLayout
+		welcomeMessage: isResultsView ? null : welcomeMessage,
+		chatMessages: middleContent,
+		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : null,
+		scrollToBottomButton: !isResultsView && showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: handleScrollToBottom }) : null,
+		disclaimer: disclaimerTextString ? /* @__PURE__ */ jsx(Disclaimer, { disclaimerMarkdown: disclaimerTextString }) : null,
+		isFloatingFooterLayout: isFloatingLayout,
+		scrollContainerRef
 	});
 	return isMobile ? /* @__PURE__ */ jsx(ModalSheet, {
 		animationKey,

package/dist/FloatingChat/components/AgentMessage.cjs

@@ -1,13 +1,13 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_resolveTheme = require('../../utils/resolveTheme.cjs');
+const require_functions = require('../utils/functions.cjs');
 const require_index = require('../../Message/types/index.cjs');
 const require_Message = require('../../Message/Message.cjs');
 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_functions = require('../utils/functions.cjs');
 const require_DocumentRetrievalCardsCarousel = require('./DocumentRetrievalCardsCarousel.cjs');
 const require_OrderLookupCardCarousel = require('./OrderLookupCardCarousel.cjs');
 const require_ReviewCardsCarousel = require('./ReviewCardsCarousel.cjs');

package/dist/FloatingChat/components/AgentMessage.js

@@ -1,12 +1,12 @@
 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 { DocumentRetrievalCardsCarousel } from "./DocumentRetrievalCardsCarousel.js";
 import { OrderLookupCardCarousel } from "./OrderLookupCardCarousel.js";
 import { ReviewCardsCarousel } from "./ReviewCardsCarousel.js";

package/dist/FloatingChat/components/ChatMessages.cjs

@@ -1,16 +1,16 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
+const require_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");

package/dist/FloatingChat/components/ChatMessages.js

@@ -1,15 +1,15 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
+import { 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";

package/dist/FloatingChat/components/Layout.cjs

@@ -1,17 +1,17 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_Container = require('../../Container/Container.cjs');
 require('../../Container/index.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 
 //#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

@@ -1,15 +1,15 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
 import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 
 //#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/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

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
-const require_ArrowIcon = require('../../Carousel/components/ArrowIcon.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
+const require_ArrowIcon = require('../../Carousel/components/ArrowIcon.cjs');
 const require_functions = require('../utils/functions.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);

package/dist/FloatingChat/components/SalesAgentBadgeContent.js

@@ -1,8 +1,8 @@
 import { Stack } from "../../Stack/Stack.js";
-import { ArrowIcon } from "../../Carousel/components/ArrowIcon.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
+import { 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";