botframework-webchat 4.13.0 → 4.15.0

package/src/adaptiveCards/Attachment/AdaptiveCardRenderer.js

@@ -1,492 +0,0 @@
-/* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 2] }] */
-
-import { Components, getTabIndex, hooks } from 'botframework-webchat-component';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-import useAdaptiveCardsHostConfig from '../hooks/useAdaptiveCardsHostConfig';
-import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
-
-const { ErrorBox } = Components;
-const { useDisabled, useLocalizer, usePerformCardAction, useRenderMarkdownAsHTML, useScrollToEnd, useStyleSet } = hooks;
-
-// eslint-disable-next-line no-undef
-const node_env = process.env.node_env || process.env.NODE_ENV;
-
-function addClass(element, className) {
-  const classNames = new Set(element.className.split(' '));
-
-  if (!classNames.has(className)) {
-    classNames.add(className);
-
-    element.className = Array.from(classNames).join(' ');
-
-    return true;
-  }
-
-  return false;
-}
-
-function addPersistentClassWithUndo(element, className) {
-  if (addClass(element, className)) {
-    // After we add the class, keep observing the element to make sure the class is not removed.
-    const observer = new MutationObserver(() => addClass(element, className));
-
-    observer.observe(element, { attributes: true, attributeFilter: ['class'] });
-
-    return () => {
-      const classNames = new Set(element.className.split(' '));
-
-      classNames.delete(className);
-
-      element.className = Array.from(classNames).join(' ');
-      observer.disconnect();
-    };
-  }
-}
-
-function isPlainObject(obj) {
-  return Object.getPrototypeOf(obj) === Object.prototype;
-}
-
-function setAttributeWithUndo(element, qualifiedName, nextValue) {
-  const value = element.getAttribute(qualifiedName);
-
-  if (value !== nextValue) {
-    element.setAttribute(qualifiedName, nextValue);
-
-    return () => (value ? element.setAttribute(qualifiedName, value) : element.removeAttribute(qualifiedName));
-  }
-}
-
-const disabledHandler = event => {
-  event.preventDefault();
-  event.stopImmediatePropagation();
-  event.stopPropagation();
-};
-
-function addEventListenerOnceWithUndo(element, name, handler) {
-  /* eslint-disable-next-line prefer-const */
-  let detach;
-  const detachingHandler = event => {
-    try {
-      handler(event);
-    } finally {
-      // IE11 does not support { once: true }, so we need to detach manually.
-      detach();
-    }
-  };
-
-  detach = () => element.removeEventListener(name, detachingHandler);
-
-  element.addEventListener(name, detachingHandler, { once: true });
-
-  return detach;
-}
-
-function addEventListenerWithUndo(element, name, handler) {
-  element.addEventListener(name, handler);
-
-  return () => element.removeEventListener(name, handler);
-}
-
-function disableElementWithUndo(element) {
-  const undoStack = [];
-  const isActive = element === document.activeElement;
-  const tag = element.nodeName.toLowerCase();
-
-  /* eslint-disable-next-line default-case */
-  switch (tag) {
-    case 'button':
-    case 'input':
-    case 'select':
-    case 'textarea':
-      undoStack.push(setAttributeWithUndo(element, 'aria-disabled', 'true'));
-
-      if (isActive) {
-        undoStack.push(
-          addEventListenerOnceWithUndo(element, 'blur', () =>
-            undoStack.push(setAttributeWithUndo(element, 'disabled', 'disabled'))
-          )
-        );
-      } else {
-        undoStack.push(setAttributeWithUndo(element, 'disabled', 'disabled'));
-      }
-
-      if (tag === 'input' || tag === 'textarea') {
-        undoStack.push(addEventListenerWithUndo(element, 'click', disabledHandler));
-        undoStack.push(setAttributeWithUndo(element, 'readonly', 'readonly'));
-      } else if (tag === 'select') {
-        undoStack.push(
-          ...[].map.call(element.querySelectorAll('option'), option =>
-            setAttributeWithUndo(option, 'disabled', 'disabled')
-          )
-        );
-      }
-
-      break;
-  }
-
-  return () => undoStack.forEach(undo => undo && undo());
-}
-
-function disableInputElementsWithUndo(element, observeSubtree = true) {
-  const undoStack = [].map.call(element.querySelectorAll('button, input, select, textarea'), element =>
-    disableElementWithUndo(element)
-  );
-
-  const tag = element.nodeName.toLowerCase();
-
-  // Only set tabindex="-1" on focusable element. Otherwise, we will make <div> focusable by mouse.
-  (tag === 'a' || tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea') &&
-    undoStack.push(setAttributeWithUndo(element, 'tabindex', '-1'));
-
-  if (observeSubtree) {
-    const observer = new MutationObserver(mutations =>
-      mutations.forEach(({ addedNodes }) =>
-        undoStack.push(...addedNodes.map(addedNode => disableInputElementsWithUndo(addedNode, false)))
-      )
-    );
-
-    observer.observe(element, { childList: true, subtree: true });
-
-    undoStack.push(() => observer.disconnect());
-  }
-
-  return () => undoStack.forEach(undo => undo && undo());
-}
-
-function getFocusableElements(element) {
-  return [].filter.call(
-    element.querySelectorAll(
-      [
-        'a',
-        'body',
-        'button',
-        'frame',
-        'iframe',
-        'img',
-        'input',
-        'isindex',
-        'object',
-        'select',
-        'textarea',
-        '[tabindex]'
-      ].join(', ')
-    ),
-    element => {
-      const tabIndex = getTabIndex(element);
-
-      return typeof tabIndex === 'number' && tabIndex >= 0;
-    }
-  );
-}
-
-function restoreActiveElementIndex(element, activeElementIndex) {
-  const focusable = getFocusableElements(element)[activeElementIndex];
-
-  focusable && focusable.focus();
-}
-
-function saveActiveElementIndex(element) {
-  return getFocusableElements(element).indexOf(document.activeElement);
-}
-
-function restoreInputValues(element, inputValues) {
-  const inputs = element.querySelectorAll('input, select, textarea');
-
-  [].forEach.call(inputs, (input, index) => {
-    const value = inputValues[index];
-
-    if (typeof value !== 'undefined') {
-      const { tagName, type } = input;
-
-      if (tagName === 'INPUT' && (type === 'checkbox' || type === 'radio')) {
-        input.checked = value;
-      } else {
-        input.value = value;
-      }
-    }
-  });
-}
-
-function saveInputValues(element) {
-  const inputs = element.querySelectorAll('input, select, textarea');
-
-  return [].map.call(inputs, ({ checked, tagName, type, value }) => {
-    if (tagName === 'INPUT' && (type === 'checkbox' || type === 'radio')) {
-      return checked;
-    }
-
-    return value;
-  });
-}
-
-const AdaptiveCardRenderer = ({ actionPerformedClassName, adaptiveCard, disabled: disabledFromProps, tapAction }) => {
-  const [{ adaptiveCardRenderer: adaptiveCardRendererStyleSet }] = useStyleSet();
-  const [{ GlobalSettings, HostConfig }] = useAdaptiveCardsPackage();
-  const [actionsPerformed, setActionsPerformed] = useState([]);
-  const [adaptiveCardsHostConfig] = useAdaptiveCardsHostConfig();
-  const [disabledFromComposer] = useDisabled();
-  const [errors, setErrors] = useState([]);
-  const [lastRender, setLastRender] = useState(0);
-  const activeElementIndexRef = useRef(-1);
-  const adaptiveCardElementRef = useRef();
-  const contentRef = useRef();
-  const inputValuesRef = useRef([]);
-  const localize = useLocalizer();
-  const performCardAction = usePerformCardAction();
-  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
-  const scrollToEnd = useScrollToEnd();
-
-  const disabled = disabledFromComposer || disabledFromProps;
-
-  // TODO: [P2] #3199 We should consider using `adaptiveCard.selectAction` instead.
-  // The null check for "tapAction" is in "handleClickAndKeyPressForTapAction".
-  const handleClickAndKeyPress = useCallback(
-    event => {
-      const { key, target, type } = event;
-
-      // Some items, e.g. tappable text, cannot be disabled thru DOM attributes
-      const { current } = contentRef;
-      const adaptiveCardRoot = current.querySelector('.ac-adaptiveCard[tabindex="0"]');
-
-      if (!adaptiveCardRoot) {
-        return console.warn(
-          'botframework-webchat: No Adaptive Card root container can be found; the card is probably on an unsupported Adaptive Card version.'
-        );
-      }
-
-      // For "keypress" event, we only listen to ENTER and SPACEBAR key.
-      if (type === 'keypress') {
-        if (key !== 'Enter' && key !== ' ') {
-          return;
-        }
-
-        event.preventDefault();
-      }
-
-      // We will call performCardAction if either:
-      // 1. We are on the target, or
-      // 2. The event-dispatching element is not interactive
-      if (target !== adaptiveCardRoot) {
-        const tabIndex = getTabIndex(target);
-
-        // If the user is clicking on something that is already clickable, do not allow them to click the card.
-        // E.g. a hero card can be tappable, and image and buttons inside the hero card can also be tappable.
-        if (typeof tabIndex === 'number' && tabIndex >= 0) {
-          return;
-        }
-      }
-
-      performCardAction(tapAction);
-      scrollToEnd();
-    },
-    [contentRef, performCardAction, scrollToEnd, tapAction]
-  );
-
-  // Only listen to event if it is not disabled and have "tapAction" prop.
-  const handleClickAndKeyPressForTapAction = !disabled && tapAction ? handleClickAndKeyPress : undefined;
-
-  const addActionsPerformed = useCallback(
-    action => !~actionsPerformed.indexOf(action) && setActionsPerformed([...actionsPerformed, action]),
-    [actionsPerformed, setActionsPerformed]
-  );
-
-  const handleExecuteAction = useCallback(
-    action => {
-      // Some items, e.g. tappable image, cannot be disabled thru DOM attributes
-      if (disabled) {
-        return;
-      }
-
-      addActionsPerformed(action);
-
-      const actionTypeName = action.getJsonTypeName();
-
-      if (actionTypeName === 'Action.OpenUrl') {
-        performCardAction({
-          type: 'openUrl',
-          value: action.url
-        });
-      } else if (actionTypeName === 'Action.Submit') {
-        if (typeof action.data !== 'undefined') {
-          const { data: actionData } = action;
-
-          if (actionData && actionData.__isBotFrameworkCardAction) {
-            const { cardAction } = actionData;
-            const { displayText, text, type, value } = cardAction;
-
-            performCardAction({ displayText, text, type, value });
-          } else {
-            performCardAction({
-              type: typeof action.data === 'string' ? 'imBack' : 'postBack',
-              value: action.data
-            });
-          }
-        }
-
-        scrollToEnd();
-      } else {
-        console.error(`Web Chat: received unknown action from Adaptive Cards`);
-        console.error(action);
-      }
-    },
-    [addActionsPerformed, disabled, performCardAction, scrollToEnd]
-  );
-
-  useLayoutEffect(() => {
-    const { current } = contentRef;
-
-    if (!current || !adaptiveCard) {
-      activeElementIndexRef.current = -1;
-      inputValuesRef.current = [];
-    }
-
-    // Currently, the only way to set the Markdown engine is to set it thru static member of AdaptiveCard class
-
-    // TODO: [P3] Checks if we could make the "renderMarkdownAsHTML" per card
-    //       This could be limitations from Adaptive Cards package (not supported as of 1.2.5)
-    //       Because there could be timing difference between .parse and .render, we could be using wrong Markdown engine
-
-    adaptiveCard.constructor.onProcessMarkdown = (text, result) => {
-      if (renderMarkdownAsHTML) {
-        result.outputHtml = renderMarkdownAsHTML(text);
-        result.didProcess = true;
-      }
-    };
-
-    if (adaptiveCardsHostConfig) {
-      adaptiveCard.hostConfig = isPlainObject(adaptiveCardsHostConfig)
-        ? new HostConfig(adaptiveCardsHostConfig)
-        : adaptiveCardsHostConfig;
-    }
-
-    // For accessibility issue #1340, `tabindex="0"` must not be set for the root container if it is not interactive.
-    GlobalSettings.setTabIndexAtCardRoot = !!tapAction;
-
-    const { validationEvents } = adaptiveCard.validateProperties();
-
-    if (validationEvents.length) {
-      return setErrors(validationEvents.reduce((items, { message }) => [...items, new Error(message)], []));
-    }
-
-    let element;
-
-    try {
-      element = adaptiveCard.render();
-    } catch (error) {
-      return setErrors([error]);
-    }
-
-    if (!element) {
-      return setErrors([new Error('Adaptive Card rendered as empty element')]);
-    }
-
-    // Clear errors on next render
-    setErrors([]);
-
-    restoreInputValues(element, inputValuesRef.current);
-
-    current.appendChild(element);
-    adaptiveCardElementRef.current = element;
-
-    // Focus can only be restored after the DOM is attached.
-    restoreActiveElementIndex(element, activeElementIndexRef.current);
-
-    setLastRender(Date.now());
-
-    return () => {
-      activeElementIndexRef.current = saveActiveElementIndex(element);
-      inputValuesRef.current = saveInputValues(element);
-
-      current.removeChild(adaptiveCardElementRef.current);
-
-      adaptiveCardElementRef.current = undefined;
-    };
-  }, [
-    adaptiveCard,
-    adaptiveCardsHostConfig,
-    contentRef,
-    GlobalSettings,
-    HostConfig,
-    renderMarkdownAsHTML,
-    setErrors,
-    tapAction
-  ]);
-
-  useEffect(() => {
-    // Set onExecuteAction without causing unnecessary re-render.
-    adaptiveCard.onExecuteAction = disabled ? undefined : handleExecuteAction;
-  }, [adaptiveCard, disabled, handleExecuteAction]);
-
-  useEffect(() => {
-    // If the Adaptive Card get re-rendered, re-disable elements as needed.
-    if (disabled) {
-      return disableInputElementsWithUndo(adaptiveCardElementRef.current);
-    }
-  }, [disabled, lastRender]);
-
-  useEffect(() => {
-    // If the Adaptive Card changed, reset all actions performed.
-    setActionsPerformed([]);
-  }, [adaptiveCard]);
-
-  useEffect(() => {
-    // Add aria-pressed and role attribute to the AC action button selected by the user.
-    actionsPerformed.forEach(({ renderedElement }) => {
-      if (renderedElement && adaptiveCardElementRef.current.contains(renderedElement)) {
-        setAttributeWithUndo(renderedElement, 'aria-pressed', 'true');
-        setAttributeWithUndo(renderedElement, 'role', 'button');
-      }
-    });
-
-    // Add developers to highlight actions when they have been clicked.
-    if (!actionPerformedClassName) {
-      return;
-    }
-
-    const undoStack = actionsPerformed.map(
-      ({ renderedElement }) =>
-        renderedElement &&
-        adaptiveCardElementRef.current.contains(renderedElement) &&
-        addPersistentClassWithUndo(renderedElement, actionPerformedClassName)
-    );
-
-    return () => undoStack.forEach(undo => undo && undo());
-  }, [actionsPerformed, actionPerformedClassName, lastRender]);
-
-  return errors.length ? (
-    node_env === 'development' ? (
-      <ErrorBox error={errors[0]} type={localize('ADAPTIVE_CARD_ERROR_BOX_TITLE_RENDER')} />
-    ) : (
-      false
-    )
-  ) : (
-    <div
-      className={classNames(adaptiveCardRendererStyleSet + '', 'webchat__adaptive-card-renderer')}
-      onClick={handleClickAndKeyPressForTapAction}
-      onKeyPress={handleClickAndKeyPressForTapAction}
-      ref={contentRef}
-    />
-  );
-};
-
-AdaptiveCardRenderer.defaultProps = {
-  actionPerformedClassName: '',
-  disabled: undefined,
-  tapAction: undefined
-};
-
-AdaptiveCardRenderer.propTypes = {
-  actionPerformedClassName: PropTypes.string,
-  adaptiveCard: PropTypes.any.isRequired,
-  disabled: PropTypes.bool,
-  tapAction: PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    value: PropTypes.string
-  })
-};
-
-export default AdaptiveCardRenderer;

package/src/adaptiveCards/createAdaptiveCardsAttachmentMiddleware.js

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import AdaptiveCardAttachment from './Attachment/AdaptiveCardAttachment';
-import AnimationCardAttachment from './Attachment/AnimationCardAttachment';
-import AudioCardAttachment from './Attachment/AudioCardAttachment';
-import HeroCardAttachment from './Attachment/HeroCardAttachment';
-import OAuthCardAttachment from './Attachment/OAuthCardAttachment';
-import ReceiptCardAttachment from './Attachment/ReceiptCardAttachment';
-import SignInCardAttachment from './Attachment/SignInCardAttachment';
-import ThumbnailCardAttachment from './Attachment/ThumbnailCardAttachment';
-import VideoCardAttachment from './Attachment/VideoCardAttachment';
-
-export default function createAdaptiveCardsAttachmentMiddleware() {
-  // This is not returning a React component, but a render function.
-  /* eslint-disable-next-line react/display-name */
-  return () => next => (...args) => {
-    const [{ activity, attachment }] = args;
-
-    return attachment.contentType === 'application/vnd.microsoft.card.hero' ? (
-      <HeroCardAttachment activity={activity} attachment={attachment} />
-    ) : attachment.contentType === 'application/vnd.microsoft.card.adaptive' ? (
-      <AdaptiveCardAttachment activity={activity} attachment={attachment} />
-    ) : attachment.contentType === 'application/vnd.microsoft.card.animation' ? (
-      <AnimationCardAttachment activity={activity} attachment={attachment} />
-    ) : attachment.contentType === 'application/vnd.microsoft.card.audio' ? (
-      <AudioCardAttachment activity={activity} attachment={attachment} />
-    ) : attachment.contentType === 'application/vnd.microsoft.card.oauth' ? (
-      <OAuthCardAttachment activity={activity} attachment={attachment} />
-    ) : attachment.contentType === 'application/vnd.microsoft.card.receipt' ? (
-      <ReceiptCardAttachment activity={activity} attachment={attachment} />
-    ) : attachment.contentType === 'application/vnd.microsoft.card.signin' ? (
-      <SignInCardAttachment activity={activity} attachment={attachment} />
-    ) : attachment.contentType === 'application/vnd.microsoft.card.thumbnail' ? (
-      <ThumbnailCardAttachment activity={activity} attachment={attachment} />
-    ) : attachment.contentType === 'application/vnd.microsoft.card.video' ? (
-      <VideoCardAttachment activity={activity} attachment={attachment} />
-    ) : (
-      next(...args)
-    );
-  };
-}

package/src/createBrowserWebSpeechPonyfillFactory.js

@@ -1,16 +0,0 @@
-export default function createBrowserWebSpeechPonyfillFactory() {
-  if (!window.SpeechRecognition && !window.webkitSpeechRecognition) {
-    console.warn('Web Chat: This browser does not support Web Speech API Speech Recognition.');
-  }
-
-  if (!window.speechSynthesis) {
-    console.warn('Web Chat: This browser does not support Web Speech API Speech Synthesis.');
-  }
-
-  return () => ({
-    SpeechGrammarList: window.SpeechGrammarList || window.webkitSpeechGrammarList,
-    SpeechRecognition: window.SpeechRecognition || window.webkitSpeechRecognition,
-    speechSynthesis: window.speechSynthesis,
-    SpeechSynthesisUtterance: window.SpeechSynthesisUtterance
-  });
-}

package/src/createCognitiveServicesSpeechServicesPonyfillFactory.js

@@ -1,58 +0,0 @@
-import { AudioConfig } from 'microsoft-cognitiveservices-speech-sdk/distrib/lib/src/sdk/Audio/AudioConfig';
-import createPonyfill from 'web-speech-cognitive-services/lib/SpeechServices';
-
-export default function createCognitiveServicesSpeechServicesPonyfillFactory({
-  audioConfig,
-  audioContext,
-  audioInputDeviceId,
-  credentials,
-  enableTelemetry,
-  speechRecognitionEndpointId,
-  speechSynthesisDeploymentId,
-  speechSynthesisOutputFormat,
-  textNormalization
-}) {
-  if (!window.navigator.mediaDevices && !audioConfig) {
-    console.warn(
-      'botframework-webchat: Your browser does not support Web Audio or the page is not loaded via HTTPS or localhost. Cognitive Services Speech Services is disabled. However, you may pass a custom AudioConfig to enable speech in this environment.'
-    );
-
-    return () => ({});
-  }
-
-  if (audioConfig && audioInputDeviceId) {
-    console.warn(
-      'botframework-webchat: "audioConfig" and "audioInputDeviceId" cannot be set at the same time; ignoring "audioInputDeviceId".'
-    );
-  }
-
-  // WORKAROUND: We should prevent AudioContext object from being recreated because they may be blessed and UX-wise expensive to recreate.
-  //             In Cognitive Services SDK, if they detect the "end" function is falsy, they will not call "end" but "suspend" instead.
-  //             And on next recognition, they will re-use the AudioContext object.
-  if (!audioConfig) {
-    audioConfig = audioInputDeviceId
-      ? AudioConfig.fromMicrophoneInput(audioInputDeviceId)
-      : AudioConfig.fromDefaultMicrophoneInput();
-  }
-
-  return ({ referenceGrammarID } = {}) => {
-    const { SpeechGrammarList, SpeechRecognition, speechSynthesis, SpeechSynthesisUtterance } = createPonyfill({
-      audioConfig,
-      audioContext,
-      credentials,
-      enableTelemetry,
-      referenceGrammars: referenceGrammarID ? [`luis/${referenceGrammarID}-PRODUCTION`] : [],
-      speechRecognitionEndpointId,
-      speechSynthesisDeploymentId,
-      speechSynthesisOutputFormat,
-      textNormalization
-    });
-
-    return {
-      SpeechGrammarList,
-      SpeechRecognition,
-      speechSynthesis,
-      SpeechSynthesisUtterance
-    };
-  };
-}

package/src/createDirectLine.js

@@ -1,38 +0,0 @@
-import { DirectLine } from 'botframework-directlinejs';
-
-export default function createDirectLine({
-  botAgent,
-  conversationId,
-  conversationStartProperties,
-  domain,
-  fetch,
-  pollingInterval,
-  secret,
-  streamUrl,
-  token,
-  watermark,
-  webSocket
-}) {
-  return new DirectLine({
-    botAgent,
-    conversationId,
-    conversationStartProperties,
-    domain,
-    fetch,
-    pollingInterval,
-    secret,
-    streamUrl,
-    token,
-    watermark,
-    webSocket,
-    createFormData: attachments => {
-      const formData = new FormData();
-
-      attachments.forEach(({ contentType, data, filename, name }) => {
-        formData.append(name, new Blob(data, { contentType }), filename);
-      });
-
-      return formData;
-    }
-  });
-}

package/src/createDirectLineAppServiceExtension.js

@@ -1,12 +0,0 @@
-import { DirectLineStreaming } from 'botframework-directlinejs';
-
-export default function createDirectLineAppServiceExtension({ botAgent, conversationId, domain, token }) {
-  return Promise.resolve(
-    new DirectLineStreaming({
-      botAgent,
-      conversationId,
-      domain,
-      token
-    })
-  );
-}

package/src/createDirectLineSpeechAdapters.js

@@ -1,5 +0,0 @@
-import { createAdapters } from 'botframework-directlinespeech-sdk';
-
-export default function createDirectLineSpeechAdapters(...args) {
-  return createAdapters(...args);
-}