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

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.cjs

@@ -6,18 +6,21 @@ const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
 const require_types = require('../../CXIntegration/types.cjs');
 const require_constants = require('./constants.cjs');
 const require_useUnifiedCXButton = require('../../CXIntegration/hooks/useUnifiedCXButton.cjs');
+const require_useFloatingButtonVisibility = require('./hooks/useFloatingButtonVisibility.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_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_FloatingChat = require("@envive-ai/react-toolkit-v3/FloatingChat");
-let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_toolkit_v3_FloatingButton = require("@envive-ai/react-toolkit-v3/FloatingButton");
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
 const FloatingChatWidgetHandler = (props) => {
+	const { previewButtonOnly, previewChatAlwaysOpen } = props;
 	const salesAgentData = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { userHasInteractedValue } = require_useGetWidgetStatus.default();
 	const { uiConfig, isUiConfigLoading } = props;
@@ -26,42 +29,68 @@ const FloatingChatWidgetHandler = (props) => {
 		enabled: false,
 		suppressMerchantButton: false
 	}) ?? {};
+	const { floatingButton } = uiConfig ?? {};
 	const { isOpen, openChat, closeChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
+	const { shouldShowFloatingButton } = require_useFloatingButtonVisibility.useFloatingButtonVisibility({
+		floatingButtonShowConfig: floatingButton?.showOption,
+		isChatOpen: isOpen,
+		userHasInteracted: userHasInteractedValue
+	});
+	const effectiveIsOpen = previewChatAlwaysOpen ? true : isOpen;
+	const buttonShouldRender = previewButtonOnly ? true : !isOpen && shouldShowFloatingButton;
 	const theme = (0, react.useMemo)(() => {
 		if (isUiConfigLoading || !uiConfig) return __envive_ai_react_toolkit_v3_Tokens.Theme.STANDARD;
 		return uiConfig?.lookAndFeel?.theme ?? __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM;
 	}, [isUiConfigLoading, uiConfig]);
-	const { floatingButton } = uiConfig ?? {};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingChatOverlay.FloatingChatOverlay, {
-		isOpened: isOpen,
-		onClose: () => closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY),
+	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
+	const hasTrackedEvent = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (buttonShouldRender && !hasTrackedEvent.current) {
+			trackEvent({
+				eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
+				eventProps: {
+					widget_config_id: "floating-button",
+					widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingButtonV3
+				}
+			});
+			hasTrackedEvent.current = true;
+		}
+	}, [trackEvent, buttonShouldRender]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingChatOverlay.FloatingChatOverlay, {
+		isOpened: effectiveIsOpen,
+		onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY),
+		previewMode: !!previewChatAlwaysOpen,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingChat.FloatingChat, {
 			theme,
 			salesAgentData,
 			floatingChatConfig: uiConfig?.floatingChat ?? {},
 			lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
 			isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
+			isFloatingChatOpen: effectiveIsOpen,
 			onToggleCXButton: toggle,
-			onClose: () => closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+			onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
 		})
-	}), !isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
+	}), buttonShouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
 		id: require_constants.FLOATING_BUTTON_ID,
 		variant: floatingButton?.style,
 		mode: floatingButton?.mode,
 		backgroundColor: floatingButton?.backgroundColor,
-		onClick: () => openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_BUTTON),
+		onClick: previewButtonOnly ? () => {} : () => openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_BUTTON),
 		customIcon: floatingButton?.iconSVGSrc,
 		show: floatingButton?.showOption,
 		location: floatingButton?.position,
 		hasInteractionHappened: userHasInteractedValue,
-		ariaLabel: "Open chat"
+		ariaLabel: "Open chat",
+		previewMode: !!previewButtonOnly
 	})] });
 };
 const FloatingChatWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(FloatingChatWidgetHandler);
-const FloatingChatWidget = () => {
+const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen } = {}) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingChatWidgetWithBaseWidget, {
 		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingChatV3,
-		widgetConfigId: "fake-widget-config-id"
+		widgetConfigId: "fake-widget-config-id",
+		previewButtonOnly,
+		previewChatAlwaysOpen
 	});
 };
 FloatingChatWidget.displayName = "FloatingChatWidget";

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

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

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

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

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.js

@@ -5,18 +5,21 @@ 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 { useMemo } from "react";
+import { useFloatingButtonVisibility } from "./hooks/useFloatingButtonVisibility.js";
+import { useEffect, useMemo, useRef } from "react";
+import { 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 { 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 { FloatingChat } from "@envive-ai/react-toolkit-v3/FloatingChat";
-import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { FloatingButton } from "@envive-ai/react-toolkit-v3/FloatingButton";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
 const FloatingChatWidgetHandler = (props) => {
+	const { previewButtonOnly, previewChatAlwaysOpen } = props;
 	const salesAgentData = useSalesAgent();
 	const { userHasInteractedValue } = useGetWidgetStatus_default();
 	const { uiConfig, isUiConfigLoading } = props;
@@ -25,42 +28,68 @@ const FloatingChatWidgetHandler = (props) => {
 		enabled: false,
 		suppressMerchantButton: false
 	}) ?? {};
+	const { floatingButton } = uiConfig ?? {};
 	const { isOpen, openChat, closeChat } = useChatToggle();
+	const { shouldShowFloatingButton } = useFloatingButtonVisibility({
+		floatingButtonShowConfig: floatingButton?.showOption,
+		isChatOpen: isOpen,
+		userHasInteracted: userHasInteractedValue
+	});
+	const effectiveIsOpen = previewChatAlwaysOpen ? true : isOpen;
+	const buttonShouldRender = previewButtonOnly ? true : !isOpen && shouldShowFloatingButton;
 	const theme = useMemo(() => {
 		if (isUiConfigLoading || !uiConfig) return Theme.STANDARD;
 		return uiConfig?.lookAndFeel?.theme ?? Theme.GLOBAL_CUSTOM;
 	}, [isUiConfigLoading, uiConfig]);
-	const { floatingButton } = uiConfig ?? {};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FloatingChatOverlay, {
-		isOpened: isOpen,
-		onClose: () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY),
+	const { trackEvent } = useAmplitude();
+	const hasTrackedEvent = useRef(false);
+	useEffect(() => {
+		if (buttonShouldRender && !hasTrackedEvent.current) {
+			trackEvent({
+				eventName: SpiffyMetricsEventName.ChatComponentVisible,
+				eventProps: {
+					widget_config_id: "floating-button",
+					widget_type: WidgetTypeV3.FloatingButtonV3
+				}
+			});
+			hasTrackedEvent.current = true;
+		}
+	}, [trackEvent, buttonShouldRender]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && /* @__PURE__ */ jsx(FloatingChatOverlay, {
+		isOpened: effectiveIsOpen,
+		onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY),
+		previewMode: !!previewChatAlwaysOpen,
 		children: /* @__PURE__ */ jsx(FloatingChat, {
 			theme,
 			salesAgentData,
 			floatingChatConfig: uiConfig?.floatingChat ?? {},
 			lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
 			isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
+			isFloatingChatOpen: effectiveIsOpen,
 			onToggleCXButton: toggle,
-			onClose: () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+			onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
 		})
-	}), !isOpen && /* @__PURE__ */ jsx(FloatingButton, {
+	}), buttonShouldRender && /* @__PURE__ */ jsx(FloatingButton, {
 		id: FLOATING_BUTTON_ID,
 		variant: floatingButton?.style,
 		mode: floatingButton?.mode,
 		backgroundColor: floatingButton?.backgroundColor,
-		onClick: () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON),
+		onClick: previewButtonOnly ? () => {} : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON),
 		customIcon: floatingButton?.iconSVGSrc,
 		show: floatingButton?.showOption,
 		location: floatingButton?.position,
 		hasInteractionHappened: userHasInteractedValue,
-		ariaLabel: "Open chat"
+		ariaLabel: "Open chat",
+		previewMode: !!previewButtonOnly
 	})] });
 };
 const FloatingChatWidgetWithBaseWidget = withBaseWidget(FloatingChatWidgetHandler);
-const FloatingChatWidget = () => {
+const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen } = {}) => {
 	return /* @__PURE__ */ jsx(FloatingChatWidgetWithBaseWidget, {
 		widgetType: WidgetTypeV3.FloatingChatV3,
-		widgetConfigId: "fake-widget-config-id"
+		widgetConfigId: "fake-widget-config-id",
+		previewButtonOnly,
+		previewChatAlwaysOpen
 	});
 };
 FloatingChatWidget.displayName = "FloatingChatWidget";

package/dist/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.cjs

@@ -0,0 +1,19 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let jotai = require("jotai");
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_toolkit_v3_FloatingButton = require("@envive-ai/react-toolkit-v3/FloatingButton");
+let __envive_ai_react_hooks_atoms_org = require("@envive-ai/react-hooks/atoms/org");
+
+//#region src/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.ts
+const useFloatingButtonVisibility = ({ floatingButtonShowConfig = __envive_ai_react_toolkit_v3_FloatingButton.FloatingButtonShow.ALWAYS, isChatOpen, userHasInteracted }) => {
+	const featureFlagService = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_org.featureFlagServiceAtom);
+	const isSalesAgentEnabled = (0, react.useMemo)(() => featureFlagService?.featureFlagService?.isFeatureGateEnabled(__envive_ai_react_hooks_application_models.FeatureGates.IsSalesAgentEnabled), [featureFlagService]);
+	return {
+		shouldShowFloatingButton: (isSalesAgentEnabled || isSalesAgentEnabled === void 0) && !isChatOpen && (floatingButtonShowConfig === __envive_ai_react_toolkit_v3_FloatingButton.FloatingButtonShow.ALWAYS || floatingButtonShowConfig === __envive_ai_react_toolkit_v3_FloatingButton.FloatingButtonShow.POST_INTERACTION && userHasInteracted),
+		isSalesAgentEnabled
+	};
+};
+
+//#endregion
+exports.useFloatingButtonVisibility = useFloatingButtonVisibility;

package/dist/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.js

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import { useAtomValue } from "jotai";
+import { FeatureGates } from "@envive-ai/react-hooks/application/models";
+import { FloatingButtonShow } from "@envive-ai/react-toolkit-v3/FloatingButton";
+import { featureFlagServiceAtom } from "@envive-ai/react-hooks/atoms/org";
+
+//#region src/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.ts
+const useFloatingButtonVisibility = ({ floatingButtonShowConfig = FloatingButtonShow.ALWAYS, isChatOpen, userHasInteracted }) => {
+	const featureFlagService = useAtomValue(featureFlagServiceAtom);
+	const isSalesAgentEnabled = useMemo(() => featureFlagService?.featureFlagService?.isFeatureGateEnabled(FeatureGates.IsSalesAgentEnabled), [featureFlagService]);
+	return {
+		shouldShowFloatingButton: (isSalesAgentEnabled || isSalesAgentEnabled === void 0) && !isChatOpen && (floatingButtonShowConfig === FloatingButtonShow.ALWAYS || floatingButtonShowConfig === FloatingButtonShow.POST_INTERACTION && userHasInteracted),
+		isSalesAgentEnabled
+	};
+};
+
+//#endregion
+export { useFloatingButtonVisibility };

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.cjs

@@ -1,11 +1,10 @@
 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');
 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_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
@@ -13,9 +12,9 @@ let __envive_ai_react_toolkit_v3_PromptButtonCarouselWithImage = require("@enviv
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx
 const PromptButtonCarouselWithImageWidgetHandler = (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 promptButtonCarouselWithImageWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
 	const hardCopyContent = {
@@ -23,32 +22,26 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		promptButtonsTexts: hardcopyContent?.values?.promptButtonsTexts,
 		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) => {
-		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.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_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.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
-	}, [handleReply, openChat]);
+	}, [openChat]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_PromptButtonCarouselWithImage.PromptButtonCarouselWithImage, {
 		id,
 		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM,

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime7.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_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime11.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime11.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.js

@@ -1,20 +1,19 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.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 { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
-import { ChatElementDisplayLocationV3, MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
+import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
 import { PromptButtonCarouselWithImage } from "@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx
 const PromptButtonCarouselWithImageWidgetHandler = (props) => {
-	const handleReply = useSetAtom(handleReplyAtom);
+	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
-	const { hardcopyContent, widgetConfig, isLoading } = props;
+	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 	const promptButtonCarouselWithImageWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
 	const hardCopyContent = {
@@ -22,32 +21,26 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		promptButtonsTexts: hardcopyContent?.values?.promptButtonsTexts,
 		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) => {
-		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.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_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.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
-	}, [handleReply, openChat]);
+	}, [openChat]);
 	return /* @__PURE__ */ jsx(PromptButtonCarouselWithImage, {
 		id,
 		theme: Theme.GLOBAL_CUSTOM,

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.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_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
@@ -22,9 +21,9 @@ const mockButtonTexts = [
 	"Loading button 5"
 ];
 const PromptCarouselWidgetHandler = (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 promptButtonTexts = hardcopyContent?.values?.promptButtonTexts || [];
 	const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
 	const promptCarouselWidgetConfig = widgetConfig;
@@ -33,19 +32,23 @@ const PromptCarouselWidgetHandler = (props) => {
 	const promptButtonType = promptCarouselWidgetConfig?.promptButtonType;
 	const promptCarouselRows = promptCarouselWidgetConfig?.promptCarouselRows;
 	const animationSpeed = isLoading ? __envive_ai_react_toolkit_v3_PromptCarousel_types_types.AnimationSpeed.FAST : 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) => {
-		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.PROMPT_CAROUSEL);
-	}, [handleReply, openChat]);
+	}, [onTypedMessageSubmitted, openChat]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_PromptCarousel.PromptCarousel, {
 		id,
 		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM,

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

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

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

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

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.js

@@ -1,14 +1,13 @@
 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 { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
-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/types/types";
 import { PromptCarousel } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 
@@ -21,9 +20,9 @@ const mockButtonTexts = [
 	"Loading button 5"
 ];
 const PromptCarouselWidgetHandler = (props) => {
-	const handleReply = useSetAtom(handleReplyAtom);
+	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
-	const { hardcopyContent, widgetConfig, isLoading } = props;
+	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 	const promptButtonTexts = hardcopyContent?.values?.promptButtonTexts || [];
 	const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
 	const promptCarouselWidgetConfig = widgetConfig;
@@ -32,19 +31,23 @@ const PromptCarouselWidgetHandler = (props) => {
 	const promptButtonType = promptCarouselWidgetConfig?.promptButtonType;
 	const promptCarouselRows = promptCarouselWidgetConfig?.promptCarouselRows;
 	const animationSpeed = isLoading ? AnimationSpeed.FAST : 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) => {
-		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.PROMPT_CAROUSEL);
-	}, [handleReply, openChat]);
+	}, [onTypedMessageSubmitted, openChat]);
 	return /* @__PURE__ */ jsx(PromptCarousel, {
 		id,
 		theme: Theme.GLOBAL_CUSTOM,

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_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_SocialProofWidget = require('../SocialProofWidget/SocialProofWidget.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");