botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/SendBox/AutoResizeTextArea.tsx

@@ -1,39 +1,37 @@
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React, {
   ChangeEventHandler,
   FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
-  ReactEventHandler,
-  type MouseEventHandler
+  ReactEventHandler
 } from 'react';
 
 import AccessibleTextArea from '../Utils/AccessibleTextArea';
 import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 import useStyleSet from '../hooks/useStyleSet';
 
-type AutoResizeTextAreaProps = Readonly<{
-  'aria-errormessage'?: string | undefined;
-  'aria-label'?: string | undefined;
-  className?: string | undefined;
-  'data-id'?: string | undefined;
-  'data-testid'?: string | undefined;
-  disabled?: boolean | undefined;
-  enterKeyHint?: string | undefined;
-  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined;
-  onChange?: ChangeEventHandler<HTMLTextAreaElement> | undefined;
-  onClick?: MouseEventHandler<HTMLTextAreaElement> | undefined;
-  onFocus?: FocusEventHandler<HTMLTextAreaElement> | undefined;
-  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
-  onKeyDownCapture?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
-  onKeyPress?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
-  onSelect?: ReactEventHandler<HTMLTextAreaElement> | undefined;
-  placeholder?: string | undefined;
-  readOnly?: boolean | undefined;
-  rows?: number | undefined;
-  textAreaClassName?: string | undefined;
-  value?: string | undefined;
-}>;
+type AutoResizeTextAreaProps = {
+  'aria-errormessage'?: string;
+  'aria-label'?: string;
+  className?: string;
+  'data-id'?: string;
+  disabled?: boolean;
+  enterKeyHint?: string;
+  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onKeyDownCapture?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onKeyPress?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onSelect?: ReactEventHandler<HTMLTextAreaElement>;
+  placeholder?: string;
+  readOnly?: boolean;
+  rows?: number;
+  textAreaClassName?: string;
+  value?: string;
+};
 
 const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaProps>(
   (
@@ -42,12 +40,10 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
       'aria-label': ariaLabel,
       className,
       'data-id': dataId,
-      'data-testid': dataTestId,
       disabled,
       enterKeyHint,
       inputMode,
       onChange,
-      onClick,
       onFocus,
       onKeyDown,
       onKeyDownCapture,
@@ -76,11 +72,9 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
           aria-label={ariaLabel}
           className={classNames('webchat__auto-resize-textarea__textarea', textAreaClassName)}
           data-id={dataId}
-          data-testid={dataTestId}
           disabled={disabled}
           inputMode={inputMode}
           onChange={onChange}
-          onClick={onClick}
           onFocus={onFocus}
           onKeyDown={onKeyDown}
           onKeyDownCapture={onKeyDownCapture}
@@ -97,4 +91,46 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
   }
 );
 
+AutoResizeTextArea.defaultProps = {
+  'aria-errormessage': undefined,
+  'aria-label': undefined,
+  'data-id': undefined,
+  className: undefined,
+  disabled: undefined,
+  enterKeyHint: undefined,
+  inputMode: undefined,
+  onChange: undefined,
+  onFocus: undefined,
+  onKeyDown: undefined,
+  onKeyDownCapture: undefined,
+  onKeyPress: undefined,
+  onSelect: undefined,
+  placeholder: undefined,
+  readOnly: undefined,
+  rows: undefined,
+  textAreaClassName: undefined,
+  value: ''
+};
+
+AutoResizeTextArea.propTypes = {
+  'aria-errormessage': PropTypes.string,
+  'aria-label': PropTypes.string,
+  className: PropTypes.string,
+  'data-id': PropTypes.string,
+  disabled: PropTypes.bool,
+  enterKeyHint: PropTypes.string,
+  inputMode: PropTypes.oneOf(['text', 'none', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyDownCapture: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onSelect: PropTypes.func,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  rows: PropTypes.number,
+  textAreaClassName: PropTypes.string,
+  value: PropTypes.string
+};
+
 export default AutoResizeTextArea;

package/src/SendBox/BasicSendBox.tsx

@@ -1,132 +1,68 @@
 import { SendBoxToolbarMiddlewareProxy, hooks } from 'botframework-webchat-api';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { Constants } from 'botframework-webchat-core';
 import classNames from 'classnames';
-import React, { memo, useCallback, type ClipboardEventHandler } from 'react';
-import { useRefFrom } from 'use-ref-from';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import React, { FC } from 'react';
 
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
-import useMakeThumbnail from '../hooks/useMakeThumbnail';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useStyleSet from '../hooks/useStyleSet';
 import useWebSpeechPonyfill from '../hooks/useWebSpeechPonyfill';
 import useErrorMessageId from '../providers/internal/SendBox/useErrorMessageId';
-import useSubmit from '../providers/internal/SendBox/useSubmit';
-import { AttachmentBar } from './AttachmentBar/index';
 import DictationInterims from './DictationInterims';
-import DropZone from './DropZone';
 import MicrophoneButton from './MicrophoneButton';
 import SendButton from './SendButton';
 import SuggestedActions from './SuggestedActions';
 import TextBox from './TextBox';
 
+import type { WebChatActivity } from 'botframework-webchat-core';
+
 const {
   DictateState: { DICTATING, STARTING }
 } = Constants;
 
-const { useDirection, useDictateState, useSendBoxAttachments, useStyleOptions, useUIState } = hooks;
+const { useActivities, useDirection, useDictateState, useStyleOptions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__send-box': {
-    display: 'grid',
-    gridTemplateAreas: '"suggested-actions" "content"',
-    gridTemplateRows: 'auto 1fr',
-
-    '& .webchat__suggested-actions': {
-      gridArea: 'suggested-actions',
-      minWidth: '0'
-    },
-
-    '& .webchat__send-box__main': {
-      gridArea: 'content',
-      minWidth: '0'
-    },
-
-    '& .webchat__drop-zone': {
-      gridArea: 'content',
-      minWidth: '0'
-    },
-
     '& .webchat__send-box__button': { flexShrink: 0 },
     '& .webchat__send-box__dictation-interims': { flex: 10000 },
+    '& .webchat__send-box__main': { display: 'flex' },
     '& .webchat__send-box__microphone-button': { flex: 1 },
     '& .webchat__send-box__text-box': { flex: 10000 }
   }
 };
 
+// TODO: [P3] We should consider exposing core/src/definitions and use it instead
+function activityIsSpeakingOrQueuedToSpeak(activity: WebChatActivity) {
+  return activity.type === 'message' && activity.channelData?.speak;
+}
+
 function useSendBoxSpeechInterimsVisible(): [boolean] {
+  const [activities] = useActivities();
   const [dictateState] = useDictateState();
 
-  return [dictateState === STARTING || dictateState === DICTATING];
+  return [
+    (dictateState === STARTING || dictateState === DICTATING) &&
+      !activities.filter(activityIsSpeakingOrQueuedToSpeak).length
+  ];
 }
 
-const basicSendBoxPropsSchema = pipe(
-  object({
-    className: optional(string())
-  }),
-  readonly()
-);
-
-type BasicSendBoxProps = InferInput<typeof basicSendBoxPropsSchema>;
-
-function BasicSendBox(props: BasicSendBoxProps) {
-  const { className } = validateProps(basicSendBoxPropsSchema, props);
+type BasicSendBoxProps = Readonly<{
+  className?: string;
+}>;
 
-  const [{ disableFileUpload, sendAttachmentOn, sendBoxButtonAlignment }] = useStyleOptions();
+const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
+  const [{ sendBoxButtonAlignment }] = useStyleOptions();
   const [{ sendBox: sendBoxStyleSet }] = useStyleSet();
   const [{ SpeechRecognition = undefined } = {}] = useWebSpeechPonyfill();
   const [direction] = useDirection();
   const [errorMessageId] = useErrorMessageId();
-  const [sendBoxAttachments, setSendBoxAttachments] = useSendBoxAttachments();
   const [speechInterimsVisible] = useSendBoxSpeechInterimsVisible();
-  const [uiState] = useUIState();
-  const makeThumbnail = useMakeThumbnail();
   const styleToEmotionObject = useStyleToEmotionObject();
-  const submit = useSubmit();
 
   const rootClassName = styleToEmotionObject(ROOT_STYLE) + '';
 
-  const disabled = uiState === 'disabled';
-  const sendAttachmentOnRef = useRefFrom(sendAttachmentOn);
-  const sendBoxAttachmentsRef = useRefFrom(sendBoxAttachments);
-
   const supportSpeechRecognition = !!SpeechRecognition;
 
-  const handleAddFiles = useCallback(
-    async (inputFiles: readonly File[]) => {
-      const newAttachments = Object.freeze(
-        await Promise.all(
-          inputFiles.map(file =>
-            makeThumbnail(file).then(thumbnailURL =>
-              Object.freeze({ blob: file, ...(thumbnailURL && { thumbnailURL }) })
-            )
-          )
-        )
-      );
-
-      setSendBoxAttachments(Object.freeze([].concat(sendBoxAttachmentsRef.current, newAttachments)));
-
-      sendAttachmentOnRef.current === 'attach' && submit();
-    },
-    [makeThumbnail, sendAttachmentOnRef, sendBoxAttachmentsRef, setSendBoxAttachments, submit]
-  );
-
-  const handlePaste = useCallback<ClipboardEventHandler>(
-    event => {
-      if (disableFileUpload || disabled) {
-        return;
-      }
-
-      const { files } = event.clipboardData;
-
-      if (files.length) {
-        event.preventDefault();
-        handleAddFiles(Object.freeze(Array.from(files)));
-      }
-    },
-    [disabled, disableFileUpload, handleAddFiles]
-  );
-
   const buttonClassName = classNames('webchat__send-box__button', {
     'webchat__send-box__button--align-bottom': sendBoxButtonAlignment === 'bottom',
     'webchat__send-box__button--align-stretch': sendBoxButtonAlignment !== 'bottom' && sendBoxButtonAlignment !== 'top',
@@ -135,35 +71,30 @@ function BasicSendBox(props: BasicSendBoxProps) {
 
   return (
     <div
-      aria-describedby={errorMessageId}
       aria-errormessage={errorMessageId}
       aria-invalid={!!errorMessageId}
       className={classNames('webchat__send-box', sendBoxStyleSet + '', rootClassName + '', (className || '') + '')}
       dir={direction}
-      onPaste={handlePaste}
       role="form"
     >
       <SuggestedActions />
       <div className="webchat__send-box__main">
-        <AttachmentBar className="webchat__send-box__attachment-bar" />
         <SendBoxToolbarMiddlewareProxy className={buttonClassName} request={undefined} />
-        <div className="webchat__send-box__editable">
-          {speechInterimsVisible ? (
-            <DictationInterims className="webchat__send-box__dictation-interims" />
-          ) : (
-            <TextBox className="webchat__send-box__text-box" />
-          )}
-        </div>
+        {speechInterimsVisible ? (
+          <DictationInterims className="webchat__send-box__dictation-interims" />
+        ) : (
+          <TextBox className="webchat__send-box__text-box" />
+        )}
         {supportSpeechRecognition ? (
           <MicrophoneButton className={classNames(buttonClassName, 'webchat__send-box__microphone-button')} />
         ) : (
           <SendButton className={buttonClassName} />
         )}
       </div>
-      {!disableFileUpload && !disabled && <DropZone onFilesAdded={handleAddFiles} />}
     </div>
   );
-}
+};
+
+export default BasicSendBox;
 
-export default memo(BasicSendBox);
-export { basicSendBoxPropsSchema, useSendBoxSpeechInterimsVisible, type BasicSendBoxProps };
+export { useSendBoxSpeechInterimsVisible };

package/src/SendBox/DictationInterims.tsx

@@ -1,15 +1,13 @@
 /* eslint react/no-array-index-key: "off" */
 
-import { hooks } from 'botframework-webchat-api';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { Constants } from 'botframework-webchat-core';
+import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { memo } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useStyleSet from '../hooks/useStyleSet';
-import testIds from '../testIds';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
 const {
   DictateState: { DICTATING, STARTING, STOPPING }
@@ -22,18 +20,11 @@ const ROOT_STYLE = {
   display: 'flex'
 };
 
-const dictationInterimsPropsSchema = pipe(
-  object({
-    className: optional(string())
-  }),
-  readonly()
-);
-
-type DictationInterimsProps = InferInput<typeof dictationInterimsPropsSchema>;
-
-function DictationInterims(props: DictationInterimsProps) {
-  const { className } = validateProps(dictationInterimsPropsSchema, props);
+type DictationInterimsProps = {
+  className?: string;
+};
 
+const DictationInterims: FC<DictationInterimsProps> = ({ className }) => {
   const [dictateInterims] = useDictateInterims();
   const [dictateState] = useDictateState();
   const [{ dictationInterims: dictationInterimsStyleSet }] = useStyleSet();
@@ -41,19 +32,13 @@ function DictationInterims(props: DictationInterimsProps) {
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   return dictateState === STARTING || dictateState === STOPPING ? (
-    <p
-      className={classNames(dictationInterimsStyleSet + '', rootClassName, className, 'status')}
-      data-testid={testIds.sendBoxSpeechBox}
-    >
+    <p className={classNames(dictationInterimsStyleSet + '', rootClassName, (className || '') + '', 'status')}>
       {dictateState === STARTING && localize('SPEECH_INPUT_STARTING')}
     </p>
   ) : (
     dictateState === DICTATING &&
       (dictateInterims.length ? (
-        <p
-          className={classNames(dictationInterimsStyleSet + '', rootClassName, className, 'dictating')}
-          data-testid={testIds.sendBoxSpeechBox}
-        >
+        <p className={classNames(dictationInterimsStyleSet + '', rootClassName, (className || '') + '', 'dictating')}>
           {dictateInterims.map((interim, index) => (
             <span key={index}>
               {interim}
@@ -62,18 +47,22 @@ function DictationInterims(props: DictationInterimsProps) {
           ))}
         </p>
       ) : (
-        <p
-          className={classNames(dictationInterimsStyleSet + '', rootClassName, className, 'status')}
-          data-testid={testIds.sendBoxSpeechBox}
-        >
+        <p className={classNames(dictationInterimsStyleSet + '', rootClassName, (className || '') + '', 'status')}>
           {localize('SPEECH_INPUT_LISTENING')}
         </p>
       ))
   );
-}
+};
+
+DictationInterims.defaultProps = {
+  className: ''
+};
+
+DictationInterims.propTypes = {
+  className: PropTypes.string
+};
 
 // TODO: [P3] After speech started, when clicking on the transcript, it should
 //       stop the dictation and allow the user to type-correct the transcript
 
-export default memo(DictationInterims);
-export { dictationInterimsPropsSchema, type DictationInterimsProps };
+export default DictationInterims;

package/src/SendBox/IconButton.tsx

@@ -1,39 +1,23 @@
 import { hooks } from 'botframework-webchat-api';
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import classNames from 'classnames';
-import React, { memo, useRef, type MouseEventHandler } from 'react';
-import { boolean, custom, function_, is, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import PropTypes from 'prop-types';
+import React, { FC, MouseEventHandler, ReactNode, useRef } from 'react';
 
+import AccessibleButton from '../Utils/AccessibleButton';
 import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useStyleSet from '../hooks/useStyleSet';
-import AccessibleButton from '../Utils/AccessibleButton';
 
 const { useStyleOptions } = hooks;
 
-const iconButtonPropsSchema = pipe(
-  object({
-    alt: optional(string()),
-    children: optional(reactNode()),
-    className: optional(string()),
-    'data-testid': optional(string()),
-    disabled: optional(boolean()),
-    onClick: optional(custom<MouseEventHandler<HTMLButtonElement>>(value => is(function_(), value)))
-  }),
-  readonly()
-);
-
-type IconButtonProps = InferInput<typeof iconButtonPropsSchema>;
-
-function IconButton(props: IconButtonProps) {
-  const {
-    alt,
-    children,
-    className,
-    'data-testid': dataTestid,
-    disabled,
-    onClick
-  } = validateProps(iconButtonPropsSchema, props);
+type IconButtonProps = {
+  alt?: string;
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+};
 
+const IconButton: FC<IconButtonProps> = ({ alt, children, className, disabled, onClick }) => {
   const [{ sendBoxButton: sendBoxButtonStyleSet }] = useStyleSet();
   const [{ sendBoxButtonAlignment }] = useStyleOptions();
   const buttonRef = useRef<HTMLButtonElement>();
@@ -49,9 +33,8 @@ function IconButton(props: IconButtonProps) {
           'webchat__icon-button--focus-visible': focusVisible,
           'webchat__icon-button--stretch': sendBoxButtonAlignment !== 'bottom' && sendBoxButtonAlignment !== 'top'
         },
-        className
+        className + ''
       )}
-      data-testid={dataTestid}
       disabled={disabled}
       onClick={disabled ? undefined : onClick}
       ref={buttonRef}
@@ -63,7 +46,22 @@ function IconButton(props: IconButtonProps) {
       <div className="webchat__icon-button__keyboard-focus-indicator" />
     </AccessibleButton>
   );
-}
+};
+
+IconButton.defaultProps = {
+  alt: '',
+  children: undefined,
+  className: '',
+  disabled: false,
+  onClick: undefined
+};
+
+IconButton.propTypes = {
+  alt: PropTypes.string,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func
+};
 
-export default memo(IconButton);
-export { iconButtonPropsSchema, type IconButtonProps };
+export default IconButton;

package/src/SendBox/MicrophoneButton.tsx

@@ -5,28 +5,27 @@ import { hooks } from 'botframework-webchat-api';
 import { Constants } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import memoize from 'memoize-one';
-import React, { memo, useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import React, { FC, useCallback, useState } from 'react';
 
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useDictateAbortable from '../hooks/useDictateAbortable';
 import useStyleSet from '../hooks/useStyleSet';
 import useWebSpeechPonyfill from '../hooks/useWebSpeechPonyfill';
-import { useLiveRegion } from '../providers/LiveRegionTwin';
-import { ComponentIcon } from '../Icon';
+import MicrophoneIcon from './Assets/MicrophoneIcon';
 import IconButton from './IconButton';
-import testIds from '../testIds';
 
 const { DictateState } = Constants;
 
 const {
   useDictateInterims,
   useDictateState,
+  useDisabled,
   useLocalizer,
   useSendBoxValue,
   useShouldSpeakIncomingActivity,
   useStartDictate,
-  useStopDictate,
-  useUIState
+  useStopDictate
 } = hooks;
 
 const ROOT_STYLE = {
@@ -98,21 +97,21 @@ function useMicrophoneButtonClick(): () => void {
 function useMicrophoneButtonDisabled(): [boolean] {
   const [abortable] = useDictateAbortable();
   const [dictateState] = useDictateState();
-  const [uiState] = useUIState();
+  const [disabled] = useDisabled();
 
   return [
-    uiState === 'disabled' ||
+    disabled ||
       dictateState === DictateState.STARTING ||
       dictateState === DictateState.STOPPING ||
       (dictateState === DictateState.DICTATING && !abortable)
   ];
 }
 
-type MicrophoneButtonProps = Readonly<{
-  className?: string | undefined;
-}>;
+type MicrophoneButtonProps = {
+  className?: string;
+};
 
-const MicrophoneButton = ({ className }: MicrophoneButtonProps) => {
+const MicrophoneButton: FC<MicrophoneButtonProps> = ({ className }) => {
   const [{ microphoneButton: microphoneButtonStyleSet }] = useStyleSet();
   const [dictateState] = useDictateState();
   const [disabled] = useMicrophoneButtonDisabled();
@@ -122,12 +121,6 @@ const MicrophoneButton = ({ className }: MicrophoneButtonProps) => {
 
   const dictating = dictateState === DictateState.DICTATING;
 
-  const message = localize(
-    dictating ? 'SPEECH_INPUT_MICROPHONE_BUTTON_OPEN_ALT' : 'SPEECH_INPUT_MICROPHONE_BUTTON_CLOSE_ALT'
-  );
-
-  useLiveRegion(() => message && <div className="webchat__microphone-button__status">{message}</div>, [message]);
-
   return (
     <div
       aria-controls="webchatSendBoxMicrophoneButton"
@@ -142,25 +135,26 @@ const MicrophoneButton = ({ className }: MicrophoneButtonProps) => {
       <IconButton
         alt={localize('TEXT_INPUT_SPEAK_BUTTON_ALT')}
         className="webchat__microphone-button__button"
-        data-testid={testIds.sendBoxMicrophoneButton}
         disabled={disabled}
         onClick={click}
       >
-        <ComponentIcon
-          appearance="text"
-          className="webchat__microphone-icon webchat__microphone-button__icon"
-          icon="microphone"
-        />
+        <MicrophoneIcon className="webchat__microphone-button__icon" />
       </IconButton>
-      <div className="sr-only" id="webchatSendBoxMicrophoneButton">
-        {message}
+      <div aria-live="polite" className="sr-only" id="webchatSendBoxMicrophoneButton" role="status">
+        {localize(dictating ? 'SPEECH_INPUT_MICROPHONE_BUTTON_OPEN_ALT' : 'SPEECH_INPUT_MICROPHONE_BUTTON_CLOSE_ALT')}
       </div>
     </div>
   );
 };
 
-MicrophoneButton.displayName = 'MicrophoneButton';
+MicrophoneButton.defaultProps = {
+  className: ''
+};
+
+MicrophoneButton.propTypes = {
+  className: PropTypes.string
+};
 
-export default memo(MicrophoneButton);
+export default MicrophoneButton;
 
 export { useMicrophoneButtonClick, useMicrophoneButtonDisabled };