botframework-webchat-component 4.13.0 → 4.15.0

package/src/Middleware/Activity/createCoreMiddleware.js

@@ -1,71 +0,0 @@
-/* eslint-disable complexity */
-import React from 'react';
-
-import CarouselLayout from '../../Activity/CarouselLayout';
-import StackedLayout from '../../Activity/StackedLayout';
-
-export default function createCoreMiddleware() {
-  return [
-    () => next => (...args) => {
-      const [{ activity }] = args;
-
-      // TODO: [P4] Can we simplify these if-statement to something more readable?
-
-      const { type } = activity;
-
-      // Filter out activities that should not be visible
-      if (type === 'conversationUpdate' || type === 'event' || type === 'invoke' || type === 'typing') {
-        return false;
-      } else if (type === 'message') {
-        const { attachments = [], channelData, text } = activity;
-
-        if (
-          // Do not show postback
-          (channelData && channelData.postBack) ||
-          // Do not show messageBack if displayText is undefined
-          (channelData && channelData.messageBack && !channelData.messageBack.displayText) ||
-          // Do not show empty bubbles (no text and attachments, and not "typing")
-          !(text || attachments.length)
-        ) {
-          return false;
-        }
-        // eslint-disable-next-line no-dupe-else-if
-      } else if (type === 'typing' && activity.from.role === 'user') {
-        // Do not show typing by oneself
-        return false;
-      }
-
-      if (type === 'message' || type === 'typing') {
-        if (type === 'message' && (activity.attachments || []).length > 1 && activity.attachmentLayout === 'carousel') {
-          // The following line is not a React functional component, it's a render function called by useCreateActivityRenderer() hook.
-          // The function signature need to be compatible with older version of activity middleware, which was:
-          //
-          // renderActivity(
-          //   renderAttachment: ({ activity, attachment }) => React.Element
-          // ) => React.Element
-
-          return function renderCarouselLayout(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 <CarouselLayout activity={activity} renderAttachment={renderAttachment} {...props} />;
-          };
-        }
-
-        // The following line is not a React functional component, it's a render function called by useCreateActivityRenderer() hook.
-        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 <StackedLayout activity={activity} renderAttachment={renderAttachment} {...props} />;
-        };
-      }
-
-      return next(...args);
-    }
-  ];
-}

package/src/Middleware/Attachment/createCoreMiddleware.js

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import AudioAttachment from '../../Attachment/AudioAttachment';
-import FileAttachment from '../../Attachment/FileAttachment';
-import ImageAttachment from '../../Attachment/ImageAttachment';
-import TextAttachment from '../../Attachment/TextAttachment';
-import VideoAttachment from '../../Attachment/VideoAttachment';
-
-// TODO: [P4] Rename this file or the whole middleware, it looks either too simple or too comprehensive now
-export default function createCoreMiddleware() {
-  return [
-    // This is not returning a React component, but a render function.
-    /* eslint-disable-next-line react/display-name */
-    () => next => (...args) => {
-      const [
-        {
-          activity = {},
-          activity: { from: { role } = {} } = {},
-          attachment,
-          attachment: { contentType, contentUrl, thumbnailUrl } = {}
-        }
-      ] = args;
-
-      const isText = /^text\//u.test(contentType);
-
-      return (isText ? !attachment.content : role === 'user' && !thumbnailUrl) ? (
-        <FileAttachment activity={activity} attachment={attachment} />
-      ) : /^audio\//u.test(contentType) ? (
-        <AudioAttachment activity={activity} attachment={attachment} />
-      ) : /^image\//u.test(contentType) ? (
-        <ImageAttachment activity={activity} attachment={attachment} />
-      ) : /^video\//u.test(contentType) ? (
-        <VideoAttachment activity={activity} attachment={attachment} />
-      ) : contentUrl || contentType === 'application/octet-stream' ? (
-        <FileAttachment activity={activity} attachment={attachment} />
-      ) : isText ? (
-        <TextAttachment activity={activity} attachment={attachment} />
-      ) : (
-        next(...args)
-      );
-    }
-  ];
-}

package/src/Middleware/AttachmentForScreenReader/createCoreMiddleware.js

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import AudioAttachment from './AudioAttachment';
-import FileAttachment from './FileAttachment';
-import ImageAttachment from './ImageAttachment';
-import TextAttachment from './TextAttachment';
-import VideoAttachment from './VideoAttachment';
-
-export default function createCoreMiddleware() {
-  return [
-    () => next => (...args) => {
-      const [
-        {
-          activity: { from: { role } = {} } = {},
-          attachment,
-          attachment: { contentType, contentUrl, thumbnailUrl } = {}
-        }
-      ] = args;
-
-      const isText = /^text\//u.test(contentType);
-
-      return (isText ? !attachment.content : role === 'user' && !thumbnailUrl)
-        ? () => <FileAttachment attachment={attachment} />
-        : /^audio\//u.test(contentType)
-        ? () => <AudioAttachment />
-        : /^image\//u.test(contentType)
-        ? () => <ImageAttachment />
-        : /^video\//u.test(contentType)
-        ? () => <VideoAttachment />
-        : contentUrl || contentType === 'application/octet-stream'
-        ? () => <FileAttachment attachment={attachment} />
-        : isText
-        ? () => <TextAttachment attachment={attachment} />
-        : next(...args);
-    }
-  ];
-}

package/src/Middleware/Toast/createCoreMiddleware.js

@@ -1,20 +0,0 @@
-import createToastMiddleware from '../../Toast/createToastMiddleware';
-
-function createCoreMiddleware() {
-  return [
-    () => next => (...args) => {
-      const [
-        {
-          notification: { id }
-        }
-      ] = args;
-
-      // We are ignoring "connectivitystatus" notifications, we will render it using <BasicConnectivityStatus> instead.
-      // If devs want to render it, they can add a middleware.
-      return id !== 'connectivitystatus' && next(...args);
-    },
-    createToastMiddleware()
-  ];
-}
-
-export default createCoreMiddleware;

package/src/Toast/createToastMiddleware.js

@@ -1,11 +0,0 @@
-/* eslint react/prop-types: "off"*/
-
-import React from 'react';
-
-import BasicToast from '../BasicToast';
-
-function createToastMiddleware() {
-  return () => () => ({ notification }) => <BasicToast notification={notification} />;
-}
-
-export default createToastMiddleware;

package/src/Utils/findLastIndex.js

@@ -1,11 +0,0 @@
-export default function findLastIndex(array, predicate) {
-  const index = [...array].reverse().findIndex(predicate);
-
-  if (~index) {
-    const { length } = array || [];
-
-    return length - index - 1;
-  }
-
-  return index;
-}

package/src/Utils/findLastIndex.spec.js

@@ -1,29 +0,0 @@
-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/getActivityUniqueId.js

@@ -1,3 +0,0 @@
-export default function getActivityUniqueId(activity) {
-  return activity && ((activity.channelData && activity.channelData.clientActivityID) || activity.id);
-}

package/src/Utils/intersectionOf.js

@@ -1,11 +0,0 @@
-export default function intersectionOf(arg0, ...args) {
-  return args.reduce(
-    (interim, arg) =>
-      interim.reduce((intersection, item) => {
-        arg.includes(item) && intersection.push(item);
-
-        return intersection;
-      }, []),
-    arg0
-  );
-}

package/src/Utils/isZeroOrPositive.js

@@ -1,4 +0,0 @@
-export default function isZeroOrPositive(value) {
-  // This will handle minus-zero.
-  return 1 / value >= 0;
-}

package/src/Utils/remarkStripMarkdown.js

@@ -1,13 +0,0 @@
-/* eslint-disable no-sync */
-
-import PropTypes from 'prop-types';
-import remark from 'remark';
-import stripMarkdown from 'strip-markdown';
-
-const remarkStripMarkdown = text => remark().use(stripMarkdown).processSync(text).contents;
-
-remarkStripMarkdown.propTypes = {
-  text: PropTypes.string.isRequired
-};
-
-export default remarkStripMarkdown;

package/src/hooks/internal/useAcknowledgedActivity.js

@@ -1,65 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { useMemo, useRef } from 'react';
-import { useSticky } from 'react-scroll-to-bottom';
-
-import findLastIndex from '../../Utils/findLastIndex';
-import getActivityUniqueId from '../../Utils/getActivityUniqueId';
-import useChanged from './useChanged';
-
-const { useActivities } = hooks;
-
-// Acknowledged means either:
-// 1. The user sent a message
-//    - We don't need a condition here. When Web Chat sends the user's message, it will scroll to bottom, and it will trigger condition 2 below.
-// 2. The user scroll to the bottom of the transcript, from a non-bottom scroll position
-//    - If the transcript is already at the bottom, the user needs to scroll up and then go back down
-//    - What happens if we are relaxing "scrolled from a non-bottom scroll position":
-//      1. The condition will become solely "at the bottom of the transcript"
-//      2. Auto-scroll will always scroll the transcript to the bottom
-//      3. Web Chat will always acknowledge all activities as it is at the bottom
-//      4. Acknowledge flag become useless
-//      5. Therefore, even the developer set "pause after 3 activities", if activities are coming in at a slow pace (not batched in a single render)
-//         Web Chat will keep scrolling and not snapped/paused
-
-// Note: When Web Chat is loaded, there are no activities acknowledged. We need to assume all arriving activities are acknowledged until end-user sends their first activity.
-//       Activities loaded initially could be from conversation history. Without assuming acknowledgement, Web Chat will not scroll initially (as everything is not acknowledged).
-//       It would be better if the chat adapter should let Web Chat know if the activity is loaded from history or not.
-
-// TODO: [P2] #3670 Move the "conversation history acknowledgement" logic mentioned above to polyfill of chat adapters.
-//       1. Chat adapter should send "acknowledged" as part of "channelData"
-//       2. If "acknowledged" is "undefined", we set it to:
-//          a. true, if there are no egress activities yet
-//          b. Otherwise, false
-export default function useAcknowledgedActivity() {
-  const [activities] = useActivities();
-  const [sticky] = useSticky();
-  const lastStickyActivityIDRef = useRef();
-
-  const stickyChanged = useChanged(sticky);
-  const stickyChangedToSticky = stickyChanged && sticky;
-
-  const lastStickyActivityID = useMemo(() => {
-    if (stickyChangedToSticky) {
-      lastStickyActivityIDRef.current = getActivityUniqueId(activities[activities.length - 1] || {});
-    }
-
-    return lastStickyActivityIDRef.current;
-  }, [activities, lastStickyActivityIDRef, stickyChangedToSticky]);
-
-  return useMemo(() => {
-    const lastStickyActivityIndex = activities.findIndex(
-      activity => getActivityUniqueId(activity) === lastStickyActivityID
-    );
-
-    const lastEgressActivityIndex = findLastIndex(activities, ({ from: { role } = {} }) => role === 'user');
-
-    // As described above, if no activities were acknowledged through egress activity, we will assume everything is acknowledged.
-    const lastAcknowledgedActivityIndex = !~lastEgressActivityIndex
-      ? activities.length - 1
-      : Math.max(lastStickyActivityIndex, lastEgressActivityIndex);
-
-    const lastAcknowledgedActivity = activities[lastAcknowledgedActivityIndex];
-
-    return [lastAcknowledgedActivity];
-  }, [activities, lastStickyActivityID]);
-}

package/src/hooks/internal/useChanged.js

@@ -1,10 +0,0 @@
-import { useRef } from 'react';
-
-export default function useChanged(value) {
-  const prevValueRef = useRef(value);
-  const changed = value !== prevValueRef.current;
-
-  prevValueRef.current = value;
-
-  return changed;
-}

package/src/hooks/internal/useDispatchTranscriptFocus.js

@@ -1,7 +0,0 @@
-import useWebChatUIContext from './useWebChatUIContext';
-
-export default function useDispatchTranscriptFocus() {
-  const { dispatchTranscriptFocus, numTranscriptFocusObservers } = useWebChatUIContext();
-
-  return numTranscriptFocusObservers ? dispatchTranscriptFocus : undefined;
-}

package/src/hooks/internal/useMemoize.js

@@ -1,37 +0,0 @@
-import { useMemo } from 'react';
-
-export default function useMemoize(fn, callback, deps) {
-  if (typeof fn !== 'function') {
-    throw new Error('The first argument must be a function.');
-  } else if (typeof callback !== 'function') {
-    throw new Error('The second argument must be a function.');
-  } else if (!Array.isArray(deps)) {
-    throw new Error('The third argument must be an array.');
-  }
-
-  const memoizedFn = useMemo(() => {
-    let cache = [];
-
-    return run => {
-      const nextCache = [];
-      const result = run((...args) => {
-        const { result } = [...cache, ...nextCache].find(
-          ({ args: cachedArgs }) =>
-            args.length === cachedArgs.length && args.every((arg, index) => Object.is(arg, cachedArgs[index]))
-        ) || { result: fn(...args) };
-
-        nextCache.push({ args, result });
-
-        return result;
-      });
-
-      cache = nextCache;
-
-      return result;
-    };
-    // We are manually creating the deps here. The "callback" arg is also designed not to be impact deps, similar to useEffect(fn), where "fn" is not in deps.
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  }, [fn, ...deps]);
-
-  return memoizedFn(callback);
-}

package/src/hooks/internal/useStripMarkdown.js

@@ -1,7 +0,0 @@
-import { useMemo } from 'react';
-
-import remarkStripMarkdown from '../../Utils/remarkStripMarkdown';
-
-export default function useStripMarkdown(markdown) {
-  return useMemo(() => markdown && remarkStripMarkdown(markdown).replace(/[.\s]+$/u, ''), [markdown]);
-}

package/src/hooks/useRenderMarkdownAsHTML.js

@@ -1,20 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { useMemo } from 'react';
-
-import useWebChatUIContext from './internal/useWebChatUIContext';
-
-const { useLocalizer, useStyleOptions } = hooks;
-
-export default function useRenderMarkdownAsHTML() {
-  const { renderMarkdown } = useWebChatUIContext();
-  const [styleOptions] = useStyleOptions();
-  const localize = useLocalizer();
-
-  const externalLinkAlt = localize('MARKDOWN_EXTERNAL_LINK_ALT');
-
-  return useMemo(() => renderMarkdown && (markdown => renderMarkdown(markdown, styleOptions, { externalLinkAlt })), [
-    externalLinkAlt,
-    renderMarkdown,
-    styleOptions
-  ]);
-}

package/src/hooks/useScrollTo.js

@@ -1,11 +0,0 @@
-import { useCallback } from 'react';
-
-import useWebChatUIContext from './internal/useWebChatUIContext';
-
-export default function useScrollTo() {
-  const { scrollToCallbacksRef } = useWebChatUIContext();
-
-  return useCallback((...args) => scrollToCallbacksRef.current.forEach(callback => callback(...args)), [
-    scrollToCallbacksRef
-  ]);
-}

package/src/hooks/useScrollToEnd.js

@@ -1,11 +0,0 @@
-import { useCallback } from 'react';
-
-import useWebChatUIContext from './internal/useWebChatUIContext';
-
-export default function useScrollToEnd() {
-  const { scrollToEndCallbacksRef } = useWebChatUIContext();
-
-  return useCallback(() => scrollToEndCallbacksRef.current.forEach(callback => callback({ behavior: 'smooth' })), [
-    scrollToEndCallbacksRef
-  ]);
-}

package/src/hooks/useWebSpeechPonyfill.js

@@ -1,5 +0,0 @@
-import useWebChatUIContext from './internal/useWebChatUIContext';
-
-export default function useWebSpeechPonyfill() {
-  return [useWebChatUIContext().webSpeechPonyfill];
-}

package/src/index.tsx

@@ -1,35 +0,0 @@
-import { FC } from 'react';
-import { StyleOptions } from 'botframework-webchat-api';
-
-type Expando<T> = Omit<any, keyof T> & T;
-
-/** Creates a set of styles */
-// eslint-disable-next-line no-unused-vars
-declare function createStyleSet(styleOptions: StyleOptions): any;
-
-type ComposerProps = {
-  /** Text directionality */
-  dir?: 'ltr' | 'rtl' | 'auto';
-
-  /** Style options */
-  styleOptions?: StyleOptions;
-};
-
-type ReactWebChatProps = {
-  /** Text directionality */
-  dir?: 'ltr' | 'rtl' | 'auto';
-
-  /** Style options */
-  styleOptions?: StyleOptions;
-};
-
-/** React-based Web Chat */
-declare const ReactWebChat: FC<Expando<ReactWebChatProps>>;
-
-declare const Components: Expando<{
-  Composer: FC<Expando<ComposerProps>>;
-}>;
-
-export default ReactWebChat;
-export { Components, createStyleSet };
-export type { ComposerProps, ReactWebChatProps };