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

package/dist/DesignTokens/components/FontSize.js

@@ -1,6 +1,6 @@
 import { getComputedCSSVariable } from "./utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/DesignTokens/components/FontSize.tsx
 const FontSize = ({ fontSizeTokens }) => {

package/dist/DesignTokens/components/FontWeight.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils = require('./utils.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/DesignTokens/components/FontWeight.tsx
 const FontWeight = ({ fontWeightTokens }) => {

package/dist/DesignTokens/components/FontWeight.js

@@ -1,6 +1,6 @@
 import { getComputedCSSVariable } from "./utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/DesignTokens/components/FontWeight.tsx
 const FontWeight = ({ fontWeightTokens }) => {

package/dist/DesignTokens/components/LetterSpacing.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils = require('./utils.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/DesignTokens/components/LetterSpacing.tsx
 const LetterSpacing = ({ letterSpacingTokens }) => {

package/dist/DesignTokens/components/LetterSpacing.js

@@ -1,6 +1,6 @@
 import { getComputedCSSVariable } from "./utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/DesignTokens/components/LetterSpacing.tsx
 const LetterSpacing = ({ letterSpacingTokens }) => {

package/dist/DesignTokens/components/LineHeight.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils = require('./utils.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/DesignTokens/components/LineHeight.tsx
 const LineHeight = ({ lineHeightTokens }) => {

package/dist/DesignTokens/components/LineHeight.js

@@ -1,6 +1,6 @@
 import { getComputedCSSVariable } from "./utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/DesignTokens/components/LineHeight.tsx
 const LineHeight = ({ lineHeightTokens }) => {

package/dist/DesignTokens/components/Typography.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/DesignTokens/components/Typography.tsx
 const Typography = () => {

package/dist/DesignTokens/components/Typography.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/DesignTokens/components/Typography.tsx
 const Typography = () => {

package/dist/Disclaimer/components/Container.cjs

@@ -1,11 +1,11 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Container = require('../../Container/Container.cjs');
-require('../../Container/index.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
+const require_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Disclaimer/components/Container.tsx
 const Container$1 = ({ markdownNode, id, testId, className, style }) => {

package/dist/Disclaimer/components/Container.js

@@ -1,9 +1,9 @@
-import { Container } from "../../Container/Container.js";
-import "../../Container/index.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
-import { jsx } from "react/jsx-runtime";
+import { Container } from "../../Container/Container.js";
+import "../../Container/index.js";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Disclaimer/components/Container.tsx
 const Container$1 = ({ markdownNode, id, testId, className, style }) => {

package/dist/DocumentRetrievalCard/DocumentRetrievalCard.d.cts

@@ -1,5 +1,5 @@
 import { DocumentRetrievalCardProps } from "./types/index.cjs";
-import * as react_jsx_runtime28 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/DocumentRetrievalCard/DocumentRetrievalCard.d.ts
 declare const DocumentRetrievalCard: ({
@@ -16,6 +16,6 @@ declare const DocumentRetrievalCard: ({
   onViewArticle,
   ariaLabel,
   viewArticleLabel
-}: DocumentRetrievalCardProps) => react_jsx_runtime28.JSX.Element;
+}: DocumentRetrievalCardProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { DocumentRetrievalCard };

package/dist/DocumentRetrievalCard/DocumentRetrievalCard.d.ts

@@ -1,5 +1,5 @@
 import { DocumentRetrievalCardProps } from "./types/index.js";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/components/DocumentRetrievalCard/DocumentRetrievalCard.d.ts
 declare const DocumentRetrievalCard: ({
@@ -16,6 +16,6 @@ declare const DocumentRetrievalCard: ({
   onViewArticle,
   ariaLabel,
   viewArticleLabel
-}: DocumentRetrievalCardProps) => react_jsx_runtime26.JSX.Element;
+}: DocumentRetrievalCardProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 export { DocumentRetrievalCard };

package/dist/DocumentRetrievalCard/components/Image.cjs

@@ -2,9 +2,9 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_index = require('../../Image/types/index.cjs');
 const require_Image = require('../../Image/Image.cjs');
 require('../../Image/index.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/DocumentRetrievalCard/components/Image.tsx
 const Image$1 = ({ imageUrl, imageAlt, className }) => {

package/dist/DocumentRetrievalCard/components/Image.js

@@ -1,8 +1,8 @@
 import { ImageAspectRatio } from "../../Image/types/index.js";
 import { Image } from "../../Image/Image.js";
 import "../../Image/index.js";
-import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/DocumentRetrievalCard/components/Image.tsx
 const Image$1 = ({ imageUrl, imageAlt, className }) => {

package/dist/DocumentRetrievalCard/components/Layout.cjs

@@ -1,15 +1,15 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Container = require('../../Container/Container.cjs');
-require('../../Container/index.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
+const require_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
 const require_useGetThemeProperties = require('../hooks/useGetThemeProperties.cjs');
 const require_useGetStackLayoutProperties = require('../hooks/useGetStackLayoutProperties.cjs');
 const require_useGetCardWidthProperties = require('../hooks/useGetCardWidthProperties.cjs');
 const require_useGetPaddingProperties = require('../hooks/useGetPaddingProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/DocumentRetrievalCard/components/Layout.tsx
 const Layout = ({ content, image, viewArticleButton, id, testId, className, style, theme, ariaLabel }) => {

package/dist/DocumentRetrievalCard/components/Layout.js

@@ -1,13 +1,13 @@
-import { Container } from "../../Container/Container.js";
-import "../../Container/index.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
+import { Container } from "../../Container/Container.js";
+import "../../Container/index.js";
 import { useGetThemeProperties } from "../hooks/useGetThemeProperties.js";
 import { useGetStackLayoutProperties } from "../hooks/useGetStackLayoutProperties.js";
 import { useGetCardWidthProperties } from "../hooks/useGetCardWidthProperties.js";
 import { useGetPaddingProperties } from "../hooks/useGetPaddingProperties.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/DocumentRetrievalCard/components/Layout.tsx
 const Layout = ({ content, image, viewArticleButton, id, testId, className, style, theme, ariaLabel }) => {

package/dist/DocumentRetrievalCard/components/ViewArticleButton/components/Icon.cjs

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
-const require_CustomIcon = require('../../../../utils/CustomIcon.cjs');
 const require_Stack = require('../../../../Stack/Stack.cjs');
 require('../../../../Stack/index.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
+const require_CustomIcon = require('../../../../utils/CustomIcon.cjs');
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_icons_Document = require("@envive-ai/react-icons/Document");
 __envive_ai_react_icons_Document = require_rolldown_runtime.__toESM(__envive_ai_react_icons_Document);
 

package/dist/DocumentRetrievalCard/components/ViewArticleButton/components/Icon.js

@@ -1,8 +1,8 @@
-import { CustomIcon } from "../../../../utils/CustomIcon.js";
 import { Stack } from "../../../../Stack/Stack.js";
 import "../../../../Stack/index.js";
-import { jsx } from "react/jsx-runtime";
+import { CustomIcon } from "../../../../utils/CustomIcon.js";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 import Document from "@envive-ai/react-icons/Document";
 
 //#region src/components/DocumentRetrievalCard/components/ViewArticleButton/components/Icon.tsx

package/dist/DocumentRetrievalCard/components/ViewArticleButton/components/Label.cjs

@@ -5,9 +5,9 @@ const require_index = require('../../../../Typography/types/index.cjs');
 const require_Typography = require('../../../../Typography/Typography.cjs');
 require('../../../../Typography/index.cjs');
 const require_useGetLabelUnderlineProperties = require('../../../hooks/useGetLabelUnderlineProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/DocumentRetrievalCard/components/ViewArticleButton/components/Label.tsx
 const Label = ({ viewArticleLabel, typographyVariant, shouldUnderline = false, textCaseClassName }) => {

package/dist/DocumentRetrievalCard/components/ViewArticleButton/components/Label.js

@@ -4,8 +4,8 @@ import { TypographyColor } from "../../../../Typography/types/index.js";
 import { Typography } from "../../../../Typography/Typography.js";
 import "../../../../Typography/index.js";
 import { useGetLabelUnderlineProperties } from "../../../hooks/useGetLabelUnderlineProperties.js";
-import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/DocumentRetrievalCard/components/ViewArticleButton/components/Label.tsx
 const Label = ({ viewArticleLabel, typographyVariant, shouldUnderline = false, textCaseClassName }) => {

package/dist/DocumentRetrievalCard/components/ViewArticleButton/components/Layout.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
 const require_Stack = require('../../../../Stack/Stack.cjs');
 require('../../../../Stack/index.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/DocumentRetrievalCard/components/ViewArticleButton/components/Layout.tsx
 const Layout = ({ icon, label, onClick, className, ariaLabel }) => {

package/dist/DocumentRetrievalCard/components/ViewArticleButton/components/Layout.js

@@ -1,7 +1,7 @@
 import { Stack } from "../../../../Stack/Stack.js";
 import "../../../../Stack/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/DocumentRetrievalCard/components/ViewArticleButton/components/Layout.tsx
 const Layout = ({ icon, label, onClick, className, ariaLabel }) => {

package/dist/FloatingButton/FloatingButton.d.cts

@@ -1,5 +1,5 @@
 import { FloatingButtonProps } from "./types/types.cjs";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/components/FloatingButton/FloatingButton.d.ts
 declare const FloatingButton: ({
@@ -18,6 +18,6 @@ declare const FloatingButton: ({
   onMouseOver,
   ariaLabel,
   previewMode
-}: FloatingButtonProps) => react_jsx_runtime17.JSX.Element;
+}: FloatingButtonProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 export { FloatingButton };

package/dist/FloatingButton/FloatingButton.d.ts

@@ -1,5 +1,5 @@
 import { FloatingButtonProps } from "./types/types.js";
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 
 //#region src/components/FloatingButton/FloatingButton.d.ts
 declare const FloatingButton: ({
@@ -18,6 +18,6 @@ declare const FloatingButton: ({
   onMouseOver,
   ariaLabel,
   previewMode
-}: FloatingButtonProps) => react_jsx_runtime35.JSX.Element;
+}: FloatingButtonProps) => react_jsx_runtime31.JSX.Element;
 //#endregion
 export { FloatingButton };

package/dist/FloatingButton/components/Button.cjs

@@ -2,9 +2,9 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_types = require('../types/types.cjs');
 const require_useGetButtonHoverProperties = require('../hooks/useGetButtonHoverProperties.cjs');
 const require_useGetButtonProperties = require('../hooks/useGetButtonProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingButton/components/Button.tsx
 const Button = ({ variant = require_types.FloatingButtonVariant.ATTACHED, mode = require_types.FloatingButtonMode.LIGHT, backgroundColor, onClick, onMouseOver, onFocus, children, className = "", ariaLabel }) => {

package/dist/FloatingButton/components/Button.js

@@ -1,8 +1,8 @@
 import { FloatingButtonMode, FloatingButtonVariant } from "../types/types.js";
 import { useGetButtonHoverProperties } from "../hooks/useGetButtonHoverProperties.js";
 import { useGetButtonProperties } from "../hooks/useGetButtonProperties.js";
-import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/FloatingButton/components/Button.tsx
 const Button = ({ variant = FloatingButtonVariant.ATTACHED, mode = FloatingButtonMode.LIGHT, backgroundColor, onClick, onMouseOver, onFocus, children, className = "", ariaLabel }) => {

package/dist/FloatingButton/components/Container.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_types = require('../types/types.cjs');
 const require_useGetContainerProperties = require('../hooks/useGetContainerProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingButton/components/Container.tsx
 const Container = ({ location = require_types.FloatingButtonLocation.BOTTOM_RIGHT, show = require_types.FloatingButtonShow.ALWAYS, variant = require_types.FloatingButtonVariant.ATTACHED, hasInteractionHappened = false, children, id, testId, className = "", style, previewMode = false }) => {

package/dist/FloatingButton/components/Container.js

@@ -1,7 +1,7 @@
 import { FloatingButtonLocation, FloatingButtonShow, FloatingButtonVariant } from "../types/types.js";
 import { useGetContainerProperties } from "../hooks/useGetContainerProperties.js";
-import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/FloatingButton/components/Container.tsx
 const Container = ({ location = FloatingButtonLocation.BOTTOM_RIGHT, show = FloatingButtonShow.ALWAYS, variant = FloatingButtonVariant.ATTACHED, hasInteractionHappened = false, children, id, testId, className = "", style, previewMode = false }) => {

package/dist/FloatingButton/components/Wrapper.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_types = require('../types/types.cjs');
 const require_useGetWrapperProperties = require('../hooks/useGetWrapperProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingButton/components/Wrapper.tsx
 const Wrapper = ({ location = require_types.FloatingButtonLocation.BOTTOM_RIGHT, children, className = "" }) => {

package/dist/FloatingButton/components/Wrapper.js

@@ -1,7 +1,7 @@
 import { FloatingButtonLocation } from "../types/types.js";
 import { useGetWrapperProperties } from "../hooks/useGetWrapperProperties.js";
-import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/FloatingButton/components/Wrapper.tsx
 const Wrapper = ({ location = FloatingButtonLocation.BOTTOM_RIGHT, children, className = "" }) => {

package/dist/FloatingChat/FloatingChat.cjs

@@ -21,7 +21,7 @@ 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_trackProductCardInteraction = require('./utils/trackProductCardInteraction.cjs');
 const require_ModalSheet = require('./components/ModalSheet.cjs');
 const require_index$1 = require('./components/index.cjs');
 let react = require("react");
@@ -33,7 +33,7 @@ let framer_motion = require("framer-motion");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 
 //#region src/components/FloatingChat/FloatingChat.tsx
-const FloatingChat = ({ id, className, style, testId, theme = require_theme.Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, hardcopyContent, lookAndFeelConfig, isCXButtonSwitchEnabled, isFloatingChatOpen, debugBar, onClose, onSwipeClose, onToggleCXButton }) => {
+const FloatingChat = ({ id, className, style, testId, theme = require_theme.Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, hardcopyContent, lookAndFeelConfig, isCXButtonSwitchEnabled, isFloatingChatOpen, debugBar, onClose, onSwipeClose, onToggleCXButton, setIsResultsModalOpen }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
 	const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = require_usePromptCarouselAnalytics.usePromptCarouselAnalytics(__envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FLOATING_CHAT, (text) => text);
@@ -76,7 +76,15 @@ 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 });
+	const { resultsViewData, isResultsView, scrollContainerRef, isResultsViewRef, handleBackToChat, handleExploreAllResults } = require_useProductResultsView.useProductResultsView({ scrollToBottom });
+	(0, react.useEffect)(() => {
+		setIsResultsModalOpen?.(!isMobile && isResultsView && resultsViewData !== null);
+	}, [
+		isMobile,
+		isResultsView,
+		resultsViewData,
+		setIsResultsModalOpen
+	]);
 	(0, react.useEffect)(() => {
 		if (isFloatingChatOpen) trackWidgetInteraction({
 			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
@@ -112,14 +120,7 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		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 } }
-			}
-		});
+		require_trackProductCardInteraction.trackProductCardClicked(trackWidgetInteraction, __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FLOATING_CHAT, product);
 	};
 	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatHeader.ChatHeader, {
 		logoDark: chatHeaderLogoDarkSrc,
@@ -206,16 +207,6 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		text: welcomeMessageText,
 		theme: finalTheme
 	});
-	const handleExploreAllResults = (firstProductMessageId) => {
-		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, {
 		theme: finalTheme,
 		ref: chatMessagesRef,
@@ -230,7 +221,7 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		showVerifiedBuyer,
 		onFormResponseSubmitted,
 		parentWidget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FLOATING_CHAT,
-		onExploreAllResults: handleExploreAllResults
+		onExploreAllResults: (firstProductMessageId) => handleExploreAllResults(firstProductMessageId, filteredMessages)
 	});
 	const middleContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.SlideChatContent, {
 		isResultsView,
@@ -293,6 +284,18 @@ const FloatingChat = ({ id, className, style, testId, theme = require_theme.Them
 		isFloatingFooterLayout: isFloatingLayout,
 		scrollContainerRef
 	});
+	if (!isMobile && isResultsView && resultsViewData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.FloatingChatComponents.ProductResultsModal, {
+		theme: finalTheme,
+		resultsViewData,
+		onBackToChat: handleBackToChat,
+		onProductCardClick: handleProductCardClick,
+		onClose,
+		logoDark: chatHeaderLogoDarkSrc,
+		logoLight: chatHeaderLogoLightSrc,
+		headerBgColor: headerBackgroundColor,
+		headerMode,
+		footer
+	});
 	return isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalSheet.ModalSheet, {
 		animationKey,
 		open: isOpen,

package/dist/FloatingChat/FloatingChat.d.cts

@@ -1,5 +1,5 @@
 import { FloatingChatProps } from "./types/types.cjs";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -17,7 +17,8 @@ declare const FloatingChat: ({
   debugBar,
   onClose,
   onSwipeClose,
-  onToggleCXButton
-}: FloatingChatProps) => react_jsx_runtime29.JSX.Element;
+  onToggleCXButton,
+  setIsResultsModalOpen
+}: FloatingChatProps) => react_jsx_runtime21.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_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -17,7 +17,8 @@ declare const FloatingChat: ({
   debugBar,
   onClose,
   onSwipeClose,
-  onToggleCXButton
-}: FloatingChatProps) => react_jsx_runtime25.JSX.Element;
+  onToggleCXButton,
+  setIsResultsModalOpen
+}: FloatingChatProps) => react_jsx_runtime22.JSX.Element;
 //#endregion
 export { FloatingChat };

package/dist/FloatingChat/FloatingChat.js

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