botframework-webchat-api 4.14.1 → 4.15.0

package/src/providers/ActivityKeyer/ActivityKeyerComposer.tsx

@@ -0,0 +1,151 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useMemo, useRef } from 'react';
+
+import type { DirectLineActivity } from 'botframework-webchat-core';
+import type { FC } from 'react';
+
+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<DirectLineActivity, string>;
+type ClientActivityIdToKeyMap = Map<string, string>;
+type KeyToActivityMap = Map<string, DirectLineActivity>;
+
+/**
+ * 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) => DirectLineActivity | undefined = useCallback(
+    (key?: string): DirectLineActivity | undefined => key && keyToActivityMapRef.current.get(key),
+    [keyToActivityMapRef]
+  );
+
+  const getKeyByActivity: (activity?: DirectLineActivity) => string | undefined = useCallback(
+    (activity?: DirectLineActivity) => 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,14 @@
+import { createContext } from 'react';
+
+import type { DirectLineActivity } from 'botframework-webchat-core';
+
+type ActivityKeyerContextType = {
+  activityKeysState: readonly [readonly string[]];
+  getActivityByKey: (key?: string) => DirectLineActivity | undefined;
+  getKeyByActivity: (activity?: DirectLineActivity) => 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 { DirectLineActivity } from 'botframework-webchat-core';
+
+export default function getActivityId(activity: DirectLineActivity): string {
+  return activity.id;
+}

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

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

package/src/providers/ActivityKeyer/useGetKeyByActivity.ts

@@ -0,0 +1,7 @@
+import type { DirectLineActivity } from 'botframework-webchat-core';
+
+import useActivityKeyerContext from './private/useContext';
+
+export default function useGetKeyByActivity(): (activity?: DirectLineActivity) => 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/CardActionMiddleware.ts

@@ -2,7 +2,7 @@ import { 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/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;

package/src/utils/findLastIndex.spec.js

@@ -0,0 +1,31 @@
+/* eslint no-magic-numbers: "off" */
+
+import findLastIndex from './findLastIndex';
+
+describe('find last index', () => {
+  test('of an existing element should return the index of last occurrence', () => {
+    const actual = findLastIndex([1, 2, 3, 2, 1], value => value === 2);
+
+    expect(actual).toBe(3);
+  });
+
+  test('of a non-existing element should return -1', () => {
+    const actual = findLastIndex([1, 2, 3, 2, 1], value => value === 4);
+
+    expect(actual).toBe(-1);
+  });
+
+  test('of an empty array should return -1', () => {
+    const actual = findLastIndex([], value => value === 1);
+
+    expect(actual).toBe(-1);
+  });
+
+  test('without a predicate should throw', () => {
+    expect(() => findLastIndex([])).toThrowError('not a function');
+  });
+
+  test('without an array should throw', () => {
+    expect(() => findLastIndex(undefined, value => value === 1)).toThrowError();
+  });
+});

package/src/utils/findLastIndex.ts

@@ -0,0 +1,11 @@
+export default function findLastIndex<T>(array: readonly T[], predicate: (value: T, index: number) => boolean): number {
+  const index = [...array].reverse().findIndex(predicate);
+
+  if (~index) {
+    const { length } = array || [];
+
+    return length - index - 1;
+  }
+
+  return index;
+}

package/src/utils/mapMap.ts

@@ -1,9 +1,15 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function mapMap<T>(
   map: { [key: string]: T },
   mapper: (value: T, key: string) => T
 ): { [key: string]: T } {
   return Object.entries(map).reduce((result, [key, value]) => {
-    result[key] = mapper(value, key);
+    if (!isForbiddenPropertyName(key)) {
+      // Mitigation through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
+      result[key] = mapper(value, key);
+    }
 
     return result;
   }, {});

package/src/utils/randomId.ts

@@ -2,6 +2,6 @@
 
 import random from 'math-random';
 
-export default function randomId(maxLength: number = 5): string {
+export default function randomId(maxLength = 5): string {
   return random().toString(36).substr(2, maxLength);
 }

package/.eslintignore

@@ -1 +0,0 @@
-/src/tsconfig.json