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

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

package/dist/packages/icons/dist/_virtual/rolldown_runtime.cjs

@@ -1,27 +0,0 @@
-
-//#region ../icons/dist/_virtual/rolldown_runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-exports.__commonJSMin = __commonJSMin;
-exports.__toESM = __toESM;

package/dist/packages/icons/dist/_virtual/rolldown_runtime.js

@@ -1,25 +0,0 @@
-//#region ../icons/dist/_virtual/rolldown_runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-export { __commonJSMin, __toESM };