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