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

package/src/Activity/CarouselFilmStrip.js

@@ -1,9 +1,8 @@
 /* eslint complexity: ["error", 30] */
 
 import { hooks } from 'botframework-webchat-api';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { useItemContainerCallbackRef, useScrollableCallbackRef } from 'react-film';
-import cx from 'classnames';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -12,10 +11,89 @@ import CarouselFilmStripAttachment from './CarouselFilmStripAttachment';
 import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import ScreenReaderText from '../ScreenReaderText';
 import textFormatToContentType from '../Utils/textFormatToContentType';
+import useStyleSet from '../hooks/useStyleSet';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
-import styles from './CarouselFilmStrip.module.css';
+const { useAvatarForBot, useAvatarForUser, useDirection, useLocalizer, useStyleOptions } = hooks;
 
-const { useAvatarForBot, useAvatarForUser, useLocalizer, useStyleOptions } = hooks;
+const ROOT_STYLE = {
+  '&.webchat__carousel-filmstrip': {
+    display: 'flex',
+    flexDirection: 'column',
+    MsOverflowStyle: 'none',
+    overflowX: 'scroll',
+    overflowY: 'hidden',
+    position: 'relative', // This is to keep screen reader text in the destinated area.
+    touchAction: 'manipulation',
+    WebkitOverflowScrolling: 'touch',
+
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    },
+
+    '& .webchat__carousel-filmstrip__alignment-pad': {
+      flexShrink: 0
+    },
+
+    '& .webchat__carousel-filmstrip-attachment': {
+      flex: 1
+    },
+
+    '& .webchat__carousel-filmstrip__attachments': {
+      display: 'flex',
+      listStyleType: 'none',
+      margin: 0,
+      padding: 0
+    },
+
+    '& .webchat__carousel-filmstrip__avatar': {
+      flexShrink: 0
+    },
+
+    '& .webchat__carousel-filmstrip__avatar-gutter': {
+      display: 'flex',
+      flexDirection: 'column',
+      flexShrink: 0
+    },
+
+    '& .webchat__carousel-filmstrip__complimentary': {
+      display: 'flex'
+    },
+
+    '& .webchat__carousel-filmstrip__complimentary-content': {
+      display: 'flex',
+      flexGrow: 1,
+      flexDirection: 'column'
+    },
+
+    '& .webchat__carousel-filmstrip__content': {
+      display: 'flex',
+      flexGrow: 1,
+      flexDirection: 'column'
+    },
+
+    '& .webchat__carousel-filmstrip__filler': {
+      flexGrow: 10000,
+      flexShrink: 1
+    },
+
+    '& .webchat__carousel-filmstrip__main': {
+      display: 'flex'
+    },
+
+    '& .webchat__carousel-filmstrip__message': {
+      display: 'flex'
+    },
+
+    '& .webchat__carousel-filmstrip__nub-pad': {
+      flexShrink: 0
+    },
+
+    '& .webchat__carousel-filmstrip__status': {
+      display: 'flex'
+    }
+  }
+};
 
 const CarouselFilmStrip = ({
   activity,
@@ -27,11 +105,13 @@ const CarouselFilmStrip = ({
   showCallout
 }) => {
   const [{ bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize }] = useStyleOptions();
+  const [{ carouselFilmStrip: carouselFilmStripStyleSet }] = useStyleSet();
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
+  const [direction] = useDirection();
   const localize = useLocalizer();
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const showActivityStatus = typeof renderActivityStatus === 'function';
-  const classNames = useStyles(styles);
 
   const itemContainerCallbackRef = useItemContainerCallbackRef();
   const scrollableCallbackRef = useScrollableCallbackRef();
@@ -72,32 +152,33 @@ const CarouselFilmStrip = ({
 
   return (
     <div
-      className={cx(
-        classNames['carousel-filmstrip'],
+      className={classNames(
+        'webchat__carousel-filmstrip',
         {
-          [classNames['carousel-filmstrip--extra-trailing']]: extraTrailing,
-          [classNames['carousel-filmstrip--hide-avatar']]: hasAvatar && !showAvatar,
-          [classNames['carousel-filmstrip--hide-nub']]: hideNub,
-          [classNames['carousel-filmstrip--no-message']]: !activityDisplayText,
-          [classNames['carousel-filmstrip--show-avatar']]: showAvatar,
-          [classNames['carousel-filmstrip--show-nub']]: showNub,
-          [classNames['carousel-filmstrip--top-callout']]: topAlignedCallout
+          'webchat__carousel-filmstrip--extra-trailing': extraTrailing,
+          'webchat__carousel-filmstrip--hide-avatar': hasAvatar && !showAvatar,
+          'webchat__carousel-filmstrip--hide-nub': hideNub,
+          'webchat__carousel-filmstrip--no-message': !activityDisplayText,
+          'webchat__carousel-filmstrip--rtl': direction === 'rtl',
+          'webchat__carousel-filmstrip--show-avatar': showAvatar,
+          'webchat__carousel-filmstrip--show-nub': showNub,
+          'webchat__carousel-filmstrip--top-callout': topAlignedCallout
         },
         'react-film__filmstrip',
-        className
+        rootClassName,
+        carouselFilmStripStyleSet + '',
+        (className || '') + ''
       )}
       ref={scrollableCallbackRef}
     >
-      <div className={classNames['carousel-filmstrip__main']}>
-        <div className={classNames['carousel-filmstrip__avatar-gutter']}>
-          {showAvatar && renderAvatar({ activity })}
-        </div>
-        <div className={classNames['carousel-filmstrip__content']}>
+      <div className="webchat__carousel-filmstrip__main">
+        <div className="webchat__carousel-filmstrip__avatar-gutter">{showAvatar && renderAvatar({ activity })}</div>
+        <div className="webchat__carousel-filmstrip__content">
           {!!activityDisplayText && (
-            <div aria-roledescription="message" className={classNames['carousel-filmstrip__message']} role="group">
+            <div aria-roledescription="message" className="webchat__carousel-filmstrip__message" role="group">
               <ScreenReaderText text={greetingAlt} />
               <Bubble
-                className={classNames['carousel-filmstrip__bubble']}
+                className="webchat__carousel-filmstrip__bubble"
                 fromUser={fromUser}
                 nub={showNub || ((hasAvatar || hasNub) && 'hidden')}
               >
@@ -109,14 +190,14 @@ const CarouselFilmStrip = ({
                   }
                 })}
               </Bubble>
-              <div className={classNames['carousel-filmstrip__filler']} />
+              <div className="webchat__carousel-filmstrip__filler" />
             </div>
           )}
-          <div className={classNames['carousel-filmstrip__complimentary']}>
-            <div className={classNames['carousel-filmstrip__nub-pad']} />
-            <div className={classNames['carousel-filmstrip__complimentary-content']}>
+          <div className="webchat__carousel-filmstrip__complimentary">
+            <div className="webchat__carousel-filmstrip__nub-pad" />
+            <div className="webchat__carousel-filmstrip__complimentary-content c">
               <ul
-                className={cx(classNames['carousel-filmstrip__attachments'], 'react-film__filmstrip__list')}
+                className="webchat__carousel-filmstrip__attachments react-film__filmstrip__list"
                 ref={itemContainerCallbackRef}
               >
                 {attachments.map((attachment, index) => (
@@ -139,12 +220,12 @@ const CarouselFilmStrip = ({
             </div>
           </div>
         </div>
-        <div className={classNames['carousel-filmstrip__alignment-pad']} />
+        <div className="webchat__carousel-filmstrip__alignment-pad" />
       </div>
       {showActivityStatus && (
-        <div className={classNames['carousel-filmstrip__status']}>
-          <div className={classNames['carousel-filmstrip__avatar-gutter']} />
-          <div className={classNames['carousel-filmstrip__nub-pad']} />
+        <div className="webchat__carousel-filmstrip__status">
+          <div className="webchat__carousel-filmstrip__avatar-gutter" />
+          <div className="webchat__carousel-filmstrip__nub-pad" />
           {renderActivityStatus({ hideTimestamp })}
         </div>
       )}

package/src/Activity/CarouselFilmStripAttachment.js

@@ -1,15 +1,13 @@
 import { hooks } from 'botframework-webchat-api';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import Bubble from './Bubble';
 import ScreenReaderText from '../ScreenReaderText';
+import useStyleSet from '../hooks/useStyleSet';
 
-import styles from './CarouselFilmStripAttachment.module.css';
-
-const { useLocalizer } = hooks;
+const { useDirection, useLocalizer } = hooks;
 
 const CarouselFilmStripAttachment = ({
   activity,
@@ -23,24 +21,27 @@ const CarouselFilmStripAttachment = ({
   showAvatar,
   showNub
 }) => {
+  const [direction] = useDirection();
   const localize = useLocalizer();
-  const classNames = useStyles(styles);
+  const [{ carouselFilmStripAttachment: carouselFilmStripAttachmentStyleSet }] = useStyleSet();
 
   const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
 
   return (
     <li
       aria-roledescription="attachment"
-      className={cx(
-        classNames['carousel-filmstrip-attachment'],
+      className={classNames(
+        'webchat__carousel-filmstrip-attachment',
         {
-          [classNames['carousel-filmstrip-attachment--hide-avatar']]: hasAvatar && !showAvatar,
-          [classNames['carousel-filmstrip-attachment--hide-nub']]: hideNub,
-          [classNames['carousel-filmstrip-attachment--show-avatar']]: showAvatar,
-          [classNames['carousel-filmstrip-attachment--show-nub']]: showNub
+          'webchat__carousel-filmstrip-attachment--hide-avatar': hasAvatar && !showAvatar,
+          'webchat__carousel-filmstrip-attachment--hide-nub': hideNub,
+          'webchat__carousel-filmstrip-attachment--rtl': direction === 'rtl',
+          'webchat__carousel-filmstrip-attachment--show-avatar': showAvatar,
+          'webchat__carousel-filmstrip-attachment--show-nub': showNub
         },
         'react-film__filmstrip__item',
-        className
+        carouselFilmStripAttachmentStyleSet + '',
+        (className || '') + ''
       )}
       role="listitem"
       tabIndex={0}
@@ -48,7 +49,7 @@ const CarouselFilmStripAttachment = ({
       <ScreenReaderText text={attachedAlt} />
       <Bubble fromUser={fromUser} key={index} nub={false}>
         {renderAttachment({ activity, attachment })}
-        <div className={classNames['carousel-filmstrip-attachment--focus']} />
+        <div className="webchat__carousel-filmstrip-attachment--focus" />
       </Bubble>
     </li>
   );

package/src/Activity/CarouselLayout.js

@@ -1,4 +1,3 @@
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
 import {
   Composer as FilmComposer,
@@ -9,16 +8,23 @@ import {
   useStyleSetClassNames as useReactFilmStyleSetClassNames
 } from 'react-film';
 
-import cx from 'classnames';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { memo, useMemo } from 'react';
 
 import CarouselFilmStrip from './CarouselFilmStrip';
 import useNonce from '../hooks/internal/useNonce';
+import useStyleSet from '../hooks/useStyleSet';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
-import styles from './CarouselLayout.module.css';
+const { useDirection, useLocalizer } = hooks;
 
-const { useDirection, useLocalizer, useStyleOptions } = hooks;
+const ROOT_STYLE = {
+  '&.webchat__carousel-layout': {
+    overflow: 'hidden',
+    position: 'relative'
+  }
+};
 
 const CarouselLayoutCore = ({
   activity,
@@ -28,6 +34,7 @@ const CarouselLayoutCore = ({
   renderAvatar,
   showCallout
 }) => {
+  const [{ carouselFlipper: carouselFlipperStyleSet }] = useStyleSet();
   const [{ root: filmRootClassName }] = useReactFilmStyleSetClassNames();
   const [direction] = useDirection();
   const [scrollBarWidth] = useScrollBarWidth();
@@ -35,7 +42,7 @@ const CarouselLayoutCore = ({
   const leftSideFlipper = direction === 'rtl' ? '>' : '<';
   const localize = useLocalizer();
   const rightSideFlipper = direction === 'rtl' ? '<' : '>';
-  const classNames = useStyles(styles);
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   const nextAlt = localize('CAROUSEL_FLIPPER_NEXT_ALT');
   const previousAlt = localize('CAROUSEL_FLIPPER_PREVIOUS_ALT');
@@ -44,8 +51,10 @@ const CarouselLayoutCore = ({
   const rightFlipperAriaLabel = direction === 'rtl' ? previousAlt : nextAlt;
 
   return (
-    <div className={cx(classNames['carousel-layout'], filmRootClassName)}>
-      <div className={cx('react-film__main', { 'react-film__main--scrolling': scrolling })}>
+    <div
+      className={classNames('webchat__carousel-layout', rootClassName, carouselFlipperStyleSet + '', filmRootClassName)}
+    >
+      <div className={classNames('react-film__main', { 'react-film__main--scrolling': scrolling })}>
         <CarouselFilmStrip
           activity={activity}
           hideTimestamp={hideTimestamp}
@@ -92,17 +101,9 @@ const CarouselLayout = props => {
   const [direction] = useDirection();
   const [nonce] = useNonce();
   const filmStyleSet = useMemo(() => createBasicStyleSetForReactFilm({ cursor: null }), []);
-  const [{ stylesRoot }] = useStyleOptions();
-  const styleOptions = useMemo(() => ({ stylesRoot }), [stylesRoot]);
 
   return (
-    <FilmComposer
-      dir={direction}
-      nonce={nonce}
-      numItems={attachments.length}
-      styleOptions={styleOptions}
-      styleSet={filmStyleSet}
-    >
+    <FilmComposer dir={direction} nonce={nonce} numItems={attachments.length} styleSet={filmStyleSet}>
       <CarouselLayoutCore {...props} />
     </FilmComposer>
   );

package/src/Activity/SayAlt.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+
+// TODO: [P3] Although this is for development purpose, prettify it
+const ROOT_STYLE = {
+  color: 'Red',
+  margin: 0
+};
+
+const SayAlt = ({ speak }) => {
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+  return !!speak && <pre className={rootClassName}>{speak}</pre>;
+};
+
+SayAlt.defaultProps = {
+  speak: ''
+};
+
+SayAlt.propTypes = {
+  speak: PropTypes.string
+};
+
+export default SayAlt;

package/src/Activity/Speak.tsx

@@ -1,76 +1,30 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import { type WebChatActivity } from 'botframework-webchat-core';
-import React, { Fragment, memo, useCallback, useMemo } from 'react';
-import Say, { SayUtterance } from 'react-say';
-import { useRefFrom } from 'use-ref-from';
-import { any, array, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import type { WebChatActivity } from 'botframework-webchat-core';
+import PropTypes from 'prop-types';
+import React, { FC, memo, useCallback, useMemo } from 'react';
+import ReactSay, { SayUtterance } from 'react-say';
 
-import useWebSpeechPonyfill from '../hooks/useWebSpeechPonyfill';
 import SayAlt from './SayAlt';
 
+// TODO: [P1] Interop between Babel and esbuild.
+const Say = 'default' in ReactSay ? ReactSay.default : ReactSay;
 const { useMarkActivityAsSpoken, useStyleOptions, useVoiceSelector } = hooks;
 
 // TODO: [P4] Consider moving this feature into BasicActivity
 //       And it has better DOM position for showing visual spoken text
 
-const speakableActivitySchema = pipe(
-  object({
-    attachments: optional(
-      pipe(
-        array(
-          pipe(
-            object({
-              content: optional(any()),
-              contentType: string(),
-              speak: optional(string()),
-              subtitle: optional(string()),
-              text: optional(string()),
-              title: optional(string())
-            }),
-            readonly()
-          )
-        ),
-        readonly()
-      )
-    ),
-    channelData: optional(
-      pipe(
-        object({
-          speechSynthesisUtterance: optional(any())
-        }),
-        readonly()
-      )
-    ),
-    speak: optional(string()),
-    text: optional(string()),
-    type: string()
-  }),
-  readonly()
-);
-
-const speakPropsSchema = pipe(
-  object({
-    activity: speakableActivitySchema
-  }),
-  readonly()
-);
-
-type SpeakProps = InferInput<typeof speakPropsSchema>;
-
-function Speak(props: SpeakProps) {
-  const { activity } = validateProps(speakPropsSchema, props);
+type SpeakProps = {
+  activity: WebChatActivity;
+};
 
+const Speak: FC<SpeakProps> = ({ activity }) => {
   const [{ showSpokenText }] = useStyleOptions();
-  const [webSpeechPonyfill] = useWebSpeechPonyfill();
-  const activityRef = useRefFrom(activity);
   const markActivityAsSpoken = useMarkActivityAsSpoken();
   const selectVoice = useVoiceSelector(activity);
 
-  const markAsSpoken = useCallback(
-    () => markActivityAsSpoken(activityRef.current as WebChatActivity),
-    [activityRef, markActivityAsSpoken]
-  );
+  const markAsSpoken = useCallback(() => {
+    markActivityAsSpoken(activity);
+  }, [activity, markActivityAsSpoken]);
 
   const singleLine: false | string = useMemo(() => {
     if (activity.type !== 'message') {
@@ -82,14 +36,7 @@ function Speak(props: SpeakProps) {
     return [
       speak || text,
       ...attachments
-        .filter(
-          (
-            attachment
-          ): attachment is {
-            content: { speak?: string };
-            contentType: 'application/vnd.microsoft.card.adaptive';
-          } => attachment.contentType === 'application/vnd.microsoft.card.adaptive' && attachment.content
-        )
+        .filter(({ contentType }) => contentType === 'application/vnd.microsoft.card.adaptive')
         .map(attachment => attachment?.content?.speak)
     ]
       .filter(line => line)
@@ -101,28 +48,39 @@ function Speak(props: SpeakProps) {
 
   return (
     !!activity && (
-      <Fragment>
+      <React.Fragment>
         {speechSynthesisUtterance ? (
-          <SayUtterance
-            onEnd={markAsSpoken}
-            onError={markAsSpoken}
-            ponyfill={webSpeechPonyfill}
-            utterance={speechSynthesisUtterance}
-          />
+          <SayUtterance onEnd={markAsSpoken} onError={markAsSpoken} utterance={speechSynthesisUtterance} />
         ) : (
-          <Say
-            onEnd={markAsSpoken}
-            onError={markAsSpoken}
-            ponyfill={webSpeechPonyfill}
-            text={singleLine}
-            voice={selectVoice}
-          />
+          <Say onEnd={markAsSpoken} onError={markAsSpoken} text={singleLine} voice={selectVoice} />
         )}
         {!!showSpokenText && <SayAlt speak={singleLine} />}
-      </Fragment>
+      </React.Fragment>
     )
   );
-}
+};
+
+Speak.propTypes = {
+  // PropTypes cannot fully capture TypeScript types.
+  // @ts-ignore
+  activity: PropTypes.shape({
+    attachments: PropTypes.arrayOf(
+      PropTypes.shape({
+        speak: PropTypes.string,
+        subtitle: PropTypes.string,
+        text: PropTypes.string,
+        title: PropTypes.string
+      })
+    ),
+    channelData: PropTypes.shape({
+      speechSynthesisUtterance: PropTypes.any
+    }),
+    speak: PropTypes.string,
+    text: PropTypes.string,
+    type: PropTypes.string.isRequired
+  }).isRequired
+};
+
+Speak.displayName = 'SpeakActivity';
 
 export default memo(Speak);
-export { speakPropsSchema, type SpeakProps };