role !== 'user').length];
+ return useMemo(
+ () =>
+ Object.freeze([
+ !!Object.values(activeTyping).some(
+ // Show typing indicator if anyone is typing and not livestreaming.
+ ({ role, type }) => role !== 'user' && type !== 'livestream'
+ )
+ ]),
+ [activeTyping]
+ );
}
-const BasicTypingIndicator: VFC<{}> = () => {
+const BasicTypingIndicator = () => {
const [activeTyping] = useActiveTyping();
const [visible] = useTypingIndicatorVisible();
const [typing] = useActiveTyping(Infinity);
diff --git a/packages/component/src/Middleware/Activity/createCoreMiddleware.tsx b/packages/component/src/Middleware/Activity/createCoreMiddleware.tsx
index f5e0dd2070..e97741e068 100644
--- a/packages/component/src/Middleware/Activity/createCoreMiddleware.tsx
+++ b/packages/component/src/Middleware/Activity/createCoreMiddleware.tsx
@@ -15,8 +15,37 @@ export default function createCoreMiddleware(): ActivityMiddleware[] {
const { type } = activity;
+ if (type === 'typing') {
+ if (
+ !(
+ 'text' in activity &&
+ typeof activity.text === 'string' &&
+ activity.channelData.streamType !== 'informative'
+ )
+ ) {
+ // If it is an informative message, hide it until we have a design for informative message.
+ return false;
+ }
+
+ // Should show if this is useActiveTyping()[0][*].firstActivity, and render it with the content of lastActivity.
+ return function renderStackedLayout(renderAttachment, props) {
+ typeof props === 'undefined' &&
+ console.warn(
+ 'botframework-webchat: One or more arguments were missing after passing through the activity middleware. Please check your custom activity middleware to make sure it passes all arguments.'
+ );
+
+ return (
+
+ );
+ };
+ }
+
// Filter out activities that should not be visible
- if (type === 'conversationUpdate' || type === 'event' || type === 'invoke' || type === 'typing') {
+ if (type === 'conversationUpdate' || type === 'event' || type === 'invoke') {
return false;
} else if (type === 'message') {
const { attachments, channelData, text } = activity;
diff --git a/packages/component/src/Middleware/TypingIndicator/createCoreMiddleware.tsx b/packages/component/src/Middleware/TypingIndicator/createCoreMiddleware.tsx
index f482efaad3..e711878eb4 100644
--- a/packages/component/src/Middleware/TypingIndicator/createCoreMiddleware.tsx
+++ b/packages/component/src/Middleware/TypingIndicator/createCoreMiddleware.tsx
@@ -13,7 +13,7 @@ const DotIndicator = () => {
const localize = useLocalizer();
return (
-
+
);
diff --git a/packages/component/src/Styles/StyleSet/TypingIndicator.ts b/packages/component/src/Styles/StyleSet/TypingIndicator.ts
index 3101161da4..9f964c810f 100644
--- a/packages/component/src/Styles/StyleSet/TypingIndicator.ts
+++ b/packages/component/src/Styles/StyleSet/TypingIndicator.ts
@@ -4,11 +4,11 @@ export default function createTypingIndicatorStyle({ paddingRegular }: StrictSty
return {
paddingBottom: paddingRegular,
- '&:not(.webchat__typingIndicator--rtl)': {
+ '&:not(.webchat__typing-indicator--rtl)': {
paddingLeft: paddingRegular
},
- '&.webchat__typingIndicator--rtl': {
+ '&.webchat__typing-indicator--rtl': {
paddingRight: paddingRegular
}
};
diff --git a/packages/component/src/providers/ActivityTree/ActivityTreeComposer.tsx b/packages/component/src/providers/ActivityTree/ActivityTreeComposer.tsx
index 4d5640cf3c..09daea67b2 100644
--- a/packages/component/src/providers/ActivityTree/ActivityTreeComposer.tsx
+++ b/packages/component/src/providers/ActivityTree/ActivityTreeComposer.tsx
@@ -1,31 +1,47 @@
-import { hooks } from 'botframework-webchat-api';
-import React, { useMemo } from 'react';
-
-import type { ActivityComponentFactory } from 'botframework-webchat-api';
-import type { FC, PropsWithChildren } from 'react';
+import { hooks, type ActivityComponentFactory } from 'botframework-webchat-api';
import type { WebChatActivity } from 'botframework-webchat-core';
+import React, { useMemo, type ReactNode } from 'react';
-import { ActivityWithRenderer, ReadonlyActivityTree } from './private/types';
+import useMemoWithPrevious from '../../hooks/internal/useMemoWithPrevious';
import ActivityTreeContext from './private/Context';
+import { ActivityWithRenderer, ReadonlyActivityTree } from './private/types';
import useActivitiesWithRenderer from './private/useActivitiesWithRenderer';
-import useActivityTreeContext from './private/useContext';
import useActivityTreeWithRenderer from './private/useActivityTreeWithRenderer';
-import useMemoWithPrevious from '../../hooks/internal/useMemoWithPrevious';
+import useActivityTreeContext from './private/useContext';
import type { ActivityTreeContextType } from './private/Context';
-type ActivityTreeComposerProps = PropsWithChildren<{}>;
+type ActivityTreeComposerProps = Readonly<{ children?: ReactNode | undefined }>;
-const { useActivities, useCreateActivityRenderer } = hooks;
+const { useActivities, useCreateActivityRenderer, useGetActivitiesByKey, useGetKeyByActivity } = hooks;
-const ActivityTreeComposer: FC
= ({ children }) => {
+const ActivityTreeComposer = ({ children }: ActivityTreeComposerProps) => {
const existingContext = useActivityTreeContext(false);
if (existingContext) {
throw new Error('botframework-webchat internal: should not be nested.');
}
- const [activities]: [WebChatActivity[]] = useActivities();
+ const [rawActivities] = useActivities();
+ const getActivitiesByKey = useGetActivitiesByKey();
+ const getKeyByActivity = useGetKeyByActivity();
+
+ const activities = useMemo(() => {
+ const activities: WebChatActivity[] = [];
+
+ for (const activity of rawActivities) {
+ // If an activity has multiple revisions, display the latest revision only at the position of the first revision.
+
+ // "Activities with same key" means "multiple revisions of same activity."
+ const activitiesWithSameKey = getActivitiesByKey(getKeyByActivity(activity));
+
+ // TODO: We may want to send all revisions of activity to the middleware so they can render UI to see previous revisions.
+ activitiesWithSameKey[0] === activity && activities.push(activitiesWithSameKey[activitiesWithSameKey.length - 1]);
+ }
+
+ return Object.freeze(activities);
+ }, [getActivitiesByKey, getKeyByActivity, rawActivities]);
+
const createActivityRenderer: ActivityComponentFactory = useCreateActivityRenderer();
const activitiesWithRenderer = useActivitiesWithRenderer(activities, createActivityRenderer);
diff --git a/packages/core/src/reducers/createActivitiesReducer.ts b/packages/core/src/reducers/createActivitiesReducer.ts
index 5ecec37c13..eb005bab18 100644
--- a/packages/core/src/reducers/createActivitiesReducer.ts
+++ b/packages/core/src/reducers/createActivitiesReducer.ts
@@ -11,10 +11,11 @@ import {
POST_ACTIVITY_PENDING,
POST_ACTIVITY_REJECTED
} from '../actions/postActivity';
-import { SEND_FAILED, SENDING, SENT } from '../types/internal/SendStatus';
+import { SENDING, SEND_FAILED, SENT } from '../types/internal/SendStatus';
+import findBeforeAfter from './private/findBeforeAfter';
+import type { Reducer } from 'redux';
import type { DeleteActivityAction } from '../actions/deleteActivity';
-import type { GlobalScopePonyfill } from '../types/GlobalScopePonyfill';
import type { IncomingActivityAction } from '../actions/incomingActivity';
import type { MarkActivityAction } from '../actions/markActivity';
import type {
@@ -23,7 +24,7 @@ import type {
PostActivityPendingAction,
PostActivityRejectedAction
} from '../actions/postActivity';
-import type { Reducer } from 'redux';
+import type { GlobalScopePonyfill } from '../types/GlobalScopePonyfill';
import type { WebChatActivity } from '../types/WebChatActivity';
type ActivitiesAction =
@@ -49,9 +50,15 @@ function findByClientActivityID(clientActivityID: string): (activity: WebChatAct
return (activity: WebChatActivity) => getClientActivityID(activity) === clientActivityID;
}
+function isPartOfLivestreamSession(
+ activity: WebChatActivity
+): activity is WebChatActivity & { text: string; type: 'typing' } {
+ return activity.type === 'typing' && 'text' in activity && typeof activity.text === 'string';
+}
+
function patchActivity(
activity: WebChatActivity,
- lastActivity: WebChatActivity,
+ activities: WebChatActivity[],
{ Date }: GlobalScopePonyfill
): WebChatActivity {
// Direct Line channel will return a placeholder image for the user-uploaded image.
@@ -69,26 +76,54 @@ function patchActivity(
}
});
+ activity = updateIn(activity, ['channelData'], channelData => ({ ...channelData }));
+ activity = updateIn(activity, ['channelData', 'webChat', 'receivedAt'], () => Date.now());
+
+ const {
+ channelData: { 'webchat:sequence-id': sequenceId }
+ } = activity;
+
+ // TODO: [P1] #3953 We should move this patching logic to a DLJS wrapper for simplicity.
// If the message does not have sequence ID, use these fallback values:
- // 1. "timestamp" field
+ // 1. "channelData.streamSequence" field (if available)
+ // - 0.0001 * streamSequence should be good
+ // 2. "timestamp" field
// - outgoing activity will not have "timestamp" field
- // 2. last activity sequence ID (or 0) + 0.001
+ // 3. last activity sequence ID (or 0) + 0.001
// - best effort to put this message the last one in the chat history
- activity = updateIn(activity, ['channelData', 'webchat:sequence-id'], (sequenceId?: number) =>
- typeof sequenceId === 'number'
- ? sequenceId
- : typeof activity.timestamp !== 'undefined'
- ? +new Date(activity.timestamp)
- : // We assume there will be no more than 1,000 messages sent before receiving server response.
- // If there are more than 1,000 messages, some messages will get reordered and appear jumpy after receiving server response.
- // eslint-disable-next-line no-magic-numbers
- (lastActivity?.channelData?.['webchat:sequence-id'] || 0) + 0.001
- );
+ if (typeof sequenceId !== 'number') {
+ let after: WebChatActivity;
+ let before: WebChatActivity;
+
+ if (isPartOfLivestreamSession(activity) && typeof activity.channelData.streamSequence === 'number') {
+ [before, after] = findBeforeAfter(activities, target => {
+ if (target.type === 'typing' && target.channelData.streamId === activity.channelData.streamId) {
+ return target.channelData.streamSequence < activity.channelData.streamSequence ? 'before' : 'after';
+ }
- // TODO: [P1] #3953 We should move this patching logic to a DLJS wrapper for simplicity.
- activity = updateIn(activity, ['channelData', 'webchat:sequence-id'], (sequenceId: number) =>
- typeof sequenceId === 'number' ? sequenceId : +new Date(activity.timestamp || 0) || 0
- );
+ return 'unknown';
+ });
+ }
+
+ let sequenceId: number;
+
+ if (before) {
+ // eslint-disable-next-line no-magic-numbers
+ sequenceId = before.channelData['webchat:sequence-id'] + 0.001;
+ } else if (after) {
+ // eslint-disable-next-line no-magic-numbers
+ sequenceId = after.channelData['webchat:sequence-id'] - 0.001;
+ } else if (typeof activity.timestamp !== 'undefined') {
+ sequenceId = +new Date(activity.timestamp);
+ } else {
+ // We assume there will be no more than 1,000 messages sent before receiving server response.
+ // If there are more than 1,000 messages, some messages will get reordered and appear jumpy after receiving server response.
+ // eslint-disable-next-line no-magic-numbers
+ sequenceId = (activities[activities.length - 1]?.channelData['webchat:sequence-id'] || 0) + 0.001;
+ }
+
+ activity = updateIn(activity, ['channelData', 'webchat:sequence-id'], () => sequenceId);
+ }
return activity;
}
@@ -98,7 +133,7 @@ function upsertActivityWithSort(
nextActivity: WebChatActivity,
ponyfill: GlobalScopePonyfill
): WebChatActivity[] {
- nextActivity = patchActivity(nextActivity, activities[activities.length - 1], ponyfill);
+ nextActivity = patchActivity(nextActivity, activities, ponyfill);
const { channelData: { clientActivityID: nextClientActivityID, 'webchat:sequence-id': nextSequenceId } = {} } =
nextActivity;
@@ -180,18 +215,22 @@ export default function createActivitiesReducer(
break;
case POST_ACTIVITY_FULFILLED:
- state = updateIn(state, [findByClientActivityID(action.meta.clientActivityID)], () => {
+ {
// We will replace the activity with the version from the server
const activity = updateIn(
- patchActivity(action.payload.activity, state[state.length - 1], ponyfill),
- // `channelData.state` is being deprecated in favor of `channelData['webchat:send-status']`.
- // Please refer to #4362 for details. Remove on or after 2024-07-31.
- ['channelData', 'state'],
+ updateIn(
+ patchActivity(action.payload.activity, state, ponyfill),
+ // `channelData.state` is being deprecated in favor of `channelData['webchat:send-status']`.
+ // Please refer to #4362 for details. Remove on or after 2024-07-31.
+ ['channelData', 'state'],
+ () => SENT
+ ),
+ ['channelData', 'webchat:send-status'],
() => SENT
);
- return updateIn(activity, ['channelData', 'webchat:send-status'], () => SENT);
- });
+ state = updateIn(state, [findByClientActivityID(action.meta.clientActivityID)], () => activity);
+ }
break;
diff --git a/packages/core/src/reducers/private/findBeforeAfter.spec.ts b/packages/core/src/reducers/private/findBeforeAfter.spec.ts
new file mode 100644
index 0000000000..87362b2b48
--- /dev/null
+++ b/packages/core/src/reducers/private/findBeforeAfter.spec.ts
@@ -0,0 +1,90 @@
+/* eslint no-magic-numbers: "off" */
+
+import findBeforeAfter from './findBeforeAfter';
+
+let before: number | string | undefined;
+let after: number | string | undefined;
+let index: number | undefined;
+const getPosition = jest.fn<'after' | 'before' | 'unknown', [unknown]>().mockImplementation(() => {
+ throw new Error('This function should not be called.');
+});
+
+describe('when passing an empty array', () => {
+ beforeEach(() => ([before, after, index] = findBeforeAfter([] as (number | string)[], getPosition)));
+
+ test('before should be undefined', () => expect(before).toBeUndefined());
+ test('after should be undefined', () => expect(after).toBeUndefined());
+ test('index should be undefined', () => expect(index).toBeUndefined());
+});
+
+describe('when passing a value of 2 to [a, 1, 3, b]', () => {
+ beforeEach(() => {
+ getPosition.mockImplementation(value => (typeof value === 'number' ? (value < 2 ? 'before' : 'after') : 'unknown'));
+
+ [before, after, index] = findBeforeAfter(['a', 1, 3, 'b'], getPosition);
+ });
+
+ test('before should be 1', () => expect(before).toBe(1));
+ test('after should be 3', () => expect(after).toBe(3));
+ test('index should be 2', () => expect(index).toBe(2));
+});
+
+describe('when passing a value of 2 to [3, b]', () => {
+ beforeEach(() => {
+ getPosition.mockImplementation(value => (typeof value === 'number' ? (value < 2 ? 'before' : 'after') : 'unknown'));
+
+ [before, after, index] = findBeforeAfter([3, 'b'], getPosition);
+ });
+
+ test('before should be undefined', () => expect(before).toBeUndefined());
+ test('after should be 3', () => expect(after).toBe(3));
+ test('index should be 0', () => expect(index).toBe(0));
+});
+
+describe('when passing a value of 2 to [a, 1]', () => {
+ beforeEach(() => {
+ getPosition.mockImplementation(value => (typeof value === 'number' ? (value < 2 ? 'before' : 'after') : 'unknown'));
+
+ [before, after, index] = findBeforeAfter(['a', 1], getPosition);
+ });
+
+ test('before should be 1', () => expect(before).toBe(1));
+ test('after should be undefined', () => expect(after).toBeUndefined());
+ test('index should be 2', () => expect(index).toBe(2));
+});
+
+describe('when passing a value of 2 to [a, 1, b]', () => {
+ beforeEach(() => {
+ getPosition.mockImplementation(value => (typeof value === 'number' ? (value < 2 ? 'before' : 'after') : 'unknown'));
+
+ [before, after, index] = findBeforeAfter(['a', 1, 'b'], getPosition);
+ });
+
+ test('before should be 1', () => expect(before).toBe(1));
+ test('after should be "b"', () => expect(after).toBe('b'));
+ test('index should be 2', () => expect(index).toBe(2));
+});
+
+describe('when passing a value of 2 to [a, 3, b]', () => {
+ beforeEach(() => {
+ getPosition.mockImplementation(value => (typeof value === 'number' ? (value < 2 ? 'before' : 'after') : 'unknown'));
+
+ [before, after, index] = findBeforeAfter(['a', 3, 'b'], getPosition);
+ });
+
+ test('before should be "a"', () => expect(before).toBe('a'));
+ test('after should be 3', () => expect(after).toBe(3));
+ test('index should be 1', () => expect(index).toBe(1));
+});
+
+describe('when passing a value of 2 to [a, b]', () => {
+ beforeEach(() => {
+ getPosition.mockImplementation(value => (typeof value === 'number' ? (value < 2 ? 'before' : 'after') : 'unknown'));
+
+ [before, after, index] = findBeforeAfter(['a', 'b'], getPosition);
+ });
+
+ test('before should be undefined', () => expect(before).toBeUndefined());
+ test('after should be undefined', () => expect(after).toBeUndefined());
+ test('index should be undefined', () => expect(index).toBeUndefined());
+});
diff --git a/packages/core/src/reducers/private/findBeforeAfter.ts b/packages/core/src/reducers/private/findBeforeAfter.ts
new file mode 100644
index 0000000000..bec4e48452
--- /dev/null
+++ b/packages/core/src/reducers/private/findBeforeAfter.ts
@@ -0,0 +1,30 @@
+type Position = 'after' | 'before' | 'unknown';
+
+export default function findBeforeAfter(
+ array: T[],
+ getPosition: (value: T) => Position
+): [T | undefined, T | undefined, number | undefined] {
+ let lastValue: T | undefined;
+ let lastPosition: Position = 'unknown';
+
+ for (let index = 0; index < array.length; index++) {
+ const value = array[+index];
+ const currentPosition = getPosition(value);
+
+ if (
+ ((lastPosition === 'before' || lastPosition === 'unknown') && currentPosition === 'after') ||
+ (lastPosition === 'before' && (currentPosition === 'after' || currentPosition === 'unknown'))
+ ) {
+ return [lastValue, value, index];
+ }
+
+ lastValue = value;
+ lastPosition = currentPosition;
+ }
+
+ if (lastPosition === 'before') {
+ return [lastValue, undefined, array.length];
+ }
+
+ return [undefined, undefined, undefined];
+}
diff --git a/packages/core/src/types/WebChatActivity.ts b/packages/core/src/types/WebChatActivity.ts
index eeaf4321cb..3d41d78744 100644
--- a/packages/core/src/types/WebChatActivity.ts
+++ b/packages/core/src/types/WebChatActivity.ts
@@ -25,6 +25,22 @@ type ChannelData;
+ };
} & (SendStatus extends SupportedSendStatus
? {
/**
@@ -135,6 +151,11 @@ type EventActivityEssence = {
type MessageActivityEssence = {
attachmentLayout?: 'carousel' | 'stacked';
attachments?: DirectLineAttachment[];
+ channelData: {
+ streamId?: string;
+ streamSequence?: number;
+ streamType?: 'final';
+ };
inputHint?: 'accepting' | 'expecting' | 'ignoring';
locale?: string;
speak?: string;
@@ -146,9 +167,19 @@ type MessageActivityEssence = {
};
// https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#typing-activity
-type TypingActivityEssence = {
- type: 'typing';
-};
+type TypingActivityEssence =
+ | {
+ type: 'typing';
+ }
+ | {
+ channelData: {
+ streamId: string;
+ streamSequence: number;
+ streamType: 'informative' | 'streaming';
+ };
+ text: string;
+ type: 'typing';
+ };
// Abstract - timestamps
diff --git a/packages/test/page-object/src/globals/pageElements/index.js b/packages/test/page-object/src/globals/pageElements/index.js
index f1d2bc190a..0e1451a897 100644
--- a/packages/test/page-object/src/globals/pageElements/index.js
+++ b/packages/test/page-object/src/globals/pageElements/index.js
@@ -20,6 +20,7 @@ import transcript from './transcript';
import transcriptLiveRegion from './transcriptLiveRegion';
import transcriptScrollable from './transcriptScrollable';
import transcriptTerminator from './transcriptTerminator';
+import typingIndicator from './typingIndicator';
import uploadButton from './uploadButton';
export {
@@ -45,5 +46,6 @@ export {
transcriptLiveRegion,
transcriptScrollable,
transcriptTerminator,
+ typingIndicator,
uploadButton
};
diff --git a/packages/test/page-object/src/globals/pageElements/typingIndicator.js b/packages/test/page-object/src/globals/pageElements/typingIndicator.js
index 69a73b62ec..ac85876d28 100644
--- a/packages/test/page-object/src/globals/pageElements/typingIndicator.js
+++ b/packages/test/page-object/src/globals/pageElements/typingIndicator.js
@@ -1,3 +1,3 @@
-export default function typeFocusSink() {
- return document.querySelector('.webchat__typingIndicator');
+export default function typingIndicator() {
+ return document.querySelector('.webchat__typing-indicator');
}
diff --git a/samples/05.custom-components/j.typing-indicator/README.md b/samples/05.custom-components/j.typing-indicator/README.md
index fc2ef9cca0..abd90c0764 100644
--- a/samples/05.custom-components/j.typing-indicator/README.md
+++ b/samples/05.custom-components/j.typing-indicator/README.md
@@ -59,7 +59,7 @@ Then, register a custom component to override the existing typing indicator:
+
+ return (
+ !!activeTyping.length && (
-+
++
+ Currently typing:{' '}
+ {activeTyping
+ .map(({ role }) => role)
@@ -105,7 +105,7 @@ Add the following CSS for styling the typing indicator:
```css
-.webchat__typingIndicator {
+.webchat__typing-indicator {
font-family: 'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif';
font-size: 14px;
padding: 10px;
@@ -143,7 +143,7 @@ Here is the finished `index.html`:
width: 100%;
}
- .webchat__typingIndicator {
+ .webchat__typing-indicator {
font-family: 'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif';
font-size: 14px;
padding: 10px;
@@ -168,7 +168,7 @@ Here is the finished `index.html`:
return (
!!activeTyping.length && (
-
+
Currently typing:{' '}
{activeTyping
.map(({ role }) => role)
diff --git a/samples/05.custom-components/j.typing-indicator/index.html b/samples/05.custom-components/j.typing-indicator/index.html
index 9890465d47..06d8602639 100644
--- a/samples/05.custom-components/j.typing-indicator/index.html
+++ b/samples/05.custom-components/j.typing-indicator/index.html
@@ -1,4 +1,4 @@
-
+
Web Chat: Customizing typing indicator
@@ -29,7 +29,7 @@
width: 100%;
}
- .webchat__typingIndicator {
+ .webchat__typing-indicator {
font-family: 'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif';
font-size: 14px;
padding: 10px;
@@ -53,21 +53,23 @@
next => ({ activeTyping }) => {
- activeTyping = Object.values(activeTyping);
+ typingIndicatorMiddleware={() =>
+ next =>
+ ({ activeTyping }) => {
+ activeTyping = Object.values(activeTyping);
- return (
- !!activeTyping.length && (
-
- Currently typing:{' '}
- {activeTyping
- .map(({ role }) => role)
- .sort()
- .join(', ')}
-
- )
- );
- }}
+ return (
+ !!activeTyping.length && (
+
+ Currently typing:{' '}
+ {activeTyping
+ .map(({ role }) => role)
+ .sort()
+ .join(', ')}
+
+ )
+ );
+ }}
/>,
document.getElementById('webchat')
);