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

package/dist/FloatingChat/utils/functions.js

@@ -20,23 +20,30 @@ const getGroupableMessages = (message) => {
 const checkIfHideAgentName = (messages) => {
 	return messages.some((msg) => msg.role === MessageRole.Assistant && msg.type !== MessageType.Separator);
 };
+const mapProductMessageToCardProps = (msg) => {
+	if (msg.type !== MessageType.Product) return null;
+	return {
+		id: msg.id,
+		productName: msg.metadata.title,
+		currentPrice: msg.metadata.salePrice,
+		previousPrice: msg.metadata.originalPrice,
+		pricePrefix: "$",
+		rate: msg.metadata.averageRating,
+		numberOfReviews: msg.metadata.numberReviews,
+		url: msg.metadata.url,
+		image: {
+			src: msg.metadata.imageUrl,
+			alt: `${msg.metadata.title} image`
+		}
+	};
+};
+/** Product cards for carousels; excludes grid-only rows from the API (`isForGrid`). */
 const getCleanProducts = (messages) => {
-	return messages.map((msg) => {
-		if (msg.type === MessageType.Product && !msg.metadata.isForGrid) return {
-			productName: msg.metadata.title,
-			currentPrice: msg.metadata.salePrice,
-			previousPrice: msg.metadata.originalPrice,
-			pricePrefix: "$",
-			rate: msg.metadata.averageRating,
-			numberOfReviews: msg.metadata.numberReviews,
-			url: msg.metadata.url,
-			image: {
-				src: msg.metadata.imageUrl,
-				alt: `${msg.metadata.title} image`
-			}
-		};
-		return null;
-	}).filter((product) => product !== null);
+	return messages.map((msg) => msg.type === MessageType.Product && !msg.metadata.isForGrid ? mapProductMessageToCardProps(msg) : null).filter((p) => p !== null);
+};
+/** All product rows in a turn, including `isForGrid`, for the full results grid. */
+const getCleanProductsForResultsGrid = (messages) => {
+	return messages.map((msg) => msg.type === MessageType.Product ? mapProductMessageToCardProps(msg) : null).filter((p) => p !== null);
 };
 const getCleanReviews = (messages) => {
 	return messages.map((msg) => {
@@ -101,4 +108,4 @@ const getProductCarouselDisplayInfo = (products, numberOfProducts, displayLimit
 };
 
 //#endregion
-export { MOST_RELEVANT_DISPLAY_LIMIT, checkIfHideAgentName, getCleanDocuments, getCleanOrders, getCleanProducts, getCleanReviews, getGroupableMessages, getProductCarouselDisplayInfo, getSearchQueryFromMessageBlock };
+export { MOST_RELEVANT_DISPLAY_LIMIT, checkIfHideAgentName, getCleanDocuments, getCleanOrders, getCleanProducts, getCleanProductsForResultsGrid, getCleanReviews, getGroupableMessages, getProductCarouselDisplayInfo, getSearchQueryFromMessageBlock };

package/dist/FloatingChat/utils/trackProductCardInteraction.cjs

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

package/dist/FloatingChat/utils/trackProductCardInteraction.js

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

package/dist/Form/Form.cjs

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

package/dist/Form/Form.js

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

package/dist/Form/components/Layout.cjs

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

package/dist/Form/components/Layout.js

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

package/dist/Form/components/SubmitButtonItem.cjs

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

package/dist/Form/components/SubmitButtonItem.js

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

package/dist/Form/components/TextFieldItem.cjs

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

package/dist/Form/components/TextFieldItem.js

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

package/dist/FullPageSalesAgent/FullPageSalesAgent.cjs

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

package/dist/FullPageSalesAgent/FullPageSalesAgent.d.cts

@@ -1,5 +1,5 @@
 import { Theme } from "../tokens/theme/theme.cjs";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
@@ -19,6 +19,6 @@ declare const FullPageSalesAgent: ({
   hardcopyContent,
   headerContainer,
   autoHeight
-}: FullPageSalesAgentProps) => react_jsx_runtime23.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime28.JSX.Element;
 //#endregion
 export { FullPageSalesAgent };

package/dist/FullPageSalesAgent/FullPageSalesAgent.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
@@ -19,6 +19,6 @@ declare const FullPageSalesAgent: ({
   hardcopyContent,
   headerContainer,
   autoHeight
-}: FullPageSalesAgentProps) => react_jsx_runtime23.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
 export { FullPageSalesAgent };

package/dist/FullPageSalesAgent/FullPageSalesAgent.js

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

package/dist/FullPageSalesAgent/components/Layout.cjs

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

package/dist/FullPageSalesAgent/components/Layout.js

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

package/dist/FullPageSalesAgent/hooks/useIsMobile.cjs

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

package/dist/Image/Image.cjs

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

package/dist/Image/Image.d.cts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.cjs";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/Image/Image.d.ts
 
@@ -25,6 +25,6 @@ declare const Image: ({
   role,
   "aria-hidden": ariaHidden,
   ...rest
-}: ImageProps) => react_jsx_runtime24.JSX.Element;
+}: ImageProps) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { Image };

package/dist/Image/Image.d.ts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.js";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/components/Image/Image.d.ts
 
@@ -25,6 +25,6 @@ declare const Image: ({
   role,
   "aria-hidden": ariaHidden,
   ...rest
-}: ImageProps) => react_jsx_runtime19.JSX.Element;
+}: ImageProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 export { Image };

package/dist/Image/Image.js

@@ -6,8 +6,8 @@ import { useGetRoundedProperties } from "./hooks/useGetRoundedProperties.js";
 import { useGetAccessibilityProperties } from "./hooks/useGetAccessibilityProperties.js";
 import { useGetWidthProperties } from "./hooks/useGetWidthProperties.js";
 import { useHandleImageLoading } from "./hooks/useHandleImageLoading.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Image/Image.tsx
 /**

package/dist/ImageGallery/ImageGallery.d.cts

@@ -1,5 +1,5 @@
 import { ImageGalleryProps } from "./types/types.cjs";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/components/ImageGallery/ImageGallery.d.ts
 
@@ -40,6 +40,6 @@ declare const ImageGallery: ({
   "aria-describedby": ariaDescribedBy,
   role,
   "aria-hidden": ariaHidden
-}: ImageGalleryProps) => react_jsx_runtime10.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/ImageGallery/ImageGallery.d.ts

@@ -1,5 +1,5 @@
 import { ImageGalleryProps } from "./types/types.js";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/ImageGallery/ImageGallery.d.ts
 
@@ -40,6 +40,6 @@ declare const ImageGallery: ({
   "aria-describedby": ariaDescribedBy,
   role,
   "aria-hidden": ariaHidden
-}: ImageGalleryProps) => react_jsx_runtime20.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/ImageGallery/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_Container = require('../../Container/Container.cjs');
 const require_useResponsiveValue = require('../../utils/useResponsiveValue.cjs');
-const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
+const require_Container = require('../../Container/Container.cjs');
+const require_utils_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 const require_types = require('../types/types.cjs');
 const require_useGetContainerProperties = require('../hooks/useGetContainerProperties.cjs');
 const require_useValidateImages = require('../hooks/useValidateImages.cjs');
 const require_functions = require('../utils/functions.cjs');
 const require_OverlappedLayout = require('./OverlappedLayout.cjs');
 const require_NormalLayout = require('./NormalLayout.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/ImageGallery/components/Layout.tsx
 const Layout = ({ id, testId, className, style, images, layout, theme = require_theme.Theme.GLOBAL_CUSTOM, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role, "aria-hidden": ariaHidden }) => {
@@ -19,7 +19,7 @@ const Layout = ({ id, testId, className, style, images, layout, theme = require_
 		value: layout,
 		fallback: require_types.ImageGalleryLayout.FOUR_GRID
 	});
-	const { isMobile } = require_useCheckIsMobile.useCheckIsMobile();
+	const { isMobile } = require_utils_useCheckIsMobile.useCheckIsMobile();
 	const { displayImages } = require_useValidateImages.useValidateImages({
 		images,
 		resolvedLayout

package/dist/ImageGallery/components/Layout.js

@@ -1,6 +1,6 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
-import { Container } from "../../Container/Container.js";
 import { useResponsiveValue } from "../../utils/useResponsiveValue.js";
+import { Container } from "../../Container/Container.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
 import { ImageGalleryLayout } from "../types/types.js";
 import { useGetContainerProperties } from "../hooks/useGetContainerProperties.js";
@@ -8,8 +8,8 @@ import { useValidateImages } from "../hooks/useValidateImages.js";
 import { getIsTwoSideStandardOnMobile } from "../utils/functions.js";
 import { OverlappedLayout } from "./OverlappedLayout.js";
 import { NormalLayout } from "./NormalLayout.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ImageGallery/components/Layout.tsx
 const Layout = ({ id, testId, className, style, images, layout, theme = Theme.GLOBAL_CUSTOM, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role, "aria-hidden": ariaHidden }) => {

package/dist/ImageGallery/utils/functions.cjs

@@ -1,5 +1,5 @@
-const require_utils = require('../../DesignTokens/components/utils.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
+const require_utils = require('../../DesignTokens/components/utils.cjs');
 const require_types = require('../types/types.cjs');
 
 //#region src/components/ImageGallery/utils/functions.ts

package/dist/ImageGallery/utils/functions.js

@@ -1,5 +1,5 @@
-import { getComputedCSSVariable } from "../../DesignTokens/components/utils.js";
 import { Theme, ThemeCSSVar } from "../../packages/components-v3/tokens/theme/theme.js";
+import { getComputedCSSVariable } from "../../DesignTokens/components/utils.js";
 import { ImageGalleryLayout } from "../types/types.js";
 
 //#region src/components/ImageGallery/utils/functions.ts

package/dist/MarkdownProcessor/MarkdownProcessor.d.cts

@@ -1,5 +1,5 @@
 import { MarkdownProcessorProps } from "./types/types.cjs";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
@@ -8,6 +8,6 @@ declare const MarkdownProcessor: ({
   textColor,
   textVariant,
   onLinkClick
-}: MarkdownProcessorProps) => react_jsx_runtime11.JSX.Element;
+}: MarkdownProcessorProps) => react_jsx_runtime19.JSX.Element;
 //#endregion
 export { MarkdownProcessor };