fix: separate DropzoneContainer styling from MessageInput #329
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
arnautov-anton
force-pushed
the
fix/separate-dropzone-container-styling
branch
from
083e8fe to
6dee5bc
Compare
MartinCupela
approved these changes
Apr 24, 2025
oliverlaz
approved these changes
Apr 24, 2025
arnautov-anton
added a commit
to GetStream/stream-chat-react
that referenced
this pull request
Apr 24, 2025
### 🎯 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:  After: 
github-actions bot
pushed a commit
that referenced
this pull request
Apr 24, 2025
## [5.8.1](v5.8.0...v5.8.1) (2025-04-24) ### Bug Fixes * separate DropzoneContainer styling from MessageInput ([#329](#329)) ([f6dbc78](f6dbc78))
|
🎉 This PR is included in version 5.8.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
MartinCupela
pushed a commit
to GetStream/stream-chat-react
that referenced
this pull request
May 8, 2025
### 🎯 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:  After: 
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎯 Goal
Ref: GetStream/stream-chat-react#2688
Notable Changes:
DragAmdDropContainer-layouttoDragAndDropContainer-layout