@envive-ai/react-widgets-v3 0.3.22 → 0.3.24

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,4 +1,7 @@
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
   useAmplitude,
@@ -12,6 +15,7 @@ import {
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
 import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 import {
   Collapse,
   WidgetInteractionComponent,
@@ -76,10 +80,13 @@ const CXButtonProvider = ({
 interface FloatingChatWidgetHandlerProps extends BaseWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
+  previewDisclaimer?: boolean;
 }
 
 const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
-  const { previewButtonOnly, previewChatAlwaysOpen } = props;
+  const { previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled, previewDisclaimer } =
+    props;
   const salesAgentData = useSalesAgent();
   const { trackWidgetInteraction } = useWidgetInteraction();
   const { userHasInteractedValue } = useGetWidgetStatus();
@@ -92,6 +99,20 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
     (customerServiceIntegration?.provider as CustomerServiceType) ??
     CustomerServiceType.unsupported;
 
+  const { featureFlagService } = useFeatureFlagService();
+  const originalVoiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) ||
+    originalVoiceInputEnabled;
+
+  const modifiedLookAndFeelConfig = useMemo(
+    () => ({
+      ...uiConfig?.lookAndFeel,
+      voiceInputEnabled: isVoiceInputEnabled,
+    }),
+    [uiConfig?.lookAndFeel, isVoiceInputEnabled],
+  );
+
   // TODO: Get hardcopy content
   const { isOpen, openChat, closeChat, onHover } = useChatToggle();
 
@@ -186,8 +207,8 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
                   salesAgentData={salesAgentData}
                   hardcopyContent={hardcopyContent}
                   floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
-                  lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
-                  isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
+                  lookAndFeelConfig={modifiedLookAndFeelConfig ?? ({} as LookAndFeelConfig)}
+                  isCXButtonSwitchEnabled={previewCXButtonsEnabled ? true : !!isSwitchEnabled?.()}
                   isFloatingChatOpen={effectiveIsOpen}
                   onToggleCXButton={toggle}
                   debugBar={<DebugBar />}
@@ -253,11 +274,15 @@ const FloatingChatWidgetWithBaseWidget = withBaseWidget<FloatingChatWidgetHandle
 export interface FloatingChatWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
+  previewDisclaimer?: boolean;
 }
 
 export const FloatingChatWidget = ({
   previewButtonOnly,
   previewChatAlwaysOpen,
+  previewCXButtonsEnabled,
+  previewDisclaimer,
 }: FloatingChatWidgetProps = {}) => {
   return (
     <FloatingChatWidgetWithBaseWidget
@@ -265,6 +290,8 @@ export const FloatingChatWidget = ({
       widgetConfigId="fake-widget-config-id"
       previewButtonOnly={previewButtonOnly}
       previewChatAlwaysOpen={previewChatAlwaysOpen}
+      previewCXButtonsEnabled={previewCXButtonsEnabled}
+      previewDisclaimer={previewDisclaimer}
     />
   );
 };

package/src/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.ts

@@ -2,7 +2,7 @@ import { FeatureGates } from '@envive-ai/react-hooks/application/models';
 import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
 import { featureFlagServiceAtom } from '@envive-ai/react-hooks/atoms/org';
 import { FloatingButtonShow } from '@envive-ai/react-toolkit-v3/FloatingButton';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';
 
 export interface UseFloatingButtonVisibilityProps {
@@ -22,7 +22,7 @@ export const useFloatingButtonVisibility = ({
   userHasInteracted,
 }: UseFloatingButtonVisibilityProps): UseFloatingButtonVisibilityReturn => {
   const featureFlagService = useAtomValue(featureFlagServiceAtom);
-  const [variantInfo] = useAtom(variantInfoAtom);
+  const variantInfo = useAtomValue(variantInfoAtom);
 
   const internalfloatingButtonShowConfig =
     variantInfo.floatingButtonOverride ?? floatingButtonShowConfig;

package/src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.tsx

@@ -7,6 +7,8 @@ import {
 import { FullPageSalesAgent } from '@envive-ai/react-toolkit-v3/FullPageSalesAgent';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { BaseWidgetProps, withBaseWidget } from 'src/hocs/withBaseWidget';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
+import { FeatureGates } from '@envive-ai/react-hooks/application/models';
 
 const FullPageSalesAgentHandler = ({
   uiConfig,
@@ -15,6 +17,11 @@ const FullPageSalesAgentHandler = ({
 }: BaseWidgetProps) => {
   const { headerContainer, autoHeight } = (widgetConfig as FullPageSalesAgentWidgetV3Config) || {};
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   return (
     <FullPageSalesAgent
       theme={Theme.STANDARD}
@@ -23,6 +30,7 @@ const FullPageSalesAgentHandler = ({
       hardcopyContent={hardcopyContent}
       headerContainer={headerContainer}
       autoHeight={autoHeight}
+      voiceInputEnabled={isVoiceInputEnabled}
     />
   );
 };

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -1,4 +1,7 @@
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
   useAmplitude,
@@ -7,6 +10,7 @@ import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext
 import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 import {
   WidgetInteractionComponent,
   WidgetInteractionType,
@@ -33,7 +37,7 @@ const mockAnimatedText = ['Loading...'];
 const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
-  const { hardcopyContent, widgetConfig, isLoading } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 
   const hardCopyHeadline = hardcopyContent?.values?.headline as string | undefined;
   const headline = isLoading ? mockHeadline : hardCopyHeadline || '';
@@ -55,6 +59,10 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
   const fallbackColor = productCardWidgetConfig?.fallbackColor;
   const imageSrc = productCardWidgetConfig?.imageSrc || '';
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 
   const { trackEvent } = useAmplitude();
   const { trackWidgetInteraction } = useWidgetInteraction();
@@ -105,6 +113,29 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   return (
     <ProductCard
       theme={Theme.GLOBAL_CUSTOM}
@@ -117,6 +148,7 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       promptButtonType={promptButtonType}
       carouselId={carouselId}
       placeholder={placeholder}
+      voiceInputEnabled={isVoiceInputEnabled}
       textTypingDuration={800}
       textTransition={2000}
       onSelect={handleSelect}
@@ -127,6 +159,8 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       onTouchStart={onTouchStart}
       onTouchEnd={onTouchEnd}
       onInputClick={handleInputClick}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 };

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -4,9 +4,11 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
 import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
@@ -46,7 +48,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     onTouchEnd,
   } = usePromptCarouselAnalytics(WidgetInteractionComponent.SINGLE_IMAGE_PROMPT, text => text);
 
-  const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 
   const promptButtonCarouselWithImageWidgetConfig =
     widgetConfig as PromptButtonCarouselWithImageWidgetV3Config;
@@ -99,6 +101,29 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   const variantInfo = useAtomValue(variantInfoAtom);
   const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
 
@@ -120,6 +145,11 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     ? 'Product Image From Page'
     : promptButtonCarouselWithImageWidgetConfig?.image?.alt;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   return (
     <PromptButtonCarouselWithImage
       id={id}
@@ -132,6 +162,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
       alt={finalImageAlt}
       textFieldPlaceholder={hardCopyContent?.textFieldPlaceholder}
       hideTextField={promptButtonCarouselWithImageWidgetConfig?.hideTextField}
+      voiceInputEnabled={isVoiceInputEnabled}
       handlePromptButtonClick={handlePromptButtonClick}
       handlePromptButtonDrag={onDrag}
       handlePromptButtonHover={onHover}
@@ -140,6 +171,8 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
       handlePromptButtonTouchStart={onTouchStart}
       handlePromptButtonTouchEnd={onTouchEnd}
       handleTextFieldClick={handleTextFieldClick}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 };

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -13,6 +13,7 @@ import {
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
 import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
@@ -29,6 +30,7 @@ import { useProductImageUrl } from '@envive-ai/react-hooks/hooks/ProductImageUrl
 import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
 import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
@@ -97,6 +99,11 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
   const dynamicImageUrl = useProductImageUrl(productId);
 
@@ -191,6 +198,29 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   if (isLoading) {
     return <ChatPreviewLoading fullIsLoading />;
   }
@@ -233,6 +263,7 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     images: images ?? [],
     logoSrc: logoSrc ?? undefined,
+    voiceInputEnabled: isVoiceInputEnabled,
   };
 
   const widgetEventProps: SocialProofProps['widgetEventProps'] = {
@@ -246,6 +277,8 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
     handleSecondaryButtonTouchStart: onTouchStart,
     handleSecondaryButtonTouchEnd: onTouchEnd,
     handleTextFieldClick,
+    onTranscriptionStarted: handleTranscriptionStarted,
+    onTranscriptionCompleted: handleTranscriptionCompleted,
   };
 
   return (

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -1,10 +1,14 @@
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
 import { chatOnToggleAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
 import {
   EnviveMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 import {
   TypingAnimationWidgetV3Config,
   WidgetTypeV3,
@@ -42,7 +46,7 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
   const onToggle = useSetAtom(chatOnToggleAtom);
 
-  const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 
   const titleLabel = (hardcopyContent?.values?.titleLabel as string | undefined) || '';
   const headlineText = (hardcopyContent?.values?.headlineText as string | undefined) || '';
@@ -69,6 +73,10 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
 
   const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 
   const { trackEvent } = useAmplitude();
   const { trackWidgetInteraction } = useWidgetInteraction();
@@ -119,6 +127,29 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [onToggle]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   return (
     <TypingAnimation
       baseProps={{
@@ -133,6 +164,7 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         textFieldAriaLabel,
         logoSrc: logoSrc ?? undefined,
         hideLogo: hideLogo ?? false,
+        voiceInputEnabled: isVoiceInputEnabled,
       }}
       widgetStyleProps={{
         widgetVariant,
@@ -151,6 +183,8 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         handleButtonTouchStart: onTouchStart,
         handleButtonTouchEnd: onTouchEnd,
         handleTextFieldClick,
+        onTranscriptionStarted: handleTranscriptionStarted,
+        onTranscriptionCompleted: handleTranscriptionCompleted,
       }}
     />
   );