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

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

@@ -1,60 +1,42 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import classNames from 'classnames';
-import React, { Fragment, memo } from 'react';
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import React, { Fragment } from 'react';
 
-const shieldIconPropsSchema = pipe(
-  object({
-    className: optional(string()),
-    fillColor: optional(string()),
-    hasLock: optional(boolean())
-  }),
-  readonly()
-);
-
-type ShieldIconProps = InferInput<typeof shieldIconPropsSchema>;
+type Props = Readonly<{
+  className?: string;
+  fillColor?: string;
+  hasLock?: boolean;
+}>;
 
-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}
-            />
-          )}
+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 && (
           <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"
+            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}
           />
-        </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.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 && (
           <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"
+            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}
           />
-        </Fragment>
-      )}
-    </svg>
-  );
-}
+        )}
+        <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>
+);
 
-export default memo(ShieldIcon);
-export { shieldIconPropsSchema, type ShieldIconProps };
+export default ShieldIcon;

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/styleToEmotionObject';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import VideoContent from './VideoContent';
 
 const ROOT_STYLE = {

package/src/Attachment/VideoContent.tsx

@@ -1,6 +1,5 @@
-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 PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
 import HTMLVideoContent from './HTMLVideoContent';
 import VimeoContent from './VimeoContent';
@@ -31,22 +30,15 @@ function parseURL(url) {
   return { hostname, pathname, search };
 }
 
-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);
+type VideoContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  poster?: string;
+  src: string;
+};
 
+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);
@@ -67,7 +59,21 @@ function VideoContent(props: VideoContentProps) {
     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 memo(VideoContent);
-export { videoContentPropsSchema, type VideoContentProps };
+export default VideoContent;

package/src/Attachment/VimeoContent.tsx

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

package/src/Attachment/YouTubeContent.tsx

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

package/src/Avatar/ImageAvatar.js

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

@@ -0,0 +1,50 @@
+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/BasicConnectivityStatus.js

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

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/styleToEmotionObject';
+import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 
 const { useDismissNotification, useLocalizer } = hooks;
 

package/src/BasicToaster.js

@@ -3,16 +3,14 @@
 
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, 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 { useLiveRegion } from './providers/LiveRegionTwin';
+import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 
 const { useDebouncedNotifications, useLocalizer, useRenderToast } = hooks;
 
@@ -70,14 +68,13 @@ const TOAST_ACCORDION_IDS = {
   other: 'TOAST_ACCORDION_OTHER'
 };
 
-const BasicToaster = ({ className }) => {
-  const instanceId = useMemo(() => randomId(), []);
+const BasicToaster = () => {
+  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]);
@@ -107,46 +104,13 @@ const BasicToaster = ({ className }) => {
   );
 
   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',
@@ -159,8 +123,7 @@ const BasicToaster = ({ className }) => {
           'webchat__toaster--warn': highestLevel === 'warn'
         },
         rootClassName,
-        toasterStyleSet + '',
-        className
+        toasterStyleSet + ''
       )}
       role="log"
     >
@@ -187,7 +150,7 @@ const BasicToaster = ({ className }) => {
       {(!expandable || expanded) && (
         <div aria-labelledby={headerElementId} className="webchat__toaster__list" id={expandableElementId}>
           {sortedNotificationsWithChildren.map(({ children, notification: { id } }) => (
-            <div className="webchat__toaster__listItem" key={id}>
+            <div aria-atomic={true} className="webchat__toaster__listItem" key={id}>
               {children}
             </div>
           ))}
@@ -197,6 +160,4 @@ const BasicToaster = ({ className }) => {
   );
 };
 
-BasicToaster.displayName = 'BasicToaster';
-
-export default memo(BasicToaster);
+export default BasicToaster;