diff --git a/packages/component/src/Middleware/Attachment/createCoreMiddleware.js b/packages/component/src/Middleware/Attachment/createCoreMiddleware.js
index ea773f9d25..ef21bf5f00 100644
--- a/packages/component/src/Middleware/Attachment/createCoreMiddleware.js
+++ b/packages/component/src/Middleware/Attachment/createCoreMiddleware.js
@@ -6,7 +6,6 @@ import DownloadAttachment from '../../Attachment/DownloadAttachment';
import ImageAttachment from '../../Attachment/ImageAttachment';
import UploadAttachment from '../../Attachment/UploadAttachment';
import TextAttachment from '../../Attachment/TextAttachment';
-import TypingActivity from '../../Attachment/TypingActivity';
import VideoAttachment from '../../Attachment/VideoAttachment';
function hasThumbnail({ attachments = [], channelData: { attachmentThumbnails = [] } = {} }, attachment) {
@@ -18,10 +17,13 @@ function hasThumbnail({ attachments = [], channelData: { attachmentThumbnails =
// TODO: [P4] Rename this file or the whole middleware, it looks either too simple or too comprehensive now
export default function createCoreMiddleware() {
return () => next => {
- const Attachment = ({ activity = {}, attachment, attachment: { contentType, contentUrl } = {} }) =>
- activity.type === 'typing' ? (
-
- ) : activity.from.role === 'user' && !/^text\//u.test(contentType) && !hasThumbnail(activity, attachment) ? (
+ const Attachment = ({
+ activity = {},
+ activity: { from: { role } } = {},
+ attachment,
+ attachment: { contentType, contentUrl } = {}
+ }) =>
+ role === 'user' && !/^text\//u.test(contentType) && !hasThumbnail(activity, attachment) ? (
) : /^audio\//u.test(contentType) ? (
diff --git a/packages/component/src/Attachment/Assets/TypingAnimation.js b/packages/component/src/SendBox/Assets/TypingAnimation.js
similarity index 100%
rename from packages/component/src/Attachment/Assets/TypingAnimation.js
rename to packages/component/src/SendBox/Assets/TypingAnimation.js
diff --git a/packages/component/src/SendBox/TypingIndicator.js b/packages/component/src/SendBox/TypingIndicator.js
new file mode 100644
index 0000000000..cf7de55efe
--- /dev/null
+++ b/packages/component/src/SendBox/TypingIndicator.js
@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+import { localize } from '../Localization/Localize';
+import connectToWebChat from '../connectToWebChat';
+import TypingAnimation from './Assets/TypingAnimation';
+
+const TypingIndicator = ({
+ language,
+ lastTypingAt,
+ styleSet: {
+ options: { typingAnimationDuration },
+ typingIndicator
+ }
+}) => {
+ const [showTyping, setShowTyping] = useState(false);
+
+ useEffect(() => {
+ let timeout;
+ const last = Math.max(Object.values(lastTypingAt));
+ const typingAnimationTimeRemaining = typingAnimationDuration - Date.now() + last;
+
+ if (last && typingAnimationTimeRemaining > 0) {
+ setShowTyping(true);
+ timeout = setTimeout(() => setShowTyping(false), typingAnimationTimeRemaining);
+ } else {
+ setShowTyping(false);
+ }
+
+ return () => clearTimeout(timeout);
+ }, [lastTypingAt, typingAnimationDuration]);
+
+ return (
+ showTyping && (
+
+
+
+ )
+ );
+};
+
+TypingIndicator.propTypes = {
+ language: PropTypes.string.isRequired,
+ lastTypingAt: PropTypes.any.isRequired,
+ styleSet: PropTypes.shape({
+ options: PropTypes.shape({
+ typingAnimationDuration: PropTypes.number
+ }).isRequired,
+ typingIndicator: PropTypes.any.isRequired
+ }).isRequired
+};
+
+export default connectToWebChat(({ lastTypingAt, language, styleSet }) => ({ lastTypingAt, language, styleSet }))(
+ TypingIndicator
+);
diff --git a/packages/component/src/Styles/StyleSet/TypingActivity.js b/packages/component/src/Styles/StyleSet/TypingActivity.js
deleted file mode 100644
index 6a89afcc2d..0000000000
--- a/packages/component/src/Styles/StyleSet/TypingActivity.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function createTypingActivityStyle({ avatarSize }) {
- return {
- alignItems: 'center',
- // TODO: [P2] We should not set "display" in styleSet, this will allow the user to break the layout for no good reasons.
- display: 'flex',
- height: avatarSize
- };
-}
diff --git a/packages/component/src/Styles/StyleSet/TypingIndicator.js b/packages/component/src/Styles/StyleSet/TypingIndicator.js
new file mode 100644
index 0000000000..30ec74d630
--- /dev/null
+++ b/packages/component/src/Styles/StyleSet/TypingIndicator.js
@@ -0,0 +1,6 @@
+export default function createTypingIndicatorStyle({ paddingRegular }) {
+ return {
+ paddingBottom: paddingRegular,
+ paddingLeft: paddingRegular
+ };
+}
diff --git a/packages/component/src/Styles/createStyleSet.js b/packages/component/src/Styles/createStyleSet.js
index 2a8460f956..5361d61439 100644
--- a/packages/component/src/Styles/createStyleSet.js
+++ b/packages/component/src/Styles/createStyleSet.js
@@ -27,8 +27,8 @@ import createSuggestedActionsStyleSet from './StyleSet/SuggestedActionsStyleSet'
import createSuggestedActionStyle from './StyleSet/SuggestedAction';
import createTextContentStyle from './StyleSet/TextContent';
import createTimestampStyle from './StyleSet/Timestamp';
-import createTypingActivityStyle from './StyleSet/TypingActivity';
import createTypingAnimationStyle from './StyleSet/TypingAnimation';
+import createTypingIndicatorStyle from './StyleSet/TypingIndicator';
import createUploadAttachmentStyle from './StyleSet/UploadAttachment';
import createUploadButtonStyle from './StyleSet/UploadButton';
import createVideoAttachmentStyle from './StyleSet/VideoAttachment';
@@ -142,8 +142,8 @@ export default function createStyleSet(options) {
suggestedActions: createSuggestedActionsStyle(options),
textContent: createTextContentStyle(options),
timestamp: createTimestampStyle(options),
- typingActivity: createTypingActivityStyle(options),
typingAnimation: createTypingAnimationStyle(options),
+ typingIndicator: createTypingIndicatorStyle(options),
uploadAttachment: createUploadAttachmentStyle(options),
uploadButton: createUploadButtonStyle(options),
videoAttachment: createVideoAttachmentStyle(options),
diff --git a/packages/component/src/Styles/defaultStyleOptions.js b/packages/component/src/Styles/defaultStyleOptions.js
index 787efe7418..0624c58b41 100644
--- a/packages/component/src/Styles/defaultStyleOptions.js
+++ b/packages/component/src/Styles/defaultStyleOptions.js
@@ -125,6 +125,7 @@ const DEFAULT_OPTIONS = {
notificationText: '#5E5E5E',
typingAnimationBackgroundImage: null,
+ typingAnimationDuration: 5000,
typingAnimationHeight: 20,
typingAnimationWidth: 64,
diff --git a/packages/core/src/reducer.ts b/packages/core/src/reducer.ts
index d62d2fabb0..1a1904caa3 100644
--- a/packages/core/src/reducer.ts
+++ b/packages/core/src/reducer.ts
@@ -6,6 +6,7 @@ import connectivityStatus from './reducers/connectivityStatus';
import dictateInterims from './reducers/dictateInterims';
import dictateState from './reducers/dictateState';
import language from './reducers/language';
+import lastTypingAt from './reducers/lastTypingAt';
import readyState from './reducers/readyState';
import referenceGrammarID from './reducers/referenceGrammarID';
import sendBoxValue from './reducers/sendBoxValue';
@@ -21,6 +22,7 @@ export default combineReducers({
dictateInterims,
dictateState,
language,
+ lastTypingAt,
readyState,
referenceGrammarID,
sendBoxValue,
diff --git a/packages/core/src/reducers/activities.js b/packages/core/src/reducers/activities.js
index 7042d69c1c..20e9eb38d9 100644
--- a/packages/core/src/reducers/activities.js
+++ b/packages/core/src/reducers/activities.js
@@ -21,39 +21,23 @@ function findByClientActivityID(clientActivityID) {
}
function upsertActivityWithSort(activities, nextActivity) {
- const {
- channelData: { clientActivityID: nextClientActivityID } = {},
- from: { id: nextFromID, role: nextFromRole } = {},
- type: nextType
- } = nextActivity;
-
- if (nextType === 'typing' && nextFromRole === 'user') {
- return activities;
- }
+ const { channelData: { clientActivityID: nextClientActivityID } = {} } = nextActivity;
const nextTimestamp = Date.parse(nextActivity.timestamp);
const nextActivities = activities.filter(
- ({ channelData: { clientActivityID } = {}, from, type }) =>
- // We will remove all "typing" and "sending messages" activities
+ ({ channelData: { clientActivityID } = {} }) =>
+ // We will remove all "sending messages" activities
// "clientActivityID" is unique and used to track if the message has been sent and echoed back from the server
- !(
- (type === 'typing' && from.id === nextFromID) ||
- (nextClientActivityID && clientActivityID === nextClientActivityID)
- )
+ !(nextClientActivityID && clientActivityID === nextClientActivityID)
);
- // Then, find the right (sorted) place to insert the new activity at, based on timestamp, and must be before "typing"
+ // Then, find the right (sorted) place to insert the new activity at, based on timestamp
// Since clockskew might happen, we will ignore timestamp on messages that are sending
- // If we are inserting "typing", we will always append it
- // TODO: [P4] Move "typing" into Constants.ActivityType
- const indexToInsert =
- nextActivity.type === 'typing'
- ? -1
- : nextActivities.findIndex(
- ({ channelData: { state } = {}, timestamp, type }) =>
- (Date.parse(timestamp) > nextTimestamp && state !== SENDING && state !== SEND_FAILED) || type === 'typing'
- );
+ const indexToInsert = nextActivities.findIndex(
+ ({ channelData: { state } = {}, timestamp }) =>
+ Date.parse(timestamp) > nextTimestamp && state !== SENDING && state !== SEND_FAILED
+ );
// If no right place are found, append it
nextActivities.splice(~indexToInsert ? indexToInsert : nextActivities.length, 0, nextActivity);
@@ -97,7 +81,8 @@ export default function activities(state = DEFAULT_STATE, { meta, payload, type
case INCOMING_ACTIVITY:
// UpdateActivity is not supported right now because we ignore duplicated activity ID
- if (!~state.findIndex(({ id }) => id === payload.activity.id)) {
+ // TODO: [P4] Move "typing" into Constants.ActivityType
+ if (payload.activity.type !== 'typing' && !~state.findIndex(({ id }) => id === payload.activity.id)) {
state = upsertActivityWithSort(state, payload.activity);
}
diff --git a/packages/core/src/reducers/lastTypingAt.js b/packages/core/src/reducers/lastTypingAt.js
new file mode 100644
index 0000000000..5d7c4288cf
--- /dev/null
+++ b/packages/core/src/reducers/lastTypingAt.js
@@ -0,0 +1,29 @@
+/*eslint no-case-declarations: "off"*/
+/*eslint no-unused-vars: "off"*/
+
+import { INCOMING_ACTIVITY } from '../actions/incomingActivity';
+
+const DEFAULT_STATE = {};
+
+export default function lastTypingAt(state = DEFAULT_STATE, { payload, type }) {
+ if (type === INCOMING_ACTIVITY) {
+ const {
+ activity: {
+ from: { id, role },
+ type: activityType
+ }
+ } = payload;
+
+ if (role === 'bot') {
+ if (activityType === 'typing') {
+ state = { ...state, [id]: Date.now() };
+ } else if (activityType === 'message') {
+ const { [id]: last, ...nextState } = state;
+
+ state = nextState;
+ }
+ }
+ }
+
+ return state;
+}
diff --git a/packages/core/src/sagas.js b/packages/core/src/sagas.js
index eebb9da07d..14af433c64 100644
--- a/packages/core/src/sagas.js
+++ b/packages/core/src/sagas.js
@@ -7,7 +7,6 @@ import detectSlowConnectionSaga from './sagas/detectSlowConnectionSaga';
import incomingActivitySaga from './sagas/incomingActivitySaga';
import markAllAsSpokenOnStopSpeakActivitySaga from './sagas/markAllAsSpokenOnStopSpeakActivitySaga';
import postActivitySaga from './sagas/postActivitySaga';
-import removeIncomingTypingAfterIntervalSaga from './sagas/removeIncomingTypingAfterIntervalSaga';
import sendEventToPostActivitySaga from './sagas/sendEventToPostActivitySaga';
import sendFilesToPostActivitySaga from './sagas/sendFilesToPostActivitySaga';
import sendMessageBackToPostActivitySaga from './sagas/sendMessageBackToPostActivitySaga';
@@ -30,7 +29,6 @@ export default function* sagas() {
yield fork(incomingActivitySaga);
yield fork(markAllAsSpokenOnStopSpeakActivitySaga);
yield fork(postActivitySaga);
- yield fork(removeIncomingTypingAfterIntervalSaga);
yield fork(sendEventToPostActivitySaga);
yield fork(sendFilesToPostActivitySaga);
yield fork(sendMessageBackToPostActivitySaga);
diff --git a/packages/core/src/sagas/removeIncomingTypingAfterIntervalSaga.js b/packages/core/src/sagas/removeIncomingTypingAfterIntervalSaga.js
deleted file mode 100644
index a63a69729a..0000000000
--- a/packages/core/src/sagas/removeIncomingTypingAfterIntervalSaga.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { call, put, takeEvery } from 'redux-saga/effects';
-
-import { INCOMING_ACTIVITY } from '../actions/incomingActivity';
-import deleteActivity from '../actions/deleteActivity';
-
-const REMOVE_TYPING_ACTIVITY_AFTER = 5000;
-
-function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-function* removeActivityAfterInterval({
- payload: {
- activity: { id }
- }
-}) {
- // TODO: [P2] We could optimize here.
- // Given there is an activity typing activity, when the bot send another typing activity, we will remove the first one.
- // That means, we don't actually need to remove it anymore, and could cancel out this call.
- yield call(sleep, REMOVE_TYPING_ACTIVITY_AFTER);
- yield put(deleteActivity(id));
-}
-
-export default function*() {
- yield takeEvery(
- ({ type, payload }) => type === INCOMING_ACTIVITY && payload.activity.type === 'typing',
- removeActivityAfterInterval
- );
-}