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

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs

@@ -3,21 +3,27 @@ const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget
 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 = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
+let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
+let jotai = require("jotai");
 let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
-let __envive_ai_react_toolkit_v3_ChatPreviewComparison = require("@envive-ai/react-toolkit-v3/ChatPreviewComparison");
+let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
+let __envive_ai_react_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
+let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
+let __envive_ai_react_toolkit_v3_ChatPreviewComparison = require("@envive-ai/react-toolkit-v3/ChatPreviewComparison");
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx
 const ChatPreviewComparisonWidgetHandler = (props) => {
 	const { onSuggestionClicked } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
+	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
+	const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = (0, __envive_ai_react_toolkit_v3_PromptCarousel.usePromptCarouselAnalytics)(__envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.POST_INTERACTION_COMPARISON, (text) => text);
 	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 productId = variantInfo.variant === __envive_ai_react_hooks_application_models.VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
@@ -42,10 +48,28 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 	const handlePromptButtonClick = (0, react.useCallback)((suggestion) => {
 		onSuggestionClicked(suggestion, __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
+		onPromptClicked(suggestion.id);
 	}, [onSuggestionClicked, openChat]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [openChat]);
+	const handleLinkClick = (url) => {
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.LINK_CLICKED,
+				widget_interaction_data: { link_clicked: { url } }
+			}
+		});
+	};
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
 		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3
@@ -73,6 +97,13 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 		widgetContentProps,
 		widgetEventProps: {
 			handlePromptButtonClick,
+			handlePromptButtonDrag: onDrag,
+			handlePromptButtonHover: onHover,
+			handlePromptButtonMouseDown: onMouseDown,
+			handlePromptButtonMouseUp: onMouseUp,
+			handlePromptButtonTouchStart: onTouchStart,
+			handlePromptButtonTouchEnd: onTouchEnd,
+			handleLinkClick,
 			handleTextFieldClick
 		}
 	});

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_runtime1 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_runtime1.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_runtime1.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_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime11.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime11.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js

@@ -2,21 +2,27 @@ import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import { getMessageText, getRecentProductImageUrls } from "../utils/functions.js";
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
 import { useCallback, useMemo } from "react";
+import { EnviveMetricsEventName } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
-import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
-import { useAtomValue } from "jotai";
+import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
+import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
-import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
+import { useAtomValue } from "jotai";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { ChatElementDisplayLocationV3, VariantTypeEnum } from "@envive-ai/react-hooks/application/models";
-import { ChatPreviewComparison } from "@envive-ai/react-toolkit-v3/ChatPreviewComparison";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
+import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
+import { usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
+import { ChatPreviewComparison } from "@envive-ai/react-toolkit-v3/ChatPreviewComparison";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx
 const ChatPreviewComparisonWidgetHandler = (props) => {
 	const { onSuggestionClicked } = useSalesAgent();
 	const { openChat } = useChatToggle();
+	const { trackWidgetInteraction } = useWidgetInteraction();
+	const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.POST_INTERACTION_COMPARISON, (text) => text);
 	const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
 	const variantInfo = useAtomValue(variantInfoAtom);
 	const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
@@ -41,10 +47,28 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 	const handlePromptButtonClick = useCallback((suggestion) => {
 		onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
+		onPromptClicked(suggestion.id);
 	}, [onSuggestionClicked, openChat]);
 	const handleTextFieldClick = useCallback(() => {
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+				widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [openChat]);
+	const handleLinkClick = (url) => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+				widget_interaction: WidgetInteractionType.LINK_CLICKED,
+				widget_interaction_data: { link_clicked: { url } }
+			}
+		});
+	};
 	if (isLoading) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
 		widgetType: WidgetTypeV3.ChatPreviewLoadingV3
@@ -72,6 +96,13 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 		widgetContentProps,
 		widgetEventProps: {
 			handlePromptButtonClick,
+			handlePromptButtonDrag: onDrag,
+			handlePromptButtonHover: onHover,
+			handlePromptButtonMouseDown: onMouseDown,
+			handlePromptButtonMouseUp: onMouseUp,
+			handlePromptButtonTouchStart: onTouchStart,
+			handlePromptButtonTouchEnd: onTouchEnd,
+			handleLinkClick,
 			handleTextFieldClick
 		}
 	});

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

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

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.cjs

@@ -5,14 +5,17 @@ const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/Ch
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
-let jotai = require("jotai");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
+let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
+let jotai = require("jotai");
 let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
+let __envive_ai_react_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
 let __envive_ai_react_toolkit_v3_ChatPreview = require("@envive-ai/react-toolkit-v3/ChatPreview");
+let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx
 const ChatPreviewWidgetHandler = (props) => {
@@ -31,24 +34,35 @@ const ChatPreviewWidgetHandler = (props) => {
 		messageText
 	};
 	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 { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
+	const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = (0, __envive_ai_react_toolkit_v3_PromptCarousel.usePromptCarouselAnalytics)(__envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.CHAT_PREVIEW, (text) => text);
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	const handlePromptButtonClick = (0, react.useCallback)((suggestion) => {
 		onSuggestionClicked(suggestion, __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
+		onPromptClicked(suggestion.id);
 	}, [onSuggestionClicked, openChat]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.CHAT_PREVIEW,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [openChat]);
+	const handleLinkClick = (url) => {
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.CHAT_PREVIEW,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.LINK_CLICKED,
+				widget_interaction_data: { link_clicked: { url } }
+			}
+		});
+	};
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
 		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3
@@ -73,6 +87,13 @@ const ChatPreviewWidgetHandler = (props) => {
 		widgetContentProps,
 		widgetEventProps: {
 			handlePromptButtonClick,
+			handlePromptButtonDrag: onDrag,
+			handlePromptButtonHover: onHover,
+			handlePromptButtonMouseDown: onMouseDown,
+			handlePromptButtonMouseUp: onMouseUp,
+			handlePromptButtonTouchStart: onTouchStart,
+			handlePromptButtonTouchEnd: onTouchEnd,
+			handleLinkClick,
 			handleTextFieldClick
 		}
 	});

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.d.cts

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

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

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

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.js

@@ -1,17 +1,20 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import { getMessageText } from "../utils/functions.js";
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
-import { useCallback, useEffect, useMemo } from "react";
-import { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useCallback, useMemo } from "react";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
-import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
-import { useAtomValue } from "jotai";
+import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
+import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
-import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
+import { useAtomValue } from "jotai";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
+import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { ChatPreview } from "@envive-ai/react-toolkit-v3/ChatPreview";
+import { usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx
 const ChatPreviewWidgetHandler = (props) => {
@@ -30,24 +33,35 @@ const ChatPreviewWidgetHandler = (props) => {
 		messageText
 	};
 	const { trackEvent } = useAmplitude();
-	useEffect(() => {
-		trackEvent({
-			eventName: SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: WidgetTypeV3.ChatPreviewV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
+	const { trackWidgetInteraction } = useWidgetInteraction();
+	const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.CHAT_PREVIEW, (text) => text);
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	const handlePromptButtonClick = useCallback((suggestion) => {
 		onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
+		onPromptClicked(suggestion.id);
 	}, [onSuggestionClicked, openChat]);
 	const handleTextFieldClick = useCallback(() => {
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.CHAT_PREVIEW,
+				widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [openChat]);
+	const handleLinkClick = (url) => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.CHAT_PREVIEW,
+				widget_interaction: WidgetInteractionType.LINK_CLICKED,
+				widget_interaction_data: { link_clicked: { url } }
+			}
+		});
+	};
 	if (isLoading) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
 		widgetType: WidgetTypeV3.ChatPreviewLoadingV3
@@ -72,6 +86,13 @@ const ChatPreviewWidgetHandler = (props) => {
 		widgetContentProps,
 		widgetEventProps: {
 			handlePromptButtonClick,
+			handlePromptButtonDrag: onDrag,
+			handlePromptButtonHover: onHover,
+			handlePromptButtonMouseDown: onMouseDown,
+			handlePromptButtonMouseUp: onMouseUp,
+			handlePromptButtonTouchStart: onTouchStart,
+			handlePromptButtonTouchEnd: onTouchEnd,
+			handleLinkClick,
 			handleTextFieldClick
 		}
 	});

package/dist/widgets/FloatingChatWidget/FloatingChatOverlay.cjs

@@ -2,28 +2,60 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_dom = require("react-dom");
 let framer_motion = require("framer-motion");
+let __envive_ai_react_toolkit_v3_utils_useCheckIsMobile = require("@envive-ai/react-toolkit-v3/utils/useCheckIsMobile");
 
 //#region src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx
-const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false }) => {
+const ANIMATION_DURATION = .3;
+const useOverlayAnimations = ({ previewMode, isMobile }) => {
+	if (previewMode) return {
+		overlayExitAnimation: {
+			opacity: 0,
+			x: 0
+		},
+		overlayAnimation: {
+			opacity: 1,
+			x: 0
+		}
+	};
+	if (isMobile) return {
+		overlayExitAnimation: { opacity: 0 },
+		overlayAnimation: { opacity: 1 }
+	};
+	return {
+		overlayExitAnimation: {
+			opacity: 0,
+			x: 512
+		},
+		overlayAnimation: {
+			opacity: 1,
+			x: 0
+		}
+	};
+};
+const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false, isResultsModalOpen = false }) => {
+	const { isMobile } = (0, __envive_ai_react_toolkit_v3_utils_useCheckIsMobile.useCheckIsMobile)();
+	const { overlayExitAnimation, overlayAnimation } = useOverlayAnimations({
+		previewMode,
+		isMobile
+	});
 	const overlayClasses = (0, classnames.default)(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-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 backdropClasses = (0, classnames.default)("envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", isMobile ? "envive-tw-bg-black" : "", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
 	const overlayContentClasses = (0, classnames.default)("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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: isOpened && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
 		className: overlayClasses,
 		style: { top: "0px" },
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
-		transition: { duration: .3 },
+		transition: { duration: ANIMATION_DURATION },
 		"data-testid": dataTestId,
 		children: [!previewMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 			className: backdropClasses,
 			initial: { opacity: 0 },
 			animate: { opacity: .5 },
 			exit: { opacity: 0 },
-			transition: { duration: .3 },
+			transition: { duration: ANIMATION_DURATION },
 			"aria-label": "Close chat"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: overlayContentClasses,
@@ -36,22 +68,14 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			tabIndex: 0,
 			"aria-label": "Close floating chat",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-				initial: {
-					opacity: 0,
-					x: previewMode ? 0 : 512
-				},
-				animate: {
-					opacity: 1,
-					x: 0
-				},
-				exit: {
-					opacity: 0,
-					x: previewMode ? 0 : 512
-				},
-				transition: { duration: .3 },
+				initial: overlayExitAnimation,
+				animate: overlayAnimation,
+				exit: overlayExitAnimation,
+				transition: { duration: ANIMATION_DURATION },
 				style: {
 					height: previewMode ? "100%" : "100dvh",
-					cursor: "default"
+					cursor: "default",
+					margin: isResultsModalOpen ? "0 auto" : "0"
 				},
 				className: "envive-tw-shadow-md",
 				onClick: (e) => e.stopPropagation(),
@@ -59,9 +83,6 @@ 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;
 };
 FloatingChatOverlay.displayName = "FloatingChatOverlay";
 

package/dist/widgets/FloatingChatWidget/FloatingChatOverlay.js

@@ -1,27 +1,59 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { createPortal } from "react-dom";
 import { AnimatePresence, motion } from "framer-motion";
+import { useCheckIsMobile } from "@envive-ai/react-toolkit-v3/utils/useCheckIsMobile";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx
-const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false }) => {
+const ANIMATION_DURATION = .3;
+const useOverlayAnimations = ({ previewMode, isMobile }) => {
+	if (previewMode) return {
+		overlayExitAnimation: {
+			opacity: 0,
+			x: 0
+		},
+		overlayAnimation: {
+			opacity: 1,
+			x: 0
+		}
+	};
+	if (isMobile) return {
+		overlayExitAnimation: { opacity: 0 },
+		overlayAnimation: { opacity: 1 }
+	};
+	return {
+		overlayExitAnimation: {
+			opacity: 0,
+			x: 512
+		},
+		overlayAnimation: {
+			opacity: 1,
+			x: 0
+		}
+	};
+};
+const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false, isResultsModalOpen = false }) => {
+	const { isMobile } = useCheckIsMobile();
+	const { overlayExitAnimation, overlayAnimation } = useOverlayAnimations({
+		previewMode,
+		isMobile
+	});
 	const overlayClasses = classNames(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-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 backdropClasses = classNames("envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", isMobile ? "envive-tw-bg-black" : "", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
 	const overlayContentClasses = classNames("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, {
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsxs(motion.div, {
 		className: overlayClasses,
 		style: { top: "0px" },
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
-		transition: { duration: .3 },
+		transition: { duration: ANIMATION_DURATION },
 		"data-testid": dataTestId,
 		children: [!previewMode && /* @__PURE__ */ jsx(motion.div, {
 			className: backdropClasses,
 			initial: { opacity: 0 },
 			animate: { opacity: .5 },
 			exit: { opacity: 0 },
-			transition: { duration: .3 },
+			transition: { duration: ANIMATION_DURATION },
 			"aria-label": "Close chat"
 		}), /* @__PURE__ */ jsx("div", {
 			className: overlayContentClasses,
@@ -34,22 +66,14 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			tabIndex: 0,
 			"aria-label": "Close floating chat",
 			children: /* @__PURE__ */ jsx(motion.div, {
-				initial: {
-					opacity: 0,
-					x: previewMode ? 0 : 512
-				},
-				animate: {
-					opacity: 1,
-					x: 0
-				},
-				exit: {
-					opacity: 0,
-					x: previewMode ? 0 : 512
-				},
-				transition: { duration: .3 },
+				initial: overlayExitAnimation,
+				animate: overlayAnimation,
+				exit: overlayExitAnimation,
+				transition: { duration: ANIMATION_DURATION },
 				style: {
 					height: previewMode ? "100%" : "100dvh",
-					cursor: "default"
+					cursor: "default",
+					margin: isResultsModalOpen ? "0 auto" : "0"
 				},
 				className: "envive-tw-shadow-md",
 				onClick: (e) => e.stopPropagation(),
@@ -57,9 +81,6 @@ 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;
 };
 FloatingChatOverlay.displayName = "FloatingChatOverlay";