@envive-ai/react-widgets-v3 0.3.8 → 0.3.9

package/dist/CXIntegration/hooks/useUnifiedCXButton.cjs

@@ -1,12 +1,13 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_types = require('../types.cjs');
 const require_functions = require('../utils/functions.cjs');
+let __envive_ai_react_hooks_contexts_pageContext = require("@envive-ai/react-hooks/contexts/pageContext");
 let jotai = require("jotai");
 let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
 
 //#region src/CXIntegration/hooks/useUnifiedCXButton.ts
 const useUnifiedCXButton = ({ enabled = false, provider = require_types.CustomerServiceType.unsupported, suppressMerchantButton = false, onSwitchToAgent }) => {
-	const supportedEvent = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_app.supportedEventAtom);
+	const { isSupported } = (0, __envive_ai_react_hooks_contexts_pageContext.usePage)();
 	const hasParsedVariantInfo = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_app.hasParsedVariantInfoAtom);
 	const selectedCustomerService = require_functions.findCustomerServiceImpl(provider)({
 		onSwitchToAgent,
@@ -14,7 +15,7 @@ const useUnifiedCXButton = ({ enabled = false, provider = require_types.Customer
 	});
 	if (!enabled) return void 0;
 	if (suppressMerchantButton) {
-		if (!(hasParsedVariantInfo && supportedEvent?.supported)) return void 0;
+		if (!(hasParsedVariantInfo && isSupported)) return void 0;
 	}
 	if (!selectedCustomerService.isSwitchEnabled() && !window?._spiffy?.selectedCustomizeOption) return;
 	if (window?._spiffy?.selectedCustomizeOption && provider === require_types.CustomerServiceType.unsupported) return;

package/dist/CXIntegration/hooks/useUnifiedCXButton.js

@@ -1,11 +1,12 @@
 import { CustomerServiceType } from "../types.js";
 import { findCustomerServiceImpl } from "../utils/functions.js";
+import { usePage } from "@envive-ai/react-hooks/contexts/pageContext";
 import { useAtomValue } from "jotai";
-import { hasParsedVariantInfoAtom, supportedEventAtom } from "@envive-ai/react-hooks/atoms/app";
+import { hasParsedVariantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
 
 //#region src/CXIntegration/hooks/useUnifiedCXButton.ts
 const useUnifiedCXButton = ({ enabled = false, provider = CustomerServiceType.unsupported, suppressMerchantButton = false, onSwitchToAgent }) => {
-	const supportedEvent = useAtomValue(supportedEventAtom);
+	const { isSupported } = usePage();
 	const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
 	const selectedCustomerService = findCustomerServiceImpl(provider)({
 		onSwitchToAgent,
@@ -13,7 +14,7 @@ const useUnifiedCXButton = ({ enabled = false, provider = CustomerServiceType.un
 	});
 	if (!enabled) return void 0;
 	if (suppressMerchantButton) {
-		if (!(hasParsedVariantInfo && supportedEvent?.supported)) return void 0;
+		if (!(hasParsedVariantInfo && isSupported)) return void 0;
 	}
 	if (!selectedCustomerService.isSwitchEnabled() && !window?._spiffy?.selectedCustomizeOption) return;
 	if (window?._spiffy?.selectedCustomizeOption && provider === CustomerServiceType.unsupported) return;

package/dist/hocs/withBaseWidget/withBaseWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime14.JSX.Element;
+  (props: P): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs

@@ -16,15 +16,12 @@ let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/ap
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx
 const ChatPreviewComparisonWidgetHandler = (props) => {
-	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
+	const { onSuggestionClicked } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
 	const lastAssistantMessage = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom);
 	const variantInfo = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_app.variantInfoAtom);
 	const productId = variantInfo.variant === __envive_ai_react_hooks_application_models.VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
 	const { suggestions } = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.chatAtom);
-	const promptButtonTexts = (0, react.useMemo)(() => {
-		return suggestions.map((suggestion) => suggestion.content);
-	}, [suggestions]);
 	const messageText = (0, react.useMemo)(() => require_functions.getMessageText(lastAssistantMessage), [lastAssistantMessage]);
 	const productImageUrls = (0, react.useMemo)(() => lastAssistantMessage ? require_functions.getRecentProductImageUrls(lastAssistantMessage, productId) : [], [lastAssistantMessage, productId]);
 	const images = (0, react.useMemo)(() => productImageUrls ? productImageUrls.map((url, index) => ({
@@ -38,18 +35,14 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 		titleLabel: hardcopyContent?.values?.titleLabel,
 		headlineText: hardcopyContent?.values?.headlineText,
 		textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
-		messageText,
-		promptButtonTexts
+		messageText
 	};
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
-	const handlePromptButtonClick = (0, react.useCallback)((text) => {
-		onTypedMessageSubmitted({
-			query: text,
-			userTyped: false
-		});
+	const handlePromptButtonClick = (0, react.useCallback)((suggestion) => {
+		onSuggestionClicked(suggestion, __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
-	}, [onTypedMessageSubmitted, openChat]);
+	}, [onSuggestionClicked, openChat]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
 	}, [openChat]);
@@ -69,7 +62,7 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 		titleLabel: hardCopyContent?.titleLabel,
 		headlineText: hardCopyContent?.headlineText,
 		messageText: hardCopyContent?.messageText,
-		promptButtonTexts: hardCopyContent?.promptButtonTexts,
+		promptButtons: suggestions,
 		textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
 		images: images ?? [],
 		logoSrc: logoSrc ?? void 0

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime9.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime9.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime12.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime15.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime12.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime15.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js

@@ -15,15 +15,12 @@ import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx
 const ChatPreviewComparisonWidgetHandler = (props) => {
-	const { onTypedMessageSubmitted } = useSalesAgent();
+	const { onSuggestionClicked } = useSalesAgent();
 	const { openChat } = useChatToggle();
 	const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
 	const variantInfo = useAtomValue(variantInfoAtom);
 	const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
 	const { suggestions } = useAtomValue(chatAtom);
-	const promptButtonTexts = useMemo(() => {
-		return suggestions.map((suggestion) => suggestion.content);
-	}, [suggestions]);
 	const messageText = useMemo(() => getMessageText(lastAssistantMessage), [lastAssistantMessage]);
 	const productImageUrls = useMemo(() => lastAssistantMessage ? getRecentProductImageUrls(lastAssistantMessage, productId) : [], [lastAssistantMessage, productId]);
 	const images = useMemo(() => productImageUrls ? productImageUrls.map((url, index) => ({
@@ -37,18 +34,14 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 		titleLabel: hardcopyContent?.values?.titleLabel,
 		headlineText: hardcopyContent?.values?.headlineText,
 		textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
-		messageText,
-		promptButtonTexts
+		messageText
 	};
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
-	const handlePromptButtonClick = useCallback((text) => {
-		onTypedMessageSubmitted({
-			query: text,
-			userTyped: false
-		});
+	const handlePromptButtonClick = useCallback((suggestion) => {
+		onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
-	}, [onTypedMessageSubmitted, openChat]);
+	}, [onSuggestionClicked, openChat]);
 	const handleTextFieldClick = useCallback(() => {
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
 	}, [openChat]);
@@ -68,7 +61,7 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 		titleLabel: hardCopyContent?.titleLabel,
 		headlineText: hardCopyContent?.headlineText,
 		messageText: hardCopyContent?.messageText,
-		promptButtonTexts: hardCopyContent?.promptButtonTexts,
+		promptButtons: suggestions,
 		textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
 		images: images ?? [],
 		logoSrc: logoSrc ?? void 0

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime6.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime6.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime6.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime6.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime12.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.cjs

@@ -16,13 +16,10 @@ let __envive_ai_react_toolkit_v3_ChatPreview = require("@envive-ai/react-toolkit
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx
 const ChatPreviewWidgetHandler = (props) => {
-	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
+	const { onSuggestionClicked } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
 	const lastAssistantMessage = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom);
 	const { suggestions } = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.chatAtom);
-	const promptButtonTexts = (0, react.useMemo)(() => {
-		return suggestions.map((suggestion) => suggestion.content);
-	}, [suggestions]);
 	const messageText = (0, react.useMemo)(() => require_functions.getMessageText(lastAssistantMessage), [lastAssistantMessage]);
 	const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 	const chatPreviewWidgetConfig = widgetConfig;
@@ -30,8 +27,8 @@ const ChatPreviewWidgetHandler = (props) => {
 	const hardCopyContent = {
 		titleLabel: hardcopyContent?.values?.titleLabel,
 		textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
-		messageText,
-		promptButtonTexts
+		promptButtons: suggestions,
+		messageText
 	};
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
 	(0, react.useEffect)(() => {
@@ -45,13 +42,10 @@ const ChatPreviewWidgetHandler = (props) => {
 	}, [trackEvent, widgetConfigId]);
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
-	const handlePromptButtonClick = (0, react.useCallback)((text) => {
-		onTypedMessageSubmitted({
-			query: text,
-			userTyped: false
-		});
+	const handlePromptButtonClick = (0, react.useCallback)((suggestion) => {
+		onSuggestionClicked(suggestion, __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
-	}, [onTypedMessageSubmitted, openChat]);
+	}, [onSuggestionClicked, openChat]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
 	}, [openChat]);
@@ -69,7 +63,7 @@ const ChatPreviewWidgetHandler = (props) => {
 	const widgetContentProps = {
 		titleLabel: hardCopyContent?.titleLabel,
 		messageText: hardCopyContent?.messageText,
-		promptButtonTexts: hardCopyContent?.promptButtonTexts,
+		promptButtons: hardCopyContent?.promptButtons,
 		textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
 		logoSrc: logoSrc ?? void 0
 	};

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts
 declare const ChatPreviewWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime11.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewWidgetProps {
 declare const ChatPreviewWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewWidgetProps): react_jsx_runtime11.JSX.Element;
+  }: ChatPreviewWidgetProps): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts
 declare const ChatPreviewWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewWidgetProps {
 declare const ChatPreviewWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: ChatPreviewWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.js

@@ -15,13 +15,10 @@ import { ChatPreview } from "@envive-ai/react-toolkit-v3/ChatPreview";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx
 const ChatPreviewWidgetHandler = (props) => {
-	const { onTypedMessageSubmitted } = useSalesAgent();
+	const { onSuggestionClicked } = useSalesAgent();
 	const { openChat } = useChatToggle();
 	const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
 	const { suggestions } = useAtomValue(chatAtom);
-	const promptButtonTexts = useMemo(() => {
-		return suggestions.map((suggestion) => suggestion.content);
-	}, [suggestions]);
 	const messageText = useMemo(() => getMessageText(lastAssistantMessage), [lastAssistantMessage]);
 	const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 	const chatPreviewWidgetConfig = widgetConfig;
@@ -29,8 +26,8 @@ const ChatPreviewWidgetHandler = (props) => {
 	const hardCopyContent = {
 		titleLabel: hardcopyContent?.values?.titleLabel,
 		textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
-		messageText,
-		promptButtonTexts
+		promptButtons: suggestions,
+		messageText
 	};
 	const { trackEvent } = useAmplitude();
 	useEffect(() => {
@@ -44,13 +41,10 @@ const ChatPreviewWidgetHandler = (props) => {
 	}, [trackEvent, widgetConfigId]);
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
-	const handlePromptButtonClick = useCallback((text) => {
-		onTypedMessageSubmitted({
-			query: text,
-			userTyped: false
-		});
+	const handlePromptButtonClick = useCallback((suggestion) => {
+		onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
-	}, [onTypedMessageSubmitted, openChat]);
+	}, [onSuggestionClicked, openChat]);
 	const handleTextFieldClick = useCallback(() => {
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
 	}, [openChat]);
@@ -68,7 +62,7 @@ const ChatPreviewWidgetHandler = (props) => {
 	const widgetContentProps = {
 		titleLabel: hardCopyContent?.titleLabel,
 		messageText: hardCopyContent?.messageText,
-		promptButtonTexts: hardCopyContent?.promptButtonTexts,
+		promptButtons: hardCopyContent?.promptButtons,
 		textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
 		logoSrc: logoSrc ?? void 0
 	};

package/dist/widgets/FloatingChatWidget/FloatingChatOverlay.cjs

@@ -7,11 +7,12 @@ classnames = require_rolldown_runtime.__toESM(classnames);
 
 //#region src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx
 const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false }) => {
-	const overlayClasses = (0, classnames.default)("envive-floating-chat-overlay", previewMode ? "envive-tw-absolute" : "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", previewMode ? "envive-tw-h-full" : "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
-	const backdropClasses = (0, classnames.default)("envive-floating-chat-backdrop", "envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-bg-black", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
-	const overlayContentClasses = (0, classnames.default)("envive-floating-chat-overlay-content", "envive-tw-relative", "envive-tw-flex", "envive-tw-justify-end", "envive-tw-items-stretch", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-pointer-events-auto", "envive-tw-cursor-pointer", "envive-tw-z-10");
+	const overlayClasses = (0, classnames.default)(previewMode ? "envive-tw-absolute" : "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", previewMode ? "envive-tw-h-full" : "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
+	const backdropClasses = (0, classnames.default)("envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-bg-black", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
+	const overlayContentClasses = (0, classnames.default)("envive-tw-relative", "envive-tw-flex", "envive-tw-justify-end", "envive-tw-items-stretch", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-pointer-events-auto", "envive-tw-cursor-pointer", "envive-tw-z-10");
 	const chatWrapper = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: isOpened && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
 		className: overlayClasses,
+		style: { top: "0px" },
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
@@ -26,6 +27,7 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			"aria-label": "Close chat"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: overlayContentClasses,
+			style: { top: "0px" },
 			onClick: onClose,
 			onKeyDown: (e) => {
 				if (e.key === "Escape") onClose();

package/dist/widgets/FloatingChatWidget/FloatingChatOverlay.js

@@ -5,11 +5,12 @@ import classNames from "classnames";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx
 const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false }) => {
-	const overlayClasses = classNames("envive-floating-chat-overlay", previewMode ? "envive-tw-absolute" : "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", previewMode ? "envive-tw-h-full" : "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
-	const backdropClasses = classNames("envive-floating-chat-backdrop", "envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-bg-black", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
-	const overlayContentClasses = classNames("envive-floating-chat-overlay-content", "envive-tw-relative", "envive-tw-flex", "envive-tw-justify-end", "envive-tw-items-stretch", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-pointer-events-auto", "envive-tw-cursor-pointer", "envive-tw-z-10");
+	const overlayClasses = classNames(previewMode ? "envive-tw-absolute" : "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", previewMode ? "envive-tw-h-full" : "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
+	const backdropClasses = classNames("envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-bg-black", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
+	const overlayContentClasses = classNames("envive-tw-relative", "envive-tw-flex", "envive-tw-justify-end", "envive-tw-items-stretch", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-pointer-events-auto", "envive-tw-cursor-pointer", "envive-tw-z-10");
 	const chatWrapper = /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsxs(motion.div, {
 		className: overlayClasses,
+		style: { top: "0px" },
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
@@ -24,6 +25,7 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			"aria-label": "Close chat"
 		}), /* @__PURE__ */ jsx("div", {
 			className: overlayContentClasses,
+			style: { top: "0px" },
 			onClick: onClose,
 			onKeyDown: (e) => {
 				if (e.key === "Escape") onClose();

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -9,7 +9,7 @@ declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
     previewChatAlwaysOpen
-  }?: FloatingChatWidgetProps): react_jsx_runtime8.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -9,7 +9,7 @@ declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
     previewChatAlwaysOpen
-  }?: FloatingChatWidgetProps): react_jsx_runtime10.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.cjs

@@ -2,6 +2,7 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
 let react = require("react");
+let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
@@ -38,6 +39,17 @@ const ProductCardWidgetHandler = (props) => {
 	const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
 	const fallbackColor = productCardWidgetConfig?.fallbackColor;
 	const imageSrc = productCardWidgetConfig?.imageSrc || "";
+	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
+	const { widgetConfigId } = props;
+	(0, react.useEffect)(() => {
+		trackEvent({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
+			eventProps: {
+				widget_config_id: widgetConfigId,
+				widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ProductCardV3
+			}
+		});
+	}, [trackEvent, widgetConfigId]);
 	const handleSelect = (0, react.useCallback)((prompt) => {
 		onTypedMessageSubmitted({
 			query: prompt,

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
 interface ProductCardWidgetProps {
@@ -7,7 +7,7 @@ interface ProductCardWidgetProps {
 declare const ProductCardWidget: {
   ({
     widgetConfigId
-  }: ProductCardWidgetProps): react_jsx_runtime17.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime1.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
 interface ProductCardWidgetProps {
@@ -7,7 +7,7 @@ interface ProductCardWidgetProps {
 declare const ProductCardWidget: {
   ({
     widgetConfigId
-  }: ProductCardWidgetProps): react_jsx_runtime16.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.js

@@ -1,6 +1,7 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
+import { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
@@ -37,6 +38,17 @@ const ProductCardWidgetHandler = (props) => {
 	const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
 	const fallbackColor = productCardWidgetConfig?.fallbackColor;
 	const imageSrc = productCardWidgetConfig?.imageSrc || "";
+	const { trackEvent } = useAmplitude();
+	const { widgetConfigId } = props;
+	useEffect(() => {
+		trackEvent({
+			eventName: SpiffyMetricsEventName.ChatComponentVisible,
+			eventProps: {
+				widget_config_id: widgetConfigId,
+				widget_type: WidgetTypeV3.ProductCardV3
+			}
+		});
+	}, [trackEvent, widgetConfigId]);
 	const handleSelect = useCallback((prompt) => {
 		onTypedMessageSubmitted({
 			query: prompt,

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.cjs

@@ -1,13 +1,17 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
+const require_functions = require('../utils/functions.cjs');
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
+let jotai = require("jotai");
 let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
 let __envive_ai_react_toolkit_v3_PromptButtonCarouselWithImage = require("@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage");
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx
@@ -42,6 +46,14 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
 	}, [openChat]);
+	const variantInfo = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_app.variantInfoAtom);
+	const productId = variantInfo.variant === __envive_ai_react_hooks_application_models.VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
+	const lastAssistantMessage = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom);
+	const productImageUrls = (0, react.useMemo)(() => lastAssistantMessage ? require_functions.getRecentProductImageUrls(lastAssistantMessage, productId) : [], [lastAssistantMessage, productId]);
+	const productImageUrl = productImageUrls[1] ?? productImageUrls[0] ?? "";
+	const isDynamic = promptButtonCarouselWithImageWidgetConfig?.isDynamic ?? false;
+	const finalImageSrc = isDynamic ? productImageUrl : promptButtonCarouselWithImageWidgetConfig?.image?.src;
+	const finalImageAlt = isDynamic ? "Product Image From Page" : promptButtonCarouselWithImageWidgetConfig?.image?.alt;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_PromptButtonCarouselWithImage.PromptButtonCarouselWithImage, {
 		id,
 		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM,
@@ -49,8 +61,8 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		title: hardCopyContent?.title,
 		promptButtonsTexts: hardCopyContent?.promptButtonsTexts,
 		promptButtonType: promptButtonCarouselWithImageWidgetConfig?.promptButtonType,
-		imageSrc: promptButtonCarouselWithImageWidgetConfig?.image?.src,
-		alt: promptButtonCarouselWithImageWidgetConfig?.image?.alt,
+		imageSrc: finalImageSrc,
+		alt: finalImageAlt,
 		textFieldPlaceholder: hardCopyContent?.textFieldPlaceholder,
 		hideTextField: promptButtonCarouselWithImageWidgetConfig?.hideTextField,
 		handlePromptButtonClick,

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime5.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime4.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime5.JSX.Element;
   displayName: string;
 };
 //#endregion