feat: introduce WithDragAndDropUpload component (#2688)

### 🎯 Goal

Current `Channel.dragAndDropWindow` and
`Channel.optionalMessageInputProps` architecture which used to allow
drag&drop file upload by dropping files onto the message list (channel)
component suffers from a few pain points:
- duplicate `MessageInputContextProvider` initialization, see
[here](https://github.com/GetStream/stream-chat-react/blob/5fa6b0fc239a7d48032ae4c3d34e29969c52bd0c/src/components/Channel/Channel.tsx#L1479-L1484),
[here](https://github.com/GetStream/stream-chat-react/blob/5fa6b0fc239a7d48032ae4c3d34e29969c52bd0c/src/components/MessageInput/MessageInput.tsx#L137-L159)
and
[here](https://github.com/GetStream/stream-chat-react/blob/5fa6b0fc239a7d48032ae4c3d34e29969c52bd0c/src/components/MessageInput/DropzoneProvider.tsx#L47-L67)
([related
issue](https://getstream.slack.com/archives/C02R5UCGN6N/p1740392263047589))
- broken styling ([v2 vendor
folder](https://github.com/GetStream/stream-chat-css/tree/v5.8.0/src/v2/styles/vendor)
is missing [react-file-utils
styling](https://github.com/GetStream/stream-chat-css/blob/v5.8.0/src/vendor/react-file-utils.scss))

New solution allows dragging and uploading files both in "channel" and
in thread individually - which was previously impossible. The new
solution also reuses drag and drop styling which is used by default in
`MessageInputFlat` component (some minor adjustments from integrators
are needed - such as setting relative positioning on required parents).

#### Old API:

```tsx
<Channel dragAndDropWindow>
  <Window>
    <ChannelHeader />
    <MessageList />
    <AIStateIndicator />
    <MessageInput focus />
  </Window>
  <Thread virtualized />
</Channel>
```

#### New API:

```tsx
<Channel>
  <WithDragAndDropUpload className='str-chat__main-panel'>
    <ChannelHeader/>
    <MessageList />
    <AIStateIndicator />
    <MessageInput focus />
  </WithDragAndDropUpload>
  <WithDragAndDropUpload>
    <Thread virtualized />
  </WithDragAndDropUpload>
</Channel>
```

### Deprecations

#### Public

- `Channel.dragAndDropWindow` prop (will remove in v13)
- `Channel.optionalMessageInputProps` prop (will remove in v13)

#### Private

- `DropzoneProvider`
- `DropzoneInner`
- `ImageDropzone`

Note: This is not a direct fix of the issue I mentioned above (Slack
link), I believe the proper fix is to move away from this messy
architecture (by removing deprecated components and options which we'll
do in v13 once this PR is merged).

THIS PR RELIES ON [CSS
CHANGES](GetStream/stream-chat-css#329)

### 🎨 UI Changes
Before:

![image](https://github.com/user-attachments/assets/0514c338-8d52-44d8-aecd-60bf86acdee2)
After:

![image](https://github.com/user-attachments/assets/3afd1468-d552-4180-9be6-b9ffbe503526)

Author: arnautov-anton

src/components/Channel/Channel.tsx

@@ -212,7 +212,10 @@ export type ChannelProps<
     updatedMessage: UpdatedMessage<StreamChatGenerics>,
     options?: UpdateMessageOptions,
   ) => ReturnType<StreamChat<StreamChatGenerics>['updateMessage']>;
-  /** If true, chat users will be able to drag and drop file uploads to the entire channel window */
+  /**
+   * @deprecated Use `WithDragAndDropUpload` instead (wrap draggable-to elements with this component).
+   * @description If true, chat users will be able to drag and drop file uploads to the entire channel window
+   */
   dragAndDropWindow?: boolean;
   /** Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component */
   EmptyPlaceholder?: React.ReactElement;
@@ -246,7 +249,10 @@ export type ChannelProps<
   onMentionsClick?: OnMentionAction<StreamChatGenerics>;
   /** Custom action handler function to run on hover of an @mention in a message */
   onMentionsHover?: OnMentionAction<StreamChatGenerics>;
-  /** If `dragAndDropWindow` prop is true, the props to pass to the MessageInput component (overrides props placed directly on MessageInput) */
+  /**
+   * @deprecated Use `WithDragAndDropUpload` instead (wrap draggable-to elements with this component).
+   * @description If `dragAndDropWindow` prop is `true`, the props to pass to the `MessageInput` component (overrides props placed directly on `MessageInput`)
+   */
   optionalMessageInputProps?: MessageInputProps<StreamChatGenerics, V>;
   /** You can turn on/off thumbnail generation for video attachments */
   shouldGenerateVideoThumbnail?: boolean;

src/components/MessageInput/MessageInput.tsx

@@ -26,6 +26,7 @@ import type {
 } from '../../types/types';
 import type { URLEnrichmentConfig } from './hooks/useLinkPreviews';
 import type { CustomAudioRecordingConfig } from '../MediaRecorder';
+import { useHandleDragAndDropQueuedFiles } from './WithDragAndDropUpload';
 
 export type EmojiSearchIndexResult = {
   id: string;
@@ -151,6 +152,9 @@ const MessageInputProvider = <
     emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex,
   });
 
+  // @ts-expect-error generics to be removed
+  useHandleDragAndDropQueuedFiles(messageInputContextValue);
+
   return (
     <MessageInputContextProvider<StreamChatGenerics, V> value={messageInputContextValue}>
       {props.children}

src/components/MessageInput/MessageInputFlat.tsx

@@ -1,7 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { Event } from 'stream-chat';
-import clsx from 'clsx';
-import { useDropzone } from 'react-dropzone';
 import {
   AttachmentSelector as DefaultAttachmentSelector,
   SimpleAttachmentSelector,
@@ -28,17 +26,16 @@ import { RecordingAttachmentType } from '../MediaRecorder/classes';
 import { useChatContext } from '../../context/ChatContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
-import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { AIStates, useAIState } from '../AIStateIndicator';
+import { WithDragAndDropUpload } from './WithDragAndDropUpload';
 
 export const MessageInputFlat = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
-  const { t } = useTranslationContext('MessageInputFlat');
   const {
     asyncMessagesMultiSendEnabled,
     attachments,
@@ -48,14 +45,12 @@ export const MessageInputFlat = <
     hideSendButton,
     isUploadEnabled,
     linkPreviews,
-    maxFilesLeft,
     message,
     numberOfUploads,
     parent,
     recordingController,
     setCooldownRemaining,
     text,
-    uploadNewFiles,
   } = useMessageInputContext<StreamChatGenerics>('MessageInputFlat');
 
   const {
@@ -71,11 +66,8 @@ export const MessageInputFlat = <
     StartRecordingAudioButton = DefaultStartRecordingAudioButton,
     StopAIGenerationButton: StopAIGenerationButtonOverride,
   } = useComponentContext<StreamChatGenerics>('MessageInputFlat');
-  const {
-    acceptedFiles = [],
-    multipleUploads,
-    quotedMessage,
-  } = useChannelStateContext<StreamChatGenerics>('MessageInputFlat');
+  const { quotedMessage } =
+    useChannelStateContext<StreamChatGenerics>('MessageInputFlat');
   const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
   const { channel } = useChatContext<StreamChatGenerics>('MessageInputFlat');
 
@@ -96,23 +88,6 @@ export const MessageInputFlat = <
     [attachments],
   );
 
-  const accept = useMemo(
-    () =>
-      acceptedFiles.reduce<Record<string, Array<string>>>((mediaTypeMap, mediaType) => {
-        mediaTypeMap[mediaType] ??= [];
-        return mediaTypeMap;
-      }, {}),
-    [acceptedFiles],
-  );
-
-  const { getRootProps, isDragActive, isDragReject } = useDropzone({
-    accept,
-    disabled: !isUploadEnabled || maxFilesLeft === 0,
-    multiple: multipleUploads,
-    noClick: true,
-    onDrop: uploadNewFiles,
-  });
-
   useEffect(() => {
     const handleQuotedMessageUpdate = (e: Event<StreamChatGenerics>) => {
       if (e.message?.id !== quotedMessage?.id) return;
@@ -156,90 +131,76 @@ export const MessageInputFlat = <
     !!StopAIGenerationButton;
 
   return (
-    <>
-      <div {...getRootProps({ className: 'str-chat__message-input' })}>
-        {recordingEnabled &&
-          recordingController.permissionState === 'denied' &&
-          showRecordingPermissionDeniedNotification && (
-            <RecordingPermissionDeniedNotification
-              onClose={closePermissionDeniedNotification}
-              permissionName={RecordingPermission.MIC}
-            />
-          )}
-        {findAndEnqueueURLsToEnrich && (
-          <LinkPreviewList linkPreviews={Array.from(linkPreviews.values())} />
-        )}
-        {isDragActive && (
-          <div
-            className={clsx('str-chat__dropzone-container', {
-              'str-chat__dropzone-container--not-accepted': isDragReject,
-            })}
-          >
-            {!isDragReject && <p>{t<string>('Drag your files here')}</p>}
-            {isDragReject && <p>{t<string>('Some of the files will not be accepted')}</p>}
-          </div>
+    <WithDragAndDropUpload className='str-chat__message-input' component='div'>
+      {recordingEnabled &&
+        recordingController.permissionState === 'denied' &&
+        showRecordingPermissionDeniedNotification && (
+          <RecordingPermissionDeniedNotification
+            onClose={closePermissionDeniedNotification}
+            permissionName={RecordingPermission.MIC}
+          />
         )}
-        {displayQuotedMessage && <QuotedMessagePreviewHeader />}
-
-        <div className='str-chat__message-input-inner'>
-          <AttachmentSelector />
-          <div className='str-chat__message-textarea-container'>
-            {displayQuotedMessage && (
-              <QuotedMessagePreview quotedMessage={quotedMessage} />
+      {findAndEnqueueURLsToEnrich && (
+        <LinkPreviewList linkPreviews={Array.from(linkPreviews.values())} />
+      )}
+      {displayQuotedMessage && <QuotedMessagePreviewHeader />}
+
+      <div className='str-chat__message-input-inner'>
+        <AttachmentSelector />
+        <div className='str-chat__message-textarea-container'>
+          {displayQuotedMessage && <QuotedMessagePreview quotedMessage={quotedMessage} />}
+          {isUploadEnabled &&
+            !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (
+              <AttachmentPreviewList />
             )}
-            {isUploadEnabled &&
-              !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (
-                <AttachmentPreviewList />
-              )}
 
-            <div className='str-chat__message-textarea-with-emoji-picker'>
-              <ChatAutoComplete />
+          <div className='str-chat__message-textarea-with-emoji-picker'>
+            <ChatAutoComplete />
 
-              {EmojiPicker && <EmojiPicker />}
-            </div>
+            {EmojiPicker && <EmojiPicker />}
           </div>
-          {shouldDisplayStopAIGeneration ? (
-            <StopAIGenerationButton onClick={stopGenerating} />
-          ) : (
-            !hideSendButton && (
-              <>
-                {cooldownRemaining ? (
-                  <CooldownTimer
-                    cooldownInterval={cooldownRemaining}
-                    setCooldownRemaining={setCooldownRemaining}
+        </div>
+        {shouldDisplayStopAIGeneration ? (
+          <StopAIGenerationButton onClick={stopGenerating} />
+        ) : (
+          !hideSendButton && (
+            <>
+              {cooldownRemaining ? (
+                <CooldownTimer
+                  cooldownInterval={cooldownRemaining}
+                  setCooldownRemaining={setCooldownRemaining}
+                />
+              ) : (
+                <>
+                  <SendButton
+                    disabled={
+                      !numberOfUploads &&
+                      !text.length &&
+                      attachments.length - failedUploadsCount === 0
+                    }
+                    sendMessage={handleSubmit}
                   />
-                ) : (
-                  <>
-                    <SendButton
+                  {recordingEnabled && (
+                    <StartRecordingAudioButton
                       disabled={
-                        !numberOfUploads &&
-                        !text.length &&
-                        attachments.length - failedUploadsCount === 0
+                        isRecording ||
+                        (!asyncMessagesMultiSendEnabled &&
+                          attachments.some(
+                            (a) => a.type === RecordingAttachmentType.VOICE_RECORDING,
+                          ))
                       }
-                      sendMessage={handleSubmit}
+                      onClick={() => {
+                        recordingController.recorder?.start();
+                        setShowRecordingPermissionDeniedNotification(true);
+                      }}
                     />
-                    {recordingEnabled && (
-                      <StartRecordingAudioButton
-                        disabled={
-                          isRecording ||
-                          (!asyncMessagesMultiSendEnabled &&
-                            attachments.some(
-                              (a) => a.type === RecordingAttachmentType.VOICE_RECORDING,
-                            ))
-                        }
-                        onClick={() => {
-                          recordingController.recorder?.start();
-                          setShowRecordingPermissionDeniedNotification(true);
-                        }}
-                      />
-                    )}
-                  </>
-                )}
-              </>
-            )
-          )}
-        </div>
+                  )}
+                </>
+              )}
+            </>
+          )
+        )}
       </div>
-    </>
+    </WithDragAndDropUpload>
   );
 };