@envive-ai/react-widgets-v3 0.3.13 → 0.3.15-alpha.1

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.js

@@ -1,21 +1,23 @@
 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, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 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 { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { FloatingButton } from "@envive-ai/react-toolkit-v3/FloatingButton";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
@@ -42,15 +44,26 @@ const CXButtonProvider = ({ provider, enabled, suppressMerchantButton, onSwitchT
 const FloatingChatWidgetHandler = (props) => {
 	const { previewButtonOnly, previewChatAlwaysOpen } = 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);
 	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,
@@ -85,7 +98,10 @@ const FloatingChatWidgetHandler = (props) => {
 		onCXClose: () => setIsCXOpen(false),
 		children: ({ isSwitchEnabled, toggle }) => /* @__PURE__ */ jsxs(Fragment, { children: [(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && /* @__PURE__ */ jsx(FloatingChatOverlay, {
 			isOpened: effectiveIsOpen,
-			onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY),
+			onClose: previewChatAlwaysOpen ? () => {} : () => {
+				closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
+				handleClose({ collapse_source: "body_click" });
+			},
 			previewMode: !!previewChatAlwaysOpen,
 			children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(FloatingChat, {
 				theme,
@@ -97,7 +113,14 @@ const FloatingChatWidgetHandler = (props) => {
 				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,
@@ -105,6 +128,7 @@ const FloatingChatWidgetHandler = (props) => {
 			mode: floatingButton?.mode,
 			backgroundColor: floatingButton?.backgroundColor,
 			onClick: previewButtonOnly ? () => {} : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON),
+			onMouseOver: onHover,
 			customIcon: floatingButton?.iconSVGSrc,
 			show: floatingButton?.showOption,
 			location: floatingButton?.position,

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

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

package/dist/widgets/ProductCardWidget/ProductCardWidget.cjs

@@ -1,16 +1,20 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
+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_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 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 = [
@@ -40,6 +44,11 @@ const ProductCardWidgetHandler = (props) => {
 	const fallbackColor = productCardWidgetConfig?.fallbackColor;
 	const imageSrc = productCardWidgetConfig?.imageSrc || "";
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
+	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 { widgetConfigId } = props;
 	(0, react.useEffect)(() => {
 		trackEvent({
@@ -50,16 +59,39 @@ const ProductCardWidgetHandler = (props) => {
 			}
 		});
 	}, [trackEvent, widgetConfigId]);
-	const handleSelect = (0, react.useCallback)((prompt) => {
+	const handleSelect = (0, react.useCallback)((text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		const stringId = require_functions.getStringIdForText(rawValues, text);
+		trackEvent({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetTextClicked,
+			eventProps: {
+				response_id: hardcopyContent?.responseId,
+				string_id: stringId,
+				text
+			}
+		});
 		onTypedMessageSubmitted({
-			query: prompt,
+			query: text,
 			userTyped: false,
 			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON
 		});
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
-	}, [onTypedMessageSubmitted, openChat]);
+		onSuggestionClick(text);
+	}, [
+		hardcopyContent,
+		onTypedMessageSubmitted,
+		openChat,
+		trackEvent
+	]);
 	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,
@@ -75,6 +107,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_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime8 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_runtime14.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime8.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime15 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_runtime9.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime15.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.js

@@ -1,15 +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 { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { EnviveMetricsEventName, SpiffyMetricsEventName, 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 { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 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 = [
@@ -39,6 +43,11 @@ const ProductCardWidgetHandler = (props) => {
 	const fallbackColor = productCardWidgetConfig?.fallbackColor;
 	const imageSrc = productCardWidgetConfig?.imageSrc || "";
 	const { trackEvent } = useAmplitude();
+	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 { widgetConfigId } = props;
 	useEffect(() => {
 		trackEvent({
@@ -49,16 +58,39 @@ const ProductCardWidgetHandler = (props) => {
 			}
 		});
 	}, [trackEvent, widgetConfigId]);
-	const handleSelect = useCallback((prompt) => {
+	const handleSelect = useCallback((text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		const stringId = getStringIdForText(rawValues, text);
+		trackEvent({
+			eventName: EnviveMetricsEventName.WidgetTextClicked,
+			eventProps: {
+				response_id: hardcopyContent?.responseId,
+				string_id: stringId,
+				text
+			}
+		});
 		onTypedMessageSubmitted({
-			query: prompt,
+			query: text,
 			userTyped: false,
 			displayLocation: ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON
 		});
 		openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
-	}, [onTypedMessageSubmitted, openChat]);
+		onSuggestionClick(text);
+	}, [
+		hardcopyContent,
+		onTypedMessageSubmitted,
+		openChat,
+		trackEvent
+	]);
 	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,
@@ -74,6 +106,12 @@ const ProductCardWidgetHandler = (props) => {
 		textTypingDuration: 800,
 		textTransition: 2e3,
 		onSelect: handleSelect,
+		onDrag,
+		onHover,
+		onMouseDown,
+		onMouseUp,
+		onTouchStart,
+		onTouchEnd,
 		onInputClick: handleInputClick
 	});
 };

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.cjs

@@ -4,20 +4,25 @@ 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 jotai = require("jotai");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 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_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
-let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
+let jotai = require("jotai");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
+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_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_toolkit_v3_PromptButtonCarouselWithImage = require("@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage");
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx
 const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
+	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.SINGLE_IMAGE_PROMPT, (text) => text);
 	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 	const promptButtonCarouselWithImageWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
@@ -37,15 +42,33 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		});
 	}, [trackEvent, widgetConfigId]);
 	const handlePromptButtonClick = (0, react.useCallback)((text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		const stringId = require_functions.getStringIdForText(rawValues, text);
+		trackEvent({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetTextClicked,
+			eventProps: {
+				response_id: hardcopyContent?.responseId,
+				string_id: stringId,
+				text
+			}
+		});
 		onTypedMessageSubmitted({
 			query: text,
 			userTyped: false,
 			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON
 		});
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON);
+		onSuggestionClick(text);
 	}, [onTypedMessageSubmitted, openChat]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [openChat]);
 	const variantInfo = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_app.variantInfoAtom);
 	const productId = variantInfo.variant === __envive_ai_react_hooks_application_models.VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
@@ -67,6 +90,12 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		textFieldPlaceholder: hardCopyContent?.textFieldPlaceholder,
 		hideTextField: promptButtonCarouselWithImageWidgetConfig?.hideTextField,
 		handlePromptButtonClick,
+		handlePromptButtonDrag: onDrag,
+		handlePromptButtonHover: onHover,
+		handlePromptButtonMouseDown: onMouseDown,
+		handlePromptButtonMouseUp: onMouseUp,
+		handlePromptButtonTouchStart: onTouchStart,
+		handlePromptButtonTouchEnd: onTouchEnd,
 		handleTextFieldClick
 	});
 };

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime4.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime2.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime2.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.js

@@ -1,22 +1,27 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
-import { getRecentProductImageUrls } from "../utils/functions.js";
+import { getRecentProductImageUrls, getStringIdForText } from "../utils/functions.js";
 import { useCallback, useEffect, useMemo } from "react";
-import { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
-import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
-import { useAtomValue } from "jotai";
+import { lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 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 { lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
-import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
+import { useAtomValue } from "jotai";
 import { ChatElementDisplayLocationV3, VariantTypeEnum } from "@envive-ai/react-hooks/application/models";
 import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
+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 { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { PromptButtonCarouselWithImage } from "@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx
 const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
+	const { trackWidgetInteraction } = useWidgetInteraction();
+	const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.SINGLE_IMAGE_PROMPT, (text) => text);
 	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 	const promptButtonCarouselWithImageWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
@@ -36,15 +41,33 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		});
 	}, [trackEvent, widgetConfigId]);
 	const handlePromptButtonClick = useCallback((text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		const stringId = getStringIdForText(rawValues, text);
+		trackEvent({
+			eventName: EnviveMetricsEventName.WidgetTextClicked,
+			eventProps: {
+				response_id: hardcopyContent?.responseId,
+				string_id: stringId,
+				text
+			}
+		});
 		onTypedMessageSubmitted({
 			query: text,
 			userTyped: false,
 			displayLocation: ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON
 		});
 		openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON);
+		onSuggestionClick(text);
 	}, [onTypedMessageSubmitted, openChat]);
 	const handleTextFieldClick = useCallback(() => {
 		openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+				widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [openChat]);
 	const variantInfo = useAtomValue(variantInfoAtom);
 	const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
@@ -66,6 +89,12 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		textFieldPlaceholder: hardCopyContent?.textFieldPlaceholder,
 		hideTextField: promptButtonCarouselWithImageWidgetConfig?.hideTextField,
 		handlePromptButtonClick,
+		handlePromptButtonDrag: onDrag,
+		handlePromptButtonHover: onHover,
+		handlePromptButtonMouseDown: onMouseDown,
+		handlePromptButtonMouseUp: onMouseUp,
+		handlePromptButtonTouchStart: onTouchStart,
+		handlePromptButtonTouchEnd: onTouchEnd,
 		handleTextFieldClick
 	});
 };

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.cjs

@@ -1,26 +1,20 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
+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_PromptCarousel_types_types = require("@envive-ai/react-toolkit-v3/PromptCarousel/types/types");
+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_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
+let __envive_ai_react_toolkit_v3_PromptCarousel_types_types = require("@envive-ai/react-toolkit-v3/PromptCarousel/types/types");
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx
-/** Finds the string_id (id) from raw widget text values for the given display text */
-function getStringIdForText(rawValues, text) {
-	if (!rawValues) return void 0;
-	for (const raw of Object.values(rawValues)) {
-		const found = (Array.isArray(raw) ? raw : [raw]).find((s) => s.value === text);
-		if (found) return found.id;
-	}
-}
 const mockButtonTexts = [
 	"Loading button 1",
 	"Loading button 2",
@@ -32,6 +26,10 @@ const PromptCarouselWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
 	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+	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.SUGGESTION_BAR, (text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		return require_functions.getStringIdForText(rawValues, text);
+	});
 	const promptButtonTexts = hardcopyContent?.values?.promptButtonTexts || [];
 	const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
 	const promptCarouselWidgetConfig = widgetConfig;
@@ -52,7 +50,8 @@ const PromptCarouselWidgetHandler = (props) => {
 	}, [trackEvent, widgetConfigId]);
 	const handleButtonClick = (0, react.useCallback)((text) => {
 		const rawValues = hardcopyContent?.rawValues;
-		const stringId = getStringIdForText(rawValues, text);
+		const stringId = require_functions.getStringIdForText(rawValues, text);
+		onSuggestionClick(stringId);
 		trackEvent({
 			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetTextClicked,
 			eventProps: {
@@ -83,6 +82,12 @@ const PromptCarouselWidgetHandler = (props) => {
 		promptCarouselRows,
 		animationSpeed,
 		handleButtonClick,
+		handleButtonHover: onHover,
+		handleButtonDrag: onDrag,
+		handleButtonMouseUp: onMouseUp,
+		handleButtonMouseDown: onMouseDown,
+		handleButtonTouchStart: onTouchStart,
+		handleButtonTouchEnd: onTouchEnd,
 		promptButtonTexts: buttonTexts
 	});
 };

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.cts

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

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts

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