botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/LinkDefinition/private/OpenInNewWindowIcon.tsx

@@ -1,26 +1,19 @@
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 
-import styles from '../../Attachment/Text/TextContent.module.css';
-
 type Props = Readonly<{ className?: string }>;
 
-const OpenInNewWindowIcon = ({ className }: Props) => {
-  const classNames = useStyles(styles);
-
-  return (
-    <svg
-      className={cx(classNames['text-content__open-in-new-window-icon'], className)}
-      viewBox="3 3 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M7.2501 4.50017H10.7495C11.1637 4.50017 11.4995 4.83596 11.4995 5.25017C11.4995 5.62986 11.2173 5.94366 10.8513 5.99332L10.7495 6.00017H7.24974C6.07079 5.99961 5.10349 6.90656 5.00786 8.06112L5.00028 8.22003L5.00312 16.7507C5.00343 17.9415 5.92885 18.9161 7.09966 18.9949L7.25371 19.0001L15.7518 18.9884C16.9415 18.9868 17.9145 18.062 17.9935 16.8923L17.9987 16.7384V13.2321C17.9987 12.8179 18.3345 12.4821 18.7487 12.4821C19.1284 12.4821 19.4422 12.7643 19.4918 13.1303L19.4987 13.2321V16.7384C19.4987 18.7407 17.9293 20.3769 15.9528 20.4829L15.7538 20.4884L7.25827 20.5001L7.05495 20.4949C5.14239 20.3954 3.60895 18.8627 3.50837 16.9502L3.50312 16.7511L3.50089 8.2527L3.50529 8.0502C3.60539 6.13749 5.13867 4.60449 7.05096 4.50527L7.2501 4.50017H10.7495H7.2501ZM13.7481 3.00146L20.3018 3.00197L20.4014 3.01575L20.5022 3.04393L20.559 3.06803C20.6122 3.09122 20.6634 3.12163 20.7111 3.15885L20.7804 3.22156L20.8641 3.32014L20.9183 3.41025L20.957 3.50057L20.9762 3.56476L20.9898 3.62862L20.9992 3.72282L20.9997 10.2554C20.9997 10.6696 20.6639 11.0054 20.2497 11.0054C19.87 11.0054 19.5562 10.7232 19.5065 10.3571L19.4997 10.2554L19.4989 5.56147L12.2797 12.7847C12.0134 13.051 11.5968 13.0753 11.3031 12.8575L11.219 12.7849C10.9527 12.5187 10.9284 12.1021 11.1462 11.8084L11.2188 11.7243L18.4369 4.50146H13.7481C13.3684 4.50146 13.0546 4.21931 13.005 3.85324L12.9981 3.75146C12.9981 3.37177 13.2803 3.05797 13.6464 3.00831L13.7481 3.00146Z"
-        fill="currentcolor"
-      />
-    </svg>
-  );
-};
+const OpenInNewWindowIcon = ({ className }: Props) => (
+  <svg
+    className={classNames('webchat__text-content__open-in-new-window-icon', className)}
+    viewBox="3 3 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.2501 4.50017H10.7495C11.1637 4.50017 11.4995 4.83596 11.4995 5.25017C11.4995 5.62986 11.2173 5.94366 10.8513 5.99332L10.7495 6.00017H7.24974C6.07079 5.99961 5.10349 6.90656 5.00786 8.06112L5.00028 8.22003L5.00312 16.7507C5.00343 17.9415 5.92885 18.9161 7.09966 18.9949L7.25371 19.0001L15.7518 18.9884C16.9415 18.9868 17.9145 18.062 17.9935 16.8923L17.9987 16.7384V13.2321C17.9987 12.8179 18.3345 12.4821 18.7487 12.4821C19.1284 12.4821 19.4422 12.7643 19.4918 13.1303L19.4987 13.2321V16.7384C19.4987 18.7407 17.9293 20.3769 15.9528 20.4829L15.7538 20.4884L7.25827 20.5001L7.05495 20.4949C5.14239 20.3954 3.60895 18.8627 3.50837 16.9502L3.50312 16.7511L3.50089 8.2527L3.50529 8.0502C3.60539 6.13749 5.13867 4.60449 7.05096 4.50527L7.2501 4.50017H10.7495H7.2501ZM13.7481 3.00146L20.3018 3.00197L20.4014 3.01575L20.5022 3.04393L20.559 3.06803C20.6122 3.09122 20.6634 3.12163 20.7111 3.15885L20.7804 3.22156L20.8641 3.32014L20.9183 3.41025L20.957 3.50057L20.9762 3.56476L20.9898 3.62862L20.9992 3.72282L20.9997 10.2554C20.9997 10.6696 20.6639 11.0054 20.2497 11.0054C19.87 11.0054 19.5562 10.7232 19.5065 10.3571L19.4997 10.2554L19.4989 5.56147L12.2797 12.7847C12.0134 13.051 11.5968 13.0753 11.3031 12.8575L11.219 12.7849C10.9527 12.5187 10.9284 12.1021 11.1462 11.8084L11.2188 11.7243L18.4369 4.50146H13.7481C13.3684 4.50146 13.0546 4.21931 13.005 3.85324L12.9981 3.75146C12.9981 3.37177 13.2803 3.05797 13.6464 3.00831L13.7481 3.00146Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
 
 export default OpenInNewWindowIcon;

package/src/LinkDefinition/private/extractHostnameWithSubdomain.spec.ts

@@ -1,5 +1,3 @@
-/// <reference types="jest" />
-
 import extractHostnameWithSubdomain from './extractHostnameWithSubdomain';
 
 test.each([

package/src/LinkDefinition/private/extractHostnameWithSubdomain.ts

@@ -9,7 +9,7 @@ export default function extractHostnameWithSubdomain(urlString: string): string
 
       return host;
     }
-  } catch {
+  } catch (error) {
     // Intentionally left blank, will return `urlString`.
   }
 

package/src/LiveRegion/LiveRegionActivity.tsx

@@ -1,16 +1,18 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 
 import { hooks } from 'botframework-webchat-api';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React, { Fragment, useMemo } from 'react';
-import { any, object, pipe, readonly, type InferInput } from 'valibot';
 
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
-import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
 import activityAltText from '../Utils/activityAltText';
 import LiveRegionAttachments from './private/LiveRegionAttachments';
 import LiveRegionSuggestedActions from './private/LiveRegionSuggestedActions';
+import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+
+import type { VFC } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 const { useAvatarForBot, useLocalizer } = hooks;
 
@@ -27,18 +29,11 @@ const ROOT_STYLE = {
   }
 };
 
-const liveRegionActivityPropsSchema = pipe(
-  object({
-    activity: any()
-  }),
-  readonly()
-);
-
-type LiveRegionActivityProps = InferInput<typeof liveRegionActivityPropsSchema>;
-
-function LiveRegionActivity(props: LiveRegionActivityProps) {
-  const { activity } = validateProps(liveRegionActivityPropsSchema, props);
+type LiveRegionActivityProps = {
+  activity: WebChatActivity;
+};
 
+const LiveRegionActivity: VFC<LiveRegionActivityProps> = ({ activity }) => {
   const [{ initials: botInitials }] = useAvatarForBot();
   const {
     from: { role },
@@ -47,7 +42,7 @@ function LiveRegionActivity(props: LiveRegionActivityProps) {
   const fallbackText: string | undefined =
     type === 'message' ? activity.channelData['webchat:fallback-text'] : undefined;
   const localize = useLocalizer();
-  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('accessible name');
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const textAlt = useMemo(() => activityAltText(activity, renderMarkdownAsHTML), [activity, renderMarkdownAsHTML]);
 
@@ -76,7 +71,12 @@ function LiveRegionActivity(props: LiveRegionActivityProps) {
       )}
     </article>
   );
-}
+};
+
+LiveRegionActivity.propTypes = {
+  activity: PropTypes.any.isRequired
+};
 
 export default LiveRegionActivity;
-export { liveRegionActivityPropsSchema, type LiveRegionActivityProps };
+
+export type { LiveRegionActivityProps };

package/src/LiveRegion/private/LiveRegionSuggestedActions.tsx

@@ -1,41 +1,32 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import React, { memo } from 'react';
-import { any, array, object, pipe, readonly, type InferInput } from 'valibot';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import computeSuggestedActionText from '../../Utils/computeSuggestedActionText';
 
-const liveRegionSuggestedActionsPropSchema = pipe(
-  object({
-    suggestedActions: pipe(
-      object({
-        // TODO: Should built `directLineCardActionSchema`.
-        actions: pipe(array(any()), readonly())
-      }),
-      readonly()
-    )
-  }),
-  readonly()
-);
+import type { DirectLineSuggestedAction } from 'botframework-webchat-core';
+import type { VFC } from 'react';
 
-type LiveRegionSuggestedActionsProps = InferInput<typeof liveRegionSuggestedActionsPropSchema>;
+type LiveRegionSuggestedActionsProps = {
+  suggestedActions: DirectLineSuggestedAction;
+};
 
-function LiveRegionSuggestedActions(props: LiveRegionSuggestedActionsProps) {
-  const { suggestedActions } = validateProps(liveRegionSuggestedActionsPropSchema, props);
-
-  return (
-    suggestedActions.actions?.length && (
-      <p className="webchat__live-region-activity__suggested-actions">
-        {suggestedActions.actions.map((action, index) => (
-          // Direct Line schema does not have key other than index.
-          // eslint-disable-next-line react/no-array-index-key
-          <button className="webchat__live-region-activity__suggested-action" key={index} tabIndex={-1} type="button">
-            {computeSuggestedActionText(action)}
-          </button>
-        ))}
-      </p>
-    )
+const LiveRegionSuggestedActions: VFC<LiveRegionSuggestedActionsProps> = ({ suggestedActions }) =>
+  suggestedActions.actions?.length && (
+    <p className="webchat__live-region-activity__suggested-actions">
+      {suggestedActions.actions.map((action, index) => (
+        // Direct Line schema does not have key other than index.
+        // eslint-disable-next-line react/no-array-index-key
+        <button className="webchat__live-region-activity__suggested-action" key={index} tabIndex={-1} type="button">
+          {computeSuggestedActionText(action)}
+        </button>
+      ))}
+    </p>
   );
-}
 
-export default memo(LiveRegionSuggestedActions);
-export { liveRegionSuggestedActionsPropSchema, type LiveRegionSuggestedActionsProps };
+LiveRegionSuggestedActions.propTypes = {
+  suggestedActions: PropTypes.shape({
+    actions: PropTypes.array
+  }).isRequired
+};
+
+export default LiveRegionSuggestedActions;

package/src/Middleware/Activity/createCoreMiddleware.tsx

@@ -0,0 +1,102 @@
+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/ActivityStatus/createTimestampMiddleware.tsx

@@ -20,9 +20,9 @@ export default function createTimestampMiddleware(): ActivityStatusMiddleware {
         // If "hideTimestamp" is set, we will not render the visual timestamp. But continue to render the screen reader only version.
         return <AbsoluteTime hide={true} value={activity.timestamp} />;
       } else if (activity.from.role === 'bot') {
-        return <OthersActivityStatus activity={activity} slotted={true} />;
+        return <OthersActivityStatus activity={activity} />;
       }
 
-      return <SelfActivityStatus activity={activity} slotted={true} />;
+      return <SelfActivityStatus activity={activity} />;
     };
 }

package/src/Middleware/Avatar/createCoreMiddleware.tsx

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,45 @@
+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/ReactWebChat.tsx

@@ -12,10 +12,13 @@ import Composer, { ComposerProps } from './Composer';
 // - They can run hooks outside of activity/attachment middleware
 //   - They will put <Composer> as very top of their page, and allow buttons on their existing page to send message to bot
 
+// Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
+const ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];
+
 type ReactWebChatProps = Readonly<
   Omit<ComposerProps, 'children'> & {
-    className?: string | undefined;
-    role?: string | undefined;
+    className?: string;
+    role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
   }
 >;
 
@@ -39,7 +42,9 @@ const {
 
 ReactWebChat.propTypes = {
   className: PropTypes.string,
-  role: PropTypes.string,
+  // Ignoring deficiencies with TypeScript/PropTypes inference.
+  // @ts-ignore
+  role: PropTypes.oneOf(ARIA_LANDMARK_ROLES),
   ...composerPropTypesWithoutChildren
 };
 

package/src/ScreenReaderText.tsx

@@ -1,10 +1,11 @@
 /* eslint react/forbid-dom-props: ["off"] */
 
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import PropTypes from 'prop-types';
 import React, { forwardRef, memo } from 'react';
 
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
+import type { VFC } from 'react';
+
+import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 
 const ROOT_STYLE = {
   // .sr-only - This component is intended to be invisible to the visual Web Chat user, but read by the AT when using a screen reader
@@ -22,35 +23,41 @@ const ROOT_STYLE = {
   width: 1
 };
 
-const screenReaderTextPropsSchema = pipe(
-  object({
-    'aria-hidden': optional(boolean()),
-    id: optional(string()),
-    text: string()
-  }),
-  readonly()
-);
-
-type ScreenReaderTextProps = InferInput<typeof screenReaderTextPropsSchema>;
+type ScreenReaderTextProps = {
+  'aria-hidden'?: boolean;
+  id?: string;
+  text: string;
+};
 
-// eslint-disable-next-line prefer-arrow-callback
-const ScreenReaderText = forwardRef<HTMLDivElement, ScreenReaderTextProps>(function ScreenReaderText(props, ref) {
-  const { 'aria-hidden': ariaHidden, id, text } = validateProps(screenReaderTextPropsSchema, props);
+const ScreenReaderText: VFC<ScreenReaderTextProps> = forwardRef<HTMLDivElement, ScreenReaderTextProps>(
+  ({ 'aria-hidden': ariaHidden, id, text }, ref) => {
+    const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+    if (ariaHidden && !id) {
+      console.warn(
+        'botframework-webchat assertion: when "aria-hidden" is set, the screen reader text should be read by "aria-labelledby". Thus, "id" must be set.'
+      );
+    }
 
-  if (ariaHidden && !id) {
-    console.warn(
-      'botframework-webchat assertion: when "aria-hidden" is set, the screen reader text should be read by "aria-labelledby". Thus, "id" must be set.'
+    return (
+      <div aria-hidden={ariaHidden} className={rootClassName} id={id} ref={ref}>
+        {text}
+      </div>
     );
   }
+);
+
+ScreenReaderText.defaultProps = {
+  'aria-hidden': undefined,
+  id: undefined
+};
+
+ScreenReaderText.propTypes = {
+  'aria-hidden': PropTypes.bool,
+  id: PropTypes.string,
+  text: PropTypes.string.isRequired
+};
 
-  return (
-    <div aria-hidden={ariaHidden} className={rootClassName} id={id} ref={ref}>
-      {text}
-    </div>
-  );
-});
+ScreenReaderText.displayName = 'ScreenReaderText';
 
 export default memo(ScreenReaderText);
-export { screenReaderTextPropsSchema, type ScreenReaderTextProps };

package/src/SendBox/Assets/MicrophoneIcon.js

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,36 @@
+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;