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

package/src/components/FloatingChat/hooks/useSnapControl.ts

@@ -8,6 +8,7 @@ import {
 } from 'framer-motion';
 import { useMemo, useState } from 'react';
 import { Unit, useSnapCalculator } from './useSnapCalculator';
+import { FULL_SNAP_INDEX, HIDDEN_SNAP_INDEX } from '../snapConstants';
 
 type SnapControl = {
   animationKey?: MotionValue;
@@ -21,8 +22,6 @@ type SnapControl = {
   onSnapComplete: (currentSnap: number, nextSnap: number, collapsed: boolean) => void;
 };
 
-const MIDDLE_SNAP_OFFSET = 5;
-
 export const useSnapControl = ({
   animationKey,
   animation,
@@ -45,26 +44,22 @@ export const useSnapControl = ({
 
   const contentHeight = useTransform(animatedY, [0, swipeviewHeightPx], [swipeviewHeightPx, 0]);
 
-  const snapOverlayReference = useMemo(
-    () => [
-      getSnapToPixel(snaps[0]),
-      getSnapToPixel(snaps[1]) - MIDDLE_SNAP_OFFSET,
-      getSnapToPixel(snaps[2]),
-    ],
-    [getSnapToPixel, snaps],
-  );
-
-  const displayOverlay = useTransform(() =>
-    animatedY.get() === -1
-      ? 'none'
-      : transform(animatedY.get(), snapOverlayReference, ['none', 'none', 'block']),
-  );
-
-  const opacityOverlay = useTransform(() =>
-    animatedY.get() === -1
-      ? 0
-      : transform(animatedY.get(), snapOverlayReference, [0, 0, overlayOpacity]),
-  );
+  const snapOverlayReference = useMemo(() => {
+    if (snaps.length === 1) {
+      return [0, swipeviewHeightPx];
+    }
+    return [getSnapToPixel(snaps[HIDDEN_SNAP_INDEX]), getSnapToPixel(snaps[FULL_SNAP_INDEX])];
+  }, [getSnapToPixel, snaps, swipeviewHeightPx]);
+
+  const displayOverlay = useTransform(() => {
+    if (animatedY.get() === -1) return 'none';
+    return transform(animatedY.get(), snapOverlayReference, ['none', 'block']) as string;
+  });
+
+  const opacityOverlay = useTransform(() => {
+    if (animatedY.get() === -1) return 0;
+    return transform(animatedY.get(), snapOverlayReference, [0, overlayOpacity]) as number;
+  });
 
   const initSnapInPixels = snapsToPixels?.[initSnap];
   const getInitSnap = () => snaps?.[initSnap];

package/src/components/FloatingChat/hooks/useSnapSetup.ts

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { MotionValue, useMotionValue, useTransform } from 'framer-motion';
 import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
-import { ModalSheetControl } from '../components';
+import { MAX_SWIPEABLE_VIEW_HEIGHT, ModalSheetControl } from '../snapConstants';
 
 export interface UseSnapSetupReturn {
   modalSheetControl: React.RefObject<ModalSheetControl>;
@@ -20,24 +20,19 @@ export interface UseSnapSetupReturn {
   animationKey: MotionValue<number>;
   mobileHeaderHeight: MotionValue<number>;
 
-  snap43Percent: number;
-  snap100Percent: number;
-
-  shouldShowHeader: boolean;
   isFullView: boolean;
-  isPartialView: boolean;
 }
 
 export interface UseSnapSetupProps {
   isFloatingChatOpen: boolean;
-  partialViewDisabled?: boolean;
 }
 
-export const useSnapSetup = ({
-  isFloatingChatOpen,
-  partialViewDisabled,
-}: UseSnapSetupProps): UseSnapSetupReturn => {
-  const maxSwipeableViewHeight = 89;
+export { MAX_SWIPEABLE_VIEW_HEIGHT, HIDDEN_SNAP_INDEX, FULL_SNAP_INDEX } from '../snapConstants';
+
+const SNAPS_NO_AUTO_EXPAND = [0, 100];
+
+export const useSnapSetup = ({ isFloatingChatOpen }: UseSnapSetupProps): UseSnapSetupReturn => {
+  const maxSwipeableViewHeight = MAX_SWIPEABLE_VIEW_HEIGHT;
   const modalSheetControl = useRef<ModalSheetControl>(null);
   const { viewportWidth } = useCheckIsMobile();
 
@@ -49,35 +44,23 @@ export const useSnapSetup = ({
       ?.selectedCustomizeOption,
   );
 
-  const snaps = (() => {
-    if (partialViewDisabled) return shouldAutoExpand ? [100] : [0, 100];
-    return shouldAutoExpand ? [43, 100] : [0, 43, 100];
-  })();
-  const partialViewDisabledValue = shouldAutoExpand ? 0 : 1;
-  const initialSnap = partialViewDisabled ? partialViewDisabledValue : 1;
+  const snaps = shouldAutoExpand ? [100] : SNAPS_NO_AUTO_EXPAND;
+  const initialSnap = shouldAutoExpand ? 0 : 1;
 
   const [currentSnapPercentage, setCurrentSnapPercentage] = useState<number>(
-    snaps[initialSnap] || 43,
+    snaps[initialSnap] ?? 100,
   );
 
   const animationKey = useMotionValue(0);
 
-  const snap43Percent = ((100 - 43) / 100) * window.innerHeight;
-  const snap100Percent = 0;
-
-  const mobileHeaderHeight = useTransform(animationKey, [snap100Percent, snap43Percent], [56, 0]);
-
-  const [shouldShowHeader, setShouldShowHeader] = useState(false);
+  // Y=0 when full screen, Y=swipeviewHeightPx when closed (matches useSnapCalculator)
+  const swipeviewHeightPx = Math.floor(
+    (typeof window !== 'undefined' ? window.innerHeight : 0) * (maxSwipeableViewHeight / 100),
+  );
 
-  useEffect(() => {
-    const unsubscribe = animationKey.on('change', value => {
-      setShouldShowHeader(value < snap43Percent - 10);
-    });
-    return unsubscribe;
-  }, [animationKey, snap43Percent]);
+  const mobileHeaderHeight = useTransform(animationKey, [0, swipeviewHeightPx], [56, 0]);
 
   const isFullView = isMobile && currentSnapPercentage === 100;
-  const isPartialView = isMobile && currentSnapPercentage >= 0 && currentSnapPercentage <= 43;
 
   const handleSnapChange = (snapPercentage: number) => {
     setCurrentSnapPercentage(snapPercentage);
@@ -101,10 +84,6 @@ export const useSnapSetup = ({
     handleSnapChange,
     animationKey,
     mobileHeaderHeight,
-    snap43Percent,
-    snap100Percent,
-    shouldShowHeader,
     isFullView,
-    isPartialView,
   };
 };

package/src/components/FloatingChat/snapConstants.ts

@@ -0,0 +1,7 @@
+export const MAX_SWIPEABLE_VIEW_HEIGHT = 89;
+export const HIDDEN_SNAP_INDEX = 0;
+export const FULL_SNAP_INDEX = 1;
+
+export interface ModalSheetControl {
+  jumpToSnap: (snapIndex: number) => void;
+}

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -21,6 +21,7 @@ import { resolveTheme } from '../utils/resolveTheme';
 import { SparkleIconColor, WelcomeMessage } from '../WelcomeMessage';
 import { FullPageSAComponents } from './components';
 import { useGetFooterStyles } from './hooks/useGetFooterStyles';
+import { useGetMessagesStyles } from './hooks/useGetMessagesStyles';
 import { useIsMobile } from './hooks/useIsMobile';
 
 interface FullPageSalesAgentProps {
@@ -44,7 +45,8 @@ export const FullPageSalesAgent = ({
   const salesAgentData = useSalesAgent(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT);
   const [query, setQuery] = useState('');
   const chatMessagesRef = useRef<HTMLDivElement>(null);
-  const { footerStyles } = useGetFooterStyles();
+  const { footerStyles, footerClasses } = useGetFooterStyles();
+  const { messageClasses } = useGetMessagesStyles();
   const { isMobile } = useIsMobile();
   const { trackWidgetInteraction } = useWidgetInteraction();
   const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
@@ -135,7 +137,7 @@ export const FullPageSalesAgent = ({
 
   const footer = (
     <ChatFooter
-      className="envive-tw-bg-background-light"
+      className={footerClasses}
       style={footerStyles}
       theme={resolvedTheme}
       isScrolled={isMobile ? isFloatingLayout : false}
@@ -177,6 +179,7 @@ export const FullPageSalesAgent = ({
 
   const chatMessages = (
     <FloatingChatComponents.ChatMessages
+      className={messageClasses}
       theme={resolvedTheme}
       ref={chatMessagesRef}
       isLoading={isPendingResponse && !isResponseStreaming}

package/src/components/FullPageSalesAgent/components/Layout.tsx

@@ -5,6 +5,7 @@ import { Stack } from '../../Stack';
 import { useGetContainerStyles } from '../hooks/useGetContainerStyles';
 import { useGetFooterStyles } from '../hooks/useGetFooterStyles';
 import { useGetScrollContentStyles } from '../hooks/useGetScrollContentStyles';
+import { useIsMobile } from '../hooks/useIsMobile';
 
 export interface LayoutProps {
   theme: Theme;
@@ -31,6 +32,7 @@ export const Layout = ({
 }: LayoutProps) => {
   const hasWelcomeMessage = isValidElement(welcomeMessage);
   const hasAnswerSuggestions = isValidElement(answerSuggestions);
+  const { isMobile } = useIsMobile();
   const { contentClasses, messageContainerClasses } = useGetScrollContentStyles();
   const { footerContainerClasses } = useGetFooterStyles();
   const { containerClasses, containerStyles } = useGetContainerStyles({
@@ -59,7 +61,7 @@ export const Layout = ({
             (!hasWelcomeMessage || (hasWelcomeMessage && theme === Theme.STANDARD)) &&
               !hasAnswerSuggestions &&
               'envive-tw-pb-4',
-            'envive-tw-pt-4',
+            isMobile ? 'envive-tw-pt-4' : 'envive-tw-pt-6',
           )}
         >
           {chatMessages}

package/src/components/FullPageSalesAgent/hooks/useGetFooterStyles.ts

@@ -6,12 +6,17 @@ export const useGetFooterStyles = () => {
     ? { boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.2)', borderWidth: '1px' }
     : null;
 
+  const footerClasses = isMobile
+    ? 'envive-tw-rounded-t-[var(--envive-global-custom-border-radius)]'
+    : 'envive-tw-rounded-[var(--envive-global-custom-border-radius)]';
+
   const footerContainerClasses = isMobile
-    ? 'envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]'
-    : 'envive-tw-pb-5';
+    ? 'envive-tw-z-10 envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]'
+    : 'envive-tw-z-10 envive-tw-absolute envive-tw-bottom-5 envive-tw-left-[calc((100vw-768px)/2)] envive-tw-right-[calc((100vw-768px)/2)] envive-tw-max-w-[768px]';
 
   return {
     footerStyles,
+    footerClasses,
     footerContainerClasses,
   };
 };

package/src/components/FullPageSalesAgent/hooks/useGetMessagesStyles.ts

@@ -0,0 +1,11 @@
+import { useIsMobile } from './useIsMobile';
+
+export const useGetMessagesStyles = () => {
+  const { isMobile } = useIsMobile();
+
+  const messageClasses = !isMobile ? '!envive-tw-gap-6' : '';
+
+  return {
+    messageClasses,
+  };
+};

package/src/components/FullPageSalesAgent/hooks/useGetScrollContentStyles.ts

@@ -5,10 +5,14 @@ export const useGetScrollContentStyles = () => {
   const { isMobile } = useIsMobile();
   const contentClasses = classNames({
     'envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out': true,
+    'envive-tw-mb-5': !isMobile,
     'envive-tw-pb-[131px]': isMobile,
+    'envive-tw-pb-[150px]': !isMobile,
   });
 
-  const messageContainerClasses = !isMobile ? 'envive-tw-pt-4' : null;
+  const messageContainerClasses = !isMobile
+    ? 'envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-mt-4 envive-tw-overflow-hidden'
+    : 'envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-mx-4 envive-tw-overflow-hidden';
 
   return {
     contentClasses,

package/src/components/MarkdownProcessor/MarkdownProcessor.tsx

@@ -21,7 +21,7 @@ export const MarkdownProcessor = ({
       a: createMarkdownLinkComponent({ onLinkClick }),
       p: createMarkdownParagraphComponent({ clampParagraphs, textColor, textVariant }),
     }),
-    [clampParagraphs, textColor, textVariant],
+    [clampParagraphs, textColor, textVariant, onLinkClick],
   );
 
   return <ReactMarkdown components={components}>{processedContent}</ReactMarkdown>;

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

@@ -12,13 +12,13 @@ vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
   const urlRegex = /(https?:\/\/[^\s]+)/g;
   return {
     MarkdownProcessor: function MockMarkdownProcessor({ content }: { content: string }) {
-      const matches = [...content.matchAll(urlRegex)];
+      const matches = Array.from(content.matchAll(urlRegex));
       if (matches.length === 0) {
         return createElement('p', null, content);
       }
       const nodes: ReactNode[] = [];
       let lastIndex = 0;
-      matches.forEach((m: RegExpMatchArray, i: number) => {
+      matches.forEach((m: RegExpMatchArray) => {
         const url = m[0];
         const index = m.index ?? 0;
         nodes.push(content.slice(lastIndex, index));
@@ -26,7 +26,7 @@ vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
           createElement(
             'span',
             {
-              key: i,
+              key: `link-${index}-${url}`,
               role: 'button',
               'aria-label': `${url} (opens in new tab)`,
               className: 'hover:envive-tw-underline',

package/src/components/ProductCard/ProductCard.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { Theme } from '../Tokens';
+import { TypographyColor } from '../Typography/types';
 import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextField } from '../WidgetTextField';
 import { ProductCardWidgetComponents } from './components';
 import { ProductCardProps } from './types';
-import { TypographyColor } from '../Typography/types';
 
 export const ProductCard = ({
   theme = Theme.GLOBAL_CUSTOM,
@@ -21,6 +21,12 @@ export const ProductCard = ({
   textTransition,
   loop,
   onSelect,
+  onDrag,
+  onHover,
+  onMouseDown,
+  onMouseUp,
+  onTouchStart,
+  onTouchEnd,
   onInputClick,
 }: ProductCardProps) => {
   const resolvedTheme = resolveTheme(theme);
@@ -44,6 +50,12 @@ export const ProductCard = ({
         prompts={prompts}
         promptButtonType={promptButtonType}
         onSelect={onSelect}
+        onDrag={onDrag}
+        onHover={onHover}
+        onMouseDown={onMouseDown}
+        onMouseUp={onMouseUp}
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
       />
       <WidgetTextField
         theme={resolvedTheme}

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

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Theme } from '../../../../tokens/theme/theme';
 import { PromptButtonVariant } from '../../PromptButton';
 import { ProductCard } from '../ProductCard';
@@ -73,6 +73,22 @@ describe('ProductCard', () => {
   });
 
   describe('Callback handlers', () => {
+    it('should call onSelect when a prompt is clicked', () => {
+      const handleSelect = vi.fn();
+      render(
+        <ProductCard
+          {...defaultProps}
+          onSelect={handleSelect}
+        />,
+      );
+
+      const promptButton = screen.getByText('Prompt 1');
+      promptButton.click();
+
+      expect(handleSelect).toHaveBeenCalledTimes(1);
+      expect(handleSelect).toHaveBeenCalledWith('Prompt 1');
+    });
+
     it('should call onInputClick when input is clicked', () => {
       const handleInputClick = vi.fn();
       render(
@@ -88,6 +104,62 @@ describe('ProductCard', () => {
       expect(handleInputClick).toHaveBeenCalledTimes(1);
     });
 
+    it('should call onHover when a prompt is hovered', () => {
+      const handleHover = vi.fn();
+      render(
+        <ProductCard
+          {...defaultProps}
+          onHover={handleHover}
+        />,
+      );
+
+      const promptButton = screen.getByText('Prompt 1');
+      fireEvent.mouseOver(promptButton);
+
+      expect(handleHover).toHaveBeenCalledTimes(1);
+      expect(handleHover).toHaveBeenCalledWith('Prompt 1');
+    });
+
+    it('should call onMouseDown and onMouseUp when interacting with a prompt via mouse', () => {
+      const handleMouseDown = vi.fn();
+      const handleMouseUp = vi.fn();
+      render(
+        <ProductCard
+          {...defaultProps}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
+        />,
+      );
+
+      const promptButton = screen.getByText('Prompt 1');
+      fireEvent.mouseDown(promptButton);
+      fireEvent.mouseUp(promptButton);
+
+      expect(handleMouseDown).toHaveBeenCalledTimes(1);
+      expect(handleMouseDown).toHaveBeenCalledWith('Prompt 1');
+      expect(handleMouseUp).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onTouchStart and onTouchEnd when interacting with a prompt via touch', () => {
+      const handleTouchStart = vi.fn();
+      const handleTouchEnd = vi.fn();
+      render(
+        <ProductCard
+          {...defaultProps}
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+        />,
+      );
+
+      const promptButton = screen.getByText('Prompt 1');
+      fireEvent.touchStart(promptButton);
+      fireEvent.touchEnd(promptButton);
+
+      expect(handleTouchStart).toHaveBeenCalledTimes(1);
+      expect(handleTouchStart).toHaveBeenCalledWith('Prompt 1');
+      expect(handleTouchEnd).toHaveBeenCalledTimes(1);
+    });
+
     it('should render prompts in carousel', () => {
       render(
         <ProductCard

package/src/components/ProductCard/components/Carousel.tsx

@@ -9,18 +9,30 @@ export const Carousel = ({
   prompts,
   promptButtonType,
   onSelect,
+  onDrag,
+  onHover,
+  onMouseDown,
+  onMouseUp,
+  onTouchStart,
+  onTouchEnd,
 }: CarouselProps) => {
   const resolvedTheme = resolveTheme(theme);
   const { carouselClasses } = useGetCarouselProperties();
   return (
     <PromptCarousel
       className={carouselClasses}
-      handleButtonClick={onSelect}
       id={carouselId}
       promptCarouselRows={PromptCarouselRows.ALWAYS_TWO}
       theme={resolvedTheme}
       promptButtonType={promptButtonType}
       promptButtonTexts={prompts}
+      handleButtonClick={onSelect}
+      handleButtonDrag={onDrag}
+      handleButtonHover={onHover}
+      handleButtonMouseDown={onMouseDown}
+      handleButtonMouseUp={onMouseUp}
+      handleButtonTouchStart={onTouchStart}
+      handleButtonTouchEnd={onTouchEnd}
     />
   );
 };

package/src/components/ProductCard/types/index.ts

@@ -18,6 +18,40 @@ export interface CarouselProps {
    * Callback function invoked when a prompt is selected.
    */
   onSelect: (prompt: string) => void;
+  /**
+   * Callback invoked when the user drags/swipes the carousel.
+   * Typically used for analytics or to pause other interactions while dragging.
+   */
+  onDrag?: () => void;
+  /**
+   * Callback invoked when the user hovers a specific prompt item.
+   *
+   * @param prompt The prompt currently being hovered.
+   */
+  onHover?: (prompt: string) => void;
+  /**
+   * Callback invoked when the user presses down on a specific prompt item.
+   * Useful for distinguishing a click/tap from a drag and for interaction tracking.
+   *
+   * @param prompt The prompt the user pressed down on.
+   */
+  onMouseDown?: (prompt: string) => void;
+  /**
+   * Callback invoked when the user releases the mouse button after interacting
+   * with the carousel or a prompt item.
+   */
+  onMouseUp?: () => void;
+  /**
+   * Callback invoked when the user starts a touch gesture on a specific prompt.
+   *
+   * @param prompt The prompt the user touched.
+   */
+  onTouchStart?: (prompt: string) => void;
+  /**
+   * Callback invoked when the user ends a touch gesture after interacting with
+   * the carousel or a prompt item.
+   */
+  onTouchEnd?: () => void;
 }
 
 /**

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

@@ -17,7 +17,9 @@ type PromptButtonsCarouselProps = {
   handlePromptButtonTouchEnd?: () => void;
 };
 
-function distributeInThreeRows<T>(items: T[]): [T[], T[], T[]] {
+function distributeInThreeRows<T>(
+  items: [number, T][],
+): [[number, T][], [number, T][], [number, T][]] {
   const n = items.length;
   const perRow = [1, 1, 1];
   let remaining = Math.max(0, n - 3);
@@ -55,13 +57,13 @@ export const PromptButtonsCarousel = ({
     ? ['Loading 1...', 'Loading 2...', 'Loading 3...']
     : promptButtonsTexts || [];
 
-  const renderButton = (text: string) => (
+  const renderButton = ([index, text]: [number, string]) => (
     <div
-      key={text}
+      key={`${text}-${index}`}
       className="envive-tw-flex-shrink-0"
     >
       <PromptButton
-        id={`prompt-button-${text}`}
+        id={`prompt-button-${index}`}
         isLoading={isLoading}
         label={text}
         variant={promptButtonType}
@@ -77,18 +79,19 @@ export const PromptButtonsCarousel = ({
     </div>
   );
 
+  const indexedTexts: [number, string][] = Array.from(promptButtonsTextsFinal.entries());
+
   if (isMobile) {
-    const [row0, row1, row2] = distributeInThreeRows(promptButtonsTextsFinal);
-    const rows = [row0, row1, row2].filter(row => row.length > 0);
+    const rows = distributeInThreeRows(indexedTexts).filter(row => row.length > 0);
     return (
       <Stack
         direction="column"
         gap="4"
         className="envive-tw-w-full"
       >
-        {rows.map(row => (
+        {rows.map((row, rowIndex) => (
           <Stack
-            key={row.join('-')}
+            key={rowIndex}
             direction="row"
             gap="4"
             className="envive-tw-w-full envive-tw-flex-nowrap"
@@ -100,5 +103,5 @@ export const PromptButtonsCarousel = ({
     );
   }
 
-  return <>{promptButtonsTextsFinal.map(renderButton)}</>;
+  return <>{indexedTexts.map(renderButton)}</>;
 };

package/src/components/TypingAnimation/TypingAnimation.tsx

@@ -1,16 +1,16 @@
 import { useCallback, useMemo } from 'react';
 import { AnimatedText } from '../AnimatedText';
-import { Typography, TypographyColor } from '../Typography';
+import { PromptButtonVariant } from '../PromptButton/types';
 import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
+import { Stack } from '../Stack';
+import { Theme } from '../Tokens';
+import { Typography, TypographyColor } from '../Typography';
+import { useAnimatedTextMinHeight } from '../utils/useAnimatedTextMinHeight';
 import { WidgetTextField } from '../WidgetTextField';
 import { WidgetWrapperVariant } from '../WidgetWrapper';
-import { PromptButtonVariant } from '../PromptButton/types';
-import { Theme } from '../Tokens';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle';
-import type { TypingAnimationProps } from './types';
 import { useGetTypographyVariant } from './hooks/useGetTypographyVariant';
-import { useAnimatedTextMinHeight } from '../utils/useAnimatedTextMinHeight';
-import { Stack } from '../Stack';
+import type { TypingAnimationProps } from './types';
 
 export const TypingAnimation = ({
   baseProps,
@@ -41,7 +41,16 @@ export const TypingAnimation = ({
     isLoading = false,
   } = widgetStyleProps || {};
 
-  const { handleButtonClick, handleTextFieldClick } = widgetEventProps || {};
+  const {
+    handleButtonClick,
+    handleButtonDrag,
+    handleButtonHover,
+    handleButtonMouseDown,
+    handleButtonMouseUp,
+    handleButtonTouchStart,
+    handleButtonTouchEnd,
+    handleTextFieldClick,
+  } = widgetEventProps || {};
   const typographyVariant = useGetTypographyVariant(theme);
   const { measuringRef, minHeight } = useAnimatedTextMinHeight(animatedTextSequence ?? []);
 
@@ -153,6 +162,12 @@ export const TypingAnimation = ({
             promptButtonType={promptButtonType}
             promptCarouselRows={promptCarouselRows}
             handleButtonClick={handleButtonClick}
+            handleButtonDrag={handleButtonDrag}
+            handleButtonHover={handleButtonHover}
+            handleButtonMouseDown={handleButtonMouseDown}
+            handleButtonMouseUp={handleButtonMouseUp}
+            handleButtonTouchStart={handleButtonTouchStart}
+            handleButtonTouchEnd={handleButtonTouchEnd}
             promptButtonTexts={promptButtonTexts}
           />
         )}

package/src/components/TypingAnimation/types/index.ts

@@ -133,6 +133,35 @@ export type WidgetEventProps = {
    */
   handleButtonClick?: (text: string) => void;
 
+  /**
+   * Callback function invoked when the prompt buttons carousel is dragged.
+   * Useful for tracking drag-to-scroll interactions.
+   */
+  handleButtonDrag?: () => void;
+  /**
+   * Callback function invoked when the user hovers over a prompt button.
+   * Receives the hovered button's text as a parameter.
+   */
+  handleButtonHover?: (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.
+   */
+  handleButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released after pressing a prompt button.
+   */
+  handleButtonMouseUp?: () => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * Receives the touched button's text as a parameter.
+   */
+  handleButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends after touching a prompt button.
+   */
+  handleButtonTouchEnd?: () => void;
+
   /**
    * Callback function invoked when the TextField is clicked.
    */