botframework-webchat-component 4.18.1 → 4.19.0

package/src/Middleware/ScrollToEndButton/ScrollToEndButton.tsx

@@ -0,0 +1,58 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import React, { useRef } from 'react';
+
+import useFocusAccessKeyEffect from '../../Utils/AccessKeySink/useFocusAccessKeyEffect';
+import useLocalizeAccessKey from '../../hooks/internal/useLocalizeAccessKey';
+import useStyleSet from '../../hooks/useStyleSet';
+import { useLiveRegion } from '../../providers/LiveRegionTwin';
+
+const { useLocalizer, useStyleOptions } = hooks;
+
+type ScrollToEndButtonProps = Readonly<{ onClick?: (() => void) | undefined }>;
+
+const newMessagesAccessKey = 'U u Ü ü';
+
+const ScrollToEndButton = ({ onClick }: ScrollToEndButtonProps) => {
+  const focusRef = useRef(null);
+  const [{ scrollToEndButton: scrollToEndButtonStyleSet }] = useStyleSet();
+  const [{ scrollToEndButtonBehavior }] = useStyleOptions();
+  const localize = useLocalizer();
+  const localizeAccessKey = useLocalizeAccessKey('accessible name');
+  const shouldShowNewMessagesButton = scrollToEndButtonBehavior !== 'any';
+
+  const text = localize(shouldShowNewMessagesButton ? 'TRANSCRIPT_NEW_MESSAGES' : 'TRANSCRIPT_MORE_MESSAGES');
+
+  const liveRegionText = localize(
+    'TRANSCRIPT_LIVE_REGION_NEW_MESSAGES_ALT',
+    localizeAccessKey(newMessagesAccessKey),
+    text
+  );
+
+  // Setup and announce new messages button shortcuts
+  useFocusAccessKeyEffect(shouldShowNewMessagesButton ? newMessagesAccessKey : '', focusRef);
+
+  useLiveRegion(
+    () => shouldShowNewMessagesButton && <div className="webchat__scroll-to-end-button__status">{liveRegionText}</div>,
+    [liveRegionText, shouldShowNewMessagesButton]
+  );
+
+  return (
+    <button
+      aria-keyshortcuts={shouldShowNewMessagesButton ? localizeAccessKey(newMessagesAccessKey) : undefined}
+      aria-label={text}
+      className={classNames('webchat__scroll-to-end-button', scrollToEndButtonStyleSet + '')}
+      onClick={onClick}
+      ref={focusRef}
+      tabIndex={0}
+      type="button"
+    >
+      {text}
+    </button>
+  );
+};
+
+ScrollToEndButton.displayName = 'ScrollToEndButton';
+
+// TODO: Will fail test if memo().
+export default ScrollToEndButton;

package/src/ReactWebChat.tsx

@@ -12,13 +12,10 @@ import Composer, { ComposerProps } from './Composer';
 // - They can run hooks outside of activity/attachment middleware
 //   - They will put <Composer> as very top of their page, and allow buttons on their existing page to send message to bot
 
-// Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
-const ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];
-
 type ReactWebChatProps = Readonly<
   Omit<ComposerProps, 'children'> & {
-    className?: string;
-    role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
+    className?: string | undefined;
+    role?: string | undefined;
   }
 >;
 
@@ -42,9 +39,7 @@ const {
 
 ReactWebChat.propTypes = {
   className: PropTypes.string,
-  // Ignoring deficiencies with TypeScript/PropTypes inference.
-  // @ts-ignore
-  role: PropTypes.oneOf(ARIA_LANDMARK_ROLES),
+  role: PropTypes.string,
   ...composerPropTypesWithoutChildren
 };
 

package/src/ScreenReaderText.tsx

@@ -1,11 +1,10 @@
 /* eslint react/forbid-dom-props: ["off"] */
 
-import PropTypes from 'prop-types';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import React, { forwardRef, memo } from 'react';
 
-import type { VFC } from 'react';
-
-import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 
 const ROOT_STYLE = {
   // .sr-only - This component is intended to be invisible to the visual Web Chat user, but read by the AT when using a screen reader
@@ -23,41 +22,35 @@ const ROOT_STYLE = {
   width: 1
 };
 
-type ScreenReaderTextProps = {
-  'aria-hidden'?: boolean;
-  id?: string;
-  text: string;
-};
+const screenReaderTextPropsSchema = pipe(
+  object({
+    'aria-hidden': optional(boolean()),
+    id: optional(string()),
+    text: string()
+  }),
+  readonly()
+);
 
-const ScreenReaderText: VFC<ScreenReaderTextProps> = forwardRef<HTMLDivElement, ScreenReaderTextProps>(
-  ({ 'aria-hidden': ariaHidden, id, text }, ref) => {
-    const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+type ScreenReaderTextProps = InferInput<typeof screenReaderTextPropsSchema>;
 
-    if (ariaHidden && !id) {
-      console.warn(
-        'botframework-webchat assertion: when "aria-hidden" is set, the screen reader text should be read by "aria-labelledby". Thus, "id" must be set.'
-      );
-    }
+// eslint-disable-next-line prefer-arrow-callback
+const ScreenReaderText = forwardRef<HTMLDivElement, ScreenReaderTextProps>(function ScreenReaderText(props, ref) {
+  const { 'aria-hidden': ariaHidden, id, text } = validateProps(screenReaderTextPropsSchema, props);
 
-    return (
-      <div aria-hidden={ariaHidden} className={rootClassName} id={id} ref={ref}>
-        {text}
-      </div>
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+  if (ariaHidden && !id) {
+    console.warn(
+      'botframework-webchat assertion: when "aria-hidden" is set, the screen reader text should be read by "aria-labelledby". Thus, "id" must be set.'
     );
   }
-);
-
-ScreenReaderText.defaultProps = {
-  'aria-hidden': undefined,
-  id: undefined
-};
-
-ScreenReaderText.propTypes = {
-  'aria-hidden': PropTypes.bool,
-  id: PropTypes.string,
-  text: PropTypes.string.isRequired
-};
 
-ScreenReaderText.displayName = 'ScreenReaderText';
+  return (
+    <div aria-hidden={ariaHidden} className={rootClassName} id={id} ref={ref}>
+      {text}
+    </div>
+  );
+});
 
 export default memo(ScreenReaderText);
+export { screenReaderTextPropsSchema, type ScreenReaderTextProps };

package/src/SendBox/AttachmentBar/AttachmentBar.module.css

@@ -0,0 +1,32 @@
+:global(.webchat) .send-box-attachment-bar {
+  grid-area: attachment-bar;
+
+  &.send-box-attachment-bar--as-list-item {
+    max-height: var(--webchat__max-height--send-box-attachment-bar);
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+  }
+
+  &.send-box-attachment-bar--as-thumbnail {
+    overflow-x: auto;
+  }
+
+  .send-box-attachment-bar__box {
+    gap: 4px;
+  }
+
+  &.send-box-attachment-bar--as-list-item .send-box-attachment-bar__box {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    &:not(:empty) {
+      padding: 4px;
+    }
+  }
+
+  &.send-box-attachment-bar--as-thumbnail .send-box-attachment-bar__box {
+    display: flex;
+    scrollbar-width: thin;
+  }
+}

package/src/SendBox/AttachmentBar/AttachmentBar.tsx

@@ -0,0 +1,71 @@
+import { hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import cx from 'classnames';
+import React, { memo, useCallback, useMemo } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import styles from './AttachmentBar.module.css';
+import testIds from '../../testIds';
+import AttachmentBarItem from './AttachmentBarItem';
+
+const { useSendBoxAttachments, useStyleOptions } = hooks;
+
+const sendBoxAttachmentBarPropsSchema = pipe(
+  object({
+    className: optional(string())
+  }),
+  readonly()
+);
+
+type SendBoxAttachmentBarProps = InferInput<typeof sendBoxAttachmentBarPropsSchema>;
+
+function SendBoxAttachmentBar(props: SendBoxAttachmentBarProps) {
+  const { className } = validateProps(sendBoxAttachmentBarPropsSchema, props);
+
+  const [sendBoxAttachments, setSendBoxAttachments] = useSendBoxAttachments();
+  const classNames = useStyles(styles);
+  const [{ sendBoxAttachmentBarMaxThumbnail }] = useStyleOptions();
+
+  const mode = useMemo(
+    () => (sendBoxAttachments.length > sendBoxAttachmentBarMaxThumbnail ? 'list item' : 'thumbnail'),
+    [sendBoxAttachmentBarMaxThumbnail, sendBoxAttachments]
+  );
+
+  const sendBoxAttachmentsRef = useRefFrom(sendBoxAttachments);
+
+  const handleAttachmentDelete = useCallback(
+    ({ attachment }) =>
+      setSendBoxAttachments(
+        sendBoxAttachmentsRef.current.filter(sendBoxAttachment => sendBoxAttachment !== attachment)
+      ),
+    [setSendBoxAttachments, sendBoxAttachmentsRef]
+  );
+
+  return (
+    sendBoxAttachments.length > 0 && (
+      <div
+        className={cx(
+          classNames['send-box-attachment-bar'],
+          {
+            [classNames['send-box-attachment-bar--as-list-item']]: mode === 'list item',
+            [classNames['send-box-attachment-bar--as-thumbnail']]: mode === 'thumbnail'
+          },
+          className
+        )}
+        data-testid={testIds.sendBoxAttachmentBar}
+      >
+        <div className={classNames['send-box-attachment-bar__box']}>
+          {sendBoxAttachments.map((attachment, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <AttachmentBarItem attachment={attachment} key={index} mode={mode} onDelete={handleAttachmentDelete} />
+          ))}
+        </div>
+      </div>
+    )
+  );
+}
+
+export default memo(SendBoxAttachmentBar);
+export { sendBoxAttachmentBarPropsSchema, type SendBoxAttachmentBarProps };

package/src/SendBox/AttachmentBar/AttachmentBarItem.module.css

@@ -0,0 +1,137 @@
+/* #region List item */
+:global(.webchat) .send-box-attachment-bar-item {
+  display: grid;
+  flex-shrink: 0;
+  grid-template-rows: auto;
+  font-family: var(--webchat__font--primary);
+
+  &.send-box-attachment-bar-item--as-list-item {
+    border-radius: 4px;
+    box-shadow:
+      0px 2px 4px rgba(0, 0, 0, 0.14),
+      0px 0px 2px rgba(0, 0, 0, 0.12);
+    grid-template-areas: 'body auxiliary';
+    grid-template-columns: 1fr auto;
+    padding: 2px;
+  }
+
+  &.send-box-attachment-bar-item--as-thumbnail {
+    aspect-ratio: 1 / 1;
+    border: solid 1px rgba(0, 0, 0, 0.25); /* Figma has border-width of 0.96px. */
+    border-radius: 8px; /* Figma is 7.68px. */
+    grid-template-areas: 'body';
+    grid-template-columns: auto;
+    height: 80px; /* <= 87px would fit white-label design with 3 thumbnails. */
+    overflow: hidden;
+  }
+}
+/* #endregion */
+
+/* #region Delete button */
+:global(.webchat) .send-box-attachment-bar-item__delete-button {
+  /* https://react.fluentui.dev/?path=/docs/theme-colors--docs */
+  appearance: none;
+  align-items: center;
+  background-color: #ffffff; /* Background/colorNeutralBackground1 */
+  border-color: #d1d1d1; /* Stroke/colorNeutralStroke1 */
+  border-radius: 4px; /* BorderRadiusXS is not defined in Fluent UI, guessing it is 4px. */
+  cursor: pointer;
+  grid-area: body;
+  justify-self: end;
+  opacity: 1;
+  padding: 0;
+  transition: opacity 50ms; /* Assume ultra-fast. */
+  color: #242424; /* Background/colorNeutralForeground1 */
+  --webchat__component-icon--size: 19px;
+
+  &:hover {
+    background-color: #f5f5f5; /* Background/colorNeutralBackground1Hover */
+    border-color: #c7c7c7; /* Stroke/colorNeutralStroke1Hover */
+  }
+
+  &:active {
+    background-color: #e0e0e0; /* Background/colorNeutralBackground1Pressed */
+    border-color: #c7c7c7; /* Stroke/colorNeutralStroke1Pressed */
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    background-color: #f0f0f0; /* Background/colorNeutralBackgroundDisabled */
+    border-color: #e0e0e0; /* Stroke/colorNeutralStrokeDisabled */
+    color: #bdbdbd; /* Stroke/colorNeutralForegroundDisabled */
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :global(.webchat.theme--prefers-color-scheme) .send-box-attachment-bar-item__delete-button {
+    background-color: #292929; /* Background/colorNeutralBackground1 */
+    border-color: #666666; /* Stroke/colorNeutralStroke1 */
+    color: #ffffff; /* Background/colorNeutralBackground1 */
+
+    &:hover {
+      background-color: #3d3d3d; /* Background/colorNeutralBackground1Hover */
+      border-color: #757575; /* Stroke/colorNeutralStroke1Hover */
+    }
+
+    &:active {
+      background-color: #1f1f1f; /* Background/colorNeutralBackground1Pressed */
+      border-color: #6b6b6b; /* Stroke/colorNeutralStroke1Pressed */
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      background-color: #141414; /* Background/colorNeutralBackgroundDisabled */
+      border-color: #424242; /* Stroke/colorNeutralStrokeDisabled */
+      color: #5c5c5c; /* Stroke/colorNeutralForegroundDisabled */
+    }
+  }
+}
+
+:global(.webchat)
+  .send-box-attachment-bar-item.send-box-attachment-bar-item--as-list-item
+  .send-box-attachment-bar-item__delete-button {
+  border: 0;
+  grid-area: auxiliary;
+  height: 24px;
+  width: 24px;
+
+  .send-box-attachment-bar-item__dismiss-icon {
+    --webchat__component-icon--size: 7px;
+    --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg"><path d="M0.0885911 0.215694L0.146447 0.146447C0.320013 -0.0271197 0.589437 -0.046405 0.784306 0.0885911L0.853553 0.146447L4 3.293L7.14645 0.146447C7.34171 -0.0488154 7.65829 -0.0488154 7.85355 0.146447C8.04882 0.341709 8.04882 0.658291 7.85355 0.853553L4.707 4L7.85355 7.14645C8.02712 7.32001 8.0464 7.58944 7.91141 7.78431L7.85355 7.85355C7.67999 8.02712 7.41056 8.0464 7.21569 7.91141L7.14645 7.85355L4 4.707L0.853553 7.85355C0.658291 8.04882 0.341709 8.04882 0.146447 7.85355C-0.0488154 7.65829 -0.0488154 7.34171 0.146447 7.14645L3.293 4L0.146447 0.853553C-0.0271197 0.679987 -0.046405 0.410563 0.0885911 0.215694L0.146447 0.146447L0.0885911 0.215694Z"/></svg>');
+  }
+}
+
+:global(.webchat)
+  .send-box-attachment-bar-item.send-box-attachment-bar-item--as-thumbnail
+  .send-box-attachment-bar-item__delete-button {
+  border-style: solid; /* Border color will be set elsewhere. */
+  border-width: 1px; /* Figma has border-width of 0.96px. */
+  grid-area: body; /* This was already set, but keeping for explicitness from original */
+  height: 23px; /* Figma is 23.04px. */
+  margin: 8px; /* Figma is 7.68px. */
+  width: 23px; /* Figma is 23.04px. */
+}
+
+@media not (prefers-reduced-motion: reduce) {
+  :global(.webchat)
+    .send-box-attachment-bar-item.send-box-attachment-bar-item--as-thumbnail:not(:hover):not(:focus-within)
+    .send-box-attachment-bar-item__delete-button {
+    opacity: 0;
+  }
+}
+/* #endregion */
+
+/* #region Preview */
+:global(.webchat) .send-box-attachment-bar-item__preview {
+  align-items: center;
+  display: grid;
+  grid-area: body;
+  overflow: hidden;
+}
+
+:global(.webchat)
+  .send-box-attachment-bar-item.send-box-attachment-bar-item--as-list-item
+  .send-box-attachment-bar-item__preview {
+  padding-inline: 8px;
+}
+/* #endregion */

package/src/SendBox/AttachmentBar/AttachmentBarItem.tsx

@@ -0,0 +1,103 @@
+import { hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { type SendBoxAttachment } from 'botframework-webchat-core';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import {
+  custom,
+  function_,
+  instance,
+  is,
+  object,
+  optional,
+  picklist,
+  pipe,
+  readonly,
+  union,
+  type InferInput
+} from 'valibot';
+
+import { useFocus } from '../../hooks';
+import testIds from '../../testIds';
+import DeleteButton from './ItemDeleteButton';
+import Preview from './ItemPreview';
+import styles from './AttachmentBarItem.module.css';
+
+const { useLocalizer } = hooks;
+
+const sendBoxAttachmentBarItemPropsSchema = pipe(
+  object({
+    attachment: pipe(
+      object({
+        blob: union([instance(Blob), instance(File)]),
+        thumbnailURL: optional(instance(URL))
+      }),
+      readonly()
+    ),
+    mode: picklist(['list item', 'thumbnail']),
+    onDelete: optional(
+      custom<(event: Readonly<{ attachment: SendBoxAttachment }>) => void>(value => is(function_(), value))
+    )
+  }),
+  readonly()
+);
+
+type SendBoxAttachmentBarItemProps = InferInput<typeof sendBoxAttachmentBarItemPropsSchema>;
+
+function SendBoxAttachmentBarItem(props: SendBoxAttachmentBarItemProps) {
+  const { attachment, mode, onDelete } = validateProps(sendBoxAttachmentBarItemPropsSchema, props);
+
+  const classNames = useStyles(styles);
+  const attachmentRef = useRefFrom(attachment);
+  const elementRef = useRef<HTMLDivElement>(null);
+  const focus = useFocus();
+  const localize = useLocalizer();
+  const onDeleteRef = useRefFrom(onDelete);
+  const shownRef = useRef<boolean>(false);
+
+  const attachmentName = useMemo(
+    () =>
+      attachment.blob instanceof File
+        ? attachment.blob.name
+        : attachment.thumbnailURL
+          ? localize('SEND_BOX_ATTACHMENT_BAR_GENERIC_IMAGE_ALT')
+          : localize('SEND_BOX_ATTACHMENT_BAR_GENERIC_FILE_ALT'),
+    [attachment, localize]
+  );
+
+  const handleDeleteButtonClick = useCallback(() => {
+    onDeleteRef.current?.({ attachment: attachmentRef.current });
+
+    // After delete, focus back to the send box.
+    focus('sendBox');
+  }, [attachmentRef, focus, onDeleteRef]);
+
+  // If the item is newly added, scroll it into view.
+  useEffect(() => {
+    if (!shownRef.current) {
+      shownRef.current = true;
+
+      elementRef.current?.scrollIntoView();
+    }
+  }, [elementRef, shownRef]);
+
+  return (
+    <div
+      className={cx(classNames['send-box-attachment-bar-item'], {
+        [classNames['send-box-attachment-bar-item--as-list-item']]: mode === 'list item',
+        [classNames['send-box-attachment-bar-item--as-thumbnail']]: mode === 'thumbnail'
+      })}
+      data-testid={testIds.sendBoxAttachmentBarItem}
+      ref={elementRef}
+      title={attachmentName}
+    >
+      <Preview attachment={attachment} attachmentName={attachmentName} mode={mode} />
+      <DeleteButton attachmentName={attachmentName} onClick={handleDeleteButtonClick} />
+    </div>
+  );
+}
+
+export default memo(SendBoxAttachmentBarItem);
+export { sendBoxAttachmentBarItemPropsSchema, type SendBoxAttachmentBarItemProps };

package/src/SendBox/AttachmentBar/ItemDeleteButton.tsx

@@ -0,0 +1,61 @@
+import { hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import React, { KeyboardEventHandler, useCallback } from 'react';
+import { function_, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import { useFocus } from '../../hooks';
+import { ComponentIcon } from '../../Icon';
+import testIds from '../../testIds';
+import styles from './AttachmentBarItem.module.css';
+
+const { useLocalizer } = hooks;
+
+const attachmentDeleteButtonPropsSchema = pipe(
+  object({
+    attachmentName: string(),
+    onClick: optional(function_())
+  }),
+  readonly()
+);
+
+type AttachmentDeleteButtonProps = InferInput<typeof attachmentDeleteButtonPropsSchema>;
+
+function AttachmentDeleteButton(props: AttachmentDeleteButtonProps) {
+  const { attachmentName, onClick } = validateProps(attachmentDeleteButtonPropsSchema, props);
+  const classNames = useStyles(styles);
+  const focus = useFocus();
+  const localize = useLocalizer();
+
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLButtonElement>>(
+    event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+
+        focus('sendBox');
+      }
+    },
+    [focus]
+  );
+
+  return (
+    <button
+      aria-label={localize('SEND_BOX_ATTACHMENT_BAR_DELETE_BUTTON_ALT', attachmentName)}
+      className={classNames['send-box-attachment-bar-item__delete-button']}
+      data-testid={testIds.sendBoxAttachmentBarItemDeleteButton}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      title={localize('SEND_BOX_ATTACHMENT_BAR_DELETE_BUTTON_TOOLTIP')}
+      type="button"
+    >
+      <ComponentIcon
+        appearance="text"
+        className={classNames['send-box-attachment-bar-item__dismiss-icon']}
+        icon="dismiss"
+      />
+    </button>
+  );
+}
+
+export default AttachmentDeleteButton;
+export { attachmentDeleteButtonPropsSchema, type AttachmentDeleteButtonProps };

package/src/SendBox/AttachmentBar/ItemPreview.tsx

@@ -0,0 +1,52 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { type SendBoxAttachment } from 'botframework-webchat-core';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import React, { memo } from 'react';
+import { object, picklist, pipe, readonly, string, type InferInput } from 'valibot';
+
+import FilePreview from './Preview/FilePreview';
+import ImagePreview from './Preview/ImagePreview';
+import { sendBoxAttachmentSchema } from './Preview/sendBoxAttachment';
+import styles from './AttachmentBarItem.module.css';
+
+const sendBoxAttachmentBarItemPreviewPropsSchema = pipe(
+  object({
+    attachment: sendBoxAttachmentSchema,
+    attachmentName: string(),
+    mode: picklist(['list item', 'thumbnail'])
+  }),
+  readonly()
+);
+
+type SendBoxAttachmentBarItemPreviewProps = InferInput<typeof sendBoxAttachmentBarItemPreviewPropsSchema>;
+
+// TODO: Turn this into middleware.
+function SendBoxAttachmentBarItemPreview(props: SendBoxAttachmentBarItemPreviewProps) {
+  const { attachment, attachmentName, mode } = validateProps(sendBoxAttachmentBarItemPreviewPropsSchema, props);
+  const classNames = useStyles(styles);
+
+  let element: React.ReactNode;
+
+  if (attachment.thumbnailURL) {
+    element = (
+      <ImagePreview
+        attachment={attachment as SendBoxAttachment & { thumbnailURL: URL }}
+        attachmentName={attachmentName}
+        mode={mode}
+      />
+    );
+  } else {
+    element = (
+      <FilePreview
+        attachment={attachment as SendBoxAttachment & { blob: File }}
+        attachmentName={attachmentName}
+        mode={mode}
+      />
+    );
+  }
+
+  return <div className={classNames['send-box-attachment-bar-item__preview']}>{element}</div>;
+}
+
+export default memo(SendBoxAttachmentBarItemPreview);
+export { sendBoxAttachmentBarItemPreviewPropsSchema, type SendBoxAttachmentBarItemPreviewProps };

package/src/SendBox/AttachmentBar/Preview/FilePreview.module.css

@@ -0,0 +1,35 @@
+:global(.webchat) .send-box-attachment-bar-item-file-preview {
+  display: grid;
+  align-items: center;
+
+  &.send-box-attachment-bar-item-file-preview--as-list-item {
+    gap: 8px;
+    grid-template-columns: auto 1fr;
+  }
+
+  &.send-box-attachment-bar-item-file-preview--as-thumbnail {
+    height: 100%;
+    width: 100%;
+  }
+
+  &.send-box-attachment-bar-item-file-preview--as-thumbnail.send-box-attachment-bar-item-file-preview--is-file {
+    --webchat__component-icon--image: url('data:image/svg+xml;utf8,<svg fill="none" height="36" viewBox="0 0 36 36" width="36" xmlns="http://www.w3.org/2000/svg"><path d="M7.386 33H28.6C28.816 33 29 32.83 29 32.628V10H23.4C22.628 10 22 9.372 22 8.6V3H7.4C7.184 3 7 3.17 7 3.372V32.642C7 32.839 7.173 33 7.386 33Z" fill="%23FFFFFF" /><path d="M28.204 9.00043L23 3.81543V8.60043C23 8.82043 23.18 9.00043 23.4 9.00043H28.204Z" fill="white" /><path clip-rule="evenodd" d="M29.613 8.993L23.018 2.421C22.7473 2.15221 22.3815 2.00095 22 2H7.4C6.628 2 6 2.615 6 3.372V32.642C6 33.39 6.622 34 7.386 34H28.6C29.372 34 30 33.385 30 32.628V9.923C30 9.577 29.86 9.237 29.613 8.993ZM23 3.815L28.204 9H23.4C23.1791 9 23 8.82091 23 8.6V3.815ZM28.6 33C28.816 33 29 32.83 29 32.628V10H23.4C22.628 10 22 9.372 22 8.6V3H7.4C7.184 3 7 3.17 7 3.372V32.642C7 32.84 7.173 33 7.386 33H28.6Z" fill="%23605E5C" fill-rule="evenodd" opacity="0.67" /></svg>');
+    --webchat__component-icon--size: 36px;
+  }
+
+  &.send-box-attachment-bar-item-file-preview--as-list-item.send-box-attachment-bar-item-file-preview--is-file {
+    --webchat__component-icon--image: url('data:image/svg+xml;utf8,<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 15H12.5C12.775 15 13 14.775 13 14.5V5H11.5C10.673 5 10 4.327 10 3.5V1H3.5C3.225 1 3 1.225 3 1.5V14.5C3 14.775 3.225 15 3.5 15Z" fill="%23FCFCFC" /><path d="M13 4V3.914C13.0004 3.78156 12.9478 3.65446 12.854 3.561L11 1.707V3.5C11 3.775 11.225 4 11.5 4H13Z" fill="%23FCFCFC" /><path clip-rule="evenodd" d="M13.56 2.853L11.146 0.44C10.8643 0.159539 10.4835 0.00143923 10.086 0H3.5C2.673 0 2 0.673 2 1.5V14.5C2 15.327 2.673 16 3.5 16H12.5C13.327 16 14 15.327 14 14.5V3.914C14 3.514 13.844 3.137 13.56 2.854V2.853ZM12.853 3.561C12.948 3.655 13 3.781 13 3.914V4H11.5C11.2241 3.99945 11.0006 3.77591 11 3.5V1.707L12.854 3.561H12.853ZM3.5 15H12.5C12.775 15 13 14.775 13 14.5V5H11.5C10.673 5 10 4.327 10 3.5V1H3.5C3.225 1 3 1.225 3 1.5V14.5C3.00055 14.7759 3.22409 14.9994 3.5 15Z" fill="%23616161" fill-rule="evenodd" opacity="0.67" /></svg>');
+    --webchat__component-icon--size: 16px;
+  }
+
+  &.send-box-attachment-bar-item-file-preview--is-image {
+    --webchat__component-icon--image: url('data:image/svg+xml;utf8,<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 14H13.5C13.775 14 14 13.775 14 13.5V2.5C14 2.225 13.775 2 13.5 2H2.5C2.225 2 2 2.225 2 2.5V13.5C2 13.775 2.225 14 2.5 14Z" fill="%23FCFCFC" /><path clip-rule="evenodd" d="M9.27768 8.63L8.66968 9.476L7.38468 7.792C7.19551 7.54408 6.90152 7.39861 6.58968 7.39861C6.27784 7.39861 5.98385 7.54408 5.79468 7.792L4.18968 9.893C3.95877 10.1953 3.91939 10.6024 4.08807 10.9434C4.25675 11.2844 4.60427 11.5001 4.98468 11.5H11.0137C11.3887 11.4997 11.7321 11.2896 11.903 10.9557C12.074 10.6219 12.0437 10.2205 11.8247 9.916L10.9007 8.63C10.7128 8.36861 10.4106 8.21365 10.0887 8.21365C9.76678 8.21365 9.46456 8.36861 9.27668 8.63H9.27768Z" fill="%23FCFCFC" fill-rule="evenodd" stroke="%23A6CCC3" /><path clip-rule="evenodd" d="M10.5 6.5C11.0523 6.5 11.5 6.05228 11.5 5.5C11.5 4.94772 11.0523 4.5 10.5 4.5C9.94772 4.5 9.5 4.94772 9.5 5.5C9.5 6.05228 9.94772 6.5 10.5 6.5Z" fill-rule="evenodd" stroke="%23FF9810" /><path clip-rule="evenodd" d="M2.5 15H13.5C14.327 15 15 14.327 15 13.5V2.5C15 1.673 14.327 1 13.5 1H2.5C1.673 1 1 1.673 1 2.5V13.5C1 14.327 1.673 15 2.5 15ZM2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5Z" fill="%23616161" fill-rule="evenodd" opacity="0.67" /></svg>');
+    --webchat__component-icon--size: 16px;
+  }
+
+  .send-box-attachment-bar-item-file-preview__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}