botframework-webchat-component 4.18.1 → 4.19.0

package/src/Activity/CarouselLayout.js

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

package/src/Activity/CarouselLayout.module.css

@@ -0,0 +1,30 @@
+:global(.webchat) .carousel-layout {
+  overflow: hidden;
+  position: relative;
+
+  :global(.react-film__flipper) {
+    :global(.react-film__flipper__body) {
+      background-color: var(--webchat__background--transcript-overlay-button);
+      color: var(--webchat__color--transcript-overlay-button);
+      outline: 0;
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      :global(.react-film__flipper__body) {
+        background-color: var(--webchat__background--transcript-overlay-button-disabled);
+        color: var(--webchat__color--transcript-overlay-button-disabled);
+      }
+    }
+
+    &:focus :global(.react-film__flipper__body) {
+      background-color: var(--webchat__background--transcript-overlay-button-focus);
+      color: var(--webchat__color--transcript-overlay-button-focus, var(--webchat__color--transcript-overlay-button));
+    }
+
+    &:hover :global(.react-film__flipper__body) {
+      background-color: var(--webchat__background--transcript-overlay-button-hover);
+      color: var(--webchat__color--transcript-overlay-button-hover, var(--webchat__color--transcript-overlay-button));
+    }
+  }
+}

package/src/Activity/CodeBlockContent.module.css

@@ -0,0 +1,40 @@
+:global(.webchat) .code-block-content {
+  border: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble) var(--webchat__border-color--bubble);
+  border-radius: var(--webchat__border-radius--bubble);
+  display: block;
+  font-family: var(--webchat__font--primary);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  margin: 0 calc(var(--webchat__border-width--bubble) * -1) calc(var(--webchat__border-width--bubble) * -1);
+  overflow: hidden;
+  position: relative;
+
+  @supports (overflow: clip) {
+    overflow: clip;
+  }
+}
+
+:global(.webchat) .code-block-content__header {
+  align-items: center;
+  display: flex;
+  gap: var(--webchat__padding--regular);
+  justify-content: space-between;
+  padding: var(--webchat__padding--regular);
+}
+
+:global(.webchat) .code-block-content__title {
+  font-weight: 600;
+
+  &::first-letter {
+    text-transform: uppercase;
+  }
+}
+
+:global(.webchat) .code-block-content .code-block-content__code-block {
+  border: none;
+  margin: 0;
+  max-height: 360px;
+  overflow-y: auto;
+  padding: var(--webchat__padding--regular) 8px var(--webchat__padding--regular) var(--webchat__padding--regular);
+}

package/src/Activity/CodeBlockContent.tsx

@@ -0,0 +1,42 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import useCodeBlockTag from '../providers/CustomElements/useCodeBlockTagName';
+
+import styles from './CodeBlockContent.module.css';
+
+const codeBlockContentPropsSchema = pipe(
+  object({
+    code: string(),
+    language: optional(string()),
+    title: optional(string())
+  }),
+  readonly()
+);
+
+type CodeBlockContentProps = InferInput<typeof codeBlockContentPropsSchema>;
+
+function CodeBlockContent(props: CodeBlockContentProps) {
+  const { code, language, title } = validateProps(codeBlockContentPropsSchema, props);
+  const classNames = useStyles(styles);
+  const [, CodeBlock] = useCodeBlockTag();
+
+  return (
+    <div className={classNames['code-block-content']}>
+      {title && (
+        <div className={cx(classNames['code-block-content__header'])}>
+          <div className={cx(classNames['code-block-content__title'])}>{title}</div>
+        </div>
+      )}
+      <CodeBlock className={cx(classNames['code-block-content__code-block'])} language={language}>
+        <code>{code}</code>
+      </CodeBlock>
+    </div>
+  );
+}
+
+export default memo(CodeBlockContent);
+export { codeBlockContentPropsSchema, type CodeBlockContentProps };

package/src/Activity/CollapsibleContent.module.css

@@ -0,0 +1,43 @@
+:global(.webchat) .collapsible-content {
+  display: grid;
+
+  &[open] .collapsible-content__chevron {
+    transform: rotate(180deg);
+  }
+
+  &[open] .collapsible-content__summary {
+    margin-block-end: 0;
+  }
+}
+
+:global(.webchat) .collapsible-content__summary {
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--webchat__font--primary);
+  gap: calc(var(--webchat__padding--regular) / 2);
+  justify-self: self-start;
+  list-style: none;
+  margin: var(--webchat__padding--regular);
+  padding: 0;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &:focus-visible {
+    outline-offset: 3px;
+  }
+}
+
+:global(.webchat) .collapsible-content__summary-text {
+  flex: auto;
+}
+
+:global(.webchat) .collapsible-content__chevron {
+  transition: transform var(--webchat__transition-duration) var(--webchat__transition-easing);
+}
+
+:global(.webchat) .collapsible-content__content {
+  display: flex;
+  flex-direction: column;
+}

package/src/Activity/CollapsibleContent.tsx

@@ -0,0 +1,68 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import random from 'math-random';
+import React, { memo, ReactEventHandler, useCallback, useRef, useState } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import { ComponentIcon } from '../Icon';
+import styles from './CollapsibleContent.module.css';
+
+const collapsibleContentPropsSchema = pipe(
+  object({
+    children: reactNode(),
+    summary: reactNode(),
+    summaryClassName: optional(string())
+  }),
+  readonly()
+);
+
+type CollapsibleContentProps = InferInput<typeof collapsibleContentPropsSchema>;
+
+function uniqueId(count = Infinity) {
+  return (
+    random()
+      // eslint-disable-next-line no-magic-numbers
+      .toString(36)
+      // eslint-disable-next-line no-magic-numbers
+      .substring(2, 2 + count)
+  );
+}
+
+function CollapsibleContent(props: CollapsibleContentProps) {
+  const { children, summary, summaryClassName } = validateProps(collapsibleContentPropsSchema, props);
+  const [id] = useState(() => `webchat-collapsible-content-${uniqueId()}`);
+  const classNames = useStyles(styles);
+  const summaryRef = useRef<HTMLElement>(null);
+
+  const handleToggle = useCallback<ReactEventHandler<HTMLDetailsElement>>(event => {
+    const summary = summaryRef.current;
+    const details = event.target;
+    if (summary && details && details instanceof HTMLDetailsElement) {
+      const isDetailsOpen = details.open.toString();
+      summary.setAttribute('aria-expanded', isDetailsOpen);
+      summary.setAttribute('aria-pressed', isDetailsOpen);
+    }
+  }, []);
+
+  return (
+    // eslint-disable-next-line react/forbid-dom-props
+    <details className={cx(classNames['collapsible-content'])} id={id} onToggle={handleToggle}>
+      <summary
+        aria-controls={id}
+        aria-expanded="false"
+        aria-pressed="false"
+        className={cx(classNames['collapsible-content__summary'], summaryClassName)}
+        ref={summaryRef}
+        role="button"
+      >
+        {summary && <span className={classNames['collapsible-content__summary-text']}>{summary}</span>}
+        <ComponentIcon appearance="text" className={classNames['collapsible-content__chevron']} icon="chevron" />
+      </summary>
+      <div className={classNames['collapsible-content__content']}>{children}</div>
+    </details>
+  );
+}
+
+export default memo(CollapsibleContent);
+export { collapsibleContentPropsSchema, type CollapsibleContentProps };

package/src/Activity/SayAlt.module.css

@@ -0,0 +1,4 @@
+:global(.webchat) .say-alt {
+  color: Red;
+  margin: 0;
+}

package/src/Activity/SayAlt.tsx

@@ -0,0 +1,25 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import React, { memo } from 'react';
+import { literal, object, pipe, readonly, string, union, type InferInput } from 'valibot';
+
+import styles from './SayAlt.module.css';
+
+const sayAltPropsSchema = pipe(
+  object({
+    speak: union([literal(false), string()])
+  }),
+  readonly()
+);
+
+type SayAltProps = InferInput<typeof sayAltPropsSchema>;
+
+const SayAlt = (props: SayAltProps) => {
+  const { speak } = validateProps(sayAltPropsSchema, props);
+  const classNames = useStyles(styles);
+
+  return !!speak && <pre className={classNames['say-alt']}>{speak}</pre>;
+};
+
+export default memo(SayAlt);
+export { sayAltPropsSchema, type SayAltProps };

package/src/Activity/Speak.tsx

@@ -1,30 +1,76 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-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 { 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 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
 
-type SpeakProps = {
-  activity: WebChatActivity;
-};
+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);
 
-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(activity);
-  }, [activity, markActivityAsSpoken]);
+  const markAsSpoken = useCallback(
+    () => markActivityAsSpoken(activityRef.current as WebChatActivity),
+    [activityRef, markActivityAsSpoken]
+  );
 
   const singleLine: false | string = useMemo(() => {
     if (activity.type !== 'message') {
@@ -36,7 +82,14 @@ const Speak: FC<SpeakProps> = ({ activity }) => {
     return [
       speak || text,
       ...attachments
-        .filter(({ contentType }) => contentType === 'application/vnd.microsoft.card.adaptive')
+        .filter(
+          (
+            attachment
+          ): attachment is {
+            content: { speak?: string };
+            contentType: 'application/vnd.microsoft.card.adaptive';
+          } => attachment.contentType === 'application/vnd.microsoft.card.adaptive' && attachment.content
+        )
         .map(attachment => attachment?.content?.speak)
     ]
       .filter(line => line)
@@ -48,39 +101,28 @@ const Speak: FC<SpeakProps> = ({ activity }) => {
 
   return (
     !!activity && (
-      <React.Fragment>
+      <Fragment>
         {speechSynthesisUtterance ? (
-          <SayUtterance onEnd={markAsSpoken} onError={markAsSpoken} utterance={speechSynthesisUtterance} />
+          <SayUtterance
+            onEnd={markAsSpoken}
+            onError={markAsSpoken}
+            ponyfill={webSpeechPonyfill}
+            utterance={speechSynthesisUtterance}
+          />
         ) : (
-          <Say onEnd={markAsSpoken} onError={markAsSpoken} text={singleLine} voice={selectVoice} />
+          <Say
+            onEnd={markAsSpoken}
+            onError={markAsSpoken}
+            ponyfill={webSpeechPonyfill}
+            text={singleLine}
+            voice={selectVoice}
+          />
         )}
         {!!showSpokenText && <SayAlt speak={singleLine} />}
-      </React.Fragment>
+      </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 };