@envive-ai/react-toolkit-v3 0.3.15-beta.0 → 0.3.15

package/src/components/FloatingChat/FloatingChat.tsx

@@ -159,7 +159,7 @@ export const FloatingChat = ({
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
       trigger: {
-        widget: WidgetInteractionComponent.FLOATING_BUTTON,
+        widget: WidgetInteractionComponent.FLOATING_CHAT,
         widget_interaction: WidgetInteractionType.MANUAL_SCROLL_TO_BOTTOM,
       },
     });
@@ -169,7 +169,7 @@ export const FloatingChat = ({
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
       trigger: {
-        widget: WidgetInteractionComponent.FLOATING_BUTTON,
+        widget: WidgetInteractionComponent.FLOATING_CHAT,
         widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
       },
     });
@@ -278,6 +278,7 @@ export const FloatingChat = ({
       }
       hideEnviveWatermark={!showEnviveLogo}
       onFocus={handleInputQueryFocus}
+      parentWidget={WidgetInteractionComponent.FLOATING_CHAT}
     />
   );
 
@@ -305,6 +306,7 @@ export const FloatingChat = ({
       showVerifiedBuyer={showVerifiedBuyer}
       isPartialView={isPartialView}
       onFormResponseSubmitted={onFormResponseSubmitted}
+      parentWidget={WidgetInteractionComponent.FLOATING_CHAT}
     />
   );
 

package/src/components/FloatingChat/components/AgentMessage.tsx

@@ -16,8 +16,8 @@ import type { FormSubmitValue } from 'src/components/Form/types';
 import { SalesAgentProductCardProps } from 'src/components/SalesAgentProductCard/types/types';
 import { Theme } from '../../../../tokens/theme/theme';
 import { DocumentRetrievalCardProps } from '../../DocumentRetrievalCard';
-import { ReviewCardProps } from '../../ReviewCard';
 import { Message as MessageComponent, MessageVariant } from '../../Message';
+import { ReviewCardProps } from '../../ReviewCard';
 import { resolveTheme } from '../../utils/resolveTheme';
 import {
   getCleanDocuments,
@@ -42,6 +42,7 @@ export interface AgentMessageProps {
   showVerifiedBuyer?: boolean;
   isPartialView?: boolean;
   onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
+  parentWidget: WidgetInteractionComponent;
 }
 
 export const AgentMessage = ({
@@ -56,6 +57,7 @@ export const AgentMessage = ({
   showVerifiedBuyer = false,
   isPartialView,
   onFormResponseSubmitted,
+  parentWidget,
 }: AgentMessageProps) => {
   const handleFormSubmittedAtomFallback = useSetAtom(handleFormSubmittedAtom);
   const finalTheme = resolveTheme(theme);
@@ -71,7 +73,7 @@ export const AgentMessage = ({
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
       trigger: {
-        widget: WidgetInteractionComponent.FLOATING_CHAT,
+        widget: parentWidget,
         widget_interaction: WidgetInteractionType.ARTICLE_LINK_CLICKED,
         widget_interaction_data: {
           article_link_clicked: {
@@ -86,7 +88,7 @@ export const AgentMessage = ({
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
       trigger: {
-        widget: WidgetInteractionComponent.FLOATING_CHAT,
+        widget: parentWidget,
         widget_interaction: WidgetInteractionType.PRODUCT_CARD_CLICKED,
         widget_interaction_data: {
           product_card_clicked: {
@@ -101,7 +103,7 @@ export const AgentMessage = ({
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
       trigger: {
-        widget: WidgetInteractionComponent.FLOATING_CHAT,
+        widget: parentWidget,
         widget_interaction: WidgetInteractionType.REVIEW_CARD_CLICKED,
         widget_interaction_data: {
           review_card_clicked: {
@@ -116,7 +118,7 @@ export const AgentMessage = ({
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
       trigger: {
-        widget: WidgetInteractionComponent.FLOATING_CHAT,
+        widget: parentWidget,
         widget_interaction: WidgetInteractionType.LINK_CLICKED,
         widget_interaction_data: {
           link_clicked: {

package/src/components/FloatingChat/components/ChatMessages.tsx

@@ -4,18 +4,19 @@ import {
   MessageRole,
   MessageType,
 } from '@envive-ai/react-hooks/application/models';
-import { forwardRef } from 'react';
+import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { Theme } from '../../../../tokens/theme/theme';
+import { Message as MessageComponent, MessageVariant } from '../../Message';
 import { Stack } from '../../Stack';
+import { Typography, TypographyVariant } from '../../Typography';
+import { TypographyColor } from '../../Typography/types';
+import { resolveTheme } from '../../utils/resolveTheme';
 import { checkIfHideAgentName, getGroupableMessages } from '../utils/functions';
-import { UserMessage } from './UserMessage';
 import { AgentMessage } from './AgentMessage';
-import { Message as MessageComponent, MessageVariant } from '../../Message';
 import { MessageDivider } from './MessageDivider';
-import { Theme } from '../../../../tokens/theme/theme';
-import { resolveTheme } from '../../utils/resolveTheme';
-import { Typography, TypographyVariant } from '../../Typography';
-import { TypographyColor } from '../../Typography/types';
+import { UserMessage } from './UserMessage';
 
 export interface ChatMessagesProps {
   theme: Theme;
@@ -31,6 +32,7 @@ export interface ChatMessagesProps {
   showVerifiedBuyer?: boolean;
   isPartialView?: boolean;
   onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
+  parentWidget: WidgetInteractionComponent;
 }
 
 export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
@@ -49,6 +51,7 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
       showVerifiedBuyer,
       isPartialView,
       onFormResponseSubmitted,
+      parentWidget,
     },
     ref,
   ) => {
@@ -142,6 +145,7 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
                       showVerifiedBuyer={showVerifiedBuyer}
                       isPartialView={isPartialView}
                       onFormResponseSubmitted={onFormResponseSubmitted}
+                      parentWidget={parentWidget}
                     />
                   );
                 }

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -1,7 +1,13 @@
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { FloatingChatConfig, LookAndFeelConfig } 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 { useRef, useState } from 'react';
 import { ChatFooter } from '../ChatFooter';
 import { Disclaimer } from '../Disclaimer';
@@ -9,7 +15,7 @@ import { FloatingChatComponents } from '../FloatingChat/components';
 import { useChatSuggestions } from '../FloatingChat/hooks/useChatSuggestions';
 import { useScrollToBottom } from '../FloatingChat/hooks/useScrollToBottom';
 import { PromptButtonVariant } from '../PromptButton';
-import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
+import { PromptCarousel, PromptCarouselRows, usePromptCarouselAnalytics } from '../PromptCarousel';
 import { Theme } from '../Tokens';
 import { resolveTheme } from '../utils/resolveTheme';
 import { SparkleIconColor, WelcomeMessage } from '../WelcomeMessage';
@@ -35,11 +41,14 @@ export const FullPageSalesAgent = ({
   autoHeight,
 }: FullPageSalesAgentProps) => {
   const resolvedTheme = resolveTheme(theme);
-  const salesAgentData = useSalesAgent();
+  const salesAgentData = useSalesAgent(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT);
   const [query, setQuery] = useState('');
   const chatMessagesRef = useRef<HTMLDivElement>(null);
   const { footerStyles } = useGetFooterStyles();
   const { isMobile } = useIsMobile();
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
+    usePromptCarouselAnalytics(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT, text => text);
 
   const {
     welcomeMessageIconColor,
@@ -94,6 +103,27 @@ export const FullPageSalesAgent = ({
     ],
   });
 
+  const handleScrollToBottom = () => {
+    scrollToBottom();
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+        widget_interaction: WidgetInteractionType.MANUAL_SCROLL_TO_BOTTOM,
+      },
+    });
+  };
+
+  const handleInputQueryFocus = () => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
+  };
+
   const welcomeMessage = (
     <WelcomeMessage
       sparkleIconColor={welcomeMessageIconColor as SparkleIconColor}
@@ -140,6 +170,8 @@ export const FullPageSalesAgent = ({
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
       }}
+      onFocus={handleInputQueryFocus}
+      parentWidget={WidgetInteractionComponent.FULL_PAGE_SALES_AGENT}
     />
   );
 
@@ -157,6 +189,7 @@ export const FullPageSalesAgent = ({
       neverShowSingleProductCards={neverShowSingleProductCards}
       showVerifiedBuyer={showVerifiedBuyer}
       onFormResponseSubmitted={onFormResponseSubmitted}
+      parentWidget={WidgetInteractionComponent.FULL_PAGE_SALES_AGENT}
     />
   );
 
@@ -175,6 +208,12 @@ export const FullPageSalesAgent = ({
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
       }}
+      handleButtonHover={onHover}
+      handleButtonDrag={onDrag}
+      handleButtonMouseDown={onMouseDown}
+      handleButtonMouseUp={onMouseUp}
+      handleButtonTouchStart={onTouchStart}
+      handleButtonTouchEnd={onTouchEnd}
     />
   );
 
@@ -192,7 +231,7 @@ export const FullPageSalesAgent = ({
       answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : undefined}
       scrollToBottomButton={
         showScrollButton ? (
-          <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
+          <FloatingChatComponents.ScrollToBottomButton onClick={handleScrollToBottom} />
         ) : undefined
       }
       disclaimer={disclaimer}

package/src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.tsx

@@ -17,6 +17,12 @@ export const PromptButtonCarouselWithImage = ({
   promptButtonsTexts,
   promptButtonType,
   handlePromptButtonClick,
+  handlePromptButtonDrag,
+  handlePromptButtonHover,
+  handlePromptButtonMouseDown,
+  handlePromptButtonMouseUp,
+  handlePromptButtonTouchStart,
+  handlePromptButtonTouchEnd,
   textFieldPlaceholder,
   handleTextFieldClick,
 }: PromptButtonCarouselWithImageProps) => {
@@ -35,6 +41,7 @@ export const PromptButtonCarouselWithImage = ({
       className={className}
       style={style}
       hideTextField={hideTextField}
+      onPromptDrag={handlePromptButtonDrag}
       textField={
         <PromptButtonCarouselWithImageComponents.TextField
           isLoading={isLoading}
@@ -58,6 +65,11 @@ export const PromptButtonCarouselWithImage = ({
           promptButtonsTexts={promptButtonsTexts || []}
           promptButtonType={promptButtonType}
           handlePromptButtonClick={handlePromptButtonClick}
+          handlePromptButtonHover={handlePromptButtonHover}
+          handlePromptButtonMouseDown={handlePromptButtonMouseDown}
+          handlePromptButtonMouseUp={handlePromptButtonMouseUp}
+          handlePromptButtonTouchStart={handlePromptButtonTouchStart}
+          handlePromptButtonTouchEnd={handlePromptButtonTouchEnd}
         />
       }
       title={

package/src/components/PromptButtonCarouselWithImage/__tests__/PromptButtonCarouselWithImage.test.tsx

@@ -292,6 +292,107 @@ describe('PromptButtonCarouselWithImage', () => {
       expect(handlePromptButtonClick).toHaveBeenNthCalledWith(2, 'Button B');
       expect(handlePromptButtonClick).toHaveBeenNthCalledWith(3, 'Button C');
     });
+
+    it('should call handlePromptButtonHover when a button is hovered', () => {
+      const handlePromptButtonHover = vi.fn();
+      render(
+        <PromptButtonCarouselWithImage
+          {...defaultProps}
+          handlePromptButtonHover={handlePromptButtonHover}
+          promptButtonsTexts={['Hover Me', 'Second', 'Third']}
+        />,
+      );
+
+      const button = screen.getByText('Hover Me');
+      fireEvent.mouseOver(button);
+
+      expect(handlePromptButtonHover).toHaveBeenCalledTimes(1);
+      expect(handlePromptButtonHover).toHaveBeenCalledWith('Hover Me');
+    });
+
+    it('should call handlePromptButtonMouseDown when a button is pressed', () => {
+      const handlePromptButtonMouseDown = vi.fn();
+      render(
+        <PromptButtonCarouselWithImage
+          {...defaultProps}
+          handlePromptButtonMouseDown={handlePromptButtonMouseDown}
+          promptButtonsTexts={['Press Me', 'Second', 'Third']}
+        />,
+      );
+
+      const button = screen.getByText('Press Me');
+      fireEvent.mouseDown(button);
+
+      expect(handlePromptButtonMouseDown).toHaveBeenCalledTimes(1);
+      expect(handlePromptButtonMouseDown).toHaveBeenCalledWith('Press Me');
+    });
+
+    it('should call handlePromptButtonMouseUp when mouse is released over a button', () => {
+      const handlePromptButtonMouseUp = vi.fn();
+      render(
+        <PromptButtonCarouselWithImage
+          {...defaultProps}
+          handlePromptButtonMouseUp={handlePromptButtonMouseUp}
+          promptButtonsTexts={['Release Me', 'Second', 'Third']}
+        />,
+      );
+
+      const button = screen.getByText('Release Me');
+      fireEvent.mouseUp(button);
+
+      expect(handlePromptButtonMouseUp).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call handlePromptButtonTouchStart when a touch starts on a button', () => {
+      const handlePromptButtonTouchStart = vi.fn();
+      render(
+        <PromptButtonCarouselWithImage
+          {...defaultProps}
+          handlePromptButtonTouchStart={handlePromptButtonTouchStart}
+          promptButtonsTexts={['Touch Me', 'Second', 'Third']}
+        />,
+      );
+
+      const button = screen.getByText('Touch Me');
+      fireEvent.touchStart(button);
+
+      expect(handlePromptButtonTouchStart).toHaveBeenCalledTimes(1);
+      expect(handlePromptButtonTouchStart).toHaveBeenCalledWith('Touch Me');
+    });
+
+    it('should call handlePromptButtonTouchEnd when a touch ends on a button', () => {
+      const handlePromptButtonTouchEnd = vi.fn();
+      render(
+        <PromptButtonCarouselWithImage
+          {...defaultProps}
+          handlePromptButtonTouchEnd={handlePromptButtonTouchEnd}
+          promptButtonsTexts={['Touch End', 'Second', 'Third']}
+        />,
+      );
+
+      const button = screen.getByText('Touch End');
+      fireEvent.touchEnd(button);
+
+      expect(handlePromptButtonTouchEnd).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call handlePromptButtonDrag when the prompt buttons area is dragged', () => {
+      const handlePromptButtonDrag = vi.fn();
+      render(
+        <PromptButtonCarouselWithImage
+          {...defaultProps}
+          handlePromptButtonDrag={handlePromptButtonDrag}
+          promptButtonsTexts={['Drag Me', 'Second', 'Third']}
+        />,
+      );
+
+      const button = screen.getByText('Drag Me');
+
+      fireEvent.pointerDown(button, { button: 0, clientX: 0, clientY: 0, pointerId: 1 });
+      fireEvent.pointerMove(button, { clientX: 10, clientY: 0, pointerId: 1 });
+
+      expect(handlePromptButtonDrag).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('TextField interaction', () => {

package/src/components/PromptButtonCarouselWithImage/components/Layout.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import { cloneElement, isValidElement } from 'react';
-import { useGetContentSize } from '../../utils/useGetContentSize';
 import { calculateWidthImageGallery } from '../../SocialProof/utils/functions';
 import { Stack } from '../../Stack';
-import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
-import { ImageProps } from './Image';
 import { WidgetTextFieldProps } from '../../WidgetTextField/types/types';
-import { useHorizontalWheelScroll } from '../../utils/useHorizontalWheelScroll';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
 import { useDragToScroll } from '../../utils/useDragToScroll';
+import { useGetContentSize } from '../../utils/useGetContentSize';
+import { useHorizontalWheelScroll } from '../../utils/useHorizontalWheelScroll';
+import { ImageProps } from './Image';
 
 type LayoutProps = {
   id: string;
@@ -19,6 +19,7 @@ type LayoutProps = {
   image: React.ReactNode;
   textField: React.ReactNode;
   hideTextField: boolean;
+  onPromptDrag?: () => void;
 };
 
 export const Layout = ({
@@ -31,6 +32,7 @@ export const Layout = ({
   image,
   textField,
   hideTextField,
+  onPromptDrag,
 }: LayoutProps) => {
   const { isMobile } = useCheckIsMobile();
   const { height, ref: contentSizeRef } = useGetContentSize({
@@ -40,6 +42,7 @@ export const Layout = ({
   useDragToScroll(wheelScrollRef, {
     direction: isMobile ? 'y' : 'x',
     isEnabled: true,
+    onDrag: onPromptDrag,
   });
 
   const combinedRef = (node: HTMLDivElement | null) => {

package/src/components/PromptButtonCarouselWithImage/components/PromptButtonsCarousel.tsx

@@ -1,8 +1,8 @@
 import { Theme } from '../../../../tokens/theme/theme';
 import { PromptButton, PromptButtonVariant } from '../../PromptButton';
+import { Stack } from '../../Stack';
 import { resolveTheme } from '../../utils/resolveTheme';
 import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
-import { Stack } from '../../Stack';
 
 type PromptButtonsCarouselProps = {
   theme: Theme;
@@ -10,6 +10,11 @@ type PromptButtonsCarouselProps = {
   promptButtonsTexts: string[];
   promptButtonType: PromptButtonVariant;
   handlePromptButtonClick: (text: string) => void;
+  handlePromptButtonHover?: (text: string) => void;
+  handlePromptButtonMouseDown?: (text: string) => void;
+  handlePromptButtonMouseUp?: () => void;
+  handlePromptButtonTouchStart?: (text: string) => void;
+  handlePromptButtonTouchEnd?: () => void;
 };
 
 function distributeInThreeRows<T>(items: T[]): [T[], T[], T[]] {
@@ -37,6 +42,11 @@ export const PromptButtonsCarousel = ({
   promptButtonsTexts,
   promptButtonType,
   handlePromptButtonClick,
+  handlePromptButtonHover,
+  handlePromptButtonMouseDown,
+  handlePromptButtonMouseUp,
+  handlePromptButtonTouchStart,
+  handlePromptButtonTouchEnd,
 }: PromptButtonsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
   const { isMobile } = useCheckIsMobile();
@@ -58,6 +68,11 @@ export const PromptButtonsCarousel = ({
         className="envive-tw-w-fit"
         theme={finalTheme}
         onClick={() => handlePromptButtonClick(text)}
+        onHover={() => handlePromptButtonHover(text)}
+        onMouseDown={() => handlePromptButtonMouseDown(text)}
+        onMouseUp={() => handlePromptButtonMouseUp()}
+        onTouchStart={() => handlePromptButtonTouchStart(text)}
+        onTouchEnd={() => handlePromptButtonTouchEnd()}
       />
     </div>
   );

package/src/components/PromptButtonCarouselWithImage/types/types.ts

@@ -64,6 +64,34 @@ export type PromptButtonCarouselWithImageProps = {
    * Receives the button's text as a parameter.
    */
   handlePromptButtonClick: (text: string) => void;
+  /**
+   * Callback function invoked when the prompt buttons carousel is dragged.
+   * Useful for tracking drag-to-scroll interactions.
+   */
+  handlePromptButtonDrag?: () => void;
+  /**
+   * Callback function invoked when the user hovers over a prompt button.
+   * Receives the hovered button's text as a parameter.
+   */
+  handlePromptButtonHover?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on a prompt button.
+   * Receives the pressed button's text as a parameter.
+   */
+  handlePromptButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released after pressing a prompt button.
+   */
+  handlePromptButtonMouseUp?: () => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * Receives the touched button's text as a parameter.
+   */
+  handlePromptButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends after touching a prompt button.
+   */
+  handlePromptButtonTouchEnd?: () => void;
   /**
    * Callback function invoked when the text field is clicked.
    * Receives the placeholder text as a parameter.

package/src/components/SocialProof/SocialProof.tsx

@@ -1,15 +1,16 @@
 import { ImageGalleryLayout } from '../ImageGallery/types/types';
-import { useCheckIsMobile } from '../utils/useCheckIsMobile';
-import { SocialProofComponents } from './components';
-import { resolveTheme } from '../utils/resolveTheme';
-import { SocialProofProps, WidgetKind } from './types/types';
+import { PromptButtonVariant } from '../PromptButton';
+import { PromptCarouselRows } from '../PromptCarousel';
 import { Theme } from '../Tokens';
+import { resolveTheme } from '../utils/resolveTheme';
+import { useCheckIsMobile } from '../utils/useCheckIsMobile';
+import { IconVariant } from '../WidgetTextField/types/types';
 import { WidgetWrapperVariant } from '../WidgetWrapper';
-import { PromptCarouselRows } from '../PromptCarousel';
-import { PromptButtonVariant } from '../PromptButton';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle/WidgetWrapperWithTitle';
+import { SocialProofComponents } from './components';
 import { useSocialProofCount } from './hooks';
-import { IconVariant } from '../WidgetTextField/types/types';
+import { shouldHideImageGallery } from './utils/functions';
+import { SocialProofProps, WidgetKind } from './types/types';
 
 export const SocialProof = ({
   baseProps,
@@ -51,8 +52,18 @@ export const SocialProof = ({
     id,
   });
 
-  const { handlePrimaryButtonClick, handleSecondaryButtonClick, handleTextFieldClick } =
-    widgetEventProps ?? {};
+  const {
+    handlePrimaryButtonClick,
+    handlePrimaryButtonHover,
+    handleSecondaryButtonClick,
+    handleSecondaryButtonHover,
+    handleSecondaryButtonDrag,
+    handleSecondaryButtonMouseDown,
+    handleSecondaryButtonMouseUp,
+    handleSecondaryButtonTouchStart,
+    handleSecondaryButtonTouchEnd,
+    handleTextFieldClick,
+  } = widgetEventProps ?? {};
 
   const finalTheme = resolveTheme(theme);
 
@@ -60,7 +71,11 @@ export const SocialProof = ({
 
   const hasDynamicLayout = kind === WidgetKind.DYNAMIC || dynamicLayout !== undefined;
 
-  const hideImageGallery = hideImage || !images || images.length === 0;
+  const hideImageGallery = shouldHideImageGallery({
+    hideImage,
+    images,
+    imageGalleryLayout,
+  });
 
   const isFourGridLayout =
     !isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID && !hasDynamicLayout;
@@ -78,6 +93,7 @@ export const SocialProof = ({
       primaryPromptButtonText={primaryButtonText}
       primaryPromptButtonVariant={primaryButtonVariant}
       handleButtonClick={handlePrimaryButtonClick}
+      handleButtonHover={handlePrimaryButtonHover}
     />
   );
 
@@ -89,6 +105,12 @@ export const SocialProof = ({
       secondaryPromptButtonType={secondaryButtonVariant}
       subheadlineText={secondaryButtonTitleText}
       handleButtonClick={handleSecondaryButtonClick}
+      handleButtonDrag={handleSecondaryButtonDrag}
+      handleButtonHover={handleSecondaryButtonHover}
+      handleButtonMouseDown={handleSecondaryButtonMouseDown}
+      handleButtonMouseUp={handleSecondaryButtonMouseUp}
+      handleButtonTouchStart={handleSecondaryButtonTouchStart}
+      handleButtonTouchEnd={handleSecondaryButtonTouchEnd}
     />
   );
 

package/src/components/SocialProof/__tests__/SocialProof.test.tsx

@@ -302,6 +302,22 @@ describe('SocialProof', () => {
       expect(handlePrimaryButtonClick).toHaveBeenCalledWith('This is a prompt button');
     });
 
+    it('should call handlePrimaryButtonHover when primary button is hovered', () => {
+      const handlePrimaryButtonHover = vi.fn();
+      render(
+        <SocialProof
+          {...defaultProps}
+          widgetEventProps={{ handlePrimaryButtonHover }}
+        />,
+      );
+
+      const button = screen.getByText('This is a prompt button');
+      fireEvent.mouseOver(button);
+
+      expect(handlePrimaryButtonHover).toHaveBeenCalledTimes(1);
+      expect(handlePrimaryButtonHover).toHaveBeenCalledWith('This is a prompt button');
+    });
+
     it('should call handleSecondaryButtonClick when secondary button is clicked', () => {
       const handleSecondaryButtonClick = vi.fn();
       render(

package/src/components/SocialProof/components/Headline.tsx

@@ -1,10 +1,10 @@
-import { forwardRef } from 'react';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 import { Theme } from '../../../../tokens/theme/theme';
-import { Stack } from '../../Stack';
 import { Container } from '../../Container';
-import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
 import { PromptButton, PromptButtonVariant } from '../../PromptButton';
+import { Stack } from '../../Stack';
+import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
 import { resolveTheme } from '../../utils/resolveTheme';
 
 export type HeadlineProps = {
@@ -16,6 +16,7 @@ export type HeadlineProps = {
   primaryPromptButtonText: string;
   primaryPromptButtonVariant: PromptButtonVariant;
   handleButtonClick: (text: string) => void;
+  handleButtonHover?: (text: string) => void;
 };
 
 export const Headline = forwardRef<HTMLDivElement, HeadlineProps>(
@@ -29,6 +30,7 @@ export const Headline = forwardRef<HTMLDivElement, HeadlineProps>(
       primaryPromptButtonText,
       primaryPromptButtonVariant = PromptButtonVariant.DARK,
       handleButtonClick,
+      handleButtonHover,
     },
     ref,
   ) => {
@@ -65,6 +67,7 @@ export const Headline = forwardRef<HTMLDivElement, HeadlineProps>(
             label={primaryPromptButtonText}
             variant={primaryPromptButtonVariant}
             onClick={() => handleButtonClick(primaryPromptButtonText)}
+            onHover={() => handleButtonHover?.(primaryPromptButtonText)}
           />
         </Container>
       </Stack>