botframework-webchat-component 4.18.0 → 4.18.1-hotfix.20260127.b53acdf

package/src/Attachment/VimeoContent.tsx

@@ -1,19 +1,27 @@
 import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import { validateProps } from 'botframework-webchat-api/internal';
+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 { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import { validateProps } from 'botframework-webchat-api/internal';
+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 'botframework-webchat-api/internal';
+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.js → InitialsAvatar.tsx}

@@ -1,10 +1,11 @@
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
+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';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
 const { useAvatarForBot, useAvatarForUser } = hooks;
 
@@ -17,7 +18,18 @@ const ROOT_STYLE = {
   }
 };
 
-const InitialsAvatar = ({ fromUser }) => {
+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();
@@ -37,14 +49,7 @@ const InitialsAvatar = ({ fromUser }) => {
       <div className="webchat__initialsAvatar__initials">{fromUser ? avatarInitialsForUser : avatarInitialsForBot}</div>
     </div>
   );
-};
-
-InitialsAvatar.defaultProps = {
-  fromUser: false
-};
-
-InitialsAvatar.propTypes = {
-  fromUser: PropTypes.bool
-};
+}
 
-export default InitialsAvatar;
+export default memo(InitialsAvatar);
+export { initialsAvatarPropsSchema, type InitialsAvatarProps };

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;
 
@@ -75,6 +77,7 @@ const BasicToaster = () => {
   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,10 +110,41 @@ const BasicToaster = () => {
     !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',
@@ -150,7 +184,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 +194,6 @@ const BasicToaster = () => {
   );
 };
 
-export default BasicToaster;
+BasicToaster.displayName = 'BasicToaster';
+
+export default memo(BasicToaster);