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

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,
   };
 

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -1,16 +1,22 @@
-import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { useCallback, useEffect } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import { ProductCard } from '@envive-ai/react-toolkit-v3/ProductCard';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback, useEffect } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -52,6 +58,19 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const imageSrc = productCardWidgetConfig?.imageSrc || '';
 
   const { trackEvent } = useAmplitude();
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onSuggestionClick,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.IMAGE_PROMPT_CARD, text => {
+    const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+    return getStringIdForText(rawValues, text);
+  });
 
   const { widgetConfigId } = props;
   useEffect(() => {
@@ -82,12 +101,20 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
         displayLocation: ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
+      onSuggestionClick(text);
     },
     [hardcopyContent, onTypedMessageSubmitted, openChat, trackEvent],
   );
 
   const handleInputClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
   return (
@@ -105,6 +132,12 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       textTypingDuration={800}
       textTransition={2000}
       onSelect={handleSelect}
+      onDrag={onDrag}
+      onHover={onHover}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
       onInputClick={handleInputClick}
     />
   );

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -1,21 +1,29 @@
-import {
-  TypingAnimationWidgetV3Config,
-  WidgetTypeV3,
-} from '@envive-ai/react-hooks/contexts/typesV3';
-import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
-import { useCallback, useEffect } from 'react';
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { chatOnToggleAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
 import {
   EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { useSetAtom } from 'jotai';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
-import { chatOnToggleAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
-import { PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import {
+  TypingAnimationWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import {
+  PromptCarouselRows,
+  usePromptCarouselAnalytics,
+} from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { TypingAnimation } from '@envive-ai/react-toolkit-v3/TypingAnimation';
+import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
+import { useSetAtom } from 'jotai';
+import { useCallback, useEffect } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -64,6 +72,19 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
   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 as { rawValues?: RawValues } | undefined)?.rawValues;
+    return getStringIdForText(rawValues, text);
+  });
 
   useEffect(() => {
     trackEvent({
@@ -93,12 +114,20 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         displayLocation: ChatElementDisplayLocationV3.TYPING_ANIMATION,
       });
       onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+      onPromptClicked(text);
     },
     [hardcopyContent, trackEvent, onTypedMessageSubmitted, onToggle],
   );
 
   const handleTextFieldClick = useCallback(() => {
     onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [onToggle]);
 
   return (
@@ -126,6 +155,12 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
       }}
       widgetEventProps={{
         handleButtonClick,
+        handleButtonDrag: onDrag,
+        handleButtonHover: onHover,
+        handleButtonMouseDown: onMouseDown,
+        handleButtonMouseUp: onMouseUp,
+        handleButtonTouchStart: onTouchStart,
+        handleButtonTouchEnd: onTouchEnd,
         handleTextFieldClick,
       }}
     />