botframework-webchat-component 4.18.2 → 4.19.0

package/src/Styles/createStyleSet.ts

@@ -1,6 +1,8 @@
 import { normalizeStyleOptions, StyleOptions } from 'botframework-webchat-api';
 
 import createActivitiesStyle from './StyleSet/Activities';
+import createActivityButtonStyle from './StyleSet/ActivityButton';
+import createActivityCopyButtonStyle from './StyleSet/ActivityCopyButton';
 import createAudioAttachmentStyle from './StyleSet/AudioAttachment';
 import createAudioContentStyle from './StyleSet/AudioContent';
 import createAutoResizeTextAreaStyle from './StyleSet/AutoResizeTextArea';
@@ -10,36 +12,34 @@ import createBubbleStyle from './StyleSet/Bubble';
 import createCarouselFilmStrip from './StyleSet/CarouselFilmStrip';
 import createCarouselFilmStripAttachment from './StyleSet/CarouselFilmStripAttachment';
 import createCarouselFlipper from './StyleSet/CarouselFlipper';
+import createChatHistoryBoxStyleSet from './StyleSet/ChatHistoryBox';
 import createCitationModalDialogStyle from './StyleSet/CitationModalDialog';
 import createConnectivityNotification from './StyleSet/ConnectivityNotification';
-import createCSSCustomPropertiesStyle from './StyleSet/CSSCustomProperties';
 import createDictationInterimsStyle from './StyleSet/DictationInterims';
 import createErrorBoxStyle from './StyleSet/ErrorBox';
 import createErrorNotificationStyle from './StyleSet/ErrorNotification';
 import createFileContentStyle from './StyleSet/FileContent';
 import createImageAvatarStyle from './StyleSet/ImageAvatar';
 import createInitialsAvatarStyle from './StyleSet/InitialsAvatar';
-import createKeyboardHelpStyle from './StyleSet/KeyboardHelp';
 import createLinkDefinitionsStyle from './StyleSet/LinkDefinitions';
 import createMicrophoneButtonStyle from './StyleSet/MicrophoneButton';
 import createModalDialogStyle from './StyleSet/ModalDialog';
 import createRenderMarkdownStyle from './StyleSet/RenderMarkdown';
 import createRootStyle from './StyleSet/Root';
 import createScrollToEndButtonStyle from './StyleSet/ScrollToEndButton';
-import createSendBoxButtonStyle from './StyleSet/SendBoxButton';
 import createSendBoxStyle from './StyleSet/SendBox';
+import createSendBoxButtonStyle from './StyleSet/SendBoxButton';
 import createSendBoxTextBoxStyle from './StyleSet/SendBoxTextBox';
 import createSendStatusStyle from './StyleSet/SendStatus';
-import createSingleAttachmentActivityStyle from './StyleSet/SingleAttachmentActivity';
-import createSlottedActivityStatusStyle from './StyleSet/SlottedActivityStatus';
 import createSpinnerAnimationStyle from './StyleSet/SpinnerAnimation';
 import createStackedLayoutStyle from './StyleSet/StackedLayout';
-import createSuggestedActionsStyle from './StyleSet/SuggestedActions';
 import createSuggestedActionStyle from './StyleSet/SuggestedAction';
+import createSuggestedActionsStyle from './StyleSet/SuggestedActions';
 import createTextContentStyle from './StyleSet/TextContent';
 import createThumbButtonStyle from './StyleSet/ThumbButton';
-import createToasterStyle from './StyleSet/Toaster';
 import createToastStyle from './StyleSet/Toast';
+import createToasterStyle from './StyleSet/Toaster';
+import createTooltipStyle from './StyleSet/Tooltip';
 import createTypingAnimationStyle from './StyleSet/TypingAnimation';
 import createTypingIndicatorStyle from './StyleSet/TypingIndicator';
 import createUploadButtonStyle from './StyleSet/UploadButton';
@@ -58,7 +58,9 @@ export default function createStyleSet(styleOptions: StyleOptions) {
 
   return Object.freeze({
     activities: createActivitiesStyle(),
-    audioAttachment: createAudioAttachmentStyle(strictStyleOptions),
+    activityButton: createActivityButtonStyle(),
+    activityCopyButton: createActivityCopyButtonStyle(),
+    audioAttachment: createAudioAttachmentStyle(),
     audioContent: createAudioContentStyle(),
     autoResizeTextArea: createAutoResizeTextAreaStyle(strictStyleOptions),
     avatar: createAvatarStyle(strictStyleOptions),
@@ -72,9 +74,8 @@ export default function createStyleSet(styleOptions: StyleOptions) {
     errorBox: createErrorBoxStyle(strictStyleOptions),
     errorNotification: createErrorNotificationStyle(strictStyleOptions),
     fileContent: createFileContentStyle(strictStyleOptions),
-    imageAvatar: createImageAvatarStyle(strictStyleOptions),
+    imageAvatar: createImageAvatarStyle(),
     initialsAvatar: createInitialsAvatarStyle(strictStyleOptions),
-    keyboardHelp: createKeyboardHelpStyle(strictStyleOptions),
     microphoneButton: createMicrophoneButtonStyle(strictStyleOptions),
     options: { ...strictStyleOptions }, // Cloned to make sure no additional modifications will propagate up.
     root: createRootStyle(strictStyleOptions),
@@ -82,7 +83,6 @@ export default function createStyleSet(styleOptions: StyleOptions) {
     sendBox: createSendBoxStyle(strictStyleOptions),
     sendBoxButton: createSendBoxButtonStyle(strictStyleOptions),
     sendBoxTextBox: createSendBoxTextBoxStyle(strictStyleOptions),
-    singleAttachmentActivity: createSingleAttachmentActivityStyle(strictStyleOptions),
     spinnerAnimation: createSpinnerAnimationStyle(strictStyleOptions),
     stackedLayout: createStackedLayoutStyle(strictStyleOptions),
     suggestedAction: createSuggestedActionStyle(strictStyleOptions),
@@ -100,14 +100,14 @@ export default function createStyleSet(styleOptions: StyleOptions) {
 
     // Following styles follows new house rules:
     // - Use CSS var instead of strictStyleOptions
+    chatHistoryBox: createChatHistoryBoxStyleSet(),
     citationModalDialog: createCitationModalDialogStyle(),
-    cssCustomProperties: createCSSCustomPropertiesStyle(strictStyleOptions),
     linkDefinitions: createLinkDefinitionsStyle(),
     modalDialog: createModalDialogStyle(),
     renderMarkdown: createRenderMarkdownStyle(),
     sendStatus: createSendStatusStyle(),
-    slottedActivityStatus: createSlottedActivityStatusStyle(),
     textContent: createTextContentStyle(),
-    thumbButton: createThumbButtonStyle()
+    thumbButton: createThumbButtonStyle(),
+    tooltip: createTooltipStyle()
   } as const);
 }

package/src/TextArea/TextArea.module.css

@@ -0,0 +1,75 @@
+:global(.webchat) .text-area {
+  display: grid;
+  font-family: var(--webchat__font--primary);
+  grid-template-areas: 'main';
+  max-height: var(--webchat__text-area--max-height, 200px);
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
+:global(.webchat) .text-area--hidden {
+  /* TODO: Not perfect way of hiding the text box. */
+  height: 0;
+  visibility: collapse;
+}
+
+:global(.webchat) .text-area--in-completion {
+  .text-area-doppelganger {
+    visibility: unset;
+  }
+
+  .text-area-input {
+    background-color: transparent;
+    caret-color: var(--webchat__text-area--carret-color, #242424);
+    color: transparent;
+  }
+
+  textarea::placeholder {
+    color: transparent;
+  }
+}
+
+:global(.webchat) .text-area-shared {
+  border: none;
+  font: inherit;
+  grid-area: main;
+  outline: inherit;
+  overflow-wrap: anywhere;
+  resize: inherit;
+}
+
+:global(.webchat) .text-area-doppelganger {
+  overflow: visible;
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+  white-space: pre-wrap;
+}
+
+:global(.webchat) .text-area-input {
+  background-color: inherit;
+  color: currentColor;
+  contain: size;
+  overflow: hidden;
+  padding: 0;
+}
+
+:global(.webchat) .text-area--scroll {
+  scrollbar-color: unset;
+  scrollbar-width: unset;
+  -moz-scrollbar-color: #373435 var(--webchat__color--subtle);
+  -moz-scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--webchat__color--subtle);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: #373435;
+  }
+}

package/src/TextArea/TextArea.tsx

@@ -0,0 +1,126 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { hooks } from 'botframework-webchat-api';
+import cx from 'classnames';
+import React, {
+  forwardRef,
+  Fragment,
+  useCallback,
+  useRef,
+  type FormEventHandler,
+  type KeyboardEventHandler,
+  type MouseEventHandler
+} from 'react';
+import { boolean, custom, number, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import styles from './TextArea.module.css';
+
+const { useUIState } = hooks;
+
+const TextAreaPropsSchema = pipe(
+  object({
+    'aria-describedby': optional(string()),
+    'aria-label': optional(string()),
+    'aria-labelledby': optional(string()),
+    className: optional(string()),
+    completion: optional(reactNode()),
+    'data-testid': optional(string()),
+    /**
+     * `true`, if the text area should be hidden but stay in the DOM, otherwise, `false`.
+     *
+     * Keeping the element in the DOM while making it invisible to users and PWDs is useful in these scenarios:
+     *
+     * - When the DTMF keypad is going away, we need to send focus to the text area before we unmount DTMF keypad,
+     *   This ensures the flow of focus did not sent to document body
+     */
+    hidden: optional(boolean()),
+    onClick: optional(custom<MouseEventHandler<HTMLTextAreaElement>>(value => typeof value === 'function')),
+    onInput: optional(custom<FormEventHandler<HTMLTextAreaElement>>(value => typeof value === 'function')),
+    placeholder: optional(string()),
+    readOnly: optional(boolean()),
+    startRows: optional(number()),
+    value: optional(string())
+  }),
+  readonly()
+);
+
+type TextAreaProps = InferInput<typeof TextAreaPropsSchema>;
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((rawProps, ref) => {
+  const props = validateProps(TextAreaPropsSchema, rawProps);
+
+  const [uiState] = useUIState();
+  const classNames = useStyles(styles);
+  const isInCompositionRef = useRef<boolean>(false);
+
+  const disabled = uiState === 'disabled' || props.readOnly;
+
+  const handleCompositionEnd = useCallback(() => {
+    isInCompositionRef.current = false;
+  }, [isInCompositionRef]);
+
+  const handleCompositionStart = useCallback(() => {
+    isInCompositionRef.current = true;
+  }, [isInCompositionRef]);
+
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(event => {
+    // Shift+Enter adds a new line
+    // Enter requests related form submission
+    if (!event.shiftKey && event.key === 'Enter' && !isInCompositionRef.current) {
+      event.preventDefault();
+
+      if ('form' in event.target && event.target.form instanceof HTMLFormElement) {
+        event.target?.form?.requestSubmit();
+      }
+    }
+  }, []);
+
+  return (
+    <div
+      className={cx(
+        classNames['text-area'],
+        classNames['text-area--scroll'],
+        { [classNames['text-area--hidden']]: props.hidden },
+        { [classNames['text-area--in-completion']]: props.completion },
+        props.className
+      )}
+      role={props.hidden ? 'hidden' : undefined}
+    >
+      {uiState === 'blueprint' ? (
+        <div className={cx(classNames['text-area-doppelganger'], classNames['text-area-shared'])}> </div>
+      ) : (
+        <Fragment>
+          <div className={cx(classNames['text-area-doppelganger'], classNames['text-area-shared'])}>
+            {props.completion || props.value}{' '}
+          </div>
+          <textarea
+            aria-describedby={props['aria-describedby']}
+            aria-disabled={disabled}
+            aria-label={props['aria-label']}
+            aria-labelledby={props['aria-labelledby']}
+            aria-placeholder={props.placeholder}
+            className={cx(classNames['text-area-input'], classNames['text-area-shared'])}
+            data-testid={props['data-testid']}
+            onClick={props.onClick}
+            onCompositionEnd={handleCompositionEnd}
+            onCompositionStart={handleCompositionStart}
+            onInput={props.onInput}
+            onKeyDown={handleKeyDown}
+            placeholder={props.placeholder}
+            readOnly={disabled}
+            ref={ref}
+            rows={props.startRows ?? 1}
+            // eslint-disable-next-line no-magic-numbers
+            tabIndex={props.hidden ? -1 : undefined}
+            value={props.value}
+          />
+        </Fragment>
+      )}
+    </div>
+  );
+});
+
+TextArea.displayName = 'TextArea';
+
+export default TextArea;
+export { TextAreaPropsSchema, type TextAreaProps };

package/src/TextArea/index.ts

@@ -0,0 +1 @@
+export { default as TextArea } from './TextArea';

package/src/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './private/Tooltip';

package/src/Tooltip/private/Tooltip.tsx

@@ -0,0 +1,26 @@
+import cx from 'classnames';
+import React, { memo, type ReactNode } from 'react';
+import { useStyleSet } from '../../hooks';
+
+type TooltipProps = Readonly<{
+  children: ReactNode;
+  className?: string | undefined;
+  position?: 'block-start';
+}>;
+
+function Tooltip({ children, className, position = 'block-start' }: TooltipProps) {
+  const [{ tooltip: tooltipClassName }] = useStyleSet();
+
+  return (
+    <span
+      className={cx('webchat__tooltip', className, tooltipClassName, `webchat__tooltip--${position}`)}
+      /* @ts-expect-error: inert unknown attribute */
+      inert="true"
+      role="tooltip"
+    >
+      {children}
+    </span>
+  );
+}
+
+export default memo(Tooltip);

package/src/Transcript/ActivityRow.tsx

@@ -2,27 +2,35 @@ import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
+import { useRefFrom } from 'use-ref-from';
 
-import { android } from '../Utils/detectBrowser';
-import FocusTrap from './FocusTrap';
-import ScreenReaderText from '../ScreenReaderText';
 import SpeakActivity from '../Activity/Speak';
+import { RestrictedActivityDebugAPI } from '../ActivityDebug';
 import useActiveDescendantId from '../providers/TranscriptFocus/useActiveDescendantId';
-import useActivityAccessibleName from './useActivityAccessibleName';
 import useFocusByActivityKey from '../providers/TranscriptFocus/useFocusByActivityKey';
 import useGetDescendantIdByActivityKey from '../providers/TranscriptFocus/useGetDescendantIdByActivityKey';
+import ScreenReaderText from '../ScreenReaderText';
+import { android } from '../Utils/detectBrowser';
+import FocusTrap from './FocusTrap';
+import {
+  TranscriptFocusContent,
+  TranscriptFocusContentActiveDescendant,
+  TranscriptFocusContentOverlay,
+  TranscriptFocusIndicator
+} from './TranscriptFocus';
+import useActivityAccessibleName from './useActivityAccessibleName';
 
-import type { MouseEventHandler, PropsWithChildren } from 'react';
 import type { WebChatActivity } from 'botframework-webchat-core';
-import { useRefFrom } from 'use-ref-from';
+import type { MouseEventHandler, PropsWithChildren } from 'react';
 
 const { useActivityKeysByRead, useGetHasAcknowledgedByActivityKey, useGetKeyByActivity } = hooks;
 
 type ActivityRowProps = PropsWithChildren<{ activity: WebChatActivity }>;
 
-const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, children }, ref) => {
+const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, children }, ref) => {
   const [activeDescendantId] = useActiveDescendantId();
   const [readActivityKeys] = useActivityKeysByRead();
+  const activityRef = useRefFrom(activity);
   const bodyRef = useRef<HTMLDivElement>();
   const focusByActivityKey = useFocusByActivityKey();
   const getKeyByActivity = useGetKeyByActivity();
@@ -65,48 +73,101 @@ const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, chi
     [bodyRef, children]
   );
 
+  const activityIdRef = useRefFrom(activity.id);
+
+  const handleFormData = useCallback(
+    (event: FormDataEvent & { target: HTMLFormElement }) => {
+      const { webchatIncludeActivityId, webchatIncludeActivityKey } = event.target.dataset;
+      if (webchatIncludeActivityId) {
+        event.formData.set(webchatIncludeActivityId, activityIdRef.current ?? '');
+      }
+      if (webchatIncludeActivityKey) {
+        event.formData.set(webchatIncludeActivityKey, activityKeyRef.current);
+      }
+    },
+
+    [activityKeyRef, activityIdRef]
+  );
+
+  const prevArticleRef = useRef<HTMLElement>(null);
+
+  const restrictedDebugAPI = useMemo(() => new RestrictedActivityDebugAPI(() => activityRef.current), [activityRef]);
+
+  const debugAPI = useMemo(() => restrictedDebugAPI.toPublic(), [restrictedDebugAPI]);
+
+  const wrappedRef = useCallback(
+    (el: HTMLElement | null) => {
+      if (prevArticleRef.current) {
+        prevArticleRef.current.removeEventListener('formdata', handleFormData);
+        prevArticleRef.current['webChat'] = undefined;
+      }
+
+      if (el) {
+        el.addEventListener('formdata', handleFormData);
+        el['webChat'] = debugAPI;
+      }
+
+      prevArticleRef.current = el;
+
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(el);
+        } else {
+          ref.current = el;
+        }
+      }
+    },
+    [debugAPI, handleFormData, ref]
+  );
+
+  restrictedDebugAPI.UNSAFE_callBreakpoint.render();
+
   return (
     // TODO: [P2] Add `aria-roledescription="message"` for better AX, need localization strings.
-    <article
+    /* TODO: [P1] File a crbug for TalkBack. It should not able to read the content twice when scanning. */
+    /* The following <div> is designed for active descendant only.
+        We want to prevent screen reader from scanning the content that is authored only for active descendant.
+        The specific content should only read when user press UP/DOWN arrow keys to change `aria-activedescendant`.
+        However, Android TalkBack 12.1 is buggy when the there is an element with ID of one of the `aria-activedescendant` potential candidates,
+        TalkBack will narrate the message content twice (i.e. content of `bodyRef`), regardless whether the ID is currently set as `aria-activedescendant` or not.
+        As Android does not support active descendant, we are hiding the whole DOM element altogether. */
+    <TranscriptFocusContent
       className={classNames('webchat__basic-transcript__activity', {
         'webchat__basic-transcript__activity--acknowledged': acknowledged,
         'webchat__basic-transcript__activity--read': read
       })}
-      // When NVDA is in browse mode, using up/down arrow key to "browse" will dispatch "click" and "mousedown" events for <article> element (inside <LiveRegionActivity>).
+      focused={isActiveDescendant}
       onMouseDownCapture={handleMouseDownCapture}
-      ref={ref}
+      // When NVDA is in browse mode, using up/down arrow key to "browse" will dispatch "click" and "mousedown" events for <article> element (inside <LiveRegionActivity>).
+      ref={wrappedRef}
+      tag="article"
     >
-      {/* TODO: [P1] File a crbug for TalkBack. It should not able to read the content twice when scanning. */}
-
-      {/* The following <div> is designed for active descendant only.
-          We want to prevent screen reader from scanning the content that is authored only for active descendant.
-          The specific content should only read when user press UP/DOWN arrow keys to change `aria-activedescendant`.
-          However, Android TalkBack 12.1 is buggy when the there is an element with ID of one of the `aria-activedescendant` potential candidates,
-          TalkBack will narrate the message content twice (i.e. content of `bodyRef`), regardless whether the ID is currently set as `aria-activedescendant` or not.
-          As Android does not support active descendant, we are hiding the whole DOM element altogether. */}
-
-      {!android && (
-        <div
-          aria-labelledby={descendantLabelId}
-          className="webchat__basic-transcript__activity-active-descendant"
-          // "id" is required for "aria-labelledby"
-          // eslint-disable-next-line react/forbid-dom-props
-          id={descendantId}
-          role="article"
-        >
-          <ScreenReaderText aria-hidden={true} id={descendantLabelId} text={accessibleName} />
-        </div>
-      )}
-      <FocusTrap onFocus={handleDescendantFocus} onLeave={handleLeaveFocusTrap}>
+      <FocusTrap
+        onFocus={handleDescendantFocus}
+        onLeave={handleLeaveFocusTrap}
+        targetClassName="webchat__basic-transcript__activity-focus-target"
+      >
         {focusTrapChildren}
       </FocusTrap>
-      {shouldSpeak && <SpeakActivity activity={activity} />}
-      <div
-        className={classNames('webchat__basic-transcript__activity-indicator', {
-          'webchat__basic-transcript__activity-indicator--focus': isActiveDescendant
-        })}
-      />
-    </article>
+      {shouldSpeak && (
+        // TODO: Should build `webChatActivitySchema`.
+        <SpeakActivity activity={activity as WebChatActivity & { channelData: { speechSynthesisUtterance?: any } }} />
+      )}
+      <TranscriptFocusContentOverlay>
+        {!android && (
+          <TranscriptFocusContentActiveDescendant
+            aria-labelledby={descendantLabelId}
+            className="webchat__basic-transcript__activity-active-descendant"
+            // "id" is required for "aria-labelledby"
+            id={descendantId}
+            role="article"
+          >
+            <ScreenReaderText aria-hidden={true} id={descendantLabelId} text={accessibleName} />
+          </TranscriptFocusContentActiveDescendant>
+        )}
+        <TranscriptFocusIndicator type="content" />
+      </TranscriptFocusContentOverlay>
+    </TranscriptFocusContent>
   );
 });
 

package/src/Transcript/ActivityTree.tsx

@@ -0,0 +1,35 @@
+import { ActivityGroupingDecorator } from 'botframework-webchat-api/decorator.js';
+import React, { Fragment, memo } from 'react';
+
+import { type GroupedRenderingActivities } from '../providers/GroupedRenderingActivities/GroupedRenderingActivities';
+import useGroupedRenderingActivities from '../providers/GroupedRenderingActivities/useGroupedRenderingActivities';
+
+type ActivityGroupProps = Readonly<{
+  group: GroupedRenderingActivities;
+}>;
+
+const ActivityTreeGroup = memo(({ group }: ActivityGroupProps) => (
+  <ActivityGroupingDecorator activities={group.activities} groupingName={group.groupingName}>
+    {group.children.map(child => (
+      <ActivityTreeGroup group={child} key={child.key} />
+    ))}
+  </ActivityGroupingDecorator>
+));
+
+ActivityTreeGroup.displayName = 'ActivityTreeGroup';
+
+const ActivityTree = () => {
+  const [group] = useGroupedRenderingActivities();
+
+  return (
+    <Fragment>
+      {group.map(child => (
+        <ActivityTreeGroup group={child} key={child.key} />
+      ))}
+    </Fragment>
+  );
+};
+
+ActivityTree.displayName = 'ActivityTree';
+
+export default memo(ActivityTree);