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

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.cjs

@@ -2,21 +2,24 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
 const require_debugBar = require('../../debug/debugBar.cjs');
-const require_FloatingChatOverlay = require('./FloatingChatOverlay.cjs');
-const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
 const require_types = require('../../CXIntegration/types.cjs');
 const require_constants = require('./constants.cjs');
 const require_useUnifiedCXButton = require('../../CXIntegration/hooks/useUnifiedCXButton.cjs');
+const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
+const require_FloatingChatOverlay = require('./FloatingChatOverlay.cjs');
 const require_useFloatingButtonVisibility = require('./hooks/useFloatingButtonVisibility.cjs');
 const require_useAutoPopup = require('./hooks/useAutoPopup.cjs');
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
+let __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent = require("@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
+let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
 let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
+let __envive_ai_react_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
 let __envive_ai_react_toolkit_v3_FloatingButton = require("@envive-ai/react-toolkit-v3/FloatingButton");
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
@@ -41,17 +44,29 @@ const CXButtonProvider = ({ provider, enabled, suppressMerchantButton, onSwitchT
 	}) });
 };
 const FloatingChatWidgetHandler = (props) => {
-	const { previewButtonOnly, previewChatAlwaysOpen } = props;
+	const { previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = props;
 	const salesAgentData = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
+	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
 	const { userHasInteractedValue } = require_useGetWidgetStatus.default();
 	const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
 	const { customerServiceIntegration, floatingButton, floatingChat } = uiConfig ?? {};
 	const cxProvider = customerServiceIntegration?.provider ?? require_types.CustomerServiceType.unsupported;
-	const { isOpen, openChat, closeChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
+	const { isOpen, openChat, closeChat, onHover } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
 	const [isCXOpen, setIsCXOpen] = (0, react.useState)(false);
+	const [isResultsModalOpen, setIsResultsModalOpen] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
 		if (isOpen) setIsCXOpen(false);
 	}, [isOpen]);
+	const handleClose = (type) => {
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.FLOATING_CHAT,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.WIDGET_COLLAPSED,
+				widget_interaction_data: { widget_collapsed: type }
+			}
+		});
+	};
 	const { shouldShowFloatingButton } = require_useFloatingButtonVisibility.useFloatingButtonVisibility({
 		floatingButtonShowConfig: floatingButton?.showOption,
 		isChatOpen: isOpen,
@@ -64,64 +79,73 @@ const FloatingChatWidgetHandler = (props) => {
 		return uiConfig?.lookAndFeel?.theme ?? __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM;
 	}, [isUiConfigLoading, uiConfig]);
 	require_useAutoPopup.useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
-	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
-	const hasTrackedEvent = (0, react.useRef)(false);
-	(0, react.useEffect)(() => {
-		if (buttonShouldRender && !hasTrackedEvent.current) {
-			trackEvent({
-				eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
-				eventProps: {
-					widget_config_id: "floating-button",
-					widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingButtonV3
-				}
-			});
-			hasTrackedEvent.current = true;
-		}
-	}, [trackEvent, buttonShouldRender]);
+	const { isReady } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
+	const floatingButtonVisibilityRef = (0, react.useRef)(null);
+	(0, __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent.useTrackComponentVisibleEvent)(floatingButtonVisibilityRef, {
+		widget_config_id: "floating-button",
+		widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingButtonV3
+	}, "0px", isReady && buttonShouldRender);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CXButtonProvider, {
 		provider: cxProvider,
 		enabled: customerServiceIntegration?.enabled ?? false,
 		suppressMerchantButton: customerServiceIntegration?.suppressMerchantButton ?? false,
 		onSwitchToAgent: () => setIsCXOpen(true),
 		onCXClose: () => setIsCXOpen(false),
-		children: ({ isSwitchEnabled, toggle }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingChatOverlay.FloatingChatOverlay, {
+		children: ({ isSwitchEnabled, toggle }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!previewButtonOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingChatOverlay.FloatingChatOverlay, {
 			isOpened: effectiveIsOpen,
-			onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY),
+			isResultsModalOpen,
+			onClose: previewChatAlwaysOpen ? () => {} : () => {
+				closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
+				handleClose({ collapse_source: "body_click" });
+			},
 			previewMode: !!previewChatAlwaysOpen,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingChat, {
+				setIsResultsModalOpen,
 				theme,
 				salesAgentData,
 				hardcopyContent,
 				floatingChatConfig: uiConfig?.floatingChat ?? {},
 				lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
-				isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
+				isCXButtonSwitchEnabled: previewCXButtonsEnabled ? true : !!isSwitchEnabled?.(),
 				isFloatingChatOpen: effectiveIsOpen,
 				onToggleCXButton: toggle,
 				debugBar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_debugBar.DebugBar, {}),
-				onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+				onSwipeClose: previewChatAlwaysOpen ? () => {} : () => {
+					closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+					handleClose({ collapse_source: "swipe" });
+				},
+				onClose: previewChatAlwaysOpen ? () => {} : () => {
+					closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+					handleClose({ collapse_source: "close_button" });
+				}
 			}) })
-		}), buttonShouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
-			id: require_constants.FLOATING_BUTTON_ID,
-			variant: floatingButton?.style,
-			mode: floatingButton?.mode,
-			backgroundColor: floatingButton?.backgroundColor,
-			onClick: previewButtonOnly ? () => {} : () => openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_BUTTON),
-			customIcon: floatingButton?.iconSVGSrc,
-			show: floatingButton?.showOption,
-			location: floatingButton?.position,
-			hasInteractionHappened: userHasInteractedValue,
-			ariaLabel: "Open chat",
-			previewMode: !!previewButtonOnly
+		}), buttonShouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: floatingButtonVisibilityRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
+				id: require_constants.FLOATING_BUTTON_ID,
+				variant: floatingButton?.style,
+				mode: floatingButton?.mode,
+				backgroundColor: floatingButton?.backgroundColor,
+				onClick: previewButtonOnly ? () => {} : () => openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_BUTTON),
+				onMouseOver: onHover,
+				customIcon: floatingButton?.iconSVGSrc,
+				show: floatingButton?.showOption,
+				location: floatingButton?.position,
+				hasInteractionHappened: userHasInteractedValue,
+				ariaLabel: "Open chat",
+				previewMode: !!previewButtonOnly
+			})
 		})] })
 	}, cxProvider);
 };
-const FloatingChatWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(FloatingChatWidgetHandler);
-const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen } = {}) => {
+const FloatingChatWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(FloatingChatWidgetHandler, { deferLoading: false });
+const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = {}) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingChatWidgetWithBaseWidget, {
 		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingChatV3,
 		widgetConfigId: "fake-widget-config-id",
 		previewButtonOnly,
-		previewChatAlwaysOpen
+		previewChatAlwaysOpen,
+		previewCXButtonsEnabled
 	});
 };
 FloatingChatWidget.displayName = "FloatingChatWidget";

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.cts

@@ -1,15 +1,17 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
 }
 declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
-    previewChatAlwaysOpen
-  }?: FloatingChatWidgetProps): react_jsx_runtime6.JSX.Element;
+    previewChatAlwaysOpen,
+    previewCXButtonsEnabled
+  }?: FloatingChatWidgetProps): react_jsx_runtime17.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.ts

@@ -1,15 +1,17 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
 }
 declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
-    previewChatAlwaysOpen
-  }?: FloatingChatWidgetProps): react_jsx_runtime4.JSX.Element;
+    previewChatAlwaysOpen,
+    previewCXButtonsEnabled
+  }?: FloatingChatWidgetProps): react_jsx_runtime19.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.js

@@ -1,21 +1,24 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
 import { DebugBar } from "../../debug/debugBar.js";
-import { FloatingChatOverlay } from "./FloatingChatOverlay.js";
-import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
 import { CustomerServiceType } from "../../CXIntegration/types.js";
 import { FLOATING_BUTTON_ID } from "./constants.js";
 import { useUnifiedCXButton } from "../../CXIntegration/hooks/useUnifiedCXButton.js";
+import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
+import { FloatingChatOverlay } from "./FloatingChatOverlay.js";
 import { useFloatingButtonVisibility } from "./hooks/useFloatingButtonVisibility.js";
 import { useAutoPopup } from "./hooks/useAutoPopup.js";
 import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
-import { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useTrackComponentVisibleEvent } from "@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
+import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
+import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { FloatingButton } from "@envive-ai/react-toolkit-v3/FloatingButton";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
@@ -40,17 +43,29 @@ const CXButtonProvider = ({ provider, enabled, suppressMerchantButton, onSwitchT
 	}) });
 };
 const FloatingChatWidgetHandler = (props) => {
-	const { previewButtonOnly, previewChatAlwaysOpen } = props;
+	const { previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = props;
 	const salesAgentData = useSalesAgent();
+	const { trackWidgetInteraction } = useWidgetInteraction();
 	const { userHasInteractedValue } = useGetWidgetStatus_default();
 	const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
 	const { customerServiceIntegration, floatingButton, floatingChat } = uiConfig ?? {};
 	const cxProvider = customerServiceIntegration?.provider ?? CustomerServiceType.unsupported;
-	const { isOpen, openChat, closeChat } = useChatToggle();
+	const { isOpen, openChat, closeChat, onHover } = useChatToggle();
 	const [isCXOpen, setIsCXOpen] = useState(false);
+	const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
 	useEffect(() => {
 		if (isOpen) setIsCXOpen(false);
 	}, [isOpen]);
+	const handleClose = (type) => {
+		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,
 		isChatOpen: isOpen,
@@ -63,64 +78,73 @@ const FloatingChatWidgetHandler = (props) => {
 		return uiConfig?.lookAndFeel?.theme ?? Theme.GLOBAL_CUSTOM;
 	}, [isUiConfigLoading, uiConfig]);
 	useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
-	const { trackEvent } = useAmplitude();
-	const hasTrackedEvent = useRef(false);
-	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(null);
+	useTrackComponentVisibleEvent(floatingButtonVisibilityRef, {
+		widget_config_id: "floating-button",
+		widget_type: WidgetTypeV3.FloatingButtonV3
+	}, "0px", isReady && buttonShouldRender);
 	return /* @__PURE__ */ jsx(CXButtonProvider, {
 		provider: cxProvider,
 		enabled: customerServiceIntegration?.enabled ?? false,
 		suppressMerchantButton: customerServiceIntegration?.suppressMerchantButton ?? false,
 		onSwitchToAgent: () => setIsCXOpen(true),
 		onCXClose: () => setIsCXOpen(false),
-		children: ({ isSwitchEnabled, toggle }) => /* @__PURE__ */ jsxs(Fragment, { children: [(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && /* @__PURE__ */ jsx(FloatingChatOverlay, {
+		children: ({ isSwitchEnabled, toggle }) => /* @__PURE__ */ jsxs(Fragment, { children: [!previewButtonOnly && /* @__PURE__ */ jsx(FloatingChatOverlay, {
 			isOpened: effectiveIsOpen,
-			onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY),
+			isResultsModalOpen,
+			onClose: previewChatAlwaysOpen ? () => {} : () => {
+				closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
+				handleClose({ collapse_source: "body_click" });
+			},
 			previewMode: !!previewChatAlwaysOpen,
 			children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(FloatingChat, {
+				setIsResultsModalOpen,
 				theme,
 				salesAgentData,
 				hardcopyContent,
 				floatingChatConfig: uiConfig?.floatingChat ?? {},
 				lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
-				isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
+				isCXButtonSwitchEnabled: previewCXButtonsEnabled ? true : !!isSwitchEnabled?.(),
 				isFloatingChatOpen: effectiveIsOpen,
 				onToggleCXButton: toggle,
 				debugBar: /* @__PURE__ */ jsx(DebugBar, {}),
-				onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+				onSwipeClose: previewChatAlwaysOpen ? () => {} : () => {
+					closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+					handleClose({ collapse_source: "swipe" });
+				},
+				onClose: previewChatAlwaysOpen ? () => {} : () => {
+					closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+					handleClose({ collapse_source: "close_button" });
+				}
 			}) })
-		}), buttonShouldRender && /* @__PURE__ */ jsx(FloatingButton, {
-			id: FLOATING_BUTTON_ID,
-			variant: floatingButton?.style,
-			mode: floatingButton?.mode,
-			backgroundColor: floatingButton?.backgroundColor,
-			onClick: previewButtonOnly ? () => {} : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON),
-			customIcon: floatingButton?.iconSVGSrc,
-			show: floatingButton?.showOption,
-			location: floatingButton?.position,
-			hasInteractionHappened: userHasInteractedValue,
-			ariaLabel: "Open chat",
-			previewMode: !!previewButtonOnly
+		}), buttonShouldRender && /* @__PURE__ */ jsx("div", {
+			ref: floatingButtonVisibilityRef,
+			children: /* @__PURE__ */ jsx(FloatingButton, {
+				id: FLOATING_BUTTON_ID,
+				variant: floatingButton?.style,
+				mode: floatingButton?.mode,
+				backgroundColor: floatingButton?.backgroundColor,
+				onClick: previewButtonOnly ? () => {} : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON),
+				onMouseOver: onHover,
+				customIcon: floatingButton?.iconSVGSrc,
+				show: floatingButton?.showOption,
+				location: floatingButton?.position,
+				hasInteractionHappened: userHasInteractedValue,
+				ariaLabel: "Open chat",
+				previewMode: !!previewButtonOnly
+			})
 		})] })
 	}, cxProvider);
 };
-const FloatingChatWidgetWithBaseWidget = withBaseWidget(FloatingChatWidgetHandler);
-const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen } = {}) => {
+const FloatingChatWidgetWithBaseWidget = withBaseWidget(FloatingChatWidgetHandler, { deferLoading: false });
+const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = {}) => {
 	return /* @__PURE__ */ jsx(FloatingChatWidgetWithBaseWidget, {
 		widgetType: WidgetTypeV3.FloatingChatV3,
 		widgetConfigId: "fake-widget-config-id",
 		previewButtonOnly,
-		previewChatAlwaysOpen
+		previewChatAlwaysOpen,
+		previewCXButtonsEnabled
 	});
 };
 FloatingChatWidget.displayName = "FloatingChatWidget";

package/dist/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts
 
@@ -8,7 +8,7 @@ interface FullPageSalesAgentBaseWidgetProps {
 declare const FullPageSalesAgentWidget: {
   ({
     widgetConfigId
-  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime4.JSX.Element;
+  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts
 
@@ -8,7 +8,7 @@ interface FullPageSalesAgentBaseWidgetProps {
 declare const FullPageSalesAgentWidget: {
   ({
     widgetConfigId
-  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime5.JSX.Element;
+  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.cjs

@@ -5,13 +5,16 @@ const require_functions = require('../utils/functions.cjs');
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
+let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
 let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
-let __envive_ai_react_toolkit_v3_PromptButton_types = require("@envive-ai/react-toolkit-v3/PromptButton/types");
+let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
+let __envive_ai_react_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
+let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 let __envive_ai_react_toolkit_v3_ProductCard = require("@envive-ai/react-toolkit-v3/ProductCard");
+let __envive_ai_react_toolkit_v3_PromptButton_types = require("@envive-ai/react-toolkit-v3/PromptButton/types");
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.tsx
 const mockPrompts = [
@@ -41,16 +44,11 @@ const ProductCardWidgetHandler = (props) => {
 	const fallbackColor = productCardWidgetConfig?.fallbackColor;
 	const imageSrc = productCardWidgetConfig?.imageSrc || "";
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
-	const { widgetConfigId } = props;
-	(0, react.useEffect)(() => {
-		trackEvent({
-			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ProductCardV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
+	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
+	const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = (0, __envive_ai_react_toolkit_v3_PromptCarousel.usePromptCarouselAnalytics)(__envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.IMAGE_PROMPT_CARD, (text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		return require_functions.getStringIdForText(rawValues, text);
+	});
 	const handleSelect = (0, react.useCallback)((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = require_functions.getStringIdForText(rawValues, text);
@@ -68,6 +66,7 @@ const ProductCardWidgetHandler = (props) => {
 			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON
 		});
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
+		onSuggestionClick(text);
 	}, [
 		hardcopyContent,
 		onTypedMessageSubmitted,
@@ -76,6 +75,13 @@ const ProductCardWidgetHandler = (props) => {
 	]);
 	const handleInputClick = (0, react.useCallback)(() => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD);
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [openChat]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ProductCard.ProductCard, {
 		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM,
@@ -91,6 +97,12 @@ const ProductCardWidgetHandler = (props) => {
 		textTypingDuration: 800,
 		textTransition: 2e3,
 		onSelect: handleSelect,
+		onDrag,
+		onHover,
+		onMouseDown,
+		onMouseUp,
+		onTouchStart,
+		onTouchEnd,
 		onInputClick: handleInputClick
 	});
 };

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
 interface ProductCardWidgetProps {
@@ -7,7 +7,7 @@ interface ProductCardWidgetProps {
 declare const ProductCardWidget: {
   ({
     widgetConfigId
-  }: ProductCardWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime19.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
 interface ProductCardWidgetProps {
@@ -7,7 +7,7 @@ interface ProductCardWidgetProps {
 declare const ProductCardWidget: {
   ({
     widgetConfigId
-  }: ProductCardWidgetProps): react_jsx_runtime3.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.js

@@ -1,16 +1,19 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
 import { getStringIdForText } from "../utils/functions.js";
-import { useCallback, useEffect } from "react";
-import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useCallback } from "react";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
-import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
+import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
-import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
+import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
+import { usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { ProductCard } from "@envive-ai/react-toolkit-v3/ProductCard";
+import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.tsx
 const mockPrompts = [
@@ -40,16 +43,11 @@ const ProductCardWidgetHandler = (props) => {
 	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 { trackWidgetInteraction } = useWidgetInteraction();
+	const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.IMAGE_PROMPT_CARD, (text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		return getStringIdForText(rawValues, text);
+	});
 	const handleSelect = useCallback((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = getStringIdForText(rawValues, text);
@@ -67,6 +65,7 @@ const ProductCardWidgetHandler = (props) => {
 			displayLocation: ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON
 		});
 		openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
+		onSuggestionClick(text);
 	}, [
 		hardcopyContent,
 		onTypedMessageSubmitted,
@@ -75,6 +74,13 @@ const ProductCardWidgetHandler = (props) => {
 	]);
 	const handleInputClick = useCallback(() => {
 		openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD);
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+				widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [openChat]);
 	return /* @__PURE__ */ jsx(ProductCard, {
 		theme: Theme.GLOBAL_CUSTOM,
@@ -90,6 +96,12 @@ const ProductCardWidgetHandler = (props) => {
 		textTypingDuration: 800,
 		textTransition: 2e3,
 		onSelect: handleSelect,
+		onDrag,
+		onHover,
+		onMouseDown,
+		onMouseUp,
+		onTouchStart,
+		onTouchEnd,
 		onInputClick: handleInputClick
 	});
 };