botframework-webchat-fluent-theme 4.17.0-main.20240411.647b269 → 4.17.0-main.20240411.ff34969

package/src/components/sendbox/index.tsx

@@ -0,0 +1,234 @@
+import { hooks } from 'botframework-webchat-component';
+import cx from 'classnames';
+import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { SendIcon } from '../../icons/SendIcon';
+import { useStyles } from '../../styles';
+import testIds from '../../testIds';
+import DropZone from '../DropZone';
+import SuggestedActions from '../SuggestedActions';
+import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '../TelephoneKeypad';
+import AddAttachmentButton from './AddAttachmentButton';
+import Attachments from './Attachments';
+import ErrorMessage from './ErrorMessage';
+import TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';
+import TextArea from './TextArea';
+import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
+import useSubmitError from './private/useSubmitError';
+import useUniqueId from './private/useUniqueId';
+
+const { useStyleOptions, useMakeThumbnail, useLocalizer, useSendBoxAttachments, useSendMessage } = hooks;
+
+const styles = {
+  'webchat-fluent__sendbox': {
+    color: 'var(--webchat-colorNeutralForeground1)',
+    fontFamily: 'var(--webchat-fontFamilyBase)',
+    padding: '0 10px 10px',
+    textRendering: 'optimizeLegibility'
+  },
+
+  'webchat-fluent__sendbox__sendbox': {
+    backgroundColor: 'var(--webchat-colorNeutralBackground1)',
+    border: '1px solid var(--webchat-colorNeutralStroke1)',
+    borderRadius: 'var(--webchat-borderRadiusLarge)',
+    display: 'grid',
+    fontFamily: 'var(--webchat-fontFamilyBase)',
+    fontSize: '14px',
+    gap: '6px',
+    lineHeight: '20px',
+    padding: '8px',
+    position: 'relative',
+
+    '&:focus-within': {
+      borderColor: 'var(--webchat-colorNeutralStroke1Selected)',
+      // TODO clarify with design the color:
+      // - Teams is using colorCompoundBrandForeground1
+      // - Fluent is using colorCompoundBrandStroke
+      // - we are using colorCompoundBrandForeground1Hover
+      boxShadow: 'inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover)'
+    }
+  },
+
+  'webchat-fluent__sendbox__sendbox-text': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    flex: 'auto',
+    fontFamily: 'var(--webchat-fontFamilyBase)',
+    fontSize: '14px',
+    lineHeight: '20px',
+    outline: 'none',
+    padding: '4px 4px 0',
+    resize: 'none'
+  },
+
+  'webchat-fluent__sendbox__sendbox-controls': {
+    alignItems: 'center',
+    display: 'flex',
+    paddingInlineStart: '4px'
+  },
+
+  'webchat-fluent__sendbox__text-counter': {
+    color: 'var(--webchat-colorNeutralForeground4)',
+    cursor: 'default',
+    fontFamily: 'var(--webchat-fontFamilyNumeric)',
+    fontSize: '10px',
+    lineHeight: '14px'
+  },
+
+  'webchat-fluent__sendbox__text-counter--error': {
+    color: 'var(--webchat-colorStatusDangerForeground1)'
+  }
+};
+
+function SendBox(
+  props: Readonly<{
+    className?: string | undefined;
+    placeholder?: string | undefined;
+  }>
+) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [message, setMessage] = useState('');
+  const [attachments, setAttachments] = useSendBoxAttachments();
+  const [{ maxMessageLength }] = useStyleOptions();
+  const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
+  const classNames = useStyles(styles);
+  const localize = useLocalizer();
+  const sendMessage = useSendMessage();
+  const makeThumbnail = useMakeThumbnail();
+  const errorMessageId = useUniqueId('webchat-fluent__sendbox__error-message-id');
+  const [errorRef, errorMessage] = useSubmitError({ message, attachments });
+  const [telephoneKeypadShown, setTelephoneKeypadShown] = useTelephoneKeypadShown();
+
+  const attachmentsRef = useRefFrom(attachments);
+  const messageRef = useRefFrom(message);
+
+  const handleSendBoxClick = useCallback<MouseEventHandler>(
+    event => {
+      if ('tabIndex' in event.target && typeof event.target.tabIndex === 'number' && event.target.tabIndex >= 0) {
+        return;
+      }
+
+      // TODO: Should call `useFocus('sendBox')`.
+      inputRef.current?.focus();
+    },
+    [inputRef]
+  );
+
+  const handleMessageChange: React.FormEventHandler<HTMLTextAreaElement> = useCallback(
+    event => setMessage(event.currentTarget.value),
+    [setMessage]
+  );
+
+  const handleAddFiles = useCallback(
+    async (inputFiles: File[]) => {
+      const newAttachments = Object.freeze(
+        await Promise.all(
+          inputFiles.map(file =>
+            makeThumbnail(file).then(thumbnailURL =>
+              Object.freeze({
+                blob: file,
+                ...(thumbnailURL && { thumbnailURL })
+              })
+            )
+          )
+        )
+      );
+
+      setAttachments(newAttachments);
+
+      // TODO: Currently in the UX, we have no way to remove attachments.
+      //       Keep concatenating doesn't make sense in current UX.
+      //       When end-user can remove attachment, we should enable the code again.
+      // setAttachments(attachments => attachments.concat(newAttachments));
+    },
+    [makeThumbnail, setAttachments]
+  );
+
+  const handleFormSubmit: FormEventHandler<HTMLFormElement> = useCallback(
+    event => {
+      event.preventDefault();
+
+      if (errorRef.current !== 'empty' && !isMessageLengthExceeded) {
+        sendMessage(messageRef.current, undefined, { attachments: attachmentsRef.current });
+
+        setMessage('');
+        setAttachments([]);
+      }
+
+      // TODO: Should call `useFocus('sendBox')`.
+      inputRef.current?.focus();
+    },
+    [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
+  );
+
+  const handleTelephoneKeypadButtonClick = useCallback(
+    (dtmf: DTMF) => {
+      // TODO: We need more official way of sending DTMF.
+      sendMessage(`/DTMF ${dtmf}`);
+
+      // TODO: In the future when we work on input modality, it should manage the focus in a better way.
+      setTelephoneKeypadShown(false);
+    },
+    [sendMessage, setTelephoneKeypadShown]
+  );
+
+  const aria = {
+    'aria-invalid': 'false' as const,
+    ...(errorMessage && {
+      'aria-invalid': 'true' as const,
+      'aria-errormessage': errorMessageId
+    })
+  };
+
+  return (
+    <form {...aria} className={cx(classNames['webchat-fluent__sendbox'], props.className)} onSubmit={handleFormSubmit}>
+      <SuggestedActions />
+      <div className={cx(classNames['webchat-fluent__sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
+        <TelephoneKeypadSurrogate
+          autoFocus={true}
+          isHorizontal={false}
+          onButtonClick={handleTelephoneKeypadButtonClick}
+        />
+        <TextArea
+          aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
+          className={classNames['webchat-fluent__sendbox__sendbox-text']}
+          data-testid={testIds.sendBoxTextBox}
+          hidden={telephoneKeypadShown}
+          onInput={handleMessageChange}
+          placeholder={props.placeholder ?? localize('TEXT_INPUT_PLACEHOLDER')}
+          ref={inputRef}
+          value={message}
+        />
+        <Attachments attachments={attachments} />
+        <div className={cx(classNames['webchat-fluent__sendbox__sendbox-controls'])}>
+          {maxMessageLength && (
+            <div
+              className={cx(classNames['webchat-fluent__sendbox__text-counter'], {
+                [classNames['webchat-fluent__sendbox__text-counter--error']]: isMessageLengthExceeded
+              })}
+            >
+              {`${message.length}/${maxMessageLength}`}
+            </div>
+          )}
+          <Toolbar>
+            <TelephoneKeypadToolbarButton />
+            <AddAttachmentButton onFilesAdded={handleAddFiles} />
+            <ToolbarSeparator />
+            <ToolbarButton
+              aria-label={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
+              data-testid={testIds.sendBoxSendButton}
+              disabled={isMessageLengthExceeded}
+              type="submit"
+            >
+              <SendIcon />
+            </ToolbarButton>
+          </Toolbar>
+        </div>
+        <DropZone onFilesAdded={handleAddFiles} />
+        <ErrorMessage error={errorMessage} id={errorMessageId} />
+      </div>
+    </form>
+  );
+}
+
+export default memo(SendBox);

package/src/components/sendbox/private/useSubmitError.ts

@@ -0,0 +1,46 @@
+import { hooks } from 'botframework-webchat-component';
+import { RefObject, useMemo } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+const { useConnectivityStatus, useLocalizer } = hooks;
+
+type ErrorMessageStringMap = ReadonlyMap<SendError, string>;
+
+type SendError = 'empty' | 'offline';
+
+const useSubmitError = ({
+  attachments,
+  message
+}: Readonly<{
+  attachments: readonly Readonly<{ blob: Blob | File; thumbnailURL?: URL | undefined }>[];
+  message: string;
+}>) => {
+  const [connectivityStatus] = useConnectivityStatus();
+  const localize = useLocalizer();
+
+  const submitErrorRef = useRefFrom<'empty' | 'offline' | undefined>(
+    connectivityStatus !== 'connected' && connectivityStatus !== 'reconnected'
+      ? 'offline'
+      : !message && !attachments.length
+        ? 'empty'
+        : undefined
+  );
+
+  const errorMessageStringMap = useMemo<ErrorMessageStringMap>(
+    () =>
+      Object.freeze(
+        new Map<SendError, string>()
+          .set('empty', localize('SEND_BOX_IS_EMPTY_TOOLTIP_ALT'))
+          // TODO: [P0] We should add a new string for "Cannot send message while offline."
+          .set('offline', localize('CONNECTIVITY_STATUS_ALT_FATAL'))
+      ),
+    [localize]
+  );
+
+  return useMemo<Readonly<[RefObject<SendError | undefined>, string | undefined]>>(
+    () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),
+    [errorMessageStringMap, submitErrorRef]
+  );
+};
+
+export default useSubmitError;

package/src/components/sendbox/private/useUniqueId.ts

@@ -0,0 +1,13 @@
+/* eslint no-magic-numbers: ["error", { "ignore": [2, 5, 36] }] */
+
+import { useMemo } from 'react';
+// TODO: fix math-random fails to import crypto
+// import random from 'math-random';
+
+export default function useUniqueId(prefix?: string): string {
+  const id = useMemo(() => Math.random().toString(36).substr(2, 5), []);
+
+  prefix = prefix ? `${prefix}--` : '';
+
+  return `${prefix}${id}`;
+}

package/src/components/suggestedActions/AccessibleButton.tsx

@@ -0,0 +1,59 @@
+import React, { MouseEventHandler, ReactNode, forwardRef, memo, useRef } from 'react';
+
+const preventDefaultHandler: MouseEventHandler<HTMLButtonElement> = event => event.preventDefault();
+
+type AccessibleButtonProps = Readonly<{
+  className?: string | undefined;
+  'aria-hidden'?: boolean;
+  children?: ReactNode;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+  type: 'button';
+}>;
+
+// Differences between <button> and <AccessibleButton>:
+// - Disable behavior
+//   - When the widget is disabled
+//     - Set "aria-disabled" attribute to "true"
+//     - Set "readonly" attribute
+//     - Set "tabIndex" to -1
+//     - Remove "onClick" handler
+//   - Why this is needed
+//     - Browser compatibility: when the widget is disabled, different browser send focus to different places
+//     - When the widget become disabled, it's reasonable to keep the focus on the same widget for an extended period of time
+//       - When the user presses TAB after the current widget is disabled, it should jump to the next non-disabled widget
+
+// Developers using this accessible widget will need to:
+// - Style the disabled widget themselves, using CSS query `:disabled, [aria-disabled="true"] {}`
+// - Modify all code that check disabled through "disabled" attribute to use aria-disabled="true" instead
+//   - aria-disabled="true" is the source of truth
+// - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
+
+const AccessibleButton = forwardRef<HTMLButtonElement, AccessibleButtonProps>(
+  ({ 'aria-hidden': ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+
+    const ref = forwardedRef || targetRef;
+
+    return (
+      <button
+        aria-disabled={disabled ? 'true' : 'false'}
+        aria-hidden={ariaHidden}
+        onClick={disabled ? preventDefaultHandler : onClick}
+        ref={ref}
+        tabIndex={tabIndex}
+        {...(disabled && {
+          'aria-disabled': 'true',
+          tabIndex: -1
+        })}
+        {...props}
+        type="button"
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+export default memo(AccessibleButton);

package/src/components/suggestedActions/SuggestedAction.tsx

@@ -0,0 +1,129 @@
+import { hooks } from 'botframework-webchat-component';
+import { type DirectLineCardAction } from 'botframework-webchat-core';
+import cx from 'classnames';
+import React, { MouseEventHandler, memo, useCallback, useRef } from 'react';
+import AccessibleButton from './AccessibleButton';
+import { useStyles } from '../../styles';
+
+const { useScrollToEnd, useStyleSet, usePerformCardAction, useFocus, useSuggestedActions, useDisabled } = hooks;
+
+type SuggestedActionProps = Readonly<{
+  buttonText: string | undefined;
+  className?: string | undefined;
+  displayText?: string | undefined;
+  image?: string | undefined;
+  imageAlt?: string | undefined;
+  itemIndex: number;
+  text?: string | undefined;
+  type?:
+    | 'call'
+    | 'downloadFile'
+    | 'imBack'
+    | 'messageBack'
+    | 'openUrl'
+    | 'playAudio'
+    | 'playVideo'
+    | 'postBack'
+    | 'showImage'
+    | 'signin';
+  value?: any;
+}>;
+
+const styles = {
+  'webchat-fluent__suggested-action': {
+    background: 'transparent',
+    border: '1px solid var(--webchat-colorBrandStroke2)',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    fontSize: '12px',
+    lineHeight: '14px',
+    padding: '6px 8px 4px',
+    textAlign: 'start',
+    display: 'flex',
+    gap: '4px',
+    alignItems: 'center',
+    transition: 'all .15s ease-out',
+
+    '@media (hover: hover)': {
+      '&:not([aria-disabled="true"]):hover': {
+        backgroundColor: 'var(--webchat-colorBrandBackground2Hover)',
+        color: 'var(--webchat-colorBrandForeground2Hover)'
+      }
+    },
+    '&:not([aria-disabled="true"]):active': {
+      backgroundColor: 'var(--webchat-colorBrandBackground2Pressed)',
+      color: 'var(--webchat-colorBrandForeground2Pressed)'
+    },
+    '&[aria-disabled="true"]': {
+      color: ' var(--webchat-colorNeutralForegroundDisabled)',
+      cursor: 'not-allowed'
+    }
+  },
+
+  'webchat-fluent__suggested-action__image': {
+    width: '1em',
+    height: '1em',
+    fontSize: '20px',
+    translate: '0 -1px'
+  }
+};
+
+function SuggestedAction({
+  buttonText,
+  className,
+  displayText,
+  image,
+  imageAlt,
+  text,
+  type,
+  value
+}: SuggestedActionProps) {
+  const [_, setSuggestedActions] = useSuggestedActions();
+  const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
+  const [disabled] = useDisabled();
+  const focus = useFocus();
+  const focusRef = useRef<HTMLButtonElement>(null);
+  const performCardAction = usePerformCardAction();
+  const classNames = useStyles(styles);
+  const scrollToEnd = useScrollToEnd();
+
+  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    ({ target }) => {
+      (async function () {
+        // We need to focus to the send box before we are performing this card action.
+        // The will make sure the focus is always on Web Chat.
+        // Otherwise, the focus may momentarily send to `document.body` and screen reader will be confused.
+        await focus('sendBoxWithoutKeyboard');
+
+        // TODO: [P3] #XXX We should not destruct DirectLineCardAction into React props and pass them in. It makes typings difficult.
+        //       Instead, we should pass a "cardAction" props.
+        performCardAction({ displayText, text, type, value } as DirectLineCardAction, { target });
+
+        // Since "openUrl" action do not submit, the suggested action buttons do not hide after click.
+        type === 'openUrl' && setSuggestedActions([]);
+
+        scrollToEnd();
+      })();
+    },
+    [displayText, focus, performCardAction, scrollToEnd, setSuggestedActions, text, type, value]
+  );
+
+  return (
+    <AccessibleButton
+      className={cx(
+        classNames['webchat-fluent__suggested-action'],
+        suggestedActionStyleSet + '',
+        (className || '') + ''
+      )}
+      disabled={disabled}
+      onClick={handleClick}
+      ref={focusRef}
+      type="button"
+    >
+      {image && <img alt={imageAlt} className={classNames['webchat-fluent__suggested-action__image']} src={image} />}
+      <span>{buttonText}</span>
+    </AccessibleButton>
+  );
+}
+
+export default memo(SuggestedAction);

package/src/components/suggestedActions/index.tsx

@@ -0,0 +1,103 @@
+import { hooks } from 'botframework-webchat-component';
+import cx from 'classnames';
+import React, { memo, type ReactNode } from 'react';
+import { useStyles } from '../../styles';
+import computeSuggestedActionText from './private/computeSuggestedActionText';
+import SuggestedAction from './SuggestedAction';
+
+const { useLocalizer, useStyleSet, useSuggestedActions } = hooks;
+
+const styles = {
+  'webchat-fluent__suggested-actions': {
+    alignItems: 'flex-end',
+    alignSelf: 'flex-end',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+
+    '&:not(:empty)': {
+      paddingBlockEnd: '8px',
+      paddingInlineStart: '4px'
+    }
+  }
+};
+
+function SuggestedActionStackedContainer(
+  props: Readonly<{
+    'aria-label'?: string | undefined;
+    children?: ReactNode | undefined;
+    className?: string | undefined;
+  }>
+) {
+  const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
+  const classNames = useStyles(styles);
+
+  return (
+    <div
+      aria-label={props['aria-label']}
+      aria-live="polite"
+      aria-orientation="vertical"
+      className={cx(classNames['webchat-fluent__suggested-actions'], suggestedActionsStyleSet + '', props.className)}
+      role="toolbar"
+    >
+      {!!props.children && !!React.Children.count(props.children) && props.children}
+    </div>
+  );
+}
+
+function SuggestedActions() {
+  const classNames = useStyles(styles);
+  const localize = useLocalizer();
+  const [suggestedActions] = useSuggestedActions();
+  const children = suggestedActions.map((cardAction, index) => {
+    const { displayText, image, imageAltText, text, type, value } = cardAction as {
+      displayText?: string;
+      image?: string;
+      imageAltText?: string;
+      text?: string;
+      type:
+        | 'call'
+        | 'downloadFile'
+        | 'imBack'
+        | 'messageBack'
+        | 'openUrl'
+        | 'playAudio'
+        | 'playVideo'
+        | 'postBack'
+        | 'showImage'
+        | 'signin';
+      value?: { [key: string]: any } | string;
+    };
+
+    if (!suggestedActions?.length) {
+      return null;
+    }
+
+    return (
+      <SuggestedAction
+        buttonText={computeSuggestedActionText(cardAction)}
+        displayText={displayText}
+        image={image}
+        // Image alt text should use `imageAltText` field and fallback to `text` field.
+        // https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#image-alt-text
+        imageAlt={image && (imageAltText || text)}
+        itemIndex={index}
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        text={text}
+        type={type}
+        value={value}
+      />
+    );
+  });
+  return (
+    <SuggestedActionStackedContainer
+      aria-label={localize('SUGGESTED_ACTIONS_LABEL_ALT')}
+      className={classNames['webchat-fluent__suggested-actions']}
+    >
+      {children}
+    </SuggestedActionStackedContainer>
+  );
+}
+
+export default memo(SuggestedActions);

package/src/components/suggestedActions/private/computeSuggestedActionText.ts

@@ -0,0 +1,21 @@
+import type { DirectLineCardAction } from 'botframework-webchat-core';
+
+// Please refer to this article to find out how to compute the "button text" for suggested action.
+// https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#card-action
+export default function computeSuggestedActionText(cardAction: DirectLineCardAction) {
+  // "CardAction" must contains at least image or title.
+  const { title } = cardAction as { title?: string };
+  const { type, value } = cardAction;
+
+  if (type === 'messageBack') {
+    return title || cardAction.displayText;
+  } else if (title) {
+    return title;
+  } else if (typeof value === 'string') {
+    return value;
+  }
+
+  return JSON.stringify(value);
+}
+
+// TODO: [P1] This is copied from botframework-webchat-component. Think about what we should do to eliminate duplications.

package/src/components/telephoneKeypad/Provider.tsx

@@ -0,0 +1,22 @@
+import React, { memo, useMemo, useState, type ReactNode } from 'react';
+
+import Context from './private/Context';
+
+type Props = Readonly<{ children?: ReactNode | undefined }>;
+
+const Provider = memo(({ children }: Props) => {
+  const [shown, setShown] = useState(false);
+
+  const context = useMemo(
+    () =>
+      Object.freeze({
+        setShown,
+        shown
+      }),
+    [setShown, shown]
+  );
+
+  return <Context.Provider value={context}>{children}</Context.Provider>;
+});
+
+export default Provider;

package/src/components/telephoneKeypad/Surrogate.tsx

@@ -0,0 +1,13 @@
+import React, { memo } from 'react';
+
+import type { PropsOf } from '../../types/PropsOf';
+import TelephoneKeypad from './private/TelephoneKeypad';
+import useShown from './useShown';
+
+type Props = PropsOf<typeof TelephoneKeypad>;
+
+const TelephoneKeypadSurrogate = memo((props: Props) => (useShown()[0] ? <TelephoneKeypad {...props} /> : false));
+
+TelephoneKeypadSurrogate.displayName = 'TelephoneKeypad.Surrogate';
+
+export default TelephoneKeypadSurrogate;

package/src/components/telephoneKeypad/index.ts

@@ -0,0 +1,6 @@
+import TelephoneKeypadProvider from './Provider';
+import TelephoneKeypadSurrogate from './Surrogate';
+import { type DTMF } from './types';
+import useTelephoneKeypadShown from './useShown';
+
+export { TelephoneKeypadProvider, TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF };