botframework-webchat-component 4.18.2 → 4.19.0

package/src/TranscriptActivity.tsx

@@ -1,64 +0,0 @@
-import React, { memo, useCallback, useMemo } from 'react';
-import { hooks, type ActivityComponentFactory } from 'botframework-webchat-api';
-import type { ActivityElementMap } from './Transcript/types';
-import type { MutableRefObject, ReactNode } from 'react';
-import type { WebChatActivity } from 'botframework-webchat-core';
-import ActivityRow from './Transcript/ActivityRow';
-
-const { useCreateActivityStatusRenderer } = hooks;
-
-function TranscriptActivity({
-  activityElementMapRef,
-  activityKey,
-  activity,
-  hideTimestamp,
-  renderActivity,
-  renderAvatar,
-  showCallout
-}: Readonly<{
-  activityElementMapRef: MutableRefObject<ActivityElementMap>;
-  activityKey: string;
-  activity: WebChatActivity;
-  hideTimestamp: boolean;
-  renderActivity: Exclude<ReturnType<ActivityComponentFactory>, false>;
-  renderAvatar: false | (() => Exclude<ReactNode, boolean | null | undefined>);
-  showCallout: boolean;
-}>) {
-  const createActivityStatusRenderer = useCreateActivityStatusRenderer();
-  const activityCallbackRef = useCallback(
-    (activityElement: HTMLElement) => {
-      activityElement
-        ? activityElementMapRef.current.set(activityKey, activityElement)
-        : activityElementMapRef.current.delete(activityKey);
-    },
-    [activityElementMapRef, activityKey]
-  );
-
-  const renderActivityStatus = useMemo(
-    () =>
-      createActivityStatusRenderer({
-        activity,
-        nextVisibleActivity: undefined
-      }),
-    [activity, createActivityStatusRenderer]
-  );
-
-  const children = useMemo(
-    () =>
-      renderActivity({
-        hideTimestamp,
-        renderActivityStatus,
-        renderAvatar,
-        showCallout
-      }),
-    [hideTimestamp, renderActivity, renderActivityStatus, renderAvatar, showCallout]
-  );
-
-  return (
-    <ActivityRow activity={activity} ref={activityCallbackRef}>
-      {children}
-    </ActivityRow>
-  );
-}
-
-export default memo(TranscriptActivity);

package/src/Utils/AccessKeySink/Surface.js

@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useCallback, useRef } from 'react';
-
-import { orSelf as firstTabbableDescendantOrSelf } from '../firstTabbableDescendant';
-import AccessKeySinkContext from './internal/Context';
-import useNavigatorPlatform from '../../hooks/internal/useNavigatorPlatform';
-
-const Surface = ({ children, ...otherProps }) => {
-  const [{ apple }] = useNavigatorPlatform();
-  const contextRef = useRef({ focii: [] });
-
-  const handleKeyUp = useCallback(
-    event => {
-      const { altKey, ctrlKey, key, shiftKey } = event;
-
-      // On Apple, most modern browsers use CTRL + OPTION as modifiers.
-      // Otherwise, we use ALT + SHIFT as modifierse.
-      if (altKey && (apple ? ctrlKey : shiftKey)) {
-        const focii = contextRef.current.focii.filter(entry => entry.keys.includes(key));
-
-        const currentFocus = focii.findIndex(
-          ({ ref: { current } }) => current === document.activeElement || current.contains(document.activeElement)
-        );
-        const nextFocus = focii[(currentFocus + 1) % focii.length];
-
-        if (nextFocus) {
-          event.preventDefault();
-          event.stopPropagation();
-
-          const tabbable = firstTabbableDescendantOrSelf(nextFocus.ref.current);
-
-          tabbable && tabbable.focus();
-        }
-      }
-    },
-    [apple]
-  );
-
-  return (
-    <AccessKeySinkContext.Provider value={contextRef.current}>
-      <div onKeyUp={handleKeyUp} {...otherProps}>
-        {children}
-      </div>
-    </AccessKeySinkContext.Provider>
-  );
-};
-
-Surface.defaultProps = {
-  children: undefined
-};
-
-Surface.propTypes = {
-  children: PropTypes.any
-};
-
-export default Surface;

package/src/Utils/CroppedImage.js

@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
-
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
-
-const ROOT_STYLE = {
-  overflow: 'hidden',
-  position: 'relative',
-
-  '& > img': {
-    height: 'auto',
-    left: '50%',
-    position: 'absolute',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: '100%'
-  }
-};
-
-const CroppedImage = ({ alt, className, height, src, width }) => {
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-  const sizeStyle = useMemo(() => ({ height, width }), [height, width]);
-
-  return (
-    <div className={classNames(rootClassName, (className || '') + '')} style={sizeStyle}>
-      <img alt={alt} src={src} />
-    </div>
-  );
-};
-
-CroppedImage.defaultProps = {
-  alt: '',
-  className: ''
-};
-
-CroppedImage.propTypes = {
-  alt: PropTypes.string,
-  className: PropTypes.string,
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  src: PropTypes.string.isRequired,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-};
-
-export default CroppedImage;

package/src/Utils/parseDocumentFromString.ts

@@ -1,5 +0,0 @@
-export default function parseDocumentFromString(html: string): Document {
-  const parser = new DOMParser();
-
-  return parser.parseFromString(html, 'text/html');
-}

package/src/Utils/readDataURIToBlob.js

@@ -1,31 +0,0 @@
-import { toByteArray } from 'base64-js';
-
-const PATTERN = /^data:([^,]*?)(;(base64)){0,1},([A-Za-z0-9+/=]+)/u;
-
-const DEFAULT_CONTENT_TYPE = 'text/plain;charset=US-ASCII';
-
-export function parse(dataURI) {
-  const match = PATTERN.exec(dataURI);
-
-  if (!match) {
-    return;
-  }
-
-  const [, contentType, , encoding, base64] = match;
-
-  if (encoding !== 'base64') {
-    return;
-  }
-
-  return { base64, contentType: contentType || DEFAULT_CONTENT_TYPE, encoding };
-}
-
-export default function readDataURIToBlob(dataURI) {
-  const parsed = parse(dataURI);
-
-  if (!parsed) {
-    return;
-  }
-
-  return new Blob([toByteArray(parsed.base64)], { type: parsed.contentType });
-}

package/src/Utils/serializeDocumentIntoString.ts

@@ -1,10 +0,0 @@
-export default function serializeDocumentIntoString(document: Document): string {
-  const serializer = new XMLSerializer();
-  const elementHTML: string[] = [];
-
-  for (const element of document.body.children) {
-    elementHTML.push(serializer.serializeToString(element));
-  }
-
-  return `${elementHTML.join('\n')}\n`;
-}

package/src/Utils/singleToArray.ts

@@ -1,3 +0,0 @@
-export default function singleToArray<T>(singleOrArray: T | T[]): T[] {
-  return singleOrArray ? (Array.isArray(singleOrArray) ? singleOrArray : [singleOrArray]) : [];
-}

package/src/Utils/textFormatToContentType.js

@@ -1,12 +0,0 @@
-export default function textFormatToContentType(textFormat) {
-  switch (textFormat) {
-    case 'plain':
-      return 'text/plain';
-
-    case 'xml':
-      return 'text/xml';
-
-    default:
-      return 'text/markdown';
-  }
-}

package/src/hooks/internal/useMemoWithPrevious.ts

@@ -1,16 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-
-import type { DependencyList } from 'react';
-
-export default function useMemoWithPrevious<T>(factory: (prevValue: T) => T, deps: DependencyList): T {
-  const prevValueRef = useRef<T>();
-  // We are building a `useMemo`-like hook, `deps` is passed as-is and `factory` is not one fo the dependencies.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const value = useMemo<T>(() => factory(prevValueRef.current), deps);
-
-  useEffect(() => {
-    prevValueRef.current = value;
-  });
-
-  return value;
-}

package/src/hooks/internal/useNonce.js

@@ -1,7 +0,0 @@
-import useWebChatUIContext from './useWebChatUIContext';
-
-export default function useNonce() {
-  const { nonce } = useWebChatUIContext();
-
-  return [nonce];
-}

package/src/hooks/internal/useStyleToEmotionObject.js

@@ -1,5 +0,0 @@
-import useWebChatUIContext from './useWebChatUIContext';
-
-export default function useStyleToEmotionObject() {
-  return useWebChatUIContext().styleToEmotionObject;
-}

package/src/internal.ts

@@ -1,4 +0,0 @@
-import parseDocumentFromString from './Utils/parseDocumentFromString';
-import serializeDocumentIntoString from './Utils/serializeDocumentIntoString';
-
-export { parseDocumentFromString, serializeDocumentIntoString };

package/src/providers/ActivityTree/ActivityTreeComposer.tsx

@@ -1,90 +0,0 @@
-import { hooks, type ActivityComponentFactory } from 'botframework-webchat-api';
-import type { WebChatActivity } from 'botframework-webchat-core';
-import React, { useMemo, type ReactNode } from 'react';
-
-import useMemoWithPrevious from '../../hooks/internal/useMemoWithPrevious';
-import ActivityTreeContext from './private/Context';
-import { ActivityWithRenderer, ReadonlyActivityTree } from './private/types';
-import useActivitiesWithRenderer from './private/useActivitiesWithRenderer';
-import useActivityTreeWithRenderer from './private/useActivityTreeWithRenderer';
-import useActivityTreeContext from './private/useContext';
-
-import type { ActivityTreeContextType } from './private/Context';
-
-type ActivityTreeComposerProps = Readonly<{ children?: ReactNode | undefined }>;
-
-const { useActivities, useCreateActivityRenderer, useGetActivitiesByKey, useGetKeyByActivity } = hooks;
-
-const ActivityTreeComposer = ({ children }: ActivityTreeComposerProps) => {
-  const existingContext = useActivityTreeContext(false);
-
-  if (existingContext) {
-    throw new Error('botframework-webchat internal: <ActivityTreeComposer> should not be nested.');
-  }
-
-  const [rawActivities] = useActivities();
-  const getActivitiesByKey = useGetActivitiesByKey();
-  const getKeyByActivity = useGetKeyByActivity();
-
-  const activities = useMemo<readonly WebChatActivity[]>(() => {
-    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);
-
-  const activityTreeWithRenderer = useActivityTreeWithRenderer(activitiesWithRenderer);
-
-  const flattenedActivityTreeWithRenderer = useMemoWithPrevious<Readonly<ActivityWithRenderer[]>>(
-    prevFlattenedActivityTree => {
-      const nextFlattenedActivityTree = Object.freeze(
-        activityTreeWithRenderer.reduce<ActivityWithRenderer[]>(
-          (intermediate, entriesWithSameSender) =>
-            entriesWithSameSender.reduce<ActivityWithRenderer[]>(
-              (intermediate, entriesWithSameSenderAndStatus) =>
-                entriesWithSameSenderAndStatus.reduce<ActivityWithRenderer[]>((intermediate, entry) => {
-                  intermediate.push(entry);
-
-                  return intermediate;
-                }, intermediate),
-              intermediate
-            ),
-          []
-        )
-      );
-
-      return nextFlattenedActivityTree.length === prevFlattenedActivityTree?.length &&
-        nextFlattenedActivityTree.every((item, index) => item === prevFlattenedActivityTree[+index])
-        ? prevFlattenedActivityTree
-        : nextFlattenedActivityTree;
-    },
-    [activityTreeWithRenderer]
-  );
-
-  const contextValue: ActivityTreeContextType = useMemo(
-    () => ({
-      activityTreeWithRendererState: Object.freeze([activityTreeWithRenderer]) as readonly [ReadonlyActivityTree],
-      flattenedActivityTreeWithRendererState: Object.freeze([flattenedActivityTreeWithRenderer]) as readonly [
-        readonly ActivityWithRenderer[]
-      ]
-    }),
-    [activityTreeWithRenderer, flattenedActivityTreeWithRenderer]
-  );
-
-  return <ActivityTreeContext.Provider value={contextValue}>{children}</ActivityTreeContext.Provider>;
-};
-
-export default ActivityTreeComposer;

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

@@ -1,12 +0,0 @@
-import { createContext } from 'react';
-
-import type { ActivityWithRenderer, ReadonlyActivityTree } from './types';
-
-type ActivityTreeContextType = {
-  activityTreeWithRendererState: readonly [ReadonlyActivityTree];
-  flattenedActivityTreeWithRendererState: readonly [readonly ActivityWithRenderer[]];
-};
-
-export default createContext<ActivityTreeContextType>(undefined);
-
-export type { ActivityTreeContextType };

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

@@ -1,12 +0,0 @@
-import type { ActivityComponentFactory } from 'botframework-webchat-api';
-import type { WebChatActivity } from 'botframework-webchat-core';
-
-type ActivityWithRenderer = {
-  activity: WebChatActivity;
-  renderActivity: Exclude<ReturnType<ActivityComponentFactory>, false>;
-};
-
-type ActivityTree = ActivityWithRenderer[][][];
-type ReadonlyActivityTree = readonly (readonly (readonly ActivityWithRenderer[])[])[];
-
-export type { ActivityTree, ActivityWithRenderer, ReadonlyActivityTree };

package/src/providers/ActivityTree/private/useActivitiesWithRenderer.ts

@@ -1,40 +0,0 @@
-import { useMemo } from 'react';
-import type { WebChatActivity } from 'botframework-webchat-core';
-
-import type { ActivityWithRenderer } from './types';
-import useMemoized from '../../../hooks/internal/useMemoized';
-
-export default function useActivitiesWithRenderer(
-  activities: readonly WebChatActivity[],
-  createActivityRenderer
-): readonly ActivityWithRenderer[] {
-  // Create a memoized context of the createActivityRenderer function.
-  const createActivityRendererMemoized = useMemoized(
-    (activity: WebChatActivity, nextVisibleActivity: WebChatActivity) =>
-      createActivityRenderer({ activity, nextVisibleActivity }),
-    [createActivityRenderer]
-  );
-
-  const entries = useMemo(() => {
-    const activitiesWithRenderer: ActivityWithRenderer[] = [];
-    let nextVisibleActivity: WebChatActivity;
-
-    for (let index = activities.length - 1; index >= 0; index--) {
-      const activity = activities[+index];
-      const renderActivity = createActivityRendererMemoized(activity, nextVisibleActivity);
-
-      if (renderActivity) {
-        activitiesWithRenderer.splice(0, 0, {
-          activity,
-          renderActivity
-        });
-
-        nextVisibleActivity = activity;
-      }
-    }
-
-    return Object.freeze(activitiesWithRenderer);
-  }, [activities, createActivityRendererMemoized]);
-
-  return entries;
-}

package/src/providers/ActivityTree/private/useActivityTreeWithRenderer.ts

@@ -1,140 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { useMemo } from 'react';
-
-import type { WebChatActivity } from 'botframework-webchat-core';
-import intersectionOf from '../../../Utils/intersectionOf';
-import removeInline from '../../../Utils/removeInline';
-import type { ActivityWithRenderer, ReadonlyActivityTree } from './types';
-
-const { useGroupActivities } = hooks;
-
-function validateAllEntriesTagged<T>(entries: readonly T[], bins: readonly (readonly T[])[]): boolean {
-  return entries.every(entry => bins.some(bin => bin.includes(entry)));
-}
-
-// Activity tree is a multidimensional array, while activities is a 1D array.
-// - The first dimension of the array contains activities with same sender;
-// - The second dimension of the array contains activities with same status.
-
-// [
-//   [
-//     // Both messages are from bot and is sent as a batch, we will group them as an array.
-//     'Bot: Hello!'
-//     'Bot: What can I help today?'
-//   ],
-//   [
-//     'User: What is the weather?'
-//   ],
-//   [
-//     'Bot: Let me look it up... hold on.'
-//   ],
-//   [
-//     // This message is in a different group because it is more than a few seconds apart from the previous message.
-//     'Bot: Here is the weather forecast.'
-//   ]
-// ]
-
-function useActivityTreeWithRenderer(entries: readonly ActivityWithRenderer[]): ReadonlyActivityTree {
-  const groupActivities = useGroupActivities();
-  const entryMap: Map<WebChatActivity, ActivityWithRenderer> = useMemo(
-    () => new Map(entries.map(entry => [entry.activity, entry])),
-    [entries]
-  );
-
-  // We bin activities in 2 different ways:
-  // - `activitiesBySender` is a 2D array containing activities with same sender
-  // - `activitiesByStatus` is a 2D array containing activities with same status
-  // Both arrays should contains all activities.
-
-  const { entriesBySender, entriesByStatus } = useMemo<{
-    entriesBySender: readonly (readonly ActivityWithRenderer[])[];
-    entriesByStatus: readonly (readonly ActivityWithRenderer[])[];
-  }>(() => {
-    const visibleActivities = [...entryMap.keys()];
-
-    const groupActivitiesResult = groupActivities({ activities: visibleActivities });
-
-    const activitiesBySender = groupActivitiesResult?.sender || [];
-    const activitiesByStatus = groupActivitiesResult?.status || [];
-
-    const [entriesBySender, entriesByStatus] = [activitiesBySender, activitiesByStatus].map(bins =>
-      bins.map(bin => bin.map(activity => entryMap.get(activity)))
-    );
-
-    if (!validateAllEntriesTagged(visibleActivities, activitiesBySender)) {
-      console.warn(
-        'botframework-webchat: Not every activities are grouped in the "sender" property. Please fix "groupActivitiesMiddleware" and group every activities.'
-      );
-    }
-
-    if (!validateAllEntriesTagged(visibleActivities, activitiesByStatus)) {
-      console.warn(
-        'botframework-webchat: Not every activities are grouped in the "status" property. Please fix "groupActivitiesMiddleware" and group every activities.'
-      );
-    }
-
-    return {
-      entriesBySender,
-      entriesByStatus
-    };
-  }, [entryMap, groupActivities]);
-
-  // Create a tree of activities with 2 dimensions: sender, followed by status.
-
-  const activityTree: ReadonlyActivityTree = useMemo(() => {
-    const entriesPendingGrouping = [...entries];
-    const activityTree: (readonly (readonly ActivityWithRenderer[])[])[] = [];
-
-    while (entriesPendingGrouping.length) {
-      let found: boolean;
-      const entriesWithSameSender = entriesBySender.find(bin => bin.includes(entriesPendingGrouping[0]));
-      const senderTree: (readonly ActivityWithRenderer[])[] = [];
-
-      entriesWithSameSender?.forEach(entry => {
-        const entriesWithSameStatus = entriesByStatus.find(bin => bin.includes(entry));
-
-        const entriesWithSameSenderAndStatus = intersectionOf<ActivityWithRenderer>(
-          entriesPendingGrouping,
-          entriesWithSameSender,
-          entriesWithSameStatus
-        );
-
-        if (entriesWithSameSenderAndStatus.length) {
-          senderTree.push(Object.freeze(entriesWithSameSenderAndStatus));
-          removeInline(entriesPendingGrouping, ...entriesWithSameSenderAndStatus);
-
-          found = true;
-        }
-      });
-
-      // If the entry is not grouped by the middleware, just put the entry in its own bin.
-      found || senderTree.push(Object.freeze([entriesPendingGrouping.shift()]));
-
-      activityTree.push(Object.freeze(senderTree));
-    }
-
-    // Assertion: All entries must be assigned to the activityTree.
-    if (
-      !entries.every(activity =>
-        activityTree.some(activitiesWithSameSender =>
-          activitiesWithSameSender.some(activitiesWithSameSenderAndStatus =>
-            activitiesWithSameSenderAndStatus.includes(activity)
-          )
-        )
-      )
-    ) {
-      console.warn('botframework-webchat internal: Not all visible activities are grouped in the activityTree.', {
-        entries,
-        activityTree
-      });
-    }
-
-    return Object.freeze(activityTree);
-  }, [entriesBySender, entriesByStatus, entries]);
-
-  return activityTree;
-}
-
-export type { ActivityWithRenderer };
-
-export default useActivityTreeWithRenderer;

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

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

package/src/providers/ActivityTree/useActivityTreeWithRenderer.ts

@@ -1,16 +0,0 @@
-import useActivityTreeContext from './private/useContext';
-
-import type { ActivityWithRenderer, ReadonlyActivityTree } from './private/types';
-
-export default function useActivityTreeWithRenderer(options?: { flat?: false }): readonly [ReadonlyActivityTree];
-export default function useActivityTreeWithRenderer(options: {
-  flat: true;
-}): readonly [readonly ActivityWithRenderer[]];
-
-export default function useActivityTreeWithRenderer(options: { flat?: boolean } = {}) {
-  const context = useActivityTreeContext();
-
-  return options?.flat === true
-    ? context.flattenedActivityTreeWithRendererState
-    : context.activityTreeWithRendererState;
-}