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

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

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { Theme } from '../../../../tokens/theme/theme';
+
+export type UseGetMicButtonContainerPropertiesProps = {
+  theme: Theme;
+  isListening?: boolean;
+};
+
+export type MicButtonContainerProperties = {
+  micButtonContainerClasses: string;
+};
+
+export const useGetMicButtonContainerProperties = ({
+  theme,
+  isListening = false,
+}: UseGetMicButtonContainerPropertiesProps): MicButtonContainerProperties => {
+  const micButtonContainerClasses = useMemo(() => {
+    const micButtonContainerClassesMap: Record<Theme, string> = {
+      [Theme.STANDARD]:
+        'envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-global-custom envive-tw-border-border-light hover:envive-tw-border-border-dark',
+      [Theme.MODERN]:
+        'envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-[4px] envive-tw-border-border-light hover:envive-tw-border-border-dark',
+      [Theme.MINIMAL]:
+        'envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border-b envive-tw-border-solid  envive-tw-border-b-border-medium hover:envive-tw-border-b-border-dark',
+      [Theme.GLOBAL_CUSTOM]:
+        'envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-global-custom envive-tw-border-border-light hover:envive-tw-border-border-dark',
+    };
+
+    const baseClasses =
+      micButtonContainerClassesMap[theme] ?? micButtonContainerClassesMap[Theme.STANDARD];
+
+    return isListening
+      ? `${baseClasses} envive-tw-bg-[--envive-colors-text-accent]`
+      : `${baseClasses} envive-tw-bg-background-light`;
+  }, [theme, isListening]);
+
+  return { micButtonContainerClasses };
+};

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

@@ -4,7 +4,7 @@ export const useGetSkeletonProperties = (isLoading?: boolean) => {
   const skeletonClass = useMemo(() => {
     if (!isLoading) return undefined;
 
-    return 'envive-tw-animate-pulse';
+    return 'envive-tw-animate-pulse envive-tw-h-[40px]';
   }, [isLoading]);
 
   return { skeletonClass };

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

@@ -0,0 +1,75 @@
+import { listeningToSpeechAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
+
+export type UseVoiceInputProps = {
+  onTranscriptionStarted?: () => void;
+  onTranscriptionCompleted?: (transcript: string) => void;
+  disabled?: boolean;
+};
+
+export type UseVoiceInputReturn = {
+  isListening: boolean;
+  handleToggleListening: () => void;
+  handleAbortListening: () => void;
+  browserSupportsSpeechRecognition: boolean;
+};
+
+export const useVoiceInput = ({
+  onTranscriptionCompleted,
+  onTranscriptionStarted,
+  disabled = false,
+}: UseVoiceInputProps): UseVoiceInputReturn => {
+  const [listeningToSpeech, setListeningToSpeech] = useAtom(listeningToSpeechAtom);
+  const { transcript, browserSupportsSpeechRecognition, resetTranscript, isMicrophoneAvailable } =
+    useSpeechRecognition();
+
+  const handleStartListening = async () => {
+    try {
+      resetTranscript();
+      await SpeechRecognition.startListening({ continuous: true, language: 'en-US' });
+      onTranscriptionStarted?.();
+    } catch (error) {
+      console.log('Microphone permission denied or error:', error);
+      setListeningToSpeech('abort');
+    }
+  };
+
+  const handleStopListening = async () => {
+    await SpeechRecognition.stopListening();
+    onTranscriptionCompleted?.(transcript);
+  };
+
+  const handleAbortListening = async () => {
+    await SpeechRecognition.abortListening();
+    resetTranscript();
+  };
+
+  const handleToggleListening = () => {
+    if (disabled || !isMicrophoneAvailable || !browserSupportsSpeechRecognition) return;
+
+    if (listeningToSpeech !== 'start') {
+      setListeningToSpeech('start');
+    } else {
+      setListeningToSpeech('stop');
+    }
+  };
+
+  useEffect(() => {
+    if (listeningToSpeech === 'start') {
+      handleStartListening();
+    } else if (listeningToSpeech === 'stop') {
+      handleStopListening();
+    } else if (listeningToSpeech === 'abort') {
+      handleAbortListening();
+    }
+  }, [listeningToSpeech]);
+
+  return {
+    isListening: listeningToSpeech === 'start',
+    handleToggleListening,
+    handleAbortListening,
+    browserSupportsSpeechRecognition,
+  };
+};

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

@@ -34,6 +34,10 @@ export type TextFieldProps = {
    * Additional class names appended to the computed classes.
    */
   className?: string;
+  /**
+   * Additional class names applied directly to the input element (e.g. placeholder styling).
+   */
+  inputClassName?: string;
   /**
    * Inline styles forwarded to the rendered element.
    */
@@ -43,4 +47,11 @@ export type TextFieldProps = {
    * @default false
    */
   isLoading?: boolean;
+  /**
+   * Enable voice input button
+   * @default false
+   */
+  enableVoiceInput?: boolean;
+  onTranscriptionStarted?: () => void;
+  onTranscriptionCompleted?: (transcript: string) => void;
 };

package/src/components/TextField/utils/getLayoutStateProperties.ts

@@ -1,12 +1,20 @@
+import classNames from 'classnames';
+import { Theme } from 'tokens/theme/theme';
+
 /**
  * Calculates state properties based on the layout state.
  */
 export const getLayoutStateProperties = (
+  theme: Theme,
   hasValue: boolean,
   isFocused: boolean,
   disabled: boolean,
 ) => {
   return {
+    containerClasses: classNames({
+      'envive-tw-gap-4': theme !== Theme.MINIMAL,
+      'envive-tw-flex': true,
+    }),
     isActive: (hasValue || isFocused) && !disabled,
     shouldShowFocus: isFocused && !disabled,
     shouldShowHover: !disabled,

package/src/components/TypingAnimation/TypingAnimation.tsx

@@ -29,6 +29,7 @@ export const TypingAnimation = ({
     textFieldAriaLabel,
     logoSrc,
     hideLogo,
+    voiceInputEnabled,
   } = widgetContentProps || {};
 
   const {
@@ -50,6 +51,8 @@ export const TypingAnimation = ({
     handleButtonTouchStart,
     handleButtonTouchEnd,
     handleTextFieldClick,
+    onTranscriptionStarted,
+    onTranscriptionCompleted,
   } = widgetEventProps || {};
   const typographyVariant = useGetTypographyVariant(theme);
   const { measuringRef, minHeight } = useAnimatedTextMinHeight(animatedTextSequence ?? []);
@@ -179,6 +182,10 @@ export const TypingAnimation = ({
             theme={theme}
             isLoading={isLoading}
             className="envive-tw-mt-2 envive-tw-overflow-hidden envive-tw-text-ellipsis envive-tw-whitespace-nowrap"
+            voiceInputClassName="envive-tw-mt-2"
+            enableVoiceInput={voiceInputEnabled}
+            onTranscriptionStarted={onTranscriptionStarted}
+            onTranscriptionCompleted={onTranscriptionCompleted}
           />
         )}
       </Stack>

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

@@ -326,4 +326,51 @@ describe('TypingAnimation', () => {
       expect(handleButtonClick).toHaveBeenNthCalledWith(3, mockPromptButtonTexts[2]);
     });
   });
+
+  describe('Voice input', () => {
+    it('should render with voiceInputEnabled set to true', () => {
+      render(
+        <TypingAnimation
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: true,
+            hintText: 'Type something...',
+          }}
+          widgetStyleProps={{ showTextField: true }}
+        />,
+      );
+      expect(screen.getByText('Type something...')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled set to false', () => {
+      render(
+        <TypingAnimation
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: false,
+            hintText: 'Type something...',
+          }}
+          widgetStyleProps={{ showTextField: true }}
+        />,
+      );
+      expect(screen.getByText('Type something...')).toBeInTheDocument();
+    });
+
+    it('should render with voiceInputEnabled undefined (default)', () => {
+      render(
+        <TypingAnimation
+          {...defaultProps}
+          widgetContentProps={{
+            ...defaultProps.widgetContentProps,
+            voiceInputEnabled: undefined,
+            hintText: 'Type something...',
+          }}
+          widgetStyleProps={{ showTextField: true }}
+        />,
+      );
+      expect(screen.getByText('Type something...')).toBeInTheDocument();
+    });
+  });
 });

package/src/components/TypingAnimation/index.ts

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

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

@@ -1,7 +1,7 @@
-import { WidgetWrapperVariant } from '../../WidgetWrapper';
 import { PromptButtonVariant } from '../../PromptButton/types';
 import { PromptCarouselRows } from '../../PromptCarousel/types/types';
 import { Theme } from '../../Tokens';
+import { WidgetWrapperVariant } from '../../WidgetWrapper';
 
 /**
  * Base props for the TypingAnimation component container.
@@ -73,6 +73,11 @@ export type WidgetContentProps = {
    * When `true`, hides the logo in the title even if logoSrc is provided.
    */
   hideLogo?: boolean;
+
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
 };
 
 /**
@@ -166,6 +171,14 @@ export type WidgetEventProps = {
    * Callback function invoked when the TextField 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/WidgetTextField/WidgetTextField.tsx

@@ -1,7 +1,14 @@
+import { listeningToSpeechAtom } from '@envive-ai/react-hooks/atoms/chat';
+import classNames from 'classnames';
+import { useSetAtom } from 'jotai';
 import { Theme } from '../../../tokens/theme/theme';
+import { TextFieldComponents } from '../TextField/components';
+import { useGetSkeletonProperties } from '../TextField/hooks/useGetSkeletonProperties';
+import { useVoiceInput } from '../TextField/hooks/useVoiceInput';
 import { TypographyColor } from '../Typography/types';
 import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextFieldComponents } from './components';
+import { useGetMicWidgetButtonProperties } from './hooks/useGetMicWidgetButtonProperties';
 import { IconVariant, type WidgetTextFieldProps } from './types/types';
 
 export const WidgetTextField = ({
@@ -9,7 +16,9 @@ export const WidgetTextField = ({
   testId,
   style,
   className,
+  voiceInputClassName,
   theme = Theme.GLOBAL_CUSTOM,
+  minimalFrame = 'full',
   iconVariant = IconVariant.DEFAULT,
   textColor = TypographyColor.TEXT_SECONDARY,
   placeholder,
@@ -17,13 +26,49 @@ export const WidgetTextField = ({
   disabled,
   isLoading,
   onClick,
+  enableVoiceInput = false,
+  onTranscriptionStarted,
 }: WidgetTextFieldProps) => {
   const resolvedTheme = resolveTheme(theme);
+  const setListeningToSpeech = useSetAtom(listeningToSpeechAtom);
+  const { skeletonClass } = useGetSkeletonProperties(isLoading);
+
+  const { browserSupportsSpeechRecognition } = useVoiceInput({});
+
+  const { micWidgetButtonClasses } = useGetMicWidgetButtonProperties({
+    theme: resolvedTheme,
+    isListening: false,
+  });
+
+  const voiceInputButtonClassName = classNames(
+    micWidgetButtonClasses,
+    skeletonClass,
+    voiceInputClassName,
+  );
 
   if (isLoading) {
     return <WidgetTextFieldComponents.Skeleton theme={resolvedTheme} />;
   }
 
+  const handleToggleListening = () => {
+    setListeningToSpeech('start');
+    onTranscriptionStarted?.();
+    onClick();
+  };
+
+  const voiceInputButton =
+    enableVoiceInput && browserSupportsSpeechRecognition ? (
+      <TextFieldComponents.VoiceInputButton
+        theme={resolvedTheme}
+        isListening={false}
+        onToggleListening={disabled ? undefined : handleToggleListening}
+        ariaLabel={ariaLabel}
+        isLoading={isLoading}
+        disabled={disabled}
+        className={voiceInputButtonClassName}
+      />
+    ) : null;
+
   return (
     <WidgetTextFieldComponents.Container
       onClick={disabled ? undefined : onClick}
@@ -32,6 +77,7 @@ export const WidgetTextField = ({
       style={style}
       className={className}
       theme={resolvedTheme}
+      minimalFrame={minimalFrame}
       disabled={disabled}
       ariaLabel={ariaLabel}
       icon={
@@ -47,6 +93,7 @@ export const WidgetTextField = ({
           textColor={textColor}
         />
       }
+      voiceInputButton={voiceInputButton}
     />
   );
 };

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

@@ -1,11 +1,37 @@
 import '@testing-library/jest-dom';
-import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { WidgetTextField } from '../WidgetTextField';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Theme } from '../../../../tokens/theme/theme';
 import { IconVariant } from '../types/types';
+import { WidgetTextField } from '../WidgetTextField';
+
+const { mockStartListening, mockStopListening, mockAbortListening, mockResetTranscript } =
+  vi.hoisted(() => ({
+    mockStartListening: vi.fn(() => Promise.resolve()),
+    mockStopListening: vi.fn(() => Promise.resolve()),
+    mockAbortListening: vi.fn(() => Promise.resolve()),
+    mockResetTranscript: vi.fn(),
+  }));
+
+vi.mock('react-speech-recognition', () => ({
+  default: {
+    startListening: mockStartListening,
+    stopListening: mockStopListening,
+    abortListening: mockAbortListening,
+  },
+  useSpeechRecognition: vi.fn(() => ({
+    transcript: '',
+    browserSupportsSpeechRecognition: true,
+    resetTranscript: mockResetTranscript,
+  })),
+}));
 
 describe('WidgetTextField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockStartListening.mockImplementation(() => Promise.resolve());
+  });
+
   describe('Basic rendering', () => {
     it('should render with placeholder text', () => {
       render(
@@ -59,7 +85,7 @@ describe('WidgetTextField', () => {
           className="custom-class"
         />,
       );
-      const element = container.firstChild as HTMLElement;
+      const element = container.querySelector('.envive-tw-w-full') as HTMLElement;
       expect(element).toHaveClass('custom-class');
     });
 
@@ -71,7 +97,7 @@ describe('WidgetTextField', () => {
           style={{ marginTop: '20px' }}
         />,
       );
-      const element = container.firstChild as HTMLElement;
+      const element = container.querySelector('.envive-tw-w-full') as HTMLElement;
       expect(element).toHaveStyle({ marginTop: '20px' });
     });
   });
@@ -382,4 +408,93 @@ describe('WidgetTextField', () => {
       expect(svg).toBeInTheDocument();
     });
   });
+
+  describe('Voice input button', () => {
+    it('should render voice input button when enableVoiceInput is true', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          enableVoiceInput
+        />,
+      );
+      const voiceButton = container.querySelector('button');
+      expect(voiceButton).toBeInTheDocument();
+    });
+
+    it('should not render voice input button when enableVoiceInput is false', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          enableVoiceInput={false}
+        />,
+      );
+      const voiceButton = container.querySelector('button');
+      expect(voiceButton).not.toBeInTheDocument();
+    });
+
+    it('should not render voice input button when isLoading is true', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          enableVoiceInput
+          isLoading
+        />,
+      );
+      const voiceButton = container.querySelector('button');
+      expect(voiceButton).not.toBeInTheDocument();
+    });
+
+    it('should disable voice input button when disabled', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          enableVoiceInput
+          disabled
+        />,
+      );
+      const voiceButton = container.querySelector('button') as HTMLButtonElement;
+      expect(voiceButton).toBeDisabled();
+    });
+
+    it('should apply skeleton class when isLoading', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          enableVoiceInput
+          isLoading
+        />,
+      );
+      const element = container.querySelector('[class*="envive-tw"]');
+      expect(element?.className).toContain('envive-tw-animate-pulse');
+    });
+
+    it('should apply custom className when provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          className="custom-class"
+        />,
+      );
+      const element = container.querySelector('.custom-class');
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should apply custom style when provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          style={{ marginTop: '20px' }}
+        />,
+      );
+      const element = container.querySelector('[class*="envive-tw"]');
+      expect(element).toHaveStyle({ marginTop: '20px' });
+    });
+  });
 });

package/src/components/WidgetTextField/components/Container.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import { Stack } from '../../Stack';
-import { Container as ContainerComponent } from '../../Container';
 import { Theme } from '../../../../tokens/theme/theme';
+import { Container as ContainerComponent } from '../../Container';
+import { Stack } from '../../Stack';
 import { useGetContainerProperties } from '../hooks/useGetContainerProperties';
 import { useHandleKeyboard } from '../hooks/useHandleKeyboard';
 
@@ -11,9 +11,11 @@ type ContainerProps = {
   style?: React.CSSProperties;
   className?: string;
   theme: Theme;
+  minimalFrame?: 'full' | 'bottom-only';
   ariaLabel?: string;
   icon: React.ReactNode;
   text: React.ReactNode;
+  voiceInputButton?: React.ReactNode;
   disabled?: boolean;
   onClick?: () => void;
 };
@@ -24,43 +26,54 @@ export const Container = ({
   style,
   className,
   theme,
+  minimalFrame,
   ariaLabel,
   icon,
   text,
+  voiceInputButton,
   disabled,
   onClick,
 }: ContainerProps) => {
-  const { baseClassName, themeContainerClassName } = useGetContainerProperties({ theme });
+  const { baseClassName, themeContainerClassName, containerWrapperClassName } =
+    useGetContainerProperties({
+      theme,
+      minimalFrame,
+    });
 
   const { handleKeyDown } = useHandleKeyboard({ onClick });
 
   return (
-    <ContainerComponent
-      id={id}
-      testId={testId}
+    <div
+      className={containerWrapperClassName}
       style={style}
-      className={classNames(
-        className,
-        baseClassName,
-        themeContainerClassName,
-        disabled && 'envive-tw-pointer-events-none envive-tw-opacity-50',
-      )}
-      aria-label={ariaLabel}
-      fluid
-      onClick={onClick}
-      onKeyDown={handleKeyDown}
-      role="button"
-      tabIndex={onClick ? 0 : undefined}
     >
-      <Stack
-        direction="row"
-        align="center"
-        justify="between"
-        gap="2"
+      <ContainerComponent
+        id={id}
+        testId={testId}
+        className={classNames(
+          className,
+          baseClassName,
+          themeContainerClassName,
+          disabled && 'envive-tw-pointer-events-none envive-tw-opacity-50',
+        )}
+        aria-label={ariaLabel}
+        fluid
+        onClick={onClick}
+        onKeyDown={handleKeyDown}
+        role="button"
+        tabIndex={onClick ? 0 : undefined}
       >
-        <div className="envive-tw-min-w-0 envive-tw-flex-1 envive-tw-overflow-hidden">{text}</div>
-        <div className="envive-tw-flex-shrink-0">{icon}</div>
-      </Stack>
-    </ContainerComponent>
+        <Stack
+          direction="row"
+          align="center"
+          justify="between"
+          gap="2"
+        >
+          <div className="envive-tw-min-w-0 envive-tw-flex-1 envive-tw-overflow-hidden">{text}</div>
+          <div className="envive-tw-flex-shrink-0">{icon}</div>
+        </Stack>
+      </ContainerComponent>
+      {voiceInputButton}
+    </div>
   );
 };

package/src/components/WidgetTextField/hooks/useGetContainerProperties.ts

@@ -3,21 +3,33 @@ import { Theme } from '../../../../tokens/theme/theme';
 
 export type UseGetContainerPropertiesProps = {
   theme: Theme;
+  minimalFrame?: 'full' | 'bottom-only';
 };
 
-export const useGetContainerProperties = ({ theme }: UseGetContainerPropertiesProps) => {
+export const useGetContainerProperties = ({
+  theme,
+  minimalFrame = 'full',
+}: UseGetContainerPropertiesProps) => {
   const baseClassName =
     'envive-tw-cursor-text envive-tw-border-solid envive-tw-px-4 envive-tw-py-2';
 
   const themeContainerClassName = useMemo(() => {
+    const minimalBorderClass =
+      minimalFrame === 'bottom-only'
+        ? 'envive-tw-border-b-[1px] envive-tw-border-text-light'
+        : 'envive-tw-border-[1px] envive-tw-border-border-light';
+
     const themeCotainerMap = {
       [Theme.STANDARD]:
         'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-global-custom',
       [Theme.MODERN]: 'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-4',
-      [Theme.MINIMAL]: 'envive-tw-border-[1px] envive-tw-border-border-light',
+      [Theme.MINIMAL]: minimalBorderClass,
     };
     return themeCotainerMap[theme] ?? '';
-  }, [theme]);
+  }, [theme, minimalFrame]);
+
+  const containerWrapperClassName =
+    'envive-tw-gap-4 envive-tw-flex envive-tw-w-full envive-tw-flex-row';
 
-  return { baseClassName, themeContainerClassName };
+  return { baseClassName, themeContainerClassName, containerWrapperClassName };
 };