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

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/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.
    */

package/src/components/WidgetTextField/components/Icon.tsx

@@ -86,12 +86,12 @@ export const Icon = ({ variant, theme, textColor }: IconProps) => {
     }
     return (
       <CustomIcon
-        IconComponent={<SendMinimalist />}
+        IconComponent={<SvgSendModern />}
         className="envive-tw-h-6 envive-tw-w-6"
         stroke={
           textColor !== TypographyColor.TEXT_SECONDARY
             ? `var(--envive-colors-${textColor})`
-            : 'var(--envive-colors-text-light)'
+            : 'var(--envive-colors-border-medium)'
         }
       />
     );