botframework-webchat-component 4.18.2 → 4.19.0

package/src/SendBox/AttachmentBar/Preview/FilePreview.tsx

@@ -0,0 +1,63 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { object, picklist, pipe, readonly, string, type InferInput } from 'valibot';
+
+import { ComponentIcon } from '../../../Icon';
+import { sendBoxAttachmentSchema } from './sendBoxAttachment';
+import styles from './FilePreview.module.css'; // Added import for css modules
+
+const sendBoxAttachmentBarItemFileAttachmentPreviewPropsSchema = pipe(
+  object({
+    attachment: sendBoxAttachmentSchema,
+    attachmentName: string(),
+    mode: picklist(['list item', 'thumbnail'])
+  }),
+  readonly()
+);
+
+type SendBoxAttachmentBarItemFileAttachmentPreviewProps = InferInput<
+  typeof sendBoxAttachmentBarItemFileAttachmentPreviewPropsSchema
+>;
+
+function SendBoxAttachmentBarItemFileAttachmentPreview(props: SendBoxAttachmentBarItemFileAttachmentPreviewProps) {
+  const { attachment, mode, attachmentName } = validateProps(
+    sendBoxAttachmentBarItemFileAttachmentPreviewPropsSchema,
+    props
+  );
+
+  const classNames = useStyles(styles);
+
+  return mode === 'list item' ? (
+    <div
+      className={cx(
+        classNames['send-box-attachment-bar-item-file-preview'],
+        classNames['send-box-attachment-bar-item-file-preview--as-list-item'],
+        {
+          [classNames['send-box-attachment-bar-item-file-preview--is-file']]: !attachment.thumbnailURL,
+          [classNames['send-box-attachment-bar-item-file-preview--is-image']]: attachment.thumbnailURL
+        }
+      )}
+    >
+      <ComponentIcon />
+      <div className={classNames['send-box-attachment-bar-item-file-preview__text']}>{attachmentName}</div>
+    </div>
+  ) : (
+    <div
+      className={cx(
+        classNames['send-box-attachment-bar-item-file-preview'],
+        classNames['send-box-attachment-bar-item-file-preview--as-thumbnail'],
+        classNames['send-box-attachment-bar-item-file-preview--is-file']
+      )}
+    >
+      <ComponentIcon />
+    </div>
+  );
+}
+
+export default memo(SendBoxAttachmentBarItemFileAttachmentPreview);
+export {
+  sendBoxAttachmentBarItemFileAttachmentPreviewPropsSchema,
+  type SendBoxAttachmentBarItemFileAttachmentPreviewProps
+};

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

@@ -0,0 +1,5 @@
+:global(.webchat) .send-box-attachment-bar-item-image-preview {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}

package/src/SendBox/AttachmentBar/Preview/ImagePreview.tsx

@@ -0,0 +1,46 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+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 './FilePreview';
+import { sendBoxAttachmentSchema } from './sendBoxAttachment';
+import styles from './ImagePreview.module.css';
+
+const sendBoxAttachmentBarItemImageAttachmentPreviewPropsSchema = pipe(
+  object({
+    attachment: sendBoxAttachmentSchema,
+    attachmentName: string(),
+    mode: picklist(['list item', 'thumbnail'])
+  }),
+  readonly()
+);
+
+type SendBoxAttachmentBarItemImageAttachmentPreviewProps = InferInput<
+  typeof sendBoxAttachmentBarItemImageAttachmentPreviewPropsSchema
+>;
+
+function SendBoxAttachmentBarItemImageAttachmentPreview(props: SendBoxAttachmentBarItemImageAttachmentPreviewProps) {
+  const { attachment, mode, attachmentName } = validateProps(
+    sendBoxAttachmentBarItemImageAttachmentPreviewPropsSchema,
+    props
+  );
+
+  const classNames = useStyles(styles); // Renamed to avoid conflict with classnames import
+
+  return mode === 'list item' ? (
+    <FilePreview attachment={attachment} attachmentName={attachmentName} mode={mode} />
+  ) : (
+    <img
+      alt={attachmentName}
+      className={classNames['send-box-attachment-bar-item-image-preview']}
+      src={attachment.thumbnailURL.href}
+    />
+  );
+}
+
+export default memo(SendBoxAttachmentBarItemImageAttachmentPreview);
+export {
+  sendBoxAttachmentBarItemImageAttachmentPreviewPropsSchema,
+  type SendBoxAttachmentBarItemImageAttachmentPreviewProps
+};

package/src/SendBox/AttachmentBar/Preview/sendBoxAttachment.ts

@@ -0,0 +1,13 @@
+import { type InferInput, instance, object, optional, pipe, readonly, union } from 'valibot';
+
+const sendBoxAttachmentSchema = pipe(
+  object({
+    blob: union([instance(Blob), instance(File)]),
+    thumbnailURL: optional(instance(URL))
+  }),
+  readonly()
+);
+
+type SendBoxAttachment = InferInput<typeof sendBoxAttachmentSchema>;
+
+export { sendBoxAttachmentSchema, type SendBoxAttachment };

package/src/SendBox/AttachmentBar/index.ts

@@ -0,0 +1,3 @@
+import AttachmentBar from './AttachmentBar';
+
+export { AttachmentBar };

package/src/SendBox/AutoResizeTextArea.tsx

@@ -1,37 +1,39 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, {
   ChangeEventHandler,
   FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
-  ReactEventHandler
+  ReactEventHandler,
+  type MouseEventHandler
 } from 'react';
 
 import AccessibleTextArea from '../Utils/AccessibleTextArea';
 import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 import useStyleSet from '../hooks/useStyleSet';
 
-type AutoResizeTextAreaProps = {
-  'aria-errormessage'?: string;
-  'aria-label'?: string;
-  className?: string;
-  'data-id'?: string;
-  disabled?: boolean;
-  enterKeyHint?: string;
-  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-  onFocus?: FocusEventHandler<HTMLTextAreaElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
-  onKeyDownCapture?: KeyboardEventHandler<HTMLTextAreaElement>;
-  onKeyPress?: KeyboardEventHandler<HTMLTextAreaElement>;
-  onSelect?: ReactEventHandler<HTMLTextAreaElement>;
-  placeholder?: string;
-  readOnly?: boolean;
-  rows?: number;
-  textAreaClassName?: string;
-  value?: string;
-};
+type AutoResizeTextAreaProps = Readonly<{
+  'aria-errormessage'?: string | undefined;
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+  'data-id'?: string | undefined;
+  'data-testid'?: string | undefined;
+  disabled?: boolean | undefined;
+  enterKeyHint?: string | undefined;
+  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement> | undefined;
+  onClick?: MouseEventHandler<HTMLTextAreaElement> | undefined;
+  onFocus?: FocusEventHandler<HTMLTextAreaElement> | undefined;
+  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+  onKeyDownCapture?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+  onKeyPress?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+  onSelect?: ReactEventHandler<HTMLTextAreaElement> | undefined;
+  placeholder?: string | undefined;
+  readOnly?: boolean | undefined;
+  rows?: number | undefined;
+  textAreaClassName?: string | undefined;
+  value?: string | undefined;
+}>;
 
 const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaProps>(
   (
@@ -40,10 +42,12 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
       'aria-label': ariaLabel,
       className,
       'data-id': dataId,
+      'data-testid': dataTestId,
       disabled,
       enterKeyHint,
       inputMode,
       onChange,
+      onClick,
       onFocus,
       onKeyDown,
       onKeyDownCapture,
@@ -72,9 +76,11 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
           aria-label={ariaLabel}
           className={classNames('webchat__auto-resize-textarea__textarea', textAreaClassName)}
           data-id={dataId}
+          data-testid={dataTestId}
           disabled={disabled}
           inputMode={inputMode}
           onChange={onChange}
+          onClick={onClick}
           onFocus={onFocus}
           onKeyDown={onKeyDown}
           onKeyDownCapture={onKeyDownCapture}
@@ -91,46 +97,4 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
   }
 );
 
-AutoResizeTextArea.defaultProps = {
-  'aria-errormessage': undefined,
-  'aria-label': undefined,
-  'data-id': undefined,
-  className: undefined,
-  disabled: undefined,
-  enterKeyHint: undefined,
-  inputMode: undefined,
-  onChange: undefined,
-  onFocus: undefined,
-  onKeyDown: undefined,
-  onKeyDownCapture: undefined,
-  onKeyPress: undefined,
-  onSelect: undefined,
-  placeholder: undefined,
-  readOnly: undefined,
-  rows: undefined,
-  textAreaClassName: undefined,
-  value: ''
-};
-
-AutoResizeTextArea.propTypes = {
-  'aria-errormessage': PropTypes.string,
-  'aria-label': PropTypes.string,
-  className: PropTypes.string,
-  'data-id': PropTypes.string,
-  disabled: PropTypes.bool,
-  enterKeyHint: PropTypes.string,
-  inputMode: PropTypes.oneOf(['text', 'none', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyDownCapture: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  onSelect: PropTypes.func,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  rows: PropTypes.number,
-  textAreaClassName: PropTypes.string,
-  value: PropTypes.string
-};
-
 export default AutoResizeTextArea;

package/src/SendBox/BasicSendBox.tsx

@@ -1,68 +1,132 @@
 import { SendBoxToolbarMiddlewareProxy, hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { Constants } from 'botframework-webchat-core';
 import classNames from 'classnames';
-import React, { FC } from 'react';
+import React, { memo, useCallback, type ClipboardEventHandler } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import useMakeThumbnail from '../hooks/useMakeThumbnail';
 import useStyleSet from '../hooks/useStyleSet';
 import useWebSpeechPonyfill from '../hooks/useWebSpeechPonyfill';
 import useErrorMessageId from '../providers/internal/SendBox/useErrorMessageId';
+import useSubmit from '../providers/internal/SendBox/useSubmit';
+import { AttachmentBar } from './AttachmentBar/index';
 import DictationInterims from './DictationInterims';
+import DropZone from './DropZone';
 import MicrophoneButton from './MicrophoneButton';
 import SendButton from './SendButton';
 import SuggestedActions from './SuggestedActions';
 import TextBox from './TextBox';
 
-import type { WebChatActivity } from 'botframework-webchat-core';
-
 const {
   DictateState: { DICTATING, STARTING }
 } = Constants;
 
-const { useActivities, useDirection, useDictateState, useStyleOptions } = hooks;
+const { useDirection, useDictateState, useSendBoxAttachments, useStyleOptions, useUIState } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__send-box': {
+    display: 'grid',
+    gridTemplateAreas: '"suggested-actions" "content"',
+    gridTemplateRows: 'auto 1fr',
+
+    '& .webchat__suggested-actions': {
+      gridArea: 'suggested-actions',
+      minWidth: '0'
+    },
+
+    '& .webchat__send-box__main': {
+      gridArea: 'content',
+      minWidth: '0'
+    },
+
+    '& .webchat__drop-zone': {
+      gridArea: 'content',
+      minWidth: '0'
+    },
+
     '& .webchat__send-box__button': { flexShrink: 0 },
     '& .webchat__send-box__dictation-interims': { flex: 10000 },
-    '& .webchat__send-box__main': { display: 'flex' },
     '& .webchat__send-box__microphone-button': { flex: 1 },
     '& .webchat__send-box__text-box': { flex: 10000 }
   }
 };
 
-// TODO: [P3] We should consider exposing core/src/definitions and use it instead
-function activityIsSpeakingOrQueuedToSpeak(activity: WebChatActivity) {
-  return activity.type === 'message' && activity.channelData?.speak;
-}
-
 function useSendBoxSpeechInterimsVisible(): [boolean] {
-  const [activities] = useActivities();
   const [dictateState] = useDictateState();
 
-  return [
-    (dictateState === STARTING || dictateState === DICTATING) &&
-      !activities.filter(activityIsSpeakingOrQueuedToSpeak).length
-  ];
+  return [dictateState === STARTING || dictateState === DICTATING];
 }
 
-type BasicSendBoxProps = Readonly<{
-  className?: string;
-}>;
+const basicSendBoxPropsSchema = pipe(
+  object({
+    className: optional(string())
+  }),
+  readonly()
+);
+
+type BasicSendBoxProps = InferInput<typeof basicSendBoxPropsSchema>;
+
+function BasicSendBox(props: BasicSendBoxProps) {
+  const { className } = validateProps(basicSendBoxPropsSchema, props);
 
-const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
-  const [{ sendBoxButtonAlignment }] = useStyleOptions();
+  const [{ disableFileUpload, sendAttachmentOn, sendBoxButtonAlignment }] = useStyleOptions();
   const [{ sendBox: sendBoxStyleSet }] = useStyleSet();
   const [{ SpeechRecognition = undefined } = {}] = useWebSpeechPonyfill();
   const [direction] = useDirection();
   const [errorMessageId] = useErrorMessageId();
+  const [sendBoxAttachments, setSendBoxAttachments] = useSendBoxAttachments();
   const [speechInterimsVisible] = useSendBoxSpeechInterimsVisible();
+  const [uiState] = useUIState();
+  const makeThumbnail = useMakeThumbnail();
   const styleToEmotionObject = useStyleToEmotionObject();
+  const submit = useSubmit();
 
   const rootClassName = styleToEmotionObject(ROOT_STYLE) + '';
 
+  const disabled = uiState === 'disabled';
+  const sendAttachmentOnRef = useRefFrom(sendAttachmentOn);
+  const sendBoxAttachmentsRef = useRefFrom(sendBoxAttachments);
+
   const supportSpeechRecognition = !!SpeechRecognition;
 
+  const handleAddFiles = useCallback(
+    async (inputFiles: readonly File[]) => {
+      const newAttachments = Object.freeze(
+        await Promise.all(
+          inputFiles.map(file =>
+            makeThumbnail(file).then(thumbnailURL =>
+              Object.freeze({ blob: file, ...(thumbnailURL && { thumbnailURL }) })
+            )
+          )
+        )
+      );
+
+      setSendBoxAttachments(Object.freeze([].concat(sendBoxAttachmentsRef.current, newAttachments)));
+
+      sendAttachmentOnRef.current === 'attach' && submit();
+    },
+    [makeThumbnail, sendAttachmentOnRef, sendBoxAttachmentsRef, setSendBoxAttachments, submit]
+  );
+
+  const handlePaste = useCallback<ClipboardEventHandler>(
+    event => {
+      if (disableFileUpload || disabled) {
+        return;
+      }
+
+      const { files } = event.clipboardData;
+
+      if (files.length) {
+        event.preventDefault();
+        handleAddFiles(Object.freeze(Array.from(files)));
+      }
+    },
+    [disabled, disableFileUpload, handleAddFiles]
+  );
+
   const buttonClassName = classNames('webchat__send-box__button', {
     'webchat__send-box__button--align-bottom': sendBoxButtonAlignment === 'bottom',
     'webchat__send-box__button--align-stretch': sendBoxButtonAlignment !== 'bottom' && sendBoxButtonAlignment !== 'top',
@@ -71,30 +135,35 @@ const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
 
   return (
     <div
+      aria-describedby={errorMessageId}
       aria-errormessage={errorMessageId}
       aria-invalid={!!errorMessageId}
       className={classNames('webchat__send-box', sendBoxStyleSet + '', rootClassName + '', (className || '') + '')}
       dir={direction}
+      onPaste={handlePaste}
       role="form"
     >
       <SuggestedActions />
       <div className="webchat__send-box__main">
+        <AttachmentBar className="webchat__send-box__attachment-bar" />
         <SendBoxToolbarMiddlewareProxy className={buttonClassName} request={undefined} />
-        {speechInterimsVisible ? (
-          <DictationInterims className="webchat__send-box__dictation-interims" />
-        ) : (
-          <TextBox className="webchat__send-box__text-box" />
-        )}
+        <div className="webchat__send-box__editable">
+          {speechInterimsVisible ? (
+            <DictationInterims className="webchat__send-box__dictation-interims" />
+          ) : (
+            <TextBox className="webchat__send-box__text-box" />
+          )}
+        </div>
         {supportSpeechRecognition ? (
           <MicrophoneButton className={classNames(buttonClassName, 'webchat__send-box__microphone-button')} />
         ) : (
           <SendButton className={buttonClassName} />
         )}
       </div>
+      {!disableFileUpload && !disabled && <DropZone onFilesAdded={handleAddFiles} />}
     </div>
   );
-};
-
-export default BasicSendBox;
+}
 
-export { useSendBoxSpeechInterimsVisible };
+export default memo(BasicSendBox);
+export { basicSendBoxPropsSchema, useSendBoxSpeechInterimsVisible, type BasicSendBoxProps };

package/src/SendBox/DictationInterims.tsx

@@ -1,13 +1,15 @@
 /* eslint react/no-array-index-key: "off" */
 
-import { Constants } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { Constants } from 'botframework-webchat-core';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import testIds from '../testIds';
 
 const {
   DictateState: { DICTATING, STARTING, STOPPING }
@@ -20,11 +22,18 @@ const ROOT_STYLE = {
   display: 'flex'
 };
 
-type DictationInterimsProps = {
-  className?: string;
-};
+const dictationInterimsPropsSchema = pipe(
+  object({
+    className: optional(string())
+  }),
+  readonly()
+);
+
+type DictationInterimsProps = InferInput<typeof dictationInterimsPropsSchema>;
+
+function DictationInterims(props: DictationInterimsProps) {
+  const { className } = validateProps(dictationInterimsPropsSchema, props);
 
-const DictationInterims: FC<DictationInterimsProps> = ({ className }) => {
   const [dictateInterims] = useDictateInterims();
   const [dictateState] = useDictateState();
   const [{ dictationInterims: dictationInterimsStyleSet }] = useStyleSet();
@@ -32,13 +41,19 @@ const DictationInterims: FC<DictationInterimsProps> = ({ className }) => {
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   return dictateState === STARTING || dictateState === STOPPING ? (
-    <p className={classNames(dictationInterimsStyleSet + '', rootClassName, (className || '') + '', 'status')}>
+    <p
+      className={classNames(dictationInterimsStyleSet + '', rootClassName, className, 'status')}
+      data-testid={testIds.sendBoxSpeechBox}
+    >
       {dictateState === STARTING && localize('SPEECH_INPUT_STARTING')}
     </p>
   ) : (
     dictateState === DICTATING &&
       (dictateInterims.length ? (
-        <p className={classNames(dictationInterimsStyleSet + '', rootClassName, (className || '') + '', 'dictating')}>
+        <p
+          className={classNames(dictationInterimsStyleSet + '', rootClassName, className, 'dictating')}
+          data-testid={testIds.sendBoxSpeechBox}
+        >
           {dictateInterims.map((interim, index) => (
             <span key={index}>
               {interim}
@@ -47,22 +62,18 @@ const DictationInterims: FC<DictationInterimsProps> = ({ className }) => {
           ))}
         </p>
       ) : (
-        <p className={classNames(dictationInterimsStyleSet + '', rootClassName, (className || '') + '', 'status')}>
+        <p
+          className={classNames(dictationInterimsStyleSet + '', rootClassName, className, 'status')}
+          data-testid={testIds.sendBoxSpeechBox}
+        >
           {localize('SPEECH_INPUT_LISTENING')}
         </p>
       ))
   );
-};
-
-DictationInterims.defaultProps = {
-  className: ''
-};
-
-DictationInterims.propTypes = {
-  className: PropTypes.string
-};
+}
 
 // TODO: [P3] After speech started, when clicking on the transcript, it should
 //       stop the dictation and allow the user to type-correct the transcript
 
-export default DictationInterims;
+export default memo(DictationInterims);
+export { dictationInterimsPropsSchema, type DictationInterimsProps };

package/src/SendBox/DropZone.tsx

@@ -0,0 +1,64 @@
+import { hooks } from 'botframework-webchat-api';
+import { useFileDropZone } from '@msinternal/botframework-webchat-react-hooks';
+import React, { memo } from 'react';
+
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import testIds from '../testIds';
+
+const { useLocalizer } = hooks;
+
+const DROP_ZONE_STYLE = {
+  '&.webchat__drop-zone': {
+    backdropFilter: 'blur(4px)',
+    backgroundColor: 'rgba(0, 0, 0, 0.08)',
+    border: '2px dashed #999',
+    borderRadius: 4,
+    cursor: 'copy',
+    display: 'grid',
+    gap: 8,
+    placeContent: 'center',
+    placeItems: 'center',
+    transition: 'background-color 0.2s ease',
+
+    '&.webchat__drop-zone--droppable': {
+      backgroundColor: 'rgba(0, 120, 212, 0.15)',
+      borderColor: '#0078d4'
+    }
+  }
+};
+
+const DROP_ZONE_TEXT_STYLE = {
+  '&.webchat__drop-zone__text': {
+    fontSize: 14,
+    fontWeight: 600,
+    pointerEvents: 'none' as const
+  }
+};
+
+type DropZoneProps = Readonly<{
+  onFilesAdded: (files: File[]) => void;
+}>;
+
+function DropZone({ onFilesAdded }: DropZoneProps) {
+  const { dropZoneRef, dropZoneState, handleDragOver, handleDrop } = useFileDropZone(onFilesAdded);
+  const localize = useLocalizer();
+  const styleToEmotionObject = useStyleToEmotionObject();
+  const dropZoneClassName = styleToEmotionObject(DROP_ZONE_STYLE) + '';
+  const dropZoneTextClassName = styleToEmotionObject(DROP_ZONE_TEXT_STYLE) + '';
+
+  return dropZoneState ? (
+    <div
+      className={`webchat__drop-zone ${dropZoneClassName}${dropZoneState === 'droppable' ? ' webchat__drop-zone--droppable' : ''}`}
+      data-testid={testIds.sendBoxDropZone}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      ref={dropZoneRef}
+    >
+      <span className={`webchat__drop-zone__text ${dropZoneTextClassName}`}>{localize('TEXT_INPUT_DROP_ZONE')}</span>
+    </div>
+  ) : null;
+}
+
+DropZone.displayName = 'DropZone';
+
+export default memo(DropZone);