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

package/src/components/ChatPreviewComparison/ChatPreviewComparison.tsx

@@ -34,6 +34,7 @@ export const ChatPreviewComparison = ({
     images,
     logoSrc,
     titleLabel,
+    voiceInputEnabled,
   } = widgetContentProps ?? {};
 
   const {
@@ -46,6 +47,8 @@ export const ChatPreviewComparison = ({
     handlePromptButtonTouchEnd,
     handleLinkClick,
     handleTextFieldClick,
+    onTranscriptionStarted,
+    onTranscriptionCompleted,
   } = widgetEventProps ?? {};
 
   const finalTheme = resolveTheme(theme);
@@ -101,6 +104,9 @@ export const ChatPreviewComparison = ({
       theme={finalTheme}
       placeholder={textFieldPlaceholderText ?? ''}
       onClick={() => handleTextFieldClick?.()}
+      enableVoiceInput={voiceInputEnabled}
+      onTranscriptionStarted={onTranscriptionStarted}
+      onTranscriptionCompleted={onTranscriptionCompleted}
     />
   );
 

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/Disclaimer/components/Container.tsx

@@ -22,7 +22,7 @@ export const Container = ({
       id={id}
       testId={testId}
       style={style}
-      className={classNames(className, 'envive-tw-px-4 envive-tw-py-6')}
+      className={classNames(className, 'envive-tw-px-4 envive-tw-pt-6')}
     >
       <Stack
         direction="column"

package/src/components/FloatingChat/FloatingChat.tsx

@@ -1,13 +1,15 @@
-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 { listeningToSpeechAtom } from '@envive-ai/react-hooks/atoms/chat';
+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 { useSetAtom } from 'jotai';
 import { Theme } from '../../../tokens/theme/theme';
 import { ColorNames } from '../../models/colorsConfig';
 
@@ -24,12 +26,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 = ({
@@ -54,6 +56,7 @@ export const FloatingChat = ({
   const { trackWidgetInteraction } = useWidgetInteraction();
   const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
     usePromptCarouselAnalytics(WidgetInteractionComponent.FLOATING_CHAT, text => text);
+  const setListeningToSpeech = useSetAtom(listeningToSpeechAtom);
 
   const [query, setQuery] = useState('');
 
@@ -93,7 +96,8 @@ export const FloatingChat = ({
     return undefined;
   }, [disclaimerText]);
 
-  const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
+  const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc, voiceInputEnabled } =
+    lookAndFeelConfig;
 
   const {
     messages,
@@ -217,6 +221,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 +311,7 @@ export const FloatingChat = ({
       theme={finalTheme}
       isScrolled={isMobile ? isFloatingLayout : false}
       onChange={setQuery}
+      inputClassName="placeholder:envive-tw-text-text-secondary"
       onSubmit={() => {
         onTypedMessageSubmitted({
           query,
@@ -303,6 +334,7 @@ export const FloatingChat = ({
           onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
         }
 
+        setListeningToSpeech('abort');
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
         handleBackToChat();
@@ -315,6 +347,9 @@ export const FloatingChat = ({
       hideEnviveWatermark={!showEnviveLogo}
       onFocus={handleInputQueryFocus}
       parentWidget={WidgetInteractionComponent.FLOATING_CHAT}
+      voiceInputEnabled={voiceInputEnabled}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 
@@ -373,6 +408,7 @@ export const FloatingChat = ({
         if (suggestion) {
           onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
         }
+        setListeningToSpeech('abort');
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
       }}

package/src/components/FloatingChat/components/SlideChatContent.tsx

@@ -52,7 +52,7 @@ export const SlideChatContent = ({
   );
 
   return (
-    <div className="envive-tw-relative envive-tw-min-h-[200px] envive-tw-w-full envive-tw-overflow-hidden">
+    <div className="envive-tw-relative envive-tw-w-full envive-tw-overflow-hidden">
       <AnimatePresence
         initial={false}
         mode="wait"

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

@@ -1,4 +1,5 @@
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { listeningToSpeechAtom } from '@envive-ai/react-hooks/atoms/chat';
 import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
@@ -8,17 +9,23 @@ import {
   WidgetInteractionComponent,
   WidgetInteractionType,
 } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
-import { useRef, useState } from 'react';
+import { useSetAtom } from 'jotai';
+import { useCallback, useRef, useState } from 'react';
 import { ChatFooter } from '../ChatFooter';
 import { Disclaimer } from '../Disclaimer';
 import { FloatingChatComponents } from '../FloatingChat/components';
+import {
+  NUM_COLUMNS_FPSA,
+  NUM_COLUMNS_MOBILE,
+  ResultsGridColumnCount,
+} from '../FloatingChat/components/ResultsGridView';
 import { useChatSuggestions } from '../FloatingChat/hooks/useChatSuggestions';
 import { useProductResultsView } from '../FloatingChat/hooks/useProductResultsView';
 import { useScrollToBottom } from '../FloatingChat/hooks/useScrollToBottom';
 import { trackProductCardClicked } from '../FloatingChat/utils/trackProductCardInteraction';
-import { SalesAgentProductCardProps } from '../SalesAgentProductCard/types/types';
 import { PromptButtonVariant } from '../PromptButton';
 import { PromptCarousel, PromptCarouselRows, usePromptCarouselAnalytics } from '../PromptCarousel';
+import { SalesAgentProductCardProps } from '../SalesAgentProductCard/types/types';
 import { Theme } from '../Tokens';
 import { resolveTheme } from '../utils/resolveTheme';
 import { SparkleIconColor, WelcomeMessage } from '../WelcomeMessage';
@@ -27,11 +34,6 @@ import { useGetFooterStyles } from './hooks/useGetFooterStyles';
 import { useGetMessagesStyles } from './hooks/useGetMessagesStyles';
 import { useGetScrollContentStyles } from './hooks/useGetScrollContentStyles';
 import { useIsMobile } from './hooks/useIsMobile';
-import {
-  NUM_COLUMNS_FPSA,
-  NUM_COLUMNS_MOBILE,
-  ResultsGridColumnCount,
-} from '../FloatingChat/components/ResultsGridView';
 
 interface FullPageSalesAgentProps {
   theme?: Theme;
@@ -40,6 +42,7 @@ interface FullPageSalesAgentProps {
   hardcopyContent: HardcopyResponse;
   headerContainer?: string;
   autoHeight?: boolean;
+  voiceInputEnabled?: boolean;
 }
 
 export const FullPageSalesAgent = ({
@@ -49,6 +52,7 @@ export const FullPageSalesAgent = ({
   hardcopyContent,
   headerContainer,
   autoHeight,
+  voiceInputEnabled,
 }: FullPageSalesAgentProps) => {
   const resolvedTheme = resolveTheme(theme);
   const salesAgentData = useSalesAgent(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT);
@@ -61,6 +65,7 @@ export const FullPageSalesAgent = ({
   const { trackWidgetInteraction } = useWidgetInteraction();
   const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
     usePromptCarouselAnalytics(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT, text => text);
+  const setListeningToSpeech = useSetAtom(listeningToSpeechAtom);
 
   const {
     welcomeMessageIconColor,
@@ -153,6 +158,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
@@ -188,6 +219,7 @@ export const FullPageSalesAgent = ({
           onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
         }
 
+        setListeningToSpeech('abort');
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
         handleBackToChat();
@@ -205,6 +237,9 @@ export const FullPageSalesAgent = ({
       }}
       onFocus={handleInputQueryFocus}
       parentWidget={WidgetInteractionComponent.FULL_PAGE_SALES_AGENT}
+      voiceInputEnabled={voiceInputEnabled}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 
@@ -258,6 +293,7 @@ export const FullPageSalesAgent = ({
         if (suggestion) {
           onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
         }
+        setListeningToSpeech('abort');
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
       }}

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