@envive-ai/react-widgets-v3 0.3.5 → 0.3.7

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

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

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.js

@@ -1,6 +1,6 @@
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
-import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
+import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.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

@@ -1,16 +1,17 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
-const require_v4 = require('../../node_modules/uuid/dist-node/v4.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 jotai = require("jotai");
-let __envive_ai_react_hooks_atoms_chat_replies = require("@envive-ai/react-hooks/atoms/chat/replies");
+let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 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 __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_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_toolkit_v3_SocialProof = require("@envive-ai/react-toolkit-v3/SocialProof");
@@ -18,15 +19,29 @@ let __envive_ai_react_toolkit_v3_SocialProof = require("@envive-ai/react-toolkit
 //#region src/widgets/SocialProofWidget/SocialProofWidget.tsx
 const SocialProofWidgetHandler = (props) => {
 	const setChatPreviewLoadingData = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_widget.chatPreviewLoadingDataAtom);
-	const handleReply = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_chat_replies.handleReplyAtom);
+	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 { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 	const socialProofWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
+	const { pageVariant, countKey } = (0, react.useMemo)(() => {
+		if (variantInfo.variant === __envive_ai_react_hooks_application_models.VariantTypeEnum.Pdp) return {
+			pageVariant: __envive_ai_react_toolkit_v3_SocialProof.PageVariant.PDP,
+			countKey: variantInfo.productId
+		};
+		if (variantInfo.variant === __envive_ai_react_hooks_application_models.VariantTypeEnum.Plp) return {
+			pageVariant: __envive_ai_react_toolkit_v3_SocialProof.PageVariant.PLP,
+			countKey: variantInfo.plpId
+		};
+		return {
+			pageVariant: __envive_ai_react_toolkit_v3_SocialProof.PageVariant.PageVisit,
+			countKey: variantInfo.url || variantInfo.pageVisitCategory
+		};
+	}, [variantInfo]);
 	const hardCopyContent = {
 		titleLabel: hardcopyContent?.values?.titleLabel,
-		numberOfCustomersText: hardcopyContent?.values?.numberOfCustomersText,
 		customerQueryText: hardcopyContent?.values?.customerQueryText,
 		primaryButtonText: hardcopyContent?.values?.primaryButtonText,
 		secondaryButtonTitleText: hardcopyContent?.values?.secondaryButtonTitleText,
@@ -40,45 +55,33 @@ const SocialProofWidgetHandler = (props) => {
 		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) => {
-		handleReply({
-			message: {
-				id: require_v4.default(),
-				role: __envive_ai_react_hooks_application_models.MessageRole.User,
-				type: __envive_ai_react_hooks_application_models.MessageType.QueryTyped,
-				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-				metadata: { content: text }
-			},
+		onTypedMessageSubmitted({
+			query: text,
 			userTyped: false
 		});
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
-	}, [handleReply, openChat]);
+	}, [onTypedMessageSubmitted, openChat]);
 	const handleSecondaryButtonClick = (0, react.useCallback)((text) => {
-		handleReply({
-			message: {
-				id: require_v4.default(),
-				role: __envive_ai_react_hooks_application_models.MessageRole.User,
-				type: __envive_ai_react_hooks_application_models.MessageType.QueryTyped,
-				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-				metadata: { content: text }
-			},
+		onTypedMessageSubmitted({
+			query: text,
 			userTyped: false
 		});
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
-	}, [handleReply, openChat]);
-	const handleTextFieldClick = (0, react.useCallback)((text) => {
-		handleReply({
-			message: {
-				id: require_v4.default(),
-				role: __envive_ai_react_hooks_application_models.MessageRole.User,
-				type: __envive_ai_react_hooks_application_models.MessageType.QueryTyped,
-				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-				metadata: { content: text }
-			},
-			userTyped: false
-		});
+	}, [onTypedMessageSubmitted, openChat]);
+	const handleTextFieldClick = (0, react.useCallback)(() => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_TEXT_FIELD);
-	}, [handleReply, openChat]);
+	}, [openChat]);
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ChatPreviewLoading.ChatPreviewLoading, { fullIsLoading: true });
 	setChatPreviewLoadingData({
 		widgetConfigId,
@@ -107,7 +110,6 @@ const SocialProofWidgetHandler = (props) => {
 	};
 	const widgetContentProps = {
 		titleLabel: hardCopyContent?.titleLabel,
-		numberOfCustomersText: hardCopyContent?.numberOfCustomersText,
 		customerQueryText: hardCopyContent?.customerQueryText,
 		primaryButtonText: hardCopyContent?.primaryButtonText,
 		secondaryButtonTitleText: hardCopyContent?.secondaryButtonTitleText,
@@ -117,7 +119,11 @@ const SocialProofWidgetHandler = (props) => {
 		logoSrc: logoSrc ?? void 0
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_SocialProof.SocialProof, {
-		baseProps: { id },
+		baseProps: {
+			id,
+			pageVariant,
+			countKey
+		},
 		widgetStyleProps,
 		widgetContentProps,
 		widgetEventProps: {

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.d.ts
 declare const SocialProofWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime10.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 interface SocialProofWidgetProps {
@@ -12,7 +12,7 @@ interface SocialProofWidgetProps {
 declare const SocialProofWidget: {
   ({
     widgetConfigId
-  }: SocialProofWidgetProps): react_jsx_runtime10.JSX.Element;
+  }: SocialProofWidgetProps): react_jsx_runtime11.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_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.d.ts
 declare const SocialProofWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 interface SocialProofWidgetProps {
@@ -12,7 +12,7 @@ interface SocialProofWidgetProps {
 declare const SocialProofWidget: {
   ({
     widgetConfigId
-  }: SocialProofWidgetProps): react_jsx_runtime4.JSX.Element;
+  }: SocialProofWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofWidget/SocialProofWidget.js

@@ -1,31 +1,46 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
-import v4_default from "../../node_modules/uuid/dist/v4.js";
 import { getProductImageUrl } from "../utils/functions.js";
-import { useCallback } from "react";
+import { useCallback, useEffect, useMemo } from "react";
+import { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
 import { SocialProofWidgetKind, WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useAtomValue, useSetAtom } from "jotai";
-import { handleReplyAtom } from "@envive-ai/react-hooks/atoms/chat/replies";
+import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 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 { ChatElementDisplayLocationV3, MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
+import { ChatElementDisplayLocationV3, VariantTypeEnum } from "@envive-ai/react-hooks/application/models";
+import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
 import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoading";
 import { chatPreviewLoadingDataAtom } from "@envive-ai/react-hooks/atoms/widget";
-import { SocialProof } from "@envive-ai/react-toolkit-v3/SocialProof";
+import { PageVariant, SocialProof } from "@envive-ai/react-toolkit-v3/SocialProof";
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.tsx
 const SocialProofWidgetHandler = (props) => {
 	const setChatPreviewLoadingData = useSetAtom(chatPreviewLoadingDataAtom);
-	const handleReply = useSetAtom(handleReplyAtom);
+	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
 	const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
+	const variantInfo = useAtomValue(variantInfoAtom);
 	const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 	const socialProofWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
+	const { pageVariant, countKey } = useMemo(() => {
+		if (variantInfo.variant === VariantTypeEnum.Pdp) return {
+			pageVariant: PageVariant.PDP,
+			countKey: variantInfo.productId
+		};
+		if (variantInfo.variant === VariantTypeEnum.Plp) return {
+			pageVariant: PageVariant.PLP,
+			countKey: variantInfo.plpId
+		};
+		return {
+			pageVariant: PageVariant.PageVisit,
+			countKey: variantInfo.url || variantInfo.pageVisitCategory
+		};
+	}, [variantInfo]);
 	const hardCopyContent = {
 		titleLabel: hardcopyContent?.values?.titleLabel,
-		numberOfCustomersText: hardcopyContent?.values?.numberOfCustomersText,
 		customerQueryText: hardcopyContent?.values?.customerQueryText,
 		primaryButtonText: hardcopyContent?.values?.primaryButtonText,
 		secondaryButtonTitleText: hardcopyContent?.values?.secondaryButtonTitleText,
@@ -39,45 +54,33 @@ const SocialProofWidgetHandler = (props) => {
 		src: dynamicImageUrl,
 		alt: "Product Image"
 	}];
+	const { trackEvent } = useAmplitude();
+	useEffect(() => {
+		trackEvent({
+			eventName: SpiffyMetricsEventName.ChatComponentVisible,
+			eventProps: {
+				widget_config_id: widgetConfigId,
+				widget_type: WidgetTypeV3.SocialProofV3
+			}
+		});
+	}, [trackEvent, widgetConfigId]);
 	const handlePrimaryButtonClick = useCallback((text) => {
-		handleReply({
-			message: {
-				id: v4_default(),
-				role: MessageRole.User,
-				type: MessageType.QueryTyped,
-				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-				metadata: { content: text }
-			},
+		onTypedMessageSubmitted({
+			query: text,
 			userTyped: false
 		});
 		openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
-	}, [handleReply, openChat]);
+	}, [onTypedMessageSubmitted, openChat]);
 	const handleSecondaryButtonClick = useCallback((text) => {
-		handleReply({
-			message: {
-				id: v4_default(),
-				role: MessageRole.User,
-				type: MessageType.QueryTyped,
-				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-				metadata: { content: text }
-			},
+		onTypedMessageSubmitted({
+			query: text,
 			userTyped: false
 		});
 		openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
-	}, [handleReply, openChat]);
-	const handleTextFieldClick = useCallback((text) => {
-		handleReply({
-			message: {
-				id: v4_default(),
-				role: MessageRole.User,
-				type: MessageType.QueryTyped,
-				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-				metadata: { content: text }
-			},
-			userTyped: false
-		});
+	}, [onTypedMessageSubmitted, openChat]);
+	const handleTextFieldClick = useCallback(() => {
 		openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_TEXT_FIELD);
-	}, [handleReply, openChat]);
+	}, [openChat]);
 	if (isLoading) return /* @__PURE__ */ jsx(ChatPreviewLoading, { fullIsLoading: true });
 	setChatPreviewLoadingData({
 		widgetConfigId,
@@ -106,7 +109,6 @@ const SocialProofWidgetHandler = (props) => {
 	};
 	const widgetContentProps = {
 		titleLabel: hardCopyContent?.titleLabel,
-		numberOfCustomersText: hardCopyContent?.numberOfCustomersText,
 		customerQueryText: hardCopyContent?.customerQueryText,
 		primaryButtonText: hardCopyContent?.primaryButtonText,
 		secondaryButtonTitleText: hardCopyContent?.secondaryButtonTitleText,
@@ -116,7 +118,11 @@ const SocialProofWidgetHandler = (props) => {
 		logoSrc: logoSrc ?? void 0
 	};
 	return /* @__PURE__ */ jsx(SocialProof, {
-		baseProps: { id },
+		baseProps: {
+			id,
+			pageVariant,
+			countKey
+		},
 		widgetStyleProps,
 		widgetContentProps,
 		widgetEventProps: {

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.cjs

@@ -1,12 +1,11 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
-const require_v4 = require('../../node_modules/uuid/dist-node/v4.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_replies = require("@envive-ai/react-hooks/atoms/chat/replies");
+let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
@@ -22,9 +21,9 @@ const mockButtonTexts = [
 ];
 const mockTitleLabel = "Loading...";
 const TitledPromptCarouselWidgetHandler = (props) => {
-	const handleReply = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_chat_replies.handleReplyAtom);
+	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
-	const { hardcopyContent, widgetConfig, isLoading } = props;
+	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 	const hardCopyTitleLabel = hardcopyContent?.values?.titleLabel;
 	const titleLabel = isLoading ? mockTitleLabel : hardCopyTitleLabel;
 	const titleAriaLabel = hardcopyContent?.values?.titleAriaLabel;
@@ -36,6 +35,17 @@ const TitledPromptCarouselWidgetHandler = (props) => {
 	const boldFirstButton = titledPromptCarouselWidgetConfig?.boldFirstButton;
 	const promptButtonType = titledPromptCarouselWidgetConfig?.promptButtonType;
 	const promptCarouselRows = titledPromptCarouselWidgetConfig?.promptCarouselRows;
+	const animationSpeed = isLoading ? __envive_ai_react_toolkit_v3_PromptCarousel.AnimationSpeed.FAST : titledPromptCarouselWidgetConfig?.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.TitledPromptCarouselV3
+			}
+		});
+	}, [trackEvent, widgetConfigId]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_TitledPromptCarousel.TitledPromptCarousel, {
 		id,
 		titleLabel,
@@ -44,20 +54,14 @@ const TitledPromptCarouselWidgetHandler = (props) => {
 		boldFirstButton,
 		promptButtonType,
 		promptCarouselRows,
-		animationSpeed: isLoading ? __envive_ai_react_toolkit_v3_PromptCarousel.AnimationSpeed.FAST : titledPromptCarouselWidgetConfig?.animationSpeed,
+		animationSpeed,
 		handleButtonClick: (0, react.useCallback)((text) => {
-			handleReply({
-				message: {
-					id: require_v4.default(),
-					role: __envive_ai_react_hooks_application_models.MessageRole.User,
-					type: __envive_ai_react_hooks_application_models.MessageType.QueryTyped,
-					createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-					metadata: { content: text }
-				},
+			onTypedMessageSubmitted({
+				query: text,
 				userTyped: false
 			});
 			openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
-		}, [handleReply, openChat]),
+		}, [onTypedMessageSubmitted, openChat]),
 		promptButtonTexts: buttonTexts,
 		promptCarouselAriaLabel
 	});

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.cts

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

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts

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

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.js

@@ -1,13 +1,12 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
-import v4_default from "../../node_modules/uuid/dist/v4.js";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
+import { 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 { useSetAtom } from "jotai";
-import { handleReplyAtom } from "@envive-ai/react-hooks/atoms/chat/replies";
+import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
-import { ChatElementDisplayLocationV3, MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
+import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
 import { AnimationSpeed } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { TitledPromptCarousel } from "@envive-ai/react-toolkit-v3/TitledPromptCarousel";
 
@@ -21,9 +20,9 @@ const mockButtonTexts = [
 ];
 const mockTitleLabel = "Loading...";
 const TitledPromptCarouselWidgetHandler = (props) => {
-	const handleReply = useSetAtom(handleReplyAtom);
+	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
-	const { hardcopyContent, widgetConfig, isLoading } = props;
+	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 	const hardCopyTitleLabel = hardcopyContent?.values?.titleLabel;
 	const titleLabel = isLoading ? mockTitleLabel : hardCopyTitleLabel;
 	const titleAriaLabel = hardcopyContent?.values?.titleAriaLabel;
@@ -35,6 +34,17 @@ const TitledPromptCarouselWidgetHandler = (props) => {
 	const boldFirstButton = titledPromptCarouselWidgetConfig?.boldFirstButton;
 	const promptButtonType = titledPromptCarouselWidgetConfig?.promptButtonType;
 	const promptCarouselRows = titledPromptCarouselWidgetConfig?.promptCarouselRows;
+	const animationSpeed = isLoading ? AnimationSpeed.FAST : titledPromptCarouselWidgetConfig?.animationSpeed;
+	const { trackEvent } = useAmplitude();
+	useEffect(() => {
+		trackEvent({
+			eventName: SpiffyMetricsEventName.ChatComponentVisible,
+			eventProps: {
+				widget_config_id: widgetConfigId,
+				widget_type: WidgetTypeV3.TitledPromptCarouselV3
+			}
+		});
+	}, [trackEvent, widgetConfigId]);
 	return /* @__PURE__ */ jsx(TitledPromptCarousel, {
 		id,
 		titleLabel,
@@ -43,20 +53,14 @@ const TitledPromptCarouselWidgetHandler = (props) => {
 		boldFirstButton,
 		promptButtonType,
 		promptCarouselRows,
-		animationSpeed: isLoading ? AnimationSpeed.FAST : titledPromptCarouselWidgetConfig?.animationSpeed,
+		animationSpeed,
 		handleButtonClick: useCallback((text) => {
-			handleReply({
-				message: {
-					id: v4_default(),
-					role: MessageRole.User,
-					type: MessageType.QueryTyped,
-					createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-					metadata: { content: text }
-				},
+			onTypedMessageSubmitted({
+				query: text,
 				userTyped: false
 			});
 			openChat(ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
-		}, [handleReply, openChat]),
+		}, [onTypedMessageSubmitted, openChat]),
 		promptButtonTexts: buttonTexts,
 		promptCarouselAriaLabel
 	});

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.cjs

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

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.cts

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

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts

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

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

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

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.cjs

@@ -1,12 +1,12 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
-const require_v4 = require('../../node_modules/uuid/dist-node/v4.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_replies = require("@envive-ai/react-hooks/atoms/chat/replies");
+let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 let __envive_ai_react_hooks_atoms_chat_chatState = require("@envive-ai/react-hooks/atoms/chat/chatState");
@@ -26,9 +26,9 @@ const mockHeadlineText = "Loading";
 const mockAnimatedTextSequence = ["..."];
 const mockHintText = "Ask me anything";
 const TypingAnimationWidgetHandler = (props) => {
-	const handleReply = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_chat_replies.handleReplyAtom);
+	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const onToggle = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_chat_chatState.chatOnToggleAtom);
-	const { hardcopyContent, widgetConfig, isLoading } = props;
+	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 	const titleLabel = hardcopyContent?.values?.titleLabel || "";
 	const headlineText = hardcopyContent?.values?.headlineText || "";
 	const animatedTextSequence = hardcopyContent?.values?.animatedTextSequence || [];
@@ -43,19 +43,23 @@ const TypingAnimationWidgetHandler = (props) => {
 	const promptButtonType = typingAnimationWidgetConfig?.promptButtonType || __envive_ai_react_toolkit_v3_PromptButton_types.PromptButtonVariant.LIGHT;
 	const promptCarouselRows = typingAnimationWidgetConfig?.promptCarouselRows || __envive_ai_react_toolkit_v3_PromptCarousel.PromptCarouselRows.ALWAYS_ONE;
 	const showTextField = typingAnimationWidgetConfig?.showTextField !== false;
+	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.TypingAnimationV3
+			}
+		});
+	}, [trackEvent, widgetConfigId]);
 	const handleButtonClick = (0, react.useCallback)((text) => {
-		handleReply({
-			message: {
-				id: require_v4.default(),
-				role: __envive_ai_react_hooks_application_models.MessageRole.User,
-				type: __envive_ai_react_hooks_application_models.MessageType.QueryTyped,
-				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-				metadata: { content: text }
-			},
+		onTypedMessageSubmitted({
+			query: text,
 			userTyped: false
 		});
 		onToggle(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
-	}, [handleReply, onToggle]);
+	}, [onTypedMessageSubmitted, onToggle]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		onToggle(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
 	}, [onToggle]);

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.cts

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