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

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

@@ -48,7 +48,7 @@ export const TextField = ({
     resetValue,
   );
 
-  const handleVoiceTranscript = useCallback(
+  const handleVoiceTranscriptCompleted = useCallback(
     (transcript: string) => {
       resetValue();
       handleChange(transcript);
@@ -57,6 +57,13 @@ export const TextField = ({
     [handleChange, resetValue, onTranscriptionCompleted],
   );
 
+  const handleVoiceTranscription = useCallback(
+    (transcript: string) => {
+      handleChange(transcript);
+    },
+    [handleChange],
+  );
+
   const {
     isListening,
     handleToggleListening,
@@ -64,7 +71,8 @@ export const TextField = ({
     browserSupportsSpeechRecognition,
   } = useVoiceInput({
     onTranscriptionStarted,
-    onTranscriptionCompleted: handleVoiceTranscript,
+    onTranscriptionCompleted: handleVoiceTranscriptCompleted,
+    onTranscription: handleVoiceTranscription,
     disabled,
   });
 

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

@@ -52,6 +52,18 @@ export type TextFieldProps = {
    * @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;
 };