@envive-ai/react-toolkit-v3 0.3.26 → 0.3.28

package/src/components/SocialProof/SocialProof.tsx

@@ -36,6 +36,7 @@ export const SocialProof = ({
   } = widgetStyleProps ?? {};
 
   const {
+    numberOfCustomersText,
     customerQueryText,
     primaryButtonText,
     secondaryButtonTitleText,
@@ -47,9 +48,10 @@ export const SocialProof = ({
     voiceInputEnabled,
   } = widgetContentProps ?? {};
 
-  const numberOfCustomersText = useSocialProofCount({
+  const socialProofCounter = useSocialProofCount({
     pageVariant,
     countKey,
+    numberOfCustomersText,
     id,
   });
 
@@ -91,7 +93,7 @@ export const SocialProof = ({
   const headline = (
     <SocialProofComponents.Headline
       theme={finalTheme}
-      socialProofCounter={numberOfCustomersText}
+      socialProofCounter={socialProofCounter}
       socialProofHeadline={customerQueryText}
       primaryPromptButtonText={primaryButtonText}
       primaryPromptButtonVariant={primaryButtonVariant}

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

@@ -48,7 +48,7 @@ export const Headline = forwardRef<HTMLDivElement, HeadlineProps>(
       <Stack
         ref={ref}
         gap="4"
-        className={classNames('envive-tw-h-fit', className)}
+        className={classNames('envive-tw-h-fit envive-tw-overflow-x-auto', className)}
       >
         <Stack gap="2">
           <Container>

package/src/components/SocialProof/components/LayoutSingle.tsx

@@ -1,12 +1,11 @@
 import { cloneElement } from 'react';
-import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
 import { ImageGalleryImage, ImageGalleryLayout } from '../../ImageGallery/types/types';
-import { useGetContentSize } from '../../utils/useGetContentSize';
-import { ImageGallery } from './ImageGallery';
 import { Stack } from '../../Stack';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+import { useGetContentSize } from '../../utils/useGetContentSize';
 import { DynamicLayout } from '../types/types';
-import { calculateWidthImageGallery } from '../utils/functions';
 import { HeadlineProps } from './Headline';
+import { ImageGallery } from './ImageGallery';
 
 export type LayoutSingleProps = {
   dynamicLayout: DynamicLayout;
@@ -35,7 +34,9 @@ export const LayoutSingle = ({
   const { height, ref } = useGetContentSize({
     heightDefault: 245,
   });
-  const imageGalleryWidth = calculateWidthImageGallery(height, 1, 1);
+
+  // For single image, image width must be fixed 80px.
+  const imageGalleryWidth = 80;
 
   return (
     <Stack

package/src/components/SocialProof/hooks/useSocialProofCount.ts

@@ -9,13 +9,16 @@ type SocialProofCount = Record<string, Record<string, number>>;
 
 interface UseSocialProofCountParams {
   pageVariant?: PageVariant;
+  numberOfCustomersText?: string;
   countKey?: string;
   id?: string;
 }
+const DEFAULT_CUSTOMER_TEXT = '{count} customers';
 
 export const useSocialProofCount = ({
   pageVariant,
   countKey,
+  numberOfCustomersText = DEFAULT_CUSTOMER_TEXT,
   id,
 }: UseSocialProofCountParams): string => {
   const [customerCount, setCustomerCount] = useState<number>(() =>
@@ -63,5 +66,9 @@ export const useSocialProofCount = ({
     }
   }, [pageVariant, countKey, id]);
 
-  return `${customerCount} customers`;
+  // For safety ensure that the replacement string occurs in the string for now
+  const finalCustomerText = numberOfCustomersText.includes('{count}')
+    ? numberOfCustomersText
+    : DEFAULT_CUSTOMER_TEXT;
+  return finalCustomerText.replace('{count}', customerCount.toString());
 };

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

@@ -82,6 +82,12 @@ export type WidgetContentProps = {
    */
   customerQueryText?: string;
 
+  /**
+   * Text displaying how many customers asked the customerQueryText question (e.g., "123 customers")
+   * Utilizes replacement to replace the value {count} with the replaced value
+   */
+  numberOfCustomersText?: string;
+
   /**
    * Text label for the primary prompt button.
    * Displayed prominently in the headline section.

package/src/components/TextField/TextField.tsx

@@ -8,6 +8,7 @@ import { useGetSkeletonProperties } from './hooks/useGetSkeletonProperties';
 import { useTextFieldFocus } from './hooks/useTextFieldFocus';
 import { useTextFieldSubmit } from './hooks/useTextFieldSubmit';
 import { useTextFieldValue } from './hooks/useTextFieldValue';
+import { usePlaceholderAnimation } from './hooks/usePlaceholderAnimation';
 import { useVoiceInput } from './hooks/useVoiceInput';
 import type { TextFieldProps } from './types';
 
@@ -30,10 +31,13 @@ export const TextField = ({
   style,
   ariaLabel,
   isLoading = false,
+  multiline = false,
   enableVoiceInput = false,
   onTranscriptionStarted,
   onTranscriptionCompleted,
 }: TextFieldProps): JSX.Element => {
+  const resolvedPlaceholder = usePlaceholderAnimation(placeholder);
+
   const { currentValue, hasValue, handleChange, resetValue } = useTextFieldValue(
     controlledValue,
     onChange,
@@ -48,7 +52,7 @@ export const TextField = ({
     resetValue,
   );
 
-  const handleVoiceTranscript = useCallback(
+  const handleVoiceTranscriptCompleted = useCallback(
     (transcript: string) => {
       resetValue();
       handleChange(transcript);
@@ -57,6 +61,13 @@ export const TextField = ({
     [handleChange, resetValue, onTranscriptionCompleted],
   );
 
+  const handleVoiceTranscription = useCallback(
+    (transcript: string) => {
+      handleChange(transcript);
+    },
+    [handleChange],
+  );
+
   const {
     isListening,
     handleToggleListening,
@@ -64,7 +75,8 @@ export const TextField = ({
     browserSupportsSpeechRecognition,
   } = useVoiceInput({
     onTranscriptionStarted,
-    onTranscriptionCompleted: handleVoiceTranscript,
+    onTranscriptionCompleted: handleVoiceTranscriptCompleted,
+    onTranscription: handleVoiceTranscription,
     disabled,
   });
 
@@ -80,7 +92,7 @@ export const TextField = ({
   const input = (
     <TextFieldComponents.Input
       theme={resolvedTheme}
-      placeholder={isLoading ? '' : placeholder}
+      placeholder={isLoading ? '' : resolvedPlaceholder}
       value={isLoading ? '' : currentValue}
       onChange={handleChange}
       onKeyDown={handleKeyDown}
@@ -89,6 +101,7 @@ export const TextField = ({
       disabled={disabled || isLoading}
       ariaLabel={ariaLabel}
       className={inputClassName}
+      multiline={multiline}
     />
   );
 
@@ -130,6 +143,7 @@ export const TextField = ({
       isFocused={isFocused}
       hasValue={hasValue}
       disabled={disabled}
+      multiline={multiline}
       id={id}
       testId={testId}
       className={classNames(className, skeletonClass, disabled && 'envive-tw-cursor-not-allowed')}

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

@@ -57,83 +57,62 @@ vi.mock('jotai', () => ({
 }));
 
 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());
+    sharedState = '';
   });
 
   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();
-      });
+  describe('onTranscriptionStarted callback', () => {
+    it('should accept onTranscriptionStarted prop', () => {
+      const onTranscriptionStarted = vi.fn();
 
-      // Verify that listening state changed to active
-      expect(result.current.isListening).toBe(true);
+      renderHook(() =>
+        useVoiceInput({
+          onTranscriptionStarted,
+        }),
+      );
     });
+  });
 
-    it('should delete previous transcription when starting to listen', async () => {
-      const { result } = renderHook(() => useVoiceInput({}));
-
-      await act(async () => {
-        result.current.handleToggleListening();
-      });
+  describe('onTranscription callback', () => {
+    it('should accept onTranscription prop', () => {
+      const onTranscription = vi.fn();
 
-      // Verify resetTranscript was called BEFORE starting new listening session
-      // This ensures previous transcription is cleared when starting fresh
-      expect(spies.mockResetTranscript).toHaveBeenCalled();
+      renderHook(() =>
+        useVoiceInput({
+          onTranscription,
+        }),
+      );
     });
   });
 
-  describe('Stop listening', () => {
-    it('should stop listening and call onTranscript with current transcript', async () => {
+  describe('onTranscriptionCompleted callback', () => {
+    it('should accept onTranscriptionCompleted prop', () => {
       const onTranscriptionCompleted = vi.fn();
 
-      const { result } = renderHook(() =>
+      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');
       });
@@ -144,43 +123,28 @@ describe('useVoiceInput', () => {
         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 () => {
+    it('should abort listening when handleAbortListening is called', 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/Input.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { getInputClasses } from '../utils/getInputClasses';
 import { createInputChangeHandler } from '../utils/createInputChangeHandler';
+import { useAutoResize } from '../hooks/useAutoResize';
 import { Theme } from '../../../../tokens/theme/theme';
 
 type InputProps = {
@@ -8,10 +9,11 @@ type InputProps = {
   placeholder: string;
   value?: string;
   onChange?: (value: string) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   disabled?: boolean;
+  multiline?: boolean;
   id?: string;
   testId?: string;
   className?: string;
@@ -28,6 +30,7 @@ export const Input = ({
   onFocus,
   onBlur,
   disabled = false,
+  multiline = false,
   id,
   testId,
   className,
@@ -36,6 +39,42 @@ export const Input = ({
 }: InputProps): JSX.Element => {
   const { inputClasses } = getInputClasses(theme);
   const handleChange = createInputChangeHandler(disabled, onChange);
+  const textareaRef = useAutoResize(multiline ? value : undefined);
+
+  const sharedClasses = classNames(
+    inputClasses,
+    'focus-visible:envive-tw-shadow-none focus-visible:envive-tw-outline-none',
+    className,
+    disabled && 'envive-tw-cursor-not-allowed',
+  );
+
+  if (multiline) {
+    return (
+      <textarea
+        ref={textareaRef}
+        id={id}
+        data-testid={testId}
+        placeholder={placeholder}
+        value={value}
+        rows={1}
+        onChange={e => {
+          if (!disabled) onChange?.(e.target.value);
+        }}
+        onKeyDown={e => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            onKeyDown?.(e);
+          }
+        }}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        disabled={disabled}
+        className={sharedClasses}
+        style={{ resize: 'none', overflow: 'hidden', padding: 0, ...style }}
+        aria-label={ariaLabel}
+        aria-disabled={disabled}
+      />
+    );
+  }
 
   return (
     <input
@@ -49,12 +88,7 @@ export const Input = ({
       onFocus={onFocus}
       onBlur={onBlur}
       disabled={disabled}
-      className={classNames(
-        inputClasses,
-        'focus-visible:envive-tw-shadow-none focus-visible:envive-tw-outline-none',
-        className,
-        disabled && 'envive-tw-cursor-not-allowed',
-      )}
+      className={sharedClasses}
       style={style}
       aria-label={ariaLabel}
       aria-disabled={disabled}

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

@@ -11,6 +11,7 @@ type LayoutProps = {
   isFocused: boolean;
   hasValue: boolean;
   disabled?: boolean;
+  multiline?: boolean;
   id?: string;
   testId?: string;
   className?: string;
@@ -25,6 +26,7 @@ export const Layout = ({
   isFocused,
   hasValue,
   disabled = false,
+  multiline = false,
   id,
   testId,
   className,
@@ -61,7 +63,11 @@ export const Layout = ({
           disabled && containerDisabledClasses,
           className,
         )}
-        style={style}
+        style={
+          multiline
+            ? { height: 'auto', minHeight: '40px', alignItems: 'flex-end', ...style }
+            : style
+        }
       >
         {input}
         {sendIcon}

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

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+export const useAutoResize = (value: string | undefined): React.RefObject<HTMLTextAreaElement> => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+
+  return ref;
+};

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

@@ -0,0 +1,67 @@
+/* eslint-disable no-await-in-loop */
+import { useEffect, useRef, useState } from 'react';
+
+const DEFAULT_TYPING_DURATION = 400;
+const DEFAULT_TRANSITION = 3000;
+const CLEAR_PAUSE = 200;
+
+export const usePlaceholderAnimation = (
+  placeholder: string | string[],
+  typingDuration = DEFAULT_TYPING_DURATION,
+  transition = DEFAULT_TRANSITION,
+): string => {
+  const [current, setCurrent] = useState(() => (Array.isArray(placeholder) ? '' : placeholder));
+  const timeoutsRef = useRef<NodeJS.Timeout[]>([]);
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    if (!Array.isArray(placeholder)) {
+      setCurrent(placeholder);
+      return () => {};
+    }
+
+    if (placeholder.length === 0) {
+      setCurrent('');
+      return () => {};
+    }
+
+    isMountedRef.current = true;
+    timeoutsRef.current = [];
+
+    const delay = (ms: number): Promise<void> =>
+      new Promise(resolve => {
+        const id = setTimeout(resolve, ms);
+        timeoutsRef.current.push(id);
+      });
+
+    const animateChars = async (text: string) => {
+      const charDelay = text.length > 1 ? typingDuration / (text.length - 1) : 0;
+      for (let i = 0; i < text.length; i += 1) {
+        await delay(charDelay);
+        if (isMountedRef.current) setCurrent(text.substring(0, i + 1));
+      }
+    };
+
+    const run = async () => {
+      while (isMountedRef.current) {
+        for (const element of placeholder) {
+          if (!isMountedRef.current) return;
+          await animateChars(element);
+          await delay(transition);
+          if (isMountedRef.current) setCurrent('');
+          await delay(CLEAR_PAUSE);
+        }
+      }
+    };
+
+    run();
+
+    return () => {
+      isMountedRef.current = false;
+      timeoutsRef.current.forEach(clearTimeout);
+      timeoutsRef.current = [];
+    };
+  }, [placeholder, typingDuration, transition]);
+
+  return current;
+};

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

@@ -20,7 +20,7 @@ export const useTextFieldSubmit = (
   }, [onSubmit, hasValue, disabled, isLoading, currentValue, resetValue]);
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>) => {
+    (event: React.KeyboardEvent<HTMLElement>) => {
       if (event.key === 'Enter' && hasValue && !disabled && !isLoading) {
         event.preventDefault();
         handleSubmit();

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

@@ -6,6 +6,7 @@ import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognitio
 export type UseVoiceInputProps = {
   onTranscriptionStarted?: () => void;
   onTranscriptionCompleted?: (transcript: string) => void;
+  onTranscription?: (transcript: string) => void;
   disabled?: boolean;
 };
 
@@ -19,6 +20,7 @@ export type UseVoiceInputReturn = {
 export const useVoiceInput = ({
   onTranscriptionCompleted,
   onTranscriptionStarted,
+  onTranscription,
   disabled = false,
 }: UseVoiceInputProps): UseVoiceInputReturn => {
   const [listeningToSpeech, setListeningToSpeech] = useAtom(listeningToSpeechAtom);
@@ -78,6 +80,12 @@ export const useVoiceInput = ({
     }
   }, [listeningToSpeech]);
 
+  useEffect(() => {
+    if (!disabled && listeningToSpeech === 'start' && transcript) {
+      onTranscription?.(transcript);
+    }
+  }, [transcript, listeningToSpeech, disabled, onTranscription]);
+
   return {
     isListening: listeningToSpeech === 'start',
     handleToggleListening,

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

@@ -8,8 +8,9 @@ export type TextFieldProps = {
   theme?: Theme;
   /**
    * Placeholder text displayed when the input is empty.
+   * Pass an array of strings to cycle through them with a typing animation.
    */
-  placeholder: string;
+  placeholder: string | string[];
   /**
    * Controlled value of the input. If not provided, the component manages its own state.
    */
@@ -47,11 +48,28 @@ export type TextFieldProps = {
    * @default false
    */
   isLoading?: boolean;
+  /**
+   * When true the input expands to multiple lines instead of scrolling horizontally.
+   * @default false
+   */
+  multiline?: boolean;
   /**
    * Enable voice input button
    * @default false
    */
   enableVoiceInput?: boolean;
+  /**
+   * Callback function invoked when voice transcription begins.
+   */
   onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   * @param transcript - The transcribed text from voice input.
+   */
   onTranscriptionCompleted?: (transcript: string) => void;
+  /**
+   * Callback function invoked during voice transcription as audio is processed.
+   * @param transcript - The current transcribed text from voice input.
+   */
+  onTranscription?: (transcript: string) => void;
 };