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

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

@@ -395,6 +395,25 @@ describe('PromptCarousel', () => {
       expect(screen.getByText('Button 4')).toBeInTheDocument();
     });
 
+    it('should place two buttons per row when four prompts and ALWAYS_TWO', () => {
+      const { container } = render(
+        <PromptCarousel
+          id="test-carousel"
+          promptButtonTexts={['Button 1', 'Button 2', 'Button 3', 'Button 4']}
+          promptCarouselRows={PromptCarouselRows.ALWAYS_TWO}
+          handleButtonClick={vi.fn()}
+        />,
+      );
+
+      const rows = container.querySelectorAll('.envive-tw-overflow-x-auto');
+      expect(rows).toHaveLength(2);
+      expect(rows[0].textContent).toContain('Button 1');
+      expect(rows[0].textContent).toContain('Button 2');
+      expect(rows[0].textContent).not.toContain('Button 3');
+      expect(rows[1].textContent).toContain('Button 3');
+      expect(rows[1].textContent).toContain('Button 4');
+    });
+
     it('should render two rows on mobile when promptCarouselRows is TWO_ON_MOBILE_ONE_ON_DESKTOP', () => {
       mockUseCheckIsMobile.mockReturnValue({ isMobile: true, viewportWidth: 400 });
 

package/src/components/PromptCarousel/hooks/useCarouselButtons.ts

@@ -5,6 +5,8 @@ interface UseCarouselButtonsProps {
   shouldShowTwoRows: boolean;
 }
 
+const getFirstRowCount = (length: number) => Math.ceil(length / 2);
+
 export const useCarouselButtons = ({
   promptButtonTexts,
   shouldShowTwoRows,
@@ -14,7 +16,7 @@ export const useCarouselButtons = ({
       return [];
     }
     return shouldShowTwoRows
-      ? promptButtonTexts.slice(0, Math.ceil((promptButtonTexts.length + 1) / 2))
+      ? promptButtonTexts.slice(0, getFirstRowCount(promptButtonTexts.length))
       : promptButtonTexts;
   }, [promptButtonTexts, shouldShowTwoRows]);
 
@@ -23,7 +25,7 @@ export const useCarouselButtons = ({
       return [];
     }
     return promptButtonTexts.slice(
-      Math.ceil((promptButtonTexts.length + 1) / 2),
+      getFirstRowCount(promptButtonTexts.length),
       promptButtonTexts.length,
     );
   }, [promptButtonTexts]);

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

@@ -32,7 +32,7 @@ export const useVoiceInput = ({
       onTranscriptionStarted?.();
     } catch (error) {
       console.log('Microphone permission denied or error:', error);
-      setListeningToSpeech(false);
+      setListeningToSpeech('abort');
     }
   };
 
@@ -49,27 +49,25 @@ export const useVoiceInput = ({
   const handleToggleListening = () => {
     if (disabled || !isMicrophoneAvailable || !browserSupportsSpeechRecognition) return;
 
-    if (!listeningToSpeech) {
-      handleStartListening();
-      setListeningToSpeech(true);
+    if (listeningToSpeech !== 'start') {
+      setListeningToSpeech('start');
     } else {
-      handleStopListening();
-      setListeningToSpeech(false);
+      setListeningToSpeech('stop');
     }
   };
 
   useEffect(() => {
-    if (listeningToSpeech) {
+    if (listeningToSpeech === 'start') {
       handleStartListening();
+    } else if (listeningToSpeech === 'stop') {
+      handleStopListening();
+    } else if (listeningToSpeech === 'abort') {
+      handleAbortListening();
     }
-    return () => {
-      resetTranscript();
-      setListeningToSpeech(false);
-    };
-  }, []);
+  }, [listeningToSpeech]);
 
   return {
-    isListening: listeningToSpeech,
+    isListening: listeningToSpeech === 'start',
     handleToggleListening,
     handleAbortListening,
     browserSupportsSpeechRecognition,

package/src/components/WidgetTextField/WidgetTextField.tsx

@@ -51,7 +51,7 @@ export const WidgetTextField = ({
   }
 
   const handleToggleListening = () => {
-    setListeningToSpeech(true);
+    setListeningToSpeech('start');
     onTranscriptionStarted?.();
     onClick();
   };