diff --git a/CHANGELOG.md b/CHANGELOG.md index c3f82df9c5..6edcf3bc60 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,7 +39,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Fixes [#2737](https://github.com/microsoft/BotFramework-WebChat/issues/2737). Use `driver.wait` for conditions - Fixes [#2776](https://github.com/microsoft/BotFramework-WebChat/issues/2776). Wait until button is shown/hid before taking screenshot - Use a new timeout `fetchImage` for images -- Fixes [#2780](https://github.com/microsoft/BotFramework-WebChat/issues/2780). Added the `tel` protocol to the `allowedSchema` in the `sanitize-html` options, by [@tdurnford](https://github.com/tdurnford) in PR [#27XX](https://github.com/microsoft/BotFramework-WebChat/pull/27XX) +- Fixes [#2780](https://github.com/microsoft/BotFramework-WebChat/issues/2780). Added the `tel` protocol to the `allowedSchema` in the `sanitize-html` options, by [@tdurnford](https://github.com/tdurnford) in PR [#2787](https://github.com/microsoft/BotFramework-WebChat/pull/2787) +- Fixes [#2747](https://github.com/microsoft/BotFramework-WebChat/issues/2747). Moved `Timestamp` into the `SendStatus` component and removed the `Timestamp` style set, by [@tdurnford](https://github.com/tdurnford) in PR [#2786](https://github.com/microsoft/BotFramework-WebChat/pull/2786) - Fixes [#2647](https://github.com/microsoft/BotFramework-WebChat/issues/2647). Update the `CroppedImage` component `PropType`, by [@tdurnford](https://github.com/tdurnford) in PR [#2795](https://github.com/microsoft/BotFramework-WebChat/pull/2795) ### Changed diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js index b1a5a0d632..bf7dfa0c3d 100644 --- a/packages/component/src/Activity/CarouselFilmStrip.js +++ b/packages/component/src/Activity/CarouselFilmStrip.js @@ -7,25 +7,18 @@ import PropTypes from 'prop-types'; import React from 'react'; import remarkStripMarkdown from '../Utils/remarkStripMarkdown'; -import { Constants } from 'botframework-webchat-core'; - import Avatar from './Avatar'; import Bubble from './Bubble'; import connectToWebChat from '../connectToWebChat'; import ScreenReaderText from '../ScreenReaderText'; import SendStatus from './SendStatus'; import textFormatToContentType from '../Utils/textFormatToContentType'; -import Timestamp from './Timestamp'; import useAvatarForBot from '../hooks/useAvatarForBot'; import useAvatarForUser from '../hooks/useAvatarForUser'; import useLocalize from '../hooks/useLocalize'; import useStyleOptions from '../hooks/useStyleOptions'; import useStyleSet from '../hooks/useStyleSet'; -const { - ActivityClientState: { SENDING, SEND_FAILED } -} = Constants; - const ROOT_CSS = css({ display: 'flex', MsOverflowStyle: 'none', @@ -107,7 +100,7 @@ const WebChatCarouselFilmStrip = ({ const { attachments = [], - channelData: { messageBack: { displayText: messageBackDisplayText } = {}, state } = {}, + channelData: { messageBack: { displayText: messageBackDisplayText } = {} } = {}, from: { role } = {}, text, textFormat @@ -156,11 +149,7 @@ const WebChatCarouselFilmStrip = ({ ))}
- {state === SENDING || state === SEND_FAILED ? ( - - ) : ( - - )} +
diff --git a/packages/component/src/Activity/SendStatus.js b/packages/component/src/Activity/SendStatus.js index 77599a9b87..230af142ad 100644 --- a/packages/component/src/Activity/SendStatus.js +++ b/packages/component/src/Activity/SendStatus.js @@ -1,9 +1,11 @@ import { Constants } from 'botframework-webchat-core'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; import React, { useCallback } from 'react'; import connectToWebChat from '../connectToWebChat'; import ScreenReaderText from '../ScreenReaderText'; +import Timestamp from './Timestamp'; import useFocusSendBox from '../hooks/useFocusSendBox'; import useLocalize from '../hooks/useLocalize'; import usePostActivity from '../hooks/usePostActivity'; @@ -30,7 +32,7 @@ const connectSendStatus = (...selectors) => ...selectors ); -const SendStatus = ({ activity }) => { +const SendStatus = ({ activity, timestampClassName }) => { const [{ sendStatus: sendStatusStyleSet }] = useStyleSet(); const focusSendBox = useFocusSendBox(); const postActivity = usePostActivity(); @@ -56,11 +58,9 @@ const SendStatus = ({ activity }) => { ); const sendFailedRetryMatch = /\{Retry\}/u.exec(sendFailedText); - const { - channelData: { state } - } = activity; + const { channelData: { state } = {} } = activity; - return ( + return state === SENDING || state === SEND_FAILED ? ( @@ -85,6 +85,8 @@ const SendStatus = ({ activity }) => { )} + ) : ( + ); }; @@ -93,7 +95,8 @@ SendStatus.propTypes = { channelData: PropTypes.shape({ state: PropTypes.string }) - }).isRequired + }).isRequired, + timestampClassName: PropTypes.string.isRequired }; export default SendStatus; diff --git a/packages/component/src/Activity/StackedLayout.js b/packages/component/src/Activity/StackedLayout.js index c7a211d6d4..3b80772e53 100644 --- a/packages/component/src/Activity/StackedLayout.js +++ b/packages/component/src/Activity/StackedLayout.js @@ -1,6 +1,5 @@ /* eslint react/no-array-index-key: "off" */ -import { Constants } from 'botframework-webchat-core'; import { css } from 'glamor'; import classNames from 'classnames'; import PropTypes from 'prop-types'; @@ -13,7 +12,6 @@ import connectToWebChat from '../connectToWebChat'; import ScreenReaderText from '../ScreenReaderText'; import SendStatus from './SendStatus'; import textFormatToContentType from '../Utils/textFormatToContentType'; -import Timestamp from './Timestamp'; import useAvatarForBot from '../hooks/useAvatarForBot'; import useAvatarForUser from '../hooks/useAvatarForUser'; import useLocalize from '../hooks/useLocalize'; @@ -21,10 +19,6 @@ import useLocalizeDate from '../hooks/useLocalizeDate'; import useStyleOptions from '../hooks/useStyleOptions'; import useStyleSet from '../hooks/useStyleSet'; -const { - ActivityClientState: { SENDING, SEND_FAILED } -} = Constants; - const ROOT_CSS = css({ display: 'flex', @@ -93,7 +87,7 @@ const StackedLayout = ({ activity, children, timestampClassName }) => { const { attachments = [], - channelData: { messageBack: { displayText: messageBackDisplayText } = {}, state } = {}, + channelData: { messageBack: { displayText: messageBackDisplayText } = {} } = {}, from: { role } = {}, text, textFormat, @@ -103,7 +97,6 @@ const StackedLayout = ({ activity, children, timestampClassName }) => { const activityDisplayText = messageBackDisplayText || text; const fromUser = role === 'user'; const initials = fromUser ? userInitials : botInitials; - const showSendStatus = state === SENDING || state === SEND_FAILED; const plainText = remarkStripMarkdown(text); const indented = fromUser ? bubbleFromUserNubSize : bubbleNubSize; @@ -161,11 +154,7 @@ const StackedLayout = ({ activity, children, timestampClassName }) => { ))}
- {showSendStatus ? ( - - ) : ( - - )} +
diff --git a/packages/component/src/Activity/Timestamp.js b/packages/component/src/Activity/Timestamp.js index 4b1961a22a..acc554b197 100644 --- a/packages/component/src/Activity/Timestamp.js +++ b/packages/component/src/Activity/Timestamp.js @@ -9,14 +9,22 @@ import useStyleSet from '../hooks/useStyleSet'; const Timestamp = ({ activity: { timestamp }, 'aria-hidden': ariaHidden, className }) => { const [{ timestampFormat }] = useStyleOptions(); - const [{ timestamp: timestampStyleSet }] = useStyleSet(); + const [{ timestamp: timestampStyleSet, sendStatus: sendStatusStyleSet }] = useStyleSet(); + + timestampStyleSet && + console.warn( + 'Web Chat: styleSet.timestamp is being deprecated. Please use styleSet.sendStatus. This deprecation migration will be removed on or after December 31, 2021.' + ); if (!timestamp) { return false; } return ( - + {timestampFormat === 'relative' ? : } ); diff --git a/packages/component/src/Styles/StyleSet/Timestamp.js b/packages/component/src/Styles/StyleSet/Timestamp.js deleted file mode 100644 index df16aad64b..0000000000 --- a/packages/component/src/Styles/StyleSet/Timestamp.js +++ /dev/null @@ -1,8 +0,0 @@ -export default function createTimestampStyle({ fontSizeSmall, primaryFont, subtle, timestampColor }) { - return { - color: timestampColor || subtle, - fontFamily: primaryFont, - fontSize: fontSizeSmall, - paddingTop: 5 - }; -} diff --git a/packages/component/src/Styles/createStyleSet.js b/packages/component/src/Styles/createStyleSet.js index 677023522e..4f8aeebe52 100644 --- a/packages/component/src/Styles/createStyleSet.js +++ b/packages/component/src/Styles/createStyleSet.js @@ -27,7 +27,6 @@ import createSuggestedActionsStyle from './StyleSet/SuggestedActions'; import createSuggestedActionsStyleSet from './StyleSet/SuggestedActionsStyleSet'; import createSuggestedActionStyle from './StyleSet/SuggestedAction'; import createTextContentStyle from './StyleSet/TextContent'; -import createTimestampStyle from './StyleSet/Timestamp'; import createTypingAnimationStyle from './StyleSet/TypingAnimation'; import createTypingIndicatorStyle from './StyleSet/TypingIndicator'; import createUploadAttachmentStyle from './StyleSet/UploadAttachment'; @@ -201,7 +200,6 @@ export default function createStyleSet(options) { suggestedAction: createSuggestedActionStyle(options), suggestedActions: createSuggestedActionsStyle(options), textContent: createTextContentStyle(options), - timestamp: createTimestampStyle(options), typingAnimation: createTypingAnimationStyle(options), typingIndicator: createTypingIndicatorStyle(options), uploadAttachment: createUploadAttachmentStyle(options),