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

package/src/SendBox/SendButton.tsx

@@ -1,29 +1,22 @@
 import { hooks } from 'botframework-webchat-api';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
-import { ComponentIcon } from '../Icon';
-import useSubmit from '../providers/internal/SendBox/useSubmit';
 import IconButton from './IconButton';
+import SendIcon from './Assets/SendIcon';
+import useSubmit from '../providers/internal/SendBox/useSubmit';
 
-const { useDirection, useLocalizer, useUIState } = hooks;
-
-const sendButtonPropsSchema = pipe(
-  object({
-    className: optional(string())
-  }),
-  readonly()
-);
+import type { FC } from 'react';
 
-type SendButtonProps = InferInput<typeof sendButtonPropsSchema>;
+const { useDisabled, useLocalizer } = hooks;
 
-function SendButton(props: SendButtonProps) {
-  const [direction] = useDirection();
-  const { className } = validateProps(sendButtonPropsSchema, props);
+type SendButtonProps = {
+  className?: string;
+};
 
-  const [uiState] = useUIState();
+const SendButton: FC<SendButtonProps> = ({ className }) => {
+  const [disabled] = useDisabled();
   const localize = useLocalizer();
   const submit = useSubmit();
 
@@ -33,18 +26,20 @@ function SendButton(props: SendButtonProps) {
     <IconButton
       alt={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
       className={classNames('webchat__send-button', className)}
-      disabled={uiState === 'disabled'}
+      disabled={disabled}
       onClick={handleClick}
     >
-      <ComponentIcon
-        appearance="text"
-        className="webchat__send-icon"
-        direction={direction === 'rtl' ? 'rtl' : 'follow'}
-        icon="send"
-      />
+      <SendIcon />
     </IconButton>
   );
-}
+};
+
+SendButton.defaultProps = {
+  className: undefined
+};
+
+SendButton.propTypes = {
+  className: PropTypes.string
+};
 
 export default SendButton;
-export { sendButtonPropsSchema, type SendButtonProps };

package/src/SendBox/SuggestedAction.tsx

@@ -1,23 +1,21 @@
 import { hooks } from 'botframework-webchat-api';
-import { type DirectLineCardAction } from 'botframework-webchat-core';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import type { DirectLineCardAction } from 'botframework-webchat-core';
 import classNames from 'classnames';
-import React, { memo, useCallback, type MouseEventHandler } from 'react';
-import { any, literal, number, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
+import PropTypes from 'prop-types';
+import React, { MouseEventHandler, useCallback, VFC } from 'react';
 
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useLocalizeAccessKey from '../hooks/internal/useLocalizeAccessKey';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey';
 import useFocus from '../hooks/useFocus';
 import useScrollToEnd from '../hooks/useScrollToEnd';
 import useStyleSet from '../hooks/useStyleSet';
 import useItemRef from '../providers/RovingTabIndex/useItemRef';
-import testIds from '../testIds';
 import AccessibleButton from '../Utils/AccessibleButton';
 import useFocusAccessKeyEffect from '../Utils/AccessKeySink/useFocusAccessKeyEffect';
 
-const { useDirection, usePerformCardAction, useStyleOptions, useSuggestedActionsHooks, useUIState } = hooks;
+const { useDirection, useDisabled, usePerformCardAction, useStyleOptions, useSuggestedActions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__suggested-action': {
@@ -26,57 +24,47 @@ const ROOT_STYLE = {
   }
 };
 
-const suggestedActionPropsSchema = pipe(
-  object({
-    buttonText: string(),
-    className: optional(string()),
-    displayText: optional(string()),
-    image: optional(string()),
-    imageAlt: optional(string()),
-    itemIndex: number(),
-    text: optional(string()),
-    textClassName: optional(string()),
-    type: optional(
-      union([
-        literal('call'),
-        literal('downloadFile'),
-        literal('imBack'),
-        literal('messageBack'),
-        literal('openUrl'),
-        literal('playAudio'),
-        literal('playVideo'),
-        literal('postBack'),
-        literal('showImage'),
-        literal('signin')
-      ])
-    ),
-    value: any()
-  }),
-  readonly()
-);
-
-type SuggestedActionProps = InferInput<typeof suggestedActionPropsSchema>;
-
-function SuggestedAction(props: SuggestedActionProps) {
-  const {
-    buttonText,
-    className,
-    displayText = '',
-    image = '',
-    imageAlt,
-    itemIndex,
-    text = '',
-    textClassName,
-    type,
-    value
-  } = validateProps(suggestedActionPropsSchema, props);
+type SuggestedActionProps = {
+  buttonText: string;
+  className?: string;
+  displayText?: string;
+  image?: string;
+  imageAlt?: string;
+  itemIndex: number;
+  text?: string;
+  textClassName?: string;
+  type?:
+    | 'call'
+    | 'downloadFile'
+    | 'imBack'
+    | 'messageBack'
+    | 'openUrl'
+    | 'playAudio'
+    | 'playVideo'
+    | 'postBack'
+    | 'showImage'
+    | 'signin';
+  value?: any;
+};
 
-  const [_, setSuggestedActions] = useSuggestedActionsHooks().useSuggestedActions();
+const SuggestedAction: VFC<SuggestedActionProps> = ({
+  buttonText,
+  className,
+  displayText,
+  image,
+  imageAlt,
+  itemIndex,
+  text,
+  textClassName,
+  type,
+  value
+}) => {
+  const [_, setSuggestedActions] = useSuggestedActions();
   const [{ suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
   const [accessKey] = useSuggestedActionsAccessKey();
   const [direction] = useDirection();
-  const [uiState] = useUIState();
+  const [disabled] = useDisabled();
   const focus = useFocus();
   const focusRef = useItemRef<HTMLButtonElement>(itemIndex);
   const localizeAccessKeyAsAriaKeyShortcuts = useLocalizeAccessKey('aria-keyshortcuts');
@@ -121,10 +109,9 @@ function SuggestedAction(props: SuggestedActionProps) {
         },
         rootClassName,
         suggestedActionStyleSet + '',
-        className
+        (className || '') + ''
       )}
-      data-testid={testIds.suggestedActionButton}
-      disabled={uiState === 'disabled'}
+      disabled={disabled}
       onClick={handleClick}
       ref={focusRef}
       type="button"
@@ -139,11 +126,36 @@ function SuggestedAction(props: SuggestedActionProps) {
           src={image}
         />
       )}
-      <span className={classNames('webchat__suggested-action__text', textClassName)}>{buttonText}</span>
+      <span className={classNames('webchat__suggested-action__text', (textClassName || '') + '')}>{buttonText}</span>
       <div className="webchat__suggested-action__keyboard-focus-indicator" />
     </AccessibleButton>
   );
-}
+};
+
+SuggestedAction.defaultProps = {
+  className: '',
+  displayText: '',
+  image: '',
+  imageAlt: undefined,
+  text: '',
+  textClassName: '',
+  type: undefined,
+  value: undefined
+};
+
+SuggestedAction.propTypes = {
+  buttonText: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  displayText: PropTypes.string,
+  image: PropTypes.string,
+  imageAlt: PropTypes.string,
+  itemIndex: PropTypes.number.isRequired,
+  text: PropTypes.string,
+  textClassName: PropTypes.string,
+  // TypeScript class is not mappable to PropTypes.
+  // @ts-ignore
+  type: PropTypes.string,
+  value: PropTypes.any
+};
 
-export default memo(SuggestedAction);
-export { suggestedActionPropsSchema, type SuggestedActionProps };
+export default SuggestedAction;

package/src/SendBox/SuggestedActions.tsx

@@ -4,18 +4,19 @@ import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo, useRef } from 'react';
-import { createBasicStyleSet as createBasicStyleSetForReactFilm, ReactFilm } from 'react-film';
+// eslint-disable-next-line import/no-named-as-default
+import BasicFilm, { createBasicStyleSet as createBasicStyleSetForReactFilm } from 'react-film';
 
 import computeSuggestedActionText from '../Utils/computeSuggestedActionText';
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useFocusWithin from '../hooks/internal/useFocusWithin';
 import useNonce from '../hooks/internal/useNonce';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useFocus from '../hooks/useFocus';
 import useStyleSet from '../hooks/useStyleSet';
 import RovingTabIndexComposer from '../providers/RovingTabIndex/RovingTabIndexComposer';
 import SuggestedAction from './SuggestedAction';
 
-const { useDirection, useLocalizer, useStyleOptions, useSuggestedActionsHooks } = hooks;
+const { useDirection, useLocalizer, useStyleOptions, useSuggestedActions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__suggested-actions': {
@@ -88,7 +89,7 @@ const SuggestedActionCarouselContainer = ({ children, className, label }) => {
       role="toolbar"
     >
       {!!children && !!React.Children.count(children) && (
-        <ReactFilm
+        <BasicFilm
           autoCenter={false}
           className="webchat__suggested-actions__carousel"
           dir={direction}
@@ -101,7 +102,7 @@ const SuggestedActionCarouselContainer = ({ children, className, label }) => {
           styleSet={filmStyleSet}
         >
           {children}
-        </ReactFilm>
+        </BasicFilm>
       )}
       <div className="webchat__suggested-actions__focus-indicator" />
     </div>
@@ -126,6 +127,7 @@ const SuggestedActionFlowContainer = ({ children, className, label }) => {
   return (
     <div
       aria-label={label}
+      aria-live="polite"
       aria-orientation="horizontal"
       className={classNames(
         'webchat__suggested-actions',
@@ -166,6 +168,7 @@ const SuggestedActionStackedContainer = ({ children, className, label }) => {
   return (
     <div
       aria-label={label}
+      aria-live="polite"
       aria-orientation="vertical"
       className={classNames(
         'webchat__suggested-actions',
@@ -200,7 +203,7 @@ type SuggestedActionsProps = Readonly<{
 }>;
 
 const SuggestedActions = ({ className }: SuggestedActionsProps) => {
-  const [suggestedActions] = useSuggestedActionsHooks().useSuggestedActions();
+  const [suggestedActions] = useSuggestedActions();
   const [{ suggestedActionLayout, suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const localize = useLocalizer();
   const focus = useFocus();

package/src/SendBox/TextBox.tsx

@@ -1,12 +1,12 @@
 import { hooks } from 'botframework-webchat-api';
-import { usePonyfill } from 'botframework-webchat-api/hook.js';
 import classNames from 'classnames';
 import React, { useCallback, useMemo, useRef } from 'react';
 
 import AccessibleInputText from '../Utils/AccessibleInputText';
 import navigableEvent from '../Utils/TypeFocusSink/navigableEvent';
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import { ie11 } from '../Utils/detectBrowser';
 import { useRegisterFocusSendBox, type SendBoxFocusOptions } from '../hooks/sendBoxFocus';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useScrollDown from '../hooks/useScrollDown';
 import useScrollUp from '../hooks/useScrollUp';
 import useStyleSet from '../hooks/useStyleSet';
@@ -15,11 +15,8 @@ import withEmoji from '../withEmoji/withEmoji';
 import AutoResizeTextArea from './AutoResizeTextArea';
 
 import type { MutableRefObject } from 'react';
-import testIds from '../testIds';
 
-const { useLocalizer, useSendBoxValue, useStopDictate, useStyleOptions, useUIState } = hooks;
-
-const DEFAULT_INPUT_MODE = 'text';
+const { useDisabled, useLocalizer, usePonyfill, useSendBoxValue, useStopDictate, useStyleOptions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__send-box-text-box': {
@@ -85,7 +82,8 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
   const [value, setValue] = useSendBoxValue();
   const [{ sendBoxTextBox: sendBoxTextBoxStyleSet }] = useStyleSet();
   const [{ emojiSet, sendBoxTextWrap }] = useStyleOptions();
-  const [uiState] = useUIState();
+  const [{ setTimeout }] = usePonyfill();
+  const [disabled] = useDisabled();
   const inputElementRef: MutableRefObject<HTMLInputElement & HTMLTextAreaElement> = useRef();
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
@@ -93,7 +91,6 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
   const scrollUp = useScrollUp();
   const submitTextBox = useTextBoxSubmit();
 
-  const disabled = uiState === 'disabled';
   const sendBoxString = localize('TEXT_INPUT_ALT');
   const typeYourMessageString = localize('TEXT_INPUT_PLACEHOLDER');
 
@@ -165,56 +162,45 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
     [scrollDown, scrollUp]
   );
 
-  const [{ requestAnimationFrame, requestIdleCallback }] = usePonyfill();
-  const requestIdleCallbackWithPonyfill = useMemo(
-    () => requestIdleCallback ?? ((callback: () => void) => requestAnimationFrame(callback)),
-    [requestAnimationFrame, requestIdleCallback]
-  );
-
   const focusCallback = useCallback(
-    ({ noKeyboard, waitUntil }: SendBoxFocusOptions) => {
-      waitUntil(
-        (async () => {
-          const { current } = inputElementRef;
-
-          if (current) {
-            // Setting `inputMode` to `none` temporarily to suppress soft keyboard in iOS.
-            // We will revert the change once the end-user tap on the send box.
-            // This code path is only triggered when the user press "send" button to send the message, instead of pressing ENTER key.
-            if (noKeyboard) {
-              if (current.getAttribute('inputmode') !== 'none') {
-                // Collapse the virtual keybaord if it was expanded.
-                current.setAttribute('inputmode', 'none');
-
-                // iOS 26.3 quirks: `HTMLElement.focus()` does not pickup `inputmode="none"` changes immediately.
-                //                  We need to wait for next frame before calling `focus()`.
-                //                  This is a regression from iOS 26.2.
-                await new Promise<void>(resolve => requestIdleCallbackWithPonyfill(resolve));
+    (options: SendBoxFocusOptions) => {
+      const { noKeyboard } = options;
+      const { current } = inputElementRef;
+
+      if (current) {
+        // The "disable soft keyboard on mobile devices" logic will not work on IE11. It will cause the <input> to become read-only until next focus.
+        // Thus, no mobile devices carry IE11 so we don't need to explicitly disable soft keyboard on IE11.
+        // See #3757 for repro and details.
+        if (noKeyboard && !ie11) {
+          // To not activate the virtual keyboard while changing focus to an input, we will temporarily set it as read-only and flip it back.
+          // https://stackoverflow.com/questions/7610758/prevent-iphone-default-keyboard-when-focusing-an-input/7610923
+          const readOnly = current.getAttribute('readonly');
+
+          current.setAttribute('readonly', 'readonly');
+
+          options.waitUntil(
+            (async function () {
+              // TODO: [P2] We should update this logic to handle quickly-successive `focusCallback`.
+              //       If a succeeding `focusCallback` is being called, the `setTimeout` should run immediately.
+              //       Or the second `focusCallback` should not set `readonly` to `true`.
+              await new Promise(resolve => setTimeout(resolve, 0));
+
+              if (current) {
+                current.focus();
+                readOnly ? current.setAttribute('readonly', readOnly) : current.removeAttribute('readonly');
               }
-            } else if (current.hasAttribute('inputmode')) {
-              // Expanding the virtual keyboard if it was collapsed.
-              // However, we are not pausing here to workaround iOS 26.3 quirks.
-              // If we pause here, it will not able to handle this scenario: focus on an activity on the transcript, press A, the letter A should be inputted into the send box.
-              // In other words, if we pause here, the event will be send to the activity/transcript, instead of the newly focused send box.
-              // This is related to BasicTranscript.handleTranscriptKeyDownCapture().
-              current.removeAttribute('inputmode');
-            }
-
-            current?.focus();
-          }
-        })()
-      );
+            })()
+          );
+        } else {
+          current.focus();
+        }
+      }
     },
-    [inputElementRef, requestIdleCallbackWithPonyfill]
+    [inputElementRef, setTimeout]
   );
 
   useRegisterFocusSendBox(focusCallback);
 
-  const handleClick = useCallback(
-    ({ currentTarget }) => currentTarget.setAttribute('inputmode', DEFAULT_INPUT_MODE),
-    []
-  );
-
   const emojiMap = useMemo(() => new Map<string, string>(Object.entries(emojiSet)), [emojiSet]);
 
   return (
@@ -233,13 +219,11 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
           aria-label={sendBoxString}
           className="webchat__send-box-text-box__input"
           data-id="webchat-sendbox-input"
-          data-testid={testIds.sendBoxTextBox}
           disabled={disabled}
           emojiMap={emojiMap}
           enterKeyHint="send"
-          inputMode={DEFAULT_INPUT_MODE}
+          inputMode="text"
           onChange={setValue}
-          onClick={handleClick}
           onKeyDownCapture={disabled ? undefined : handleKeyDownCapture}
           onKeyPress={disabled ? undefined : handleKeyPress}
           placeholder={typeYourMessageString}
@@ -253,13 +237,11 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
           aria-label={sendBoxString}
           className="webchat__send-box-text-box__text-area"
           data-id="webchat-sendbox-input"
-          data-testid={testIds.sendBoxTextBox}
           disabled={disabled}
           emojiMap={emojiMap}
           enterKeyHint="send"
-          inputMode={DEFAULT_INPUT_MODE}
+          inputMode="text"
           onChange={setValue}
-          onClick={handleClick}
           onKeyDownCapture={disabled ? undefined : handleKeyDownCapture}
           onKeyPress={disabled ? undefined : handleKeyPress}
           placeholder={typeYourMessageString}

package/src/SendBoxToolbar/Assets/AttachmentIcon.tsx

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { ComponentIcon } from '../../Icon';
-import { useStyleToEmotionObject } from '../../hooks/internal/styleToEmotionObject';
+import useStyleToEmotionObject from '../../hooks/internal/useStyleToEmotionObject';
 
 type Props = Readonly<{ checked: boolean }>;
 
@@ -43,11 +42,29 @@ const AttachmentIcon = ({ checked }: Props) => {
         rootClassName
       )}
     >
-      <ComponentIcon
-        appearance="text"
+      <svg
         className="webchat__attachment-icon__icon"
-        icon={checked ? 'attachment-checkmark' : 'attachment'}
-      />
+        focusable={false}
+        height={28}
+        role="presentation"
+        viewBox="0 0 25.75 46"
+        width={28}
+      >
+        <path
+          clipRule="evenodd"
+          d="M20.75 11.75v21.37a7.69 7.69 0 0 1-.62 3.07 7.95 7.95 0 0 1-4.19 4.19 7.89 7.89 0 0 1-6.13 0 7.95 7.95 0 0 1-4.19-4.19 7.69 7.69 0 0 1-.62-3.07v-22.5a5.27 5.27 0 0 1 .45-2.17 5.69 5.69 0 0 1 3-3 5.48 5.48 0 0 1 4.35 0 5.69 5.69 0 0 1 3 3 5.27 5.27 0 0 1 .45 2.17v22.5a3.41 3.41 0 0 1-.26 1.32 3.31 3.31 0 0 1-1.8 1.8 3.46 3.46 0 0 1-2.63 0 3.31 3.31 0 0 1-1.8-1.8 3.41 3.41 0 0 1-.26-1.32V14h2.25v19.12a1.13 1.13 0 1 0 2.25 0v-22.5a3.4 3.4 0 0 0-.26-1.31 3.31 3.31 0 0 0-1.8-1.8 3.46 3.46 0 0 0-2.63 0 3.31 3.31 0 0 0-1.8 1.8 3.4 3.4 0 0 0-.26 1.31v22.5a5.32 5.32 0 0 0 .45 2.18 5.69 5.69 0 0 0 3 3 5.48 5.48 0 0 0 4.35 0 5.69 5.69 0 0 0 3-3 5.32 5.32 0 0 0 .45-2.18v-21.37z"
+        />
+      </svg>
+      <svg
+        className="webchat__attachment-icon__icon webchat__attachment-icon__checkmark-icon"
+        focusable={false}
+        height={10}
+        role="presentation"
+        viewBox="0 0 10 10"
+        width={10}
+      >
+        <path d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM7.10356 4.10355L4.85357 6.35356C4.65831 6.54883 4.34173 6.54883 4.14646 6.35357L3.14645 5.35357C2.95119 5.1583 2.95118 4.84172 3.14644 4.64646C3.34171 4.45119 3.65829 4.45119 3.85355 4.64645L4.50001 5.29291L6.39644 3.39645C6.59171 3.20119 6.90829 3.20118 7.10355 3.39644C7.29881 3.59171 7.29882 3.90829 7.10356 4.10355Z" />
+      </svg>
     </div>
   );
 };

package/src/SendBoxToolbar/BasicSendBoxToolbar.tsx

@@ -5,12 +5,10 @@ import UploadButton from './UploadButton';
 
 const { useStyleOptions } = hooks;
 
-// NOTE: "hideUploadButton" is deprecated. Use "disableFileUpload" instead.
-//       Rectification logic is handled in normalizeStyleOptions.ts
 function BasicSendBoxToolbar({ className }: SendBoxToolbarMiddlewareProps) {
-  const [{ disableFileUpload }] = useStyleOptions();
+  const [{ hideUploadButton }] = useStyleOptions();
 
-  return !disableFileUpload && <UploadButton className={className} />;
+  return !hideUploadButton && <UploadButton className={className} />;
 }
 
 export default memo(BasicSendBoxToolbar);

package/src/SendBoxToolbar/UploadButton.tsx

@@ -1,20 +1,18 @@
 import { hooks } from 'botframework-webchat-api';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import classNames from 'classnames';
-import random from 'math-random';
-import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
+import PropTypes from 'prop-types';
+import React, { useCallback, useRef, type FC, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { object, pipe, readonly, string, type InferInput } from 'valibot';
 
 import IconButton from '../SendBox/IconButton';
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
-import useFocus from '../hooks/useFocus';
 import useMakeThumbnail from '../hooks/useMakeThumbnail';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import useFocus from '../hooks/useFocus';
 import useStyleSet from '../hooks/useStyleSet';
 import useSubmit from '../providers/internal/SendBox/useSubmit';
 import AttachmentIcon from './Assets/AttachmentIcon';
 
-const { useSendBoxAttachments, useLocalizer, useStyleOptions, useUIState } = hooks;
+const { useDisabled, useSendBoxAttachments, useLocalizer, useStyleOptions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__upload-button': {
@@ -35,23 +33,15 @@ const ROOT_STYLE = {
 
 const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
 
-const uploadButtonPropsSchema = pipe(
-  object({
-    className: string()
-  }),
-  readonly()
-);
-
-type UploadButtonProps = InferInput<typeof uploadButtonPropsSchema>;
-
-function UploadButton(props: UploadButtonProps) {
-  const { className } = validateProps(uploadButtonPropsSchema, props);
+type UploadButtonProps = {
+  className?: string;
+};
 
+const UploadButton: FC<UploadButtonProps> = ({ className }) => {
   const [{ sendAttachmentOn, uploadAccept, uploadMultiple }] = useStyleOptions();
   const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
-  const [inputKey, setInputKey] = useState<number>(0);
+  const [disabled] = useDisabled();
   const [sendBoxAttachments, setSendBoxAttachments] = useSendBoxAttachments();
-  const [uiState] = useUIState();
   const focus = useFocus();
   const inputRef = useRef<HTMLInputElement>(null);
   const localize = useLocalizer();
@@ -59,9 +49,7 @@ function UploadButton(props: UploadButtonProps) {
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const submit = useSubmit();
 
-  const disabled = uiState === 'disabled';
   const sendAttachmentOnRef = useRefFrom(sendAttachmentOn);
-  const sendBoxAttachmentsRef = useRefFrom(sendBoxAttachments);
   const uploadFileString = localize('TEXT_INPUT_UPLOAD_BUTTON_ALT');
 
   const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => inputRef.current?.click(), [inputRef]);
@@ -75,30 +63,17 @@ function UploadButton(props: UploadButtonProps) {
       //            Otherwise, if the user click the send button too quickly, it will not attach any files.
       (async function () {
         setSendBoxAttachments(
-          Object.freeze([
-            ...sendBoxAttachmentsRef.current,
-            ...(await Promise.all(
-              Array.from(currentTarget.files).map(async (blob: File) => {
-                const entry = sendBoxAttachmentsRef.current.find(entry => entry.blob === blob);
-
-                if (entry) {
-                  return entry;
-                }
-
-                const thumbnailURL = await makeThumbnail(blob);
-
-                return { blob, thumbnailURL };
-              })
-            ))
-          ])
+          Object.freeze(
+            await Promise.all(
+              [...currentTarget.files].map(blob => makeThumbnail(blob).then(thumbnailURL => ({ blob, thumbnailURL })))
+            )
+          )
         );
 
-        setInputKey(random());
-
         sendAttachmentOnRef.current === 'attach' && submit();
       })();
     },
-    [focus, makeThumbnail, sendBoxAttachmentsRef, sendAttachmentOnRef, setInputKey, setSendBoxAttachments, submit]
+    [focus, makeThumbnail, sendAttachmentOnRef, setSendBoxAttachments, submit]
   );
 
   return (
@@ -108,9 +83,6 @@ function UploadButton(props: UploadButtonProps) {
         aria-disabled={disabled}
         aria-hidden="true"
         className="webchat__upload-button--file-input"
-        // Recreates the <input> element after every upload to prevent issues in WebDriver.
-        // Otherwise, on second upload, WebDriver will resend files from first upload as new Blob/File instance and it will cause duplicates.
-        key={inputKey}
         multiple={uploadMultiple}
         onChange={disabled ? undefined : handleFileChange}
         onClick={disabled ? PREVENT_DEFAULT_HANDLER : undefined}
@@ -125,7 +97,14 @@ function UploadButton(props: UploadButtonProps) {
       </IconButton>
     </div>
   );
-}
+};
+
+UploadButton.defaultProps = {
+  className: undefined
+};
+
+UploadButton.propTypes = {
+  className: PropTypes.string
+};
 
-export default memo(UploadButton);
-export { uploadButtonPropsSchema, type UploadButtonProps };
+export default UploadButton;