botframework-webchat-component 4.14.1 → 4.15.2-main.20220413.af6e8a3

package/src/Activity/Speak.tsx

@@ -1,8 +1,8 @@
-import { DirectLineActivity } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
 import React, { FC, useCallback, useMemo } from 'react';
 import Say, { SayUtterance } from 'react-say';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import connectToWebChat from '../connectToWebChat';
 import SayAlt from './SayAlt';
@@ -24,7 +24,7 @@ const connectSpeakActivity = (...selectors) =>
   );
 
 type SpeakProps = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
 };
 
 const Speak: FC<SpeakProps> = ({ activity }) => {
@@ -36,25 +36,25 @@ const Speak: FC<SpeakProps> = ({ activity }) => {
     markActivityAsSpoken(activity);
   }, [activity, markActivityAsSpoken]);
 
-  const singleLine = useMemo(() => {
+  const singleLine: false | string = useMemo(() => {
+    if (activity.type !== 'message') {
+      return false;
+    }
+
     const { attachments = [], speak, text } = activity;
 
-    return (
-      !!activity &&
-      [
-        speak || text,
-        ...attachments
-          .filter(({ contentType }) => contentType === 'application/vnd.microsoft.card.adaptive')
-          .map(attachment => attachment?.content?.speak)
-      ]
-        .filter(line => line)
-        .join('\r\n')
-    );
+    return [
+      speak || text,
+      ...attachments
+        .filter(({ contentType }) => contentType === 'application/vnd.microsoft.card.adaptive')
+        .map(attachment => attachment?.content?.speak)
+    ]
+      .filter(line => line)
+      .join('\r\n');
   }, [activity]);
 
-  const {
-    channelData: { speechSynthesisUtterance } = {}
-  }: { channelData: { speechSynthesisUtterance?: SpeechSynthesisUtterance } } = activity;
+  const speechSynthesisUtterance: false | SpeechSynthesisUtterance | undefined =
+    activity.type === 'message' && activity.channelData?.speechSynthesisUtterance;
 
   return (
     !!activity && (
@@ -71,6 +71,8 @@ const Speak: FC<SpeakProps> = ({ activity }) => {
 };
 
 Speak.propTypes = {
+  // PropTypes cannot fully capture TypeScript types.
+  // @ts-ignore
   activity: PropTypes.shape({
     attachments: PropTypes.arrayOf(
       PropTypes.shape({
@@ -84,7 +86,8 @@ Speak.propTypes = {
       speechSynthesisUtterance: PropTypes.any
     }),
     speak: PropTypes.string,
-    text: PropTypes.string
+    text: PropTypes.string,
+    type: PropTypes.string.isRequired
   }).isRequired
 };
 

package/src/Activity/StackedLayout.tsx

@@ -1,10 +1,10 @@
-/* eslint complexity: ["error", 30] */
+/* eslint complexity: ["error", 50] */
 
-import { DirectLineActivity } from 'botframework-webchat-core';
 import { hooks, RenderAttachment } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { FC, ReactNode } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import Bubble from './Bubble';
 import connectToWebChat from '../connectToWebChat';
@@ -22,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
@@ -41,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': {
@@ -87,11 +89,11 @@ const connectStackedLayout = (...selectors) =>
   );
 
 type StackedLayoutProps = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
   hideTimestamp?: boolean;
   renderActivityStatus?: (({ hideTimestamp: boolean }) => Exclude<ReactNode, boolean | null | undefined>) | false;
   renderAttachment?: RenderAttachment;
-  renderAvatar?: (activity: DirectLineActivity) => (() => Exclude<ReactNode, boolean | null | undefined>) | false;
+  renderAvatar?: ({ activity: WebChatActivity }) => (() => Exclude<ReactNode, boolean | null | undefined>) | false;
   showCallout?: boolean;
 };
 
@@ -113,27 +115,16 @@ const StackedLayout: FC<StackedLayoutProps> = ({
 
   const { bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize } = styleOptions;
 
-  const {
-    attachments = [],
-    channelData: { messageBack: { displayText: messageBackDisplayText } = {} } = {},
-    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 isMessage = activity.type === 'message';
+
+  const attachments = (isMessage && activity.attachments) || [];
+  const fromUser = activity.from.role === 'user';
+  const messageBackDisplayText: string = (isMessage && activity.channelData?.messageBack?.displayText) || '';
 
+  const activityDisplayText = isMessage ? messageBackDisplayText || activity.text : '';
   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;
@@ -151,7 +142,7 @@ const StackedLayout: FC<StackedLayoutProps> = ({
   const extraTrailing = !hasOtherAvatar && hasOtherNub; // This is for bot message with user nub and no user avatar. And vice versa.
 
   const showAvatar = showCallout && hasAvatar && !!renderAvatar;
-  const showNub = showCallout && hasNub && (topAlignedCallout || !attachments.length);
+  const showNub = showCallout && hasNub && (topAlignedCallout || !attachments?.length);
 
   return (
     <div
@@ -191,10 +182,12 @@ const StackedLayout: FC<StackedLayoutProps> = ({
               >
                 {renderAttachment({
                   activity,
-                  attachment: {
-                    content: activityDisplayText,
-                    contentType: textFormatToContentType(textFormat)
-                  }
+                  attachment: isMessage
+                    ? {
+                        content: activityDisplayText,
+                        contentType: textFormatToContentType(activity.textFormat)
+                      }
+                    : undefined
                 })}
               </Bubble>
             </div>
@@ -245,6 +238,8 @@ StackedLayout.defaultProps = {
 };
 
 StackedLayout.propTypes = {
+  // PropTypes cannot fully capture TypeScript types.
+  // @ts-ignore
   activity: PropTypes.shape({
     attachments: PropTypes.array,
     channelData: PropTypes.shape({
@@ -256,7 +251,7 @@ StackedLayout.propTypes = {
       role: PropTypes.string.isRequired
     }).isRequired,
     text: PropTypes.string,
-    textFormat: PropTypes.string,
+    textFormat: PropTypes.oneOf(['markdown', 'plain', 'xml']),
     timestamp: PropTypes.string,
     type: PropTypes.string.isRequired
   }).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.tsx

@@ -24,6 +24,16 @@ const ROOT_STYLE = {
   }
 };
 
+const ALLOWED_PROTOCOLS = ['blob:', '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();
@@ -75,6 +85,8 @@ const FileContent: FC<FileContentProps> = ({ className, href, fileName, size })
 
   const localizedSize = typeof size === 'number' && localizeBytes(size);
 
+  href = href && isAllowedProtocol(href) ? href : undefined;
+
   const alt = localize(
     href
       ? localizedSize

package/src/BasicSendBox.tsx

@@ -3,6 +3,7 @@ import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import DictationInterims from './SendBox/DictationInterims';
 import MicrophoneButton from './SendBox/MicrophoneButton';
@@ -31,8 +32,8 @@ const ROOT_STYLE = {
 };
 
 // TODO: [P3] We should consider exposing core/src/definitions and use it instead
-function activityIsSpeakingOrQueuedToSpeak({ channelData: { speak } = {} }: { channelData: { speak?: any } }) {
-  return !!speak;
+function activityIsSpeakingOrQueuedToSpeak(activity: WebChatActivity) {
+  return activity.type === 'message' && activity.channelData?.speak;
 }
 
 function useSendBoxSpeechInterimsVisible(): [boolean] {

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) {