@envive-ai/react-widgets-v3 0.3.21 → 0.3.23

package/src/hocs/withBaseWidget/types.ts

@@ -1,5 +1,4 @@
 import { RefObject } from 'react';
-import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import {
   OrgUIConfigV3,
@@ -22,11 +21,6 @@ export interface BaseWidgetProps {
 }
 
 export interface WithBaseWidgetOptions {
-  /**
-   * The Amplitude event name to track when the widget becomes visible.
-   * Defaults to a generic component visible event if not provided.
-   */
-  visibilityEventName?: SpiffyMetricsEventName;
   /**
    * Additional properties to include with the visibility event.
    */
@@ -36,4 +30,10 @@ export interface WithBaseWidgetOptions {
    * Defaults to '0px'.
    */
   rootMargin?: string;
+
+  /**
+   * Whether to defer loading of the widget until it is visible.
+   * Defaults to true
+   */
+  deferLoading?: boolean;
 }

package/src/hocs/withBaseWidget/withBaseWidget.tsx

@@ -1,15 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useAmplitude } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
 import { HardcopyResponse, useHardcopy } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import { usePage } from '@envive-ai/react-hooks/contexts/pageContext';
 import { useWidgetConfig } from '@envive-ai/react-hooks/contexts/widgetConfigContext';
 import { OrgUIConfigV3, WidgetConfigV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useUiConfig } from '@envive-ai/react-hooks/contexts/uiConfigContext';
-
 import { BaseWidgetProps, WithBaseWidgetOptions } from './types';
 
 export function withBaseWidget<P extends BaseWidgetProps>(
@@ -19,10 +16,10 @@ export function withBaseWidget<P extends BaseWidgetProps>(
   const WrappedWidget = (props: P) => {
     const { widgetConfigId, widgetType } = props;
     const widgetRef = useRef<HTMLDivElement>(null);
-    const hasTrackedEvent = useRef(false);
-    const { trackEvent, isReady } = useAmplitude();
+    const { isReady } = useAmplitude();
 
     const [hardcopyContent, setHardcopyContent] = useState<HardcopyResponse | undefined>(undefined);
+    const hardcopyFetchedRef = useRef(false);
     const { getHardcopy, isLoading: isHardcopyLoading } = useHardcopy();
 
     const { userEvent, isLoading: isPageLoading } = usePage();
@@ -36,87 +33,75 @@ export function withBaseWidget<P extends BaseWidgetProps>(
     const isLoading =
       isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading;
 
-    useEffect(() => {
-      if (!isReady || hasTrackedEvent.current || !widgetRef.current) {
-        return undefined;
+    const visibilityEventProps = {
+      widget_config_id: widgetConfigId,
+      widget_type: widgetType,
+      ...options?.visibilityEventProps,
+    };
+    const { isVisible } = useTrackComponentVisibleEvent(
+      widgetRef,
+      visibilityEventProps,
+      options?.rootMargin || '0px',
+      isReady,
+    );
+    const startLoading: boolean = useMemo(() => {
+      if (options?.deferLoading === false) {
+        return true;
       }
-
-      const observer = new IntersectionObserver(
-        ([entry]) => {
-          if (entry.isIntersecting && !hasTrackedEvent.current) {
-            const eventName =
-              options?.visibilityEventName || SpiffyMetricsEventName.ChatComponentVisible;
-
-            trackEvent({
-              eventName,
-              eventProps: {
-                widget_config_id: widgetConfigId,
-                widget_type: widgetType,
-                ...options?.visibilityEventProps,
-              },
-            });
-
-            hasTrackedEvent.current = true;
-            observer.disconnect();
-          }
-        },
-        {
-          rootMargin: options?.rootMargin || '0px',
-        },
-      );
-
-      observer.observe(widgetRef.current);
-
-      return () => {
-        observer.disconnect();
-      };
-    }, [isReady, widgetConfigId, widgetType, trackEvent]);
+      // Defer loading by default until the widget is visible
+      return isVisible && !!widgetConfigId && !!widgetType;
+    }, [isVisible, widgetConfigId, widgetType]);
 
     useEffect(() => {
-      if (!widgetType || !userEvent) {
+      if (!startLoading || hardcopyFetchedRef.current) {
         return;
       }
+      hardcopyFetchedRef.current = true;
       getHardcopy({ widgetType, userEvent })
         .then(setHardcopyContent)
         .catch(() => {
           // Silently handle errors - widget will render without hardcopy content
         });
-    }, [widgetConfigId, widgetType, getHardcopy, userEvent]);
+    }, [startLoading, widgetType, getHardcopy, userEvent, widgetConfigId]);
 
     useEffect(() => {
+      if (!startLoading) {
+        return;
+      }
       getUiConfig()
         .then(setUiConfig)
         .catch(() => {
           // Silently handle errors - widget will render without ui config
         });
-    }, [getUiConfig, widgetConfigId, widgetType]);
+    }, [startLoading, getUiConfig, widgetConfigId, widgetType]);
 
     useEffect(() => {
-      if (!widgetConfigId || !widgetType) {
+      if (!startLoading) {
         return;
       }
 
       getWidgetConfig({ widgetConfigId, widgetType })
         .then(setWidgetConfig)
-        .catch(e => {
-          console.error('Error getting widget config', widgetConfigId, widgetType, e);
+        .catch(() => {
           // Silently handle errors - widget will render without widget config
         });
-    }, [widgetConfigId, widgetType, getWidgetConfig]);
+    }, [startLoading, widgetConfigId, widgetType, getWidgetConfig]);
 
     return (
-      <Widget
-        {...props}
-        isLoading={isLoading}
-        isHardcopyLoading={isHardcopyLoading}
-        isPageLoading={isPageLoading}
-        isWidgetConfigLoading={isWidgetConfigLoading}
-        isUiConfigLoading={isUiConfigLoading}
-        uiConfig={uiConfig}
-        widgetConfig={widgetConfig}
-        hardcopyContent={hardcopyContent}
-        observedWidget={widgetRef}
-      />
+      <span ref={widgetRef}>
+        <Widget
+          {...props}
+          isLoading={isLoading}
+          isHardcopyLoading={isHardcopyLoading}
+          isPageLoading={isPageLoading}
+          isWidgetConfigLoading={isWidgetConfigLoading}
+          isUiConfigLoading={isUiConfigLoading}
+          uiConfig={uiConfig}
+          widgetConfig={widgetConfig}
+          hardcopyContent={hardcopyContent}
+          observedWidget={widgetRef}
+        />
+      </span>
     );
   };
 

package/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx

@@ -6,9 +6,11 @@ import {
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useAtomValue } from 'jotai';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   Suggestion,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
@@ -89,6 +91,11 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
 
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   const handlePromptButtonClick = useCallback(
     (suggestion: Suggestion) => {
       onSuggestionClicked(
@@ -112,6 +119,29 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   const handleLinkClick = (url: string) => {
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
@@ -156,6 +186,7 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     images: images ?? [],
     logoSrc: logoSrc ?? undefined,
+    voiceInputEnabled: isVoiceInputEnabled,
   };
 
   const widgetEventProps: ChatPreviewComparisonProps['widgetEventProps'] = {
@@ -168,6 +199,8 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     handlePromptButtonTouchEnd: onTouchEnd,
     handleLinkClick,
     handleTextFieldClick,
+    onTranscriptionStarted: handleTranscriptionStarted,
+    onTranscriptionCompleted: handleTranscriptionCompleted,
   };
 
   return (

package/src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.tsx

@@ -3,9 +3,11 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useAtomValue } from 'jotai';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
+import { FeatureGates } from '@envive-ai/react-hooks/application/models';
 
-import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
 import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
+import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { PromptCarouselWidget } from '../PromptCarouselWidget/PromptCarouselWidget';
@@ -19,6 +21,7 @@ const ChatPreviewLoadingWidgetHandler = (props: BaseWidgetProps) => {
 
   const chatPreviewLoadingDataMap = useAtomValue(chatPreviewLoadingDataAtom);
   const chatPreviewLoadingData = chatPreviewLoadingDataMap[widgetConfigId] ?? undefined;
+  const { featureFlagService } = useFeatureFlagService();
 
   const isCacheEmpty =
     !chatPreviewLoadingData ||
@@ -48,6 +51,10 @@ const ChatPreviewLoadingWidgetHandler = (props: BaseWidgetProps) => {
   const hideTextField =
     chatPreviewLoadingWidgetConfig?.hideTextField ?? chatPreviewLoadingData?.hideTextField;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   return (
     <ChatPreviewLoading
       id={id}
@@ -58,6 +65,7 @@ const ChatPreviewLoadingWidgetHandler = (props: BaseWidgetProps) => {
       hideLogo={hideLogo}
       logoSrc={logoSrc}
       titleLabel={titleLabel}
+      voiceInputEnabled={isVoiceInputEnabled}
     />
   );
 };

package/src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx

@@ -3,16 +3,17 @@ import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext
 import { ChatPreviewWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useAtomValue } from 'jotai';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   Suggestion,
 } from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
@@ -23,7 +24,7 @@ import {
 import { ChatPreview } from '@envive-ai/react-toolkit-v3/ChatPreview';
 import { ChatPreviewProps } from '@envive-ai/react-toolkit-v3/ChatPreview/types/types';
 import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
@@ -67,21 +68,15 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     onTouchEnd,
   } = usePromptCarouselAnalytics(WidgetInteractionComponent.CHAT_PREVIEW, text => text);
 
-  useEffect(() => {
-    // TODO: -Add Widget Interaction here
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.ChatPreviewV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   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 handlePromptButtonClick = useCallback(
     (suggestion: Suggestion) => {
       onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
@@ -102,6 +97,29 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.CHAT_PREVIEW,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.CHAT_PREVIEW,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   const handleLinkClick = (url: string) => {
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
@@ -140,6 +158,7 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     promptButtons: hardCopyContent?.promptButtons,
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     logoSrc: logoSrc ?? undefined,
+    voiceInputEnabled: isVoiceInputEnabled,
   };
 
   const widgetEventProps: ChatPreviewProps['widgetEventProps'] = {
@@ -152,6 +171,8 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     handlePromptButtonTouchEnd: onTouchEnd,
     handleLinkClick,
     handleTextFieldClick,
+    onTranscriptionStarted: handleTranscriptionStarted,
+    onTranscriptionCompleted: handleTranscriptionCompleted,
   };
 
   return (

package/src/widgets/ChatPreviewWidget/__tests__/ChatPreviewWidget.test.tsx

@@ -1,11 +1,11 @@
 import { render, waitFor } from '@testing-library/react';
-import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { ChatPreviewWidget } from '../ChatPreviewWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/ChatPreview', () => ({
   ChatPreview: () => <div data-testid="chat-preview-mock">Chat Preview</div>,
@@ -22,6 +22,10 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -100,13 +104,15 @@ describe('ChatPreviewWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.ChatPreviewV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,7 +1,9 @@
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
@@ -11,7 +13,9 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 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,
@@ -92,6 +96,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();
 
@@ -139,21 +157,17 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
 
   useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
 
-  const { trackEvent } = useAmplitude();
-  const hasTrackedEvent = useRef(false);
-  // When we add support for initially hidden floating buttons, we will need to update this to handle that case
-  useEffect(() => {
-    if (buttonShouldRender && !hasTrackedEvent.current) {
-      trackEvent({
-        eventName: SpiffyMetricsEventName.ChatComponentVisible,
-        eventProps: {
-          widget_config_id: 'floating-button',
-          widget_type: WidgetTypeV3.FloatingButtonV3,
-        },
-      });
-      hasTrackedEvent.current = true;
-    }
-  }, [trackEvent, buttonShouldRender]);
+  const { isReady } = useAmplitude();
+  const floatingButtonVisibilityRef = useRef<HTMLDivElement>(null);
+  useTrackComponentVisibleEvent(
+    floatingButtonVisibilityRef,
+    {
+      widget_config_id: 'floating-button',
+      widget_type: WidgetTypeV3.FloatingButtonV3,
+    },
+    '0px',
+    isReady && buttonShouldRender,
+  );
 
   return (
     <CXButtonProvider
@@ -190,7 +204,7 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
                   salesAgentData={salesAgentData}
                   hardcopyContent={hardcopyContent}
                   floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
-                  lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
+                  lookAndFeelConfig={modifiedLookAndFeelConfig ?? ({} as LookAndFeelConfig)}
                   isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
                   isFloatingChatOpen={effectiveIsOpen}
                   onToggleCXButton={toggle}
@@ -222,24 +236,26 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
 
           {/* Render button when preview button only OR when chat is closed */}
           {buttonShouldRender && (
-            <FloatingButton
-              id={FLOATING_BUTTON_ID}
-              variant={floatingButton?.style as FloatingButtonVariant}
-              mode={floatingButton?.mode as FloatingButtonMode}
-              backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
-              onClick={
-                previewButtonOnly
-                  ? () => {}
-                  : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
-              }
-              onMouseOver={onHover}
-              customIcon={floatingButton?.iconSVGSrc}
-              show={floatingButton?.showOption as FloatingButtonShow}
-              location={floatingButton?.position as FloatingButtonLocation}
-              hasInteractionHappened={userHasInteractedValue}
-              ariaLabel="Open chat"
-              previewMode={!!previewButtonOnly}
-            />
+            <div ref={floatingButtonVisibilityRef}>
+              <FloatingButton
+                id={FLOATING_BUTTON_ID}
+                variant={floatingButton?.style as FloatingButtonVariant}
+                mode={floatingButton?.mode as FloatingButtonMode}
+                backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
+                onClick={
+                  previewButtonOnly
+                    ? () => {}
+                    : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
+                }
+                onMouseOver={onHover}
+                customIcon={floatingButton?.iconSVGSrc}
+                show={floatingButton?.showOption as FloatingButtonShow}
+                location={floatingButton?.position as FloatingButtonLocation}
+                hasInteractionHappened={userHasInteractedValue}
+                ariaLabel="Open chat"
+                previewMode={!!previewButtonOnly}
+              />
+            </div>
           )}
         </>
       )}
@@ -247,8 +263,10 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   );
 };
 
-const FloatingChatWidgetWithBaseWidget =
-  withBaseWidget<FloatingChatWidgetHandlerProps>(FloatingChatWidgetHandler);
+const FloatingChatWidgetWithBaseWidget = withBaseWidget<FloatingChatWidgetHandlerProps>(
+  FloatingChatWidgetHandler,
+  { deferLoading: false },
+);
 
 export interface FloatingChatWidgetProps {
   previewButtonOnly?: boolean;

package/src/widgets/FloatingChatWidget/__tests__/FloatingChatWidget.test.tsx

@@ -1,11 +1,11 @@
 import { render, waitFor } from '@testing-library/react';
-import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { FloatingChatWidget } from '../FloatingChatWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/FloatingButton', () => ({
   FloatingButton: () => <div data-testid="floating-button">Floating Button</div>,
@@ -22,6 +22,10 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -105,13 +109,15 @@ describe('FloatingChatWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'floating-button',
             widget_type: WidgetTypeV3.FloatingButtonV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

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