@envive-ai/react-toolkit-v3 0.3.22 → 0.3.23

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

@@ -59,6 +59,10 @@ export type PromptButtonCarouselWithImageProps = {
    * Whether to hide the text field.
    */
   hideTextField?: boolean;
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
   /**
    * Callback function invoked when a prompt button is clicked.
    * Receives the button's text as a parameter.
@@ -97,4 +101,12 @@ export type PromptButtonCarouselWithImageProps = {
    * Receives the placeholder text as a parameter.
    */
   handleTextFieldClick: (text: string) => void;
+  /**
+   * Callback function invoked when voice transcription starts.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };

package/src/components/ReviewCard/components/Rating.tsx

@@ -36,7 +36,6 @@ export const Rating = ({ rating, theme, style }: RatingProps) => {
         variant={TypographyVariant.B3_RG}
         color={TypographyColor.TEXT_PRIMARY}
         style={style}
-        noWrap
       >
         {formattedRating}
       </Typography>

package/src/components/SocialProof/SocialProof.tsx

@@ -44,6 +44,7 @@ export const SocialProof = ({
     images,
     logoSrc,
     titleLabel,
+    voiceInputEnabled,
   } = widgetContentProps ?? {};
 
   const numberOfCustomersText = useSocialProofCount({
@@ -63,6 +64,8 @@ export const SocialProof = ({
     handleSecondaryButtonTouchStart,
     handleSecondaryButtonTouchEnd,
     handleTextFieldClick,
+    onTranscriptionStarted,
+    onTranscriptionCompleted,
   } = widgetEventProps ?? {};
 
   const finalTheme = resolveTheme(theme);
@@ -120,6 +123,9 @@ export const SocialProof = ({
       placeholder={textFieldPlaceholderText}
       handleTextFieldClick={handleTextFieldClick}
       iconVariant={hasDynamicLayout ? IconVariant.DEFAULT : IconVariant.SEARCH}
+      voiceInputEnabled={voiceInputEnabled}
+      onTranscriptionStarted={onTranscriptionStarted}
+      onTranscriptionCompleted={onTranscriptionCompleted}
     />
   );
 

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

@@ -531,4 +531,62 @@ describe('SocialProof', () => {
       expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
   });
+
+  describe('Voice input', () => {
+    it('should render with voiceInputEnabled set to true', async () => {
+      render(
+        <SocialProof
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: true,
+          }}
+          widgetStyleProps={{
+            hideTextField: false,
+            imageGalleryLayout: ImageGalleryLayout.FOUR_GRID,
+          }}
+          widgetEventProps={{ handleTextFieldClick: vi.fn() }}
+        />,
+      );
+      await waitFor(() => {
+        expect(screen.getByText('What can I help you find?')).toBeInTheDocument();
+      });
+    });
+
+    it('should render with voiceInputEnabled set to false', () => {
+      render(
+        <SocialProof
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: false,
+          }}
+          widgetStyleProps={{
+            hideTextField: false,
+            imageGalleryLayout: ImageGalleryLayout.FOUR_GRID,
+          }}
+          widgetEventProps={{ handleTextFieldClick: vi.fn() }}
+        />,
+      );
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled undefined (default)', () => {
+      render(
+        <SocialProof
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: undefined,
+          }}
+          widgetStyleProps={{
+            hideTextField: false,
+            imageGalleryLayout: ImageGalleryLayout.FOUR_GRID,
+          }}
+          widgetEventProps={{ handleTextFieldClick: vi.fn() }}
+        />,
+      );
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
+    });
+  });
 });

package/src/components/SocialProof/components/Textfield.tsx

@@ -8,6 +8,9 @@ export type TextfieldProps = {
   placeholder: string;
   handleTextFieldClick: (text: string) => void;
   iconVariant?: IconVariant;
+  voiceInputEnabled?: boolean;
+  onTranscriptionStarted?: () => void;
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 
 export const Textfield = ({
@@ -15,6 +18,9 @@ export const Textfield = ({
   placeholder,
   handleTextFieldClick,
   iconVariant = IconVariant.DEFAULT,
+  voiceInputEnabled,
+  onTranscriptionStarted,
+  onTranscriptionCompleted,
 }: TextfieldProps) => {
   const finalTheme = resolveTheme(theme);
 
@@ -24,6 +30,9 @@ export const Textfield = ({
       placeholder={placeholder}
       iconVariant={iconVariant}
       onClick={() => handleTextFieldClick(placeholder)}
+      enableVoiceInput={voiceInputEnabled}
+      onTranscriptionStarted={onTranscriptionStarted}
+      onTranscriptionCompleted={onTranscriptionCompleted}
     />
   );
 };

package/src/components/SocialProof/index.ts

@@ -1,4 +1,4 @@
 export { SocialProof } from './SocialProof';
-export type { SocialProofProps } from './types/types';
+export type { SocialProofProps, WidgetEventProps } from './types/types';
 export { DynamicLayout, PageVariant, WidgetKind } from './types/types';
 export { useSocialProofCount } from './hooks';

package/src/components/SocialProof/types/types.ts

@@ -114,6 +114,11 @@ export type WidgetContentProps = {
    * - `FOUR_HORIZONTAL` and `FOUR_GRID`: require 4 images
    */
   images?: ImageGalleryImage[];
+
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
 };
 
 /**
@@ -281,6 +286,14 @@ export type WidgetEventProps = {
    * @param text - The placeholder text of the text field
    */
   handleTextFieldClick?: (text: string) => void;
+  /**
+   * Callback function invoked when voice transcription starts.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 
 /**

package/src/components/TextField/TextField.tsx

@@ -1,11 +1,14 @@
 import classNames from 'classnames';
+import { useCallback } from 'react';
 import { Theme } from '../../../tokens/theme/theme';
 import { resolveTheme } from '../utils/resolveTheme';
 import { TextFieldComponents } from './components';
+import { useGetMicButtonContainerProperties } from './hooks/useGetMicButtonContainerProperties';
 import { useGetSkeletonProperties } from './hooks/useGetSkeletonProperties';
 import { useTextFieldFocus } from './hooks/useTextFieldFocus';
 import { useTextFieldSubmit } from './hooks/useTextFieldSubmit';
 import { useTextFieldValue } from './hooks/useTextFieldValue';
+import { useVoiceInput } from './hooks/useVoiceInput';
 import type { TextFieldProps } from './types';
 
 /**
@@ -23,9 +26,13 @@ export const TextField = ({
   id,
   testId,
   className,
+  inputClassName,
   style,
   ariaLabel,
   isLoading = false,
+  enableVoiceInput = false,
+  onTranscriptionStarted,
+  onTranscriptionCompleted,
 }: TextFieldProps): JSX.Element => {
   const { currentValue, hasValue, handleChange, resetValue } = useTextFieldValue(
     controlledValue,
@@ -41,9 +48,30 @@ export const TextField = ({
     resetValue,
   );
 
+  const handleVoiceTranscript = useCallback(
+    (transcript: string) => {
+      resetValue();
+      handleChange(transcript);
+      onTranscriptionCompleted?.(transcript);
+    },
+    [handleChange, resetValue, onTranscriptionCompleted],
+  );
+
+  const {
+    isListening,
+    handleToggleListening,
+    handleAbortListening,
+    browserSupportsSpeechRecognition,
+  } = useVoiceInput({
+    onTranscriptionStarted,
+    onTranscriptionCompleted: handleVoiceTranscript,
+    disabled,
+  });
+
   const handleInternalFocus = () => {
     handleFocus();
     onFocus?.();
+    handleAbortListening();
   };
   const { skeletonClass } = useGetSkeletonProperties(isLoading);
 
@@ -60,6 +88,7 @@ export const TextField = ({
       onBlur={handleBlur}
       disabled={disabled || isLoading}
       ariaLabel={ariaLabel}
+      className={inputClassName}
     />
   );
 
@@ -73,11 +102,31 @@ export const TextField = ({
     />
   ) : null;
 
+  const { micButtonContainerClasses } = useGetMicButtonContainerProperties({
+    theme: resolvedTheme,
+    isListening,
+  });
+
+  const voiceInputButtonClassName = classNames(micButtonContainerClasses, skeletonClass);
+
+  const voiceInputButton =
+    enableVoiceInput && browserSupportsSpeechRecognition ? (
+      <TextFieldComponents.VoiceInputButton
+        theme={resolvedTheme}
+        isListening={isListening}
+        onToggleListening={handleToggleListening}
+        ariaLabel={ariaLabel}
+        isLoading={isLoading}
+        className={voiceInputButtonClassName}
+      />
+    ) : null;
+
   return (
     <TextFieldComponents.Layout
       theme={resolvedTheme}
       input={input}
       sendIcon={sendIcon}
+      voiceInputButton={voiceInputButton}
       isFocused={isFocused}
       hasValue={hasValue}
       disabled={disabled}

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

@@ -69,7 +69,7 @@ describe('TextField', () => {
           placeholder="Ask me anything..."
         />,
       );
-      const element = container.firstChild as HTMLElement;
+      const element = container.querySelector('.envive-tw-flex-1') as HTMLElement;
       expect(element).toHaveStyle({ marginTop: '20px' });
     });
   });
@@ -410,7 +410,7 @@ describe('TextField', () => {
           placeholder="Ask me anything..."
         />,
       );
-      const element = container.firstChild as HTMLElement;
+      const element = container.querySelector('.envive-tw-flex-1') as HTMLElement;
       expect(element.className).toContain('envive-tw-animate-pulse');
     });
 
@@ -422,7 +422,7 @@ describe('TextField', () => {
           placeholder="Ask me anything..."
         />,
       );
-      const element = container.firstChild as HTMLElement;
+      const element = container.querySelector('.envive-tw-flex-1') as HTMLElement;
       expect(element.className).toContain('envive-tw-h-[40px]');
     });
 

package/src/components/TextField/__tests__/VoiceInputButton.test.tsx

@@ -0,0 +1,175 @@
+/**
+ * VoiceInputButton Tests
+ *
+ * These tests validate the voice input functionality used by the VoiceInputButton component.
+ * The useVoiceInput hook handles speech recognition, including starting/stopping listening,
+ * managing mic permissions, and clearing previous transcriptions.
+ */
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useVoiceInput } from '../hooks/useVoiceInput';
+
+/**
+ * Mock setup using vi.hoisted() to create spies that can be referenced before the mock is called.
+ * This is necessary because vi.mock() is hoisted to the top of the file and needs these
+ * function references to be available at module evaluation time.
+ */
+const spies = vi.hoisted(() => ({
+  // Mock functions for SpeechRecognition API methods
+  mockStartListening: vi.fn(() => Promise.resolve()),
+  mockStopListening: vi.fn(() => Promise.resolve()),
+  mockAbortListening: vi.fn(() => Promise.resolve()),
+  // Mock for the resetTranscript function from useSpeechRecognition
+  mockResetTranscript: vi.fn(),
+}));
+
+/**
+ * Mock the react-speech-recognition module to control its behavior in tests.
+ * This allows us to:
+ * - Control whether the browser supports speech recognition
+ * - Control what transcript value is returned
+ * - Verify that SpeechRecognition methods are called correctly
+ */
+vi.mock('react-speech-recognition', () => ({
+  // The default export contains the static methods like startListening, stopListening, abortListening
+  default: {
+    startListening: spies.mockStartListening,
+    stopListening: spies.mockStopListening,
+    abortListening: spies.mockAbortListening,
+  },
+  // useSpeechRecognition hook provides transcript state and resetTranscript function
+  useSpeechRecognition: vi.fn(() => ({
+    transcript: '',
+    browserSupportsSpeechRecognition: true,
+    resetTranscript: spies.mockResetTranscript,
+  })),
+}));
+
+describe('useVoiceInput', () => {
+  // Reset mocks before each test to ensure clean state
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset the implementation to default successful behavior
+    spies.mockStartListening.mockImplementation(() => Promise.resolve());
+  });
+
+  describe('Basic initialization', () => {
+    it('should initialize with isListening as false', () => {
+      const { result } = renderHook(() => useVoiceInput({}));
+      // Voice input should not be active when the hook first mounts
+      expect(result.current.isListening).toBe(false);
+    });
+
+    it('should report browser supports speech recognition', () => {
+      const { result } = renderHook(() => useVoiceInput({}));
+      // Check if the browser has speech recognition support
+      expect(result.current.browserSupportsSpeechRecognition).toBe(true);
+    });
+  });
+
+  describe('Start listening', () => {
+    it('should start listening when button is clicked', async () => {
+      const { result } = renderHook(() => useVoiceInput({}));
+
+      await act(async () => {
+        // Call handleToggleListening to start listening
+        result.current.handleToggleListening();
+      });
+
+      // Verify that listening state changed to active
+      expect(result.current.isListening).toBe(true);
+    });
+
+    it('should delete previous transcription when starting to listen', async () => {
+      const { result } = renderHook(() => useVoiceInput({}));
+
+      await act(async () => {
+        result.current.handleToggleListening();
+      });
+
+      // Verify resetTranscript was called BEFORE starting new listening session
+      // This ensures previous transcription is cleared when starting fresh
+      expect(spies.mockResetTranscript).toHaveBeenCalled();
+    });
+  });
+
+  describe('Stop listening', () => {
+    it('should stop listening and call onTranscript with current transcript', async () => {
+      const onTranscriptionCompleted = vi.fn();
+
+      const { result } = renderHook(() =>
+        useVoiceInput({
+          onTranscriptionCompleted,
+        }),
+      );
+
+      // First toggle: start listening
+      await act(async () => {
+        result.current.handleToggleListening();
+      });
+
+      // Second toggle: stop listening - this should call onTranscript callback
+      await act(async () => {
+        result.current.handleToggleListening();
+      });
+
+      // Verify that stopListening was called to stop speech recognition
+      expect(spies.mockStopListening).toHaveBeenCalled();
+      // Verify that the onTranscript callback was called with current transcript
+      expect(onTranscriptionCompleted).toHaveBeenCalledWith('');
+    });
+  });
+
+  describe('Mic permission handling', () => {
+    it('should handle mic permission denied error', async () => {
+      // Configure the mock to throw an error simulating permission denial
+      spies.mockStartListening.mockImplementationOnce(() => {
+        throw new Error('Permission denied');
+      });
+
+      const { result } = renderHook(() => useVoiceInput({}));
+
+      await act(async () => {
+        result.current.handleToggleListening();
+      });
+
+      // The hook should catch the error and set isListening back to false
+      expect(result.current.isListening).toBe(false);
+    });
+
+    it('should not start listening when disabled', () => {
+      // When disabled prop is true, the hook should not attempt to start listening
+      const { result } = renderHook(() => useVoiceInput({ disabled: true }));
+
+      result.current.handleToggleListening();
+
+      // isListening should remain false
+      expect(result.current.isListening).toBe(false);
+      // Verify that startListening was never called
+      expect(spies.mockStartListening).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Abort listening', () => {
+    it('should abort listening and reset state', async () => {
+      const { result } = renderHook(() => useVoiceInput({}));
+
+      // Start listening first
+      await act(async () => {
+        result.current.handleToggleListening();
+      });
+
+      expect(result.current.isListening).toBe(true);
+
+      // Call abort to stop listening immediately without collecting transcript
+      await act(async () => {
+        result.current.handleAbortListening();
+      });
+
+      // Verify abortListening was called to immediately stop speech recognition
+      expect(spies.mockAbortListening).toHaveBeenCalled();
+      // Verify state is reset to false
+      expect(result.current.isListening).toBe(false);
+    });
+  });
+});

package/src/components/TextField/components/Layout.tsx

@@ -7,6 +7,7 @@ type LayoutProps = {
   theme: Theme;
   input: React.ReactNode;
   sendIcon: React.ReactNode;
+  voiceInputButton?: React.ReactNode;
   isFocused: boolean;
   hasValue: boolean;
   disabled?: boolean;
@@ -20,6 +21,7 @@ export const Layout = ({
   theme,
   input,
   sendIcon,
+  voiceInputButton,
   isFocused,
   hasValue,
   disabled = false,
@@ -37,29 +39,34 @@ export const Layout = ({
     containerHoverClasses,
     containerDisabledClasses,
   } = useGetContainerProperties({ theme });
-  const { isActive, shouldShowFocus, shouldShowHover } = getLayoutStateProperties(
+  const { isActive, shouldShowFocus, shouldShowHover, containerClasses } = getLayoutStateProperties(
+    theme,
     hasValue,
     isFocused,
     disabled,
   );
 
   return (
-    <div
-      id={id}
-      data-testid={testId}
-      className={classNames(
-        containerLayoutClasses,
-        containerDefaultClasses,
-        isActive ? containerBorderActiveClasses : containerBorderClasses,
-        shouldShowFocus && containerFocusClasses,
-        shouldShowHover && containerHoverClasses,
-        disabled && containerDisabledClasses,
-        className,
-      )}
-      style={style}
-    >
-      {input}
-      {sendIcon}
+    <div className={containerClasses}>
+      <div
+        id={id}
+        data-testid={testId}
+        className={classNames(
+          'envive-tw-flex-1',
+          containerLayoutClasses,
+          containerDefaultClasses,
+          isActive ? containerBorderActiveClasses : containerBorderClasses,
+          shouldShowFocus && containerFocusClasses,
+          shouldShowHover && containerHoverClasses,
+          disabled && containerDisabledClasses,
+          className,
+        )}
+        style={style}
+      >
+        {input}
+        {sendIcon}
+      </div>
+      {voiceInputButton}
     </div>
   );
 };

package/src/components/TextField/components/VoiceInputButton.tsx

@@ -0,0 +1,69 @@
+import Mic from '@envive-ai/react-icons/Mic';
+import MicThin from '@envive-ai/react-icons/MicThin';
+import Stop from '@envive-ai/react-icons/Stop';
+import StopSharp from '@envive-ai/react-icons/StopSharp';
+import StopThin from '@envive-ai/react-icons/StopThin';
+import { Theme } from '../../../../tokens/theme/theme';
+
+type VoiceInputButtonProps = {
+  theme: Theme;
+  isListening?: boolean;
+  onToggleListening?: () => void;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  ariaLabel?: string;
+  isLoading?: boolean;
+};
+
+export const VoiceInputButton = ({
+  theme,
+  isListening,
+  onToggleListening,
+  disabled = false,
+  className,
+  style,
+  ariaLabel,
+  isLoading = false,
+}: VoiceInputButtonProps): JSX.Element => {
+  const getMicIcon = (iconTheme: Theme) => {
+    switch (iconTheme) {
+      case Theme.MODERN:
+        return MicThin;
+      default:
+        return Mic;
+    }
+  };
+
+  const getStopIcon = (iconTheme: Theme) => {
+    switch (iconTheme) {
+      case Theme.MODERN:
+        return StopThin;
+      case Theme.MINIMAL:
+        return StopSharp;
+      default:
+        return Stop;
+    }
+  };
+
+  const MicIcon = getMicIcon(theme);
+  const StopIcon = getStopIcon(theme);
+
+  return (
+    <button
+      type="button"
+      onClick={onToggleListening}
+      disabled={disabled || isLoading}
+      className={className}
+      style={style}
+      aria-label={ariaLabel}
+      tabIndex={disabled || isLoading ? -1 : 0}
+    >
+      {isListening ? (
+        <StopIcon className="envive-tw-h-[24px]" />
+      ) : (
+        <MicIcon className="envive-tw-h-[24px]" />
+      )}
+    </button>
+  );
+};

package/src/components/TextField/components/index.ts

@@ -1,9 +1,11 @@
 import { Layout } from './Layout';
 import { Input } from './Input';
 import { SendIcon } from './SendIcon';
+import { VoiceInputButton } from './VoiceInputButton';
 
 export const TextFieldComponents = {
   Layout,
   Input,
   SendIcon,
+  VoiceInputButton,
 };

package/src/components/TextField/hooks/useGetMicButtonContainerProperties.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { Theme } from '../../../../tokens/theme/theme';
+
+export type UseGetMicButtonContainerPropertiesProps = {
+  theme: Theme;
+  isListening?: boolean;
+};
+
+export type MicButtonContainerProperties = {
+  micButtonContainerClasses: string;
+};
+
+export const useGetMicButtonContainerProperties = ({
+  theme,
+  isListening = false,
+}: UseGetMicButtonContainerPropertiesProps): MicButtonContainerProperties => {
+  const micButtonContainerClasses = useMemo(() => {
+    const micButtonContainerClassesMap: Record<Theme, string> = {
+      [Theme.STANDARD]:
+        'envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-global-custom envive-tw-border-border-light hover:envive-tw-border-border-dark',
+      [Theme.MODERN]:
+        'envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-[4px] envive-tw-border-border-light hover:envive-tw-border-border-dark',
+      [Theme.MINIMAL]:
+        'envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border-b envive-tw-border-solid  envive-tw-border-b-border-medium hover:envive-tw-border-b-border-dark',
+      [Theme.GLOBAL_CUSTOM]:
+        'envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-global-custom envive-tw-border-border-light hover:envive-tw-border-border-dark',
+    };
+
+    const baseClasses =
+      micButtonContainerClassesMap[theme] ?? micButtonContainerClassesMap[Theme.STANDARD];
+
+    return isListening
+      ? `${baseClasses} envive-tw-bg-[--envive-colors-text-accent]`
+      : `${baseClasses} envive-tw-bg-background-light`;
+  }, [theme, isListening]);
+
+  return { micButtonContainerClasses };
+};

package/src/components/TextField/hooks/useGetSkeletonProperties.ts

@@ -4,7 +4,7 @@ export const useGetSkeletonProperties = (isLoading?: boolean) => {
   const skeletonClass = useMemo(() => {
     if (!isLoading) return undefined;
 
-    return 'envive-tw-animate-pulse';
+    return 'envive-tw-animate-pulse envive-tw-h-[40px]';
   }, [isLoading]);
 
   return { skeletonClass };