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

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

@@ -418,4 +418,48 @@ describe('ChatPreviewComparison', () => {
       expect(screen.getByText('Button 1')).toBeInTheDocument();
     });
   });
+
+  describe('Voice input', () => {
+    it('should render with voiceInputEnabled set to true', () => {
+      render(
+        <ChatPreviewComparison
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: true,
+          }}
+          widgetStyleProps={{ hideTextField: false }}
+        />,
+      );
+      expect(screen.getByText('Compare these products')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled set to false', () => {
+      render(
+        <ChatPreviewComparison
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: false,
+          }}
+          widgetStyleProps={{ hideTextField: false }}
+        />,
+      );
+      expect(screen.getByText('Compare these products')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled undefined (default)', () => {
+      render(
+        <ChatPreviewComparison
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: undefined,
+          }}
+          widgetStyleProps={{ hideTextField: false }}
+        />,
+      );
+      expect(screen.getByText('Compare these products')).toBeInTheDocument();
+    });
+  });
 });

package/src/components/ChatPreviewComparison/index.ts

@@ -1,2 +1,2 @@
 export { ChatPreviewComparison } from './ChatPreviewComparison';
-export type { ChatPreviewComparisonProps } from './types/types';
+export type { ChatPreviewComparisonProps, WidgetEventProps } from './types/types';

package/src/components/ChatPreviewComparison/types/types.ts

@@ -72,6 +72,11 @@ export type WidgetContentProps = {
    * Array of image objects for the images.
    */
   images?: ImageGalleryImage[];
+
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
 };
 
 /**
@@ -176,6 +181,14 @@ export type WidgetEventProps = {
    * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
+  /**
+   * Callback function invoked when voice transcription starts.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 
 /**

package/src/components/ChatPreviewLoading/ChatPreviewLoading.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { WidgetWrapperVariant } from '../WidgetWrapper';
 import { Stack } from '../Stack';
-import { ChatPreviewLoadingComponents } from './components';
 import { WidgetTextField } from '../WidgetTextField';
+import { WidgetWrapperVariant } from '../WidgetWrapper';
+import { ChatPreviewLoadingComponents } from './components';
 import { ChatPreviewLoadingProps } from './types/types';
 
 export const ChatPreviewLoading = ({
@@ -18,6 +18,7 @@ export const ChatPreviewLoading = ({
   hideLogo,
   logoSrc,
   titleLabel,
+  voiceInputEnabled,
 }: ChatPreviewLoadingProps) => {
   const textfield = useMemo(() => {
     if (fullIsLoading) {
@@ -29,10 +30,11 @@ export const ChatPreviewLoading = ({
     return (
       <WidgetTextField
         placeholder={textFieldPlaceholder ?? ''}
+        enableVoiceInput={voiceInputEnabled}
         disabled
       />
     );
-  }, [fullIsLoading, textFieldPlaceholder]);
+  }, [fullIsLoading, textFieldPlaceholder, voiceInputEnabled]);
 
   const headline = useMemo(
     () => (

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

@@ -330,4 +330,44 @@ describe('ChatPreviewLoading', () => {
       expect(skeletons.length).toBeGreaterThanOrEqual(6);
     });
   });
+
+  describe('Voice input', () => {
+    it('should render with voiceInputEnabled set to true', async () => {
+      render(
+        <ChatPreviewLoading
+          {...defaultProps}
+          voiceInputEnabled
+          fullIsLoading={false}
+          hideTextField={false}
+        />,
+      );
+      await waitFor(() => {
+        expect(screen.getByText('What can I help you find?')).toBeInTheDocument();
+      });
+    });
+
+    it('should render with voiceInputEnabled set to false', () => {
+      render(
+        <ChatPreviewLoading
+          {...defaultProps}
+          voiceInputEnabled={false}
+          fullIsLoading={false}
+          hideTextField={false}
+        />,
+      );
+      expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled undefined (default)', () => {
+      render(
+        <ChatPreviewLoading
+          {...defaultProps}
+          voiceInputEnabled={undefined}
+          fullIsLoading={false}
+          hideTextField={false}
+        />,
+      );
+      expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
+    });
+  });
 });

package/src/components/ChatPreviewLoading/types/types.ts

@@ -50,6 +50,11 @@ export type ChatPreviewLoadingProps = {
    */
   hideTextField?: boolean;
 
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
+
   /**
    * Placeholder text displayed in the text field.
    * Only used when `fullIsLoading` is `false` and `hideTextField` is `false`.

package/src/components/FloatingChat/FloatingChat.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
-import { motion } from 'framer-motion';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
 import {
   WidgetInteractionComponent,
   WidgetInteractionType,
 } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
-import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
-import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { motion } from 'framer-motion';
 import { Theme } from '../../../tokens/theme/theme';
 import { ColorNames } from '../../models/colorsConfig';
 
@@ -24,12 +24,12 @@ import { useScrollToBottom } from './hooks/useScrollToBottom';
 import { useSnapSetup } from './hooks/useSnapSetup';
 
 import { Disclaimer } from '../Disclaimer';
+import { SalesAgentProductCardProps } from '../SalesAgentProductCard/types/types';
 import { resolveTheme } from '../utils/resolveTheme';
+import { FloatingChatComponents, ModalSheet } from './components';
 import { useFilteredChatMessages } from './hooks/useFilteredChatMessages';
 import { Unit } from './hooks/useSnapCalculator';
 import { FloatingChatProps } from './types/types';
-import { FloatingChatComponents, ModalSheet } from './components';
-import { SalesAgentProductCardProps } from '../SalesAgentProductCard/types/types';
 import { trackProductCardClicked } from './utils/trackProductCardInteraction';
 
 export const FloatingChat = ({
@@ -93,7 +93,8 @@ export const FloatingChat = ({
     return undefined;
   }, [disclaimerText]);
 
-  const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
+  const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc, voiceInputEnabled } =
+    lookAndFeelConfig;
 
   const {
     messages,
@@ -217,6 +218,32 @@ export const FloatingChat = ({
     );
   };
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FLOATING_CHAT,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, [trackWidgetInteraction]);
+
+  const handleTranscriptionCompleted = useCallback(
+    (transcript: string) => {
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget: WidgetInteractionComponent.FLOATING_CHAT,
+          widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+          widget_interaction_data: {
+            transcription: transcript,
+          },
+        },
+      });
+    },
+    [trackWidgetInteraction],
+  );
+
   const header = (
     <ChatHeader
       logoDark={chatHeaderLogoDarkSrc}
@@ -281,6 +308,7 @@ export const FloatingChat = ({
       theme={finalTheme}
       isScrolled={isMobile ? isFloatingLayout : false}
       onChange={setQuery}
+      inputClassName="placeholder:envive-tw-text-text-secondary"
       onSubmit={() => {
         onTypedMessageSubmitted({
           query,
@@ -315,6 +343,9 @@ export const FloatingChat = ({
       hideEnviveWatermark={!showEnviveLogo}
       onFocus={handleInputQueryFocus}
       parentWidget={WidgetInteractionComponent.FLOATING_CHAT}
+      voiceInputEnabled={voiceInputEnabled}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 

package/src/components/FloatingChat/hooks/useChatSuggestions.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import { Suggestion } from '@envive-ai/react-hooks/application/models';
 
 export interface UseChatSuggestionsProps {
@@ -26,17 +26,13 @@ export const useChatSuggestions = ({
   const showAnswerSuggestions =
     answerSuggestions.length > 0 && !isPendingResponse && !isResponseStreaming;
 
-  useEffect(() => {
-    if (suggestions.length > 0) {
-      setAnswerSuggestions(
-        suggestions.filter(suggestion => suggestion.isAnswer).map(suggestion => suggestion.content),
-      );
-      setGeneralSuggestions(
-        suggestions
-          .filter(suggestion => !suggestion.isAnswer)
-          .map(suggestion => suggestion.content),
-      );
-    }
+  useLayoutEffect(() => {
+    setAnswerSuggestions(
+      suggestions.filter(suggestion => suggestion.isAnswer).map(suggestion => suggestion.content),
+    );
+    setGeneralSuggestions(
+      suggestions.filter(suggestion => !suggestion.isAnswer).map(suggestion => suggestion.content),
+    );
   }, [suggestions]);
 
   return {

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -8,7 +8,7 @@ import {
   WidgetInteractionComponent,
   WidgetInteractionType,
 } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { ChatFooter } from '../ChatFooter';
 import { Disclaimer } from '../Disclaimer';
 import { FloatingChatComponents } from '../FloatingChat/components';
@@ -40,6 +40,7 @@ interface FullPageSalesAgentProps {
   hardcopyContent: HardcopyResponse;
   headerContainer?: string;
   autoHeight?: boolean;
+  voiceInputEnabled?: boolean;
 }
 
 export const FullPageSalesAgent = ({
@@ -49,6 +50,7 @@ export const FullPageSalesAgent = ({
   hardcopyContent,
   headerContainer,
   autoHeight,
+  voiceInputEnabled,
 }: FullPageSalesAgentProps) => {
   const resolvedTheme = resolveTheme(theme);
   const salesAgentData = useSalesAgent(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT);
@@ -153,6 +155,32 @@ export const FullPageSalesAgent = ({
     );
   };
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, [trackWidgetInteraction]);
+
+  const handleTranscriptionCompleted = useCallback(
+    (transcript: string) => {
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+          widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+          widget_interaction_data: {
+            transcription: transcript,
+          },
+        },
+      });
+    },
+    [trackWidgetInteraction],
+  );
+
   const welcomeMessage = (
     <div className={messageContainerClasses}>
       <WelcomeMessage
@@ -205,6 +233,9 @@ export const FullPageSalesAgent = ({
       }}
       onFocus={handleInputQueryFocus}
       parentWidget={WidgetInteractionComponent.FULL_PAGE_SALES_AGENT}
+      voiceInputEnabled={voiceInputEnabled}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 

package/src/components/ProductCard/ProductCard.tsx

@@ -20,6 +20,7 @@ export const ProductCard = ({
   textTypingDuration,
   textTransition,
   loop,
+  voiceInputEnabled,
   onSelect,
   onDrag,
   onHover,
@@ -28,6 +29,8 @@ export const ProductCard = ({
   onTouchStart,
   onTouchEnd,
   onInputClick,
+  onTranscriptionStarted,
+  onTranscriptionCompleted,
 }: ProductCardProps) => {
   const resolvedTheme = resolveTheme(theme);
 
@@ -59,8 +62,12 @@ export const ProductCard = ({
       />
       <WidgetTextField
         theme={resolvedTheme}
+        minimalFrame={resolvedTheme === Theme.MINIMAL ? 'bottom-only' : 'full'}
         placeholder={placeholder}
         onClick={onInputClick}
+        enableVoiceInput={voiceInputEnabled}
+        onTranscriptionStarted={onTranscriptionStarted}
+        onTranscriptionCompleted={onTranscriptionCompleted}
         textColor={
           resolvedTheme === Theme.MINIMAL
             ? TypographyColor.TEXT_LIGHT

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

@@ -259,5 +259,38 @@ describe('ProductCard', () => {
       expect(screen.getByText('Test Product')).toBeInTheDocument();
       expect(screen.getByText('Prompt 1')).toBeInTheDocument();
     });
+
+    it('should render with voiceInputEnabled set to true', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          voiceInputEnabled
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled set to false', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          voiceInputEnabled={false}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled undefined (default)', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          voiceInputEnabled={undefined}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
   });
 });

package/src/components/ProductCard/index.ts

@@ -1,2 +1,2 @@
 export { ProductCard } from './ProductCard';
-export type { ProductCardProps } from './types';
+export type { ProductCardProps, InputProps } from './types';

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

@@ -94,6 +94,12 @@ export interface InputProps {
   onInputClick: () => void;
   /** Placeholder text displayed in the input field. */
   placeholder?: string;
+  /** Whether to enable voice input. */
+  voiceInputEnabled?: boolean;
+  /** Callback function invoked when voice transcription starts. */
+  onTranscriptionStarted?: () => void;
+  /** Callback function invoked when voice transcription completes. */
+  onTranscriptionCompleted?: (transcript: string) => void;
 }
 
 /**

package/src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.tsx

@@ -13,6 +13,7 @@ export const PromptButtonCarouselWithImage = ({
   alt,
   isLoading,
   hideTextField,
+  voiceInputEnabled,
   title,
   promptButtonsTexts,
   promptButtonType,
@@ -25,6 +26,8 @@ export const PromptButtonCarouselWithImage = ({
   handlePromptButtonTouchEnd,
   textFieldPlaceholder,
   handleTextFieldClick,
+  onTranscriptionStarted,
+  onTranscriptionCompleted,
 }: PromptButtonCarouselWithImageProps) => {
   const finalTheme = resolveTheme(theme);
 
@@ -49,6 +52,9 @@ export const PromptButtonCarouselWithImage = ({
           className={finalTheme === Theme.MINIMAL ? '!envive-tw-border-border-medium' : undefined}
           onClick={() => handleTextFieldClick(textFieldPlaceholder)}
           theme={finalTheme}
+          enableVoiceInput={voiceInputEnabled}
+          onTranscriptionStarted={onTranscriptionStarted}
+          onTranscriptionCompleted={onTranscriptionCompleted}
         />
       }
       image={

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

@@ -513,4 +513,38 @@ describe('PromptButtonCarouselWithImage', () => {
       }).not.toThrow();
     });
   });
+
+  describe('Voice input', () => {
+    it('should render with voiceInputEnabled set to true', () => {
+      setMobile(true);
+      render(
+        <PromptButtonCarouselWithImage
+          {...defaultProps}
+          voiceInputEnabled
+        />,
+      );
+      expect(screen.getByText('Type something...')).toBeInTheDocument();
+      setMobile(false);
+    });
+
+    it('should render with voiceInputEnabled set to false', () => {
+      render(
+        <PromptButtonCarouselWithImage
+          {...defaultProps}
+          voiceInputEnabled={false}
+        />,
+      );
+      expect(screen.getByText('Type something...')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled undefined (default)', () => {
+      render(
+        <PromptButtonCarouselWithImage
+          {...defaultProps}
+          voiceInputEnabled={undefined}
+        />,
+      );
+      expect(screen.getByText('Type something...')).toBeInTheDocument();
+    });
+  });
 });

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';