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

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.cjs

@@ -4,13 +4,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 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 jotai = require("jotai");
 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_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
 let __envive_ai_react_toolkit_v3_PromptButtonCarouselWithImage = require("@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage");
 
@@ -18,6 +21,8 @@ let __envive_ai_react_toolkit_v3_PromptButtonCarouselWithImage = require("@enviv
 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;
@@ -27,15 +32,6 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		textFieldPlaceholder: hardcopyContent?.values?.textFieldPlaceholderText
 	};
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
-	(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.PromptButtonCarouselWithImageV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handlePromptButtonClick = (0, react.useCallback)((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = require_functions.getStringIdForText(rawValues, text);
@@ -53,9 +49,17 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 			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;
@@ -77,6 +81,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_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime1.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime5.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime1.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime5.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_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime9.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime9.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.js

@@ -1,15 +1,18 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import { getRecentProductImageUrls, getStringIdForText } from "../utils/functions.js";
-import { useCallback, useEffect, useMemo } from "react";
-import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useCallback, useMemo } 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 { 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 { useAtomValue } from "jotai";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { ChatElementDisplayLocationV3, VariantTypeEnum } 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 { usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
 import { PromptButtonCarouselWithImage } from "@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage";
 
@@ -17,6 +20,8 @@ import { PromptButtonCarouselWithImage } from "@envive-ai/react-toolkit-v3/Promp
 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;
@@ -26,15 +31,6 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		textFieldPlaceholder: hardcopyContent?.values?.textFieldPlaceholderText
 	};
 	const { trackEvent } = useAmplitude();
-	useEffect(() => {
-		trackEvent({
-			eventName: SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handlePromptButtonClick = useCallback((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = getStringIdForText(rawValues, text);
@@ -52,9 +48,17 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 			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;
@@ -76,6 +80,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

@@ -5,13 +5,14 @@ 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_PromptCarousel_types_types = require("@envive-ai/react-toolkit-v3/PromptCarousel/types/types");
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx
 const mockButtonTexts = [
@@ -25,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;
@@ -34,18 +39,10 @@ const PromptCarouselWidgetHandler = (props) => {
 	const promptCarouselRows = promptCarouselWidgetConfig?.promptCarouselRows;
 	const animationSpeed = isLoading ? __envive_ai_react_toolkit_v3_PromptCarousel_types_types.AnimationSpeed.NONE : promptCarouselWidgetConfig?.animationSpeed;
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
-	(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.PromptCarouselV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handleButtonClick = (0, react.useCallback)((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = require_functions.getStringIdForText(rawValues, text);
+		onSuggestionClick(stringId);
 		trackEvent({
 			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetTextClicked,
 			eventProps: {
@@ -76,6 +73,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_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime4 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_runtime4.JSX.Element;
   displayName: string;
 };
 //#endregion

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

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

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.js

@@ -1,16 +1,17 @@
 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 { AnimationSpeed } from "@envive-ai/react-toolkit-v3/PromptCarousel/types/types";
-import { PromptCarousel } from "@envive-ai/react-toolkit-v3/PromptCarousel";
+import { WidgetInteractionComponent } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
+import { PromptCarousel, usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
+import { AnimationSpeed as AnimationSpeed$1 } from "@envive-ai/react-toolkit-v3/PromptCarousel/types/types";
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx
 const mockButtonTexts = [
@@ -24,6 +25,10 @@ const PromptCarouselWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
 	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+	const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.SUGGESTION_BAR, (text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		return getStringIdForText(rawValues, text);
+	});
 	const promptButtonTexts = hardcopyContent?.values?.promptButtonTexts || [];
 	const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
 	const promptCarouselWidgetConfig = widgetConfig;
@@ -31,20 +36,12 @@ const PromptCarouselWidgetHandler = (props) => {
 	const boldFirstButton = promptCarouselWidgetConfig?.boldFirstButton;
 	const promptButtonType = promptCarouselWidgetConfig?.promptButtonType;
 	const promptCarouselRows = promptCarouselWidgetConfig?.promptCarouselRows;
-	const animationSpeed = isLoading ? AnimationSpeed.NONE : promptCarouselWidgetConfig?.animationSpeed;
+	const animationSpeed = isLoading ? AnimationSpeed$1.NONE : promptCarouselWidgetConfig?.animationSpeed;
 	const { trackEvent } = useAmplitude();
-	useEffect(() => {
-		trackEvent({
-			eventName: SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: WidgetTypeV3.PromptCarouselV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handleButtonClick = useCallback((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = getStringIdForText(rawValues, text);
+		onSuggestionClick(stringId);
 		trackEvent({
 			eventName: EnviveMetricsEventName.WidgetTextClicked,
 			eventProps: {
@@ -75,6 +72,12 @@ const PromptCarouselWidgetHandler = (props) => {
 		promptCarouselRows,
 		animationSpeed,
 		handleButtonClick,
+		handleButtonHover: onHover,
+		handleButtonDrag: onDrag,
+		handleButtonMouseUp: onMouseUp,
+		handleButtonMouseDown: onMouseDown,
+		handleButtonTouchStart: onTouchStart,
+		handleButtonTouchEnd: onTouchEnd,
 		promptButtonTexts: buttonTexts
 	});
 };

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.cjs');
-const require_ChatPreviewComparisonWidget = require('../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs');
 const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
+const require_ChatPreviewComparisonWidget = require('../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs');
 const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
 const require_SocialProofWidget = require('../SocialProofWidget/SocialProofWidget.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts

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

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.js

@@ -1,6 +1,6 @@
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
-import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
 import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
+import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
 import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
 import { SocialProofWidgetWithBaseWidget } from "../SocialProofWidget/SocialProofWidget.js";
 import { jsx } from "react/jsx-runtime";

package/dist/widgets/SocialProofWidget/SocialProofWidget.cjs

@@ -4,25 +4,29 @@ 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_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 jotai = require("jotai");
 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_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_ChatPreviewLoading = require("@envive-ai/react-toolkit-v3/ChatPreviewLoading");
 let __envive_ai_react_hooks_atoms_widget = require("@envive-ai/react-hooks/atoms/widget");
+let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
 let __envive_ai_react_toolkit_v3_SocialProof = require("@envive-ai/react-toolkit-v3/SocialProof");
+let __envive_ai_react_hooks_hooks_ProductImageUrl = require("@envive-ai/react-hooks/hooks/ProductImageUrl");
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.tsx
 const SocialProofWidgetHandler = (props) => {
 	const setChatPreviewLoadingData = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_widget.chatPreviewLoadingDataAtom);
 	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
-	const lastAssistantMessage = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom);
 	const variantInfo = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_app.variantInfoAtom);
+	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
+	const { onClick: onSuggestionClick, onHover, onDrag, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = (0, __envive_ai_react_toolkit_v3_PromptCarousel.usePromptCarouselAnalytics)(__envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.SOCIAL_PROOF, (text) => text);
 	const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 	const socialProofWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
@@ -50,21 +54,12 @@ const SocialProofWidgetHandler = (props) => {
 	};
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
-	const dynamicImageUrl = require_functions.getProductImageUrl(lastAssistantMessage);
+	const dynamicImageUrl = (0, __envive_ai_react_hooks_hooks_ProductImageUrl.useProductImageUrl)(variantInfo.variant === __envive_ai_react_hooks_application_models.VariantTypeEnum.Pdp ? variantInfo.productId : void 0);
 	const images = socialProofWidgetConfig?.kind !== __envive_ai_react_toolkit_v3_SocialProof.WidgetKind.DYNAMIC ? socialProofWidgetConfig?.images : [{
 		src: dynamicImageUrl,
 		alt: "Product Image"
 	}];
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
-	(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.SocialProofV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handlePrimaryButtonClick = (0, react.useCallback)((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = require_functions.getStringIdForText(rawValues, text);
@@ -82,17 +77,53 @@ const SocialProofWidgetHandler = (props) => {
 			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON
 		});
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.SOCIAL_PROOF,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.SUGGESTION_CLICKED,
+				widget_interaction_data: { suggestion_clicked: { suggestion_id: text } }
+			}
+		});
 	}, [onTypedMessageSubmitted, openChat]);
+	const handlePrimaryButtonHover = (0, react.useCallback)((text) => {
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.SOCIAL_PROOF,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.WIDGET_HOVERED,
+				widget_interaction_data: { suggestion_hovered: { suggestion_id: text } }
+			}
+		});
+	}, []);
 	const handleSecondaryButtonClick = (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.SOCIAL_PROOF_SECONDARY_BUTTON
 		});
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
+		onSuggestionClick(text);
 	}, [onTypedMessageSubmitted, openChat]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_TEXT_FIELD);
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.SOCIAL_PROOF,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [openChat]);
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ChatPreviewLoading.ChatPreviewLoading, { fullIsLoading: true });
 	setChatPreviewLoadingData({
@@ -141,7 +172,14 @@ const SocialProofWidgetHandler = (props) => {
 		widgetContentProps,
 		widgetEventProps: {
 			handlePrimaryButtonClick,
+			handlePrimaryButtonHover,
 			handleSecondaryButtonClick,
+			handleSecondaryButtonHover: onHover,
+			handleSecondaryButtonDrag: onDrag,
+			handleSecondaryButtonMouseDown: onMouseDown,
+			handleSecondaryButtonMouseUp: onMouseUp,
+			handleSecondaryButtonTouchStart: onTouchStart,
+			handleSecondaryButtonTouchEnd: onTouchEnd,
 			handleTextFieldClick
 		}
 	});

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.cts

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

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.ts

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