@envive-ai/react-widgets-v3 0.3.14 → 0.3.15-alpha.2

package/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx

@@ -1,31 +1,52 @@
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
   ChatPreviewComparisonWidgetV3Config,
   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 { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { useAtomValue } from 'jotai';
 
-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 { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import { ChatPreviewComparison } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison';
 import { ChatPreviewComparisonProps } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison/types/types';
-import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
-import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
-import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
 
 const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
   const { onSuggestionClicked } = useSalesAgent();
   const { openChat } = useChatToggle();
 
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onPromptClicked,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(
+    WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+    text => text,
+  );
+
   const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
 
   const variantInfo = useAtomValue(variantInfoAtom);
@@ -75,14 +96,37 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
         ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON,
       );
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
+      onPromptClicked(suggestion.id);
     },
     [onSuggestionClicked, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
+  const handleLinkClick = (url: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+        widget_interaction: WidgetInteractionType.LINK_CLICKED,
+        widget_interaction_data: {
+          link_clicked: {
+            url,
+          },
+        },
+      },
+    });
+  };
+
   if (isLoading) {
     return (
       <ChatPreviewLoadingWidgetWithBaseWidget
@@ -116,6 +160,13 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
 
   const widgetEventProps: ChatPreviewComparisonProps['widgetEventProps'] = {
     handlePromptButtonClick,
+    handlePromptButtonDrag: onDrag,
+    handlePromptButtonHover: onHover,
+    handlePromptButtonMouseDown: onMouseDown,
+    handlePromptButtonMouseUp: onMouseUp,
+    handlePromptButtonTouchStart: onTouchStart,
+    handlePromptButtonTouchEnd: onTouchEnd,
+    handleLinkClick,
     handleTextFieldClick,
   };
 

package/src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx

@@ -1,8 +1,8 @@
-import { ChatPreviewWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { useAtomValue } from 'jotai';
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 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 { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { useAtomValue } from 'jotai';
 
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 
@@ -10,17 +10,23 @@ import {
   ChatElementDisplayLocationV3,
   Suggestion,
 } from '@envive-ai/react-hooks/application/models';
-import { useCallback, useEffect, useMemo } from 'react';
 import {
-  SpiffyMetricsEventName,
+  EnviveMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { ChatPreviewProps } from '@envive-ai/react-toolkit-v3/ChatPreview/types/types';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import { ChatPreview } from '@envive-ai/react-toolkit-v3/ChatPreview';
-import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { ChatPreviewProps } from '@envive-ai/react-toolkit-v3/ChatPreview/types/types';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { useCallback, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
-import { getMessageText } from '../utils/functions';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { getMessageText } from '../utils/functions';
 
 const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   const { onSuggestionClicked } = useSalesAgent();
@@ -49,16 +55,16 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   >;
 
   const { trackEvent } = useAmplitude();
-
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.ChatPreviewV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onPromptClicked,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.CHAT_PREVIEW, text => text);
 
   const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 
@@ -68,14 +74,37 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     (suggestion: Suggestion) => {
       onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
+      onPromptClicked(suggestion.id);
     },
     [onSuggestionClicked, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.CHAT_PREVIEW,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
+  const handleLinkClick = (url: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.CHAT_PREVIEW,
+        widget_interaction: WidgetInteractionType.LINK_CLICKED,
+        widget_interaction_data: {
+          link_clicked: {
+            url,
+          },
+        },
+      },
+    });
+  };
+
   if (isLoading) {
     return (
       <ChatPreviewLoadingWidgetWithBaseWidget
@@ -103,6 +132,13 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
 
   const widgetEventProps: ChatPreviewProps['widgetEventProps'] = {
     handlePromptButtonClick,
+    handlePromptButtonDrag: onDrag,
+    handlePromptButtonHover: onHover,
+    handlePromptButtonMouseDown: onMouseDown,
+    handlePromptButtonMouseUp: onMouseUp,
+    handlePromptButtonTouchStart: onTouchStart,
+    handlePromptButtonTouchEnd: onTouchEnd,
+    handleLinkClick,
     handleTextFieldClick,
   };
 

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/FloatingChatOverlay.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import classNames from 'classnames';
+import { useCheckIsMobile } from '@envive-ai/react-toolkit-v3/utils/useCheckIsMobile';
 
 export interface FloatingChatOverlayProps {
   children?: ReactNode;
@@ -10,8 +10,36 @@ export interface FloatingChatOverlayProps {
   className?: string;
   dataTestId?: string;
   previewMode?: boolean;
+  isResultsModalOpen?: boolean;
 }
 
+const ANIMATION_DURATION = 0.3;
+
+const useOverlayAnimations = ({
+  previewMode,
+  isMobile,
+}: {
+  previewMode: boolean;
+  isMobile: boolean;
+}) => {
+  if (previewMode) {
+    return {
+      overlayExitAnimation: { opacity: 0, x: 0 },
+      overlayAnimation: { opacity: 1, x: 0 },
+    };
+  }
+  if (isMobile) {
+    return {
+      overlayExitAnimation: { opacity: 0 },
+      overlayAnimation: { opacity: 1 },
+    };
+  }
+  return {
+    overlayExitAnimation: { opacity: 0, x: 512 },
+    overlayAnimation: { opacity: 1, x: 0 },
+  };
+};
+
 export const FloatingChatOverlay = ({
   children,
   isOpened,
@@ -19,7 +47,14 @@ export const FloatingChatOverlay = ({
   className,
   dataTestId,
   previewMode = false,
+  isResultsModalOpen = false,
 }: FloatingChatOverlayProps) => {
+  const { isMobile } = useCheckIsMobile();
+  const { overlayExitAnimation, overlayAnimation } = useOverlayAnimations({
+    previewMode,
+    isMobile,
+  });
+
   const overlayClasses = classNames(
     previewMode ? 'envive-tw-absolute' : 'envive-tw-fixed',
     'envive-tw-top-0',
@@ -36,7 +71,7 @@ export const FloatingChatOverlay = ({
     'envive-tw-left-0',
     'envive-tw-h-full',
     'envive-tw-w-full',
-    'envive-tw-bg-black',
+    isMobile ? 'envive-tw-bg-black' : '',
     'envive-tw-opacity-50',
     'envive-tw-pointer-events-none',
     'envive-tw-z-0',
@@ -64,7 +99,7 @@ export const FloatingChatOverlay = ({
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
+          transition={{ duration: ANIMATION_DURATION }}
           data-testid={dataTestId}
         >
           {!previewMode && (
@@ -73,7 +108,7 @@ export const FloatingChatOverlay = ({
               initial={{ opacity: 0 }}
               animate={{ opacity: 0.5 }}
               exit={{ opacity: 0 }}
-              transition={{ duration: 0.3 }}
+              transition={{ duration: ANIMATION_DURATION }}
               aria-label="Close chat"
             />
           )}
@@ -91,11 +126,15 @@ export const FloatingChatOverlay = ({
             aria-label="Close floating chat"
           >
             <motion.div
-              initial={{ opacity: 0, x: previewMode ? 0 : 512 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: previewMode ? 0 : 512 }}
-              transition={{ duration: 0.3 }}
-              style={{ height: previewMode ? '100%' : '100dvh', cursor: 'default' }}
+              initial={overlayExitAnimation}
+              animate={overlayAnimation}
+              exit={overlayExitAnimation}
+              transition={{ duration: ANIMATION_DURATION }}
+              style={{
+                height: previewMode ? '100%' : '100dvh',
+                cursor: 'default',
+                margin: isResultsModalOpen ? '0 auto' : '0',
+              }}
               className="envive-tw-shadow-md"
               onClick={e => e.stopPropagation()}
             >
@@ -107,16 +146,6 @@ export const FloatingChatOverlay = ({
     </AnimatePresence>
   );
 
-  // In preview mode, render inline. Otherwise use portal to body
-  if (previewMode) {
-    return chatWrapper;
-  }
-
-  // Render using portal to body to ensure it's on top of everything
-  if (typeof document !== 'undefined') {
-    return createPortal(chatWrapper, document.body);
-  }
-
   return chatWrapper;
 };
 

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,15 +1,22 @@
-import { ReactNode, Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  EnviveMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
   FloatingChatConfig,
   LookAndFeelConfig,
   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 {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+  Collapse,
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import {
   FloatingButton,
   FloatingButtonBackgroundColor,
@@ -18,15 +25,15 @@ import {
   FloatingButtonShow,
   FloatingButtonVariant,
 } from '@envive-ai/react-toolkit-v3/FloatingButton';
-import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { ReactNode, Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
 import { DebugBar } from 'src/debug/debugBar';
+import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton';
+import { CustomerServiceType } from '../../CXIntegration/types';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
-import { FloatingChatOverlay } from './FloatingChatOverlay';
 import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
-import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton';
 import { FLOATING_BUTTON_ID } from './constants';
-import { CustomerServiceType } from '../../CXIntegration/types';
+import { FloatingChatOverlay } from './FloatingChatOverlay';
 import { useFloatingButtonVisibility } from './hooks/useFloatingButtonVisibility';
 import { useAutoPopup } from './hooks/useAutoPopup';
 
@@ -69,12 +76,13 @@ const CXButtonProvider = ({
 interface FloatingChatWidgetHandlerProps extends BaseWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
 }
 
 const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
-  const { previewButtonOnly, previewChatAlwaysOpen } = props;
+  const { previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = props;
   const salesAgentData = useSalesAgent();
-
+  const { trackWidgetInteraction } = useWidgetInteraction();
   const { userHasInteractedValue } = useGetWidgetStatus();
 
   // TODO: Get hardcopy
@@ -86,15 +94,29 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
     CustomerServiceType.unsupported;
 
   // TODO: Get hardcopy content
-  const { isOpen, openChat, closeChat } = useChatToggle();
+  const { isOpen, openChat, closeChat, onHover } = useChatToggle();
 
   const [isCXOpen, setIsCXOpen] = useState(false);
+  const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
 
   // Reset CX open state when the envive widget is reopened
   useEffect(() => {
     if (isOpen) setIsCXOpen(false);
   }, [isOpen]);
 
+  const handleClose = (type: Collapse) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FLOATING_CHAT,
+        widget_interaction: WidgetInteractionType.WIDGET_COLLAPSED,
+        widget_interaction_data: {
+          widget_collapsed: type,
+        },
+      },
+    });
+  };
+
   const { shouldShowFloatingButton } = useFloatingButtonVisibility({
     floatingButtonShowConfig: floatingButton?.showOption as FloatingButtonShow,
     isChatOpen: isOpen,
@@ -118,21 +140,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
@@ -146,31 +164,53 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
       {({ isSwitchEnabled, toggle }) => (
         <>
           {/* Render chat when always open preview OR when normally open */}
-          {(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && (
+          {!previewButtonOnly && (
             <FloatingChatOverlay
               isOpened={effectiveIsOpen}
+              isResultsModalOpen={isResultsModalOpen}
               onClose={
                 previewChatAlwaysOpen
                   ? () => {}
-                  : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)
+                  : () => {
+                    closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
+                    handleClose({
+                      collapse_source: 'body_click',
+                    }); 1
+                  }
               }
               previewMode={!!previewChatAlwaysOpen}
             >
               <Suspense>
                 <FloatingChat
+                  setIsResultsModalOpen={setIsResultsModalOpen}
                   theme={theme}
                   salesAgentData={salesAgentData}
                   hardcopyContent={hardcopyContent}
                   floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
                   lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
-                  isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
+                  isCXButtonSwitchEnabled={previewCXButtonsEnabled ? true : !!isSwitchEnabled?.()}
                   isFloatingChatOpen={effectiveIsOpen}
                   onToggleCXButton={toggle}
                   debugBar={<DebugBar />}
+                  onSwipeClose={
+                    previewChatAlwaysOpen
+                      ? () => {}
+                      : () => {
+                        closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+                        handleClose({
+                          collapse_source: 'swipe',
+                        });
+                      }
+                  }
                   onClose={
                     previewChatAlwaysOpen
                       ? () => {}
-                      : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+                      : () => {
+                        closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+                        handleClose({
+                          collapse_source: 'close_button',
+                        });
+                      }
                   }
                 />
               </Suspense>
@@ -179,23 +219,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)
-              }
-              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>
           )}
         </>
       )}
@@ -203,17 +246,21 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   );
 };
 
-const FloatingChatWidgetWithBaseWidget =
-  withBaseWidget<FloatingChatWidgetHandlerProps>(FloatingChatWidgetHandler);
+const FloatingChatWidgetWithBaseWidget = withBaseWidget<FloatingChatWidgetHandlerProps>(
+  FloatingChatWidgetHandler,
+  { deferLoading: false },
+);
 
 export interface FloatingChatWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
 }
 
 export const FloatingChatWidget = ({
   previewButtonOnly,
   previewChatAlwaysOpen,
+  previewCXButtonsEnabled,
 }: FloatingChatWidgetProps = {}) => {
   return (
     <FloatingChatWidgetWithBaseWidget
@@ -221,6 +268,7 @@ export const FloatingChatWidget = ({
       widgetConfigId="fake-widget-config-id"
       previewButtonOnly={previewButtonOnly}
       previewChatAlwaysOpen={previewChatAlwaysOpen}
+      previewCXButtonsEnabled={previewCXButtonsEnabled}
     />
   );
 };