botframework-webchat-fluent-theme 4.17.0-main.20240411.647b269 → 4.17.0-main.20240416.4ff01ae

package/src/components/sendbox/Attachments.tsx

@@ -0,0 +1,31 @@
+import { hooks } from 'botframework-webchat-component';
+import React, { memo } from 'react';
+import styles from './Attachments.module.css';
+import { useStyles } from '../../styles';
+
+const { useLocalizer } = hooks;
+
+const attachmentsPluralStringIds = {
+  one: 'TEXT_INPUT_ATTACHMENTS_ONE',
+  two: 'TEXT_INPUT_ATTACHMENTS_TWO',
+  few: 'TEXT_INPUT_ATTACHMENTS_FEW',
+  many: 'TEXT_INPUT_ATTACHMENTS_MANY',
+  other: 'TEXT_INPUT_ATTACHMENTS_OTHER'
+};
+
+function Attachments({
+  attachments
+}: Readonly<{
+  readonly attachments: readonly Readonly<{ blob: Blob | File; thumbnailURL?: URL | undefined }>[];
+}>) {
+  const classNames = useStyles(styles);
+  const localizeWithPlural = useLocalizer({ plural: true });
+
+  return attachments.length ? (
+    <div className={classNames['sendbox__attachment']}>
+      {localizeWithPlural(attachmentsPluralStringIds, attachments.length)}
+    </div>
+  ) : null;
+}
+
+export default memo(Attachments);

package/src/components/sendbox/ErrorMessage.module.css

@@ -0,0 +1,9 @@
+:global(.webchat-fluent) .sendbox__error-message {
+  color: transparent;
+  font-size: 0;
+  height: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 0;
+}

package/src/components/sendbox/ErrorMessage.tsx

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+import styles from './ErrorMessage.module.css';
+import { useStyles } from '../../styles';
+
+function ErrorMessage(props: Readonly<{ id: string; error?: string | undefined }>) {
+  const classNames = useStyles(styles);
+  return (
+    // eslint-disable-next-line react/forbid-dom-props
+    <span className={classNames['sendbox__error-message']} id={props.id} role="alert">
+      {props.error}
+    </span>
+  );
+}
+
+export default memo(ErrorMessage);

package/src/components/sendbox/TelephoneKeypadToolbarButton.tsx

@@ -0,0 +1,30 @@
+import React, { memo, useCallback } from 'react';
+
+import { hooks } from 'botframework-webchat-component';
+import { TelephoneKeypadIcon } from '../../icons/TelephoneKeypad';
+import testIds from '../../testIds';
+import { useTelephoneKeypadShown } from '../TelephoneKeypad';
+import { ToolbarButton } from './Toolbar';
+
+const { useLocalizer } = hooks;
+
+const TelephoneKeypadToolbarButton = memo(() => {
+  const [, setTelephoneKeypadShown] = useTelephoneKeypadShown();
+  const localize = useLocalizer();
+
+  const handleClick = useCallback(() => setTelephoneKeypadShown(shown => !shown), [setTelephoneKeypadShown]);
+
+  return (
+    <ToolbarButton
+      aria-label={localize('TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT')}
+      data-testid={testIds.sendBoxTelephoneKeypadToolbarButton}
+      onClick={handleClick}
+    >
+      <TelephoneKeypadIcon />
+    </ToolbarButton>
+  );
+});
+
+TelephoneKeypadToolbarButton.displayName = 'SendBox.TelephoneKeypadToolbarButton';
+
+export default TelephoneKeypadToolbarButton;

package/src/components/sendbox/TextArea.module.css

@@ -0,0 +1,61 @@
+:global(.webchat-fluent) .sendbox__text-area {
+  display: grid;
+  grid-template-areas: 'main';
+  max-height: 200px;
+  overflow: hidden;
+}
+
+:global(.webchat-fluent) .sendbox__text-area--hidden {
+  /* TODO: Not perfect way of hiding the text box. */
+  height: 0;
+  visibility: collapse;
+}
+
+:global(.webchat-fluent) .sendbox__text-area-shared {
+  border: none;
+  font: inherit;
+  grid-area: main;
+  outline: inherit;
+  overflow-wrap: anywhere;
+  resize: inherit;
+  scrollbar-gutter: stable;
+}
+
+:global(.webchat-fluent) .sendbox__text-area-doppelganger {
+  overflow: hidden;
+  visibility: hidden;
+  white-space: pre-wrap;
+}
+
+:global(.webchat-fluent) .sendbox__text-area-input {
+  height: 100%;
+  padding: 0
+}
+
+:global(.webchat-fluent) .sendbox__text-area-input--scroll {
+  /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
+  scrollbar-color: unset;
+  scrollbar-width: unset;
+  /* Firefox */
+  -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);
+  -moz-scrollbar-width: thin;
+
+  /* Chrome, Edge, and Safari */
+  &::-webkit-scrollbar {
+    width: 8px
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--webchat-colorNeutralBackground5);
+    border-radius: 16px
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--webchat-colorNeutralForeground2);
+    border-radius: 16px
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: var(--webchat-colorNeutralBackground5);
+  }
+}

package/src/components/sendbox/TextArea.tsx

@@ -0,0 +1,85 @@
+import cx from 'classnames';
+import React, { forwardRef, useCallback, type FormEventHandler, type KeyboardEventHandler } from 'react';
+import { useStyles } from '../../styles';
+import styles from './TextArea.module.css';
+
+const TextArea = forwardRef<
+  HTMLTextAreaElement,
+  Readonly<{
+    'aria-label'?: string | undefined;
+    className?: string | undefined;
+    'data-testid'?: string | undefined;
+
+    /**
+     * `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?: boolean | undefined;
+    onInput?: FormEventHandler<HTMLTextAreaElement> | undefined;
+    placeholder?: string | undefined;
+    startRows?: number | undefined;
+    value?: string | undefined;
+  }>
+>((props, ref) => {
+  const classNames = useStyles(styles);
+
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(event => {
+    // Shift+Enter adds a new line
+    // Enter requests related form submission
+    if (!event.shiftKey && event.key === 'Enter') {
+      event.preventDefault();
+
+      if ('form' in event.target && event.target.form instanceof HTMLFormElement) {
+        event.target?.form?.requestSubmit();
+      }
+    }
+  }, []);
+
+  return (
+    <div
+      className={cx(
+        classNames['sendbox__text-area'],
+        {
+          [classNames['sendbox__text-area--hidden']]: props.hidden
+        },
+        props.className
+      )}
+      role={props.hidden ? 'hidden' : undefined}
+    >
+      <div
+        className={cx(
+          classNames['sendbox__text-area-doppelganger'],
+          classNames['sendbox__text-area-shared'],
+          classNames['sendbox__text-area-input--scroll']
+        )}
+      >
+        {props.value || props.placeholder}{' '}
+      </div>
+      <textarea
+        aria-label={props['aria-label']}
+        className={cx(
+          classNames['sendbox__text-area-input'],
+          classNames['sendbox__text-area-shared'],
+          classNames['sendbox__text-area-input--scroll']
+        )}
+        data-testid={props['data-testid']}
+        onInput={props.onInput}
+        onKeyDown={handleKeyDown}
+        placeholder={props.placeholder}
+        ref={ref}
+        rows={props.startRows ?? 1}
+        // eslint-disable-next-line no-magic-numbers
+        tabIndex={props.hidden ? -1 : undefined}
+        value={props.value}
+      />
+    </div>
+  );
+});
+
+TextArea.displayName = 'TextArea';
+
+export default TextArea;

package/src/components/sendbox/Toolbar.module.css

@@ -0,0 +1,49 @@
+:global(.webchat-fluent) .sendbox__toolbar {
+  display: flex;
+  gap: 4px;
+  margin-inline-start: auto;
+}
+
+:global(.webchat-fluent) .sendbox__toolbar-button {
+  align-items: center;
+  appearance: none;
+  aspect-ratio: 1;
+  background: transparent;
+  border-radius: var(--webchat-borderRadiusSmall);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: 3px;
+  width: 32px;
+
+  > svg {
+    font-size: 20px;
+    pointer-events: none;
+  }
+
+  @media (hover: hover) {
+    &:not([aria-disabled="true"]):hover {
+      background-color: var(--webchat-colorSubtleBackgroundHover);
+      color: var(--webchat-colorCompoundBrandForeground1Hover);
+    }
+  }
+  &:not([aria-disabled="true"]):active {
+    background-color: var(--webchat-colorSubtleBackgroundPressed);
+    color: var(--webchat-colorCompoundBrandForeground1Pressed);
+  }
+  &[aria-disabled="true"] {
+    color: var(--webchat-colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+  }
+}
+
+:global(.webchat-fluent) .sendbox__toolbar-separator {
+  align-self: center;
+  border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);
+  height: 28px;
+
+  &:first-child, &:last-child, &:only-child {
+    display: none
+  }
+}

package/src/components/sendbox/Toolbar.tsx

@@ -0,0 +1,64 @@
+import cx from 'classnames';
+import React, { memo, type MouseEventHandler, type ReactNode } from 'react';
+import styles from './Toolbar.module.css';
+import { useStyles } from '../../styles';
+
+const preventDefaultHandler: MouseEventHandler<HTMLButtonElement> = event => event.preventDefault();
+
+export const ToolbarButton = memo(
+  (
+    props: Readonly<{
+      'aria-label'?: string | undefined;
+      children?: ReactNode | undefined;
+      className?: string | undefined;
+      'data-testid'?: string | undefined;
+      disabled?: boolean | undefined;
+      onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+      type?: 'button' | 'submit' | undefined;
+    }>
+  ) => {
+    const classNames = useStyles(styles);
+
+    return (
+      <button
+        aria-label={props['aria-label']}
+        className={cx(classNames['sendbox__toolbar-button'], props.className)}
+        data-testid={props['data-testid']}
+        onClick={props.disabled ? preventDefaultHandler : props.onClick}
+        type={props.type === 'submit' ? 'submit' : 'button'}
+        {...(props.disabled && {
+          'aria-disabled': 'true',
+          tabIndex: -1
+        })}
+      >
+        {props.children}
+      </button>
+    );
+  }
+);
+
+ToolbarButton.displayName = 'ToolbarButton';
+
+export const Toolbar = memo((props: Readonly<{ children?: ReactNode | undefined; className?: string | undefined }>) => {
+  const classNames = useStyles(styles);
+
+  return <div className={cx(classNames['sendbox__toolbar'], props.className)}>{props.children}</div>;
+});
+
+Toolbar.displayName = 'Toolbar';
+
+export const ToolbarSeparator = memo(
+  (props: Readonly<{ children?: ReactNode | undefined; className?: string | undefined }>) => {
+    const classNames = useStyles(styles);
+
+    return (
+      <div
+        aria-orientation="vertical"
+        className={cx(classNames['sendbox__toolbar-separator'], props.className)}
+        role="separator"
+      />
+    );
+  }
+);
+
+ToolbarSeparator.displayName = 'ToolbarSeparator';

package/src/components/sendbox/index.module.css

@@ -0,0 +1,58 @@
+:global(.webchat-fluent) .sendbox {
+  color: var(--webchat-colorNeutralForeground1);
+  font-family: var(--webchat-fontFamilyBase);
+  padding: 0 10px 10px;
+  text-rendering: optimizeLegibility;
+}
+
+:global(.webchat-fluent) .sendbox__sendbox {
+  background-color: var(--webchat-colorNeutralBackground1);
+  border-radius: var(--webchat-borderRadiusLarge);
+  border: 1px solid var(--webchat-colorNeutralStroke1);
+  display: grid;
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: 14px;
+  gap: 6px;
+  line-height: 20px;
+  padding: 8px;
+  position: relative;
+
+  &:focus-within {
+    border-color: var(--webchat-colorNeutralStroke1Selected);
+    /* TODO clarify with design the color:
+      - Teams is using colorCompoundBrandForeground1
+      - Fluent is using colorCompoundBrandStroke
+      - we are using colorCompoundBrandForeground1Hover */
+    box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);
+  }
+}
+
+:global(.webchat-fluent) .sendbox__sendbox-text {
+  background-color: transparent;
+  border: none;
+  flex: auto;
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: 14px;
+  line-height: 20px;
+  outline: none;
+  padding: 4px 4px 0;
+  resize: none;
+}
+
+:global(.webchat-fluent) .sendbox__sendbox-controls {
+  align-items: center;
+  display: flex;
+  padding-inline-start: 4px;
+}
+
+:global(.webchat-fluent) .sendbox__text-counter {
+  color: var(--webchat-colorNeutralForeground4);
+  cursor: default;
+  font-family: var(--webchat-fontFamilyNumeric);
+  font-size: 10px;
+  line-height: 14px;
+}
+
+:global(.webchat-fluent) .sendbox__text-counter--error {
+  color: var(--webchat-colorStatusDangerForeground1);
+}

package/src/components/sendbox/index.tsx

@@ -0,0 +1,169 @@
+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 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';
+import styles from './index.module.css';
+import { useStyles } from '../../styles';
+
+const { useStyleOptions, useMakeThumbnail, useLocalizer, useSendBoxAttachments, useSendMessage } = hooks;
+
+function SendBox(
+  props: Readonly<{
+    className?: string | undefined;
+    placeholder?: string | undefined;
+  }>
+) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [message, setMessage] = useState('');
+  const [attachments, setAttachments] = useSendBoxAttachments();
+  const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions();
+  const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
+  const classNames = useStyles(styles);
+  const localize = useLocalizer();
+  const sendMessage = useSendMessage();
+  const makeThumbnail = useMakeThumbnail();
+  const errorMessageId = useUniqueId('sendbox__error-message-id');
+  const [errorRef, errorMessage] = useSubmitError({ message, attachments });
+  const [telephoneKeypadShown] = 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(
+    // TODO: We need more official way of sending DTMF.
+    (dtmf: DTMF) => sendMessage(`/DTMF ${dtmf}`),
+    [sendMessage]
+  );
+
+  const aria = {
+    'aria-invalid': 'false' as const,
+    ...(errorMessage && {
+      'aria-invalid': 'true' as const,
+      'aria-errormessage': errorMessageId
+    })
+  };
+
+  return (
+    <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
+      <SuggestedActions />
+      <div className={cx(classNames['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['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['sendbox__sendbox-controls'])}>
+          {maxMessageLength && (
+            <div
+              className={cx(classNames['sendbox__text-counter'], {
+                [classNames['sendbox__text-counter--error']]: isMessageLengthExceeded
+              })}
+            >
+              {`${message.length}/${maxMessageLength}`}
+            </div>
+          )}
+          <Toolbar>
+            {!hideTelephoneKeypadButton && <TelephoneKeypadToolbarButton />}
+            {!hideUploadButton && <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}`;
+}