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

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -1,6 +1,10 @@
 import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
+import {
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
@@ -45,6 +49,19 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   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: string) => {
       onTypedMessageSubmitted({ query: prompt, userTyped: false });

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}
     />
   );
 };