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

package/src/providers/ActivityAcknowledgement/ActivityAcknowledgementComposer.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useMemo, useState } from 'react';
+
+import type { FC, PropsWithChildren } from 'react';
+
+import ActivityAcknowledgementContext, { ActivityAcknowledgementContextType } from './private/Context';
+import findLastIndex from '../../utils/findLastIndex';
+import useActivities from '../../hooks/useActivities';
+import useActivityKeys from '../ActivityKeyer/useActivityKeys';
+import usePrevious from '../../hooks/internal/usePrevious';
+import useValueRef from '../../hooks/internal/useValueRef';
+
+import type { ActivityAcknowledgement } from './private/types';
+
+type ActivityAcknowledgementComposerProps = PropsWithChildren<{}>;
+
+function findClosestActivityKeyIfNotExists(
+  activityKey: string,
+  keys: readonly string[],
+  prevKeys: readonly string[]
+): string | undefined {
+  if (keys.includes(activityKey)) {
+    return activityKey;
+  } else if (!prevKeys || !activityKey) {
+    // Initially, when the transcript was empty, there should be nothing read.
+    return;
+  }
+
+  // If the last activity key is no longer in this activities (say, deleted), we try to find the closest one.
+  const prevIndex = prevKeys.indexOf(activityKey);
+
+  if (~prevIndex) {
+    // List out all previously activity keys, find the closest one that is in the new transcript.
+    const acknowledgedActivityKeys = prevKeys.slice(0, prevIndex).reverse();
+
+    for (const prevAcknowledgedActivityKey of acknowledgedActivityKeys) {
+      if (keys.includes(prevAcknowledgedActivityKey)) {
+        return prevAcknowledgedActivityKey;
+      }
+    }
+  }
+
+  // If nothing is found, return `undefined`.
+}
+
+const ActivityAcknowledgementComposer: FC<ActivityAcknowledgementComposerProps> = ({ children }) => {
+  const [activities] = useActivities();
+  const [allActivityKeys] = useActivityKeys();
+  const [rawLastAcknowledgedActivityKey, setRawLastAcknowledgedActivityKey] = useState<string | undefined>();
+  const [rawLastReadActivityKey, setRawLastReadActivityKey] = useState<string | undefined>();
+
+  const allActivityKeysRef = useValueRef(allActivityKeys);
+  const prevAllActivityKeys = usePrevious(allActivityKeys);
+
+  const lastOutgoingActivityKeyIndex = useMemo(
+    () => findLastIndex(activities, activity => activity.from?.role === 'user'),
+    [activities]
+  );
+
+  // Make sure when we return "lastReadActivityKey" exists in the current transcript.
+  const lastReadActivityKey = useMemo(() => {
+    rawLastReadActivityKey &&
+      !~prevAllActivityKeys.includes(rawLastReadActivityKey) &&
+      console.warn(
+        `botframework-webchat internal assertion: "rawLastReadActivityKey" of value ${rawLastReadActivityKey} should be in the "prevAllActivityKeys" array.`
+      );
+
+    return findClosestActivityKeyIfNotExists(rawLastReadActivityKey, allActivityKeys, prevAllActivityKeys);
+  }, [allActivityKeys, prevAllActivityKeys, rawLastReadActivityKey]);
+
+  const lastReadActivityKeyRef = useValueRef(lastReadActivityKey);
+
+  // Make sure when we return "lastAcknowledgedActivityKey" exists in the current transcript.
+  const lastAcknowledgedActivityKey = useMemo(() => {
+    rawLastAcknowledgedActivityKey &&
+      !~prevAllActivityKeys.includes(rawLastAcknowledgedActivityKey) &&
+      console.warn(
+        `botframework-webchat internal assertion: "rawLastAcknowledgedActivityKey" of value ${rawLastAcknowledgedActivityKey} should be in the "prevAllActivityKeys" array.`
+      );
+
+    const lastAcknowledgedActivityKey = findClosestActivityKeyIfNotExists(
+      rawLastAcknowledgedActivityKey,
+      allActivityKeys,
+      prevAllActivityKeys
+    );
+
+    // TODO: [P2] Since Direct Line may send history and does not have read receipt.
+    //            Thus, if we don't assume everything is acknowledged initially, while displaying the history,
+    //            the transcript would soon stop scrolling.
+    //            Thus, before the first outgoing activity is detected, we need to assume everything is acknowledged.
+    return (
+      allActivityKeys[Math.max(allActivityKeys.indexOf(lastAcknowledgedActivityKey), lastOutgoingActivityKeyIndex)] ||
+      allActivityKeys[allActivityKeys.length - 1]
+    );
+  }, [allActivityKeys, lastOutgoingActivityKeyIndex, prevAllActivityKeys, rawLastAcknowledgedActivityKey]);
+
+  const activityAcknowledgements = useMemo<Readonly<Map<string, ActivityAcknowledgement>>>(() => {
+    const activityAcknowledgements = new Map<string, ActivityAcknowledgement>();
+    const lastAcknowledgedIndex = allActivityKeys.indexOf(lastAcknowledgedActivityKey);
+    const lastReadIndex = allActivityKeys.indexOf(lastReadActivityKey);
+
+    allActivityKeys.forEach((activityKey, index) => {
+      activityAcknowledgements.set(activityKey, {
+        acknowledged: index <= lastAcknowledgedIndex,
+        read: index <= lastReadIndex
+      });
+    });
+
+    return Object.freeze(activityAcknowledgements);
+  }, [allActivityKeys, lastAcknowledgedActivityKey, lastReadActivityKey]);
+
+  const activityAcknowledgementsRef = useValueRef(activityAcknowledgements);
+
+  const getHasAcknowledgedByActivityKey = useCallback<(activityKey: string) => boolean>(
+    (activityKey: string) => activityAcknowledgementsRef.current.get(activityKey)?.acknowledged,
+    [activityAcknowledgementsRef]
+  );
+
+  // TODO: [P2] Memoize with `useMemoWithPrevious` for better memoization of arrays.
+  const activityKeysByReadState = useMemo<readonly [readonly string[], readonly string[]]>(() => {
+    const index = allActivityKeys.indexOf(lastReadActivityKey);
+
+    return Object.freeze([
+      Object.freeze(allActivityKeys.slice(0, index + 1)),
+      Object.freeze(allActivityKeys.slice(index + 1))
+    ]) as readonly [readonly string[], readonly string[]];
+  }, [allActivityKeys, lastReadActivityKey]);
+
+  const markAllAsAcknowledged = useCallback((): void => {
+    const { current: allActivityKeys } = allActivityKeysRef;
+
+    setRawLastAcknowledgedActivityKey(allActivityKeys[allActivityKeys.length - 1]);
+  }, [allActivityKeysRef, setRawLastAcknowledgedActivityKey]);
+
+  const markActivityKeyAsRead = useCallback(
+    (activityKey: string): void => {
+      const { current: allActivityKeys } = allActivityKeysRef;
+      const index = allActivityKeys.indexOf(activityKey);
+
+      if (!~index) {
+        return console.warn(
+          `botframework-webchat: Cannot mark activity with key ${activityKey} as read because it is not in the transcript.`
+        );
+      }
+
+      index > allActivityKeys.indexOf(lastReadActivityKeyRef.current) && setRawLastReadActivityKey(activityKey);
+    },
+    [allActivityKeysRef, lastReadActivityKeyRef, setRawLastReadActivityKey]
+  );
+
+  if (activityKeysByReadState[0].length + activityKeysByReadState[1].length !== allActivityKeys.length) {
+    console.warn(
+      'botframework-webchat internal: Sum of count of read and unread activity keys MUST equals to total number of activity keys.'
+    );
+  }
+
+  const contextValue = useMemo<ActivityAcknowledgementContextType>(
+    () => ({
+      activityKeysByReadState,
+      getHasAcknowledgedByActivityKey,
+      lastAcknowledgedActivityKeyState: Object.freeze([lastAcknowledgedActivityKey]) as readonly [string],
+      lastReadActivityKeyState: Object.freeze([lastReadActivityKey]) as readonly [string],
+      markActivityKeyAsRead,
+      markAllAsAcknowledged
+    }),
+    [
+      activityKeysByReadState,
+      getHasAcknowledgedByActivityKey,
+      lastAcknowledgedActivityKey,
+      lastReadActivityKey,
+      markActivityKeyAsRead,
+      markAllAsAcknowledged
+    ]
+  );
+
+  return (
+    <ActivityAcknowledgementContext.Provider value={contextValue}>{children}</ActivityAcknowledgementContext.Provider>
+  );
+};
+
+export default ActivityAcknowledgementComposer;

package/src/providers/ActivityAcknowledgement/private/Context.ts

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+// TODO: [P1] It seems acknowledgement is only for transcript scrolling and not very beneficial to everyone.
+//            We should move acknowledgement logic to transcript.
+type ActivityAcknowledgementContextType = {
+  activityKeysByReadState: readonly [readonly string[], readonly string[]];
+  getHasAcknowledgedByActivityKey: (activityKey: string) => boolean | undefined;
+  lastAcknowledgedActivityKeyState: readonly [string];
+  lastReadActivityKeyState: readonly [string];
+  markActivityKeyAsRead: (activityKey: string) => void;
+  markAllAsAcknowledged: () => void;
+};
+
+const ActivityAcknowledgementContext = createContext<ActivityAcknowledgementContextType>(undefined);
+
+export default ActivityAcknowledgementContext;
+
+export type { ActivityAcknowledgementContextType };

package/src/providers/ActivityAcknowledgement/private/types.ts

@@ -0,0 +1,6 @@
+type ActivityAcknowledgement = {
+  get acknowledged(): boolean;
+  get read(): boolean;
+};
+
+export type { ActivityAcknowledgement };

package/src/providers/ActivityAcknowledgement/private/useContext.ts

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+
+import ActivityAcknowledgementContext from './Context';
+
+import type { ActivityAcknowledgementContextType } from './Context';
+
+export default function useActivityAcknowledgementContext(
+  thrownOnUndefined = true
+): ActivityAcknowledgementContextType {
+  const contextValue = useContext(ActivityAcknowledgementContext);
+
+  if (thrownOnUndefined && !contextValue) {
+    throw new Error(
+      'botframework-webchat internal: This hook can only be used under <ActivityAcknowledgementContext>.'
+    );
+  }
+
+  return contextValue;
+}

package/src/providers/ActivityAcknowledgement/useActivityKeysByRead.tsx

@@ -0,0 +1,8 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+/**
+ * Returns an arrays of two list of activity keys: read and unread.
+ */
+export default function useActivityKeysByRead(): readonly [readonly string[], readonly string[]] {
+  return useActivityAcknowledgementContext().activityKeysByReadState;
+}

package/src/providers/ActivityAcknowledgement/useGetHasAcknowledgedByActivityKey.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useGetHasAcknoweledgedByActivityKey(): (activityKey: string) => boolean | undefined {
+  return useActivityAcknowledgementContext().getHasAcknowledgedByActivityKey;
+}

package/src/providers/ActivityAcknowledgement/useLastAcknowledgedActivityKey.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useLastAcknowledgedActivityKey(): readonly [string] {
+  return useActivityAcknowledgementContext().lastAcknowledgedActivityKeyState;
+}

package/src/providers/ActivityAcknowledgement/useLastReadActivityKey.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useLastReadActivityKey(): readonly [string] {
+  return useActivityAcknowledgementContext().lastReadActivityKeyState;
+}

package/src/providers/ActivityAcknowledgement/useMarkActivityKeyAsRead.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useMarkActivityKeyAsRead(): (activityKey: string) => void {
+  return useActivityAcknowledgementContext().markActivityKeyAsRead;
+}

package/src/providers/ActivityAcknowledgement/useMarkAllAsAcknowledged.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useMarkAllAsAcknowledged(): () => void {
+  return useActivityAcknowledgementContext().markAllAsAcknowledged;
+}

package/src/providers/ActivityKeyer/ActivityKeyerComposer.tsx

@@ -0,0 +1,150 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useMemo, useRef } from 'react';
+import type { FC } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+import ActivityKeyerContext, { ActivityKeyerContextType } from './private/Context';
+import getActivityId from './private/getActivityId';
+import getClientActivityId from './private/getClientActivityId';
+import uniqueId from './private/uniqueId';
+import useActivities from '../../hooks/useActivities';
+import useActivityKeyerContext from './private/useContext';
+
+type ActivityIdToKeyMap = Map<string, string>;
+type ActivityToKeyMap = Map<WebChatActivity, string>;
+type ClientActivityIdToKeyMap = Map<string, string>;
+type KeyToActivityMap = Map<string, WebChatActivity>;
+
+/**
+ * React context composer component to assign a perma-key to every activity.
+ * This will support both `useGetActivityByKey` and `useGetKeyByActivity` custom hooks.
+ *
+ * Today, `activity.id` is only guaranteed for activity from others.
+ * Not all activities sent by the local user has `activity.id`.
+ *
+ * To track outgoing activities, we added `activity.channelData.clientActivityId`.
+ *
+ * This component will create a local key, which can be used to track both
+ * incoming and outgoing activities in a consistent way.
+ *
+ * Local key are only persisted in memory. On refresh, they will be a new random key.
+ */
+const ActivityKeyerComposer: FC<{}> = ({ children }) => {
+  const existingContext = useActivityKeyerContext(false);
+
+  if (existingContext) {
+    throw new Error('botframework-webchat internal: <ActivityKeyerComposer> should not be nested.');
+  }
+
+  const [activities] = useActivities();
+  const activityIdToKeyMapRef = useRef<Readonly<ActivityIdToKeyMap>>(Object.freeze(new Map()));
+  const activityToKeyMapRef = useRef<Readonly<ActivityToKeyMap>>(Object.freeze(new Map()));
+  const clientActivityIdToKeyMapRef = useRef<Readonly<ClientActivityIdToKeyMap>>(Object.freeze(new Map()));
+  const keyToActivityMapRef = useRef<Readonly<KeyToActivityMap>>(Object.freeze(new Map()));
+
+  // TODO: [P1] `useMemoWithPrevious` to check and cache the resulting array if it hasn't changed.
+  const activityKeysState = useMemo<readonly [readonly string[]]>(() => {
+    const { current: activityIdToKeyMap } = activityIdToKeyMapRef;
+    const { current: activityToKeyMap } = activityToKeyMapRef;
+    const { current: clientActivityIdToKeyMap } = clientActivityIdToKeyMapRef;
+    const nextActivityIdToKeyMap: ActivityIdToKeyMap = new Map();
+    const nextActivityKeys: string[] = [];
+    const nextActivityToKeyMap: ActivityToKeyMap = new Map();
+    const nextClientActivityIdToKeyMap: ClientActivityIdToKeyMap = new Map();
+    const nextKeyToActivityMap: KeyToActivityMap = new Map();
+
+    activities.forEach(activity => {
+      const activityId = getActivityId(activity);
+      const clientActivityId = getClientActivityId(activity);
+
+      const key =
+        (clientActivityId && clientActivityIdToKeyMap.get(clientActivityId)) ||
+        (activityId && activityIdToKeyMap.get(activityId)) ||
+        activityToKeyMap.get(activity) ||
+        uniqueId();
+
+      activityId && nextActivityIdToKeyMap.set(activityId, key);
+      clientActivityId && nextClientActivityIdToKeyMap.set(clientActivityId, key);
+      nextActivityToKeyMap.set(activity, key);
+      nextKeyToActivityMap.set(key, activity);
+      nextActivityKeys.push(key);
+    });
+
+    activityIdToKeyMapRef.current = Object.freeze(nextActivityIdToKeyMap);
+    activityToKeyMapRef.current = Object.freeze(nextActivityToKeyMap);
+    clientActivityIdToKeyMapRef.current = Object.freeze(nextClientActivityIdToKeyMap);
+    keyToActivityMapRef.current = Object.freeze(nextKeyToActivityMap);
+
+    // `nextActivityKeys` could potentially same as `prevActivityKeys` despite reference differences, we should memoize it.
+    return Object.freeze([Object.freeze(nextActivityKeys)]) as readonly [readonly string[]];
+  }, [activities, activityIdToKeyMapRef, activityToKeyMapRef, clientActivityIdToKeyMapRef, keyToActivityMapRef]);
+
+  const getActivityByKey: (key?: string) => undefined | WebChatActivity = useCallback(
+    (key?: string): undefined | WebChatActivity => key && keyToActivityMapRef.current.get(key),
+    [keyToActivityMapRef]
+  );
+
+  const getKeyByActivity: (activity?: WebChatActivity) => string | undefined = useCallback(
+    (activity?: WebChatActivity) => activity && activityToKeyMapRef.current.get(activity),
+    [activityToKeyMapRef]
+  );
+
+  const getKeyByActivityId: (activityId?: string) => string | undefined = useCallback(
+    (activityId?: string) => activityId && activityIdToKeyMapRef.current.get(activityId),
+    [activityIdToKeyMapRef]
+  );
+
+  const contextValue = useMemo<ActivityKeyerContextType>(
+    () => ({
+      activityKeysState,
+      getActivityByKey,
+      getKeyByActivity,
+      getKeyByActivityId
+    }),
+    [activityKeysState, getActivityByKey, getKeyByActivity, getKeyByActivityId]
+  );
+
+  const { length: numActivities } = activities;
+
+  if (activityIdToKeyMapRef.current.size > numActivities) {
+    console.warn(
+      'botframework-webchat internal assertion: "activityIdToKeyMap.size" should be equal or less than "activities.length".'
+    );
+  }
+
+  if (activityToKeyMapRef.current.size !== numActivities) {
+    console.warn(
+      'botframework-webchat internal assertion: "activityToKeyMap.size" should be same as "activities.length".'
+    );
+  }
+
+  if (clientActivityIdToKeyMapRef.current.size > numActivities) {
+    console.warn(
+      'botframework-webchat internal assertion: "clientActivityIdToKeyMap.size" should be equal or less than "activities.length".'
+    );
+  }
+
+  if (keyToActivityMapRef.current.size !== numActivities) {
+    console.warn(
+      'botframework-webchat internal assertion: "keyToActivityMap.size" should be same as "activities.length".'
+    );
+  }
+
+  if (activityKeysState[0].length !== numActivities) {
+    console.warn(
+      'botframework-webchat internal assertion: "activityKeys.length" should be same as "activities.length".'
+    );
+  }
+
+  return <ActivityKeyerContext.Provider value={contextValue}>{children}</ActivityKeyerContext.Provider>;
+};
+
+ActivityKeyerComposer.defaultProps = {
+  children: undefined
+};
+
+ActivityKeyerComposer.propTypes = {
+  children: PropTypes.any
+};
+
+export default ActivityKeyerComposer;

package/src/providers/ActivityKeyer/private/Context.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+type ActivityKeyerContextType = {
+  activityKeysState: readonly [readonly string[]];
+  getActivityByKey: (key?: string) => undefined | WebChatActivity;
+  getKeyByActivity: (activity?: WebChatActivity) => string | undefined;
+  getKeyByActivityId: (activityKey?: string) => string | undefined;
+};
+
+export default createContext<ActivityKeyerContextType>(undefined);
+
+export type { ActivityKeyerContextType };

package/src/providers/ActivityKeyer/private/getActivityId.ts

@@ -0,0 +1,5 @@
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+export default function getActivityId(activity: WebChatActivity): string {
+  return activity.id;
+}

package/src/providers/ActivityKeyer/private/getClientActivityId.ts

@@ -0,0 +1,5 @@
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+export default function getClientActivityId(activity: WebChatActivity): string {
+  return activity.channelData?.clientActivityID;
+}

package/src/providers/ActivityKeyer/private/uniqueId.ts

@@ -0,0 +1,8 @@
+import random from 'math-random';
+
+// This format ID must be compatible with HTML "className" and "id" attribute.
+// It will be suffixed as "webchat__activity--{id}".
+export default function uniqueId(): string {
+  // eslint-disable-next-line no-magic-numbers
+  return random().toString(36).substring(2, 7);
+}

package/src/providers/ActivityKeyer/private/useContext.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import ActivityKeyerContext from './Context';
+
+import type { ActivityKeyerContextType } from './Context';
+
+export default function useActivityKeyerContext(thrownOnUndefined = true): ActivityKeyerContextType {
+  const contextValue = useContext(ActivityKeyerContext);
+
+  if (thrownOnUndefined && !contextValue) {
+    throw new Error('botframework-webchat internal: This hook can only be used under <ActivityKeyerComposer>.');
+  }
+
+  return contextValue;
+}

package/src/providers/ActivityKeyer/useActivityKeys.ts

@@ -0,0 +1,5 @@
+import useActivityKeyerContext from './private/useContext';
+
+export default function useActivityKeys(): readonly [readonly string[]] {
+  return useActivityKeyerContext().activityKeysState;
+}

package/src/providers/ActivityKeyer/useGetActivityByKey.ts

@@ -0,0 +1,7 @@
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+import useActivityKeyerContext from './private/useContext';
+
+export default function useGetActivityByKey(): (key?: string) => undefined | WebChatActivity {
+  return useActivityKeyerContext().getActivityByKey;
+}

package/src/providers/ActivityKeyer/useGetKeyByActivity.ts

@@ -0,0 +1,7 @@
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+import useActivityKeyerContext from './private/useContext';
+
+export default function useGetKeyByActivity(): (activity?: WebChatActivity) => string | undefined {
+  return useActivityKeyerContext().getKeyByActivity;
+}

package/src/providers/ActivityKeyer/useGetKeyByActivityId.ts

@@ -0,0 +1,5 @@
+import useActivityKeyerContext from './private/useContext';
+
+export default function useGetKeyByActivityId(): (activityId?: string) => string | undefined {
+  return useActivityKeyerContext().getKeyByActivityId;
+}

package/src/types/ActivityMiddleware.ts

@@ -1,5 +1,5 @@
-import { DirectLineActivity } from 'botframework-webchat-core';
 import { ReactNode } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import { AvatarComponentFactory } from './AvatarMiddleware';
 import { RenderAttachment } from './AttachmentMiddleware';
@@ -14,8 +14,8 @@ type ActivityProps = {
 type ActivityComponent = (props: ActivityProps) => Exclude<ReactNode, boolean>;
 
 type ActivityComponentFactoryOptions = {
-  activity: DirectLineActivity;
-  nextVisibleActivity: DirectLineActivity;
+  activity: WebChatActivity;
+  nextVisibleActivity: WebChatActivity;
 };
 
 type ActivityComponentFactory = (options: ActivityComponentFactoryOptions) => ActivityComponent | false;

package/src/types/ActivityStatusMiddleware.ts

@@ -1,17 +1,17 @@
-import { DirectLineActivity } from 'botframework-webchat-core';
 import { ReactNode } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import SendState from './SendState';
 
 // TODO: Migrate this legacy middleware signature.
 type RenderActivityStatusOptions = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
   hideTimestamp: boolean;
   sendState: SendState;
 
   // "nextVisibleActivity" is for backward compatibility, please remove this line on or after 2022-07-22.
   /** @deprecated */
-  nextVisibleActivity: DirectLineActivity;
+  nextVisibleActivity: WebChatActivity;
 
   // "sameTimestampGroup" is for backward compatibility, please remove this line on or after 2022-07-22.
   /** @deprecated */

package/src/types/AttachmentForScreenReaderMiddleware.ts

@@ -1,4 +1,4 @@
-import { DirectLineActivity, DirectLineAttachment } from 'botframework-webchat-core';
+import type { DirectLineAttachment, WebChatActivity } from 'botframework-webchat-core';
 
 // TODO: We should consider using a prop for "attachmentMiddleware" to render for screen reader, instead of having another middleware.
 
@@ -6,7 +6,7 @@ import ComponentMiddleware, { ComponentFactory } from './ComponentMiddleware';
 
 type AttachmentForScreenReaderComponentFactoryOptions = [
   {
-    activity: DirectLineActivity;
+    activity: WebChatActivity;
     attachment: DirectLineAttachment;
   }
 ];

package/src/types/AttachmentMiddleware.ts

@@ -1,8 +1,8 @@
-import { DirectLineActivity, DirectLineAttachment } from 'botframework-webchat-core';
 import { ReactNode } from 'react';
+import type { DirectLineAttachment, WebChatActivity } from 'botframework-webchat-core';
 
 type AttachmentProps = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
   attachment: DirectLineAttachment;
 };
 

package/src/types/AvatarMiddleware.ts

@@ -1,11 +1,11 @@
-import { DirectLineActivity } from 'botframework-webchat-core';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import { StrictStyleOptions } from '../StyleOptions';
 import ComponentMiddleware, { ComponentFactory } from './ComponentMiddleware';
 
 type AvatarComponentFactoryArguments = [
   {
-    activity: DirectLineActivity;
+    activity: WebChatActivity;
     fromUser: boolean;
     styleOptions: StrictStyleOptions;
   }

package/src/types/CardActionMiddleware.ts

@@ -1,8 +1,8 @@
-import { DirectLineCardAction } from 'botframework-webchat-core';
+import type { DirectLineCardAction } from 'botframework-webchat-core';
 
 import FunctionMiddleware from './FunctionMiddleware';
 
-type PerformCardAction = (cardAction: DirectLineCardAction) => void;
+type PerformCardAction = (cardAction: DirectLineCardAction, { target: EventTarget }?) => void;
 
 type CardActionMiddleware = FunctionMiddleware<
   [{ dispatch: (action: any) => void }],

package/src/types/GroupActivitiesMiddleware.ts

@@ -1,21 +1,21 @@
-import { DirectLineActivity } from 'botframework-webchat-core';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import FunctionMiddleware, { CallFunction } from './FunctionMiddleware';
 
 type GroupActivities = CallFunction<
-  [{ activities: DirectLineActivity[] }],
+  [{ activities: WebChatActivity[] }],
   {
-    sender: DirectLineActivity[][];
-    status: DirectLineActivity[][];
+    sender: WebChatActivity[][];
+    status: WebChatActivity[][];
   }
 >;
 
 type GroupActivitiesMiddleware = FunctionMiddleware<
   [],
-  [{ activities: DirectLineActivity[] }],
+  [{ activities: WebChatActivity[] }],
   {
-    sender: DirectLineActivity[][];
-    status: DirectLineActivity[][];
+    sender: WebChatActivity[][];
+    status: WebChatActivity[][];
   }
 >;
 

package/src/utils/createCustomEvent.ts

@@ -1,3 +1,5 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function createCustomEvent<T>(
   name: string,
   eventInitDict: T
@@ -15,7 +17,11 @@ export default function createCustomEvent<T>(
   }
 
   Object.entries(eventInitDict).forEach(([key, value]) => {
-    event[key] = value;
+    if (!isForbiddenPropertyName(key)) {
+      // Mitigation through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
+      event[key] = value;
+    }
   });
 
   return event as any;