@envive-ai/react-widgets-v3 0.3.15-beta.1 → 0.3.16

package/dist/widgets/dist/SuggestionBar/SuggestionBar.d.cts

@@ -1,6 +1,6 @@
-import { SuggestionButtonVariant } from "../packages/hooks/dist/contexts/types.cjs";
 import { SuggestionBarLocationForMetrics } from "./types.cjs";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
 import { Message } from "postcss";
 
 //#region ../widgets/dist/SuggestionBar/SuggestionBar.d.ts
@@ -30,7 +30,7 @@ declare function SuggestionBar({
   buttonBorderRadius,
   handleReply,
   dataTestId
-}: Readonly<SuggestionBarProps>): react_jsx_runtime3.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/dist/widgets/dist/SuggestionButtonContainer/types.d.cts

@@ -1,8 +1,7 @@
-import { TestProps } from "../packages/hooks/dist/types/test-types.cjs";
-import { SuggestionButtonVariant } from "../packages/hooks/dist/contexts/types.cjs";
+import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
+import { TestProps } from "@envive-ai/react-hooks/types";
 
 //#region ../widgets/dist/SuggestionButtonContainer/types.d.ts
-
 //#region src/SuggestionButtonContainer/types.d.ts
 interface SuggestionButtonContainerProps extends TestProps {
   buttonVariation: SuggestionButtonVariant;

package/dist/widgets/hooks/useGetWidgetStatus.cjs

@@ -1,8 +1,8 @@
 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 __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
+let jotai = require("jotai");
 let __envive_ai_react_hooks_atoms_chat_chatState = require("@envive-ai/react-hooks/atoms/chat/chatState");
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/dist/widgets/hooks/useGetWidgetStatus.js

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

package/dist/widgets/utils/functions.cjs

@@ -4,19 +4,6 @@ let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks
 let __envive_ai_react_hooks_atoms_atomStore = require("@envive-ai/react-hooks/atoms/atomStore");
 
 //#region src/widgets/utils/functions.ts
-const getProductImageUrl = (lastAssistantMessage) => {
-	const productImageUrls = lastAssistantMessage != null ? lastAssistantMessage.reduce((acc, msg) => {
-		if (msg.type === __envive_ai_react_hooks_application_models.MessageType.Product && msg.metadata) {
-			if (msg.metadata.imageUrls?.length) return [...acc, ...msg.metadata.imageUrls];
-			if (msg.metadata.imageUrl) return [...acc, msg.metadata.imageUrl];
-		}
-		return acc;
-	}, []) : [];
-	return (() => {
-		const productImageUrlIndex = 1;
-		return productImageUrls.length > 0 && productImageUrlIndex > productImageUrls.length - 1 ? productImageUrls[productImageUrls.length - 1] : productImageUrls[productImageUrlIndex];
-	})();
-};
 const getRecentProductImageUrls = (lastMessages, currentProductId) => {
 	const productMessages = lastMessages.filter((message) => message.type === __envive_ai_react_hooks_application_models.MessageType.Product && message.metadata?.imageUrl).map((m) => m);
 	return [...productMessages.filter((m) => m.metadata?.id === currentProductId), ...productMessages.filter((m) => m.metadata?.id !== currentProductId)].map((m) => m.metadata.imageUrl);
@@ -55,7 +42,6 @@ const getStringIdForText = (rawValues, text) => {
 
 //#endregion
 exports.getMessageText = getMessageText;
-exports.getProductImageUrl = getProductImageUrl;
 exports.getRecentProductImageUrls = getRecentProductImageUrls;
 exports.getStringIdForText = getStringIdForText;
 exports.isLoading = isLoading;

package/dist/widgets/utils/functions.js

@@ -3,19 +3,6 @@ import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/mod
 import { getAtomStore } from "@envive-ai/react-hooks/atoms/atomStore";
 
 //#region src/widgets/utils/functions.ts
-const getProductImageUrl = (lastAssistantMessage) => {
-	const productImageUrls = lastAssistantMessage != null ? lastAssistantMessage.reduce((acc, msg) => {
-		if (msg.type === MessageType.Product && msg.metadata) {
-			if (msg.metadata.imageUrls?.length) return [...acc, ...msg.metadata.imageUrls];
-			if (msg.metadata.imageUrl) return [...acc, msg.metadata.imageUrl];
-		}
-		return acc;
-	}, []) : [];
-	return (() => {
-		const productImageUrlIndex = 1;
-		return productImageUrls.length > 0 && productImageUrlIndex > productImageUrls.length - 1 ? productImageUrls[productImageUrls.length - 1] : productImageUrls[productImageUrlIndex];
-	})();
-};
 const getRecentProductImageUrls = (lastMessages, currentProductId) => {
 	const productMessages = lastMessages.filter((message) => message.type === MessageType.Product && message.metadata?.imageUrl).map((m) => m);
 	return [...productMessages.filter((m) => m.metadata?.id === currentProductId), ...productMessages.filter((m) => m.metadata?.id !== currentProductId)].map((m) => m.metadata.imageUrl);
@@ -53,4 +40,4 @@ const getStringIdForText = (rawValues, text) => {
 };
 
 //#endregion
-export { getMessageText, getProductImageUrl, getRecentProductImageUrls, getStringIdForText, isLoading, isProductComparison, userHasInteracted, userHasNotInteracted };
+export { getMessageText, getRecentProductImageUrls, getStringIdForText, isLoading, isProductComparison, userHasInteracted, userHasNotInteracted };

package/dist/widgets-v2/SearchZeroState/index.d.cts

@@ -1,5 +1,4 @@
-import { SearchEntryPointWidgetConfig, SearchInputVariant } from "../../widgets/dist/packages/hooks/dist/contexts/types.cjs";
-import { SearchZeroStateProps } from "../../widgets/dist/SearchZeroState/types.cjs";
+import { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroStateProps } from "../../widgets/dist/SearchZeroState/types.cjs";
 import { SearchZeroState } from "../../widgets/dist/SearchZeroState/SearchZeroState.cjs";
 import { SearchZeroStateWidget } from "../../widgets/dist/SearchZeroState/SearchZeroStateWidget.cjs";
 export { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroState, SearchZeroStateProps, SearchZeroStateWidget };

package/dist/widgets-v2/SearchZeroState/index.d.ts

@@ -1,5 +1,4 @@
-import { SearchEntryPointWidgetConfig, SearchInputVariant } from "../../packages/widgets/dist/packages/hooks/dist/contexts/types.js";
-import { SearchZeroStateProps } from "../../packages/widgets/dist/SearchZeroState/types.js";
+import { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroStateProps } from "../../packages/widgets/dist/SearchZeroState/types.js";
 import { SearchZeroState } from "../../packages/widgets/dist/SearchZeroState/SearchZeroState.js";
 import { SearchZeroStateWidget } from "../../packages/widgets/dist/SearchZeroState/SearchZeroStateWidget.js";
 import "../../packages/widgets/dist/SearchZeroState/index.js";

package/dist/widgets-v2/SuggestionButtonContainer/index.d.ts

@@ -1,4 +1,3 @@
 import { SuggestionButtonContainerProps } from "../../packages/widgets/dist/SuggestionButtonContainer/types.js";
 import { SuggestionButtonContainer } from "../../packages/widgets/dist/SuggestionButtonContainer/SuggestionButtonContainer.js";
-import "../../packages/widgets/dist/SuggestionButtonContainer/index.js";
 export { SuggestionButtonContainer, SuggestionButtonContainerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.15-beta.1",
+  "version": "0.3.16",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

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/FloatingChatWidget/FloatingChatOverlay.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import classNames from 'classnames';
 
@@ -112,11 +111,6 @@ export const FloatingChatOverlay = ({
     return chatWrapper;
   }
 
-  // Render using portal to body to ensure it's on top of everything
-  if (typeof document !== 'undefined') {
-    return createPortal(chatWrapper, document.body);
-  }
-
   return chatWrapper;
 };
 

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/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -1,28 +1,34 @@
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
   PromptButtonCarouselWithImageWidgetV3Config,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { useCallback, useEffect, useMemo } from 'react';
+import {
+  ChatElementDisplayLocationV3,
+  VariantTypeEnum,
+} from '@envive-ai/react-hooks/application/models';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 import {
   EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
 import {
-  ChatElementDisplayLocationV3,
-  VariantTypeEnum,
-} from '@envive-ai/react-hooks/application/models';
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import {
   PromptButtonCarouselWithImage,
   PromptButtonCarouselWithImageProps,
 } from '@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage';
-import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { useAtomValue } from 'jotai';
-import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { useCallback, useEffect, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { RawValues, getRecentProductImageUrls, getStringIdForText } from '../utils/functions';
@@ -30,6 +36,16 @@ import { RawValues, getRecentProductImageUrls, getStringIdForText } from '../uti
 const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onSuggestionClick,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.SINGLE_IMAGE_PROMPT, text => text);
 
   const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 
@@ -78,12 +94,20 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
           ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON);
+      onSuggestionClick(text);
     },
     [onTypedMessageSubmitted, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
   const variantInfo = useAtomValue(variantInfoAtom);
@@ -120,6 +144,12 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
       textFieldPlaceholder={hardCopyContent?.textFieldPlaceholder}
       hideTextField={promptButtonCarouselWithImageWidgetConfig?.hideTextField}
       handlePromptButtonClick={handlePromptButtonClick}
+      handlePromptButtonDrag={onDrag}
+      handlePromptButtonHover={onHover}
+      handlePromptButtonMouseDown={onMouseDown}
+      handlePromptButtonMouseUp={onMouseUp}
+      handlePromptButtonTouchStart={onTouchStart}
+      handlePromptButtonTouchEnd={onTouchEnd}
       handleTextFieldClick={handleTextFieldClick}
     />
   );

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -9,16 +9,17 @@ import {
   PromptCarouselWidgetV3Config,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { useCallback, useEffect } from 'react';
+
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
-import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
 import {
   PromptCarousel,
   usePromptCarouselAnalytics,
 } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { AnimationSpeed } from '@envive-ai/react-toolkit-v3/PromptCarousel/types/types';
 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';