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

package/dist/CXIntegration/hooks/useUnifiedCXButton.cjs

@@ -16,6 +16,8 @@ const useUnifiedCXButton = ({ enabled = false, provider = require_types.Customer
 	if (suppressMerchantButton) {
 		if (!(hasParsedVariantInfo && supportedEvent?.supported)) return void 0;
 	}
+	if (!selectedCustomerService.isSwitchEnabled() && !window?._spiffy?.selectedCustomizeOption) return;
+	if (window?._spiffy?.selectedCustomizeOption && provider === require_types.CustomerServiceType.unsupported) return;
 	return selectedCustomerService;
 };
 

package/dist/CXIntegration/hooks/useUnifiedCXButton.js

@@ -15,6 +15,8 @@ const useUnifiedCXButton = ({ enabled = false, provider = CustomerServiceType.un
 	if (suppressMerchantButton) {
 		if (!(hasParsedVariantInfo && supportedEvent?.supported)) return void 0;
 	}
+	if (!selectedCustomerService.isSwitchEnabled() && !window?._spiffy?.selectedCustomizeOption) return;
+	if (window?._spiffy?.selectedCustomizeOption && provider === CustomerServiceType.unsupported) return;
 	return selectedCustomerService;
 };
 

package/dist/hocs/withBaseWidget/withBaseWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime11.JSX.Element;
+  (props: P): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/hocs/withBaseWidget/withBaseWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime6.JSX.Element;
+  (props: P): react_jsx_runtime15.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs

@@ -1,13 +1,12 @@
 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');
 const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.cjs');
 let react = require("react");
 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");
@@ -17,7 +16,7 @@ let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/ap
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx
 const ChatPreviewComparisonWidgetHandler = (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 lastAssistantMessage = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom);
 	const variantInfo = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_app.variantInfoAtom);
@@ -45,31 +44,15 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	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.CHAT_PREVIEW_COMPARISON_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.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
-	}, [handleReply, openChat]);
+	}, [openChat]);
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
 		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.cts

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

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts

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

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js

@@ -1,22 +1,21 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
-import v4_default from "../../node_modules/uuid/dist/v4.js";
 import { getMessageText, getRecentProductImageUrls } from "../utils/functions.js";
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
 import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
-import { useAtomValue, useSetAtom } from "jotai";
-import { handleReplyAtom } from "@envive-ai/react-hooks/atoms/chat/replies";
+import { useAtomValue } from "jotai";
+import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
 import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
-import { ChatElementDisplayLocationV3, MessageRole, MessageType, VariantTypeEnum } from "@envive-ai/react-hooks/application/models";
+import { ChatElementDisplayLocationV3, VariantTypeEnum } from "@envive-ai/react-hooks/application/models";
 import { ChatPreviewComparison } from "@envive-ai/react-toolkit-v3/ChatPreviewComparison";
 import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx
 const ChatPreviewComparisonWidgetHandler = (props) => {
-	const handleReply = useSetAtom(handleReplyAtom);
+	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
 	const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
 	const variantInfo = useAtomValue(variantInfoAtom);
@@ -44,31 +43,15 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	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.CHAT_PREVIEW_COMPARISON_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.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
-	}, [handleReply, openChat]);
+	}, [openChat]);
 	if (isLoading) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
 		widgetType: WidgetTypeV3.ChatPreviewLoadingV3

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime15.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime15.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime14.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime5.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime14.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.cjs

@@ -1,13 +1,13 @@
 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');
 const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.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");
@@ -16,7 +16,7 @@ let __envive_ai_react_toolkit_v3_ChatPreview = require("@envive-ai/react-toolkit
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx
 const ChatPreviewWidgetHandler = (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 lastAssistantMessage = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom);
 	const { suggestions } = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.chatAtom);
@@ -33,34 +33,28 @@ const ChatPreviewWidgetHandler = (props) => {
 		messageText,
 		promptButtonTexts
 	};
+	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.ChatPreviewV3
+			}
+		});
+	}, [trackEvent, widgetConfigId]);
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	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.CHAT_PREVIEW_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.CHAT_PREVIEW_TEXT_FIELD);
-	}, [handleReply, openChat]);
+	}, [openChat]);
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
 		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts

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

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.js

@@ -1,21 +1,21 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
-import v4_default from "../../node_modules/uuid/dist/v4.js";
 import { getMessageText } from "../utils/functions.js";
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
-import { useCallback, useMemo } 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 { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
-import { useAtomValue, useSetAtom } from "jotai";
-import { handleReplyAtom } from "@envive-ai/react-hooks/atoms/chat/replies";
+import { useAtomValue } from "jotai";
+import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
 import { chatAtom, 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 } from "@envive-ai/react-hooks/application/models";
 import { ChatPreview } from "@envive-ai/react-toolkit-v3/ChatPreview";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx
 const ChatPreviewWidgetHandler = (props) => {
-	const handleReply = useSetAtom(handleReplyAtom);
+	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
 	const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
 	const { suggestions } = useAtomValue(chatAtom);
@@ -32,34 +32,28 @@ const ChatPreviewWidgetHandler = (props) => {
 		messageText,
 		promptButtonTexts
 	};
+	const { trackEvent } = useAmplitude();
+	useEffect(() => {
+		trackEvent({
+			eventName: SpiffyMetricsEventName.ChatComponentVisible,
+			eventProps: {
+				widget_config_id: widgetConfigId,
+				widget_type: WidgetTypeV3.ChatPreviewV3
+			}
+		});
+	}, [trackEvent, widgetConfigId]);
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	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.CHAT_PREVIEW_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.CHAT_PREVIEW_TEXT_FIELD);
-	}, [handleReply, openChat]);
+	}, [openChat]);
 	if (isLoading) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
 		widgetType: WidgetTypeV3.ChatPreviewLoadingV3

package/dist/widgets/FloatingChatWidget/FloatingChatOverlay.cjs

@@ -6,8 +6,8 @@ let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 
 //#region src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx
-const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId }) => {
-	const overlayClasses = (0, classnames.default)("envive-floating-chat-overlay", "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
+const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false }) => {
+	const overlayClasses = (0, classnames.default)("envive-floating-chat-overlay", previewMode ? "envive-tw-absolute" : "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", previewMode ? "envive-tw-h-full" : "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
 	const backdropClasses = (0, classnames.default)("envive-floating-chat-backdrop", "envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-bg-black", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
 	const overlayContentClasses = (0, classnames.default)("envive-floating-chat-overlay-content", "envive-tw-relative", "envive-tw-flex", "envive-tw-justify-end", "envive-tw-items-stretch", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-pointer-events-auto", "envive-tw-cursor-pointer", "envive-tw-z-10");
 	const chatWrapper = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: isOpened && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
@@ -17,7 +17,7 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 		exit: { opacity: 0 },
 		transition: { duration: .3 },
 		"data-testid": dataTestId,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		children: [!previewMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 			className: backdropClasses,
 			initial: { opacity: 0 },
 			animate: { opacity: .5 },
@@ -36,7 +36,7 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 				initial: {
 					opacity: 0,
-					x: 512
+					x: previewMode ? 0 : 512
 				},
 				animate: {
 					opacity: 1,
@@ -44,11 +44,11 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 				},
 				exit: {
 					opacity: 0,
-					x: 512
+					x: previewMode ? 0 : 512
 				},
 				transition: { duration: .3 },
 				style: {
-					height: "100dvh",
+					height: previewMode ? "100%" : "100dvh",
 					cursor: "default"
 				},
 				className: "envive-tw-shadow-md",
@@ -57,6 +57,7 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			})
 		})]
 	}, "floating-chat-overlay") });
+	if (previewMode) return chatWrapper;
 	if (typeof document !== "undefined") return (0, react_dom.createPortal)(chatWrapper, document.body);
 	return chatWrapper;
 };

package/dist/widgets/FloatingChatWidget/FloatingChatOverlay.js

@@ -4,8 +4,8 @@ import { AnimatePresence, motion } from "framer-motion";
 import classNames from "classnames";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx
-const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId }) => {
-	const overlayClasses = classNames("envive-floating-chat-overlay", "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
+const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false }) => {
+	const overlayClasses = classNames("envive-floating-chat-overlay", previewMode ? "envive-tw-absolute" : "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", previewMode ? "envive-tw-h-full" : "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
 	const backdropClasses = classNames("envive-floating-chat-backdrop", "envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-bg-black", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
 	const overlayContentClasses = classNames("envive-floating-chat-overlay-content", "envive-tw-relative", "envive-tw-flex", "envive-tw-justify-end", "envive-tw-items-stretch", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-pointer-events-auto", "envive-tw-cursor-pointer", "envive-tw-z-10");
 	const chatWrapper = /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsxs(motion.div, {
@@ -15,7 +15,7 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 		exit: { opacity: 0 },
 		transition: { duration: .3 },
 		"data-testid": dataTestId,
-		children: [/* @__PURE__ */ jsx(motion.div, {
+		children: [!previewMode && /* @__PURE__ */ jsx(motion.div, {
 			className: backdropClasses,
 			initial: { opacity: 0 },
 			animate: { opacity: .5 },
@@ -34,7 +34,7 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			children: /* @__PURE__ */ jsx(motion.div, {
 				initial: {
 					opacity: 0,
-					x: 512
+					x: previewMode ? 0 : 512
 				},
 				animate: {
 					opacity: 1,
@@ -42,11 +42,11 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 				},
 				exit: {
 					opacity: 0,
-					x: 512
+					x: previewMode ? 0 : 512
 				},
 				transition: { duration: .3 },
 				style: {
-					height: "100dvh",
+					height: previewMode ? "100%" : "100dvh",
 					cursor: "default"
 				},
 				className: "envive-tw-shadow-md",
@@ -55,6 +55,7 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			})
 		})]
 	}, "floating-chat-overlay") });
+	if (previewMode) return chatWrapper;
 	if (typeof document !== "undefined") return createPortal(chatWrapper, document.body);
 	return chatWrapper;
 };

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";