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

package/src/components/Theme.tsx

@@ -0,0 +1,71 @@
+import React, { type ReactNode } from 'react';
+import { useStyles } from '../styles';
+
+const styles = {
+  'webchat-fluent__theme': {
+    display: 'contents',
+
+    '--webchat-colorNeutralForeground1': 'var(--colorNeutralForeground1, #242424)',
+    '--webchat-colorNeutralForeground2': 'var(--colorNeutralForeground2, #424242)',
+    '--webchat-colorNeutralForeground4': 'var(--colorNeutralForeground4, #707070)',
+
+    '--webchat-colorNeutralForegroundDisabled': 'var(--colorNeutralForegroundDisabled, #bdbdbd)',
+
+    '--webchat-colorNeutralBackground1': 'var(--colorNeutralBackground1, #ffffff)',
+    '--webchat-colorNeutralBackground4': 'var(--colorNeutralBackground4, #f0f0f0)',
+    '--webchat-colorNeutralBackground5': 'var(--colorNeutralBackground5, #ebebeb)',
+
+    '--webchat-colorSubtleBackgroundHover': 'var(--colorSubtleBackgroundHover, #f5f5f5)',
+    '--webchat-colorSubtleBackgroundPressed': 'var(--colorSubtleBackgroundPressed, #e0e0e0)',
+
+    '--webchat-colorNeutralStroke1': 'var(--colorNeutralStroke1, #d1d1d1)',
+    '--webchat-colorNeutralStroke2': 'var(--colorNeutralStroke2, #e0e0e0)',
+    '--webchat-colorNeutralStroke1Selected': 'var(--colorNeutralStroke1Selected, #bdbdbd)',
+
+    '--webchat-colorBrandStroke2': 'var(--colorBrandStroke2, #9edcf7)',
+
+    '--webchat-colorBrandForeground2Hover': 'var(--colorBrandForeground2Hover, #015a7a)',
+    '--webchat-colorBrandForeground2Pressed': 'var(--colorBrandForeground2Pressed, #01384d)',
+
+    '--webchat-colorBrandBackground2Hover': 'var(--colorBrandBackground2Hover, #bee7fa)',
+    '--webchat-colorBrandBackground2Pressed': 'var(--colorBrandBackground2Pressed, #7fd2f5)',
+
+    '--webchat-colorCompoundBrandForeground1': 'var(--colorCompoundBrandForeground1, #077fab)',
+
+    '--webchat-colorCompoundBrandForeground1Hover': 'var(--colorCompoundBrandForeground1Hover, #02729c)',
+    '--webchat-colorCompoundBrandForeground1Pressed': 'var(--colorCompoundBrandForeground1Pressed, #01678c)',
+
+    '--webchat-colorStatusDangerForeground1': 'var(--colorStatusDangerForeground1, #b10e1c)',
+
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts
+    '--webchat-colorGray30': 'var(--colorGray30, #edebe9)',
+    '--webchat-colorGray160': 'var(--colorGray160, #323130)',
+    '--webchat-colorGray200': 'var(--colorGray200, #1b1a19)',
+
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts
+    '--webchat-borderRadiusSmall': 'var(--borderRadiusSmall, 2px)',
+    '--webchat-borderRadiusLarge': 'var(--borderRadiusLarge, 6px)',
+    '--webchat-borderRadiusXLarge': 'var(--borderRadiusXLarge, 8px)',
+
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts
+    '--webchat-shadow16':
+      'var(--shadow16, 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108))',
+
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts
+    '--webchat-spacingHorizontalMNudge': 'var(--spacingHorizontalMNudge, 10px)',
+
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
+    '--webchat-fontFamilyBase': `var(--fontFamilyBase, 'Segoe UI)', 'Segoe UI Web (West European))', -apple-system,
+      BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
+    '--webchat-fontFamilyNumeric': `var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI)', 'Segoe UI Web (West European))',
+      -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
+
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
+    '--webchat-fontWeightSemibold': 'var(--fontWeightSemibold, 600)'
+  }
+};
+
+export default function WebchatTheme(props: Readonly<{ readonly children: ReactNode | undefined }>) {
+  const classNames = useStyles(styles);
+  return <div className={classNames['webchat-fluent__theme']}>{props.children}</div>;
+}

package/src/components/dropZone/index.tsx

@@ -0,0 +1,132 @@
+import { hooks } from 'botframework-webchat-api';
+import cx from 'classnames';
+import React, { memo, useCallback, useEffect, useRef, useState, type DragEventHandler } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+import { AddDocumentIcon } from '../../icons/AddDocumentIcon';
+import { useStyles } from '../../styles';
+import testIds from '../../testIds';
+
+const { useLocalizer } = hooks;
+
+const styles = {
+  'webchat-fluent__sendbox__attachment-drop-zone': {
+    backgroundColor: 'var(--webchat-colorNeutralBackground4)',
+    borderRadius: 'inherit',
+    cursor: 'copy',
+    display: 'grid',
+    gap: '8px',
+    inset: '0',
+    placeContent: 'center',
+    placeItems: 'center',
+    position: 'absolute'
+  },
+
+  'webchat-fluent__sendbox__attachment-drop-zone--droppable': {
+    backgroundColor: '#e00',
+    color: 'White'
+  },
+
+  'webchat-fluent__sendbox__attachment-drop-zone-icon': {
+    height: '36px',
+    // Set "pointer-events: none" to ignore dragging over the icon. Otherwise, when dragging over the icon, it would disable the "--droppable" modifier.
+    pointerEvents: 'none',
+    width: '36px'
+  }
+};
+
+const handleDragOver: DragEventHandler<HTMLDivElement> = event => {
+  // This is for preventing the browser from opening the dropped file in a new tab.
+  event.preventDefault();
+};
+
+// Notes: For files dragging from outside of browser, it only tell us if it is a "File" instead of "text/plain" or "text/uri-list".
+//        For images dragging inside of browser, it only tell us that it is "text/plain", "text/uri-list" and "text/html". But not "image/*".
+//        So we cannot whitelist what is droppable.
+//        We are using case-insensitive of type "files" so we can drag in WebDriver.
+const isFilesTransferEvent = (event: DragEvent) =>
+  !!event.dataTransfer?.types?.some(type => type.toLowerCase() === 'files');
+
+function isDescendantOf(target: Node, ancestor: Node): boolean {
+  let current = target.parentNode;
+
+  while (current) {
+    if (current === ancestor) {
+      return true;
+    }
+
+    current = current.parentNode;
+  }
+
+  return false;
+}
+
+const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) => {
+  const [dropZoneState, setDropZoneState] = useState<false | 'visible' | 'droppable'>(false);
+  const classNames = useStyles(styles);
+  const dropZoneRef = useRef<HTMLDivElement>(null);
+  const localize = useLocalizer();
+  const onFilesAddedRef = useRefFrom(props.onFilesAdded);
+
+  useEffect(() => {
+    let entranceCounter = 0;
+
+    const handleDragEnter = (event: DragEvent) => {
+      entranceCounter++;
+
+      if (isFilesTransferEvent(event)) {
+        setDropZoneState(
+          dropZoneRef.current &&
+            (event.target === dropZoneRef.current ||
+              (event.target instanceof HTMLElement && isDescendantOf(event.target, dropZoneRef.current)))
+            ? 'droppable'
+            : 'visible'
+        );
+      }
+    };
+
+    const handleDragLeave = () => --entranceCounter <= 0 && setDropZoneState(false);
+
+    document.addEventListener('dragenter', handleDragEnter, false);
+    document.addEventListener('dragleave', handleDragLeave, false);
+
+    return () => {
+      document.removeEventListener('dragenter', handleDragEnter);
+      document.removeEventListener('dragleave', handleDragLeave);
+    };
+  }, [setDropZoneState]);
+
+  const handleDrop = useCallback<DragEventHandler<HTMLDivElement>>(
+    event => {
+      event.preventDefault();
+
+      setDropZoneState(false);
+
+      if (!isFilesTransferEvent(event.nativeEvent)) {
+        return;
+      }
+
+      onFilesAddedRef.current([...event.dataTransfer.files]);
+    },
+    [onFilesAddedRef, setDropZoneState]
+  );
+
+  return dropZoneState ? (
+    <div
+      className={cx(classNames['webchat-fluent__sendbox__attachment-drop-zone'], {
+        [classNames['webchat-fluent__sendbox__attachment-drop-zone--droppable']]: dropZoneState === 'droppable'
+      })}
+      data-testid={testIds.sendBoxDropZone}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      ref={dropZoneRef}
+    >
+      <AddDocumentIcon className={classNames['webchat-fluent__sendbox__attachment-drop-zone-icon']} />
+      {localize('TEXT_INPUT_DROP_ZONE')}
+    </div>
+  ) : null;
+};
+
+DropZone.displayName = 'DropZone';
+
+export default memo(DropZone);

package/src/components/sendbox/AddAttachmentButton.tsx

@@ -0,0 +1,77 @@
+import { hooks } from 'botframework-webchat-api';
+import React, { useCallback, useRef, type ChangeEventHandler, memo } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { AttachmentIcon } from '../../icons/AttachmentIcon';
+import { useStyles } from '../../styles';
+import testIds from '../../testIds';
+import { ToolbarButton } from './Toolbar';
+
+const { useLocalizer, useStyleOptions } = hooks;
+
+const styles = {
+  'webchat-fluent__sendbox__add-attachment': {
+    display: 'grid'
+  },
+
+  'webchat-fluent__sendbox__add-attachment-input': {
+    fontSize: 0,
+    height: 0,
+    opacity: 0,
+    width: 0
+  }
+};
+
+function AddAttachmentButton(
+  props: Readonly<{
+    disabled?: boolean | undefined;
+    onFilesAdded: ((files: File[]) => void) | undefined;
+  }>
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const classNames = useStyles(styles);
+  const localize = useLocalizer();
+  const [{ uploadAccept, uploadMultiple }] = useStyleOptions();
+  const onFilesAddedRef = useRefFrom(props.onFilesAdded);
+
+  const handleClick = useCallback(() => inputRef.current?.click(), [inputRef]);
+
+  const handleFileChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    ({ target: { files } }) => {
+      if (files) {
+        onFilesAddedRef.current?.([...files]);
+
+        if (inputRef.current) {
+          inputRef.current.value = '';
+        }
+      }
+    },
+    [inputRef, onFilesAddedRef]
+  );
+
+  return (
+    <div className={classNames['webchat-fluent__sendbox__add-attachment']}>
+      <input
+        accept={uploadAccept}
+        aria-disabled={props.disabled}
+        aria-hidden="true"
+        className={classNames['webchat-fluent__sendbox__add-attachment-input']}
+        multiple={uploadMultiple}
+        onInput={props.disabled ? undefined : handleFileChange}
+        readOnly={props.disabled}
+        ref={inputRef}
+        role="button"
+        tabIndex={-1}
+        type="file"
+      />
+      <ToolbarButton
+        aria-label={localize('TEXT_INPUT_UPLOAD_BUTTON_ALT')}
+        data-testid={testIds.sendBoxUploadButton}
+        onClick={handleClick}
+      >
+        <AttachmentIcon />
+      </ToolbarButton>
+    </div>
+  );
+}
+
+export default memo(AddAttachmentButton);

package/src/components/sendbox/Attachments.tsx

@@ -0,0 +1,40 @@
+import { hooks } from 'botframework-webchat-api';
+import React, { memo } from 'react';
+import { useStyles } from '../../styles';
+
+const { useLocalizer } = hooks;
+
+const styles = {
+  'webchat-fluent__sendbox__attachment': {
+    border: '1px solid var(--webchat-colorNeutralStroke1)',
+    borderRadius: 'var(--webchat-borderRadiusLarge)',
+    cursor: 'default',
+    padding: '6px 8px',
+    width: 'fit-content'
+  }
+};
+
+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['webchat-fluent__sendbox__attachment']}>
+      {localizeWithPlural(attachmentsPluralStringIds, attachments.length)}
+    </div>
+  ) : null;
+}
+
+export default memo(Attachments);

package/src/components/sendbox/ErrorMessage.tsx

@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+import { useStyles } from '../../styles';
+
+const styles = {
+  'webchat-fluent___sendbox__error-message': {
+    fontSize: 0,
+    height: 0,
+    width: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    color: 'transparent'
+  }
+};
+
+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['webchat-fluent___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-api';
+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.tsx

@@ -0,0 +1,146 @@
+import cx from 'classnames';
+import React, { forwardRef, useCallback, type FormEventHandler, type KeyboardEventHandler } from 'react';
+
+import { useStyles } from '../../styles';
+
+const styles = {
+  'webchat-fluent__sendbox__text-area': {
+    display: 'grid',
+    gridTemplateAreas: `'main'`,
+    maxHeight: '200px',
+    overflow: 'hidden'
+  },
+
+  'webchat-fluent__sendbox__text-area--hidden': {
+    // TODO: Not perfect way of hiding the text box.
+    height: 0,
+    visibility: 'collapse'
+  },
+
+  'webchat-fluent__sendbox__text-area-shared': {
+    border: 'none',
+    font: 'inherit',
+    gridArea: 'main',
+    outline: 'inherit',
+    overflowWrap: 'anywhere',
+    resize: 'inherit',
+    scrollbarGutter: 'stable'
+  },
+
+  'webchat-fluent__sendbox__text-area-doppelganger': {
+    overflow: 'hidden',
+    visibility: 'hidden',
+    whiteSpace: 'pre-wrap'
+  },
+
+  'webchat-fluent__sendbox__text-area-input': {
+    height: '100%',
+    padding: 0
+  },
+
+  'webchat-fluent__sendbox__text-area-input--scroll': {
+    /* Firefox */
+    MozScrollbarColor: 'var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2)',
+    MozScrollbarWidth: 'thin',
+
+    /* Chrome, Edge, and Safari */
+    '&::-webkit-scrollbar': {
+      width: '8px'
+    },
+
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: ' var(--webchat-colorNeutralBackground5)',
+      borderRadius: '16px'
+    },
+
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'var(--webchat-colorNeutralForeground2)',
+      borderRadius: '16px'
+    },
+
+    '&::-webkit-scrollbar-corner': {
+      backgroundColor: 'var(--webchat-colorNeutralBackground5)'
+    }
+  }
+};
+
+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['webchat-fluent__sendbox__text-area'],
+        {
+          [classNames['webchat-fluent__sendbox__text-area--hidden']]: props.hidden
+        },
+        props.className
+      )}
+      role={props.hidden ? 'hidden' : undefined}
+    >
+      <div
+        className={cx(
+          classNames['webchat-fluent__sendbox__text-area-doppelganger'],
+          classNames['webchat-fluent__sendbox__text-area-shared'],
+          classNames['webchat-fluent__sendbox__text-area-input--scroll']
+        )}
+      >
+        {props.value || props.placeholder}{' '}
+      </div>
+      <textarea
+        aria-label={props['aria-label']}
+        className={cx(
+          classNames['webchat-fluent__sendbox__text-area-input'],
+          classNames['webchat-fluent__sendbox__text-area-shared'],
+          classNames['webchat-fluent__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.tsx

@@ -0,0 +1,115 @@
+import cx from 'classnames';
+import React, { memo, type MouseEventHandler, type ReactNode } from 'react';
+import { useStyles } from '../../styles';
+
+const styles = {
+  'webchat-fluent__sendbox__toolbar': {
+    display: 'flex',
+    gap: '4px',
+    marginInlineStart: 'auto'
+  },
+
+  'webchat-fluent__sendbox__toolbar-button': {
+    alignItems: 'center',
+    appearance: 'none',
+    aspectRatio: '1',
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 'var(--webchat-borderRadiusSmall)',
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    padding: '3px',
+    width: '32px',
+
+    '> svg': {
+      fontSize: '20px',
+      pointerEvents: 'none'
+    },
+
+    '@media (hover: hover)': {
+      '&:not([aria-disabled="true"]):hover': {
+        backgroundColor: 'var(--webchat-colorSubtleBackgroundHover)',
+        color: 'var(--webchat-colorCompoundBrandForeground1Hover)'
+      }
+    },
+    '&:not([aria-disabled="true"]):active': {
+      backgroundColor: 'var(--webchat-colorSubtleBackgroundPressed)',
+      color: 'var(--webchat-colorCompoundBrandForeground1Pressed)'
+    },
+    '&[aria-disabled="true"]': {
+      color: ' var(--webchat-colorNeutralForegroundDisabled)',
+      cursor: 'not-allowed'
+    }
+  },
+
+  'webchat-fluent__sendbox__toolbar-separator': {
+    alignSelf: 'center',
+    borderInlineEnd: '1px solid var(--webchat-colorNeutralStroke2)',
+    height: '28px',
+
+    '&:first-child, &:last-child, &:only-child': {
+      display: 'none'
+    }
+  }
+};
+
+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['webchat-fluent__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['webchat-fluent__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['webchat-fluent__sendbox__toolbar-separator'], props.className)}
+        role="separator"
+      />
+    );
+  }
+);
+
+ToolbarSeparator.displayName = 'ToolbarSeparator';