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

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts

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

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.js

@@ -1,12 +1,16 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
-import { useCallback, useEffect } from "react";
+import { getRecentProductImageUrls } from "../utils/functions.js";
+import { useCallback, useEffect, useMemo } 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 { useAtomValue } from "jotai";
 import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
+import { lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
-import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
+import { ChatElementDisplayLocationV3, VariantTypeEnum } from "@envive-ai/react-hooks/application/models";
+import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
 import { PromptButtonCarouselWithImage } from "@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx
@@ -41,6 +45,14 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 	const handleTextFieldClick = useCallback(() => {
 		openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
 	}, [openChat]);
+	const variantInfo = useAtomValue(variantInfoAtom);
+	const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
+	const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
+	const productImageUrls = useMemo(() => lastAssistantMessage ? 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__ */ jsx(PromptButtonCarouselWithImage, {
 		id,
 		theme: Theme.GLOBAL_CUSTOM,
@@ -48,8 +60,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/PromptCarouselWidget/PromptCarouselWidget.cjs

@@ -50,6 +50,7 @@ const PromptCarouselWidgetHandler = (props) => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PROMPT_CAROUSEL);
 	}, [onTypedMessageSubmitted, openChat]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_PromptCarousel.PromptCarousel, {
+		...props,
 		id,
 		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM,
 		isLoading,
@@ -58,8 +59,7 @@ const PromptCarouselWidgetHandler = (props) => {
 		promptCarouselRows,
 		animationSpeed,
 		handleButtonClick,
-		promptButtonTexts: buttonTexts,
-		...props
+		promptButtonTexts: buttonTexts
 	});
 };
 const PromptCarouselWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(PromptCarouselWidgetHandler);

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.cts

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

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts

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

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.js

@@ -49,6 +49,7 @@ const PromptCarouselWidgetHandler = (props) => {
 		openChat(ChatElementDisplayLocationV3.PROMPT_CAROUSEL);
 	}, [onTypedMessageSubmitted, openChat]);
 	return /* @__PURE__ */ jsx(PromptCarousel, {
+		...props,
 		id,
 		theme: Theme.GLOBAL_CUSTOM,
 		isLoading,
@@ -57,8 +58,7 @@ const PromptCarouselWidgetHandler = (props) => {
 		promptCarouselRows,
 		animationSpeed,
 		handleButtonClick,
-		promptButtonTexts: buttonTexts,
-		...props
+		promptButtonTexts: buttonTexts
 	});
 };
 const PromptCarouselWidgetWithBaseWidget = withBaseWidget(PromptCarouselWidgetHandler);

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.cjs');
 const require_ChatPreviewComparisonWidget = require('../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs');
-const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
 const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
+const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
 const require_SocialProofWidget = require('../SocialProofWidget/SocialProofWidget.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.cts

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

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts

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

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.js

@@ -1,7 +1,7 @@
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
 import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
-import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
+import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import { SocialProofWidgetWithBaseWidget } from "../SocialProofWidget/SocialProofWidget.js";
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.cts

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

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.ts

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

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.cts

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

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts

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

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.cjs');
 const require_ChatPreviewComparisonWidget = require('../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs');
-const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
 const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
+const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
 const require_TypingAnimationWidget = require('../TypingAnimationWidget/TypingAnimationWidget.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.cts

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

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts

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

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

@@ -1,7 +1,7 @@
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
 import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
-import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
+import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import { TypingAnimationWithBaseWidget } from "../TypingAnimationWidget/TypingAnimationWidget.js";
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.cts

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

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts

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

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

package/src/CXIntegration/hooks/useUnifiedCXButton.ts

@@ -1,6 +1,7 @@
 import { useAtomValue } from 'jotai';
 
-import { hasParsedVariantInfoAtom, supportedEventAtom } from '@envive-ai/react-hooks/atoms/app';
+import { hasParsedVariantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { usePage } from '@envive-ai/react-hooks/contexts/pageContext';
 import { findCustomerServiceImpl } from '../utils/functions';
 import { CustomerServiceType, UnifiedCXButton } from '../types';
 
@@ -17,7 +18,7 @@ export const useUnifiedCXButton = ({
   suppressMerchantButton = false,
   onSwitchToAgent,
 }: UseUnifiedCXButtonProps): UnifiedCXButton | undefined => {
-  const supportedEvent = useAtomValue(supportedEventAtom);
+  const { isSupported } = usePage();
   const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
 
   const customerService = findCustomerServiceImpl(provider);
@@ -30,7 +31,7 @@ export const useUnifiedCXButton = ({
   if (!enabled) return undefined;
 
   if (suppressMerchantButton) {
-    const showUnifiedButton = hasParsedVariantInfo && supportedEvent?.supported;
+    const showUnifiedButton = hasParsedVariantInfo && isSupported;
     if (!showUnifiedButton) return undefined;
   }
 

package/src/stories/SalesAgentTest/SalesAgentTest.tsx

@@ -5,6 +5,7 @@ import {
   useSalesAgent,
 } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useState } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 
 export const SalesAgentTest = () => {
   const {
@@ -39,12 +40,15 @@ export const SalesAgentTest = () => {
         <button
           type="button"
           onClick={() =>
-            onSuggestionClicked({
-              id: '1',
-              category: SuggestionCategory.ProductBased,
-              content: 'test',
-              createdAt: new Date().toISOString(),
-            })
+            onSuggestionClicked(
+              {
+                id: '1',
+                category: SuggestionCategory.ProductBased,
+                content: 'test',
+                createdAt: new Date().toISOString(),
+              },
+              ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON,
+            )
           }
         >
           On Suggestion Clicked
@@ -107,7 +111,12 @@ export const SalesAgentTest = () => {
             }}
             type="button"
             key={suggestion.id}
-            onClick={() => onSuggestionClicked(suggestion)}
+            onClick={() =>
+              onSuggestionClicked(
+                suggestion,
+                ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON,
+              )
+            }
           >
             {suggestion.content}
           </button>

package/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx

@@ -11,6 +11,7 @@ import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { useCallback, useMemo } from 'react';
 import {
   ChatElementDisplayLocationV3,
+  Suggestion,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
 import { ChatPreviewComparison } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison';
@@ -22,7 +23,7 @@ import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
 
 const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
-  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { onSuggestionClicked } = useSalesAgent();
   const { openChat } = useChatToggle();
 
   const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
@@ -32,10 +33,6 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
 
   const { suggestions } = useAtomValue(chatAtom);
 
-  const promptButtonTexts = useMemo(() => {
-    return suggestions.map(suggestion => suggestion.content);
-  }, [suggestions]);
-
   const messageText = useMemo(() => getMessageText(lastAssistantMessage), [lastAssistantMessage]);
 
   const productImageUrls = useMemo(
@@ -62,10 +59,9 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     headlineText: hardcopyContent?.values?.headlineText,
     textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
     messageText,
-    promptButtonTexts,
   } as Pick<
     ChatPreviewComparisonProps['widgetContentProps'],
-    'headlineText' | 'messageText' | 'promptButtonTexts' | 'textFieldPlaceholderText' | 'titleLabel'
+    'headlineText' | 'messageText' | 'textFieldPlaceholderText' | 'titleLabel'
   >;
 
   const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
@@ -73,11 +69,14 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
   const handlePromptButtonClick = useCallback(
-    (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+    (suggestion: Suggestion) => {
+      onSuggestionClicked(
+        suggestion,
+        ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON,
+      );
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
     },
-    [onTypedMessageSubmitted, openChat],
+    [onSuggestionClicked, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
@@ -109,7 +108,7 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     titleLabel: hardCopyContent?.titleLabel,
     headlineText: hardCopyContent?.headlineText,
     messageText: hardCopyContent?.messageText,
-    promptButtonTexts: hardCopyContent?.promptButtonTexts,
+    promptButtons: suggestions,
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     images: images ?? [],
     logoSrc: logoSrc ?? undefined,

package/src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx

@@ -6,7 +6,10 @@ import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms
 
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  Suggestion,
+} from '@envive-ai/react-hooks/application/models';
 import { useCallback, useEffect, useMemo } from 'react';
 import {
   SpiffyMetricsEventName,
@@ -20,17 +23,13 @@ import { getMessageText } from '../utils/functions';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
 
 const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
-  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;
@@ -42,11 +41,11 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   const hardCopyContent = {
     titleLabel: hardcopyContent?.values?.titleLabel,
     textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
+    promptButtons: suggestions,
     messageText,
-    promptButtonTexts,
   } as Pick<
     ChatPreviewProps['widgetContentProps'],
-    'messageText' | 'promptButtonTexts' | 'textFieldPlaceholderText' | 'titleLabel'
+    'messageText' | 'promptButtons' | 'textFieldPlaceholderText' | 'titleLabel'
   >;
 
   const { trackEvent } = useAmplitude();
@@ -66,11 +65,11 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
   const handlePromptButtonClick = useCallback(
-    (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+    (suggestion: Suggestion) => {
+      onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
     },
-    [onTypedMessageSubmitted, openChat],
+    [onSuggestionClicked, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
@@ -97,7 +96,7 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   const widgetContentProps: ChatPreviewProps['widgetContentProps'] = {
     titleLabel: hardCopyContent?.titleLabel,
     messageText: hardCopyContent?.messageText,
-    promptButtonTexts: hardCopyContent?.promptButtonTexts,
+    promptButtons: hardCopyContent?.promptButtons,
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     logoSrc: logoSrc ?? undefined,
   };

package/src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx

@@ -21,7 +21,6 @@ export const FloatingChatOverlay = ({
   previewMode = false,
 }: FloatingChatOverlayProps) => {
   const overlayClasses = classNames(
-    'envive-floating-chat-overlay',
     previewMode ? 'envive-tw-absolute' : 'envive-tw-fixed',
     'envive-tw-top-0',
     'envive-tw-left-0',
@@ -32,7 +31,6 @@ export const FloatingChatOverlay = ({
   );
 
   const backdropClasses = classNames(
-    'envive-floating-chat-backdrop',
     'envive-tw-absolute',
     'envive-tw-top-0',
     'envive-tw-left-0',
@@ -45,7 +43,6 @@ export const FloatingChatOverlay = ({
   );
 
   const overlayContentClasses = classNames(
-    'envive-floating-chat-overlay-content',
     'envive-tw-relative',
     'envive-tw-flex',
     'envive-tw-justify-end',
@@ -63,6 +60,7 @@ export const FloatingChatOverlay = ({
         <motion.div
           key="floating-chat-overlay"
           className={overlayClasses}
+          style={{ top: '0px' }}
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -81,6 +79,7 @@ export const FloatingChatOverlay = ({
           )}
           <div
             className={overlayContentClasses}
+            style={{ top: '0px' }}
             onClick={onClose}
             onKeyDown={e => {
               if (e.key === 'Escape') {