botframework-webchat-component 4.13.0 → 4.14.2

package/src/Utils/activityAltText.ts

@@ -0,0 +1,135 @@
+import textFormatToContentType from './textFormatToContentType';
+
+function walk<T extends Node>(document: Document, walker: (node: T) => string[]): string[] {
+  const nodes: T[] = [].slice.call(document.childNodes);
+  const results: string[] = [];
+
+  while (nodes.length) {
+    const node = nodes.shift();
+    const { childNodes } = node;
+
+    results.push(...(walker(node) || []));
+    nodes.unshift(...[].slice.call(childNodes));
+  }
+
+  return results;
+}
+
+// From https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
+const HTML_INLINE_TAGS = [
+  'A',
+  'ABBR',
+  'ACRONYM',
+  'AUDIO',
+  'B',
+  'BDI',
+  'BDO',
+  'BIG',
+  'BR',
+  'BUTTON',
+  'CANVAS',
+  'CITE',
+  'CODE',
+  'DATA',
+  'DATALIST',
+  'DEL',
+  'DFN',
+  'EM',
+  'EMBED',
+  'I',
+  'IFRAME',
+  'IMG',
+  'INPUT',
+  'INS',
+  'KBD',
+  'LABEL',
+  'MAP',
+  'MARK',
+  'METER',
+  'NOSCRIPT',
+  'OBJECT',
+  'OUTPUT',
+  'PICTURE',
+  'PROGRESS',
+  'Q',
+  'RUBY',
+  'S',
+  'SAMP',
+  'SCRIPT',
+  'SELECT',
+  'SLOT',
+  'SMALL',
+  'SPAN',
+  'STRONG',
+  'SUB',
+  'SUP',
+  'SVG',
+  'TEMPLATE',
+  'TEXTAREA',
+  'TIME',
+  'U',
+  'TT',
+  'VAR',
+  'VIDEO',
+  'WBR'
+];
+
+/**
+ * Computes all text from a given HTML document as flattened array. This is best-effort.
+ *
+ * @param {Document} document - HTML document to computes texts from.
+ */
+function htmlTextAlternatives(document: Document): string[] {
+  // TODO: [P2] #3923 Revisit this logic with W3C standard, we could do a better text alternatives computation.
+  //       For example, <abbr title="..."> is not computed.
+  //       https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_name
+  return walk<HTMLElement>(document, node => {
+    const { nodeType, tagName, textContent } = node;
+
+    if (nodeType === Node.TEXT_NODE) {
+      return [textContent];
+    } else if (tagName === 'IMG') {
+      return [node.getAttribute('alt')];
+    } else if (!HTML_INLINE_TAGS.includes(tagName)) {
+      return ['\n'];
+    }
+  });
+}
+
+/**
+ * Returns the text alternatives for a message activity.
+ *
+ * @param {object} activity - Activity to compute the text alternatives.
+ * @param {function} renderMarkdownAsHTML - Callback function to render Markdown as HTML string.
+ */
+export default function activityAltText(
+  activity: any,
+  renderMarkdownAsHTML?: (markdown: string) => string
+): false | string {
+  if (activity.type !== 'message') {
+    return false;
+  }
+
+  const fallbackText = activity?.channelData?.['webchat:fallback-text'];
+
+  if (typeof fallbackText === 'string') {
+    // If `fallbackText` is an empty string, we will treat the activity as presentational and skip narrating it (return false).
+    return fallbackText || false;
+  }
+
+  const text = activity?.channelData?.messageBack?.displayText || activity.text;
+
+  if (!text) {
+    // We will continue to narrate the activity, as empty.
+    return '';
+  }
+
+  if (renderMarkdownAsHTML && textFormatToContentType(activity.textFormat) === 'text/markdown') {
+    return htmlTextAlternatives(new DOMParser().parseFromString(renderMarkdownAsHTML(text), 'text/html'))
+      .join('')
+      .replace(/\n{2,}/gu, '\n')
+      .trim();
+  }
+
+  return text;
+}

package/src/Utils/findLastIndex.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import findLastIndex from './findLastIndex';
 
 describe('find last index', () => {

package/src/Utils/intersectionOf.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import intersectionOf from './intersectionOf';
 
 test('intersection of [1, 2, 3] and [3, 4, 5] should return [3]', () => {

package/src/Utils/mapMap.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import mapMap from './mapMap';
 
 test('multiple a map by 10', () => {

package/src/Utils/removeInline.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import removeInline from './removeInline';
 
 test('remove single occurrence', () => {

package/src/Utils/{singleToArray.js → singleToArray.ts}

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

package/src/Utils/walkMarkdownTokens.spec.js

@@ -6,9 +6,9 @@ import walkMarkdownTokens from './walkMarkdownTokens';
 test('walk every node and add class="markdown"', () => {
   const markdownIt = new MarkdownIt();
   const tree = markdownIt.parse('Hello, [World](#world)!');
-  const patchedTree = walkMarkdownTokens(tree, token => {
-    return updateIn(token, ['attrs'], attrs => [...(attrs || []), ['class', 'markdown']]);
-  });
+  const patchedTree = walkMarkdownTokens(tree, token =>
+    updateIn(token, ['attrs'], attrs => [...(attrs || []), ['class', 'markdown']])
+  );
   const actual = markdownIt.renderer.render(patchedTree);
 
   expect(actual).toMatchInlineSnapshot(`

package/src/hooks/{index.js → index.ts}

@@ -20,6 +20,7 @@ import { useTypingIndicatorVisible } from '../BasicTypingIndicator';
 export {
   useDictateAbortable,
   useFocus,
+  /** @deprecated Please use `useFocus('sendBox')` instead. */
   useFocusSendBox,
   useMicrophoneButtonClick,
   useMicrophoneButtonDisabled,

package/src/hooks/internal/BypassSpeechSynthesisPonyfill.js

@@ -6,11 +6,12 @@
 /* eslint max-classes-per-file: ["error", 4] */
 /* eslint no-empty-function: "off" */
 
-import EventTarget, { defineEventAttribute } from 'event-target-shim-es5';
+import EventTarget, { Event, getEventAttributeValue, setEventAttributeValue } from 'event-target-shim/es5';
 
-class SpeechSynthesisEvent {
+class SpeechSynthesisEvent extends Event {
   constructor(type, utterance) {
-    this._type = type;
+    super(type);
+
     this._utterance = utterance;
   }
 
@@ -24,10 +25,6 @@ class SpeechSynthesisEvent {
 
   get name() {}
 
-  get type() {
-    return this._type;
-  }
-
   get utterance() {
     return this._utterance;
   }
@@ -92,15 +89,63 @@ class SpeechSynthesisUtterance extends EventTarget {
   set volume(value) {
     this._volume = value;
   }
-}
 
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'boundary');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'end');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'error');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'mark');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'pause');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'resume');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'start');
+  get onboundary() {
+    return getEventAttributeValue(this, 'boundary');
+  }
+
+  set onboundary(value) {
+    setEventAttributeValue(this, 'boundary', value);
+  }
+
+  get onend() {
+    return getEventAttributeValue(this, 'end');
+  }
+
+  set onend(value) {
+    setEventAttributeValue(this, 'end', value);
+  }
+
+  get onerror() {
+    return getEventAttributeValue(this, 'error');
+  }
+
+  set onerror(value) {
+    setEventAttributeValue(this, 'error', value);
+  }
+
+  get onmark() {
+    return getEventAttributeValue(this, 'mark');
+  }
+
+  set onmark(value) {
+    setEventAttributeValue(this, 'mark', value);
+  }
+
+  get onpause() {
+    return getEventAttributeValue(this, 'pause');
+  }
+
+  set onpause(value) {
+    setEventAttributeValue(this, 'pause', value);
+  }
+
+  get onresume() {
+    return getEventAttributeValue(this, 'resume');
+  }
+
+  set onresume(value) {
+    setEventAttributeValue(this, 'resume', value);
+  }
+
+  get onstart() {
+    return getEventAttributeValue(this, 'start');
+  }
+
+  set onstart(value) {
+    setEventAttributeValue(this, 'start', value);
+  }
+}
 
 class SpeechSynthesisVoice {
   get default() {
@@ -155,9 +200,15 @@ class SpeechSynthesis extends EventTarget {
     utterance.dispatchEvent(new SpeechSynthesisEvent('start', utterance));
     utterance.dispatchEvent(new SpeechSynthesisEvent('end', utterance));
   }
-}
 
-defineEventAttribute(SpeechSynthesis.prototype, 'voiceschanged');
+  get onvoiceschanged() {
+    return getEventAttributeValue(this, 'voiceschanged');
+  }
+
+  set onvoiceschanged(value) {
+    setEventAttributeValue(this, 'voiceschanged', value);
+  }
+}
 
 const speechSynthesis = new SpeechSynthesis();
 

package/src/hooks/internal/useMemoize.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import useMemoize from './useMemoize';
 
 jest.mock('react', () => {

package/src/hooks/internal/useResumeAudioContext.ts

@@ -0,0 +1,7 @@
+import useWebSpeechPonyfill from '../useWebSpeechPonyfill';
+
+export default function useResumeAudioContext(): () => Promise<void> {
+  const [{ resumeAudioContext }] = useWebSpeechPonyfill();
+
+  return () => resumeAudioContext && resumeAudioContext();
+}

package/src/hooks/internal/useScrollRelative.js

@@ -5,7 +5,8 @@ import useWebChatUIContext from './useWebChatUIContext';
 export default function useScrollRelative() {
   const { scrollRelativeCallbacksRef } = useWebChatUIContext();
 
-  return useCallback((...args) => scrollRelativeCallbacksRef.current.forEach(callback => callback(...args)), [
-    scrollRelativeCallbacksRef
-  ]);
+  return useCallback(
+    (...args) => scrollRelativeCallbacksRef.current.forEach(callback => callback(...args)),
+    [scrollRelativeCallbacksRef]
+  );
 }

package/src/hooks/internal/{useUniqueId.js → useUniqueId.ts}

@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 import random from 'math-random';
 
-export default function useUniqueId(prefix) {
+export default function useUniqueId(prefix?: string): string {
   const id = useMemo(() => random().toString(36).substr(2, 5), []);
 
   prefix = prefix ? `${prefix}--` : '';

package/src/hooks/{useDictateAbortable.js → useDictateAbortable.ts}

@@ -1,6 +1,6 @@
 import useSettableDictateAbortable from './internal/useSettableDictateAbortable';
 
-export default function useDictateAbortable() {
+export default function useDictateAbortable(): [boolean] {
   // We are only exporting a read-only version of dictateAbortable.
   const [dictateAbortable] = useSettableDictateAbortable();
 

package/src/hooks/{useFocus.js → useFocus.ts}

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useFocus() {
+export default function useFocus(): (where?: 'sendBox' | 'sendBoxWithoutKeyboard') => void {
   const { focusSendBoxCallbacksRef, focusTranscriptCallbacksRef } = useWebChatUIContext();
 
   return useCallback(

package/src/hooks/{useFocusSendBox.js → useFocusSendBox.ts}

@@ -2,7 +2,8 @@ import useFocus from './useFocus';
 
 let showDeprecationNotes = true;
 
-export default function useFocusSendBox() {
+/** @deprecated Please use `useFocus('sendBox')` instead. */
+export default function useFocusSendBox(): () => void {
   if (showDeprecationNotes) {
     console.warn(
       'botframework-webchat: "useFocusSendBox" is deprecated and will be removed on or after 2022-04-21. Please use "useFocus(\'sendBox\')" instead.'

package/src/hooks/{useObserveScrollPosition.js → useObserveScrollPosition.ts}

@@ -1,7 +1,12 @@
 import { useEffect } from 'react';
+
+import ScrollPosition from '../types/ScrollPosition';
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useObserveScrollPosition(observer, deps) {
+export default function useObserveScrollPosition(
+  observer: (scrollPosition: ScrollPosition) => void,
+  deps: any[]
+): void {
   if (typeof observer !== 'function') {
     observer = undefined;
     console.warn('botframework-webchat: First argument passed to "useObserveScrollPosition" must be a function.');

package/src/hooks/{useObserveTranscriptFocus.js → useObserveTranscriptFocus.ts}

@@ -1,7 +1,12 @@
+import { DirectLineActivity } from 'botframework-webchat-core';
 import { useEffect } from 'react';
+
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useObserveTranscriptFocus(observer, deps) {
+export default function useObserveTranscriptFocus(
+  observer: (event: { activity: DirectLineActivity }) => void,
+  deps: any[]
+): void {
   if (typeof observer !== 'function') {
     observer = undefined;
     console.warn('botframework-webchat: First argument passed to "useObserveTranscriptFocus" must be a function.');

package/src/hooks/{useRenderMarkdownAsHTML.js → useRenderMarkdownAsHTML.ts}

@@ -1,11 +1,15 @@
-import { hooks } from 'botframework-webchat-api';
+import { hooks, StrictStyleOptions } from 'botframework-webchat-api';
 import { useMemo } from 'react';
 
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
 const { useLocalizer, useStyleOptions } = hooks;
 
-export default function useRenderMarkdownAsHTML() {
+export default function useRenderMarkdownAsHTML(): (
+  markdown: string,
+  styleOptions?: StrictStyleOptions,
+  options?: { externalLinkAlt: string }
+) => string {
   const { renderMarkdown } = useWebChatUIContext();
   const [styleOptions] = useStyleOptions();
   const localize = useLocalizer();

package/src/hooks/{useScrollDown.js → useScrollDown.ts}

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import useScrollRelative from './internal/useScrollRelative';
 
-export default function useScrollDown() {
+export default function useScrollDown(): (options?: { displacement: number }) => void {
   const scrollRelative = useScrollRelative();
 
   return useCallback((...args) => scrollRelative('down', ...args), [scrollRelative]);

package/src/hooks/{useScrollTo.js → useScrollTo.ts}

@@ -1,8 +1,12 @@
 import { useCallback } from 'react';
 
+import ScrollPosition from '../types/ScrollPosition';
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useScrollTo() {
+export default function useScrollTo(): (
+  position: ScrollPosition,
+  scrollToOptions: { behavior?: 'auto' | 'smooth' }
+) => void {
   const { scrollToCallbacksRef } = useWebChatUIContext();
 
   return useCallback((...args) => scrollToCallbacksRef.current.forEach(callback => callback(...args)), [

package/src/hooks/{useScrollToEnd.js → useScrollToEnd.ts}

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

package/src/hooks/{useScrollUp.js → useScrollUp.ts}

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import useScrollRelative from './internal/useScrollRelative';
 
-export default function useScrollUp() {
+export default function useScrollUp(): (options?: { displacement: number }) => void {
   const scrollRelative = useScrollRelative();
 
   return useCallback((...args) => scrollRelative('up', ...args), [scrollRelative]);

package/src/hooks/{useSendFiles.js → useSendFiles.ts}

@@ -1,5 +1,6 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1024] }] */
 
+import { DirectLineAttachment } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import { useCallback } from 'react';
 
@@ -19,7 +20,7 @@ async function makeThumbnail(file, width, height, contentType, quality) {
   }
 }
 
-export default function useSendFiles() {
+export default function useSendFiles(): (files: File[]) => void {
   const sendFiles = useAPISendFiles();
   const [
     {
@@ -40,7 +41,7 @@ export default function useSendFiles() {
         // TODO: [P3] We need to find revokeObjectURL on the UI side
         //       Redux store should not know about the browser environment
         //       One fix is to use ArrayBuffer instead of object URL, but that would requires change to DirectLineJS
-        const attachments = await Promise.all(
+        const attachments: DirectLineAttachment[] = await Promise.all(
           [].map.call(files, async file => {
             let thumbnail;
 

package/src/hooks/{useStyleSet.js → useStyleSet.ts}

@@ -1,5 +1,5 @@
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useStyleSet() {
+export default function useStyleSet(): [any] {
   return [useWebChatUIContext().styleSet];
 }

package/src/hooks/useWebSpeechPonyfill.ts

@@ -0,0 +1,7 @@
+import { WebSpeechPonyfill } from 'botframework-webchat-api';
+
+import useWebChatUIContext from './internal/useWebChatUIContext';
+
+export default function useWebSpeechPonyfill(): [WebSpeechPonyfill] {
+  return [useWebChatUIContext().webSpeechPonyfill];
+}

package/src/index.ts

@@ -1,8 +1,10 @@
-import ReactWebChat from './ReactWebChat';
+import { concatMiddleware, hooks as apiHooks, Localize, localize } from 'botframework-webchat-api';
+
+import ReactWebChat, { ReactWebChatProps } from './ReactWebChat';
 
-import Composer from './Composer';
+import Composer, { ComposerProps } from './Composer';
 
-import BasicWebChat from './BasicWebChat';
+import BasicWebChat, { BasicWebChatProps } from './BasicWebChat';
 
 import Avatar from './Activity/Avatar';
 import Bubble from './Activity/Bubble';
@@ -35,14 +37,6 @@ import createCoreAttachmentMiddleware from './Middleware/Attachment/createCoreMi
 import createStyleSet from './Styles/createStyleSet';
 import getTabIndex from './Utils/TypeFocusSink/getTabIndex';
 
-declare module 'botframework-webchat-api' {
-  export function concatMiddleware(): any;
-  export const hooks: any;
-  export function Localize(): any;
-  export function localize(): any;
-}
-
-import { concatMiddleware, hooks as apiHooks, Localize, localize } from 'botframework-webchat-api';
 import * as componentHooks from './hooks/index';
 
 const hooks = {
@@ -111,3 +105,5 @@ export {
   localize,
   version
 };
+
+export type { BasicWebChatProps, ComposerProps, ReactWebChatProps };

package/src/tsconfig.json

@@ -11,5 +11,5 @@
     "skipLibCheck": true,
     "sourceMap": true
   },
-  "files": ["index.tsx"]
+  "files": ["index.ts"]
 }

package/src/types/ScrollPosition.ts

@@ -0,0 +1,6 @@
+type ScrollPosition = {
+  activityID?: string;
+  scrollTop: number;
+};
+
+export default ScrollPosition;

package/lib/Activity/ScrollToEndButton.js

@@ -1,81 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _botframeworkWebchatApi = require("botframework-webchat-api");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _useScrollToEnd = _interopRequireDefault(require("../hooks/useScrollToEnd"));
-
-var _useStyleSet3 = _interopRequireDefault(require("../hooks/useStyleSet"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var useDirection = _botframeworkWebchatApi.hooks.useDirection,
-    useLocalizer = _botframeworkWebchatApi.hooks.useLocalizer;
-var ScrollToEndButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var className = _ref.className,
-      onClick = _ref.onClick;
-
-  var _useStyleSet = (0, _useStyleSet3.default)(),
-      _useStyleSet2 = _slicedToArray(_useStyleSet, 1),
-      scrollToEndButtonStyleSet = _useStyleSet2[0].scrollToEndButton;
-
-  var _useDirection = useDirection(),
-      _useDirection2 = _slicedToArray(_useDirection, 1),
-      direction = _useDirection2[0];
-
-  var localize = useLocalizer();
-  var scrollToEnd = (0, _useScrollToEnd.default)();
-  var handleClick = (0, _react.useCallback)(function (event) {
-    onClick && onClick(event);
-    scrollToEnd();
-  }, [onClick, scrollToEnd]);
-  var newMessageText = localize('TRANSCRIPT_NEW_MESSAGES');
-  return /*#__PURE__*/_react.default.createElement("button", {
-    "aria-label": newMessageText,
-    className: (0, _classnames.default)('webchat__scrollToEndButton', scrollToEndButtonStyleSet + '', className + '', direction === 'rtl' ? 'webchat__overlay--rtl' : ''),
-    onClick: handleClick,
-    ref: ref,
-    tabIndex: 0,
-    type: "button"
-  }, newMessageText);
-});
-ScrollToEndButton.defaultProps = {
-  className: '',
-  onClick: undefined
-};
-ScrollToEndButton.displayName = 'ScrollToEndButton';
-ScrollToEndButton.propTypes = {
-  className: _propTypes.default.string,
-  onClick: _propTypes.default.func
-};
-var _default = ScrollToEndButton;
-exports.default = _default;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BY3Rpdml0eS9TY3JvbGxUb0VuZEJ1dHRvbi5qcyJdLCJuYW1lcyI6WyJ1c2VEaXJlY3Rpb24iLCJob29rcyIsInVzZUxvY2FsaXplciIsIlNjcm9sbFRvRW5kQnV0dG9uIiwicmVmIiwiY2xhc3NOYW1lIiwib25DbGljayIsInNjcm9sbFRvRW5kQnV0dG9uU3R5bGVTZXQiLCJzY3JvbGxUb0VuZEJ1dHRvbiIsImRpcmVjdGlvbiIsImxvY2FsaXplIiwic2Nyb2xsVG9FbmQiLCJoYW5kbGVDbGljayIsImV2ZW50IiwibmV3TWVzc2FnZVRleHQiLCJkZWZhdWx0UHJvcHMiLCJ1bmRlZmluZWQiLCJkaXNwbGF5TmFtZSIsInByb3BUeXBlcyIsIlByb3BUeXBlcyIsInN0cmluZyIsImZ1bmMiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBOztBQUNBOztBQUNBOztBQUNBOztBQUVBOztBQUNBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQUVRQSxZLEdBQStCQyw2QixDQUEvQkQsWTtJQUFjRSxZLEdBQWlCRCw2QixDQUFqQkMsWTtBQUV0QixJQUFNQyxpQkFBaUIsZ0JBQUcsdUJBQVcsZ0JBQXlCQyxHQUF6QixFQUFpQztBQUFBLE1BQTlCQyxTQUE4QixRQUE5QkEsU0FBOEI7QUFBQSxNQUFuQkMsT0FBbUIsUUFBbkJBLE9BQW1COztBQUFBLHFCQUNULDRCQURTO0FBQUE7QUFBQSxNQUN4Q0MseUJBRHdDLG9CQUMzREMsaUJBRDJEOztBQUFBLHNCQUVoRFIsWUFBWSxFQUZvQztBQUFBO0FBQUEsTUFFN0RTLFNBRjZEOztBQUdwRSxNQUFNQyxRQUFRLEdBQUdSLFlBQVksRUFBN0I7QUFDQSxNQUFNUyxXQUFXLEdBQUcsOEJBQXBCO0FBRUEsTUFBTUMsV0FBVyxHQUFHLHdCQUNsQixVQUFBQyxLQUFLLEVBQUk7QUFDUFAsSUFBQUEsT0FBTyxJQUFJQSxPQUFPLENBQUNPLEtBQUQsQ0FBbEI7QUFDQUYsSUFBQUEsV0FBVztBQUNaLEdBSmlCLEVBS2xCLENBQUNMLE9BQUQsRUFBVUssV0FBVixDQUxrQixDQUFwQjtBQVFBLE1BQU1HLGNBQWMsR0FBR0osUUFBUSxDQUFDLHlCQUFELENBQS9CO0FBRUEsc0JBQ0U7QUFDRSxrQkFBWUksY0FEZDtBQUVFLElBQUEsU0FBUyxFQUFFLHlCQUNULDRCQURTLEVBRVRQLHlCQUF5QixHQUFHLEVBRm5CLEVBR1RGLFNBQVMsR0FBRyxFQUhILEVBSVRJLFNBQVMsS0FBSyxLQUFkLEdBQXNCLHVCQUF0QixHQUFnRCxFQUp2QyxDQUZiO0FBUUUsSUFBQSxPQUFPLEVBQUVHLFdBUlg7QUFTRSxJQUFBLEdBQUcsRUFBRVIsR0FUUDtBQVVFLElBQUEsUUFBUSxFQUFFLENBVlo7QUFXRSxJQUFBLElBQUksRUFBQztBQVhQLEtBYUdVLGNBYkgsQ0FERjtBQWlCRCxDQWpDeUIsQ0FBMUI7QUFtQ0FYLGlCQUFpQixDQUFDWSxZQUFsQixHQUFpQztBQUMvQlYsRUFBQUEsU0FBUyxFQUFFLEVBRG9CO0FBRS9CQyxFQUFBQSxPQUFPLEVBQUVVO0FBRnNCLENBQWpDO0FBS0FiLGlCQUFpQixDQUFDYyxXQUFsQixHQUFnQyxtQkFBaEM7QUFFQWQsaUJBQWlCLENBQUNlLFNBQWxCLEdBQThCO0FBQzVCYixFQUFBQSxTQUFTLEVBQUVjLG1CQUFVQyxNQURPO0FBRTVCZCxFQUFBQSxPQUFPLEVBQUVhLG1CQUFVRTtBQUZTLENBQTlCO2VBS2VsQixpQiIsInNvdXJjZVJvb3QiOiJjb21wb25lbnQ6Ly8vIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaG9va3MgfSBmcm9tICdib3RmcmFtZXdvcmstd2ViY2hhdC1hcGknO1xuaW1wb3J0IGNsYXNzTmFtZXMgZnJvbSAnY2xhc3NuYW1lcyc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYsIHVzZUNhbGxiYWNrIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgdXNlU2Nyb2xsVG9FbmQgZnJvbSAnLi4vaG9va3MvdXNlU2Nyb2xsVG9FbmQnO1xuaW1wb3J0IHVzZVN0eWxlU2V0IGZyb20gJy4uL2hvb2tzL3VzZVN0eWxlU2V0JztcblxuY29uc3QgeyB1c2VEaXJlY3Rpb24sIHVzZUxvY2FsaXplciB9ID0gaG9va3M7XG5cbmNvbnN0IFNjcm9sbFRvRW5kQnV0dG9uID0gZm9yd2FyZFJlZigoeyBjbGFzc05hbWUsIG9uQ2xpY2sgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFt7IHNjcm9sbFRvRW5kQnV0dG9uOiBzY3JvbGxUb0VuZEJ1dHRvblN0eWxlU2V0IH1dID0gdXNlU3R5bGVTZXQoKTtcbiAgY29uc3QgW2RpcmVjdGlvbl0gPSB1c2VEaXJlY3Rpb24oKTtcbiAgY29uc3QgbG9jYWxpemUgPSB1c2VMb2NhbGl6ZXIoKTtcbiAgY29uc3Qgc2Nyb2xsVG9FbmQgPSB1c2VTY3JvbGxUb0VuZCgpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgb25DbGljayAmJiBvbkNsaWNrKGV2ZW50KTtcbiAgICAgIHNjcm9sbFRvRW5kKCk7XG4gICAgfSxcbiAgICBbb25DbGljaywgc2Nyb2xsVG9FbmRdXG4gICk7XG5cbiAgY29uc3QgbmV3TWVzc2FnZVRleHQgPSBsb2NhbGl6ZSgnVFJBTlNDUklQVF9ORVdfTUVTU0FHRVMnKTtcblxuICByZXR1cm4gKFxuICAgIDxidXR0b25cbiAgICAgIGFyaWEtbGFiZWw9e25ld01lc3NhZ2VUZXh0fVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzKFxuICAgICAgICAnd2ViY2hhdF9fc2Nyb2xsVG9FbmRCdXR0b24nLFxuICAgICAgICBzY3JvbGxUb0VuZEJ1dHRvblN0eWxlU2V0ICsgJycsXG4gICAgICAgIGNsYXNzTmFtZSArICcnLFxuICAgICAgICBkaXJlY3Rpb24gPT09ICdydGwnID8gJ3dlYmNoYXRfX292ZXJsYXktLXJ0bCcgOiAnJ1xuICAgICAgKX1cbiAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICB0YWJJbmRleD17MH1cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgID5cbiAgICAgIHtuZXdNZXNzYWdlVGV4dH1cbiAgICA8L2J1dHRvbj5cbiAgKTtcbn0pO1xuXG5TY3JvbGxUb0VuZEJ1dHRvbi5kZWZhdWx0UHJvcHMgPSB7XG4gIGNsYXNzTmFtZTogJycsXG4gIG9uQ2xpY2s6IHVuZGVmaW5lZFxufTtcblxuU2Nyb2xsVG9FbmRCdXR0b24uZGlzcGxheU5hbWUgPSAnU2Nyb2xsVG9FbmRCdXR0b24nO1xuXG5TY3JvbGxUb0VuZEJ1dHRvbi5wcm9wVHlwZXMgPSB7XG4gIGNsYXNzTmFtZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmNcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFNjcm9sbFRvRW5kQnV0dG9uO1xuIl19