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

package/src/components/ChatPreview/ChatPreview.tsx

@@ -25,8 +25,14 @@ export const ChatPreview = ({
     hexCardColor,
   } = widgetStyleProps ?? {};
 
-  const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel } =
-    widgetContentProps ?? {};
+  const {
+    messageText,
+    promptButtons,
+    textFieldPlaceholderText,
+    logoSrc,
+    titleLabel,
+    voiceInputEnabled,
+  } = widgetContentProps ?? {};
 
   const {
     handlePromptButtonClick,
@@ -38,6 +44,8 @@ export const ChatPreview = ({
     handlePromptButtonTouchEnd,
     handleLinkClick,
     handleTextFieldClick,
+    onTranscriptionStarted,
+    onTranscriptionCompleted,
   } = widgetEventProps ?? {};
 
   const suggestionTextMap = useMemo(() => {
@@ -85,6 +93,9 @@ export const ChatPreview = ({
       theme={finalTheme}
       placeholder={textFieldPlaceholderText ?? ''}
       onClick={() => handleTextFieldClick?.()}
+      enableVoiceInput={voiceInputEnabled}
+      onTranscriptionStarted={onTranscriptionStarted}
+      onTranscriptionCompleted={onTranscriptionCompleted}
     />
   );
 

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

@@ -399,4 +399,48 @@ describe('ChatPreview', () => {
       expect(emptyHandler).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('Voice input', () => {
+    it('should render with voiceInputEnabled set to true', async () => {
+      render(
+        <ChatPreview
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: true,
+          }}
+          widgetStyleProps={{ hideTextField: false }}
+        />,
+      );
+      expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled set to false', () => {
+      render(
+        <ChatPreview
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: false,
+          }}
+          widgetStyleProps={{ hideTextField: false }}
+        />,
+      );
+      expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled undefined (default)', () => {
+      render(
+        <ChatPreview
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: undefined,
+          }}
+          widgetStyleProps={{ hideTextField: false }}
+        />,
+      );
+      expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
+    });
+  });
 });

package/src/components/ChatPreview/index.ts

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

package/src/components/ChatPreview/types/types.ts

@@ -66,6 +66,11 @@ export type WidgetContentProps = {
    * Displayed when the text field is visible.
    */
   textFieldPlaceholderText?: string;
+
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
 };
 
 /**
@@ -170,6 +175,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/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/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();
+    });
+  });
 });