@envive-ai/react-widgets-v3 0.3.15 → 0.3.17

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.cjs

@@ -2,13 +2,13 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
 const require_functions = require('../utils/functions.cjs');
+let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 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_application_models = require("@envive-ai/react-hooks/application/models");
 let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
-let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let __envive_ai_react_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 let __envive_ai_react_toolkit_v3_TitledPromptCarousel = require("@envive-ai/react-toolkit-v3/TitledPromptCarousel");

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

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

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

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

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.js

@@ -1,13 +1,13 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
 import { getStringIdForText } from "../utils/functions.js";
+import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useCallback, useEffect } from "react";
 import { EnviveMetricsEventName, 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 { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
 import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
-import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
 import { WidgetInteractionComponent } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { AnimationSpeed, usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { TitledPromptCarousel } from "@envive-ai/react-toolkit-v3/TitledPromptCarousel";

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.cjs

@@ -1,12 +1,12 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.cjs');
 const require_ChatPreviewComparisonWidget = require('../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs');
-const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
 const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
+const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
 const require_TypingAnimationWidget = require('../TypingAnimationWidget/TypingAnimationWidget.cjs');
-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_toolkit_v3_ChatPreviewLoading = require("@envive-ai/react-toolkit-v3/ChatPreviewLoading");
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.tsx
 const TypingAnimationFlowWidget = ({ widgetConfigId }) => {

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

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

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

@@ -1,11 +1,11 @@
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
 import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
-import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
+import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import { TypingAnimationWithBaseWidget } from "../TypingAnimationWidget/TypingAnimationWidget.js";
-import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoading";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.tsx
 const TypingAnimationFlowWidget = ({ widgetConfigId }) => {

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.cjs

@@ -2,18 +2,20 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
 const require_functions = require('../utils/functions.cjs');
+let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
+let jotai = require("jotai");
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
-let jotai = require("jotai");
-let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
+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_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
 let __envive_ai_react_hooks_atoms_chat_chatState = require("@envive-ai/react-hooks/atoms/chat/chatState");
 let __envive_ai_react_toolkit_v3_PromptButton_types = require("@envive-ai/react-toolkit-v3/PromptButton/types");
-let __envive_ai_react_toolkit_v3_WidgetWrapper = require("@envive-ai/react-toolkit-v3/WidgetWrapper");
 let __envive_ai_react_toolkit_v3_TypingAnimation = require("@envive-ai/react-toolkit-v3/TypingAnimation");
+let __envive_ai_react_toolkit_v3_WidgetWrapper = require("@envive-ai/react-toolkit-v3/WidgetWrapper");
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx
 const mockButtonTexts = [
@@ -47,6 +49,11 @@ const TypingAnimationWidgetHandler = (props) => {
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
+	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.EMBEDDED_WIDGET, (text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		return require_functions.getStringIdForText(rawValues, text);
+	});
 	(0, react.useEffect)(() => {
 		trackEvent({
 			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
@@ -73,6 +80,7 @@ const TypingAnimationWidgetHandler = (props) => {
 			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION
 		});
 		onToggle(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
+		onPromptClicked(text);
 	}, [
 		hardcopyContent,
 		trackEvent,
@@ -81,6 +89,13 @@ const TypingAnimationWidgetHandler = (props) => {
 	]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		onToggle(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.EMBEDDED_WIDGET,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [onToggle]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_TypingAnimation.TypingAnimation, {
 		baseProps: { id },
@@ -104,6 +119,12 @@ const TypingAnimationWidgetHandler = (props) => {
 		},
 		widgetEventProps: {
 			handleButtonClick,
+			handleButtonDrag: onDrag,
+			handleButtonHover: onHover,
+			handleButtonMouseDown: onMouseDown,
+			handleButtonMouseUp: onMouseUp,
+			handleButtonTouchStart: onTouchStart,
+			handleButtonTouchEnd: onTouchEnd,
 			handleTextFieldClick
 		}
 	});

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

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

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts

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

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.js

@@ -1,18 +1,20 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
 import { getStringIdForText } from "../utils/functions.js";
+import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
+import { useSetAtom } from "jotai";
 import { useCallback, useEffect } from "react";
 import { EnviveMetricsEventName, 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 { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
-import { PromptCarouselRows } from "@envive-ai/react-toolkit-v3/PromptCarousel";
+import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
+import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
+import { PromptCarouselRows, usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { chatOnToggleAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
-import { WidgetWrapperVariant } from "@envive-ai/react-toolkit-v3/WidgetWrapper";
 import { TypingAnimation } from "@envive-ai/react-toolkit-v3/TypingAnimation";
+import { WidgetWrapperVariant } from "@envive-ai/react-toolkit-v3/WidgetWrapper";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx
 const mockButtonTexts = [
@@ -46,6 +48,11 @@ const TypingAnimationWidgetHandler = (props) => {
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	const { trackEvent } = useAmplitude();
+	const { trackWidgetInteraction } = useWidgetInteraction();
+	const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.EMBEDDED_WIDGET, (text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		return getStringIdForText(rawValues, text);
+	});
 	useEffect(() => {
 		trackEvent({
 			eventName: SpiffyMetricsEventName.ChatComponentVisible,
@@ -72,6 +79,7 @@ const TypingAnimationWidgetHandler = (props) => {
 			displayLocation: ChatElementDisplayLocationV3.TYPING_ANIMATION
 		});
 		onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+		onPromptClicked(text);
 	}, [
 		hardcopyContent,
 		trackEvent,
@@ -80,6 +88,13 @@ const TypingAnimationWidgetHandler = (props) => {
 	]);
 	const handleTextFieldClick = useCallback(() => {
 		onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+				widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED
+			}
+		});
 	}, [onToggle]);
 	return /* @__PURE__ */ jsx(TypingAnimation, {
 		baseProps: { id },
@@ -103,6 +118,12 @@ const TypingAnimationWidgetHandler = (props) => {
 		},
 		widgetEventProps: {
 			handleButtonClick,
+			handleButtonDrag: onDrag,
+			handleButtonHover: onHover,
+			handleButtonMouseDown: onMouseDown,
+			handleButtonMouseUp: onMouseUp,
+			handleButtonTouchStart: onTouchStart,
+			handleButtonTouchEnd: onTouchEnd,
 			handleTextFieldClick
 		}
 	});

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/hooks/useGetWidgetStatus.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_functions = require('../utils/functions.cjs');
-let react = require("react");
 let jotai = require("jotai");
+let react = require("react");
 let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_hooks_atoms_chat_chatState = require("@envive-ai/react-hooks/atoms/chat/chatState");
 

package/dist/widgets/hooks/useGetWidgetStatus.js

@@ -1,6 +1,6 @@
 import { isLoading, isProductComparison, userHasInteracted, userHasNotInteracted } from "../utils/functions.js";
-import { useMemo } from "react";
 import { useAtomValue } from "jotai";
+import { useMemo } from "react";
 import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { responseStreamingAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 

package/dist/widgets/utils/functions.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_hooks_atoms_atomStore = require("@envive-ai/react-hooks/atoms/atomStore");
 
 //#region src/widgets/utils/functions.ts

package/dist/widgets/utils/functions.js

@@ -1,5 +1,5 @@
-import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
+import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { getAtomStore } from "@envive-ai/react-hooks/atoms/atomStore";
 
 //#region src/widgets/utils/functions.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.15",
+  "version": "0.3.17",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",
@@ -42,8 +42,8 @@
     "@envive-ai/react-toolkit": "*",
     "@envive-ai/react-toolkit-v3": "*",
     "@envive-ai/react-widgets": "*",
-    "react": ">=18.3.1",
-    "react-dom": ">=18.3.1"
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
     "@envive-ai/react-widgets": "*",

package/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx

@@ -1,31 +1,52 @@
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
   ChatPreviewComparisonWidgetV3Config,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
-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 { useAtomValue } from 'jotai';
 
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { useCallback, useMemo } from 'react';
 import {
   ChatElementDisplayLocationV3,
   Suggestion,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import { ChatPreviewComparison } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison';
 import { ChatPreviewComparisonProps } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison/types/types';
-import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
-import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
-import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
 
 const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
   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);
@@ -75,14 +96,37 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
         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: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+        widget_interaction: WidgetInteractionType.LINK_CLICKED,
+        widget_interaction_data: {
+          link_clicked: {
+            url,
+          },
+        },
+      },
+    });
+  };
+
   if (isLoading) {
     return (
       <ChatPreviewLoadingWidgetWithBaseWidget
@@ -116,6 +160,13 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
 
   const widgetEventProps: ChatPreviewComparisonProps['widgetEventProps'] = {
     handlePromptButtonClick,
+    handlePromptButtonDrag: onDrag,
+    handlePromptButtonHover: onHover,
+    handlePromptButtonMouseDown: onMouseDown,
+    handlePromptButtonMouseUp: onMouseUp,
+    handlePromptButtonTouchStart: onTouchStart,
+    handlePromptButtonTouchEnd: onTouchEnd,
+    handleLinkClick,
     handleTextFieldClick,
   };
 

package/src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx

@@ -1,8 +1,8 @@
-import { ChatPreviewWidgetV3Config, 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 { ChatPreviewWidgetV3Config, 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';
 
@@ -10,17 +10,24 @@ import {
   ChatElementDisplayLocationV3,
   Suggestion,
 } from '@envive-ai/react-hooks/application/models';
-import { useCallback, useEffect, useMemo } from 'react';
 import {
+  EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { ChatPreviewProps } from '@envive-ai/react-toolkit-v3/ChatPreview/types/types';
+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 { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { ChatPreviewProps } from '@envive-ai/react-toolkit-v3/ChatPreview/types/types';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { useCallback, useEffect, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
-import { getMessageText } from '../utils/functions';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { getMessageText } from '../utils/functions';
 
 const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   const { onSuggestionClicked } = useSalesAgent();
@@ -49,8 +56,19 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   >;
 
   const { trackEvent } = useAmplitude();
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onPromptClicked,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.CHAT_PREVIEW, text => text);
 
   useEffect(() => {
+    // TODO: -Add Widget Interaction here
     trackEvent({
       eventName: SpiffyMetricsEventName.ChatComponentVisible,
       eventProps: {
@@ -68,14 +86,37 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     (suggestion: 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: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.CHAT_PREVIEW,
+        widget_interaction: WidgetInteractionType.LINK_CLICKED,
+        widget_interaction_data: {
+          link_clicked: {
+            url,
+          },
+        },
+      },
+    });
+  };
+
   if (isLoading) {
     return (
       <ChatPreviewLoadingWidgetWithBaseWidget
@@ -103,6 +144,13 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
 
   const widgetEventProps: ChatPreviewProps['widgetEventProps'] = {
     handlePromptButtonClick,
+    handlePromptButtonDrag: onDrag,
+    handlePromptButtonHover: onHover,
+    handlePromptButtonMouseDown: onMouseDown,
+    handlePromptButtonMouseUp: onMouseUp,
+    handlePromptButtonTouchStart: onTouchStart,
+    handlePromptButtonTouchEnd: onTouchEnd,
+    handleLinkClick,
     handleTextFieldClick,
   };