botframework-webchat-component 4.18.1 → 4.19.0

package/src/Attachment/Text/private/ShieldIcon.tsx

@@ -1,42 +1,60 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import classNames from 'classnames';
-import React, { Fragment } from 'react';
+import React, { Fragment, memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
-type Props = Readonly<{
-  className?: string;
-  fillColor?: string;
-  hasLock?: boolean;
-}>;
+const shieldIconPropsSchema = pipe(
+  object({
+    className: optional(string()),
+    fillColor: optional(string()),
+    hasLock: optional(boolean())
+  }),
+  readonly()
+);
+
+type ShieldIconProps = InferInput<typeof shieldIconPropsSchema>;
 
-const ShieldIcon = ({ className, fillColor, hasLock }: Props) => (
-  <svg className={classNames(className)} height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-    {hasLock ? (
-      <Fragment>
-        {fillColor && (
+function ShieldIcon(props: ShieldIconProps) {
+  const { className, fillColor, hasLock } = validateProps(shieldIconPropsSchema, props);
+
+  return (
+    <svg
+      className={classNames(className)}
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {hasLock ? (
+        <Fragment>
+          {fillColor && (
+            <path
+              d="M8.35464 2.14678C8.15946 1.95123 7.84268 1.95105 7.64728 2.14638C6.40416 3.38902 5.02923 4 3.5 4C3.22386 4 3 4.22386 3 4.5V7.50126C3 10.4242 4.35378 12.4971 7 13.6523V10C7 9.06808 7.63739 8.28503 8.5 8.06301V8C8.5 6.34315 9.84315 5 11.5 5C12.0464 5 12.5587 5.14609 13 5.40135V4.5C13 4.22386 12.7761 4 12.5 4C10.9689 4 9.5947 3.38913 8.35464 2.14678ZM9.5 9V8C9.5 6.89543 10.3954 6 11.5 6C12.6046 6 13.5 6.89543 13.5 8V9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H9C8.44771 15 8 14.5523 8 14V10C8 9.44772 8.44772 9 9 9H9.5ZM10.5 8V9H12.5V8C12.5 7.44772 12.0523 7 11.5 7C10.9477 7 10.5 7.44772 10.5 8ZM12.25 12C12.25 11.5858 11.9142 11.25 11.5 11.25C11.0858 11.25 10.75 11.5858 10.75 12C10.75 12.4142 11.0858 12.75 11.5 12.75C11.9142 12.75 12.25 12.4142 12.25 12Z"
+              fill={fillColor}
+            />
+          )}
           <path
-            d="M8.35464 2.14678C8.15946 1.95123 7.84268 1.95105 7.64728 2.14638C6.40416 3.38902 5.02923 4 3.5 4C3.22386 4 3 4.22386 3 4.5V7.50126C3 10.4242 4.35378 12.4971 7 13.6523V10C7 9.06808 7.63739 8.28503 8.5 8.06301V8C8.5 6.34315 9.84315 5 11.5 5C12.0464 5 12.5587 5.14609 13 5.40135V4.5C13 4.22386 12.7761 4 12.5 4C10.9689 4 9.5947 3.38913 8.35464 2.14678ZM9.5 9V8C9.5 6.89543 10.3954 6 11.5 6C12.6046 6 13.5 6.89543 13.5 8V9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H9C8.44771 15 8 14.5523 8 14V10C8 9.44772 8.44772 9 9 9H9.5ZM10.5 8V9H12.5V8C12.5 7.44772 12.0523 7 11.5 7C10.9477 7 10.5 7.44772 10.5 8ZM12.25 12C12.25 11.5858 11.9142 11.25 11.5 11.25C11.0858 11.25 10.75 11.5858 10.75 12C10.75 12.4142 11.0858 12.75 11.5 12.75C11.9142 12.75 12.25 12.4142 12.25 12Z"
-            fill={fillColor}
+            d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V5.40135C12.6963 5.22567 12.359 5.1017 12 5.04148V4.98121C10.5195 4.86895 9.18521 4.25528 8.00042 3.18917C6.81393 4.25491 5.47941 4.86879 4 4.98118V7.50126C4 8.9349 4.36269 10.0655 5.02127 10.9453C5.49089 11.5727 6.14168 12.1134 7 12.5478V13.6523C4.35378 12.4971 3 10.4242 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638ZM9.5 8V9H9C8.44772 9 8 9.44772 8 10V14C8 14.5523 8.44771 15 9 15H14C14.5523 15 15 14.5523 15 14V10C15 9.44772 14.5523 9 14 9H13.5V8C13.5 6.89543 12.6046 6 11.5 6C10.3954 6 9.5 6.89543 9.5 8ZM10.5 9V8C10.5 7.44772 10.9477 7 11.5 7C12.0523 7 12.5 7.44772 12.5 8V9H10.5ZM11.5 11.25C11.9142 11.25 12.25 11.5858 12.25 12C12.25 12.4142 11.9142 12.75 11.5 12.75C11.0858 12.75 10.75 12.4142 10.75 12C10.75 11.5858 11.0858 11.25 11.5 11.25Z"
+            fill="currentcolor"
           />
-        )}
-        <path
-          d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V5.40135C12.6963 5.22567 12.359 5.1017 12 5.04148V4.98121C10.5195 4.86895 9.18521 4.25528 8.00042 3.18917C6.81393 4.25491 5.47941 4.86879 4 4.98118V7.50126C4 8.9349 4.36269 10.0655 5.02127 10.9453C5.49089 11.5727 6.14168 12.1134 7 12.5478V13.6523C4.35378 12.4971 3 10.4242 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638ZM9.5 8V9H9C8.44772 9 8 9.44772 8 10V14C8 14.5523 8.44771 15 9 15H14C14.5523 15 15 14.5523 15 14V10C15 9.44772 14.5523 9 14 9H13.5V8C13.5 6.89543 12.6046 6 11.5 6C10.3954 6 9.5 6.89543 9.5 8ZM10.5 9V8C10.5 7.44772 10.9477 7 11.5 7C12.0523 7 12.5 7.44772 12.5 8V9H10.5ZM11.5 11.25C11.9142 11.25 12.25 11.5858 12.25 12C12.25 12.4142 11.9142 12.75 11.5 12.75C11.0858 12.75 10.75 12.4142 10.75 12C10.75 11.5858 11.0858 11.25 11.5 11.25Z"
-          fill="currentcolor"
-        />
-      </Fragment>
-    ) : (
-      <Fragment>
-        {fillColor && (
+        </Fragment>
+      ) : (
+        <Fragment>
+          {fillColor && (
+            <path
+              d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V7.50126C13 10.7196 11.3587 12.9075 8.15811 13.9743C8.05548 14.0086 7.94452 14.0086 7.84189 13.9743C4.64126 12.9075 3 10.7196 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638Z"
+              fill={fillColor}
+            />
+          )}
           <path
-            d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V7.50126C13 10.7196 11.3587 12.9075 8.15811 13.9743C8.05548 14.0086 7.94452 14.0086 7.84189 13.9743C4.64126 12.9075 3 10.7196 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638Z"
-            fill={fillColor}
+            d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V7.50126C13 10.7196 11.3587 12.9075 8.15811 13.9743C8.05548 14.0086 7.94452 14.0086 7.84189 13.9743C4.64126 12.9075 3 10.7196 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638ZM8.00042 3.18917C6.81393 4.25491 5.47941 4.86879 4 4.98118V7.50126C4 8.9349 4.36269 10.0655 5.02127 10.9453C5.65858 11.7967 6.62953 12.4885 8 12.9715C9.37047 12.4885 10.3414 11.7967 10.9787 10.9453C11.6373 10.0655 12 8.9349 12 7.50126V4.98121C10.5195 4.86895 9.18521 4.25528 8.00042 3.18917Z"
+            fill="currentcolor"
           />
-        )}
-        <path
-          d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V7.50126C13 10.7196 11.3587 12.9075 8.15811 13.9743C8.05548 14.0086 7.94452 14.0086 7.84189 13.9743C4.64126 12.9075 3 10.7196 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638ZM8.00042 3.18917C6.81393 4.25491 5.47941 4.86879 4 4.98118V7.50126C4 8.9349 4.36269 10.0655 5.02127 10.9453C5.65858 11.7967 6.62953 12.4885 8 12.9715C9.37047 12.4885 10.3414 11.7967 10.9787 10.9453C11.6373 10.0655 12 8.9349 12 7.50126V4.98121C10.5195 4.86895 9.18521 4.25528 8.00042 3.18917Z"
-          fill="currentcolor"
-        />
-      </Fragment>
-    )}
-  </svg>
-);
+        </Fragment>
+      )}
+    </svg>
+  );
+}
 
-export default ShieldIcon;
+export default memo(ShieldIcon);
+export { shieldIconPropsSchema, type ShieldIconProps };

package/src/Attachment/Text/private/ViewCodeDialog.module.css

@@ -0,0 +1,59 @@
+:global(.webchat) .view-code-dialog {
+  box-sizing: border-box;
+  display: grid;
+  height: 100%;
+  max-height: 100vh;
+  overflow: hidden;
+  padding: 1rem;
+  place-items: center;
+}
+
+:global(.webchat) .view-code-dialog :global(.webchat__modal-dialog__box) {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+  position: relative;
+}
+
+:global(.webchat) .view-code-dialog :global(.webchat__modal-dialog__close-button-layout) {
+  position: absolute;
+  right: 0;
+}
+
+:global(.webchat) .view-code-dialog :global(.webchat__modal-dialog__body) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--webchat__padding--regular);
+  overflow: hidden;
+}
+
+:global(.webchat) .view-code-dialog__header {
+  align-items: center;
+  display: flex;
+  padding-inline-end: 30px;
+}
+
+:global(.webchat) .view-code-dialog__title {
+  margin: 0 auto 0 0;
+  text-transform: capitalize;
+}
+
+:global(.webchat) .view-code-dialog .view-code-dialog__body {
+  border: none;
+  border-radius: 0;
+  overflow: auto;
+  height: 100%;
+}
+
+:global(.webchat) .view-code-dialog :global(.code-block__body) {
+  display: block;
+  /* TODO: align with the rest of code blocks */
+  line-height: normal;
+  padding: 16px 0;
+}
+
+:global(.webchat) .view-code-dialog__footer {
+  color: var(--webchat__color--subtle);
+  line-height: 20px;
+}

package/src/Attachment/Text/private/isAIGeneratedActivity.ts

@@ -0,0 +1,5 @@
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+
+export default function isAIGeneratedActivity(activity: undefined | WebChatActivity) {
+  return !!(activity && getOrgSchemaMessage(activity?.entities || [])?.keywords.includes('AIGeneratedContent'));
+}

package/src/Attachment/VideoAttachment.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import VideoContent from './VideoContent';
 
 const ROOT_STYLE = {

package/src/Attachment/VideoContent.tsx

@@ -1,5 +1,6 @@
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import HTMLVideoContent from './HTMLVideoContent';
 import VimeoContent from './VimeoContent';
@@ -30,15 +31,22 @@ function parseURL(url) {
   return { hostname, pathname, search };
 }
 
-type VideoContentProps = {
-  alt?: string;
-  autoPlay?: boolean;
-  loop?: boolean;
-  poster?: string;
-  src: string;
-};
+const videoContentPropsSchema = pipe(
+  object({
+    alt: optional(string()),
+    autoPlay: optional(boolean()),
+    loop: optional(boolean()),
+    poster: optional(string()),
+    src: string()
+  }),
+  readonly()
+);
+
+type VideoContentProps = InferInput<typeof videoContentPropsSchema>;
+
+function VideoContent(props: VideoContentProps) {
+  const { alt, autoPlay = false, loop = false, poster, src } = validateProps(videoContentPropsSchema, props);
 
-const VideoContent: FC<VideoContentProps> = ({ alt, autoPlay, loop, poster, src }) => {
   const { hostname, pathname, search } = parseURL(src);
   const lastSegment = pathname.split('/').pop();
   const searchParams = new URLSearchParams(search);
@@ -59,21 +67,7 @@ const VideoContent: FC<VideoContentProps> = ({ alt, autoPlay, loop, poster, src
     default:
       return <HTMLVideoContent alt={alt} autoPlay={autoPlay} loop={loop} poster={poster} src={src} />;
   }
-};
-
-VideoContent.defaultProps = {
-  alt: '',
-  autoPlay: false,
-  loop: false,
-  poster: ''
-};
-
-VideoContent.propTypes = {
-  alt: PropTypes.string,
-  autoPlay: PropTypes.bool,
-  loop: PropTypes.bool,
-  poster: PropTypes.string,
-  src: PropTypes.string.isRequired
-};
+}
 
-export default VideoContent;
+export default memo(VideoContent);
+export { videoContentPropsSchema, type VideoContentProps };

package/src/Attachment/VimeoContent.tsx

@@ -1,19 +1,27 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import useStyleSet from '../hooks/useStyleSet';
 
 const { useLocalizer } = hooks;
 
-type VimeoContentProps = {
-  alt?: string;
-  autoPlay?: boolean;
-  embedID: string;
-  loop?: boolean;
-};
+const vimeoContentPropsSchema = pipe(
+  object({
+    alt: optional(string()),
+    autoPlay: optional(boolean()),
+    embedID: string(),
+    loop: optional(boolean())
+  }),
+  readonly()
+);
+
+type VimeoContentProps = InferInput<typeof vimeoContentPropsSchema>;
+
+function VimeoContent(props: VimeoContentProps) {
+  const { alt, autoPlay = false, embedID, loop = false } = validateProps(vimeoContentPropsSchema, props);
 
-const VimeoContent: FC<VimeoContentProps> = ({ alt, autoPlay, embedID, loop }) => {
   const [{ vimeoContent: vimeoContentStyleSet }] = useStyleSet();
   const localize = useLocalizer();
 
@@ -37,19 +45,7 @@ const VimeoContent: FC<VimeoContentProps> = ({ alt, autoPlay, embedID, loop }) =
       title={title}
     />
   );
-};
-
-VimeoContent.defaultProps = {
-  alt: '',
-  autoPlay: false,
-  loop: false
-};
-
-VimeoContent.propTypes = {
-  alt: PropTypes.string,
-  autoPlay: PropTypes.bool,
-  embedID: PropTypes.string.isRequired,
-  loop: PropTypes.bool
-};
-
-export default VimeoContent;
+}
+
+export default memo(VimeoContent);
+export { vimeoContentPropsSchema, type VimeoContentProps };

package/src/Attachment/YouTubeContent.tsx

@@ -1,19 +1,27 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import useStyleSet from '../hooks/useStyleSet';
 
 const { useLocalizer } = hooks;
 
-type YouTubeContentProps = {
-  alt?: string;
-  autoPlay?: boolean;
-  embedID: string;
-  loop?: boolean;
-};
+const youTubeContentPropsSchema = pipe(
+  object({
+    alt: optional(string()),
+    autoPlay: optional(boolean()),
+    embedID: string(),
+    loop: optional(boolean())
+  }),
+  readonly()
+);
+
+type YouTubeContentProps = InferInput<typeof youTubeContentPropsSchema>;
+
+function YouTubeContent(props: YouTubeContentProps) {
+  const { alt, autoPlay = false, embedID, loop = false } = validateProps(youTubeContentPropsSchema, props);
 
-const YouTubeContent: FC<YouTubeContentProps> = ({ alt, autoPlay, embedID, loop }) => {
   const [{ youTubeContent: youTubeContentStyleSet }] = useStyleSet();
   const localize = useLocalizer();
 
@@ -35,19 +43,7 @@ const YouTubeContent: FC<YouTubeContentProps> = ({ alt, autoPlay, embedID, loop
       title={title}
     />
   );
-};
-
-YouTubeContent.defaultProps = {
-  alt: '',
-  autoPlay: false,
-  loop: false
-};
-
-YouTubeContent.propTypes = {
-  alt: PropTypes.string,
-  autoPlay: PropTypes.bool,
-  embedID: PropTypes.string.isRequired,
-  loop: PropTypes.bool
-};
-
-export default YouTubeContent;
+}
+
+export default memo(YouTubeContent);
+export { youTubeContentPropsSchema, type YouTubeContentProps };

package/src/Avatar/ImageAvatar.tsx

@@ -0,0 +1,48 @@
+import { hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+import { boolean, object, pipe, readonly, type InferInput } from 'valibot';
+
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import useStyleSet from '../hooks/useStyleSet';
+
+const { useAvatarForBot, useAvatarForUser } = hooks;
+
+const ROOT_STYLE = {
+  '& .webchat__imageAvatar__image': {
+    width: '100%',
+    height: 'auto'
+  }
+};
+
+const imageAvatarPropsSchema = pipe(
+  object({
+    fromUser: boolean()
+  }),
+  readonly()
+);
+
+type ImageAvatarProps = InferInput<typeof imageAvatarPropsSchema>;
+
+const ImageAvatar = (props: ImageAvatarProps) => {
+  const { fromUser } = validateProps(imageAvatarPropsSchema, props);
+
+  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 + '')}>
+        <img alt="" className="webchat__imageAvatar__image" src={fromUser ? avatarImageForUser : avatarImageForBot} />
+      </div>
+    )
+  );
+};
+
+export default memo(ImageAvatar);
+export { imageAvatarPropsSchema, type ImageAvatarProps };

package/src/Avatar/InitialsAvatar.tsx

@@ -0,0 +1,55 @@
+import { hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import useStyleSet from '../hooks/useStyleSet';
+
+const { useAvatarForBot, useAvatarForUser } = hooks;
+
+const ROOT_STYLE = {
+  alignItems: 'center',
+  display: 'flex',
+
+  '& .webchat__initialsAvatar__initials': {
+    justifyContent: 'center'
+  }
+};
+
+const initialsAvatarPropsSchema = pipe(
+  object({
+    fromUser: optional(boolean())
+  }),
+  readonly()
+);
+
+type InitialsAvatarProps = InferInput<typeof initialsAvatarPropsSchema>;
+
+function InitialsAvatar(props: InitialsAvatarProps) {
+  const { fromUser = false } = validateProps(initialsAvatarPropsSchema, props);
+
+  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>
+  );
+}
+
+export default memo(InitialsAvatar);
+export { initialsAvatarPropsSchema, type InitialsAvatarProps };

package/src/BasicConnectivityStatus.js

@@ -8,29 +8,29 @@ import ConnectivityStatusJavaScriptError from './ConnectivityStatus/JavaScriptEr
 
 const { useDebouncedNotifications } = hooks;
 
-const BasicConnectivityStatus = () => {
+const BasicConnectivityStatus = ({ className }) => {
   const [{ connectivitystatus: connectivityStatus }] = useDebouncedNotifications();
 
   if (!connectivityStatus) {
-    return false;
+    return null;
   }
 
   switch (connectivityStatus.message) {
     case 'connecting':
-      return <ConnectivityStatusConnecting />;
+      return <ConnectivityStatusConnecting className={className} />;
 
     case 'javascripterror':
-      return <ConnectivityStatusJavaScriptError />;
+      return <ConnectivityStatusJavaScriptError className={className} />;
 
     case 'failedtoconnect':
-      return <ConnectivityStatusFailedToConnect />;
+      return <ConnectivityStatusFailedToConnect className={className} />;
 
     case 'reconnecting':
-      return <ConnectivityStatusConnecting reconnect={true} />;
+      return <ConnectivityStatusConnecting className={className} reconnect={true} />;
 
     case 'connected':
     default:
-      return <ConnectivityStatusConnected />;
+      return <ConnectivityStatusConnected className={className} />;
   }
 };
 

package/src/BasicToast.js

@@ -12,7 +12,7 @@ import randomId from './Utils/randomId';
 import ScreenReaderText from './ScreenReaderText';
 import useInternalRenderMarkdownInline from './hooks/internal/useInternalRenderMarkdownInline';
 import useStyleSet from './hooks/useStyleSet';
-import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 
 const { useDismissNotification, useLocalizer } = hooks;
 

package/src/BasicToaster.js

@@ -3,14 +3,16 @@
 
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import CollapseIcon from './Toast/CollapseIcon';
 import ExpandIcon from './Toast/ExpandIcon';
 import NotificationIcon from './Toast/NotificationIcon';
 import randomId from './Utils/randomId';
+import useInternalRenderMarkdownInline from './hooks/internal/useInternalRenderMarkdownInline';
+import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 import useStyleSet from './hooks/useStyleSet';
-import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
+import { useLiveRegion } from './providers/LiveRegionTwin';
 
 const { useDebouncedNotifications, useLocalizer, useRenderToast } = hooks;
 
@@ -68,13 +70,14 @@ const TOAST_ACCORDION_IDS = {
   other: 'TOAST_ACCORDION_OTHER'
 };
 
-const BasicToaster = () => {
-  const instanceId = useMemo(randomId, []);
+const BasicToaster = ({ className }) => {
+  const instanceId = useMemo(() => randomId(), []);
   const [{ toaster: toasterStyleSet }] = useStyleSet();
   const [debouncedNotifications] = useDebouncedNotifications();
   const [expanded, setExpanded] = useState(false);
   const localizeWithPlural = useLocalizer({ plural: true });
   const renderToast = useRenderToast();
+  const renderMarkdownInline = useInternalRenderMarkdownInline();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   const handleToggleExpand = useCallback(() => setExpanded(!expanded), [expanded, setExpanded]);
@@ -104,13 +107,46 @@ const BasicToaster = () => {
   );
 
   useEffect(() => {
+    // TODO: [P2] Intentionally set error, we will visit it later.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     !expandable && setExpanded(false);
   }, [expandable]);
 
+  const notifiedElements = useRef(new Set());
+
+  useLiveRegion(() => {
+    const toAnnounce = [];
+
+    for (const notification of sortedNotifications.slice().reverse()) {
+      if (!notifiedElements.current.has(notification.id)) {
+        notifiedElements.current.add(notification.id);
+
+        toAnnounce.push(
+          notification.alt ? (
+            <div aria-atomic={true} className="webchat__toaster__notifications" key={notification.id}>
+              {notification.alt}
+            </div>
+          ) : (
+            <div
+              aria-atomic={true}
+              className="webchat__toaster__notifications"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{
+                __html: renderMarkdownInline(notification.message ?? '')
+              }}
+              key={notification.id}
+            />
+          )
+        );
+      }
+    }
+
+    return toAnnounce.length > 0 && <Fragment>{toAnnounce}</Fragment>;
+  }, [renderMarkdownInline, sortedNotifications]);
+
   return (
     <div
       aria-labelledby={headerElementId}
-      aria-live="polite"
       aria-relevant="all"
       className={classNames(
         'webchat__toaster',
@@ -123,7 +159,8 @@ const BasicToaster = () => {
           'webchat__toaster--warn': highestLevel === 'warn'
         },
         rootClassName,
-        toasterStyleSet + ''
+        toasterStyleSet + '',
+        className
       )}
       role="log"
     >
@@ -150,7 +187,7 @@ const BasicToaster = () => {
       {(!expandable || expanded) && (
         <div aria-labelledby={headerElementId} className="webchat__toaster__list" id={expandableElementId}>
           {sortedNotificationsWithChildren.map(({ children, notification: { id } }) => (
-            <div aria-atomic={true} className="webchat__toaster__listItem" key={id}>
+            <div className="webchat__toaster__listItem" key={id}>
               {children}
             </div>
           ))}
@@ -160,4 +197,6 @@ const BasicToaster = () => {
   );
 };
 
-export default BasicToaster;
+BasicToaster.displayName = 'BasicToaster';
+
+export default memo(BasicToaster);