botframework-webchat-component 4.13.0 → 4.15.0

package/src/Activity/{StackedLayout.js → StackedLayout.tsx}

@@ -1,9 +1,10 @@
 /* eslint complexity: ["error", 30] */
 
-import { hooks } from 'botframework-webchat-api';
+import { DirectLineActivity } from 'botframework-webchat-core';
+import { hooks, RenderAttachment } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import Bubble from './Bubble';
 import connectToWebChat from '../connectToWebChat';
@@ -21,9 +22,10 @@ const ROOT_STYLE = {
   '&.webchat__stacked-layout': {
     position: 'relative', // This is to keep screen reader text in the destinated area.
 
-    '& .webchat__stacked-layout__attachment-row, & .webchat__stacked-layout__main, & .webchat__stacked-layout__message-row, & .webchat__stacked-layout__status': {
-      display: 'flex'
-    },
+    '& .webchat__stacked-layout__attachment-row, & .webchat__stacked-layout__main, & .webchat__stacked-layout__message-row, & .webchat__stacked-layout__status':
+      {
+        display: 'flex'
+      },
 
     '& .webchat__stacked-layout__alignment-pad': {
       flexShrink: 0
@@ -40,9 +42,10 @@ const ROOT_STYLE = {
     },
 
     '&.webchat__stacked-layout--from-user': {
-      '& .webchat__stacked-layout__attachment-row, & .webchat__stacked-layout__main, & .webchat__stacked-layout__message-row, & .webchat__stacked-layout__status': {
-        flexDirection: 'row-reverse'
-      }
+      '& .webchat__stacked-layout__attachment-row, & .webchat__stacked-layout__main, & .webchat__stacked-layout__message-row, & .webchat__stacked-layout__status':
+        {
+          flexDirection: 'row-reverse'
+        }
     },
 
     '& .webchat__stacked-layout__content': {
@@ -73,7 +76,7 @@ const connectStackedLayout = (...selectors) =>
           options: { botAvatarInitials, userAvatarInitials }
         }
       },
-      { activity: { from: { role } = {} } = {} }
+      { activity: { from: { role = undefined } = {} } = {} }
     ) => ({
       avatarInitials: role === 'user' ? userAvatarInitials : botAvatarInitials,
       language,
@@ -85,7 +88,16 @@ const connectStackedLayout = (...selectors) =>
     ...selectors
   );
 
-const StackedLayout = ({
+type StackedLayoutProps = {
+  activity: DirectLineActivity;
+  hideTimestamp?: boolean;
+  renderActivityStatus?: (({ hideTimestamp: boolean }) => Exclude<ReactNode, boolean | null | undefined>) | false;
+  renderAttachment?: RenderAttachment;
+  renderAvatar?: (activity: DirectLineActivity) => (() => Exclude<ReactNode, boolean | null | undefined>) | false;
+  showCallout?: boolean;
+};
+
+const StackedLayout: FC<StackedLayoutProps> = ({
   activity,
   hideTimestamp,
   renderActivityStatus,
@@ -93,14 +105,15 @@ const StackedLayout = ({
   renderAvatar,
   showCallout
 }) => {
-  const [{ bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize }] = useStyleOptions();
+  const [styleOptions] = useStyleOptions();
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
   const [{ stackedLayout: stackedLayoutStyleSet }] = useStyleSet();
   const ariaLabelId = useUniqueId('webchat__stacked-layout__id');
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-  const showActivityStatus = typeof renderActivityStatus === 'function';
+
+  const { bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize } = styleOptions;
 
   const {
     attachments = [],
@@ -108,15 +121,20 @@ const StackedLayout = ({
     from: { role } = {},
     text,
     textFormat
+  }: {
+    attachments?: [];
+    channelData?: { messageBack?: { displayText?: string } };
+    from?: { role?: 'bot' | 'user' };
+    text?: string;
+    textFormat?: string;
   } = activity;
 
   const activityDisplayText = messageBackDisplayText || text;
   const fromUser = role === 'user';
 
   const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
-  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 initials = fromUser ? userInitials : botInitials;
@@ -153,7 +171,9 @@ const StackedLayout = ({
       role="group"
     >
       <div className="webchat__stacked-layout__main">
-        <div className="webchat__stacked-layout__avatar-gutter">{showAvatar && renderAvatar({ activity })}</div>
+        <div className="webchat__stacked-layout__avatar-gutter">
+          {showAvatar && renderAvatar && renderAvatar({ activity })}
+        </div>
         <div className="webchat__stacked-layout__content">
           {!!activityDisplayText && (
             <div
@@ -168,7 +188,7 @@ const StackedLayout = ({
               <Bubble
                 className="webchat__stacked-layout__message"
                 fromUser={fromUser}
-                nub={showNub || ((hasAvatar || hasNub) && 'hidden')}
+                nub={showNub || (hasAvatar || hasNub ? 'hidden' : false)}
               >
                 {renderAttachment({
                   activity,
@@ -197,7 +217,7 @@ const StackedLayout = ({
                 fromUser={fromUser}
                 /* eslint-disable-next-line react/no-array-index-key */
                 key={index}
-                nub={(hasAvatar || hasNub) && 'hidden'}
+                nub={hasAvatar || hasNub ? 'hidden' : false}
               >
                 {renderAttachment({ activity, attachment })}
               </Bubble>
@@ -206,7 +226,7 @@ const StackedLayout = ({
         </div>
         <div className="webchat__stacked-layout__alignment-pad" />
       </div>
-      {showActivityStatus && (
+      {typeof renderActivityStatus === 'function' && (
         <div className="webchat__stacked-layout__status">
           <div className="webchat__stacked-layout__avatar-gutter" />
           <div className="webchat__stacked-layout__nub-pad" />
@@ -221,7 +241,7 @@ const StackedLayout = ({
 StackedLayout.defaultProps = {
   hideTimestamp: false,
   renderActivityStatus: false,
-  renderAvatar: false,
+  renderAvatar: undefined,
   showCallout: true
 };
 
@@ -242,8 +262,14 @@ StackedLayout.propTypes = {
     type: PropTypes.string.isRequired
   }).isRequired,
   hideTimestamp: PropTypes.bool,
+
+  // PropTypes cannot validate precisely with its TypeScript counterpart.
+  // @ts-ignore
   renderActivityStatus: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.func]),
   renderAttachment: PropTypes.func.isRequired,
+
+  // PropTypes cannot validate precisely with its TypeScript counterpart.
+  // @ts-ignore
   renderAvatar: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.func]),
   showCallout: PropTypes.bool
 };

package/src/Attachment/Assets/DownloadIcon.js

@@ -4,7 +4,14 @@ import React from 'react';
 const ICON_SIZE_FACTOR = 22;
 
 const DownloadIcon = ({ className, size }) => (
-  <svg className={className} height={ICON_SIZE_FACTOR * size} viewBox="0 0 31.8 46" width={ICON_SIZE_FACTOR * size}>
+  <svg
+    className={className}
+    focusable={false}
+    height={ICON_SIZE_FACTOR * size}
+    role="presentation"
+    viewBox="0 0 31.8 46"
+    width={ICON_SIZE_FACTOR * size}
+  >
     <path d="M26.8,23.8l-10.9,11L5,23.8l1.6-1.6l8.2,8.3V5H17v25.5l8.2-8.3L26.8,23.8z M5.8,41v-2.2H26V41H5.8z" />
   </svg>
 );

package/src/Attachment/{AudioContent.js → AudioContent.tsx}

@@ -1,9 +1,17 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const AudioContent = ({ alt, autoPlay, loop, poster, src }) => {
+type AudioContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  poster?: string;
+  src: string;
+};
+
+const AudioContent: FC<AudioContentProps> = ({ alt, autoPlay, loop, src }) => {
   const [{ audioContent: audioContentStyleSet }] = useStyleSet();
 
   return (
@@ -13,7 +21,6 @@ const AudioContent = ({ alt, autoPlay, loop, poster, src }) => {
       className={audioContentStyleSet}
       controls={true}
       loop={loop}
-      poster={poster}
       src={src}
     />
   );
@@ -30,6 +37,8 @@ AudioContent.propTypes = {
   alt: PropTypes.string,
   autoPlay: PropTypes.bool,
   loop: PropTypes.bool,
+  // We will keep the "poster" prop for #3315.
+  // eslint-disable-next-line react/no-unused-prop-types
   poster: PropTypes.string,
   src: PropTypes.string.isRequired
 };

package/src/Attachment/FileAttachment.js

@@ -8,7 +8,7 @@ const FileAttachment = ({
   attachment
 }) => {
   const attachmentIndex = attachments.indexOf(attachment);
-  const size = attachmentSizes[attachmentIndex];
+  const size = attachmentSizes[+attachmentIndex];
 
   return <FileContent fileName={attachment.name} href={attachment.contentUrl} size={size} />;
 };

package/src/Attachment/{FileContent.js → FileContent.tsx}

@@ -1,10 +1,9 @@
 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 DownloadIcon from './Assets/DownloadIcon';
-import ScreenReaderText from '../ScreenReaderText';
 import useStyleSet from '../hooks/useStyleSet';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
@@ -25,6 +24,16 @@ const ROOT_STYLE = {
   }
 };
 
+const ALLOWED_PROTOCOLS = ['data:', 'http:', 'https:'];
+
+function isAllowedProtocol(url) {
+  try {
+    return ALLOWED_PROTOCOLS.includes(new URL(url).protocol);
+  } catch (err) {
+    return false;
+  }
+}
+
 const FileContentBadge = ({ downloadIcon, fileName, size }) => {
   const [direction] = useDirection();
   const formatByte = useByteFormatter();
@@ -61,7 +70,14 @@ FileContentBadge.propTypes = {
   size: PropTypes.number
 };
 
-const FileContent = ({ className, href, fileName, size }) => {
+type FileContentProps = {
+  className?: string;
+  fileName: string;
+  href?: string;
+  size?: number;
+};
+
+const FileContent: FC<FileContentProps> = ({ className, href, fileName, size }) => {
   const [{ fileContent: fileContentStyleSet }] = useStyleSet();
   const localize = useLocalizer();
   const localizeBytes = useByteFormatter();
@@ -69,6 +85,8 @@ const FileContent = ({ className, href, fileName, size }) => {
 
   const localizedSize = typeof size === 'number' && localizeBytes(size);
 
+  href = href && isAllowedProtocol(href) ? href : undefined;
+
   const alt = localize(
     href
       ? localizedSize
@@ -83,20 +101,17 @@ const FileContent = ({ className, href, fileName, size }) => {
 
   return (
     <div
-      aria-hidden={true}
       className={classNames('webchat__fileContent', rootClassName, fileContentStyleSet + '', (className || '') + '')}
     >
-      <ScreenReaderText text={alt} />
       {href ? (
         <a
-          aria-hidden={true}
+          aria-label={alt}
           className="webchat__fileContent__buttonLink"
           download={fileName}
           href={href}
           rel="noopener noreferrer"
           target="_blank"
         >
-          {/* Although nested, Chrome v75 does not respect the above aria-hidden and makes the below aria-hidden in FileContentBadge necessary */}
           <FileContentBadge downloadIcon={true} fileName={fileName} size={size} />
         </a>
       ) : (

package/src/Attachment/{HTMLVideoContent.js → HTMLVideoContent.tsx}

@@ -1,9 +1,17 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const HTMLVideoContent = ({ alt, autoPlay, loop, poster, src }) => {
+type HTMLVideoContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  poster?: string;
+  src: string;
+};
+
+const HTMLVideoContent: FC<HTMLVideoContentProps> = ({ alt, autoPlay, loop, poster, src }) => {
   const [{ videoContent: videoContentStyleSet }] = useStyleSet();
 
   return (

package/src/Attachment/{ImageContent.js → ImageContent.tsx}

@@ -1,12 +1,17 @@
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import CroppedImage from '../Utils/CroppedImage';
 
 const { useStyleOptions } = hooks;
 
-const ImageContent = ({ alt, src }) => {
+type ImageContentProps = {
+  alt?: string;
+  src: string;
+};
+
+const ImageContent: FC<ImageContentProps> = ({ alt, src }) => {
   const [{ bubbleImageHeight }] = useStyleOptions();
 
   return <CroppedImage alt={alt} height={bubbleImageHeight} src={src} width="100%" />;

package/src/Attachment/{TextContent.js → TextContent.tsx}

@@ -5,12 +5,17 @@
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
 import useStyleSet from '../hooks/useStyleSet';
 
-const TextContent = ({ contentType, text }) => {
+type TextContentProps = {
+  contentType?: string;
+  text: string;
+};
+
+const TextContent: FC<TextContentProps> = ({ contentType, text }) => {
   const [{ textContent: textContentStyleSet }] = useStyleSet();
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
   const contentTypeMarkdown = contentType === 'text/markdown';
@@ -21,11 +26,13 @@ const TextContent = ({ contentType, text }) => {
       dangerouslySetInnerHTML={{ __html: renderMarkdownAsHTML(text || '') }}
     />
   ) : (
-    (text || '').split('\n').map((line, index) => (
-      <p className={classNames('plain', textContentStyleSet + '')} key={index}>
-        {line.trim()}
-      </p>
-    ))
+    <React.Fragment>
+      {(text || '').split('\n').map((line, index) => (
+        <p className={classNames('plain', textContentStyleSet + '')} key={index}>
+          {line.trim()}
+        </p>
+      ))}
+    </React.Fragment>
   );
 };
 

package/src/Attachment/{VideoContent.js → VideoContent.tsx}

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import HTMLVideoContent from './HTMLVideoContent';
 import VimeoContent from './VimeoContent';
@@ -30,7 +30,15 @@ function parseURL(url) {
   return { hostname, pathname, search };
 }
 
-const VideoContent = ({ alt, autoPlay, loop, poster, src }) => {
+type VideoContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  poster?: string;
+  src: string;
+};
+
+const VideoContent: FC<VideoContentProps> = ({ alt, autoPlay, loop, poster, src }) => {
   const { hostname, pathname, search } = parseURL(src);
   const lastSegment = pathname.split('/').pop();
   const searchParams = new URLSearchParams(search);

package/src/Attachment/{VimeoContent.js → VimeoContent.tsx}

@@ -1,18 +1,25 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const VimeoContent = ({ alt, autoPlay, embedID, loop }) => {
+type VimeoContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  embedID: string;
+  loop?: boolean;
+};
+
+const VimeoContent: FC<VimeoContentProps> = ({ alt, autoPlay, embedID, loop }) => {
   const [{ vimeoContent: vimeoContentStyleSet }] = useStyleSet();
 
   const search = new URLSearchParams({
-    autoplay: autoPlay ? 1 : 0,
-    badge: 0,
-    byline: 0,
-    loop: loop ? 1 : 0,
-    portrait: 0,
-    title: 0
+    autoplay: autoPlay ? '1' : '0',
+    badge: '0',
+    byline: '0',
+    loop: loop ? '1' : '0',
+    portrait: '0',
+    title: '0'
   }).toString();
 
   return (

package/src/Attachment/{YouTubeContent.js → YouTubeContent.tsx}

@@ -1,15 +1,22 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const YouTubeContent = ({ alt, autoPlay, embedID, loop }) => {
+type YouTubeContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  embedID: string;
+  loop?: boolean;
+};
+
+const YouTubeContent: FC<YouTubeContentProps> = ({ alt, autoPlay, embedID, loop }) => {
   const [{ youTubeContent: youTubeContentStyleSet }] = useStyleSet();
 
   const search = new URLSearchParams({
-    autoplay: autoPlay ? 1 : 0,
-    loop: loop ? 1 : 0,
-    modestbranding: 1
+    autoplay: autoPlay ? '1' : '0',
+    loop: loop ? '1' : '0',
+    modestbranding: '1'
   }).toString();
 
   return (

package/src/{BasicSendBox.js → BasicSendBox.tsx}

@@ -2,7 +2,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 DictationInterims from './SendBox/DictationInterims';
 import MicrophoneButton from './SendBox/MicrophoneButton';
@@ -31,11 +31,11 @@ const ROOT_STYLE = {
 };
 
 // TODO: [P3] We should consider exposing core/src/definitions and use it instead
-function activityIsSpeakingOrQueuedToSpeak({ channelData: { speak } = {} }) {
+function activityIsSpeakingOrQueuedToSpeak({ channelData: { speak } = {} }: { channelData: { speak?: any } }) {
   return !!speak;
 }
 
-function useSendBoxSpeechInterimsVisible() {
+function useSendBoxSpeechInterimsVisible(): [boolean] {
   const [activities] = useActivities();
   const [dictateState] = useDictateState();
 
@@ -45,10 +45,14 @@ function useSendBoxSpeechInterimsVisible() {
   ];
 }
 
-const BasicSendBox = ({ className }) => {
+type BasicSendBoxProps = {
+  className?: string;
+};
+
+const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
   const [{ hideUploadButton, sendBoxButtonAlignment }] = useStyleOptions();
   const [{ sendBox: sendBoxStyleSet }] = useStyleSet();
-  const [{ SpeechRecognition } = {}] = useWebSpeechPonyfill();
+  const [{ SpeechRecognition = undefined } = {}] = useWebSpeechPonyfill();
   const [direction] = useDirection();
   const [speechInterimsVisible] = useSendBoxSpeechInterimsVisible();
   const styleToEmotionObject = useStyleToEmotionObject();

package/src/BasicToaster.js

@@ -40,8 +40,12 @@ const LEVEL_AS_NUMBER = {
   success: 4
 };
 
+const LEVEL_AS_NUMBER_KEYS = Object.keys(LEVEL_AS_NUMBER);
+
 function getLevelAsNumber(level) {
-  return LEVEL_AS_NUMBER[level] || 5;
+  // Mitigated through allowlisting.
+  // eslint-disable-next-line security/detect-object-injection
+  return LEVEL_AS_NUMBER_KEYS.includes(level) ? LEVEL_AS_NUMBER[level] : 5;
 }
 
 function compareLevel(x, y) {
@@ -94,10 +98,10 @@ const BasicToaster = () => {
     () => (!expandable || expanded ? `webchat__toaster__list__${instanceId}` : undefined),
     [expandable, expanded, instanceId]
   );
-  const headerElementId = useMemo(() => (expandable ? `webchat__toaster__header__${instanceId}` : undefined), [
-    expandable,
-    instanceId
-  ]);
+  const headerElementId = useMemo(
+    () => (expandable ? `webchat__toaster__header__${instanceId}` : undefined),
+    [expandable, instanceId]
+  );
 
   useEffect(() => {
     !expandable && setExpanded(false);