botframework-webchat-component 4.18.1 → 4.19.0

package/src/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Filled.tsx

@@ -1,16 +0,0 @@
-import React, { memo } from 'react';
-
-type Props = Readonly<{ className?: string }>;
-
-const ThumbDislike16Filled = memo(({ className }: Props) => (
-  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M13.0939 4.61984C12.716 2.60391 10.6934 1.34358 8.71713 1.89254L3.76706 3.26756C3.03196 3.47175 2.47706 4.07638 2.33656 4.82627L2.11258 6.02165C1.94781 6.90105 2.5733 7.6693 3.26989 7.95815C3.5248 8.06386 3.81627 8.21111 4.1232 8.41574C5.80215 9.53503 6.60359 11.0523 7.13855 12.3413C7.23478 12.5731 7.32706 12.8106 7.41614 13.0399C7.56235 13.4162 7.69994 13.7703 7.83227 14.041C7.94336 14.2683 8.07685 14.4964 8.2515 14.6716C8.43773 14.8585 8.68676 14.9995 9.00016 14.9995C9.35735 14.9995 9.66579 14.8763 9.91159 14.6602C10.1473 14.453 10.3051 14.179 10.4137 13.8989C10.6282 13.3453 10.6952 12.648 10.7032 12.0058C10.7114 11.3524 10.6585 10.705 10.6045 10.2249C10.5955 10.1452 10.5865 10.0698 10.5776 9.99952H11.0903C12.6557 9.99952 13.836 8.57733 13.5475 7.03879L13.0939 4.61984Z"
-      fill="currentcolor"
-    />
-  </svg>
-));
-
-ThumbDislike16Filled.displayName = 'ThumbDislike16Filled';
-
-export default ThumbDislike16Filled;

package/src/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Regular.tsx

@@ -1,16 +0,0 @@
-import React, { memo } from 'react';
-
-type Props = Readonly<{ className?: string }>;
-
-const ThumbDislike16Regular = memo(({ className }: Props) => (
-  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M10.5776 9.99952C10.5944 10.133 10.6119 10.2848 10.6283 10.45C10.7019 11.1893 10.7593 12.2428 10.6146 13.1274C10.5427 13.5666 10.4137 14.0141 10.1727 14.3636C9.91609 14.7357 9.52604 14.9995 9.00016 14.9995C8.48357 14.9995 8.16907 14.6298 7.97616 14.3084C7.78384 13.9879 7.61527 13.553 7.44271 13.1078L7.42958 13.0739C6.88287 11.6637 6.13522 9.75708 4.1232 8.41574C3.81627 8.21111 3.5248 8.06386 3.26989 7.95815C2.5733 7.6693 1.94781 6.90105 2.11258 6.02165L2.33656 4.82627C2.47706 4.07638 3.03196 3.47175 3.76706 3.26756L8.71713 1.89254C10.6934 1.34358 12.716 2.60391 13.0939 4.61984L13.5475 7.03879C13.836 8.57733 12.6557 9.99952 11.0903 9.99952H10.5776ZM12.1111 4.80413C11.8411 3.36418 10.3964 2.46395 8.98478 2.85605L4.03471 4.23107C3.66715 4.33317 3.38971 4.63549 3.31945 5.01043L3.09548 6.20582C3.04235 6.48935 3.2566 6.87007 3.65293 7.03442C3.96222 7.16268 4.31198 7.33974 4.67791 7.58369C6.9648 9.10828 7.80648 11.2795 8.35387 12.6916L8.36197 12.7124C8.55151 13.2014 8.69067 13.5556 8.83359 13.7938C8.90275 13.909 8.95439 13.9644 8.98519 13.9886C8.99329 13.995 8.99862 13.9981 9.00124 13.9995C9.14311 13.9992 9.24643 13.9453 9.3495 13.7959C9.46849 13.6233 9.56579 13.3445 9.62769 12.966C9.75044 12.2154 9.70484 11.2689 9.63323 10.549C9.60484 10.2636 9.57314 10.0209 9.54862 9.85016C9.53637 9.76485 9.52595 9.69769 9.51867 9.65235L9.51029 9.60123L9.50819 9.58884L9.50772 9.58609C9.48227 9.44064 9.52236 9.29093 9.61735 9.17788C9.66884 9.11659 9.73358 9.06935 9.8056 9.03892C9.86646 9.01321 9.93252 8.99952 10.0002 8.99952H11.0903C12.0295 8.99952 12.7377 8.1462 12.5646 7.22308L12.1111 4.80413Z"
-      fill="currentcolor"
-    />
-  </svg>
-));
-
-ThumbDislike16Regular.displayName = 'ThumbDislike16Regular';
-
-export default ThumbDislike16Regular;

package/src/ActivityStatus/private/Feedback/private/icons/ThumbLike16Filled.tsx

@@ -1,16 +0,0 @@
-import React, { memo } from 'react';
-
-type Props = Readonly<{ className?: string }>;
-
-const ThumbLike16Filled = memo(({ className }: Props) => (
-  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M9.5806 1.0516C8.83006 0.843 8.24411 1.40248 8.03494 1.92332C7.79411 2.52303 7.58243 2.94395 7.32941 3.44707C7.17287 3.75833 7.00052 4.10106 6.79565 4.53704C6.32141 5.54625 5.84755 6.19347 5.5035 6.58154C5.33128 6.77579 5.19093 6.90585 5.09835 6.98435C5.05204 7.02362 5.01761 7.05005 4.99704 7.0652L4.9809 7.07684L3.109 8.18119C2.27244 8.67473 1.91142 9.69797 2.25304 10.6072L2.77304 11.9912C2.98944 12.5671 3.45891 13.0114 4.04591 13.1958L9.40179 14.8781C10.7365 15.2974 12.1555 14.5397 12.5497 13.1973L13.9139 8.55127C14.29 7.2705 13.3298 5.9878 11.9949 5.9878H10.6099C10.6759 5.76117 10.7434 5.50906 10.8047 5.24751C10.9361 4.68641 11.0478 4.04484 11.0375 3.51008C11.028 3.01293 10.9778 2.49126 10.7735 2.04807C10.5544 1.57258 10.1709 1.21566 9.5806 1.0516ZM4.9768 7.07969L4.97492 7.08097L4.9768 7.07969Z"
-      fill="currentcolor"
-    />
-  </svg>
-));
-
-ThumbLike16Filled.displayName = 'ThumbLike16Filled';
-
-export default ThumbLike16Filled;

package/src/ActivityStatus/private/Feedback/private/icons/ThumbLike16Regular.tsx

@@ -1,16 +0,0 @@
-import React, { memo } from 'react';
-
-type Props = Readonly<{ className?: string }>;
-
-const ThumbLike16Regular = memo(({ className }: Props) => (
-  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M8.03494 1.92332C8.24411 1.40248 8.83006 0.843 9.5806 1.0516C10.1709 1.21566 10.5544 1.57258 10.7735 2.04807C10.9778 2.49126 11.028 3.01293 11.0375 3.51008C11.0478 4.04484 10.9361 4.68641 10.8047 5.24751C10.7434 5.50906 10.6759 5.76117 10.6099 5.9878H11.9949C13.3298 5.9878 14.29 7.2705 13.9139 8.55127L12.5497 13.1973C12.1555 14.5397 10.7365 15.2974 9.40179 14.8781L4.04591 13.1958C3.45891 13.0114 2.98944 12.5671 2.77304 11.9912L2.25304 10.6072C1.91142 9.69797 2.27244 8.67473 3.109 8.18119L4.98089 7.07684C4.98462 7.07423 4.99002 7.07037 4.99704 7.0652C5.01761 7.05005 5.05204 7.02362 5.09835 6.98435C5.19093 6.90585 5.33128 6.77579 5.5035 6.58154C5.84755 6.19347 6.32141 5.54625 6.79565 4.53704C7.00052 4.10106 7.17287 3.75833 7.32941 3.44707C7.58243 2.94395 7.79411 2.52303 8.03494 1.92332ZM5.51946 7.91969C5.51378 7.92334 5.50805 7.9269 5.50224 7.93032L3.61713 9.04247C3.19885 9.28924 3.01834 9.80086 3.18915 10.2555L3.70914 11.6394C3.81735 11.9274 4.05208 12.1496 4.34558 12.2418L9.70146 13.9241C10.5023 14.1756 11.3537 13.721 11.5902 12.9156L12.9544 8.26953C13.1424 7.62915 12.6623 6.9878 11.9949 6.9878H9.92587C9.76349 6.9878 9.61122 6.90894 9.51751 6.77632C9.42381 6.64369 9.40035 6.47382 9.4546 6.32077C9.55458 6.03869 9.70672 5.54998 9.83103 5.01941C9.95711 4.48125 10.0456 3.93709 10.0377 3.52931C10.0287 3.061 9.97907 2.71335 9.86536 2.46667C9.76654 2.25227 9.61384 2.09874 9.31282 2.01508C9.26971 2.0031 9.21948 2.0066 9.15353 2.04989C9.08149 2.09718 9.00781 2.18417 8.96291 2.29598C8.70922 2.92772 8.46651 3.41157 8.19787 3.94711C8.04311 4.25564 7.87974 4.58133 7.7007 4.96233C7.18681 6.05594 6.66067 6.78372 6.25176 7.24494C6.04749 7.47534 5.87312 7.6385 5.74509 7.74707C5.68109 7.80133 5.62875 7.84188 5.59013 7.87034C5.57082 7.88456 5.55495 7.89575 5.54277 7.90411L5.5273 7.91456L5.52171 7.91823L5.51946 7.91969ZM4.97612 7.08018L4.97492 7.08097L4.97612 7.08018Z"
-      fill="currentcolor"
-    />
-  </svg>
-));
-
-ThumbLike16Regular.displayName = 'ThumbLike16Regular';
-
-export default ThumbLike16Regular;

package/src/ActivityStatus/private/RelativeTime.js

@@ -1,31 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
-
-import ScreenReaderText from '../../ScreenReaderText';
-import useForceRenderAtInterval from '../../hooks/internal/useForceRenderAtInterval';
-
-const { useDateFormatter, useLocalizer, useRelativeTimeFormatter } = hooks;
-
-const TIMER_INTERVAL = 60000;
-
-const RelativeTime = ({ value }) => {
-  const formatDate = useDateFormatter();
-  const formatRelativeTime = useRelativeTimeFormatter();
-  const localize = useLocalizer();
-
-  useForceRenderAtInterval(value, TIMER_INTERVAL);
-
-  return (
-    <Fragment>
-      <ScreenReaderText text={localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', formatDate(value))} />
-      <span aria-hidden={true}>{formatRelativeTime(value)}</span>
-    </Fragment>
-  );
-};
-
-RelativeTime.propTypes = {
-  value: PropTypes.string.isRequired
-};
-
-export default RelativeTime;

package/src/Attachment/Assets/DownloadIcon.js

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const ICON_SIZE_FACTOR = 22;
-
-const DownloadIcon = ({ className, size }) => (
-  <svg
-    className={className}
-    focusable={false}
-    height={ICON_SIZE_FACTOR * size}
-    role="presentation"
-    viewBox="0 0 31.8 46"
-    width={ICON_SIZE_FACTOR * size}
-  >
-    <path d="M26.8,23.8l-10.9,11L5,23.8l1.6-1.6l8.2,8.3V5H17v25.5l8.2-8.3L26.8,23.8z M5.8,41v-2.2H26V41H5.8z" />
-  </svg>
-);
-
-DownloadIcon.defaultProps = {
-  className: '',
-  size: 1
-};
-
-DownloadIcon.propTypes = {
-  className: PropTypes.string,
-  size: PropTypes.number
-};
-
-export default DownloadIcon;

package/src/Attachment/ImageAttachment.js

@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import ImageContent from './ImageContent';
-import readDataURIToBlob from '../Utils/readDataURIToBlob';
-
-const ImageAttachment = ({ attachment }) => {
-  let imageURL = attachment.thumbnailUrl || attachment.contentUrl;
-
-  // To support Content Security Policy, data URI cannot be used.
-  // We need to parse the data URI into a blob: URL.
-  const blob = readDataURIToBlob(imageURL);
-
-  if (blob) {
-    imageURL = URL.createObjectURL(blob);
-  }
-
-  return <ImageContent alt={attachment.name} src={imageURL} />;
-};
-
-ImageAttachment.propTypes = {
-  // Either attachment.contentUrl or attachment.thumbnailUrl must be specified.
-  attachment: PropTypes.oneOfType([
-    PropTypes.shape({
-      contentUrl: PropTypes.string.isRequired,
-      name: PropTypes.string,
-      thumbnailUrl: PropTypes.string
-    }),
-    PropTypes.shape({
-      contentUrl: PropTypes.string,
-      name: PropTypes.string,
-      thumbnailUrl: PropTypes.string.isRequired
-    })
-  ]).isRequired
-};
-
-export default ImageAttachment;

package/src/Avatar/ImageAvatar.js

@@ -1,49 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import CroppedImage from '../Utils/CroppedImage';
-import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
-
-const { useAvatarForBot, useAvatarForUser } = hooks;
-
-const ROOT_STYLE = {
-  '& .webchat__imageAvatar__image': {
-    width: '100%'
-  }
-};
-
-const ImageAvatar = ({ fromUser }) => {
-  const [{ image: avatarImageForBot }] = useAvatarForBot();
-  const [{ image: avatarImageForUser }] = useAvatarForUser();
-  const [{ imageAvatar: imageAvatarStyleSet }] = useStyleSet();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  const avatarImage = fromUser ? avatarImageForUser : avatarImageForBot;
-
-  return (
-    !!avatarImage && (
-      <div className={classNames('webchat__imageAvatar', rootClassName, imageAvatarStyleSet + '')}>
-        <CroppedImage
-          alt=""
-          className="webchat__imageAvatar__image"
-          height="100%"
-          src={fromUser ? avatarImageForUser : avatarImageForBot}
-          width="100%"
-        />
-      </div>
-    )
-  );
-};
-
-ImageAvatar.defaultProps = {
-  fromUser: false
-};
-
-ImageAvatar.propTypes = {
-  fromUser: PropTypes.bool
-};
-
-export default ImageAvatar;

package/src/Avatar/InitialsAvatar.js

@@ -1,50 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
-
-const { useAvatarForBot, useAvatarForUser } = hooks;
-
-const ROOT_STYLE = {
-  alignItems: 'center',
-  display: 'flex',
-
-  '& .webchat__initialsAvatar__initials': {
-    justifyContent: 'center'
-  }
-};
-
-const InitialsAvatar = ({ fromUser }) => {
-  const [{ initials: avatarInitialsForBot }] = useAvatarForBot();
-  const [{ initials: avatarInitialsForUser }] = useAvatarForUser();
-  const [{ initialsAvatar: initialsAvatarStyleSet }] = useStyleSet();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  return (
-    <div
-      className={classNames(
-        'webchat__initialsAvatar',
-        {
-          'webchat__initialsAvatar--fromUser': fromUser
-        },
-        rootClassName,
-        initialsAvatarStyleSet + ''
-      )}
-    >
-      <div className="webchat__initialsAvatar__initials">{fromUser ? avatarInitialsForUser : avatarInitialsForBot}</div>
-    </div>
-  );
-};
-
-InitialsAvatar.defaultProps = {
-  fromUser: false
-};
-
-InitialsAvatar.propTypes = {
-  fromUser: PropTypes.bool
-};
-
-export default InitialsAvatar;

package/src/ConnectivityStatus/Connecting.js

@@ -1,72 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-
-import ScreenReaderText from '../ScreenReaderText';
-import SpinnerAnimation from './Assets/SpinnerAnimation';
-import useForceRender from '../hooks/internal/useForceRender';
-import useStyleSet from '../hooks/useStyleSet';
-import useTimer from '../hooks/internal/useTimer';
-import WarningNotificationIcon from './Assets/WarningNotificationIcon';
-
-const { useDirection, useLocalizer, usePonyfill, useStyleOptions } = hooks;
-
-const ConnectivityStatusConnecting = ({ reconnect }) => {
-  const [{ Date }] = usePonyfill();
-  const [{ slowConnectionAfter }] = useStyleOptions();
-  const [
-    { connectivityNotification: connectivityNotificationStyleSet, warningNotification: warningNotificationStyleSet }
-  ] = useStyleSet();
-  const [direction] = useDirection();
-  const [initialRenderAt] = useState(() => Date.now());
-  const forceRender = useForceRender();
-  const localize = useLocalizer();
-
-  const initialConnectionText = localize('CONNECTIVITY_STATUS_ALT_CONNECTING');
-  const interruptedConnectionText = localize('CONNECTIVITY_STATUS_ALT_RECONNECTING');
-  const slowConnectionText = localize('CONNECTIVITY_STATUS_ALT_SLOW_CONNECTION');
-
-  useTimer(initialRenderAt + slowConnectionAfter, forceRender);
-
-  const now = Date.now();
-  const slow = now >= initialRenderAt + slowConnectionAfter;
-
-  return slow ? (
-    <React.Fragment>
-      <ScreenReaderText text={localize('CONNECTIVITY_STATUS_ALT', slowConnectionText)} />
-      <div
-        aria-hidden={true}
-        className={classNames('webchat__connectivityStatus', warningNotificationStyleSet + '')}
-        dir={direction}
-      >
-        <WarningNotificationIcon />
-        {slowConnectionText}
-      </div>
-    </React.Fragment>
-  ) : (
-    <React.Fragment>
-      <ScreenReaderText
-        text={localize('CONNECTIVITY_STATUS_ALT', reconnect ? interruptedConnectionText : initialConnectionText)}
-      />
-      <div
-        aria-hidden={true}
-        className={classNames('webchat__connectivityStatus', connectivityNotificationStyleSet + '')}
-        dir={direction}
-      >
-        <SpinnerAnimation />
-        {reconnect ? interruptedConnectionText : initialConnectionText}
-      </div>
-    </React.Fragment>
-  );
-};
-
-ConnectivityStatusConnecting.defaultProps = {
-  reconnect: false
-};
-
-ConnectivityStatusConnecting.propTypes = {
-  reconnect: PropTypes.bool
-};
-
-export default ConnectivityStatusConnecting;

package/src/LinkDefinition/private/Chevron.tsx

@@ -1,21 +0,0 @@
-import React, { memo } from 'react';
-
-const Chevron = memo(() => (
-  <svg
-    className="webchat__link-definitions__header-chevron"
-    fill="none"
-    height="10"
-    viewBox="1 3 10 7"
-    width="14"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z"
-      fill="currentcolor"
-    />
-  </svg>
-));
-
-Chevron.displayName = 'Chevron';
-
-export default Chevron;

package/src/Middleware/Activity/createCoreMiddleware.tsx

@@ -1,102 +0,0 @@
-import { ActivityMiddleware } from 'botframework-webchat-api';
-import React from 'react';
-
-import CarouselLayout from '../../Activity/CarouselLayout';
-import StackedLayout from '../../Activity/StackedLayout';
-
-export default function createCoreMiddleware(): ActivityMiddleware[] {
-  return [
-    () =>
-      next =>
-      (...args) => {
-        const [{ activity }] = args;
-
-        // TODO: [P4] Can we simplify these if-statement to something more readable?
-
-        const { type } = activity;
-
-        if (type === 'typing') {
-          if (
-            !(
-              'text' in activity &&
-              typeof activity.text === 'string' &&
-              activity.channelData.streamType !== 'informative'
-            )
-          ) {
-            // If it is an informative message, hide it until we have a design for informative message.
-            return false;
-          }
-
-          // Should show if this is useActiveTyping()[0][*].firstActivity, and render it with the content of lastActivity.
-          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, type: 'message' } as any}
-                renderAttachment={renderAttachment}
-                {...props}
-              />
-            );
-          };
-        }
-
-        // Filter out activities that should not be visible
-        if (type === 'conversationUpdate' || type === 'event' || type === 'invoke') {
-          return false;
-        } else if (type === 'message') {
-          const { attachments, channelData, text } = activity;
-
-          if (
-            // Do not show postback
-            channelData?.postBack ||
-            // Do not show messageBack if displayText is undefined
-            (channelData?.messageBack && !channelData.messageBack.displayText) ||
-            // Do not show empty bubbles (no text and attachments, and not "typing")
-            !(text || attachments?.length)
-          ) {
-            return false;
-          }
-        }
-
-        if (type === 'message' || type === 'typing') {
-          if (
-            type === 'message' &&
-            (activity.attachments?.length || 0) > 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/Avatar/createCoreMiddleware.tsx

@@ -1,76 +0,0 @@
-import { AvatarMiddleware } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
-
-import ImageAvatar from '../../Avatar/ImageAvatar';
-import InitialsAvatar from '../../Avatar/InitialsAvatar';
-import useStyleSet from '../../hooks/useStyleSet';
-import useStyleToEmotionObject from '../../hooks/internal/useStyleToEmotionObject';
-
-const ROOT_STYLE = {
-  overflow: 'hidden',
-  position: 'relative',
-
-  '> *': {
-    left: 0,
-    position: 'absolute',
-    top: 0
-  }
-};
-
-type DefaultAvatarProps = {
-  'aria-hidden'?: boolean;
-  className?: string;
-  fromUser: boolean;
-};
-
-const DefaultAvatar: FC<DefaultAvatarProps> = ({ 'aria-hidden': ariaHidden, className, fromUser }) => {
-  const [{ avatar: avatarStyleSet }] = useStyleSet();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  return (
-    <div
-      aria-hidden={ariaHidden}
-      className={classNames(
-        'webchat__defaultAvatar',
-        { 'webchat__defaultAvatar--fromUser': fromUser },
-        rootClassName,
-        avatarStyleSet + '',
-        (className || '') + ''
-      )}
-    >
-      <InitialsAvatar fromUser={fromUser} />
-      <ImageAvatar fromUser={fromUser} />
-    </div>
-  );
-};
-
-DefaultAvatar.defaultProps = {
-  'aria-hidden': true,
-  className: ''
-};
-
-DefaultAvatar.propTypes = {
-  'aria-hidden': PropTypes.bool,
-  className: PropTypes.string,
-  fromUser: PropTypes.bool.isRequired
-};
-
-export default function createCoreAvatarMiddleware(): AvatarMiddleware[] {
-  return [
-    () =>
-      () =>
-      ({ fromUser, styleOptions }) => {
-        const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions;
-
-        if (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials) {
-          return () => <DefaultAvatar fromUser={fromUser} />;
-        }
-
-        return false;
-      }
-  ];
-}
-
-export { DefaultAvatar };

package/src/Middleware/ScrollToEndButton/ScrollToEndButton.js

@@ -1,45 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import useStyleSet from '../../hooks/useStyleSet';
-
-const { useDirection, useLocalizer, useStyleOptions } = hooks;
-
-const ScrollToEndButton = ({ onClick }) => {
-  const [{ scrollToEndButton: scrollToEndButtonStyleSet }] = useStyleSet();
-  const [{ scrollToEndButtonBehavior }] = useStyleOptions();
-  const [direction] = useDirection();
-  const localize = useLocalizer();
-
-  const text = localize(scrollToEndButtonBehavior === 'any' ? 'TRANSCRIPT_MORE_MESSAGES' : 'TRANSCRIPT_NEW_MESSAGES');
-
-  return (
-    <button
-      aria-label={text}
-      className={classNames(
-        'webchat__scroll-to-end-button',
-        scrollToEndButtonStyleSet + '',
-        direction === 'rtl' ? 'webchat__scroll-to-end-button--rtl' : ''
-      )}
-      onClick={onClick}
-      tabIndex={0}
-      type="button"
-    >
-      {text}
-    </button>
-  );
-};
-
-ScrollToEndButton.defaultProps = {
-  onClick: undefined
-};
-
-ScrollToEndButton.displayName = 'ScrollToEndButton';
-
-ScrollToEndButton.propTypes = {
-  onClick: PropTypes.func
-};
-
-export default ScrollToEndButton;

package/src/SendBox/Assets/MicrophoneIcon.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-const MicrophoneIcon = ({ className }) => (
-  <svg className={className} focusable={false} height={28} role="presentation" viewBox="0 0 34.75 46" width={28}>
-    <path
-      className="a"
-      d="M29.75,23v6.36a7,7,0,0,1-.56,2.78,7.16,7.16,0,0,1-3.8,3.8,7,7,0,0,1-2.78.56H18.5v2.25H23V41H11.75v-2.25h4.5V36.5h-4.11a7,7,0,0,1-2.78-.56,7.16,7.16,0,0,1-3.8-3.8,7,7,0,0,1-.56-2.78V23h2.25v6.36a4.72,4.72,0,0,0,.39,1.9,4.78,4.78,0,0,0,2.6,2.6,4.72,4.72,0,0,0,1.9.39h10.47a4.72,4.72,0,0,0,1.9-.39,4.78,4.78,0,0,0,2.6-2.6,4.72,4.72,0,0,0,.39-1.9V23Zm-18,5.62a1.13,1.13,0,0,0,1.13,1.13h9a1.13,1.13,0,0,0,1.12-1.13V8.38a1.13,1.13,0,0,0-1.12-1.13h-9a1.13,1.13,0,0,0-1.13,1.13Zm1.13,3.38a3.41,3.41,0,0,1-1.32-.26,3.31,3.31,0,0,1-1.8-1.8,3.41,3.41,0,0,1-.26-1.32V8.38a3.41,3.41,0,0,1,.26-1.32,3.31,3.31,0,0,1,1.8-1.8,3.41,3.41,0,0,1,1.32-.26h9a3.4,3.4,0,0,1,1.31.26,3.31,3.31,0,0,1,1.8,1.8,3.41,3.41,0,0,1,.26,1.32v20.24a3.41,3.41,0,0,1-.26,1.32,3.31,3.31,0,0,1-1.8,1.8,3.4,3.4,0,0,1-1.31.26Z"
-    />
-  </svg>
-);
-
-export default MicrophoneIcon;

package/src/SendBox/Assets/SendIcon.js

@@ -1,36 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import React from 'react';
-
-import useStyleToEmotionObject from '../../hooks/internal/useStyleToEmotionObject';
-
-const { useDirection } = hooks;
-
-const ROOT_STYLE = {
-  '&.webchat__send-icon': {
-    '&.webchat__send-icon--rtl': {
-      transform: 'scale(-1, 1)'
-    }
-  }
-};
-
-const SendIcon = () => {
-  const [direction] = useDirection();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  return (
-    <svg
-      className={classNames('webchat__send-icon', { 'webchat__send-icon--rtl': direction === 'rtl' }, rootClassName)}
-      height={28}
-      viewBox="0 0 45.7 33.8"
-      width={28}
-    >
-      <path
-        clipRule="evenodd"
-        d="M8.55 25.25l21.67-7.25H11zm2.41-9.47h19.26l-21.67-7.23zm-6 13l4-11.9L5 5l35.7 11.9z"
-      />
-    </svg>
-  );
-};
-
-export default SendIcon;