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

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -6,18 +6,25 @@ import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import {
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  VariantTypeEnum,
+} from '@envive-ai/react-hooks/application/models';
 import {
   PromptButtonCarouselWithImage,
   PromptButtonCarouselWithImageProps,
 } from '@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage';
+import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { useAtomValue } from 'jotai';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { getRecentProductImageUrls } from '../utils/functions';
 
 const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
@@ -63,6 +70,27 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
   }, [openChat]);
 
+  const variantInfo = useAtomValue(variantInfoAtom);
+  const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
+
+  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 (
     <PromptButtonCarouselWithImage
       id={id}
@@ -71,8 +99,8 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
       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={handlePromptButtonClick}

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -66,6 +66,7 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   return (
     <PromptCarousel
+      {...props}
       id={id}
       theme={Theme.GLOBAL_CUSTOM}
       isLoading={isLoading}
@@ -75,7 +76,6 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
       animationSpeed={animationSpeed}
       handleButtonClick={handleButtonClick}
       promptButtonTexts={buttonTexts}
-      {...props}
     />
   );
 };

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -1,8 +1,4 @@
-import {
-  SocialProofWidgetKind,
-  SocialProofWidgetV3Config,
-  WidgetTypeV3,
-} from '@envive-ai/react-hooks/contexts/typesV3';
+import { SocialProofWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
@@ -12,6 +8,7 @@ import {
   PageVariant,
   SocialProof,
   SocialProofProps,
+  WidgetKind,
 } from '@envive-ai/react-toolkit-v3/SocialProof';
 
 import {
@@ -87,7 +84,7 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
   const dynamicImageUrl = getProductImageUrl(lastAssistantMessage);
 
   const images =
-    socialProofWidgetConfig?.kind !== SocialProofWidgetKind.DYNAMIC
+    socialProofWidgetConfig?.kind !== WidgetKind.DYNAMIC
       ? socialProofWidgetConfig?.images
       : [{ src: dynamicImageUrl, alt: 'Product Image' }];
 
@@ -143,6 +140,7 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
   const widgetStyleProps: SocialProofProps['widgetStyleProps'] = {
     theme: Theme.GLOBAL_CUSTOM,
     variant: socialProofWidgetConfig?.variant,
+    kind: socialProofWidgetConfig?.kind as WidgetKind,
     primaryButtonVariant: socialProofWidgetConfig?.primaryButtonVariant,
     secondaryButtonVariant: socialProofWidgetConfig?.secondaryButtonVariant,
     promptCarouselRows: socialProofWidgetConfig?.promptCarouselRows,