botframework-webchat-component 4.13.0 → 4.14.2

package/src/ScreenReaderActivity.js

@@ -3,11 +3,11 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Fragment, useMemo } from 'react';
 
-import textFormatToContentType from './Utils/textFormatToContentType';
-import useStripMarkdown from './hooks/internal/useStripMarkdown';
+import activityAltText from './Utils/activityAltText';
 import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
+import useRenderMarkdownAsHTML from './hooks/useRenderMarkdownAsHTML';
 
 const { useAvatarForBot, useCreateAttachmentForScreenReaderRenderer, useDateFormatter, useLocalizer } = hooks;
 
@@ -32,45 +32,63 @@ const ACTIVITY_NUM_ATTACHMENTS_ALT_IDS = {
   two: 'ACTIVITY_NUM_ATTACHMENTS_TWO_ALT'
 };
 
+const ScreenReaderAttachments = ({ activity, renderAttachments }) => {
+  const { attachments = [] } = activity;
+  const createAttachmentForScreenReaderRenderer = useCreateAttachmentForScreenReaderRenderer();
+  const localizeWithPlural = useLocalizer({ plural: true });
+
+  const attachmentForScreenReaderRenderers = renderAttachments
+    ? attachments
+        .map(attachment => createAttachmentForScreenReaderRenderer({ activity, attachment }))
+        .filter(render => render)
+    : [];
+
+  const numGenericAttachments = attachments.length - attachmentForScreenReaderRenderers.length;
+
+  const numAttachmentsAlt =
+    !!numGenericAttachments && localizeWithPlural(ACTIVITY_NUM_ATTACHMENTS_ALT_IDS, numGenericAttachments);
+
+  return (
+    <Fragment>
+      {!!attachmentForScreenReaderRenderers.length && (
+        <ul>
+          {attachmentForScreenReaderRenderers.map((render, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={index}>{render()}</li>
+          ))}
+        </ul>
+      )}
+      {numAttachmentsAlt && <p>{numAttachmentsAlt}</p>}
+    </Fragment>
+  );
+};
+
+ScreenReaderAttachments.propTypes = {
+  activity: PropTypes.shape({
+    attachments: PropTypes.array
+  }).isRequired,
+  renderAttachments: PropTypes.bool.isRequired
+};
+
 // When "renderAttachments" is false, we will not render the content of attachments.
 // That means, it will only render "2 attachments", instead of "image attachment".
 // This is used in the visual transcript, where we render "Press ENTER to interact."
 const ScreenReaderActivity = ({ activity, children, id, renderAttachments }) => {
   const [{ initials: botInitials }] = useAvatarForBot();
-  const createAttachmentForScreenReaderRenderer = useCreateAttachmentForScreenReaderRenderer();
   const formatDate = useDateFormatter();
   const localize = useLocalizer();
-  const localizeWithPlural = useLocalizer({ plural: true });
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const textAlt = useMemo(() => activityAltText(activity, renderMarkdownAsHTML), [activity, renderMarkdownAsHTML]);
 
-  const {
-    attachments = [],
-    channelData: { messageBack: { displayText: messageBackDisplayText } = {} } = {},
-    from: { role } = {},
-    text,
-    textFormat,
-    timestamp
-  } = activity;
+  const { channelData: { 'webchat:fallback-text': fallbackText } = {}, from: { role } = {}, timestamp } = activity;
 
   const fromUser = role === 'user';
-  const contentTypeMarkdown = textFormatToContentType(textFormat) === 'text/markdown';
-  const displayText = messageBackDisplayText || text;
-
-  const attachmentForScreenReaderRenderers = renderAttachments
-    ? attachments
-        .map(attachment => createAttachmentForScreenReaderRenderer({ activity, attachment }))
-        .filter(render => render)
-    : [];
 
-  const greetingAlt = (fromUser
-    ? localize('ACTIVITY_YOU_SAID_ALT')
-    : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
+  const greetingAlt = (
+    fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
   ).replace(/\s{2,}/gu, ' ');
-  const numGenericAttachments = attachments.length - attachmentForScreenReaderRenderers.length;
 
-  const numAttachmentsAlt =
-    !!numGenericAttachments && localizeWithPlural(ACTIVITY_NUM_ATTACHMENTS_ALT_IDS, numGenericAttachments);
-  const textAlt = useStripMarkdown(contentTypeMarkdown && displayText) || displayText;
   const timestampAlt = localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', formatDate(timestamp));
 
   return (
@@ -87,15 +105,7 @@ const ScreenReaderActivity = ({ activity, children, id, renderAttachments }) =>
         <span>{greetingAlt}</span>
         <span>{textAlt}</span>
       </p>
-      {!!attachmentForScreenReaderRenderers.length && (
-        <ul>
-          {attachmentForScreenReaderRenderers.map((render, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <li key={index}>{render()}</li>
-          ))}
-        </ul>
-      )}
-      {numAttachmentsAlt && <p>{numAttachmentsAlt}</p>}
+      {!fallbackText && <ScreenReaderAttachments activity={activity} renderAttachments={renderAttachments} />}
       <p className="webchat__screen-reader-activity__timestamp">{timestampAlt}</p>
       {children}
     </article>

package/src/SendBox/Assets/AttachmentIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const AttachmentIcon = () => (
-  <svg height={28} viewBox="0 0 25.75 46" width={28}>
+  <svg 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"

package/src/SendBox/Assets/MicrophoneIcon.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 // eslint-disable-next-line react/prop-types
 const MicrophoneIcon = ({ className }) => (
-  <svg className={className} height={28} viewBox="0 0 34.75 46" width={28}>
+  <svg className={className} focusable={false} height={28} role="presentation" viewBox="0 0 34.75 46" width={28}>
     <path
       className="a"
       d="M29.75,23v6.36a7,7,0,0,1-.56,2.78,7.16,7.16,0,0,1-3.8,3.8,7,7,0,0,1-2.78.56H18.5v2.25H23V41H11.75v-2.25h4.5V36.5h-4.11a7,7,0,0,1-2.78-.56,7.16,7.16,0,0,1-3.8-3.8,7,7,0,0,1-.56-2.78V23h2.25v6.36a4.72,4.72,0,0,0,.39,1.9,4.78,4.78,0,0,0,2.6,2.6,4.72,4.72,0,0,0,1.9.39h10.47a4.72,4.72,0,0,0,1.9-.39,4.78,4.78,0,0,0,2.6-2.6,4.72,4.72,0,0,0,.39-1.9V23Zm-18,5.62a1.13,1.13,0,0,0,1.13,1.13h9a1.13,1.13,0,0,0,1.12-1.13V8.38a1.13,1.13,0,0,0-1.12-1.13h-9a1.13,1.13,0,0,0-1.13,1.13Zm1.13,3.38a3.41,3.41,0,0,1-1.32-.26,3.31,3.31,0,0,1-1.8-1.8,3.41,3.41,0,0,1-.26-1.32V8.38a3.41,3.41,0,0,1,.26-1.32,3.31,3.31,0,0,1,1.8-1.8,3.41,3.41,0,0,1,1.32-.26h9a3.4,3.4,0,0,1,1.31.26,3.31,3.31,0,0,1,1.8,1.8,3.41,3.41,0,0,1,.26,1.32v20.24a3.41,3.41,0,0,1-.26,1.32,3.31,3.31,0,0,1-1.8,1.8,3.4,3.4,0,0,1-1.31.26Z"

package/src/SendBox/{AutoResizeTextArea.js → AutoResizeTextArea.tsx}

@@ -1,12 +1,38 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  KeyboardEventHandler,
+  ReactEventHandler
+} from 'react';
 
 import AccessibleTextArea from '../Utils/AccessibleTextArea';
 import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 import useStyleSet from '../hooks/useStyleSet';
 
-const AutoResizeTextArea = forwardRef(
+type AutoResizeTextAreaProps = {
+  '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>(
   (
     {
       'aria-label': ariaLabel,
@@ -88,7 +114,7 @@ AutoResizeTextArea.propTypes = {
   'data-id': PropTypes.string,
   disabled: PropTypes.bool,
   enterKeyHint: PropTypes.string,
-  inputMode: PropTypes.string,
+  inputMode: PropTypes.oneOf(['text', 'none', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,
@@ -97,7 +123,7 @@ AutoResizeTextArea.propTypes = {
   onSelect: PropTypes.func,
   placeholder: PropTypes.string,
   readOnly: PropTypes.bool,
-  rows: PropTypes.string,
+  rows: PropTypes.number,
   textAreaClassName: PropTypes.string,
   value: PropTypes.string
 };

package/src/SendBox/{DictationInterims.js → DictationInterims.tsx}

@@ -4,7 +4,7 @@ import { Constants } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import useStyleSet from '../hooks/useStyleSet';
@@ -31,7 +31,11 @@ const connectDictationInterims = (...selectors) =>
     ...selectors
   );
 
-const DictationInterims = ({ className }) => {
+type DictationInterimsProps = {
+  className?: string;
+};
+
+const DictationInterims: FC<DictationInterimsProps> = ({ className }) => {
   const [dictateInterims] = useDictateInterims();
   const [dictateState] = useDictateState();
   const [{ dictationInterims: dictationInterimsStyleSet }] = useStyleSet();

package/src/SendBox/{MicrophoneButton.js → MicrophoneButton.tsx}

@@ -6,7 +6,7 @@ import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import memoize from 'memoize-one';
 import PropTypes from 'prop-types';
-import React, { useCallback, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
@@ -66,38 +66,44 @@ const connectMicrophoneButton = (...selectors) => {
       startDictate,
       stopDictate,
       stopSpeakingActivity,
-      webSpeechPonyfill: { speechSynthesis, SpeechSynthesisUtterance } = {}
-    }) => ({
-      click: () => {
-        if (dictateState === DictateState.WILL_START) {
-          stopSpeakingActivity();
-        } else if (dictateState === DictateState.DICTATING) {
-          stopDictate();
-          setSendBox(dictateInterims.join(' '));
-        } else {
-          stopSpeakingActivity();
-          startDictate();
-        }
-
-        primeSpeechSynthesis(speechSynthesis, SpeechSynthesisUtterance);
-      },
-      dictating: dictateState === DictateState.DICTATING,
-      disabled: disabled || (dictateState === DictateState.STARTING && dictateState === DictateState.STOPPING),
-      language
-    }),
+      webSpeechPonyfill
+    }) => {
+      const { speechSynthesis, SpeechSynthesisUtterance } = webSpeechPonyfill || {};
+
+      return {
+        click: () => {
+          if (dictateState === DictateState.WILL_START) {
+            stopSpeakingActivity();
+          } else if (dictateState === DictateState.DICTATING) {
+            stopDictate();
+            setSendBox(dictateInterims.join(' '));
+          } else {
+            stopSpeakingActivity();
+            startDictate();
+          }
+
+          primeSpeechSynthesis(speechSynthesis, SpeechSynthesisUtterance);
+        },
+        dictating: dictateState === DictateState.DICTATING,
+        disabled: disabled || (dictateState === DictateState.STARTING && dictateState === DictateState.STOPPING),
+        language
+      };
+    },
     ...selectors
   );
 };
 
-const useMicrophoneButtonClick = () => {
+function useMicrophoneButtonClick(): () => void {
   const [, setSendBox] = useSendBoxValue();
   const [, setShouldSpeakIncomingActivity] = useShouldSpeakIncomingActivity();
-  const [{ speechSynthesis, SpeechSynthesisUtterance } = {}] = useWebSpeechPonyfill();
   const [dictateInterims] = useDictateInterims();
   const [dictateState] = useDictateState();
+  const [webSpeechPonyfill] = useWebSpeechPonyfill();
   const startDictate = useStartDictate();
   const stopDictate = useStopDictate();
 
+  const { speechSynthesis, SpeechSynthesisUtterance } = webSpeechPonyfill || {};
+
   const [primeSpeechSynthesis] = useState(() =>
     memoize((speechSynthesis, SpeechSynthesisUtterance) => {
       if (speechSynthesis && SpeechSynthesisUtterance) {
@@ -134,9 +140,9 @@ const useMicrophoneButtonClick = () => {
     startDictate,
     stopDictate
   ]);
-};
+}
 
-function useMicrophoneButtonDisabled() {
+function useMicrophoneButtonDisabled(): [boolean] {
   const [abortable] = useDictateAbortable();
   const [dictateState] = useDictateState();
   const [disabled] = useDisabled();
@@ -149,7 +155,11 @@ function useMicrophoneButtonDisabled() {
   ];
 }
 
-const MicrophoneButton = ({ className }) => {
+type MicrophoneButtonProps = {
+  className?: string;
+};
+
+const MicrophoneButton: FC<MicrophoneButtonProps> = ({ className }) => {
   const [{ microphoneButton: microphoneButtonStyleSet }] = useStyleSet();
   const [dictateState] = useDictateState();
   const [disabled] = useMicrophoneButtonDisabled();

package/src/SendBox/{SendButton.js → SendButton.tsx}

@@ -1,6 +1,7 @@
 import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
@@ -20,7 +21,11 @@ const connectSendButton = (...selectors) =>
     ...selectors
   );
 
-const SendButton = ({ className }) => {
+type SendButtonProps = {
+  className?: string;
+};
+
+const SendButton: FC<SendButtonProps> = ({ className }) => {
   const [disabled] = useDisabled();
   const focus = useFocus();
   const localize = useLocalizer();
@@ -36,7 +41,7 @@ const SendButton = ({ className }) => {
   return (
     <IconButton
       alt={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
-      className={className}
+      className={classNames('webchat__send-button', className)}
       disabled={disabled}
       onClick={handleClick}
     >

package/src/SendBox/SuggestedAction.js

@@ -37,18 +37,7 @@ const connectSuggestedAction = (...selectors) =>
     ...selectors
   );
 
-const SuggestedAction = ({
-  'aria-hidden': ariaHidden,
-  buttonText,
-  className,
-  displayText,
-  image,
-  imageAlt,
-  text,
-  textClassName,
-  type,
-  value
-}) => {
+const SuggestedAction = ({ buttonText, className, displayText, image, imageAlt, text, textClassName, type, value }) => {
   const [_, setSuggestedActions] = useSuggestedActions();
   const [{ suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
@@ -79,7 +68,6 @@ const SuggestedAction = ({
 
   return (
     <div
-      aria-hidden={ariaHidden}
       className={classNames(
         'webchat__suggested-action',
         { 'webchat__suggested-action--rtl': direction === 'rtl' },
@@ -115,7 +103,6 @@ const SuggestedAction = ({
 };
 
 SuggestedAction.defaultProps = {
-  'aria-hidden': false,
   className: '',
   displayText: '',
   image: '',
@@ -127,7 +114,6 @@ SuggestedAction.defaultProps = {
 };
 
 SuggestedAction.propTypes = {
-  'aria-hidden': PropTypes.bool,
   buttonText: PropTypes.string.isRequired,
   className: PropTypes.string,
   displayText: PropTypes.string,

package/src/SendBox/{SuggestedActions.js → SuggestedActions.tsx}

@@ -1,10 +1,11 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineCardAction } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import BasicFilm, { createBasicStyleSet as createBasicStyleSetForReactFilm } from 'react-film';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import ScreenReaderText from '../ScreenReaderText';
@@ -206,7 +207,12 @@ SuggestedActionStackedContainer.propTypes = {
   screenReaderText: PropTypes.string.isRequired
 };
 
-const SuggestedActions = ({ className, suggestedActions = [] }) => {
+type SuggestedActionsProps = {
+  className?: string;
+  suggestedActions?: DirectLineCardAction[];
+};
+
+const SuggestedActions: FC<SuggestedActionsProps> = ({ className, suggestedActions = [] }) => {
   const [{ suggestedActionLayout, suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const [accessKey] = useSuggestedActionsAccessKey();
   const localize = useLocalizer();
@@ -221,25 +227,36 @@ const SuggestedActions = ({ className, suggestedActions = [] }) => {
       : localize('SUGGESTED_ACTIONS_ALT_NO_CONTENT')
   );
 
-  const children = suggestedActions.map(({ displayText, image, imageAltText, text, title, type, value }, index) => (
-    <SuggestedAction
-      ariaHidden={true}
-      buttonText={suggestedActionText({ displayText, title, type, value })}
-      className="webchat__suggested-actions__button"
-      displayText={displayText}
-      image={image}
-      imageAlt={imageAltText}
-      key={index}
-      text={text}
-      textClassName={
-        suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
-          ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
-          : 'webchat__suggested-actions__button-text'
-      }
-      type={type}
-      value={value}
-    />
-  ));
+  const children = suggestedActions.map((cardAction, index) => {
+    const { displayText, image, imageAltText, text, title, type, value } = cardAction as {
+      displayText?: string;
+      image?: string;
+      imageAltText?: string;
+      text?: string;
+      title?: string;
+      type: string;
+      value?: { [key: string]: any } | string;
+    };
+
+    return (
+      <SuggestedAction
+        buttonText={suggestedActionText({ displayText, title, type, value })}
+        className="webchat__suggested-actions__button"
+        displayText={displayText}
+        image={image}
+        imageAlt={imageAltText}
+        key={index}
+        text={text}
+        textClassName={
+          suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
+            ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
+            : 'webchat__suggested-actions__button-text'
+        }
+        type={type}
+        value={value}
+      />
+    );
+  });
 
   if (suggestedActionLayout === 'flow') {
     return (
@@ -268,6 +285,10 @@ SuggestedActions.defaultProps = {
 
 SuggestedActions.propTypes = {
   className: PropTypes.string,
+
+  // TypeScript class is not mappable to PropTypes.func
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   suggestedActions: PropTypes.arrayOf(
     PropTypes.shape({
       displayText: PropTypes.string,

package/src/SendBox/{TextBox.js → TextBox.tsx}

@@ -1,8 +1,9 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { MutableRefObject, useCallback, useEffect, useRef } from 'react';
 
+import { ie11 } from '../Utils/detectBrowser';
 import AccessibleInputText from '../Utils/AccessibleInputText';
 import AutoResizeTextArea from './AutoResizeTextArea';
 import connectToWebChat from '../connectToWebChat';
@@ -66,7 +67,7 @@ const connectSendTextBox = (...selectors) =>
     ...selectors
   );
 
-function useTextBoxSubmit() {
+function useTextBoxSubmit(): (setFocus?: boolean | 'sendBox') => void {
   const [sendBoxValue] = useSendBoxValue();
   const focus = useFocus();
   const scrollToEnd = useScrollToEnd();
@@ -97,7 +98,13 @@ function useTextBoxSubmit() {
   );
 }
 
-function useTextBoxValue() {
+function useTextBoxValue(): [
+  string,
+  (
+    textBoxValue: string,
+    options: { selectionEnd: number; selectionStart: number }
+  ) => { selectionEnd: number; selectionStart: number; value: string }
+] {
   const [value, setValue] = useSendBoxValue();
   const replaceEmoticon = useReplaceEmoticon();
   const stopDictate = useStopDictate();
@@ -146,10 +153,14 @@ const TextBox = ({ className }) => {
   const [{ sendBoxTextWrap }] = useStyleOptions();
   const [disabled] = useDisabled();
   const [textBoxValue, setTextBoxValue] = useTextBoxValue();
-  const inputElementRef = useRef();
+  const inputElementRef: MutableRefObject<HTMLInputElement & HTMLTextAreaElement> = useRef();
   const localize = useLocalizer();
   const placeCheckpointOnChangeRef = useRef(false);
-  const prevInputStateRef = useRef();
+  const prevInputStateRef: MutableRefObject<{
+    selectionEnd: number;
+    selectionStart: number;
+    value: string;
+  }> = useRef();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const scrollDown = useScrollDown();
   const scrollUp = useScrollUp();
@@ -332,7 +343,10 @@ const TextBox = ({ className }) => {
       const { current } = inputElementRef;
 
       if (current) {
-        if (noKeyboard) {
+        // 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');
@@ -405,7 +419,7 @@ const TextBox = ({ className }) => {
           placeholder={typeYourMessageString}
           readOnly={disabled}
           ref={inputElementRef}
-          rows="1"
+          rows={1}
           textAreaClassName="webchat__send-box-text-box__html-text-area"
           value={textBoxValue}
         />

package/src/SendBox/{UploadButton.js → UploadButton.tsx}

@@ -1,7 +1,7 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useRef } from 'react';
+import React, { FC, useCallback, useRef } from 'react';
 
 import AttachmentIcon from './Assets/AttachmentIcon';
 import connectToWebChat from '../connectToWebChat';
@@ -89,10 +89,14 @@ const connectUploadButton = (...selectors) =>
     ...selectors
   );
 
-const UploadButton = ({ className }) => {
+type UploadButtonProps = {
+  className?: string;
+};
+
+const UploadButton: FC<UploadButtonProps> = ({ className }) => {
   const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
   const [disabled] = useDisabled();
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLInputElement>();
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const sendFiles = useSendFiles();

package/src/Styles/StyleSet/CarouselFilmStrip.ts

@@ -6,7 +6,6 @@ import mirrorStyle from '../mirrorStyle';
 export default function CarouselFilmStrip({
   avatarSize,
   bubbleMaxWidth,
-  bubbleMinWidth,
   paddingRegular,
   transitionDuration
 }: StrictStyleOptions) {
@@ -18,13 +17,6 @@ export default function CarouselFilmStrip({
         marginBottom: -17
       },
 
-      '& .webchat__carousel-filmstrip__attachment': {
-        minWidth: bubbleMinWidth,
-        maxWidth: bubbleMaxWidth,
-        transitionDuration,
-        transitionProperty: 'max-width, min-width'
-      },
-
       '& .webchat__carousel-filmstrip__message': {
         maxWidth: bubbleMaxWidth,
         transitionDuration,
@@ -88,17 +80,9 @@ export default function CarouselFilmStrip({
           marginLeft: -paddingRegular
         },
 
-        '& .webchat__carousel-filmstrip__attachment': {
-          paddingLeft: paddingRegular
-        },
-
         '&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
           '& .webchat__carousel-filmstrip__attachments': {
             marginLeft: -(avatarSize + paddingRegular * 2)
-          },
-
-          '& .webchat__carousel-filmstrip__attachment:first-child': {
-            paddingLeft: avatarSize + paddingRegular * 2
           }
         },
 
@@ -106,10 +90,6 @@ export default function CarouselFilmStrip({
           '&:not(.webchat__carousel-filmstrip--hide-avatar.webchat__carousel-filmstrip--show-avatar)': {
             '& .webchat__carousel-filmstrip__attachments': {
               marginLeft: -paddingRegular * 2
-            },
-
-            '& .webchat__carousel-filmstrip__attachment:first-child': {
-              paddingLeft: paddingRegular * 2
             }
           }
         }